/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } .limit-one-line, #article-container .flink .flink-item-name, #article-container .flink .flink-item-desc, #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, .site-data > a .headline, #nav #blog-info, #pagination .prev_info, #pagination .next_info, #sidebar #sidebar-menus .menus_items .site-page { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .limit-more-line, .article-sort-item-title, #recent-posts > .recent-post-item >.recent-post-info > .article-title, #recent-posts > .recent-post-item >.recent-post-info > .content, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #aside-content .aside-list > .aside-list-item .content > .comment, #post-info .post-title, .relatedPosts > .relatedPosts-list .content .title, #article-container figure.gallery-group p, #article-container figure.gallery-group .gallery-group-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .fontawesomeIcon, .custom-hr:before, #article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before, #article-container hr:before, #post .post-copyright:before, #post .post-outdate-notice:before, .note:not(.no-icon)::before, .search-dialog hr:before { display: inline-block; font-weight: 600; font-family: 'Font Awesome 6 Free'; text-rendering: auto; -webkit-font-smoothing: antialiased; } .cardHover, .layout > div:first-child:not(.recent-posts), #recent-posts > .recent-post-item, #aside-content .card-widget, .layout > .recent-posts .pagination > *:not(.space) { border-radius: 8px; background: var(--card-bg); -webkit-box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .cardHover:hover, .layout > div:first-child:not(.recent-posts):hover, #recent-posts > .recent-post-item:hover, #aside-content .card-widget:hover, .layout > .recent-posts .pagination > *:not(.space):hover { -webkit-box-shadow: var(--card-hover-box-shadow); box-shadow: var(--card-hover-box-shadow); } .imgHover, .article-sort-item-img :first-child, #recent-posts > .recent-post-item .post_cover .post-bg, #aside-content .aside-list > .aside-list-item .thumbnail :first-child { width: 100%; height: 100%; -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s; -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.6s; -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.6s; -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.6s; transition: filter 375ms ease-in 0.2s, transform 0.6s; object-fit: cover; } .imgHover:hover, .article-sort-item-img :first-child:hover, #recent-posts > .recent-post-item .post_cover .post-bg:hover, #aside-content .aside-list > .aside-list-item .thumbnail :first-child:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .postImgHover:hover .cover, #pagination .prev-post:hover .cover, #pagination .next-post:hover .cover, .relatedPosts > .relatedPosts-list > div:hover .cover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .postImgHover .cover, #pagination .prev-post .cover, #pagination .next-post .cover, .relatedPosts > .relatedPosts-list > div .cover { position: absolute; width: 100%; height: 100%; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transition: all 0.6s, filter 375ms ease-in 0.2s; -moz-transition: all 0.6s, filter 375ms ease-in 0.2s; -o-transition: all 0.6s, filter 375ms ease-in 0.2s; -ms-transition: all 0.6s, filter 375ms ease-in 0.2s; transition: all 0.6s, filter 375ms ease-in 0.2s; object-fit: cover; } .list-beauty, .category-lists ul { list-style: none; } .list-beauty li, .category-lists ul li { position: relative; padding: 0.12em 0.4em 0.12em 1.4em; } .list-beauty li:hover:before, .category-lists ul li:hover:before { border-color: var(--pseudo-hover); } .list-beauty li:before, .category-lists ul li:before { position: absolute; top: 0.67em; left: 0; width: 0.43em; height: 0.43em; border: 0.215em solid #49b1f5; border-radius: 0.43em; background: transparent; content: ''; cursor: pointer; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .custom-hr, #article-container hr, .search-dialog hr { position: relative; margin: 40px auto; border: 2px dashed var(--hr-border); width: calc(100% - 4px); } .custom-hr:hover:before, #article-container hr:hover:before, .search-dialog hr:hover:before { left: calc(95% - 20px); } .custom-hr:before, #article-container hr:before, .search-dialog hr:before { position: absolute; top: -10px; left: 5%; z-index: 1; color: var(--hr-before-color); content: '\f0c4'; font-size: 20px; line-height: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #content-inner, #footer { -webkit-animation: bottom-top 1s; -moz-animation: bottom-top 1s; -o-animation: bottom-top 1s; -ms-animation: bottom-top 1s; animation: bottom-top 1s; } #page-header:not(.full_page) { -webkit-animation: header-effect 1s; -moz-animation: header-effect 1s; -o-animation: header-effect 1s; -ms-animation: header-effect 1s; animation: header-effect 1s; } #site-title, #site-subtitle { -webkit-animation: titleScale 1s; -moz-animation: titleScale 1s; -o-animation: titleScale 1s; -ms-animation: titleScale 1s; animation: titleScale 1s; } #nav.show { -webkit-animation: headerNoOpacity 1s; -moz-animation: headerNoOpacity 1s; -o-animation: headerNoOpacity 1s; -ms-animation: headerNoOpacity 1s; animation: headerNoOpacity 1s; } canvas:not(#ribbon-canvas), #web_bg { -webkit-animation: to_show 4s; -moz-animation: to_show 4s; -o-animation: to_show 4s; -ms-animation: to_show 4s; animation: to_show 4s; } #ribbon-canvas { -webkit-animation: ribbon_to_show 4s; -moz-animation: ribbon_to_show 4s; -o-animation: ribbon_to_show 4s; -ms-animation: ribbon_to_show 4s; animation: ribbon_to_show 4s; } #sidebar-menus.open > :nth-child(1) { -webkit-animation: sidebarItem 0.2s; -moz-animation: sidebarItem 0.2s; -o-animation: sidebarItem 0.2s; -ms-animation: sidebarItem 0.2s; animation: sidebarItem 0.2s; } #sidebar-menus.open > :nth-child(2) { -webkit-animation: sidebarItem 0.4s; -moz-animation: sidebarItem 0.4s; -o-animation: sidebarItem 0.4s; -ms-animation: sidebarItem 0.4s; animation: sidebarItem 0.4s; } #sidebar-menus.open > :nth-child(3) { -webkit-animation: sidebarItem 0.6s; -moz-animation: sidebarItem 0.6s; -o-animation: sidebarItem 0.6s; -ms-animation: sidebarItem 0.6s; animation: sidebarItem 0.6s; } #sidebar-menus.open > :nth-child(4) { -webkit-animation: sidebarItem 0.8s; -moz-animation: sidebarItem 0.8s; -o-animation: sidebarItem 0.8s; -ms-animation: sidebarItem 0.8s; animation: sidebarItem 0.8s; } .scroll-down-effects { -webkit-animation: scroll-down-effect 1.5s infinite; -moz-animation: scroll-down-effect 1.5s infinite; -o-animation: scroll-down-effect 1.5s infinite; -ms-animation: scroll-down-effect 1.5s infinite; animation: scroll-down-effect 1.5s infinite; } .reward-main { -webkit-animation: donate_effcet 0.3s 0.1s ease both; -moz-animation: donate_effcet 0.3s 0.1s ease both; -o-animation: donate_effcet 0.3s 0.1s ease both; -ms-animation: donate_effcet 0.3s 0.1s ease both; animation: donate_effcet 0.3s 0.1s ease both; } @-moz-keyframes scroll-down-effect { 0% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, -16px); -moz-transform: translate(0, -16px); -o-transform: translate(0, -16px); -ms-transform: translate(0, -16px); transform: translate(0, -16px); } 100% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes scroll-down-effect { 0% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, -16px); -moz-transform: translate(0, -16px); -o-transform: translate(0, -16px); -ms-transform: translate(0, -16px); transform: translate(0, -16px); } 100% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes scroll-down-effect { 0% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, -16px); -moz-transform: translate(0, -16px); -o-transform: translate(0, -16px); -ms-transform: translate(0, -16px); transform: translate(0, -16px); } 100% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes scroll-down-effect { 0% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, -16px); -moz-transform: translate(0, -16px); -o-transform: translate(0, -16px); -ms-transform: translate(0, -16px); transform: translate(0, -16px); } 100% { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes header-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes header-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes header-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes header-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes headerNoOpacity { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes headerNoOpacity { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes headerNoOpacity { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes headerNoOpacity { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bottom-top { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bottom-top { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bottom-top { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes bottom-top { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes titleScale { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes titleScale { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes titleScale { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes titleScale { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes search_close { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes search_close { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @-o-keyframes search_close { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @keyframes search_close { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @-moz-keyframes to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes to_hide { 0% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes to_hide { 0% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes to_hide { 0% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes to_hide { 0% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes ribbon_to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @-webkit-keyframes ribbon_to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @-o-keyframes ribbon_to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @keyframes ribbon_to_show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @-moz-keyframes avatar_turn_around { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes avatar_turn_around { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes avatar_turn_around { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes avatar_turn_around { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes sub_menus { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes sub_menus { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes sub_menus { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes sub_menus { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes donate_effcet { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes donate_effcet { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes donate_effcet { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes donate_effcet { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes sidebarItem { 0% { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes sidebarItem { 0% { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes sidebarItem { 0% { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes sidebarItem { 0% { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } :root { --global-font-size: 14px; --global-bg: #fff; --font-color: #4c4948; --hr-border: #a4d8fa; --hr-before-color: #80c8f8; --search-bg: #f6f8fa; --search-input-color: #4c4948; --search-a-color: #4c4948; --preloader-bg: #37474f; --preloader-color: #fff; --tab-border-color: #f0f0f0; --tab-botton-bg: #f0f0f0; --tab-botton-color: #1f2d3d; --tab-button-hover-bg: #dcdcdc; --tab-button-active-bg: #fff; --card-bg: #fff; --sidebar-bg: #f6f8fa; --btn-hover-color: #ff7242; --btn-color: #fff; --btn-bg: #49b1f5; --text-bg-hover: rgba(73,177,245,0.7); --light-grey: #eee; --dark-grey: #cacaca; --white: #fff; --text-highlight-color: #1f2d3d; --blockquote-color: #6a737d; --blockquote-bg: rgba(73,177,245,0.1); --reward-pop: #f5f5f5; --toc-link-color: #666261; --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05); --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); --pseudo-hover: #ff7242; --headline-presudo: #a0a0a0; --scrollbar-color: #49b1f5; --default-bg-color: #49b1f5; --zoom-bg: #fff; --mark-bg: rgba(0,0,0,0.3); } body { position: relative; min-height: 100%; background: var(--global-bg); color: var(--font-color); font-size: var(--global-font-size); font-family: LXGW WenKai Screen, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; line-height: 2; -webkit-tap-highlight-color: rgba(0,0,0,0); } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-color); } *::-webkit-scrollbar-track { background-color: transparent; } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color) transparent; } input::placeholder { color: var(--font-color); } h1, h2, h3, h4, h5, h6 { position: relative; margin: 20px 0 14px; color: var(--text-highlight-color); font-weight: bold; } h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: inherit !important; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .table-wrap { overflow-x: scroll; margin: 0 0 20px; } table { display: table; width: 100%; border-spacing: 0; border-collapse: collapse; empty-cells: show; } table thead { background: rgba(153,169,191,0.1); } table th, table td { padding: 6px 12px; border: 1px solid var(--light-grey); vertical-align: middle; } *::selection { background: #00c4b6; color: #f7f7f7; } button { padding: 0; outline: 0; border: none; background: none; cursor: pointer; touch-action: manipulation; } a { color: #99a9bf; text-decoration: none; word-wrap: break-word; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; overflow-wrap: break-word; } a:hover { color: #49b1f5; } .is-center { text-align: center; } .pull-left { float: left; } .pull-right { float: right; } img[src=''], img:not([src]) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .img-alt { margin: -10px 0 10px; color: #858585; } .img-alt:hover { text-decoration: none !important; } blockquote { margin: 0 0 20px; padding: 12px 15px; border-left: 3px solid #49b1f5; background-color: var(--blockquote-bg); color: var(--blockquote-color); } blockquote footer cite:before { padding: 0 5px; content: '—'; } blockquote > :last-child { margin-bottom: 0 !important; } :root { --hl-color: #eff; --hl-bg: #212121; --hltools-bg: #1c1c1c; --hltools-color: rgba(238,255,255,0.8); --hlnumber-bg: #212121; --hlnumber-color: rgba(238,255,255,0.5); --hlscrollbar-bg: #353535; --hlexpand-bg: linear-gradient(180deg, rgba(33,33,33,0.6), rgba(33,33,33,0.9)); } [data-theme='dark'] { --hl-color: rgba(255,255,255,0.7); --hl-bg: #171717; --hltools-bg: #1a1a1a; --hltools-color: #90a4ae; --hlnumber-bg: #171717; --hlnumber-color: rgba(255,255,255,0.4); --hlscrollbar-bg: #1f1f1f; --hlexpand-bg: linear-gradient(180deg, rgba(23,23,23,0.6), rgba(23,23,23,0.9)); } figure.highlight table { scrollbar-color: var(--hlscrollbar-bg) transparent; } figure.highlight table::-webkit-scrollbar-thumb { background: var(--hlscrollbar-bg); } figure.highlight pre .deletion { color: #bf42bf; } figure.highlight pre .addition { color: #105ede; } figure.highlight pre .meta { color: #c792ea; } figure.highlight pre .comment { color: #969896; } figure.highlight pre .variable, figure.highlight pre .attribute, figure.highlight pre .regexp, figure.highlight pre .ruby .constant, figure.highlight pre .xml .tag .title, figure.highlight pre .xml .pi, figure.highlight pre .xml .doctype, figure.highlight pre .html .doctype, figure.highlight pre .css .id, figure.highlight pre .tag .name, figure.highlight pre .css .class, figure.highlight pre .css .pseudo { color: #ff5370; } figure.highlight pre .tag { color: #89ddff; } figure.highlight pre .number, figure.highlight pre .preprocessor, figure.highlight pre .literal, figure.highlight pre .params, figure.highlight pre .constant, figure.highlight pre .command { color: #f78c6c; } figure.highlight pre .built_in { color: #ffcb6b; } figure.highlight pre .ruby .class .title, figure.highlight pre .css .rules .attribute, figure.highlight pre .string, figure.highlight pre .value, figure.highlight pre .inheritance, figure.highlight pre .header, figure.highlight pre .ruby .symbol, figure.highlight pre .xml .cdata, figure.highlight pre .special, figure.highlight pre .number, figure.highlight pre .formula { color: #c3e88d; } figure.highlight pre .keyword, figure.highlight pre .title, figure.highlight pre .css .hexcolor { color: #89ddff; } figure.highlight pre .function, figure.highlight pre .python .decorator, figure.highlight pre .python .title, figure.highlight pre .ruby .function .title, figure.highlight pre .ruby .title .keyword, figure.highlight pre .perl .sub, figure.highlight pre .javascript .title, figure.highlight pre .coffeescript .title { color: #82aaff; } figure.highlight pre .tag .attr, figure.highlight pre .javascript .function { color: #c792ea; } #article-container figure.highlight .line.marked { background-color: rgba(97,97,97,0.314); } #article-container figure.highlight table { display: block; overflow: auto; border: none; } #article-container figure.highlight table td { padding: 0; border: none; } #article-container figure.highlight .gutter pre { padding-right: 10px; padding-left: 10px; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); text-align: right; } #article-container figure.highlight .code pre { padding-right: 10px; padding-left: 10px; width: 100%; } #article-container pre, #article-container figure.highlight { overflow: auto; margin: 0 0 20px; padding: 0; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; } #article-container pre, #article-container code { font-size: var(--global-font-size); font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif !important; } #article-container code { padding: 2px 4px; background: rgba(27,31,35,0.05); color: #f47466; } #article-container pre { padding: 10px 20px; } #article-container pre code { padding: 0; background: none; color: var(--hl-color); text-shadow: none; } #article-container figure.highlight { position: relative; } #article-container figure.highlight pre { margin: 0; padding: 8px 0; border: none; } #article-container figure.highlight figcaption, #article-container figure.highlight .caption { padding: 6px 0 2px 14px; font-size: var(--global-font-size); line-height: 1em; } #article-container figure.highlight figcaption a, #article-container figure.highlight .caption a { float: right; padding-right: 10px; color: var(--hl-color); } #article-container figure.highlight figcaption a:hover, #article-container figure.highlight .caption a:hover { border-bottom-color: var(--hl-color); } #article-container figure.highlight.copy-true { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; -webkit-user-select: all; } #article-container figure.highlight.copy-true > table, #article-container figure.highlight.copy-true > pre { display: block !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #article-container .highlight-tools { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; min-height: 24px; height: 2.15em; background: var(--hltools-bg); color: var(--hltools-color); font-size: var(--global-font-size); } #article-container .highlight-tools.closed ~ * { display: none; } #article-container .highlight-tools.closed .expand { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(-90deg) !important; -moz-transform: rotate(-90deg) !important; -o-transform: rotate(-90deg) !important; -ms-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important; } #article-container .highlight-tools .expand { position: absolute; padding: 0.57em 0.7em; cursor: pointer; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; } #article-container .highlight-tools .expand + .code-lang { left: 1.7em; } #article-container .highlight-tools .code-lang { position: absolute; left: 14px; text-transform: uppercase; font-weight: bold; font-size: 1.15em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } #article-container .highlight-tools .copy-notice { position: absolute; right: 2.4em; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; -ms-transition: opacity 0.4s; transition: opacity 0.4s; } #article-container .highlight-tools .copy-button { position: absolute; right: 14px; cursor: pointer; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; } #article-container .highlight-tools .copy-button:hover { color: #49b1f5; } #article-container .gutter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } #article-container .gist table { width: auto; } #article-container .gist table td { border: none; } @-moz-keyframes code-expand-key { 0% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } 50% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @-webkit-keyframes code-expand-key { 0% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } 50% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @-o-keyframes code-expand-key { 0% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } 50% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } @keyframes code-expand-key { 0% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } 50% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } 100% { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } } .article-sort { margin-left: 10px; padding-left: 20px; border-left: 2px solid #aadafa; } .article-sort-title { position: relative; margin-left: 10px; padding-bottom: 20px; padding-left: 20px; font-size: 1.72em; } .article-sort-title:hover:before { border-color: var(--pseudo-hover); } .article-sort-title:before { position: absolute; top: calc(((100% - 36px) / 2)); left: -9px; z-index: 1; width: 10px; height: 10px; border: 5px solid #49b1f5; border-radius: 10px; background: var(--card-bg); content: ''; line-height: 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .article-sort-title:after { position: absolute; bottom: 0; left: 0; z-index: 0; width: 2px; height: 1.5em; background: #aadafa; content: ''; } .article-sort-item { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 0 0 20px 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .article-sort-item:hover:before { border-color: var(--pseudo-hover); } .article-sort-item:before { position: absolute; left: calc(-20px - 17px); width: 6px; height: 6px; border: 3px solid #49b1f5; border-radius: 6px; background: var(--card-bg); content: ''; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .article-sort-item.no-article-cover { height: 80px; } .article-sort-item.no-article-cover .article-sort-item-info { padding: 0; } .article-sort-item.year { font-size: 1.43em; } .article-sort-item.year:hover:before { border-color: #49b1f5; } .article-sort-item.year:before { border-color: var(--pseudo-hover); } .article-sort-item-time { color: #858585; font-size: 95%; } .article-sort-item-time time { padding-left: 6px; cursor: default; } .article-sort-item-title { color: var(--font-color); font-size: 1.1em; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; -webkit-line-clamp: 2; } .article-sort-item-title:hover { color: #49b1f5; -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .article-sort-item-img { overflow: hidden; width: 80px; height: 80px; } .article-sort-item-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0 16px; } .category-lists .category-title { font-size: 2.57em; } @media screen and (max-width: 768px) { .category-lists .category-title { font-size: 2em; } } .category-lists .category-list { margin-bottom: 0; } .category-lists .category-list a { color: var(--font-color); } .category-lists .category-list a:hover { color: #49b1f5; } .category-lists .category-list .category-list-count { margin-left: 8px; color: #858585; } .category-lists .category-list .category-list-count:before { content: '('; } .category-lists .category-list .category-list-count:after { content: ')'; } .category-lists ul { padding: 0 0 0 20px; } .category-lists ul ul { padding-left: 4px; } .category-lists ul li { position: relative; margin: 6px 0; padding: 0.12em 0.4em 0.12em 1.4em; } #body-wrap { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } .layout { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; margin: 0 auto; padding: 40px 15px; max-width: 1200px; width: 100%; } @media screen and (max-width: 900px) { .layout { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 768px) { .layout { padding: 20px 5px; } } @media screen and (min-width: 2000px) { .layout { max-width: 70%; } } .layout > div:first-child:not(.recent-posts) { -webkit-align-self: flex-start; align-self: flex-start; -ms-flex-item-align: start; padding: 50px 40px; } @media screen and (max-width: 768px) { .layout > div:first-child:not(.recent-posts) { padding: 36px 14px; } } .layout > div:first-child { width: 74%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 900px) { .layout > div:first-child { width: 100% !important; } } .layout.hide-aside { max-width: 1000px; } @media screen and (min-width: 2000px) { .layout.hide-aside { max-width: 1300px; } } .layout.hide-aside > div { width: 100% !important; } .apple #page-header.full_page { background-attachment: scroll !important; } .apple .recent-post-item, .apple .avatar-img, .apple .flink-item-icon { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } #article-container .flink { margin-bottom: 20px; } #article-container .flink .flink-list { overflow: auto; padding: 10px 10px 0; text-align: center; } #article-container .flink .flink-list > .flink-list-item { position: relative; float: left; overflow: hidden; margin: 15px 7px; width: calc(100% / 3 - 15px); height: 90px; border-radius: 8px; line-height: 17px; -webkit-transform: translateZ(0); } @media screen and (max-width: 1024px) { #article-container .flink .flink-list > .flink-list-item { width: calc(50% - 15px) !important; } } @media screen and (max-width: 600px) { #article-container .flink .flink-list > .flink-list-item { width: calc(100% - 15px) !important; } } #article-container .flink .flink-list > .flink-list-item:hover .flink-item-icon { margin-left: -10px; width: 0; } #article-container .flink .flink-list > .flink-list-item:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--text-bg-hover); content: ''; -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; -ms-transition: -ms-transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } #article-container .flink .flink-list > .flink-list-item:hover:before, #article-container .flink .flink-list > .flink-list-item:focus:before, #article-container .flink .flink-list > .flink-list-item:active:before { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #article-container .flink .flink-list > .flink-list-item a { color: var(--font-color); text-decoration: none; } #article-container .flink .flink-list > .flink-list-item a .flink-item-icon { float: left; overflow: hidden; margin: 15px 10px; width: 60px; height: 60px; border-radius: 35px; -webkit-transition: width 0.3s ease-out; -moz-transition: width 0.3s ease-out; -o-transition: width 0.3s ease-out; -ms-transition: width 0.3s ease-out; transition: width 0.3s ease-out; } #article-container .flink .flink-list > .flink-list-item a .flink-item-icon img { width: 100%; height: 100%; -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s; -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s; -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s; -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s; transition: filter 375ms ease-in 0.2s, transform 0.3s; object-fit: cover; } #article-container .flink .flink-list > .flink-list-item a .img-alt { display: none; } #article-container .flink .flink-item-name { padding: 16px 10px 0 0; height: 40px; font-weight: bold; font-size: 1.43em; } #article-container .flink .flink-item-desc { padding: 16px 10px 16px 0; height: 50px; font-size: 0.93em; } #article-container .flink .flink-name { margin-bottom: 5px; font-weight: bold; font-size: 1.5em; } #recent-posts > .recent-post-item:not(:first-child) { margin-top: 20px; } #recent-posts > .recent-post-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; height: 16.8em; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: auto; } } #recent-posts > .recent-post-item:hover img.post-bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #recent-posts > .recent-post-item.ads-wrap { display: block !important; height: auto !important; } #recent-posts > .recent-post-item .post_cover { overflow: hidden; width: 42%; height: 100%; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item .post_cover { width: 100%; height: 230px; } } #recent-posts > .recent-post-item .post_cover.right { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item .post_cover.right { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; } } #recent-posts > .recent-post-item >.recent-post-info { padding: 0 40px; width: 58%; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item >.recent-post-info { padding: 20px 20px 30px; width: 100%; } } #recent-posts > .recent-post-item >.recent-post-info.no-cover { width: 100%; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item >.recent-post-info.no-cover { padding: 30px 20px; } } #recent-posts > .recent-post-item >.recent-post-info > .article-title { color: var(--text-highlight-color); font-size: 1.55em; line-height: 1.4; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-line-clamp: 2; } #recent-posts > .recent-post-item >.recent-post-info > .article-title .sticky { margin-right: 10px; color: #ff7242; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item >.recent-post-info > .article-title { font-size: 1.43em; } } #recent-posts > .recent-post-item >.recent-post-info > .article-title:hover { color: #49b1f5; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap { margin: 6px 0; color: #858585; font-size: 0.9em; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .post-meta-date { cursor: default; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap i { margin: 0 4px 0 0; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .fa-spinner { margin: 0; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-label { padding-right: 4px; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-separator { margin: 0 6px; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-link { margin: 0 4px; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap a { color: #858585; } #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap a:hover { color: #49b1f5; text-decoration: underline; } #recent-posts > .recent-post-item >.recent-post-info > .content { -webkit-line-clamp: 2; } .tag-cloud-list a { display: inline-block; padding: 0 8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .tag-cloud-list a:hover { color: #49b1f5 !important; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } @media screen and (max-width: 768px) { .tag-cloud-list a { zoom: 0.85; } } .tag-cloud-title { font-size: 2.57em; } @media screen and (max-width: 768px) { .tag-cloud-title { font-size: 2em; } } h1.page-title + .tag-cloud-list { text-align: left; } #aside-content { width: 26%; } @media screen and (min-width: 900px) { #aside-content { padding-left: 15px; } } @media screen and (max-width: 900px) { #aside-content { width: 100%; } } #aside-content > .card-widget:first-child { margin-top: 0; } @media screen and (max-width: 900px) { #aside-content > .card-widget:first-child { margin-top: 20px; } } #aside-content .card-widget { position: relative; overflow: hidden; margin-top: 20px; padding: 20px 24px; } #aside-content .card-info .author-info__name { font-weight: 500; font-size: 1.57em; } #aside-content .card-info .author-info__description { margin-top: -0.42em; } #aside-content .card-info .card-info-data { margin: 14px 0 4px; } #aside-content .card-info .card-info-social-icons { margin: 6px 0 -6px; } #aside-content .card-info .card-info-social-icons .social-icon { margin: 0 10px; color: var(--font-color); font-size: 1.4em; } #aside-content .card-info .card-info-social-icons i { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } #aside-content .card-info .card-info-social-icons i:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } #aside-content .card-info #card-info-btn { display: block; margin-top: 14px; background-color: var(--btn-bg); color: var(--btn-color); text-align: center; line-height: 2.4; } #aside-content .card-info #card-info-btn:hover { background-color: var(--btn-hover-color); } #aside-content .card-info #card-info-btn span { padding-left: 10px; } #aside-content .item-headline { padding-bottom: 6px; font-size: 1.2em; } #aside-content .item-headline span { margin-left: 6px; } @media screen and (min-width: 900px) { #aside-content .sticky_layout { position: sticky; position: -webkit-sticky; top: 20px; -webkit-transition: top 0.3s; -moz-transition: top 0.3s; -o-transition: top 0.3s; -ms-transition: top 0.3s; transition: top 0.3s; } } #aside-content .card-tag-cloud a { display: inline-block; padding: 0 4px; } #aside-content .card-tag-cloud a:hover { color: #49b1f5 !important; } #aside-content .aside-list > span { display: block; margin-bottom: 10px; text-align: center; } #aside-content .aside-list > .aside-list-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 6px 0; } #aside-content .aside-list > .aside-list-item:first-child { padding-top: 0; } #aside-content .aside-list > .aside-list-item:not(:last-child) { border-bottom: 1px dashed #f5f5f5; } #aside-content .aside-list > .aside-list-item:last-child { padding-bottom: 0; } #aside-content .aside-list > .aside-list-item .thumbnail { overflow: hidden; width: 4.2em; height: 4.2em; } #aside-content .aside-list > .aside-list-item .content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 10px; word-break: break-all; } #aside-content .aside-list > .aside-list-item .content > .name { -webkit-line-clamp: 1; } #aside-content .aside-list > .aside-list-item .content > time, #aside-content .aside-list > .aside-list-item .content > .name { display: block; color: #858585; font-size: 85%; } #aside-content .aside-list > .aside-list-item .content > .title, #aside-content .aside-list > .aside-list-item .content > .comment { color: var(--font-color); font-size: 95%; line-height: 1.5; -webkit-line-clamp: 2; } #aside-content .aside-list > .aside-list-item .content > .title:hover, #aside-content .aside-list > .aside-list-item .content > .comment:hover { color: #49b1f5; } #aside-content .aside-list > .aside-list-item.no-cover { min-height: 4.4em; } #aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list { margin: 0; padding: 0; list-style: none; } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 3px 10px; color: var(--font-color); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover { padding: 3px 17px; background-color: var(--text-bg-hover); } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } #aside-content .card-categories .card-category-list.child { padding: 0 0 0 16px; } #aside-content .card-categories .card-category-list > .parent > a.expand i { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #aside-content .card-categories .card-category-list > .parent > a.expand + .child { display: block; } #aside-content .card-categories .card-category-list > .parent > a .card-category-list-name { width: 70% !important; } #aside-content .card-categories .card-category-list > .parent > a .card-category-list-count { width: calc(100% - 70% - 20px); text-align: right; } #aside-content .card-categories .card-category-list > .parent > a i { float: right; margin-right: -0.5em; padding: 0.5em; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } #aside-content .card-webinfo .webinfo .webinfo-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 2px 10px 0; } #aside-content .card-webinfo .webinfo .webinfo-item div:first-child { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-right: 20px; } @media screen and (min-width: 901px) { #aside-content #card-toc { right: 0 !important; } } @media screen and (max-width: 900px) { #aside-content #card-toc { position: fixed; right: 55px; bottom: 30px; z-index: 100; max-width: 380px; max-height: calc(100% - 60px); width: calc(100% - 80px); -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } #aside-content #card-toc.open { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } #aside-content #card-toc .toc-percentage { float: right; margin-top: -9px; color: #a9a9a9; font-style: italic; font-size: 140%; } #aside-content #card-toc .toc-content { overflow-y: scroll; overflow-y: overlay; margin: 0 -24px; max-height: calc(100vh - 120px); width: calc(100% + 48px); } @media screen and (max-width: 900px) { #aside-content #card-toc .toc-content { max-height: calc(100vh - 140px); } } #aside-content #card-toc .toc-content > * { margin: 0 20px !important; } #aside-content #card-toc .toc-content > * > .toc-item > .toc-child { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--dark-grey); } #aside-content #card-toc .toc-content:not(.is-expand) .toc-child { display: none; } @media screen and (max-width: 900px) { #aside-content #card-toc .toc-content:not(.is-expand) .toc-child { display: block !important; } } #aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child { display: block; } #aside-content #card-toc .toc-content ol, #aside-content #card-toc .toc-content li { list-style: none; } #aside-content #card-toc .toc-content > ol { padding: 0 !important; } #aside-content #card-toc .toc-content ol { margin: 0; padding-left: 18px; } #aside-content #card-toc .toc-content .toc-link { display: block; margin: 4px 0; padding: 1px 6px; color: var(--toc-link-color); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #aside-content #card-toc .toc-content .toc-link:hover { color: #49b1f5; } #aside-content #card-toc .toc-content .toc-link.active { background: #00c4b6; color: #fff; } #aside-content .sticky_layout:only-child > :first-child { margin-top: 0; } #aside-content .card-more-btn { float: right; color: inherit; } #aside-content .card-more-btn:hover { -webkit-animation: more-btn-move 1s infinite; -moz-animation: more-btn-move 1s infinite; -o-animation: more-btn-move 1s infinite; -ms-animation: more-btn-move 1s infinite; animation: more-btn-move 1s infinite; } #aside-content .card-announcement .item-headline i { color: #f00; } .avatar-img { overflow: hidden; margin: 0 auto; width: 110px; height: 110px; border-radius: 70px; } .avatar-img img { width: 100%; height: 100%; -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s; -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s; -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s; -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s; transition: filter 375ms ease-in 0.2s, transform 0.3s; object-fit: cover; } .avatar-img img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .site-data { display: table; width: 100%; table-layout: fixed; } .site-data > a { display: table-cell; } .site-data > a div { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .site-data > a:hover div { color: #49b1f5 !important; } .site-data > a .headline { color: var(--font-color); } .site-data > a .length-num { margin-top: -0.32em; color: var(--text-highlight-color); font-size: 1.4em; } @media screen and (min-width: 900px) { html.hide-aside .layout { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } html.hide-aside .layout > .aside-content { display: none; } html.hide-aside .layout > div:first-child { width: 80%; } } .page .sticky_layout { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @-moz-keyframes more-btn-move { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } } @-webkit-keyframes more-btn-move { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } } @-o-keyframes more-btn-move { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } } @keyframes more-btn-move { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } } @-moz-keyframes toc-open { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes toc-open { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes toc-open { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes toc-open { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes toc-close { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes toc-close { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @-o-keyframes toc-close { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @keyframes toc-close { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } #post-comment .comment-head { margin-bottom: 20px; } #post-comment .comment-head:after { display: block; clear: both; content: ''; } #post-comment .comment-head .comment-headline { display: inline-block; vertical-align: middle; font-weight: 700; font-size: 1.43em; } #post-comment .comment-head .comment-switch { display: inline-block; float: right; margin: 2px auto 0; padding: 4px 16px; width: max-content; border-radius: 8px; background: #f6f8fa; } #post-comment .comment-head .comment-switch .first-comment { color: #49b1f5; } #post-comment .comment-head .comment-switch .second-comment { color: #ff7242; } #post-comment .comment-head .comment-switch #switch-btn { position: relative; display: inline-block; margin: -4px 8px 0; width: 42px; height: 22px; border-radius: 34px; background-color: #49b1f5; vertical-align: middle; cursor: pointer; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; } #post-comment .comment-head .comment-switch #switch-btn:before { position: absolute; bottom: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; content: ''; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; } #post-comment .comment-wrap > div { -webkit-animation: tabshow 0.5s; -moz-animation: tabshow 0.5s; -o-animation: tabshow 0.5s; -ms-animation: tabshow 0.5s; animation: tabshow 0.5s; } #post-comment .comment-wrap > div:nth-child(2) { display: none; } #post-comment.move #switch-btn { background-color: #ff7242; } #post-comment.move #switch-btn:before { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } #post-comment.move .comment-wrap > div:first-child { display: none; } #post-comment.move .comment-wrap > div:last-child { display: block; } #footer { position: relative; background-color: #49b1f5; background-attachment: scroll; background-position: bottom; background-size: cover; } #footer-wrap { position: relative; padding: 40px 20px; color: var(--light-grey); text-align: center; } #footer-wrap a { color: var(--light-grey); } #footer-wrap a:hover { text-decoration: underline; } #footer-wrap .footer-separator { margin: 0 4px; } #footer-wrap .icp-icon { padding: 0 4px; max-height: 1.4em; width: auto; vertical-align: text-bottom; } #page-header { position: relative; width: 100%; background-color: #49b1f5; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #page-header:not(.not-top-img):before { position: absolute; width: 100%; height: 100%; background-color: var(--mark-bg); content: ''; } #page-header.full_page { height: 100vh; background-attachment: fixed; } #page-header.full_page #site-info { position: absolute; top: 43%; padding: 0 10px; width: 100%; } #page-header #site-title, #page-header #site-subtitle, #page-header #scroll-down .scroll-down-effects { text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,0.15); line-height: 1.5; } #page-header #site-title { margin: 0; color: var(--white); font-size: 1.85em; } @media screen and (min-width: 768px) { #page-header #site-title { font-size: 2.85em; } } #page-header #site-subtitle { color: var(--light-grey); font-size: 1.15em; } @media screen and (min-width: 768px) { #page-header #site-subtitle { font-size: 1.72em; } } #page-header #site_social_icons { display: none; margin: 0 auto; text-align: center; } @media screen and (max-width: 768px) { #page-header #site_social_icons { display: block; } } #page-header #site_social_icons .social-icon { margin: 0 10px; color: var(--light-grey); text-shadow: 2px 2px 4px rgba(0,0,0,0.15); font-size: 1.43em; } #page-header #scroll-down { position: absolute; bottom: 10px; width: 100%; cursor: pointer; } #page-header #scroll-down .scroll-down-effects { position: relative; width: 100%; color: var(--light-grey); font-size: 20px; } #page-header.not-home-page { height: 400px; } @media screen and (max-width: 768px) { #page-header.not-home-page { height: 280px; } } #page-header #page-site-info { position: absolute; top: 200px; padding: 0 10px; width: 100%; } @media screen and (max-width: 768px) { #page-header #page-site-info { top: 140px; } } #page-header.post-bg { height: 400px; } @media screen and (max-width: 768px) { #page-header.post-bg { height: 360px; } } #page-header #post-info { position: absolute; bottom: 30px; padding: 0 8%; width: 100%; } @media screen and (max-width: 768px) { #page-header #post-info { bottom: 22px; padding: 0 22px; } } #page-header.not-top-img { margin-bottom: 10px; height: 60px; background: 0; } #page-header.not-top-img #nav { background: rgba(255,255,255,0.8); -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); } #page-header.not-top-img #nav a, #page-header.not-top-img #nav .site-name { color: var(--font-color); text-shadow: none; } #page-header.nav-fixed #nav { position: fixed; top: -60px; z-index: 91; background: rgba(255,255,255,0.8); -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } #page-header.nav-fixed #nav #blog-info { color: var(--font-color); } #page-header.nav-fixed #nav #blog-info:hover { color: #49b1f5; } #page-header.nav-fixed #nav #blog-info .site-name { text-shadow: none; } #page-header.nav-fixed #nav a, #page-header.nav-fixed #nav #toggle-menu { color: var(--font-color); text-shadow: none; } #page-header.nav-fixed #nav a:hover, #page-header.nav-fixed #nav #toggle-menu:hover { color: #49b1f5; } #page-header.nav-fixed.fixed #nav { top: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #page-header.nav-visible:not(.fixed) #nav { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } #page-header.nav-visible:not(.fixed) + .layout > .aside-content > .sticky_layout { top: 70px; -webkit-transition: top 0.5s; -moz-transition: top 0.5s; -o-transition: top 0.5s; -ms-transition: top 0.5s; transition: top 0.5s; } #page-header.fixed #nav { position: fixed; } #page-header.fixed + .layout > .aside-content > .sticky_layout { top: 70px; -webkit-transition: top 0.5s; -moz-transition: top 0.5s; -o-transition: top 0.5s; -ms-transition: top 0.5s; transition: top 0.5s; } #page-header.fixed + .layout #card-toc .toc-content { max-height: calc(100vh - 170px); } #page h1.page-title { margin: 8px 0 20px; } #post > #post-info { margin-bottom: 30px; } #post > #post-info .post-title { padding-bottom: 4px; border-bottom: 1px solid var(--light-grey); color: var(--text-highlight-color); } #post > #post-info .post-title .post-edit-link { float: right; } #post > #post-info #post-meta, #post > #post-info #post-meta a { color: #78818a; } #post-info .post-title { margin-bottom: 8px; color: var(--white); font-weight: normal; font-size: 2.5em; line-height: 1.5; -webkit-line-clamp: 3; } @media screen and (max-width: 768px) { #post-info .post-title { font-size: 2.1em; } } #post-info .post-title .post-edit-link { padding-left: 10px; } #post-info #post-meta { color: var(--light-grey); font-size: 95%; } @media screen and (min-width: 768px) { #post-info #post-meta > .meta-secondline > span:first-child { display: none; } } @media screen and (max-width: 768px) { #post-info #post-meta { font-size: 90%; } #post-info #post-meta > .meta-firstline, #post-info #post-meta > .meta-secondline { display: inline; } } #post-info #post-meta .post-meta-separator { margin: 0 5px; } #post-info #post-meta .post-meta-icon { margin-right: 4px; } #post-info #post-meta .post-meta-label { margin-right: 4px; } #post-info #post-meta a { color: var(--light-grey); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #post-info #post-meta a:hover { color: #49b1f5; text-decoration: underline; } #nav { position: absolute; top: 0; z-index: 90; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 36px; width: 100%; height: 60px; font-size: 1.3em; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 768px) { #nav { padding: 0 16px; } } #nav.show { opacity: 1; -ms-filter: none; filter: none; } #nav #blog-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: var(--light-grey); } #nav #blog-info .site-icon { margin-right: 6px; height: 36px; vertical-align: middle; } #nav #toggle-menu { display: none; padding: 2px 0 0 6px; vertical-align: top; } #nav #toggle-menu:hover { color: var(--white); } #nav a { color: var(--light-grey); } #nav a:hover { color: var(--white); } #nav .site-name { text-shadow: 2px 2px 4px rgba(0,0,0,0.15); font-weight: bold; } #nav .menus_items { display: inline; } #nav .menus_items .menus_item { position: relative; display: inline-block; padding: 0 0 0 14px; } #nav .menus_items .menus_item:hover .menus_item_child { display: block; } #nav .menus_items .menus_item:hover > a > i:last-child { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #nav .menus_items .menus_item > a > i:last-child { padding: 4px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; } #nav .menus_items .menus_item .menus_item_child { position: absolute; right: 0; display: none; margin-top: 8px; padding: 0; width: max-content; border-radius: 5px; background-color: var(--sidebar-bg); -webkit-box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5); box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5); -webkit-animation: sub_menus 0.3s 0.1s ease both; -moz-animation: sub_menus 0.3s 0.1s ease both; -o-animation: sub_menus 0.3s 0.1s ease both; -ms-animation: sub_menus 0.3s 0.1s ease both; animation: sub_menus 0.3s 0.1s ease both; } #nav .menus_items .menus_item .menus_item_child:before { position: absolute; top: -8px; left: 0; width: 100%; height: 20px; content: ''; } #nav .menus_items .menus_item .menus_item_child li { list-style: none; } #nav .menus_items .menus_item .menus_item_child li:hover { background: var(--text-bg-hover); } #nav .menus_items .menus_item .menus_item_child li:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } #nav .menus_items .menus_item .menus_item_child li:last-child { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #nav .menus_items .menus_item .menus_item_child li a { display: inline-block; padding: 8px 16px; width: 100%; color: var(--font-color) !important; text-shadow: none !important; } #nav.hide-menu #toggle-menu { display: inline-block !important; } #nav.hide-menu #toggle-menu .site-page { font-size: inherit; } #nav.hide-menu .menus_items { display: none; } #nav.hide-menu #search-button span { display: none; } #nav #search-button { display: inline; padding: 0 0 0 14px; } #nav .site-page { position: relative; padding-bottom: 6px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); font-size: 0.78em; cursor: pointer; } #nav .site-page:not(.child):after { position: absolute; bottom: 0; left: 0; z-index: -1; width: 0; height: 3px; background-color: #80c8f8; content: ''; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #nav .site-page:not(.child):hover:after { width: 100%; } #pagination .pagination { margin-top: 20px; text-align: center; } #pagination .page-number.current { background: #00c4b6; color: var(--white); } #pagination .pagination-info { position: absolute; top: 50%; padding: 20px 40px; width: 100%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #pagination .prev_info, #pagination .next_info { color: var(--white); font-weight: 500; } #pagination .next-post .pagination-info { text-align: right; } #pagination .pull-full { width: 100% !important; } #pagination .prev-post .label, #pagination .next-post .label { color: var(--light-grey); text-transform: uppercase; font-size: 90%; } #pagination .prev-post, #pagination .next-post { width: 50%; } @media screen and (max-width: 768px) { #pagination .prev-post, #pagination .next-post { width: 100%; } } #pagination .prev-post a, #pagination .next-post a { position: relative; display: block; overflow: hidden; height: 150px; } #pagination.pagination-post { overflow: hidden; margin-top: 40px; width: 100%; background: #000; } .layout > .recent-posts .pagination > * { display: inline-block; margin: 0 6px; width: 2.5em; height: 2.5em; line-height: 2.5em; } .layout > .recent-posts .pagination > *:not(.space):hover { background: var(--btn-hover-color); color: var(--btn-color); } .layout > div:not(.recent-posts) .pagination .page-number { display: inline-block; margin: 0 4px; min-width: 24px; height: 24px; text-align: center; line-height: 24px; cursor: pointer; } #article-container { word-wrap: break-word; overflow-wrap: break-word; } #article-container a { color: #49b1f5; } #article-container a:hover { text-decoration: underline; } #article-container img { display: block; margin: 0 auto 20px; max-width: 100%; -webkit-transition: filter 375ms ease-in 0.2s; -moz-transition: filter 375ms ease-in 0.2s; -o-transition: filter 375ms ease-in 0.2s; -ms-transition: filter 375ms ease-in 0.2s; transition: filter 375ms ease-in 0.2s; } #article-container p { margin: 0 0 16px; } #article-container iframe { margin: 0 0 20px; } #article-container kbd { margin: 0 3px; padding: 3px 5px; border: 1px solid #b4b4b4; border-radius: 3px; background-color: #f8f8f8; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; color: #34495e; white-space: nowrap; font-weight: 600; font-size: 0.9em; font-family: Monaco, 'Ubuntu Mono', monospace; line-height: 1em; } #article-container ol ol, #article-container ul ol, #article-container ol ul, #article-container ul ul { padding-left: 20px; } #article-container ol li, #article-container ul li { margin: 4px 0; } #article-container ol p, #article-container ul p { margin: 0 0 8px; } #article-container > :last-child { margin-bottom: 0 !important; } #article-container hr { margin: 20px 0; } #article-container h1, #article-container h2, #article-container h3, #article-container h4, #article-container h5, #article-container h6 { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before { position: absolute; top: calc(50% - 7px); color: #f47466; content: '\f0c1'; left: 0; line-height: 1; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #article-container h1:hover:before, #article-container h2:hover:before, #article-container h3:hover:before, #article-container h4:hover:before, #article-container h5:hover:before, #article-container h6:hover:before { color: #49b1f5; } #article-container h1 { padding-left: 28px; } #article-container h1:before { font-size: 18px; } #article-container h1:hover { padding-left: 32px; } #article-container h2 { padding-left: 26px; } #article-container h2:before { font-size: 16px; } #article-container h2:hover { padding-left: 30px; } #article-container h3 { padding-left: 24px; } #article-container h3:before { font-size: 14px; } #article-container h3:hover { padding-left: 28px; } #article-container h4 { padding-left: 22px; } #article-container h4:before { font-size: 12px; } #article-container h4:hover { padding-left: 26px; } #article-container h5 { padding-left: 20px; } #article-container h5:before { font-size: 10px; } #article-container h5:hover { padding-left: 24px; } #article-container h6 { padding-left: 20px; } #article-container h6:before { font-size: 10px; } #article-container h6:hover { padding-left: 24px; } #article-container ol p, #article-container ul p { margin: 0 0 8px; } #article-container li::marker { color: #49b1f5; font-weight: 600; font-size: 1.05em; } #article-container li:hover::marker { color: var(--pseudo-hover); } #article-container ul > li { list-style-type: circle; } #post .tag_share:after { display: block; clear: both; content: ''; } #post .tag_share .post-meta__tag-list { display: inline-block; } #post .tag_share .post-meta__tags { display: inline-block; margin: 8px 8px 8px 0; padding: 0 12px; width: fit-content; border: 1px solid #49b1f5; border-radius: 12px; color: #49b1f5; font-size: 0.85em; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #post .tag_share .post-meta__tags:hover { background: #49b1f5; color: var(--white); } #post .tag_share .post_share { display: inline-block; float: right; margin: 8px 0 0; width: fit-content; } #post .tag_share .post_share .social-share { font-size: 0.85em; } #post .tag_share .post_share .social-share .social-share-icon { margin: 0 4px; width: 1.85em; height: 1.85em; font-size: 1.2em; line-height: 1.85em; } #post .post-copyright { position: relative; margin: 40px 0 10px; padding: 10px 16px; border: 1px solid var(--light-grey); -webkit-transition: box-shadow 0.3s ease-in-out; -moz-transition: box-shadow 0.3s ease-in-out; -o-transition: box-shadow 0.3s ease-in-out; -ms-transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.3s ease-in-out; } #post .post-copyright:before { position: absolute; top: 2px; right: 12px; color: #49b1f5; content: '\f1f9'; font-size: 1.3em; } #post .post-copyright:hover { -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5); box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5); } #post .post-copyright .post-copyright-meta { color: #49b1f5; font-weight: bold; } #post .post-copyright .post-copyright-meta i { margin-right: 3px; } #post .post-copyright .post-copyright-info { padding-left: 6px; } #post .post-copyright .post-copyright-info a { text-decoration: underline; word-break: break-word; } #post .post-copyright .post-copyright-info a:hover { text-decoration: none; } #post .post-outdate-notice { position: relative; margin: 0 0 20px; padding: 0.5em 1.2em; border-radius: 3px; background-color: #ffe6e6; color: #f66; padding: 0.5em 1em 0.5em 2.6em; border-left: 5px solid #ff8080; } #post .post-outdate-notice:before { position: absolute; top: 50%; left: 0.9em; color: #ff8080; content: '\f071'; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #post .ads-wrap { margin: 40px 0; } .relatedPosts { margin-top: 40px; } .relatedPosts > .headline { margin-bottom: 5px; font-weight: 700; font-size: 1.43em; } .relatedPosts > .relatedPosts-list > div { position: relative; display: inline-block; overflow: hidden; margin: 3px; width: calc(33.333% - 6px); height: 200px; background: #000; vertical-align: bottom; } @media screen and (max-width: 768px) { .relatedPosts > .relatedPosts-list > div { margin: 2px; width: calc(50% - 4px); height: 150px; } } @media screen and (max-width: 600px) { .relatedPosts > .relatedPosts-list > div { width: calc(100% - 4px); } } .relatedPosts > .relatedPosts-list .content { position: absolute; top: 50%; padding: 0 20px; width: 100%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .relatedPosts > .relatedPosts-list .content .date { color: var(--light-grey); font-size: 90%; } .relatedPosts > .relatedPosts-list .content .title { color: var(--white); -webkit-line-clamp: 2; } .post-reward { position: relative; margin-top: 80px; width: 100%; text-align: center; pointer-events: none; } .post-reward > * { pointer-events: auto; } .post-reward .reward-button { display: inline-block; padding: 4px 24px; background: var(--btn-bg); color: var(--btn-color); cursor: pointer; } .post-reward .reward-button i { margin-right: 5px; } .post-reward:hover .reward-button { background: var(--btn-hover-color); } .post-reward:hover > .reward-main { display: block; } .post-reward .reward-main { position: absolute; bottom: 40px; left: 0; z-index: 100; display: none; padding: 0 0 15px; width: 100%; } .post-reward .reward-main .reward-all { display: inline-block; margin: 0; padding: 20px 10px; border-radius: 4px; background: var(--reward-pop); } .post-reward .reward-main .reward-all:before { position: absolute; bottom: -10px; left: 0; width: 100%; height: 20px; content: ''; } .post-reward .reward-main .reward-all:after { position: absolute; right: 0; bottom: 2px; left: 0; margin: 0 auto; width: 0; height: 0; border-top: 13px solid var(--reward-pop); border-right: 13px solid transparent; border-left: 13px solid transparent; content: ''; } .post-reward .reward-main .reward-all .reward-item { display: inline-block; padding: 0 8px; list-style-type: none; vertical-align: top; } .post-reward .reward-main .reward-all .reward-item img { width: 130px; height: 130px; } .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc { width: 130px; color: #858585; } #rightside { position: fixed; right: -48px; bottom: 40px; z-index: 100; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #rightside.rightside-show { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -webkit-transform: translate(-58px, 0); -moz-transform: translate(-58px, 0); -o-transform: translate(-58px, 0); -ms-transform: translate(-58px, 0); transform: translate(-58px, 0); } #rightside #rightside-config-hide { height: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; -ms-transition: -ms-transform 0.4s; transition: transform 0.4s; -webkit-transform: translate(45px, 0); -moz-transform: translate(45px, 0); -o-transform: translate(45px, 0); -ms-transform: translate(45px, 0); transform: translate(45px, 0); } #rightside #rightside-config-hide.show { height: auto; opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #rightside #rightside-config-hide.status { height: auto; opacity: 1; -ms-filter: none; filter: none; } #rightside > div > button, #rightside > div > a { display: block; margin-bottom: 5px; width: 35px; height: 35px; border-radius: 5px; background-color: var(--btn-bg); color: var(--btn-color); text-align: center; font-size: 16px; line-height: 35px; } #rightside > div > button:hover, #rightside > div > a:hover { background-color: var(--btn-hover-color); } #rightside #mobile-toc-button { display: none; } @media screen and (max-width: 900px) { #rightside #mobile-toc-button { display: block; } } @media screen and (max-width: 900px) { #rightside #hide-aside-btn { display: none; } } #rightside #go-up .scroll-percent { display: none; } #rightside #go-up.show-percent .scroll-percent { display: block; } #rightside #go-up.show-percent .scroll-percent + i { display: none; } #rightside #go-up:hover .scroll-percent { display: none; } #rightside #go-up:hover .scroll-percent + i { display: block; } #sidebar #menu-mask { position: fixed; z-index: 102; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.8); } #sidebar #sidebar-menus { position: fixed; top: 0; right: -300px; z-index: 103; overflow-x: hidden; overflow-y: scroll; padding-left: 5px; width: 300px; height: 100%; background: var(--sidebar-bg); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #sidebar #sidebar-menus.open { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } #sidebar #sidebar-menus > .avatar-img { margin: 20px auto; } #sidebar #sidebar-menus .sidebar-site-data { padding: 0 10px; } #sidebar #sidebar-menus hr { margin: 20px auto; } #sidebar #sidebar-menus .menus_items { padding: 0 10px; } #sidebar #sidebar-menus .menus_items .site-page { position: relative; display: block; padding: 3px 28px 3px 20px; color: var(--font-color); font-size: 1.15em; border-radius: 6px; } #sidebar #sidebar-menus .menus_items .site-page:hover { background: var(--text-bg-hover); } #sidebar #sidebar-menus .menus_items .site-page i:first-child { width: 15%; text-align: left; } #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child { position: absolute; top: 0.78em; right: 13px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; } #sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child { display: none; } #sidebar #sidebar-menus .menus_items .menus_item_child { margin: 0; padding-left: 25px; list-style: none; } #vcomment { font-size: 1.1em; } #vcomment .vbtn { border: none; background: var(--btn-bg); color: var(--btn-color); } #vcomment .vbtn:hover { background: var(--btn-hover-color); } #vcomment .vimg { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } #vcomment .vimg:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } #vcomment .vcards .vcard .vcontent.expand:before, #vcomment .vcards .vcard .vcontent.expand:after { z-index: 22; } #waline-wrap { --waline-font-size: 1.1em; --waline-theme-color: #49b1f5; --waline-active-color: #ff7242; } #waline-wrap .wl-comment-actions > button:not(last-child) { padding-right: 4px; } .fireworks { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; } .medium-zoom-image--opened { z-index: 99999 !important; margin: 0 !important; } .medium-zoom-overlay { z-index: 99999 !important; } .mermaid-wrap { margin: 0 0 20px; text-align: center; } .mermaid-wrap > svg { height: 100%; } .utterances, .fb-comments iframe { width: 100% !important; } #gitalk-container .gt-meta { margin: 0 0 0.8em; padding: 6px 0 16px; } .katex-wrap { overflow: auto; } .katex-wrap::-webkit-scrollbar { display: none; } mjx-container { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; max-width: 100%; } mjx-container[display] { display: block !important; min-width: auto !important; } mjx-container:not([display]) { display: inline-grid !important; } mjx-assistive-mml { right: 0; bottom: 0; } .aplayer { color: #4c4948; } #article-container .aplayer { margin: 0 0 20px; } #article-container .aplayer ol, #article-container .aplayer ul { margin: 0; padding: 0; } #article-container .aplayer ol li, #article-container .aplayer ul li { margin: 0; padding: 0 15px; } #article-container .aplayer ol li:before, #article-container .aplayer ul li:before { content: none; } .snackbar-css { border-radius: 5px !important; } .abc-music-sheet { margin: 0 0 20px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .abc-music-sheet.abcjs-container { opacity: 1; -ms-filter: none; filter: none; } @media screen and (max-width: 768px) { .fancybox__toolbar__column.is-middle { display: none; } } #article-container .btn-center { margin: 0 0 20px; text-align: center; } #article-container .btn-beautify { display: inline-block; margin: 0 4px 6px; padding: 0 15px; background-color: var(--btn-beautify-color, #777); color: #fff; line-height: 2; } #article-container .btn-beautify.blue { --btn-beautify-color: #428bca; } #article-container .btn-beautify.pink { --btn-beautify-color: #ff69b4; } #article-container .btn-beautify.red { --btn-beautify-color: #f00; } #article-container .btn-beautify.purple { --btn-beautify-color: #6f42c1; } #article-container .btn-beautify.orange { --btn-beautify-color: #ff8c00; } #article-container .btn-beautify.green { --btn-beautify-color: #5cb85c; } #article-container .btn-beautify:hover { background-color: var(--btn-hover-color); } #article-container .btn-beautify i + span { margin-left: 6px; } #article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) { margin: 0 4px 20px; } #article-container .btn-beautify.block { display: block; margin: 0 0 20px; width: fit-content; width: -moz-fit-content; } #article-container .btn-beautify.block.center { margin: 0 auto 20px; } #article-container .btn-beautify.block.right { margin: 0 0 20px auto; } #article-container .btn-beautify.larger { padding: 6px 15px; } #article-container .btn-beautify:hover { text-decoration: none; } #article-container .btn-beautify.outline { border: 1px solid transparent; border-color: var(--btn-beautify-color, #777); background-color: transparent; color: var(--btn-beautify-color, #777); } #article-container .btn-beautify.outline:hover { background-color: var(--btn-beautify-color, #777); } #article-container .btn-beautify.outline:hover { color: #fff !important; } #article-container figure.gallery-group { position: relative; float: left; overflow: hidden; margin: 6px 4px; width: calc(50% - 8px); height: 250px; border-radius: 8px; background: #000; -webkit-transform: translate3d(0, 0, 0); } @media screen and (max-width: 600px) { #article-container figure.gallery-group { width: calc(100% - 8px); } } #article-container figure.gallery-group:hover img { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #article-container figure.gallery-group:hover .gallery-group-name::after { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #article-container figure.gallery-group:hover p { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #article-container figure.gallery-group img { position: relative; margin: 0; max-width: none; width: calc(100% + 20px); height: 250px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -webkit-transition: all 0.3s, filter 375ms ease-in 0.2s; -moz-transition: all 0.3s, filter 375ms ease-in 0.2s; -o-transition: all 0.3s, filter 375ms ease-in 0.2s; -ms-transition: all 0.3s, filter 375ms ease-in 0.2s; transition: all 0.3s, filter 375ms ease-in 0.2s; -webkit-transform: translate3d(-10px, 0, 0); -moz-transform: translate3d(-10px, 0, 0); -o-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); object-fit: cover; } #article-container figure.gallery-group figcaption { position: absolute; top: 0; left: 0; padding: 30px; width: 100%; height: 100%; color: #fff; text-transform: uppercase; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } #article-container figure.gallery-group figcaption > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #article-container figure.gallery-group p { margin: 0; padding: 8px 0 0; letter-spacing: 1px; font-size: 1.1em; line-height: 1.5; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -ms-transition: opacity 0.35s, -ms-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-line-clamp: 4; } #article-container figure.gallery-group .gallery-group-name { position: relative; margin: 0; padding: 8px 0; font-weight: bold; font-size: 1.65em; line-height: 1.5; -webkit-line-clamp: 2; } #article-container figure.gallery-group .gallery-group-name:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; -ms-transition: -ms-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } #article-container .gallery-group-main { overflow: auto; padding: 0 0 16px; } #article-container .gallery-container { margin: 0 0 16px; text-align: center; } #article-container .gallery-container img { display: initial; margin: 0; width: 100%; height: 100%; } #article-container .gallery-container .gallery-data { display: none; } #article-container .gallery-container button { margin-top: 25px; padding: 10px; width: 9em; border-radius: 5px; background: var(--btn-bg); color: var(--btn-color); font-weight: bold; font-size: 1.1em; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } #article-container .gallery-container button:hover { background: var(--btn-hover-color); } #article-container .loading-container { display: inline-block; overflow: hidden; width: 154px; height: 154px; } #article-container .loading-container .loading-item { position: relative; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1); -moz-transform: translateZ(0) scale(1); -o-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } #article-container .loading-container .loading-item div { position: absolute; width: 30.8px; height: 30.8px; border-radius: 50%; background: #e15b64; -webkit-transform: translate(61.6px, 61.6px) scale(1); -moz-transform: translate(61.6px, 61.6px) scale(1); -o-transform: translate(61.6px, 61.6px) scale(1); -ms-transform: translate(61.6px, 61.6px) scale(1); transform: translate(61.6px, 61.6px) scale(1); -webkit-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); -moz-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); -o-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); -ms-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); } #article-container .loading-container .loading-item div:nth-child(1) { background: #f47e60; -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); -webkit-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; -moz-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; -o-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; -ms-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; } #article-container .loading-container .loading-item div:nth-child(2) { background: #e15b64; -webkit-animation-delay: -0.48s; -moz-animation-delay: -0.48s; -o-animation-delay: -0.48s; -ms-animation-delay: -0.48s; animation-delay: -0.48s; } #article-container .loading-container .loading-item div:nth-child(3) { background: #f47e60; -webkit-animation-delay: -0.96s; -moz-animation-delay: -0.96s; -o-animation-delay: -0.96s; -ms-animation-delay: -0.96s; animation-delay: -0.96s; } #article-container .loading-container .loading-item div:nth-child(4) { background: #f8b26a; -webkit-animation-delay: -1.44s; -moz-animation-delay: -1.44s; -o-animation-delay: -1.44s; -ms-animation-delay: -1.44s; animation-delay: -1.44s; } #article-container .loading-container .loading-item div:nth-child(5) { background: #abbd81; -webkit-animation-delay: -1.92s; -moz-animation-delay: -1.92s; -o-animation-delay: -1.92s; -ms-animation-delay: -1.92s; animation-delay: -1.92s; } @-moz-keyframes loading-ball { 0% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 25% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 50% { -webkit-transform: translate(9.24px, 61.6px) scale(1); -moz-transform: translate(9.24px, 61.6px) scale(1); -o-transform: translate(9.24px, 61.6px) scale(1); -ms-transform: translate(9.24px, 61.6px) scale(1); transform: translate(9.24px, 61.6px) scale(1); } 75% { -webkit-transform: translate(61.6px, 61.6px) scale(1); -moz-transform: translate(61.6px, 61.6px) scale(1); -o-transform: translate(61.6px, 61.6px) scale(1); -ms-transform: translate(61.6px, 61.6px) scale(1); transform: translate(61.6px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } } @-webkit-keyframes loading-ball { 0% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 25% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 50% { -webkit-transform: translate(9.24px, 61.6px) scale(1); -moz-transform: translate(9.24px, 61.6px) scale(1); -o-transform: translate(9.24px, 61.6px) scale(1); -ms-transform: translate(9.24px, 61.6px) scale(1); transform: translate(9.24px, 61.6px) scale(1); } 75% { -webkit-transform: translate(61.6px, 61.6px) scale(1); -moz-transform: translate(61.6px, 61.6px) scale(1); -o-transform: translate(61.6px, 61.6px) scale(1); -ms-transform: translate(61.6px, 61.6px) scale(1); transform: translate(61.6px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } } @-o-keyframes loading-ball { 0% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 25% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 50% { -webkit-transform: translate(9.24px, 61.6px) scale(1); -moz-transform: translate(9.24px, 61.6px) scale(1); -o-transform: translate(9.24px, 61.6px) scale(1); -ms-transform: translate(9.24px, 61.6px) scale(1); transform: translate(9.24px, 61.6px) scale(1); } 75% { -webkit-transform: translate(61.6px, 61.6px) scale(1); -moz-transform: translate(61.6px, 61.6px) scale(1); -o-transform: translate(61.6px, 61.6px) scale(1); -ms-transform: translate(61.6px, 61.6px) scale(1); transform: translate(61.6px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } } @keyframes loading-ball { 0% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 25% { -webkit-transform: translate(9.24px, 61.6px) scale(0); -moz-transform: translate(9.24px, 61.6px) scale(0); -o-transform: translate(9.24px, 61.6px) scale(0); -ms-transform: translate(9.24px, 61.6px) scale(0); transform: translate(9.24px, 61.6px) scale(0); } 50% { -webkit-transform: translate(9.24px, 61.6px) scale(1); -moz-transform: translate(9.24px, 61.6px) scale(1); -o-transform: translate(9.24px, 61.6px) scale(1); -ms-transform: translate(9.24px, 61.6px) scale(1); transform: translate(9.24px, 61.6px) scale(1); } 75% { -webkit-transform: translate(61.6px, 61.6px) scale(1); -moz-transform: translate(61.6px, 61.6px) scale(1); -o-transform: translate(61.6px, 61.6px) scale(1); -ms-transform: translate(61.6px, 61.6px) scale(1); transform: translate(61.6px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } } @-moz-keyframes loading-ball-r { 0% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(0); -moz-transform: translate(113.96px, 61.6px) scale(0); -o-transform: translate(113.96px, 61.6px) scale(0); -ms-transform: translate(113.96px, 61.6px) scale(0); transform: translate(113.96px, 61.6px) scale(0); } } @-webkit-keyframes loading-ball-r { 0% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(0); -moz-transform: translate(113.96px, 61.6px) scale(0); -o-transform: translate(113.96px, 61.6px) scale(0); -ms-transform: translate(113.96px, 61.6px) scale(0); transform: translate(113.96px, 61.6px) scale(0); } } @-o-keyframes loading-ball-r { 0% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(0); -moz-transform: translate(113.96px, 61.6px) scale(0); -o-transform: translate(113.96px, 61.6px) scale(0); -ms-transform: translate(113.96px, 61.6px) scale(0); transform: translate(113.96px, 61.6px) scale(0); } } @keyframes loading-ball-r { 0% { -webkit-transform: translate(113.96px, 61.6px) scale(1); -moz-transform: translate(113.96px, 61.6px) scale(1); -o-transform: translate(113.96px, 61.6px) scale(1); -ms-transform: translate(113.96px, 61.6px) scale(1); transform: translate(113.96px, 61.6px) scale(1); } 100% { -webkit-transform: translate(113.96px, 61.6px) scale(0); -moz-transform: translate(113.96px, 61.6px) scale(0); -o-transform: translate(113.96px, 61.6px) scale(0); -ms-transform: translate(113.96px, 61.6px) scale(0); transform: translate(113.96px, 61.6px) scale(0); } } @-moz-keyframes loading-ball-c { 0% { background: #e15b64; } 25% { background: #abbd81; } 50% { background: #f8b26a; } 75% { background: #f47e60; } 100% { background: #e15b64; } } @-webkit-keyframes loading-ball-c { 0% { background: #e15b64; } 25% { background: #abbd81; } 50% { background: #f8b26a; } 75% { background: #f47e60; } 100% { background: #e15b64; } } @-o-keyframes loading-ball-c { 0% { background: #e15b64; } 25% { background: #abbd81; } 50% { background: #f8b26a; } 75% { background: #f47e60; } 100% { background: #e15b64; } } @keyframes loading-ball-c { 0% { background: #e15b64; } 25% { background: #abbd81; } 50% { background: #f8b26a; } 75% { background: #f47e60; } 100% { background: #e15b64; } } blockquote.pullquote { position: relative; max-width: 45%; font-size: 110%; } blockquote.pullquote.left { float: left; margin: 1em 0.5em 0 0; } blockquote.pullquote.right { float: right; margin: 1em 0 0 0.5em; } .video-container { position: relative; overflow: hidden; margin-bottom: 16px; padding-top: 56.25%; height: 0; } .video-container iframe { position: absolute; top: 0; left: 0; margin-top: 0; width: 100%; height: 100%; } .hide-inline > .hide-button, .hide-block > .hide-button { display: inline-block; padding: 5px 18px; background: #49b1f5; color: var(--white); } .hide-inline > .hide-button:hover, .hide-block > .hide-button:hover { background-color: var(--btn-hover-color); } .hide-inline > .hide-button.open, .hide-block > .hide-button.open { display: none; } .hide-inline > .hide-button.open + div, .hide-block > .hide-button.open + div { display: block; } .hide-inline > .hide-button.open + span, .hide-block > .hide-button.open + span { display: inline; } .hide-inline > .hide-content, .hide-block > .hide-content { display: none; } .hide-inline > .hide-button { margin: 0 6px; } .hide-inline > .hide-content { margin: 0 6px; } .hide-block { margin: 0 0 16px; } .toggle { margin-bottom: 20px; border: 1px solid #f0f0f0; } .toggle > .toggle-button { padding: 6px 15px; background: #f0f0f0; color: #1f2d3d; cursor: pointer; } .toggle > .toggle-content { margin: 30px 24px; } #article-container .inline-img { display: inline; margin: 0 3px; height: 1.1em; vertical-align: text-bottom; } .hl-label { padding: 2px 4px; border-radius: 3px; color: #fff; } .hl-label.default { background-color: #777; } .hl-label.blue { background-color: #428bca; } .hl-label.pink { background-color: #ff69b4; } .hl-label.red { background-color: #f00; } .hl-label.purple { background-color: #6f42c1; } .hl-label.orange { background-color: #ff8c00; } .hl-label.green { background-color: #5cb85c; } .note { position: relative; margin: 0 0 20px; padding: 15px; border-radius: 3px; } .note.icon-padding { padding-left: 3em; } .note > .note-icon { position: absolute; top: calc(50% - 0.5em); left: 0.8em; font-size: larger; } .note.blue:not(.disabled) { border-left-color: #428bca !important; } .note.blue:not(.disabled).modern { border-left-color: transparent !important; color: #428bca; } .note.blue:not(.disabled):not(.simple) { background: #e3eef7 !important; } .note.blue > .note-icon { color: #428bca; } .note.pink:not(.disabled) { border-left-color: #ff69b4 !important; } .note.pink:not(.disabled).modern { border-left-color: transparent !important; color: #ff69b4; } .note.pink:not(.disabled):not(.simple) { background: #ffe9f4 !important; } .note.pink > .note-icon { color: #ff69b4; } .note.red:not(.disabled) { border-left-color: #f00 !important; } .note.red:not(.disabled).modern { border-left-color: transparent !important; color: #f00; } .note.red:not(.disabled):not(.simple) { background: #ffd9d9 !important; } .note.red > .note-icon { color: #f00; } .note.purple:not(.disabled) { border-left-color: #6f42c1 !important; } .note.purple:not(.disabled).modern { border-left-color: transparent !important; color: #6f42c1; } .note.purple:not(.disabled):not(.simple) { background: #e9e3f6 !important; } .note.purple > .note-icon { color: #6f42c1; } .note.orange:not(.disabled) { border-left-color: #ff8c00 !important; } .note.orange:not(.disabled).modern { border-left-color: transparent !important; color: #ff8c00; } .note.orange:not(.disabled):not(.simple) { background: #ffeed9 !important; } .note.orange > .note-icon { color: #ff8c00; } .note.green:not(.disabled) { border-left-color: #5cb85c !important; } .note.green:not(.disabled).modern { border-left-color: transparent !important; color: #5cb85c; } .note.green:not(.disabled):not(.simple) { background: #e7f4e7 !important; } .note.green > .note-icon { color: #5cb85c; } .note.simple { border: 1px solid #eee; border-left-width: 5px; } .note.modern { border: 1px solid transparent !important; background-color: #f5f5f5; color: #4c4948; } .note.flat { border: initial; border-left: 5px solid #eee; background-color: #f9f9f9; color: #4c4948; } .note h2, .note h3, .note h4, .note h5, .note h6 { margin-top: 3px; margin-bottom: 0; padding-top: 0 !important; border-bottom: initial; } .note p:first-child, .note ul:first-child, .note ol:first-child, .note table:first-child, .note pre:first-child, .note blockquote:first-child, .note img:first-child { margin-top: 0 !important; } .note p:last-child, .note ul:last-child, .note ol:last-child, .note table:last-child, .note pre:last-child, .note blockquote:last-child, .note img:last-child { margin-bottom: 0 !important; } .note .img-alt { margin: 5px 0 10px; } .note:not(.no-icon) { padding-left: 3em; } .note:not(.no-icon)::before { position: absolute; top: calc(50% - 0.95em); left: 0.8em; font-size: larger; } .note.default.flat { background: #f7f7f7; } .note.default.modern { border-color: #e1e1e1; background: #f3f3f3; color: #666; } .note.default.modern a:not(.btn) { color: #666; } .note.default.modern a:not(.btn):hover { color: #454545; } .note.default:not(.modern) { border-left-color: #777; } .note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 { color: #777; } .note.default:not(.no-icon)::before { content: '\f0a9'; } .note.default:not(.no-icon):not(.modern)::before { color: #777; } .note.primary.flat { background: #f5f0fa; } .note.primary.modern { border-color: #e1c2ff; background: #f3daff; color: #6f42c1; } .note.primary.modern a:not(.btn) { color: #6f42c1; } .note.primary.modern a:not(.btn):hover { color: #453298; } .note.primary:not(.modern) { border-left-color: #6f42c1; } .note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 { color: #6f42c1; } .note.primary:not(.no-icon)::before { content: '\f055'; } .note.primary:not(.no-icon):not(.modern)::before { color: #6f42c1; } .note.info.flat { background: #eef7fa; } .note.info.modern { border-color: #b3e5ef; background: #d9edf7; color: #31708f; } .note.info.modern a:not(.btn) { color: #31708f; } .note.info.modern a:not(.btn):hover { color: #215761; } .note.info:not(.modern) { border-left-color: #428bca; } .note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 { color: #428bca; } .note.info:not(.no-icon)::before { content: '\f05a'; } .note.info:not(.no-icon):not(.modern)::before { color: #428bca; } .note.success.flat { background: #eff8f0; } .note.success.modern { border-color: #d0e6be; background: #dff0d8; color: #3c763d; } .note.success.modern a:not(.btn) { color: #3c763d; } .note.success.modern a:not(.btn):hover { color: #32562c; } .note.success:not(.modern) { border-left-color: #5cb85c; } .note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 { color: #5cb85c; } .note.success:not(.no-icon)::before { content: '\f058'; } .note.success:not(.no-icon):not(.modern)::before { color: #5cb85c; } .note.warning.flat { background: #fdf8ea; } .note.warning.modern { border-color: #fae4cd; background: #fcf4e3; color: #8a6d3b; } .note.warning.modern a:not(.btn) { color: #8a6d3b; } .note.warning.modern a:not(.btn):hover { color: #714f30; } .note.warning:not(.modern) { border-left-color: #f0ad4e; } .note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 { color: #f0ad4e; } .note.warning:not(.no-icon)::before { content: '\f06a'; } .note.warning:not(.no-icon):not(.modern)::before { color: #f0ad4e; } .note.danger.flat { background: #fcf1f2; } .note.danger.modern { border-color: #ebcdd2; background: #f2dfdf; color: #a94442; } .note.danger.modern a:not(.btn) { color: #a94442; } .note.danger.modern a:not(.btn):hover { color: #84333f; } .note.danger:not(.modern) { border-left-color: #d9534f; } .note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 { color: #d9534f; } .note.danger:not(.no-icon)::before { content: '\f056'; } .note.danger:not(.no-icon):not(.modern)::before { color: #d9534f; } #article-container .tabs { position: relative; margin: 0 0 20px; border-right: 1px solid var(--tab-border-color); border-bottom: 1px solid var(--tab-border-color); border-left: 1px solid var(--tab-border-color); } #article-container .tabs > .nav-tabs { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; background: var(--tab-botton-bg); } #article-container .tabs > .nav-tabs > .tab { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; padding: 8px 18px; border-top: 2px solid var(--tab-border-color); background: var(--tab-botton-bg); color: var(--tab-botton-color); line-height: 2; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } #article-container .tabs > .nav-tabs > .tab i { width: 1.5em; } #article-container .tabs > .nav-tabs > .tab.active { border-top: 2px solid #49b1f5; background: var(--tab-button-active-bg); cursor: default; } #article-container .tabs > .nav-tabs > .tab:not(.active):hover { border-top: 2px solid var(--tab-button-hover-bg); background: var(--tab-button-hover-bg); } #article-container .tabs > .nav-tabs.no-default ~ .tab-to-top { display: none; } #article-container .tabs > .tab-contents .tab-item-content { position: relative; display: none; padding: 36px 24px 10px; } @media screen and (max-width: 768px) { #article-container .tabs > .tab-contents .tab-item-content { padding: 24px 14px; } } #article-container .tabs > .tab-contents .tab-item-content.active { display: block; -webkit-animation: tabshow 0.5s; -moz-animation: tabshow 0.5s; -o-animation: tabshow 0.5s; -ms-animation: tabshow 0.5s; animation: tabshow 0.5s; } #article-container .tabs > .tab-contents .tab-item-content > :last-child { margin-bottom: 0; } #article-container .tabs > .tab-to-top { padding: 0 16px 10px 0; width: 100%; text-align: right; } #article-container .tabs > .tab-to-top button { color: #99a9bf; } #article-container .tabs > .tab-to-top button:hover { color: #49b1f5; } @-moz-keyframes tabshow { 0% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes tabshow { 0% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes tabshow { 0% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes tabshow { 0% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } #article-container .timeline { margin: 0 0 20px 10px; padding: 14px 20px 5px; border-left: 2px solid var(--timeline-color, #49b1f5); } #article-container .timeline.blue { --timeline-color: #428bca; --timeline-bg: rgba(66,139,202, 0.2); } #article-container .timeline.pink { --timeline-color: #ff69b4; --timeline-bg: rgba(255,105,180, 0.2); } #article-container .timeline.red { --timeline-color: #f00; --timeline-bg: rgba(255,0,0, 0.2); } #article-container .timeline.purple { --timeline-color: #6f42c1; --timeline-bg: rgba(111,66,193, 0.2); } #article-container .timeline.orange { --timeline-color: #ff8c00; --timeline-bg: rgba(255,140,0, 0.2); } #article-container .timeline.green { --timeline-color: #5cb85c; --timeline-bg: rgba(92,184,92, 0.2); } #article-container .timeline .timeline-item { margin: 0 0 15px; } #article-container .timeline .timeline-item:hover .item-circle:before { border-color: var(--timeline-color, #49b1f5); } #article-container .timeline .timeline-item.headline .timeline-item-title .item-circle > p { font-weight: 600; font-size: 1.2em; } #article-container .timeline .timeline-item.headline .timeline-item-title .item-circle:before { left: -28px; border: 4px solid var(--timeline-color, #49b1f5); } #article-container .timeline .timeline-item.headline:hover .item-circle:before { border-color: var(--pseudo-hover); } #article-container .timeline .timeline-item .timeline-item-title { position: relative; } #article-container .timeline .timeline-item .item-circle:before { position: absolute; top: 50%; left: -27px; width: 6px; height: 6px; border: 3px solid var(--pseudo-hover); border-radius: 50%; background: var(--card-bg); content: ''; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #article-container .timeline .timeline-item .item-circle > p { margin: 0 0 8px; font-weight: 500; } #article-container .timeline .timeline-item .timeline-item-content { position: relative; padding: 12px 15px; border-radius: 8px; background: var(--timeline-bg, #e4f3fd); font-size: 0.93em; } #article-container .timeline .timeline-item .timeline-item-content > :last-child { margin-bottom: 0; } #article-container .timeline + .timeline { margin-top: -20px; } [data-theme='dark'] { --global-bg: #0d0d0d; --font-color: rgba(255,255,255,0.7); --hr-border: rgba(255,255,255,0.4); --hr-before-color: rgba(255,255,255,0.7); --search-bg: #121212; --search-input-color: rgba(255,255,255,0.7); --search-a-color: rgba(255,255,255,0.7); --preloader-bg: #0d0d0d; --preloader-color: rgba(255,255,255,0.7); --tab-border-color: #2c2c2c; --tab-botton-bg: #2c2c2c; --tab-botton-color: rgba(255,255,255,0.7); --tab-button-hover-bg: #383838; --tab-button-active-bg: #121212; --card-bg: #121212; --sidebar-bg: #121212; --btn-hover-color: #787878; --btn-color: rgba(255,255,255,0.7); --btn-bg: #1f1f1f; --text-bg-hover: #383838; --light-grey: rgba(255,255,255,0.7); --dark-grey: rgba(255,255,255,0.2); --white: rgba(255,255,255,0.9); --text-highlight-color: rgba(255,255,255,0.9); --blockquote-color: rgba(255,255,255,0.7); --blockquote-bg: #2c2c2c; --reward-pop: #2c2c2c; --toc-link-color: rgba(255,255,255,0.6); --scrollbar-color: #525252; --timeline-bg: #1f1f1f; --zoom-bg: #121212; --mark-bg: rgba(0,0,0,0.6); } [data-theme='dark'] #web_bg:before { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); content: ''; } [data-theme='dark'] #article-container code { background: #2c2c2c; } [data-theme='dark'] #article-container pre > code { background: #171717; } [data-theme='dark'] #article-container figure.highlight { -webkit-box-shadow: none; box-shadow: none; } [data-theme='dark'] #article-container .note code { background: rgba(27,31,35,0.05); } [data-theme='dark'] #article-container .aplayer { filter: brightness(0.8); } [data-theme='dark'] #article-container kbd { border-color: #696969; background-color: #525252; color: #e2f1ff; } [data-theme='dark'] #page-header.nav-fixed > #nav, [data-theme='dark'] #page-header.not-top-img > #nav { background: rgba(18,18,18,0.8); -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0); box-shadow: 0 5px 6px -5px rgba(133,133,133,0); } [data-theme='dark'] #post-comment .comment-switch { background: #2c2c2c !important; } [data-theme='dark'] #post-comment .comment-switch #switch-btn { filter: brightness(0.8); } [data-theme='dark'] .note { filter: brightness(0.8); } [data-theme='dark'] .hide-button, [data-theme='dark'] .btn-beautify, [data-theme='dark'] .hl-label, [data-theme='dark'] .post-outdate-notice, [data-theme='dark'] .error-img, [data-theme='dark'] #article-container iframe, [data-theme='dark'] .gist, [data-theme='dark'] .ads-wrap { filter: brightness(0.8); } [data-theme='dark'] img { filter: brightness(0.8); } [data-theme='dark'] #aside-content .aside-list > .aside-list-item:not(:last-child) { border-bottom: 1px dashed rgba(255,255,255,0.1); } [data-theme='dark'] #gitalk-container { filter: brightness(0.8); } [data-theme='dark'] #gitalk-container svg { fill: rgba(255,255,255,0.9) !important; } [data-theme='dark'] #disqusjs #dsqjs:hover, [data-theme='dark'] #disqusjs #dsqjs:focus, [data-theme='dark'] #disqusjs #dsqjs .dsqjs-tab-active, [data-theme='dark'] #disqusjs #dsqjs .dsqjs-no-comment { color: rgba(255,255,255,0.7); } [data-theme='dark'] #disqusjs #dsqjs .dsqjs-order-label { background-color: #1f1f1f; } [data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body { color: rgba(255,255,255,0.7); } [data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body code, [data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body pre { background: #2c2c2c; } [data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body blockquote { color: rgba(255,255,255,0.7); } [data-theme='dark'] #artitalk_main #lazy { background: #121212; } [data-theme='dark'] #operare_artitalk .c2 { background: #121212; } @media screen and (max-width: 900px) { [data-theme='dark'] #card-toc { background: #1f1f1f; } } .read-mode { --font-color: #4c4948; --readmode-light-color: #fff; --white: #4c4948; --light-grey: #4c4948; --gray: #d6dbdf; --hr-border: #d6dbdf; --hr-before-color: #b9c2c9; --highlight-bg: #f7f7f7; --exit-btn-bg: #c0c0c0; --exit-btn-color: #fff; --exit-btn-hover: #8d8d8d; --pseudo-hover: none; } [data-theme='dark'] .read-mode { --font-color: rgba(255,255,255,0.7); --readmode-light-color: #0d0d0d; --white: rgba(255,255,255,0.9); --light-grey: rgba(255,255,255,0.7); --gray: rgba(255,255,255,0.7); --hr-border: rgba(255,255,255,0.5); --hr-before-color: rgba(255,255,255,0.7); --highlight-bg: #171717; --exit-btn-bg: #1f1f1f; --exit-btn-color: rgba(255,255,255,0.9); --exit-btn-hover: #525252; } .read-mode { background: var(--readmode-light-color); } .read-mode .exit-readmode { position: fixed; top: 30px; right: 30px; z-index: 100; width: 40px; height: 40px; border-radius: 8px; background: var(--exit-btn-bg); color: var(--exit-btn-color); font-size: 16px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -o-transition: background 0.3s; -ms-transition: background 0.3s; transition: background 0.3s; } @media screen and (max-width: 768px) { .read-mode .exit-readmode { top: initial; bottom: 30px; } } .read-mode .exit-readmode:hover { background: var(--exit-btn-hover); } .read-mode #aside-content { display: none; } .read-mode #page-header.post-bg { background: none !important; } .read-mode #page-header.post-bg:before { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .read-mode #page-header.post-bg > #post-info { text-align: center; } .read-mode #post { margin: 0 auto; background: transparent; -webkit-box-shadow: none; box-shadow: none; } .read-mode #post:hover { -webkit-box-shadow: none; box-shadow: none; } .read-mode > canvas { display: none !important; } .read-mode .highlight-tools, .read-mode #footer, .read-mode #post > *:not(#post-info):not(.post-content), .read-mode #nav, .read-mode .post-outdate-notice, .read-mode #web_bg, .read-mode #rightside, .read-mode .not-top-img { display: none !important; } .read-mode #article-container a { color: #99a9bf; } .read-mode #article-container pre, .read-mode #article-container .highlight:not(.js-file-line-container) { background: var(--highlight-bg) !important; } .read-mode #article-container pre *, .read-mode #article-container .highlight:not(.js-file-line-container) * { color: var(--font-color) !important; } .read-mode #article-container figure.highlight { border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .read-mode #article-container figure.highlight > :not(.highlight-tools) { display: block !important; } .read-mode #article-container figure.highlight .line:before { color: var(--font-color) !important; } .read-mode #article-container figure.highlight .hljs { background: var(--highlight-bg) !important; } .read-mode #article-container h1, .read-mode #article-container h2, .read-mode #article-container h3, .read-mode #article-container h4, .read-mode #article-container h5, .read-mode #article-container h6 { padding: 0; } .read-mode #article-container h1:before, .read-mode #article-container h2:before, .read-mode #article-container h3:before, .read-mode #article-container h4:before, .read-mode #article-container h5:before, .read-mode #article-container h6:before { content: ''; } .read-mode #article-container h1:hover, .read-mode #article-container h2:hover, .read-mode #article-container h3:hover, .read-mode #article-container h4:hover, .read-mode #article-container h5:hover, .read-mode #article-container h6:hover { padding: 0; } .read-mode #article-container ul:hover:before, .read-mode #article-container li:hover:before, .read-mode #article-container ol:hover:before { -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; -ms-transform: none !important; transform: none !important; } .read-mode #article-container ol:before, .read-mode #article-container li:before { background: transparent !important; color: var(--font-color) !important; } .read-mode #article-container ul >li:before { border-color: var(--gray) !important; } .read-mode #article-container .tabs { border: 2px solid var(--tab-border-color); } .read-mode #article-container .tabs > .nav-tabs { background: transparent; } .read-mode #article-container .tabs > .nav-tabs > .tab { border-top: none !important; } .read-mode #article-container .tabs > .tab-contents .tab-item-content.active { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } .read-mode #article-container code { color: var(--font-color); } .read-mode #article-container blockquote { border-color: var(--gray); background-color: var(--readmode-light-color); } .read-mode #article-container kbd { border: 1px solid var(--gray); background-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: var(--font-color); } .read-mode #article-container .hide-toggle { border: 1px solid var(--gray) !important; } .read-mode #article-container .hide-button, .read-mode #article-container .btn-beautify, .read-mode #article-container .hl-label { border: 1px solid var(--gray) !important; background: var(--readmode-light-color) !important; color: var(--font-color) !important; } .read-mode #article-container .note { border: 2px solid var(--gray); border-left-color: var(--gray) !important; filter: none; background-color: var(--readmode-light-color) !important; color: var(--font-color); } .read-mode #article-container .note:before, .read-mode #article-container .note .note-icon { color: var(--font-color); } .search-dialog { position: fixed; top: 10%; left: 50%; z-index: 1001; display: none; margin-left: -300px; padding: 20px; width: 600px; border-radius: 8px; background: var(--search-bg); --search-height: 100vh; } @media screen and (max-width: 768px) { .search-dialog { top: 0; left: 0; margin: 0; width: 100%; height: 100%; border-radius: 0; } } .search-dialog hr { margin: 20px auto; } .search-dialog .search-nav { margin: 0 0 14px; color: #49b1f5; font-size: 1.4em; line-height: 1; } .search-dialog .search-nav .search-dialog-title { margin-right: 10px; } .search-dialog .search-nav .search-close-button { float: right; color: #858585; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .search-dialog .search-nav .search-close-button:hover { color: #49b1f5; } .search-dialog hr { margin: 20px auto; } #search-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; background: rgba(0,0,0,0.6); }