/*! 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, .container .flink .flink-item-name, .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, #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, .pagination-related .info .info-1 .info-item-2, .pagination-related .info .info-2 .info-item-1, .container figure.gallery-group p, .container figure.gallery-group .gallery-group-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .fontawesomeIcon, .custom-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 7 Free', 'Font Awesome 6 Free'; text-rendering: auto; -webkit-font-smoothing: antialiased; } .cardHover, .layout > div:first-child:not(.nc), #recent-posts .recent-post-item, #article-container .shuoshuo-item, #aside-content .card-widget, .layout .pagination > *:not(.space) { 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; border-radius: 8px; } .cardHover:hover, .layout > div:first-child:not(.nc):hover, #recent-posts .recent-post-item:hover, #article-container .shuoshuo-item:hover, #aside-content .card-widget:hover, .layout .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-related:hover .cover { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -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-related .cover { 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, .search-dialog hr { position: relative; margin: 40px auto; border: 2px dashed var(--hr-border); width: calc(100% - 4px); } .custom-hr:hover:before, .search-dialog hr:hover:before { left: calc(95% - 20px); } .custom-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; } .verticalCenter, .pagination-related .info .info-1, .pagination-related .info .info-2 { position: absolute; top: 50%; 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%); } #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), #nav.show { -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; } 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; } .btn-effects, .shuoshuo-navigation button:not(:disabled), #aside-content .card-info #card-info-btn, .post-reward .reward-button, #rightside > div > button, #rightside > div > a, .container .btn-beautify, .hide-inline > .hide-button, .hide-block > .hide-button { position: relative; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .btn-effects:hover, .shuoshuo-navigation button:not(:disabled):hover, #aside-content .card-info #card-info-btn:hover, .post-reward .reward-button:hover, #rightside > div > button:hover, #rightside > div > a:hover, .container .btn-beautify:hover, .hide-inline > .hide-button:hover, .hide-block > .hide-button:hover { -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-decoration: none; -webkit-transform: translateY(-1px) scale(1.02); -moz-transform: translateY(-1px) scale(1.02); -o-transform: translateY(-1px) scale(1.02); -ms-transform: translateY(-1px) scale(1.02); transform: translateY(-1px) scale(1.02); } .btn-effects:active, .shuoshuo-navigation button:not(:disabled):active, #aside-content .card-info #card-info-btn:active, .post-reward .reward-button:active, #rightside > div > button:active, #rightside > div > a:active, .container .btn-beautify:active, .hide-inline > .hide-button:active, .hide-block > .hide-button:active { -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -ms-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transform: translateY(0) scale(0.98); -moz-transform: translateY(0) scale(0.98); -o-transform: translateY(0) scale(0.98); -ms-transform: translateY(0) scale(0.98); transform: translateY(0) scale(0.98); } .btn-effects i, .shuoshuo-navigation button:not(:disabled) i, #aside-content .card-info #card-info-btn i, .post-reward .reward-button i, #rightside > div > button i, #rightside > div > a i, .container .btn-beautify i, .hide-inline > .hide-button i, .hide-block > .hide-button i { display: inline-block; vertical-align: middle; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-effects:hover i, .shuoshuo-navigation button:not(:disabled):hover i, #aside-content .card-info #card-info-btn:hover i, .post-reward .reward-button:hover i, #rightside > div > button:hover i, #rightside > div > a:hover i, .container .btn-beautify:hover i, .hide-inline > .hide-button:hover i, .hide-block > .hide-button:hover i { -webkit-animation: buttonIconBounce 0.6s ease-in-out; -moz-animation: buttonIconBounce 0.6s ease-in-out; -o-animation: buttonIconBounce 0.6s ease-in-out; -ms-animation: buttonIconBounce 0.6s ease-in-out; animation: buttonIconBounce 0.6s ease-in-out; } .btn-effects i + span, .shuoshuo-navigation button:not(:disabled) i + span, #aside-content .card-info #card-info-btn i + span, .post-reward .reward-button i + span, #rightside > div > button i + span, #rightside > div > a i + span, .container .btn-beautify i + span, .hide-inline > .hide-button i + span, .hide-block > .hide-button i + span { margin-left: 6px; vertical-align: middle; -webkit-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-effects:hover i + span, .shuoshuo-navigation button:not(:disabled):hover i + span, #aside-content .card-info #card-info-btn:hover i + span, .post-reward .reward-button:hover i + span, #rightside > div > button:hover i + span, #rightside > div > a:hover i + span, .container .btn-beautify:hover i + span, .hide-inline > .hide-button:hover i + span, .hide-block > .hide-button:hover i + span { margin-left: 8px; } .btn-effects::before, .shuoshuo-navigation button:not(:disabled)::before, #aside-content .card-info #card-info-btn::before, .post-reward .reward-button::before, #rightside > div > button::before, #rightside > div > a::before, .container .btn-beautify::before, .hide-inline > .hide-button::before, .hide-block > .hide-button::before { position: absolute; top: 0; left: -100%; z-index: 1; width: 100%; height: 100%; background: -webkit-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); background: -moz-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); background: -o-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); background: -ms-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); content: ''; -webkit-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .btn-effects:hover::before, .shuoshuo-navigation button:not(:disabled):hover::before, #aside-content .card-info #card-info-btn:hover::before, .post-reward .reward-button:hover::before, #rightside > div > button:hover::before, #rightside > div > a:hover::before, .container .btn-beautify:hover::before, .hide-inline > .hide-button:hover::before, .hide-block > .hide-button:hover::before { left: 100%; } .btn-effects > *, .shuoshuo-navigation button:not(:disabled) > *, #aside-content .card-info #card-info-btn > *, .post-reward .reward-button > *, #rightside > div > button > *, #rightside > div > a > *, .container .btn-beautify > *, .hide-inline > .hide-button > *, .hide-block > .hide-button > * { position: relative; z-index: 2; } .btn-effects-large:hover, .post-reward .reward-button:hover, .container .btn-beautify.larger:hover { -webkit-box-shadow: 0 6px 16px rgba(0,0,0,0.2); box-shadow: 0 6px 16px rgba(0,0,0,0.2); -webkit-transform: translateY(-2px) scale(1.03); -moz-transform: translateY(-2px) scale(1.03); -o-transform: translateY(-2px) scale(1.03); -ms-transform: translateY(-2px) scale(1.03); transform: translateY(-2px) scale(1.03); } @-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% { -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -o-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes header-effect { 0% { -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -o-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes header-effect { 0% { -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -o-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes header-effect { 0% { -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -o-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); } 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% { -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -o-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bottom-top { 0% { -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -o-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bottom-top { 0% { -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -o-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes bottom-top { 0% { -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -o-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } 100% { -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); } } @-moz-keyframes buttonIconBounce { 0%, 100% { -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 25% { -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); transform: translateY(-3px) scale(1.1) rotateZ(-5deg); } 50% { -webkit-transform: translateY(0) scale(1.05) rotateZ(0); -moz-transform: translateY(0) scale(1.05) rotateZ(0); -o-transform: translateY(0) scale(1.05) rotateZ(0); -ms-transform: translateY(0) scale(1.05) rotateZ(0); transform: translateY(0) scale(1.05) rotateZ(0); } 75% { -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); transform: translateY(-1px) scale(1.02) rotateZ(2deg); } } @-webkit-keyframes buttonIconBounce { 0%, 100% { -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 25% { -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); transform: translateY(-3px) scale(1.1) rotateZ(-5deg); } 50% { -webkit-transform: translateY(0) scale(1.05) rotateZ(0); -moz-transform: translateY(0) scale(1.05) rotateZ(0); -o-transform: translateY(0) scale(1.05) rotateZ(0); -ms-transform: translateY(0) scale(1.05) rotateZ(0); transform: translateY(0) scale(1.05) rotateZ(0); } 75% { -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); transform: translateY(-1px) scale(1.02) rotateZ(2deg); } } @-o-keyframes buttonIconBounce { 0%, 100% { -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 25% { -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); transform: translateY(-3px) scale(1.1) rotateZ(-5deg); } 50% { -webkit-transform: translateY(0) scale(1.05) rotateZ(0); -moz-transform: translateY(0) scale(1.05) rotateZ(0); -o-transform: translateY(0) scale(1.05) rotateZ(0); -ms-transform: translateY(0) scale(1.05) rotateZ(0); transform: translateY(0) scale(1.05) rotateZ(0); } 75% { -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); transform: translateY(-1px) scale(1.02) rotateZ(2deg); } } @keyframes buttonIconBounce { 0%, 100% { -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 25% { -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); transform: translateY(-3px) scale(1.1) rotateZ(-5deg); } 50% { -webkit-transform: translateY(0) scale(1.05) rotateZ(0); -moz-transform: translateY(0) scale(1.05) rotateZ(0); -o-transform: translateY(0) scale(1.05) rotateZ(0); -ms-transform: translateY(0) scale(1.05) rotateZ(0); transform: translateY(0) scale(1.05) rotateZ(0); } 75% { -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); transform: translateY(-1px) scale(1.02) rotateZ(2deg); } } :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-button-bg: #f0f0f0; --tab-button-color: #1f2d3d; --tab-button-hover-bg: #dcdcdc; --tab-button-active-bg: #fff; --card-bg: #fff; --card-meta: #858585; --sidebar-bg: #f6f8fa; --sidebar-menu-bg: #fff; --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); } :root { --btn-color: #fff; --btn-default-color: #777; --tags-blue-color: #428bca; --tags-blue-color-lighten: #e3eef7; --tags-pink-color: #ff69b4; --tags-pink-color-lighten: #ffe9f4; --tags-red-color: #f00; --tags-red-color-lighten: #ffd9d9; --tags-orange-color: #ff8c00; --tags-orange-color-lighten: #ffeed9; --tags-purple-color: #6f42c1; --tags-purple-color-lighten: #e9e3f6; --tags-green-color: #5cb85c; --tags-green-color-lighten: #e7f4e7; --note-default-border: #777; --note-default-bg: #f7f7f7; --note-default-text: #777; --note-modern-default-border: #e1e1e1; --note-modern-default-bg: #f3f3f3; --note-modern-default-text: #666; --note-modern-default-hover: #454545; --note-primary-border: #6f42c1; --note-primary-bg: #f5f0fa; --note-primary-text: #6f42c1; --note-modern-primary-border: #e1c2ff; --note-modern-primary-bg: #f3daff; --note-modern-primary-text: #6f42c1; --note-modern-primary-hover: #453298; --note-info-border: #428bca; --note-info-bg: #eef7fa; --note-info-text: #428bca; --note-modern-info-border: #b3e5ef; --note-modern-info-bg: #d9edf7; --note-modern-info-text: #31708f; --note-modern-info-hover: #215761; --note-success-border: #5cb85c; --note-success-bg: #eff8f0; --note-success-text: #5cb85c; --note-modern-success-border: #d0e6be; --note-modern-success-bg: #dff0d8; --note-modern-success-text: #3c763d; --note-modern-success-hover: #32562c; --note-warning-border: #f0ad4e; --note-warning-bg: #fdf8ea; --note-warning-text: #f0ad4e; --note-modern-warning-border: #fae4cd; --note-modern-warning-bg: #fcf4e3; --note-modern-warning-text: #8a6d3b; --note-modern-warning-hover: #714f30; --note-danger-border: #d9534f; --note-danger-bg: #fcf1f2; --note-danger-text: #d9534f; --note-modern-danger-border: #ebcdd2; --note-modern-danger-bg: #f2dfdf; --note-modern-danger-text: #a94442; --note-modern-danger-hover: #84333f; } body { position: relative; overflow-y: scroll; min-height: 100%; background: var(--global-bg); color: var(--font-color); font-size: var(--global-font-size); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 2; -webkit-tap-highlight-color: rgba(0,0,0,0); scroll-behavior: smooth; } @-moz-document url-prefix() { * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color) transparent; } } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-color); } *::-webkit-scrollbar-track { background-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; border-radius: 5px; } .table-wrap table { border-radius: 5px; } .table-wrap table thead > tr:first-child th:first-child { border-top-left-radius: 5px; } .table-wrap table thead > tr:first-child th:last-child { border-top-right-radius: 5px; } .table-wrap table tbody > tr:last-child td:first-child { border-bottom-left-radius: 5px; } .table-wrap table tbody > tr:last-child td:last-child { border-bottom-right-radius: 5px; } table { display: table; width: 100%; border-spacing: 0; border-collapse: separate; border-top: 1px solid var(--light-grey); border-left: 1px solid var(--light-grey); 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); border-top: none; border-left: none; 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; } .text-center { text-align: center; } .text-right { text-align: 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: 7px 15px; border-left: 4px solid #49b1f5; background-color: var(--blockquote-bg); color: var(--blockquote-color); border-radius: 6px; } blockquote footer cite:before { padding: 0 5px; content: '—'; } blockquote > :last-child { margin-bottom: 0 !important; } .fa-fw { width: 1.25em; text-align: center; } :root { --hl-color: #90a4ae; --hl-bg: #f6f8fa; --hltools-bg: #e6ebf1; --hltools-color: #90a4ae; --hlnumber-bg: #f6f8fa; --hlnumber-color: rgba(144,164,174,0.5); --hlscrollbar-bg: #dce4eb; --hlexpand-bg: linear-gradient(180deg, rgba(246,248,250,0.6), rgba(246,248,250,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)); } @-moz-document url-prefix() { 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: #7c4dff; } figure.highlight pre .comment { color: rgba(149,165,166,0.8); } 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: #e53935; } figure.highlight pre .tag { color: #39adb5; } 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: #f76d47; } figure.highlight pre .built_in { color: #ffb62c; } 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: #91b859; } figure.highlight pre .keyword, figure.highlight pre .title, figure.highlight pre .css .hexcolor { color: #39adb5; } 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: #6182b8; } figure.highlight pre .tag .attr, figure.highlight pre .javascript .function { color: #7c4dff; } .container figure.highlight .line.marked { background-color: rgba(128,203,196,0.251); } .container figure.highlight table { display: block; overflow: auto; border: none; } .container figure.highlight table td { padding: 0; border: none; } .container figure.highlight .gutter pre { padding-right: 10px; padding-left: 10px; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); text-align: right; } .container figure.highlight .code pre { padding-right: 10px; padding-left: 10px; width: 100%; } .container pre, .container figure.highlight { overflow: auto; margin: 0 0 20px; padding: 0; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; } .container pre, .container code { font-size: var(--global-font-size); font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif !important; border-radius: 6px; } .container code { padding: 2px 5px; background: rgba(27,31,35,0.05); color: #f47466; } .container pre { padding: 10px 20px; } .container pre code { padding: 0; background: none; color: var(--hl-color); text-shadow: none; } .container figure.highlight { position: relative; border-radius: 6px; } .container figure.highlight pre { margin: 0; padding: 8px 0; border: none; } .container figure.highlight figcaption, .container figure.highlight .caption { padding: 6px 0 2px 14px; font-size: var(--global-font-size); line-height: 1em; } .container figure.highlight figcaption a, .container figure.highlight .caption a { float: right; padding-right: 10px; color: var(--hl-color); } .container figure.highlight figcaption a:hover, .container figure.highlight .caption a:hover { border-bottom-color: var(--hl-color); } .container figure.highlight.copy-true { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; -webkit-user-select: all; } .container figure.highlight.copy-true > table, .container figure.highlight.copy-true > pre { display: block !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .container .highlight-tools { 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 8px; min-height: 24px; height: 2.15em; background: var(--hltools-bg); color: var(--hltools-color); font-size: var(--global-font-size); overflow: hidden; } .container .highlight-tools > * { padding: 5px; } .container .highlight-tools i { cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .container .highlight-tools i:hover { color: #49b1f5; } .container .highlight-tools.closed ~ * { display: none; } .container .highlight-tools.closed .expand { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .container .highlight-tools > .macStyle { padding: 0; } .container .highlight-tools .code-lang { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; 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; padding: 2px; } .container .highlight-tools .copy-notice { padding-right: 2px; 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; } .container .highlight-tools .code-lang { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .container .gutter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .container .gist table { width: auto; } .container .gist table td { border: none; } .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; margin-bottom: 10px; } .article-sort-item.year:hover:before { border-color: #49b1f5; } .article-sort-item.year:before { border-color: var(--pseudo-hover); } .article-sort-item-time { color: var(--card-meta); font-size: 0.85em; } .article-sort-item-time time { padding-left: 6px; cursor: default; } .article-sort-item-title { color: var(--font-color); font-size: 1.05em; -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: 100px; height: 70px; border-radius: 6px; } @media screen and (max-width: 768px) { .article-sort-item-img { width: 70px; height: 70px; } } .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: var(--card-meta); } .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: 60%; } } .layout > div:first-child:not(.nc) { -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(.nc) { 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); } .container .flink { margin-bottom: 20px; } .container .flink .flink-list { overflow: auto; padding: 10px 10px 0; text-align: center; } .container .flink .flink-list > .flink-list-item { position: relative; float: left; overflow: hidden; margin: 15px 7px; width: calc(100% / 3 - 15px); height: 90px; line-height: 17px; -webkit-transform: translateZ(0); border-radius: 8px; } @media screen and (max-width: 1024px) { .container .flink .flink-list > .flink-list-item { width: calc(50% - 15px) !important; } } @media screen and (max-width: 600px) { .container .flink .flink-list > .flink-list-item { width: calc(100% - 15px) !important; } } .container .flink .flink-list > .flink-list-item:hover .flink-item-icon { margin-left: -10px; width: 0; } .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); } .container .flink .flink-list > .flink-list-item:hover:before, .container .flink .flink-list > .flink-list-item:focus:before, .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); } .container .flink .flink-list > .flink-list-item a { color: var(--font-color); text-decoration: none; } .container .flink .flink-list > .flink-list-item a .flink-item-icon { float: left; overflow: hidden; margin: 15px 10px; width: 60px; height: 60px; border-radius: 7px; -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; } .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; } .container .flink .flink-list > .flink-list-item a .img-alt { display: none; } .container .flink .flink-item-name { padding: 16px 10px 0 0; height: 40px; font-weight: bold; font-size: 1.43em; } .container .flink .flink-item-desc { padding: 16px 10px 16px 0; height: 50px; font-size: 0.93em; } .container .flink .flink-name { margin-bottom: 5px; font-weight: bold; font-size: 1.5em; } #recent-posts .recent-post-item { position: relative; overflow: hidden; margin-bottom: 20px; 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; 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; } } @media screen and (min-width: 2000px) { #recent-posts .recent-post-item { height: 18.8em; } } #recent-posts .recent-post-item:hover .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 .post_cover .post-bg { z-index: -4; } #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: var(--card-meta); 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: var(--card-meta); } #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; word-break: break-word; } #article-container .shuoshuo-item { margin-bottom: 20px; padding: 35px 30px 30px; } @media screen and (max-width: 768px) { #article-container .shuoshuo-item { padding: 25px 20px 20px; } } #article-container .shuoshuo-item-header { 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; cursor: default; } #article-container .shuoshuo-avatar { overflow: hidden; width: 40px; height: 40px; border-radius: 40px; } #article-container .shuoshuo-avatar img { margin: 0; width: 100%; height: 100%; } #article-container .shuoshuo-info { margin-left: 10px; line-height: 1.5; } #article-container .shuoshuo-date { color: #858585; font-size: 0.8em; } #article-container .shuoshuo-content { padding: 15px 0 10px; } #article-container .shuoshuo-content > *:last-child { margin-bottom: 0; } #article-container .shuoshuo-footer { 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; } #article-container .shuoshuo-footer.flex-between { -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } #article-container .shuoshuo-footer.flex-end { -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } #article-container .shuoshuo-footer .shuoshuo-tag { display: inline-block; margin-right: 8px; padding: 0 8px; width: fit-content; border: 1px solid #49b1f5; border-radius: 12px; color: #49b1f5; font-size: 0.85em; cursor: default; -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-container .shuoshuo-footer .shuoshuo-tag:hover { background: #49b1f5; color: var(--white); } #article-container .shuoshuo-footer .shuoshuo-comment-btn { padding: 2px; color: #90a4ae; cursor: pointer; } #article-container .shuoshuo-footer .shuoshuo-comment-btn:hover { color: #49b1f5; } #article-container .shuoshuo-comment { padding-top: 10px; } #article-container .shuoshuo-comment.no-comment { display: none; } .shuoshuo-navigation { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 20px; padding: 20px 0; /* 震動動畫 */ } .shuoshuo-navigation button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 2.7em; height: 2.7em; background-color: var(--btn-bg); color: var(--btn-color); font-size: 0.9em; line-height: 2.5em; -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; border-radius: 6px; } .shuoshuo-navigation button:hover:not(:disabled) { background-color: var(--btn-hover-color); } .shuoshuo-navigation button:disabled { background: #f5f5f5; color: #ccc; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: not-allowed; } .shuoshuo-navigation .shuoshuo-page-info { margin: 0 15px; color: #858585; white-space: nowrap; font-size: 0.9em; } .shuoshuo-navigation .shuoshuo-page-input { margin-right: 12px; padding: 0 15px; height: 2.7em; border: 1px solid var(--btn-bg); background: var(--card-bg); color: #858585; text-align: center; font-size: 0.9em; -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; border-radius: 6px; /* 隱藏 number 輸入框的上下箭頭 */ /* Firefox */ -moz-appearance: textfield; /* 當作為頁碼按鈕時的樣式 */ /* 超出範圍時的紅色樣式 */ } .shuoshuo-navigation .shuoshuo-page-input:focus { outline: none; border-width: 2px; } .shuoshuo-navigation .shuoshuo-page-input:focus::placeholder { color: transparent; } .shuoshuo-navigation .shuoshuo-page-input::-webkit-outer-spin-button, .shuoshuo-navigation .shuoshuo-page-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num { min-width: 40px; width: 40px; border: none; background: #49b1f5; color: var(--white); font-weight: 500; cursor: text; } .shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num:focus { border: 1px solid #49b1f5; background: var(--white); color: #333; } .shuoshuo-navigation .shuoshuo-page-input.invalid { border-color: #ff4757; background-color: #ffeaea; color: #ff4757; -webkit-animation: shake 0.5s ease-in-out; -moz-animation: shake 0.5s ease-in-out; -o-animation: shake 0.5s ease-in-out; -ms-animation: shake 0.5s ease-in-out; animation: shake 0.5s ease-in-out; } @-moz-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-2px); -moz-transform: translateX(-2px); -o-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(2px); -moz-transform: translateX(2px); -o-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-2px); -moz-transform: translateX(-2px); -o-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(2px); -moz-transform: translateX(2px); -o-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); } } @-o-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-2px); -moz-transform: translateX(-2px); -o-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(2px); -moz-transform: translateX(2px); -o-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-2px); -moz-transform: translateX(-2px); -o-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(2px); -moz-transform: translateX(2px); -o-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); } } .tag-cloud-list { -webkit-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); -moz-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); -o-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); -ms-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .tag-cloud-list:hover a:not(:hover) { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -o-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); } .tag-cloud-list a { position: relative; display: inline-block; margin: 5px; padding: 3px 12px; line-height: 1.7; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 7px; overflow: hidden; color: #fff; -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); will-change: transform, background-color, box-shadow; } .tag-cloud-list a::before { position: absolute; top: 0; left: -100%; z-index: -1; width: 100%; height: 100%; background: -webkit-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); background: -moz-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); background: -o-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); background: -ms-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); content: ''; -webkit-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .tag-cloud-list a:hover { background: var(--btn-hover-color) !important; -webkit-box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.05); box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.05); color: var(--btn-color) !important; -webkit-transform: translateY(-2px) scale(1.02); -moz-transform: translateY(-2px) scale(1.02); -o-transform: translateY(-2px) scale(1.02); -ms-transform: translateY(-2px) scale(1.02); transform: translateY(-2px) scale(1.02); } .tag-cloud-list a:hover::before { left: 100%; } .tag-cloud-list a:active { -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translateY(-1px) scale(0.98); -moz-transform: translateY(-1px) scale(0.98); -o-transform: translateY(-1px) scale(0.98); -ms-transform: translateY(-1px) scale(0.98); transform: translateY(-1px) scale(0.98); } @media screen and (max-width: 768px) { .tag-cloud-list a { zoom: 0.85; } .tag-cloud-list a:hover { -webkit-transform: translateY(-1px) scale(1.01); -moz-transform: translateY(-1px) scale(1.01); -o-transform: translateY(-1px) scale(1.01); -ms-transform: translateY(-1px) scale(1.01); transform: translateY(-1px) scale(1.01); } .tag-cloud-list a:active { -webkit-transform: translateY(0) scale(0.99); -moz-transform: translateY(0) scale(0.99); -o-transform: translateY(0) scale(0.99); -ms-transform: translateY(0) scale(0.99); transform: translateY(0) scale(0.99); } .tag-cloud-list a::before { display: none; } } .tag-cloud-title { font-size: 2.57em; -webkit-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); -moz-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); -o-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); -ms-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (max-width: 768px) { .tag-cloud-title { font-size: 2em; } } .page-title + .tag-cloud-list { text-align: left; } @-moz-keyframes tagsFadeIn { from { 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); } to { 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 tagsFadeIn { from { 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); } to { 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 tagsFadeIn { from { 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); } to { 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 tagsFadeIn { from { 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); } to { 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 titleSlideIn { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } to { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes titleSlideIn { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } to { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes titleSlideIn { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } to { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes titleSlideIn { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } to { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } #aside-content { width: 26%; } @media screen and (min-width: 900px) { #aside-content { padding-left: 15px; } } @media screen and (max-width: 900px) { #aside-content { margin-top: 20px; width: 100%; } } #aside-content .card-widget { position: relative; overflow: hidden; margin-bottom: 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 .site-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; border-radius: 7px; } #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; line-height: 1.8; } #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: 4em; height: 4em; border-radius: 6px; } #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: var(--card-meta); font-size: 0.85em; } #aside-content .aside-list > .aside-list-item .content > .title, #aside-content .aside-list > .aside-list-item .content > .comment { color: var(--font-color); 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; margin: 2px 0; padding: 2px 8px; color: var(--font-color); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; border-radius: 6px; } #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: 2px 12px; background-color: var(--text-bg-hover); color: var(--white); } #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; overflow: hidden; max-height: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: max-height 0.3s ease, opacity 0.3s ease; -moz-transition: max-height 0.3s ease, opacity 0.3s ease; -o-transition: max-height 0.3s ease, opacity 0.3s ease; -ms-transition: max-height 0.3s ease, opacity 0.3s ease; transition: max-height 0.3s ease, opacity 0.3s ease; } #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 { max-height: 1000px; opacity: 1; -ms-filter: none; filter: none; visibility: visible; } #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 8px; 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; border-radius: 6px; } #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); font-size: 0.95em; } .site-data > a .length-num { margin-top: -0.45em; color: var(--text-highlight-color); font-size: 1.2em; } @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 > * { position: relative; color: var(--light-grey); } #footer a { color: var(--light-grey); -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; } #footer a:hover { color: #49b1f5; } #footer .footer-separator { margin: 0 4px; } #footer .icp-icon { padding: 0 4px; max-height: 1.4em; width: auto; vertical-align: text-bottom; } #footer .footer-flex { 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-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 auto; padding: 40px 60px; max-width: 1200px; width: 100%; text-align: left; gap: 13px; } @media screen and (max-width: 768px) { #footer .footer-flex { padding: 30px; gap: 10px; } } #footer .footer-flex .footer-flex-items { -webkit-flex-shrink: 0; flex-shrink: 0; min-width: 100px; text-align: left; white-space: nowrap; } #footer .footer-flex .footer-flex-title { margin-bottom: 5px; white-space: nowrap; font-weight: 600; font-size: 1.4em; } #footer .footer-flex .footer-flex-item { margin: 10px 0; white-space: nowrap; } #footer .footer-flex a { display: block; white-space: nowrap; } #footer .footer-other { padding: 40px 20px; width: 100%; text-align: center; } #footer .footer-other .framework-info { display: block; } #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; width: 100%; bottom: 30px; } #page-header #post-info > * { margin: 0 auto; padding: 0 15px; max-width: 1200px; } @media screen and (min-width: 768px) and (max-width: 1300px) { #page-header #post-info > * { padding: 0 30px; } } @media screen and (min-width: 2000px) { #page-header #post-info > * { max-width: 70%; } } #page-header.not-top-img { margin-bottom: 10px; height: 60px; background: 0; } #page-header.not-top-img .title-seo { display: none; } #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 span.site-page, #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.7); -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; will-change: transform; backdrop-filter: blur(7px); } #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 #blog-info > a:first-child { display: none; } #page-header.nav-fixed #nav #blog-info > a:last-child { display: inline; } #page-header.nav-fixed #nav a, #page-header.nav-fixed #nav span.site-page, #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 span.site-page: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 .page-title { margin: 0 0 10px; font-weight: bold; font-size: 2em; } #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 #blog-info .nav-page-title { display: none; } #nav #toggle-menu { display: none; padding: 2px 0 0 6px; vertical-align: top; } #nav #toggle-menu:hover { color: var(--white); } #nav a, #nav span.site-page { color: var(--light-grey); } #nav a:hover, #nav span.site-page: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 > span > 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 > span > 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; 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; border-radius: 5px; } #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:not(.site-page) { 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; border-radius: 6px; } #nav .site-page:not(.child):hover:after { width: 100%; } #nav .nav-page-title { position: relative; overflow: hidden; } #nav .nav-page-title > :first-child, #nav .nav-page-title > :last-child { display: inline-block; -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 .nav-page-title > :last-child { position: absolute; top: 50%; left: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(-50%) translateY(-10px); -moz-transform: translateY(-50%) translateY(-10px); -o-transform: translateY(-50%) translateY(-10px); -ms-transform: translateY(-50%) translateY(-10px); transform: translateY(-50%) translateY(-10px); } #nav .nav-page-title:hover > :last-child { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(-50%) translateY(0); -moz-transform: translateY(-50%) translateY(0); -o-transform: translateY(-50%) translateY(0); -ms-transform: translateY(-50%) translateY(0); transform: translateY(-50%) translateY(0); } #nav .nav-page-title:hover > :first-child { 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); } #pagination .pagination { margin-top: 20px; text-align: center; } #pagination .page-number.current { background: #00c4b6; color: var(--white); } #pagination .full-width { width: 100% !important; } #pagination .pagination-related { height: 150px; } @media screen and (min-width: 768px) { #pagination .pagination-related { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } } #pagination .pagination-related .info-1 .info-item-2 { -webkit-line-clamp: 1; } #pagination .pagination-related .info-2 .info-item-1 { -webkit-line-clamp: 2; } #pagination.pagination-post { overflow: hidden; margin-top: 40px; width: 100%; border-radius: 6px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media screen and (max-width: 768px) { #pagination.pagination-post { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .layout .pagination > * { display: inline-block; margin: 0 6px; width: 2.5em; height: 2.5em; line-height: 2.5em; } .layout .pagination > *:not(.space):hover { background: var(--btn-hover-color); color: var(--btn-color); } #archive .pagination { margin-top: 30px; } #archive .pagination > *:not(.space) { -webkit-box-shadow: none; box-shadow: none; } .pagination-related { position: relative; display: inline-block; overflow: hidden; background: #000; vertical-align: bottom; } .pagination-related.next-post .info { text-align: right; } .pagination-related .info .info-1, .pagination-related .info .info-2 { padding: 20px 40px; color: var(--white); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -o-transition: -o-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .pagination-related .info .info-1 .info-item-1 { color: var(--light-grey); text-transform: uppercase; font-size: 90%; } .pagination-related .info .info-1 .info-item-2 { color: var(--white); font-weight: 500; } .pagination-related .info .info-2 { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .pagination-related:not(.no-desc):hover .info-1 { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); } .pagination-related:not(.no-desc):hover .info-2 { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .container { word-wrap: break-word; overflow-wrap: break-word; } .container a { color: #49b1f5; } .container a:hover { text-decoration: underline; } .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; border-radius: 6px; } .container p { margin: 0 0 16px; } .container iframe { margin: 0 0 20px; } .container kbd { margin: 0 3px; padding: 3px 5px; border: 1px solid #b4b4b4; 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; border-radius: 3px; } .container ol ol, .container ul ol, .container ol ul, .container ul ul { padding-left: 20px; } .container ol li, .container ul li { margin: 4px 0; } .container ol p, .container ul p { margin: 0 0 8px; } .container > :last-child { margin-bottom: 0 !important; } .container hr { margin: 20px 0; } #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; border-radius: 6px; } #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; background-color: #ffe6e6; color: #f66; border-radius: 3px; padding: 0.5em 1em 0.5em 2.6em; border-left: 5px solid #ff8080; } #post #post-outdate-notice .num { padding: 0 4px; } #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 > a { margin: 3px; width: calc(33.333% - 6px); height: 200px; border-radius: 6px; } @media screen and (max-width: 768px) { .relatedPosts > .relatedPosts-list > a { margin: 2px; width: calc(50% - 4px); height: 150px; } } @media screen and (max-width: 600px) { .relatedPosts > .relatedPosts-list > a { width: calc(100% - 4px); } } .relatedPosts > .relatedPosts-list .info .info-1 .info-item-2 { -webkit-line-clamp: 2; } .relatedPosts > .relatedPosts-list .info .info-2 .info-item-1 { -webkit-line-clamp: 3; } .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; border-radius: 6px; } .post-reward .reward-button i { margin-right: 5px; vertical-align: baseline; } .post-reward:hover .reward-button { background: var(--btn-hover-color); } .post-reward:hover > .reward-main { display: block; } .post-reward .reward-main { position: absolute; bottom: 50px; left: 0; z-index: 100; display: none; padding: 0 0 15px; width: 100%; border-radius: 6px; } .post-reward .reward-main .reward-all { display: inline-block; margin: 0; padding: 20px 10px; 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; background-color: var(--btn-bg); color: var(--btn-color); text-align: center; font-size: 16px; line-height: 35px; border-radius: 5px; } #rightside > div > button:hover, #rightside > div > a:hover { background-color: var(--btn-hover-color); } #rightside > div > button i, #rightside > div > a i { vertical-align: baseline; } #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; } } @-moz-keyframes fadeInScale { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } to { 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 fadeInScale { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } to { 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 fadeInScale { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } to { 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 fadeInScale { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } to { 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); } } #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: -330px; z-index: 103; overflow-x: hidden; overflow-y: scroll; padding-left: 5px; width: 330px; 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 .site-data { padding: 0 10px; } #sidebar #sidebar-menus hr { margin: 20px auto; } #sidebar #sidebar-menus .menus_items { margin: 20px; padding: 15px; background: var(--sidebar-menu-bg); -webkit-box-shadow: 0 0 1px 1px rgba(7,17,27,0.05); box-shadow: 0 0 1px 1px rgba(7,17,27,0.05); border-radius: 10px; } #sidebar #sidebar-menus .menus_items .site-page { position: relative; display: block; margin: 4px 0; padding: 2px 23px 2px 15px; color: var(--font-color); font-size: 1.15em; cursor: pointer; border-radius: 6px; } #sidebar #sidebar-menus .menus_items .site-page:hover { background: var(--text-bg-hover); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--white); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } #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.6em; right: 10px; -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 { overflow: hidden; max-height: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top; } #sidebar #sidebar-menus .menus_items .menus_item_child { margin: 0; padding-left: 25px; max-height: 0; list-style: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top; will-change: transform, opacity, max-height; } #sidebar #sidebar-menus .site-page.group:not(.hide) + .menus_item_child { max-height: 1000px; opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } #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; } .twikoo .tk-content p { margin: 3px 0; } .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; } .utterances, .fb-comments iframe { width: 100% !important; } #gitalk-container .gt-meta { margin: 0 0 0.8em; padding: 6px 0 16px; } .aplayer { color: #4c4948; } .container .aplayer { margin: 0 0 20px; } .snackbar-container.snackbar-css { border-radius: 5px; opacity: 0.85 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important; filter: alpha(opacity=85) !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; } } .container .btn-center { margin: 0 0 20px; text-align: center; } .container .btn-beautify { display: inline-block; margin: 0 4px 6px; padding: 0 15px; background-color: var(--btn-beautify-color, var(--btn-default-color)); color: var(--btn-color, #fff); vertical-align: top; line-height: 2; border-radius: 6px; } .container .btn-beautify.blue { --btn-beautify-color: var(--tags-blue-color); } .container .btn-beautify.pink { --btn-beautify-color: var(--tags-pink-color); } .container .btn-beautify.red { --btn-beautify-color: var(--tags-red-color); } .container .btn-beautify.purple { --btn-beautify-color: var(--tags-purple-color); } .container .btn-beautify.orange { --btn-beautify-color: var(--tags-orange-color); } .container .btn-beautify.green { --btn-beautify-color: var(--tags-green-color); } .container .btn-beautify:hover { background-color: var(--btn-hover-color); } .container .btn-beautify:not(.block) + .btn-beautify:not(.block) { margin: 0 4px 20px; } .container .btn-beautify.block { display: block; margin: 0 0 20px; width: fit-content; width: -moz-fit-content; } .container .btn-beautify.block.center { margin: 0 auto 20px; } .container .btn-beautify.block.right { margin: 0 0 20px auto; } .container .btn-beautify.larger { padding: 6px 15px; } .container .btn-beautify.outline { border: 1px solid transparent; border-color: var(--btn-beautify-color, var(--btn-default-color)); background-color: transparent; color: var(--btn-beautify-color, var(--btn-default-color)); } .container .btn-beautify.outline i, .container .btn-beautify.outline span { -webkit-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .container .btn-beautify.outline::before { background: -webkit-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); background: -moz-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); background: -o-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); background: -ms-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); } .container .btn-beautify.outline:hover { border-color: var(--btn-beautify-color, var(--btn-default-color)); background-color: var(--btn-beautify-color, var(--btn-default-color)); color: var(--btn-color) !important; } .container .btn-beautify.outline:hover i, .container .btn-beautify.outline:hover span { color: var(--btn-color); } .container figure.gallery-group { position: relative; float: left; overflow: hidden; margin: 6px 4px; width: calc(50% - 8px); height: 250px; border-radius: 10px; background: #000; -webkit-transform: translate3d(0, 0, 0); } @media screen and (max-width: 600px) { .container figure.gallery-group { width: calc(100% - 8px); } } @media screen and (min-width: 1024px) { .container figure.gallery-group { width: calc(100% / 3 - 8px); } } .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); } .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); } .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); } .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; } .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; } .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); } .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; } .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; } .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); } .container .gallery-group-main { overflow: auto; padding: 0 0 16px; } .container .gallery-container { margin: 0 0 20px; text-align: center; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .container .gallery-container.loaded { opacity: 1; -ms-filter: none; filter: none; } .container .gallery-container img { display: initial; margin: 0; width: 100%; height: 100%; } .container .gallery-container .gallery-data { display: none; } .container .gallery-container button { margin-top: 25px; padding: 8px 14px; 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; border-radius: 5px; } .container .gallery-container button:hover { background: var(--btn-hover-color); } .container .gallery-container button:hover i { margin-left: 8px; } .container .gallery-container button i { margin-left: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .container .loading-container { display: inline-block; overflow: hidden; width: 154px; height: 154px; } .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; } .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); } .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; } .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; } .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; } .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; } .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); border-radius: 6px; } .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; border-radius: 5px; overflow: hidden; } .toggle > .toggle-button { padding: 6px 15px; background: #f0f0f0; color: #1f2d3d; cursor: pointer; } .toggle > .toggle-content { margin: 30px 24px; } .container .inline-img { display: inline; margin: 0 3px; height: 1.1em; vertical-align: text-bottom; } .hl-label { padding: 2px 4px; color: var(--btn-color, #fff); border-radius: 3px; } .hl-label.default { background-color: var(--btn-default-color); } .hl-label.blue { background-color: var(--tags-blue-color); } .hl-label.pink { background-color: var(--tags-pink-color); } .hl-label.red { background-color: var(--tags-red-color); } .hl-label.purple { background-color: var(--tags-purple-color); } .hl-label.orange { background-color: var(--tags-orange-color); } .hl-label.green { background-color: var(--tags-green-color); } .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: var(--tags-blue-color) !important; } .note.blue:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-blue-color); } .note.blue:not(.disabled):not(.simple) { background: var(--tags-blue-color-lighten); } .note.blue > .note-icon { color: var(--tags-blue-color); } .note.pink:not(.disabled) { border-left-color: var(--tags-pink-color) !important; } .note.pink:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-pink-color); } .note.pink:not(.disabled):not(.simple) { background: var(--tags-pink-color-lighten); } .note.pink > .note-icon { color: var(--tags-pink-color); } .note.red:not(.disabled) { border-left-color: var(--tags-red-color) !important; } .note.red:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-red-color); } .note.red:not(.disabled):not(.simple) { background: var(--tags-red-color-lighten); } .note.red > .note-icon { color: var(--tags-red-color); } .note.purple:not(.disabled) { border-left-color: var(--tags-purple-color) !important; } .note.purple:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-purple-color); } .note.purple:not(.disabled):not(.simple) { background: var(--tags-purple-color-lighten); } .note.purple > .note-icon { color: var(--tags-purple-color); } .note.orange:not(.disabled) { border-left-color: var(--tags-orange-color) !important; } .note.orange:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-orange-color); } .note.orange:not(.disabled):not(.simple) { background: var(--tags-orange-color-lighten); } .note.orange > .note-icon { color: var(--tags-orange-color); } .note.green:not(.disabled) { border-left-color: var(--tags-green-color) !important; } .note.green:not(.disabled).modern { border-left-color: transparent !important; color: var(--tags-green-color); } .note.green:not(.disabled):not(.simple) { background: var(--tags-green-color-lighten); } .note.green > .note-icon { color: var(--tags-green-color); } .note.simple { border: 1px solid var(--note-default-border); border-left-width: 5px; } .note.modern { border: 1px solid transparent !important; background-color: var(--note-modern-default-bg); color: var(--note-modern-default-text); } .note.flat { border: initial; border-left: 5px solid var(--note-default-border); background-color: var(--note-default-bg); color: var(--note-default-text); } .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: var(--note-default-bg); color: var(--font-color); } .note.default.modern { border-color: var(--note-modern-default-border) !important; background: var(--note-modern-default-bg); color: var(--note-modern-default-text); } .note.default.modern a:not(.btn) { color: var(--note-modern-default-text); } .note.default.modern a:not(.btn):hover { color: var(--note-modern-default-hover); } .note.default:not(.modern) { border-left-color: var(--note-default-border); } .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: var(--note-default-text); } .note.default:not(.no-icon)::before { content: '\f0a9'; } .note.default:not(.no-icon):not(.modern)::before { color: var(--note-default-text); } .note.primary.flat { background: var(--note-primary-bg); color: var(--font-color); } .note.primary.modern { border-color: var(--note-modern-primary-border) !important; background: var(--note-modern-primary-bg); color: var(--note-modern-primary-text); } .note.primary.modern a:not(.btn) { color: var(--note-modern-primary-text); } .note.primary.modern a:not(.btn):hover { color: var(--note-modern-primary-hover); } .note.primary:not(.modern) { border-left-color: var(--note-primary-border); } .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: var(--note-primary-text); } .note.primary:not(.no-icon)::before { content: '\f055'; } .note.primary:not(.no-icon):not(.modern)::before { color: var(--note-primary-text); } .note.info.flat { background: var(--note-info-bg); color: var(--font-color); } .note.info.modern { border-color: var(--note-modern-info-border) !important; background: var(--note-modern-info-bg); color: var(--note-modern-info-text); } .note.info.modern a:not(.btn) { color: var(--note-modern-info-text); } .note.info.modern a:not(.btn):hover { color: var(--note-modern-info-hover); } .note.info:not(.modern) { border-left-color: var(--note-info-border); } .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: var(--note-info-text); } .note.info:not(.no-icon)::before { content: '\f05a'; } .note.info:not(.no-icon):not(.modern)::before { color: var(--note-info-text); } .note.success.flat { background: var(--note-success-bg); color: var(--font-color); } .note.success.modern { border-color: var(--note-modern-success-border) !important; background: var(--note-modern-success-bg); color: var(--note-modern-success-text); } .note.success.modern a:not(.btn) { color: var(--note-modern-success-text); } .note.success.modern a:not(.btn):hover { color: var(--note-modern-success-hover); } .note.success:not(.modern) { border-left-color: var(--note-success-border); } .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: var(--note-success-text); } .note.success:not(.no-icon)::before { content: '\f058'; } .note.success:not(.no-icon):not(.modern)::before { color: var(--note-success-text); } .note.warning.flat { background: var(--note-warning-bg); color: var(--font-color); } .note.warning.modern { border-color: var(--note-modern-warning-border) !important; background: var(--note-modern-warning-bg); color: var(--note-modern-warning-text); } .note.warning.modern a:not(.btn) { color: var(--note-modern-warning-text); } .note.warning.modern a:not(.btn):hover { color: var(--note-modern-warning-hover); } .note.warning:not(.modern) { border-left-color: var(--note-warning-border); } .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: var(--note-warning-text); } .note.warning:not(.no-icon)::before { content: '\f06a'; } .note.warning:not(.no-icon):not(.modern)::before { color: var(--note-warning-text); } .note.danger.flat { background: var(--note-danger-bg); color: var(--font-color); } .note.danger.modern { border-color: var(--note-modern-danger-border) !important; background: var(--note-modern-danger-bg); color: var(--note-modern-danger-text); } .note.danger.modern a:not(.btn) { color: var(--note-modern-danger-text); } .note.danger.modern a:not(.btn):hover { color: var(--note-modern-danger-hover); } .note.danger:not(.modern) { border-left-color: var(--note-danger-border); } .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: var(--note-danger-text); } .note.danger:not(.no-icon)::before { content: '\f056'; } .note.danger:not(.no-icon):not(.modern)::before { color: var(--note-danger-text); } .container .series-items a:hover { color: var(--pseudo-hover); } .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); border-radius: 6px; overflow: hidden; } .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-button-bg); } .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-button-bg); color: var(--tab-button-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; } .container .tabs > .nav-tabs > .tab i { width: 1.5em; } .container .tabs > .nav-tabs > .tab.active { border-top: 2px solid #49b1f5; background: var(--tab-button-active-bg); cursor: default; } .container .tabs > .nav-tabs > .tab:not(.active):hover { border-top: 2px solid var(--tab-button-hover-bg); background: var(--tab-button-hover-bg); } .container .tabs > .nav-tabs.no-default ~ .tab-to-top { display: none; } .container .tabs > .tab-contents .tab-item-content { position: relative; display: none; padding: 36px 24px 10px; } @media screen and (max-width: 768px) { .container .tabs > .tab-contents .tab-item-content { padding: 24px 14px; } } .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; } .container .tabs > .tab-contents .tab-item-content > :last-child { margin-bottom: 0; } .container .tabs > .tab-to-top { padding: 0 16px 10px 0; width: 100%; text-align: right; } .container .tabs > .tab-to-top button { color: #99a9bf; } .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); } } .container .timeline { margin: 0 10px 20px; padding: 14px 0 5px 20px; border-left: 2px solid var(--timeline-color, #49b1f5); } .container .timeline.blue { --timeline-color: #428bca; --timeline-bg: rgba(66,139,202, 0.2); } .container .timeline.pink { --timeline-color: #ff69b4; --timeline-bg: rgba(255,105,180, 0.2); } .container .timeline.red { --timeline-color: #f00; --timeline-bg: rgba(255,0,0, 0.2); } .container .timeline.purple { --timeline-color: #6f42c1; --timeline-bg: rgba(111,66,193, 0.2); } .container .timeline.orange { --timeline-color: #ff8c00; --timeline-bg: rgba(255,140,0, 0.2); } .container .timeline.green { --timeline-color: #5cb85c; --timeline-bg: rgba(92,184,92, 0.2); } .container .timeline .timeline-item { margin: 0 0 15px; } .container .timeline .timeline-item:hover .item-circle:before { border-color: var(--timeline-color, #49b1f5); } .container .timeline .timeline-item.headline .timeline-item-title .item-circle > p { font-weight: 600; font-size: 1.2em; } .container .timeline .timeline-item.headline .timeline-item-title .item-circle:before { left: -28px; border: 4px solid var(--timeline-color, #49b1f5); } .container .timeline .timeline-item.headline:hover .item-circle:before { border-color: var(--pseudo-hover); } .container .timeline .timeline-item .timeline-item-title { position: relative; } .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%); } .container .timeline .timeline-item .item-circle > p { margin: 0 0 8px; font-weight: 500; } .container .timeline .timeline-item .timeline-item-content { position: relative; padding: 12px 15px; border-radius: 8px; background: var(--timeline-bg, #e4f3fd); font-size: 0.93em; } .container .timeline .timeline-item .timeline-item-content > :last-child { margin-bottom: 0; } .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-button-bg: #2c2c2c; --tab-button-color: rgba(255,255,255,0.7); --tab-button-hover-bg: #383838; --tab-button-active-bg: #121212; --card-bg: #121212; --sidebar-bg: #121212; --sidebar-menu-bg: #1f1f1f; --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); --btn-color: #ccc; --btn-default-color: #929292; --tags-blue-color: #3e6f98; --tags-blue-color-lighten: rgba(66,139,202,0.15); --tags-pink-color: #dd3c8c; --tags-pink-color-lighten: rgba(255,105,180,0.15); --tags-red-color: #a41b1b; --tags-red-color-lighten: rgba(255,0,0,0.15); --tags-orange-color: #a76a20; --tags-orange-color-lighten: rgba(255,140,0,0.15); --tags-purple-color: #5f4490; --tags-purple-color-lighten: rgba(111,66,193,0.15); --tags-green-color: #4f8e4f; --tags-green-color-lighten: rgba(92,184,92,0.15); --note-default-border: #5a5a5a; --note-default-bg: #2b2b2b; --note-default-text: #b3b3b3; --note-modern-default-border: #9a9a9a; --note-modern-default-bg: #353535; --note-modern-default-text: #c4c4c4; --note-primary-border: #5935a1; --note-primary-bg: #2e1c3e; --note-primary-text: #a47dd4; --note-modern-primary-border: #9985cc; --note-modern-primary-bg: #3c2d4c; --note-modern-primary-text: #b693e6; --note-info-border: #346fa2; --note-info-bg: #1f2e3b; --note-info-text: #7bb3db; --note-modern-info-border: #7ca8b5; --note-modern-info-bg: #2b3c44; --note-modern-info-text: #8fc6e0; --note-success-border: #4a944a; --note-success-bg: #202e20; --note-success-text: #82c682; --note-modern-success-border: #8bb087; --note-modern-success-bg: #2c3d2c; --note-modern-success-text: #96d196; --note-warning-border: #c08a3e; --note-warning-bg: #3e301f; --note-warning-text: #e6ba6b; --note-modern-warning-border: #b8a285; --note-modern-warning-bg: #4b3c2b; --note-modern-warning-text: #d4b373; --note-danger-border: #b34440; --note-danger-bg: #3b201f; --note-danger-text: #e67572; --note-modern-danger-border: #c7898c; --note-modern-danger-bg: #4d2b2e; --note-modern-danger-text: #d98b8e; } [data-theme='dark'] #web_bg:before { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); content: ''; } [data-theme='dark'] .container code { background: #2c2c2c; } [data-theme='dark'] .container pre > code { background: #171717; } [data-theme='dark'] .container figure.highlight { -webkit-box-shadow: none; box-shadow: none; } [data-theme='dark'] .container .note code { background: rgba(27,31,35,0.05); } [data-theme='dark'] .container .aplayer { filter: brightness(0.8); } [data-theme='dark'] .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'] .hide-button, [data-theme='dark'] #post-outdate-notice, [data-theme='dark'] .error-img, [data-theme='dark'] .container iframe, [data-theme='dark'] .gist, [data-theme='dark'] .ads-wrap, [data-theme='dark'] .tag-cloud-list > a { filter: brightness(0.8); } [data-theme='dark'] img:not(.cover) { 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; } } [data-theme='dark'] .artalk.atk-dark-mode, [data-theme='dark'] .atk-layer-wrap.atk-dark-mode { --at-color-font: rgba(255,255,255,0.7); --at-color-meta: rgba(255,255,255,0.7); --at-color-grey: rgba(255,255,255,0.7); } [data-theme='dark'] .atk-send-btn, [data-theme='dark'] .atk-badge { color: rgba(255,255,255,0.7) !important; } [data-theme='dark'] #waline-wrap { --waline-color: rgba(255,255,255,0.7); --waline-dark-grey: rgba(255,255,255,0.7); --waline-info-color: rgba(255,255,255,0.5); } .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; 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; border-radius: 8px; } @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 .container a { color: #99a9bf; } .read-mode .container pre, .read-mode .container .highlight:not(.js-file-line-container) { background: var(--highlight-bg) !important; } .read-mode .container pre *, .read-mode .container .highlight:not(.js-file-line-container) * { color: var(--font-color) !important; } .read-mode .container figure.highlight { border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .read-mode .container figure.highlight > :not(.highlight-tools) { display: block !important; } .read-mode .container figure.highlight .line:before { color: var(--font-color) !important; } .read-mode .container figure.highlight .hljs { background: var(--highlight-bg) !important; } .read-mode .container h1, .read-mode .container h2, .read-mode .container h3, .read-mode .container h4, .read-mode .container h5, .read-mode .container h6 { padding: 0; } .read-mode .container h1:before, .read-mode .container h2:before, .read-mode .container h3:before, .read-mode .container h4:before, .read-mode .container h5:before, .read-mode .container h6:before { content: ''; } .read-mode .container h1:hover, .read-mode .container h2:hover, .read-mode .container h3:hover, .read-mode .container h4:hover, .read-mode .container h5:hover, .read-mode .container h6:hover { padding: 0; } .read-mode .container ul:hover:before, .read-mode .container li:hover:before, .read-mode .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 .container ol:before, .read-mode .container li:before { background: transparent !important; color: var(--font-color) !important; } .read-mode .container ul >li:before { border-color: var(--gray) !important; } .read-mode .container .tabs { border: 2px solid var(--tab-border-color); } .read-mode .container .tabs > .nav-tabs { background: transparent; } .read-mode .container .tabs > .nav-tabs > .tab { border-top: none !important; } .read-mode .container .tabs > .tab-contents .tab-item-content.active { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } .read-mode .container code { color: var(--font-color); } .read-mode .container blockquote { border-color: var(--gray); background-color: var(--readmode-light-color); } .read-mode .container kbd { border: 1px solid var(--gray); background-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: var(--font-color); } .read-mode .container .hide-toggle { border: 1px solid var(--gray) !important; } .read-mode .container .hide-button, .read-mode .container .btn-beautify, .read-mode .container .hl-label { border: 1px solid var(--gray) !important; background: var(--readmode-light-color) !important; color: var(--font-color) !important; } .read-mode .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 .container .note:before, .read-mode .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; background: var(--search-bg); --search-height: 100vh; border-radius: 8px; } @media screen and (max-width: 768px) { .search-dialog { top: 0; left: 0; margin: 0; width: 100%; height: 100%; border-radius: 0; } } .search-dialog .search-nav { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 14px; color: #49b1f5; font-size: 1.4em; line-height: 1; } .search-dialog .search-nav .search-dialog-title { margin-right: 4px; } .search-dialog .search-nav #loading-status[hidden] { display: none !important; } .search-dialog .search-nav .search-close-button { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #858585; text-align: right; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } .search-dialog .search-nav .search-close-button:hover { color: #49b1f5; } .search-dialog .local-search-input, .search-dialog #algolia-search-input { margin: 0 auto; max-width: 100%; width: 100%; } .search-dialog .local-search-input input, .search-dialog #algolia-search-input input, .search-dialog .local-search-input .ais-SearchBox-input, .search-dialog #algolia-search-input .ais-SearchBox-input { padding: 5px 14px; width: 100%; outline: none; border: 2px solid #49b1f5; border-radius: 40px; background: var(--search-bg); color: var(--search-input-color); -webkit-appearance: none; } .search-dialog .local-search-input input::placeholder, .search-dialog #algolia-search-input input::placeholder, .search-dialog .local-search-input .ais-SearchBox-input::placeholder, .search-dialog #algolia-search-input .ais-SearchBox-input::placeholder { color: var(--text-color); } .search-dialog .search-result-list, .search-dialog .ais-Hits-list { overflow-y: overlay; margin: 0 -20px; padding: 0 22px; max-height: calc(80vh - 220px); } .search-dialog .search-result-list .local-search-hit-item, .search-dialog .ais-Hits-list .local-search-hit-item, .search-dialog .search-result-list .ais-Hits-item, .search-dialog .ais-Hits-list .ais-Hits-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 3px 0; line-height: 1.8; -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; } .search-dialog .search-result-list .local-search-hit-item:hover, .search-dialog .ais-Hits-list .local-search-hit-item:hover, .search-dialog .search-result-list .ais-Hits-item:hover, .search-dialog .ais-Hits-list .ais-Hits-item:hover { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -o-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); } .search-dialog .search-result-list .local-search-hit-item:not([value])::before, .search-dialog .ais-Hits-list .local-search-hit-item:not([value])::before, .search-dialog .search-result-list .ais-Hits-item:not([value])::before, .search-dialog .ais-Hits-list .ais-Hits-item:not([value])::before { display: none; } .search-dialog .search-result-list .local-search-hit-item[value]::before, .search-dialog .ais-Hits-list .local-search-hit-item[value]::before, .search-dialog .search-result-list .ais-Hits-item[value]::before, .search-dialog .ais-Hits-list .ais-Hits-item[value]::before { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-right: 6px; min-width: 24px; color: #49b1f5; content: attr(value) '.'; font-weight: bold; font-style: italic; font-size: 0.9em; } .search-dialog .search-result-list .local-search-hit-item::marker, .search-dialog .ais-Hits-list .local-search-hit-item::marker, .search-dialog .search-result-list .ais-Hits-item::marker, .search-dialog .ais-Hits-list .ais-Hits-item::marker { content: none; } .search-dialog .search-result-list .local-search-hit-item a, .search-dialog .ais-Hits-list .local-search-hit-item a, .search-dialog .search-result-list .ais-Hits-item a, .search-dialog .ais-Hits-list .ais-Hits-item a { -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(--search-a-color); } .search-dialog .search-result-list .local-search-hit-item a:hover, .search-dialog .ais-Hits-list .local-search-hit-item a:hover, .search-dialog .search-result-list .ais-Hits-item a:hover, .search-dialog .ais-Hits-list .ais-Hits-item a:hover { color: #49b1f5; } .search-dialog .search-result-list .local-search-hit-item .search-result-title, .search-dialog .ais-Hits-list .local-search-hit-item .search-result-title, .search-dialog .search-result-list .ais-Hits-item .search-result-title, .search-dialog .ais-Hits-list .ais-Hits-item .search-result-title, .search-dialog .search-result-list .local-search-hit-item .algolia-hits-item-title, .search-dialog .ais-Hits-list .local-search-hit-item .algolia-hits-item-title, .search-dialog .search-result-list .ais-Hits-item .algolia-hits-item-title, .search-dialog .ais-Hits-list .ais-Hits-item .algolia-hits-item-title { font-weight: 600; } .search-dialog .search-result-list .local-search-hit-item .search-result, .search-dialog .ais-Hits-list .local-search-hit-item .search-result, .search-dialog .search-result-list .ais-Hits-item .search-result, .search-dialog .ais-Hits-list .ais-Hits-item .search-result, .search-dialog .search-result-list .local-search-hit-item .algolia-hit-item-content, .search-dialog .ais-Hits-list .local-search-hit-item .algolia-hit-item-content, .search-dialog .search-result-list .ais-Hits-item .algolia-hit-item-content, .search-dialog .ais-Hits-list .ais-Hits-item .algolia-hit-item-content { margin: 0 0 8px; word-break: break-all; font-size: 0.9em; } .search-dialog .ais-Pagination { margin: 15px 0 0; padding: 0; text-align: center; } .search-dialog .ais-Pagination .ais-Pagination-list { 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; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -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; padding: 0; list-style: none; gap: 6px; } .search-dialog .ais-Pagination .ais-Pagination-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0; } .search-dialog .ais-Pagination .ais-Pagination-item:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled) .ais-Pagination-link:hover { background: var(--btn-hover-color); -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -o-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); } .search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 4px 8px; min-width: 28px; height: 28px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-color); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } .search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link.ais-Pagination-link--disabled { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); cursor: not-allowed; } .search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link i { font-size: 12px; } .search-dialog .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link { background: #00c4b6; font-weight: 600; cursor: default; } .search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link { padding: 4px 2px; border: none; background: transparent; color: var(--text-color); cursor: default; } .search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link:hover { background: transparent; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .search-dialog .ais-Pagination .ais-Pagination-item--disabled .ais-Pagination-link { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } @media screen and (max-width: 768px) { .search-dialog .ais-Pagination .ais-Pagination-list { gap: 4px; } } .search-dialog hr { margin: 15px 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); } .search-result-stats, .ais-Stats-text { margin: 15px 0 0; color: var(--text-color); text-align: center; font-size: 0.9em; } .search-keyword { background: transparent; color: #f47466; font-weight: 600; } .search-loading { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 20px; color: var(--text-color); } .search-loading::before { width: 16px; height: 16px; border: 2px solid var(--text-color); border-top-color: transparent; border-radius: 50%; content: ''; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @media screen and (max-width: 768px) { #local-search .search-dialog .search-result-list { max-height: calc(var(--search-height) - 200px) !important; } } #local-search #local-search-stats .search-result-stats { text-align: left; } #local-search .search-keyword { font-weight: 600; } #local-search #loading-database ~ * { visibility: hidden; } @-moz-keyframes spin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }