SharwBlog/css/index.css

6768 lines
166 KiB
CSS

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