html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; } main { display: block; } h1 { margin: 0.67em 0; font-size: 2em; } hr { overflow: visible; /* 2 */ box-sizing: content-box; /* 1 */ height: 0; /* 1 */ } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { margin: 0; /* 2 */ font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ } button, input { overflow: visible; /* 1 */ } button, select { text-transform: none; /* 1 */ } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { display: table; /* 1 */ box-sizing: border-box; /* 1 */ padding: 0; /* 3 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ color: inherit; /* 2 */ } progress { vertical-align: baseline; } textarea { overflow: auto; } [type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; /* 2 */ -webkit-appearance: textfield; /* 1 */ } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; /* 2 */ -webkit-appearance: button; /* 1 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; } main { display: block; } h1 { margin: 0.67em 0; font-size: 2em; } hr { overflow: visible; /* 2 */ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { margin: 0; /* 2 */ font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ } button, input { overflow: visible; /* 1 */ } button, select { text-transform: none; /* 1 */ } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { display: table; /* 1 */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 3 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ color: inherit; /* 2 */ } progress { vertical-align: baseline; } textarea { overflow: auto; } [type='checkbox'], [type='radio'] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; /* 2 */ -webkit-appearance: textfield; /* 1 */ } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; /* 2 */ -webkit-appearance: button; /* 1 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } :root { --color-gray-100: #fff; --color-gray-150: #f9f9f9; --color-gray-200: #f5f6f7; --color-gray-250: #efefef; --color-gray-260: #e5e7ea; --color-gray-300: #dadada; --color-gray-400: #ccd0d5; --color-gray-500: #bec3c9; --color-gray-550: #adadad; --color-gray-600: #8d949e; --color-gray-650: #757474; --color-gray-700: #606770; --color-gray-800: #444950; --color-gray-850: #303846; --color-gray-900: #2c323c; --color-gray-950: #1c1e21; --color-font: var(--color-gray-900); --color-card: var(--color-gray-100); --color-blue-200: #ebeef5; } html.nightmode { --color-gray-100: #1c1e21; --color-gray-150: #2c323c; --color-gray-200: #303846; --color-gray-250: #444950; --color-gray-260: #555b64; --color-gray-300: #606770; --color-gray-400: #757474; --color-gray-500: #8d949e; --color-gray-550: #959595; --color-gray-600: #bec3c9; --color-gray-650: #ccd0d5; --color-gray-700: #dadada; --color-gray-800: #eaecef; --color-gray-850: #f5f6f7; --color-gray-900: #f9f9f9; --color-gray-950: #fff; --color-font: var(--color-gray-600); --color-card: var(--color-gray-150); --color-blue-200: #444950; } ::selection { color: #fff; background-color: #8be0e1; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 20px; } body { margin: 0; padding: 0; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif, Arial; font-size: 14px; line-height: 2; color: var(--color-font); background-color: var(--color-gray-250); } h1, h2, h3, h4, h5, h6 { padding: 0; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif, Arial; font-weight: 700; line-height: 1.5; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } h4 { font-size: 1em; } h5 { font-size: 0.875em; } h6 { font-size: 0.85em; } p { margin: 0 0 1rem; } a { text-decoration: none; color: #058ed2; background-color: transparent; outline: none; cursor: pointer; } img, video, iframe { display: block; margin-right: auto; margin-left: auto; max-width: 100%; } hr { margin: 1rem 0; border: 2px dashed #b8dcfd; height: 0; } blockquote { margin: 0; border-left: 5px solid var(--color-gray-300); padding: 0 1rem; background-color: var(--color-gray-200); } blockquote cite::before { content: '--'; padding: 0 0.25rem; } code { white-space: normal; word-wrap: break-word; word-break: break-word; border-radius: 3px; padding: 1px 5px; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 0.95em; color: var(--color-gray-700); background-color: var(--color-gray-200); } dt { font-weight: 700; } dd { margin: 0; padding: 0; } table { border-spacing: 0; border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--color-blue-200); padding: 0 5px; } acronym, abbr { cursor: help; } kbd { display: inline-block; border: 1px solid var(--color-gray-500); border-radius: 3px; padding: 0.1rem 0.2rem; font-family: consolas, 'Liberation Mono', courier, monospace; font-size: 0.85em; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--color-gray-850); background-color: var(--color-gray-150); -webkit-box-shadow: 0 -1px 0 var(--color-gray-300) inset; box-shadow: 0 -1px 0 var(--color-gray-300) inset; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } [data-popover] { position: relative; } [data-popover]::before { position: absolute; top: 0; left: 50%; z-index: 2; font-family: sans-serif, Arial; font-size: 14px; font-weight: normal; font-style: normal; line-height: 2; white-space: nowrap; color: #fff; background-color: rgba(0,0,0,0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); text-shadow: none; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease; -o-transition: opacity 0.2s ease, -o-transform 0.2s ease; -ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease; -webkit-transform: translate(-50%, -70%); -moz-transform: translate(-50%, -70%); -o-transform: translate(-50%, -70%); -ms-transform: translate(-50%, -70%); transform: translate(-50%, -70%); pointer-events: none; } [data-popover]::before { content: attr(data-popover); border-radius: 4px; padding: 0.2rem 0.6rem; } @media (min-width: 991.98px) { [data-popover-pos='up']:hover::before { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translate(-50%, -120%); -moz-transform: translate(-50%, -120%); -o-transform: translate(-50%, -120%); -ms-transform: translate(-50%, -120%); transform: translate(-50%, -120%); } } .stun-message { position: fixed; top: 1rem; left: 50%; z-index: 2; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .stun-alert { position: relative; border-radius: 3px; padding: 8px 12px; font-size: 16px; line-height: 1rem; background-color: #fff; -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .stun-alert-success { color: #52c41a; } .stun-alert-success ~ i { color: #52c41a; } .stun-alert-info { color: #1890ff; } .stun-alert-info ~ i { color: #1890ff; } .stun-alert-warning { color: #faad14; } .stun-alert-warning ~ i { color: #faad14; } .stun-alert-error { color: #f5222d; } .stun-alert-error ~ i { color: #f5222d; } .stun-alert-description { margin-left: 0.5rem; } .anime-close::before, .anime-close::after { -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -ms-transition: -ms-transform 0.2s ease; transition: transform 0.2s ease; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .anime-close::after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .anime-close:hover::before, .anime-close:hover::after { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .container { white-space: normal; word-wrap: break-word; word-break: break-word; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; overflow: hidden; /* !!! */ position: relative; min-height: 100vh; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .header { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .footer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .main { width: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .main-inner { margin: 0 auto; padding: 20px; width: 100%; font-size: 16px; } .content-wrap { width: calc(100% - 330px); float: left; } .content-wrap--noside { float: none; margin: 0 auto; } .content { width: 100%; border-radius: 5px; padding: 1rem 2rem; background-color: var(--color-card); } .content img { border: 1px solid var(--color-gray-300); border-radius: 3px; padding: 0.2rem; } .content h1:hover .heading-link, .content h2:hover .heading-link, .content h3:hover .heading-link, .content h4:hover .heading-link, .content h5:hover .heading-link, .content h6:hover .heading-link { visibility: visible; } .heading-link { display: inline-block; visibility: hidden; margin: -10px 0 0 -20px; padding-right: 5px; width: 20px; height: 16px; font-size: 16px; line-height: 20px; vertical-align: middle; color: var(--color-font); } .content-home { padding: 0 !important; background-color: transparent; } .pullquote.left { text-align: left; } .pullquote.right { text-align: right; } .post-body h1, .post-body h2 { border-bottom: 1px solid var(--color-gray-250); padding-bottom: 0.3em; } .table-container { overflow: auto; margin-bottom: 1rem; } .header-inner { width: 100%; font-size: 18px; background-color: #2d2e30; height: 80vh; } .header-inner--bgcolor { background-color: #333; } .header-inner--height { height: 50px !important; } .header-nav { position: relative; top: 0; left: 0; z-index: 1; width: 100%; height: 50px; -webkit-transition: -webkit-transform 0.2s ease-out, background-color 0.2s ease; -moz-transition: -moz-transform 0.2s ease-out, background-color 0.2s ease; -o-transition: -o-transform 0.2s ease-out, background-color 0.2s ease; -ms-transition: -ms-transform 0.2s ease-out, background-color 0.2s ease; transition: transform 0.2s ease-out, background-color 0.2s ease; } .header-nav--fixed { position: fixed; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header-nav--sticky { position: fixed; background-color: #333; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .header-nav.slider--down { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header-nav.slider--up { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .header-nav.slider--clear { -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .header-nav-inner { margin: 0 auto; padding: 20px; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 100%; } .header-nav-menubtn { display: none; padding: 0 0.5rem; line-height: 50px; color: #f5f6f7; cursor: pointer; } .header-nav-menu-item__link, .header-nav-submenu-item__link { display: block; color: #f5f6f7; } .header-nav-menu-item__icon, .header-nav-submenu-item__icon, .header-nav-menu-item__text, .header-nav-submenu-item__text { margin: 0 3px; } .header-nav-menu-item__link { padding: 0 0.5rem; -webkit-transition: color 0.2s ease, background-color 0.2s ease; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -ms-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; } .header-nav-menu-item__link:hover { color: #f4f5f5; background-color: #999; } .header-nav-submenu-item__link { padding: 0.75rem 0.5rem; -webkit-transition: color 0.2s ease, background-color 0.2s ease; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -ms-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; } .header-nav-submenu-item__link:hover { color: #f4f5f5; background-color: #999; } .header-nav-menu { display: none; height: 100%; line-height: 50px; } .header-nav-menu-item { float: left; position: relative; margin: 0 1rem 0 0; height: 50px; text-align: center; cursor: pointer; } .header-nav-menu-item:last-child { margin: 0; } .header-nav-submenu { display: none; position: absolute; right: -0.5rem; left: -0.5rem; width: auto; background-color: #2d2e30; } .header-nav-submenu.hide--force { display: none !important; } .header-nav-submenu-item { margin: 0; padding: 0; width: 100%; font-size: 18px; line-height: 1; text-align: center; } .header-nav-mode { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; float: right; padding: 0 0.5rem; height: 100%; line-height: 50px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .header-banner { position: relative; z-index: 0; width: 100%; height: 100%; } .header-banner-info { position: absolute; top: 50%; left: 0; padding: 0 0.5rem; width: 100%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header-banner-info__title { margin-bottom: 2rem; font-size: 4rem; font-weight: 700; line-height: 1; color: #f5f6f7; } .header-banner-info__subtitle { font-size: 1.2rem; font-weight: 400; color: #f5f6f7; } .footer__icon { display: inline-block; margin: 0 0.4rem; font-size: 1em; color: #f00; } .footer-inner { position: relative; padding: 1rem; font-size: 16px; text-align: center; color: #f5f6f7; background-color: #2d2e30; } .footer a { color: #c20808; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; } .footer a:hover { color: #ed0b0b; } .footer__devider { margin: 0 10px; } .sidebar { border-radius: 5px; padding: 1rem 2rem; background-color: var(--color-card); padding: 1rem; width: 300px; font-size: 16px; } .sidebar--sticky { position: fixed; top: 20px; z-index: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .sidebar .hide { display: none; } .sidebar-wrap { width: 300px; float: right; } .sidebar-nav { padding-bottom: 1em; text-align: center; } .sidebar-nav-toc, .sidebar-nav-ov { border-bottom: 1px solid var(--color-gray-150); padding: 0.3em 0.5em; color: var(--color-gray-800); -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; -ms-transition: opacity 0.2s; transition: opacity 0.2s; } .sidebar-nav-toc:hover, .sidebar-nav-ov:hover { color: #fc6423; cursor: pointer; } .sidebar-nav .current { border-color: #fc6423; color: #fc6423; } .sidebar-toc { overflow: auto; position: relative; max-height: 70vh; white-space: normal; word-wrap: break-word; word-break: break-word; } .sidebar-toc .toc-child { display: none; } .sidebar-toc .active > .toc-child { display: block; } .sidebar-toc .current > .toc-child { display: block; } .sidebar-toc .active > a, .sidebar-toc .current > a { color: #fc6423; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; } .sidebar-toc ol, .sidebar-toc li { list-style: none; } .sidebar-toc ol { margin: 0; padding-left: 1em; } .sidebar-ov-author { width: 100%; text-align: center; } .sidebar-ov-author__avatar { margin: 0 auto; width: 120px; height: 120px; } .sidebar-ov-author__avatar_img { opacity: 1; -ms-filter: none; filter: none; } .sidebar-ov-author__avatar:hover .sidebar-ov-author__avatar_img { -webkit-animation: avatar-turn 0.8s both ease-out; -moz-animation: avatar-turn 0.8s both ease-out; -o-animation: avatar-turn 0.8s both ease-out; -ms-animation: avatar-turn 0.8s both ease-out; animation: avatar-turn 0.8s both ease-out; } @-moz-keyframes avatar-turn { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -o-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); } } @-webkit-keyframes avatar-turn { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -o-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); } } @-o-keyframes avatar-turn { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -o-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes avatar-turn { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -o-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); } } .sidebar-ov-author__text { margin: 0.5rem 0 0; font-weight: 600; } .sidebar-ov-state { padding: 0.5rem 0; text-align: center; } .sidebar-ov-state-item { display: inline-block; width: 33.3%; line-height: 1.5em; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; } .sidebar-ov-state-item:not(:last-child) { border-right: 1px dashed var(--color-gray-300); } .sidebar-ov-state-item--posts { color: #54bcff; } .sidebar-ov-state-item--posts:hover { color: #0090ed; } .sidebar-ov-state-item--categories { color: var(--color-gray-700); } .sidebar-ov-state-item--categories:hover { color: var(--color-gray-900); } .sidebar-ov-state-item--tags { color: #ff8956; } .sidebar-ov-state-item--tags:hover { color: #ef4800; } .sidebar-ov-state-item__count { font-weight: 600; color: var(--color-gray-950); } .sidebar-ov-cc { padding-top: 0.5rem; text-align: center; } .sidebar-reading { overflow: hidden; margin-top: 0.5em; text-align: center; } .sidebar-reading-info { margin-bottom: 0.3em; } .sidebar-reading-line { width: 100%; height: 1px; background-color: #fc6423; -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -ms-transition: -ms-transform 0.2s ease; transition: transform 0.2s ease; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .archive { margin-left: 1rem; } .archive-total { position: relative; padding: 0 0 1.5rem 1.5rem; font-size: calc(1em + 2px); } .archive-total::before { content: ''; position: absolute; top: 1em; bottom: -1em; left: 0; border-left: 0.2rem dashed var(--color-gray-250); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .archive-total::after { content: ''; position: absolute; top: 1em; left: 0; border: 0.15rem solid #6ec5ff; border-radius: 50%; width: 0.6rem; height: 0.6rem; background-color: var(--color-gray-250); -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; transition: border-color 0.2s ease; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .archive-total:hover::after { border-color: #fc6423; } .tagcloud, .category { width: 100%; } .tagcloud-total, .category-total { font-size: calc(1em + 10px); text-align: center; cursor: default; } .tagcloud { text-align: center; } .tagcloud-item a { margin: 0 0.4rem; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; } .tagcloud-item a:hover { color: #fc6423 !important; } .category-list-item::before { color: #49b1f5; } .category-list-item:hover::before { color: #fc6423; } .category-list-link { font-size: 1em; color: #49b1f5; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; } .category-list-link:hover { color: #fc6423; } .category-list-count { margin-left: 0.3em; font-size: 13px; color: var(--color-gray-600); } .category-list-count::before { content: '('; } .category-list-count::after { content: ')'; } .categorypage-title, .tagpage-title { font-size: 24px; text-align: center; } .categorypage-title__name, .tagpage-title__name { color: #49b1f5; } .custompage { width: 100%; } .timeline { position: relative; } .timeline::before { content: ''; position: absolute; top: 1em; bottom: 1em; left: 0; border-left: 0.2rem solid var(--color-gray-250); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .timeline-item { display: block; position: relative; margin-bottom: 0.8rem; padding-left: 1.5rem; width: 100%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .timeline-item::before { content: ''; position: absolute; top: 50%; left: 0; border-radius: 50%; width: 0.3rem; height: 0.3rem; background-color: #6ec5ff; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .timeline-item:hover::before { background-color: #fc6423; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item--year { font-weight: 700; } .timeline-item--year::before { border: 0.12rem solid #6ec5ff; width: 0.4rem; height: 0.4rem; background-color: var(--color-gray-250); } .timeline-item--year:hover::before { border-color: #fc6423; background-color: var(--color-gray-250); } .timeline-item__time { display: inline-block; width: 3.5rem; vertical-align: middle; color: #99a9bf; -webkit-transform: translateY(3%); -moz-transform: translateY(3%); -o-transform: translateY(3%); -ms-transform: translateY(3%); transform: translateY(3%); } .timeline-item__title { display: inline-block; margin: 0; width: calc(100% - 4.5rem); font-size: 1em; font-weight: normal; vertical-align: middle; } .timeline-item__link { color: var(--color-gray-900); } .postlist-item { margin: 0 0 1.5rem; width: 100%; border-radius: 5px; padding: 1rem 2rem; background-color: var(--color-card); } .post-readmore { margin-top: 1.5rem; text-align: center; } .post-readmore__link { display: inline-block; border-radius: 5px; padding: 0 0.6em; color: var(--color-gray-200); background-color: #73c8ff; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; cursor: pointer; } .post-readmore__link:hover { color: var(--color-gray-200); background-color: #49b1f5; } .post-readmore__icon { margin-left: 0.3rem; } .post-header { position: relative; margin-bottom: 1rem; font-size: 1em; text-align: center; } .post-title { margin: 0; color: var(--color-gray-950); cursor: auto; } .post-title__link { position: relative; color: var(--color-gray-800); white-space: normal; word-wrap: break-word; word-break: break-word; } .post-title__link::before { content: ''; visibility: hidden; position: absolute; right: 0; bottom: -4px; left: 0; height: 2px; background-color: var(--color-gray-800); -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .post-title__link:hover { color: var(--color-gray-800); } .post-title__link:hover::before { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .post-meta-item:not(:first-child)::before { content: '•'; margin: 0 0.5rem; color: var(--color-gray-700); } .post-meta-item__icon, .post-meta-item__info, .post-meta-item__value { margin: 0 2px; } .post-meta-item--createtime { color: var(--color-gray-700); } .post-meta-item--updatetime { color: #49b1f5; } .post-meta-item--visitors { color: #fc6423; } .post-ending { margin-bottom: 1rem; } .post-copyright { margin-bottom: 1rem; } .post-tags { margin-bottom: 1rem; } .post-tags-item { margin: 0 0.5rem; } .post-tags-item:hover { cursor: pointer; } .post-tags-item__icon, .post-tags-item__link { margin: 0.1rem; color: #49b1f5; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; } .post-tags-item:hover .post-tags-item__icon, .post-tags-item:hover .post-tags-item__link { color: #fc6423; } .post-reward { margin-bottom: 1rem; } .post-paginator { border-top: 1px solid var(--color-gray-250); padding-top: 1rem; } .highlight figcaption span:first-child::before { margin: 0 0.6rem 0 0; color: var(--color-gray-550); } .highlight.markdown figcaption span:first-child::before { content: 'markdown'; } .highlight.md figcaption span:first-child::before { content: 'md'; } .highlight.diff figcaption span:first-child::before { content: 'diff'; } .highlight.javascript figcaption span:first-child::before { content: 'javascript'; } .highlight.js figcaption span:first-child::before { content: 'js'; } .highlight.typescript figcaption span:first-child::before { content: 'typescript'; } .highlight.ts figcaption span:first-child::before { content: 'ts'; } .highlight.java figcaption span:first-child::before { content: 'java'; } .highlight.json figcaption span:first-child::before { content: 'json'; } .highlight.html figcaption span:first-child::before { content: 'html'; } .highlight.xml figcaption span:first-child::before { content: 'xml'; } .highlight.css figcaption span:first-child::before { content: 'css'; } .highlight.less figcaption span:first-child::before { content: 'less'; } .highlight.scss figcaption span:first-child::before { content: 'scss'; } .highlight.stylus figcaption span:first-child::before { content: 'stylus'; } .highlight.styl figcaption span:first-child::before { content: 'styl'; } .highlight.sql figcaption span:first-child::before { content: 'sql'; } .highlight.bash figcaption span:first-child::before { content: 'bash'; } .highlight.shell figcaption span:first-child::before { content: 'shell'; } .highlight.python figcaption span:first-child::before { content: 'python'; } .highlight.py figcaption span:first-child::before { content: 'py'; } .highlight.ruby figcaption span:first-child::before { content: 'ruby'; } .highlight.cpp figcaption span:first-child::before { content: 'cpp'; } .highlight.c\+\+ figcaption span:first-child::before { content: 'c\+\+'; } .highlight.c\# figcaption span:first-child::before { content: 'c\#'; } .highlight.go figcaption span:first-child::before { content: 'go'; } .highlight.kotlin figcaption span:first-child::before { content: 'kotlin'; } .highlight.kt figcaption span:first-child::before { content: 'kt'; } .highlight.objectivec figcaption span:first-child::before { content: 'objectivec'; } .highlight.php figcaption span:first-child::before { content: 'php'; } .highlight.perl figcaption span:first-child::before { content: 'perl'; } .highlight.pl figcaption span:first-child::before { content: 'pl'; } .highlight.pm figcaption span:first-child::before { content: 'pm'; } .highlight.rust figcaption span:first-child::before { content: 'rust'; } .highlight.rs figcaption span:first-child::before { content: 'rs'; } .highlight.swift figcaption span:first-child::before { content: 'swift'; } .highlight.coffeescript figcaption span:first-child::before { content: 'coffeescript'; } .highlight.coffee figcaption span:first-child::before { content: 'coffee'; } .highlight.lua figcaption span:first-child::before { content: 'lua'; } .highlight.yaml figcaption span:first-child::before { content: 'yaml'; } .highlight.yml figcaption span:first-child::before { content: 'yml'; } .highlight.nginx figcaption span:first-child::before { content: 'nginx'; } .highlight.dockerfile figcaption span:first-child::before { content: 'dockerfile'; } .highlight.makefile figcaption span:first-child::before { content: 'makefile'; } .highlight { margin: 0 0 1rem; border-radius: 0.25rem; width: 100%; line-height: 1.7; color: var(--color-gray-850); background-color: var(--color-gray-200); } .highlight pre, .highlight code { font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; } .highlight pre { margin: 0; } .highlight td { border-width: 0; } .highlight figcaption { position: relative; width: 100%; color: var(--color-gray-850); background-color: var(--color-gray-200); zoom: 1; padding: 0.1rem 0; } .highlight figcaption:before, .highlight figcaption:after { content: ""; display: table; } .highlight figcaption:after { clear: both; } .highlight figcaption span:first-child { float: left; margin-left: 0.5rem; color: var(--color-gray-850); } .highlight figcaption span.external-link { float: right; margin-right: 2em; } .highlight figcaption.custom { min-height: 1.5rem; border-radius: 0.25rem; } .highlight figcaption.custom .custom-lang { float: left; margin: 0 0.6rem; color: var(--color-gray-550); } .highlight td.gutter { border-right: 1px solid var(--color-gray-300); padding: 0.4rem 0.6rem; width: 2rem; background-color: var(--color-gray-200); border-radius: 0.25rem; } .highlight td.gutter pre { text-align: right; white-space: nowrap; color: var(--color-gray-550); background-color: inherit; } .highlight td.code { padding: 0.5rem 0.6rem; } .highlight .marked { background-color: var(--color-gray-260); } .highlight .emphasis { font-style: italic; } .highlight .strong { font-weight: bold; } .highlight .comment { color: #969896; } .highlight .quote, .highlight .params { color: var(--color-gray-850); } .highlight .selector-tag, .highlight .template-variable, .highlight .variable, .highlight .deletion, .highlight .regexp, .highlight .name, .highlight .tag { color: #c82829; } .highlight .builtin-name, .highlight .literal, .highlight .number, .highlight .type, .highlight .meta, .highlight .link { color: #ee8019; } .highlight .class .keyword:first-child + .title, .highlight .built_in, .highlight .attribute { color: #eab700; } .highlight .class .keyword ~ .title, .highlight .string .template-variable, .highlight .meta-string, .highlight .tag, .highlight .class, .highlight .subst, .highlight .regexp { color: #4eb4b4; } .highlight .string, .highlight .symbol, .highlight .bullet, .highlight .addition { color: #4dc14c; } .highlight .title, .highlight .section { color: #2a75c8; } .highlight .meta-keyword, .highlight .doctag, .highlight .selector-id, .highlight .selector-attr, .highlight .selector-class, .highlight .selector-pseudo, .highlight .function, .highlight .tag .attr, .highlight .keyword { color: #be4dbc; } .bash .meta, .rust .meta { color: #969896; } .c\+\+ .built_in, .cpp .built_in, .ini .variable, .ini .literal, .ini .number, .less .variable, .scss .variable, .styl .variable, .stylus .variable { color: var(--color-gray-850); } .html .meta, .xml .meta, .yaml .attr, .yml .attr { color: #c82829; } .js .params, .javascript .params { color: #ee8019; } .json .attr, .swift .type { color: #eab700; } .variable .variable, .bash .variable, .c\+\+ .meta, .cpp .meta, .c\# .meta, .css .number, .diff .meta { color: #4eb4b4; } .md .section, .markdown .section, .py .string .meta, .python .string .meta { color: #4dc14c; } .bash .built_in, .css .built_in, .go .built_in, .py .meta, .python .meta, .shell .meta, .shell .keyword, .shell .built_in { color: #2a75c8; } .ini .attr, .objectivec .meta, .yaml .type, .yml .type { color: #be4dbc; } .diff .addition { color: #292; background-color: #f0fff4; } .diff .deletion { color: #d44; background-color: #ffeef0; } .nightmode .diff .addition { background-color: transparent; } .nightmode .diff .deletion { background-color: transparent; } .ending { padding: 1rem 0 0; text-align: center; color: var(--color-gray-400); border-top: 1px dashed var(--color-gray-300); } .back2top { position: fixed; right: 0; bottom: 5vh; -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -ms-transition: -ms-transform 0.2s ease; transition: transform 0.2s ease; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); cursor: pointer; } .back2top--show { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .back2top--hide { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .back2top__icon { display: block; font-size: 1.2rem; line-height: 1; color: #49b1f5; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .back2top__icon:hover { color: #fc6423; } .zoomimg-mask { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .zoomimg { cursor: zoom-in; } .zoomimg--hide { visibility: hidden; } .zoomimg-clone { position: absolute; z-index: 2; background-color: #fff; cursor: zoom-out; will-change: transform; } .mode { position: relative; border: 0; padding: 0; line-height: 100%; background-color: transparent; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mode--focus .mode-thumb { -webkit-box-shadow: 0 0 2px 3px #0099e0; box-shadow: 0 0 2px 3px #0099e0; } .mode--checked .mode-thumb { -webkit-transform: translateX(26px); -moz-transform: translateX(26px); -o-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .mode-track { border-radius: 30px; width: 50px; height: 24px; font-size: 0; background-color: #8c8a8a; } .mode-track-moon, .mode-track-sun { display: inline-block; position: absolute; top: 0; bottom: 0; width: 25px; height: 100%; font-size: 14px; } .mode-track-moon::before, .mode-track-sun::before { display: block; width: 100%; height: 100%; font-size: 14px; line-height: 24px; text-align: center; } .mode-track-moon { left: 0; } .mode-track-moon::before { content: '🌜'; } .mode-track-sun { right: 0; } .mode-track-sun::before { content: '🌞'; } .mode-thumb { position: absolute; top: 1px; left: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #4d4d4d; border-radius: 50%; width: 22px; height: 22px; background-color: #fafafa; -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; -ms-transition: -ms-transform 0.2s ease; transition: transform 0.2s ease; } .mode-input { position: absolute; border: 0; width: 0; height: 0; } .reward { text-align: center; } .reward-button { display: inline-block; margin: 1rem 0 1.5rem; border-radius: 6px; padding: 0.2rem 1rem; color: #f5f6f7; background-color: #ff6868; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; cursor: pointer; } .reward-button:hover { background-color: #e45c5c; } .reward-qrcode { display: none; } .reward-qrcode-alipay, .reward-qrcode-wechat { display: inline-block; margin: 0 2rem; } .reward-qrcode-alipay__img, .reward-qrcode-wechat__img { width: 200px; height: 200px; } .reward-qrcode-alipay__text, .reward-qrcode-wechat__text { margin: 0.5rem 0; } .reward-qrcode-alipay__text { color: #1caceb; } .reward-qrcode-wechat__text { color: #3cb034; } .copyright { position: relative; border: 1px solid var(--color-gray-250); padding: 0.8rem 1rem; width: 100%; -webkit-transition: box-shadow 0.2s ease; -moz-transition: box-shadow 0.2s ease; -o-transition: box-shadow 0.2s ease; -ms-transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease; } .copyright:hover { -webkit-box-shadow: 0 0 16px 8px var(--color-gray-250); box-shadow: 0 0 16px 8px var(--color-gray-250); } .copyright-author__name, .copyright-link__name, .copyright-notice__name { font-weight: 600; white-space: normal; word-wrap: break-word; word-break: break-word; } .copyright-author__value, .copyright-link__value, .copyright-notice__value { color: var(--color-gray-800); white-space: normal; word-wrap: normal; word-break: break-all; } .gallery img { margin-bottom: 10px; } .exturl__icon { margin: 0 0.1em 0 0.3em; font-size: 0.8em; color: #aaa; } .exturl__link { white-space: normal; word-wrap: break-word; word-break: break-word; } .footer .exturl__icon { color: #fff; } .comments { margin: 1.5rem 0 0; width: 100%; border-radius: 5px; padding: 1rem 2rem; background-color: var(--color-card); float: left; } .copy-button { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; color: var(--color-gray-800); cursor: pointer; } .copy-button i { color: var(--color-gray-550); } .sticky-top { position: absolute; top: 0; width: 1rem; height: 1rem; line-height: 1rem; text-align: center; right: 0; } .sticky-top__icon { display: block; width: 100%; height: 100%; color: #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .archive .sticky-top { top: 50%; right: 0; left: auto; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .paginator { margin-top: 1rem; text-align: center; } .paginator-inner { border-radius: 5px; padding: 12px 0; background-color: var(--color-gray-150); } .paginator .page-number, .paginator .prev, .paginator .next { display: inline-block; margin: 0 0.5em; border: 1px solid transparent; border-radius: 3px; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; vertical-align: middle; -webkit-transition: border 0.2s ease; -moz-transition: border 0.2s ease; -o-transition: border 0.2s ease; -ms-transition: border 0.2s ease; transition: border 0.2s ease; } .paginator .page-number:hover, .paginator .prev:hover, .paginator .next:hover { border-color: var(--color-gray-260); } .paginator .current { color: #f4f5f5; background-color: #49b1f5; } .paginator .current:hover { border-color: transparent; } .paginator-prev, .paginator-next { width: 100%; } .paginator-prev__link, .paginator-next__link { white-space: normal; word-wrap: break-word; word-break: break-word; color: #49b1f5; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease; } .paginator-prev__link:hover, .paginator-next__link:hover { color: #fc6423; } .paginator-prev { text-align: left; } .paginator-prev__icon { margin-right: 0.3rem; } .paginator-next { text-align: right; } .paginator-next__icon { margin-left: 0.3rem; } .button-plugin { display: inline-block; border: 1px solid #73c8ff; border-radius: 0.2rem; padding: 0.2rem 0.75rem; height: 32px; line-height: 1.375; color: #fff; background-color: #73c8ff; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .button-plugin:hover { color: #fff; background-color: #49b1f5; } .button-plugin > span { display: inline-block; } .button-plugin--icon-only { padding: 0; width: 32px; height: 32px; line-height: 30px; text-align: center; } .button-plugin__icon { line-height: 1; } .button-plugin__icon + .button-plugin__content { margin-left: 0.3rem; } .table-plugin tr { -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .table-plugin tr:nth-of-type(even) { background-color: var(--color-gray-150); } .table-plugin tr:hover { background-color: var(--color-gray-200); } .table-plugin th, .table-plugin td { min-width: 5rem; } .note-plugin { position: relative; margin-bottom: 20px; border: 1px solid var(--color-gray-250); border-left-width: 6px; padding: 0 17px; } .note-plugin:not(.no-icon) { padding-left: 40px; } .note-plugin h1, .note-plugin h2, .note-plugin h3, .note-plugin h4, .note-plugin h5, .note-plugin h6 { margin: 0; } .note-plugin p { margin: 12px 0; } .note-plugin strong { font-size: 18px; line-height: 1.75; } .note-plugin__icon { position: absolute; top: 1em; left: 12px; font-size: 18px; line-height: 1; } .note-plugin__icon--default { color: var(--color-gray-600); } .note-plugin__icon--success { color: #42b983; } .note-plugin__icon--info { color: #4898dd; } .note-plugin__icon--warning { color: #e7c000; } .note-plugin__icon--danger { color: #dc3b3b; } .note-plugin.default { border-left-color: var(--color-gray-600); } .note-plugin.default strong { color: var(--color-gray-600); } .note-plugin.success { border-left-color: #42b983; } .note-plugin.success strong { color: #42b983; } .note-plugin.info { border-left-color: #4898dd; } .note-plugin.info strong { color: #4898dd; } .note-plugin.warning { border-left-color: #e7c000; } .note-plugin.warning strong { color: #e7c000; } .note-plugin.danger { border-left-color: #dc3b3b; } .note-plugin.danger strong { color: #dc3b3b; } .friends-plugin { overflow: hidden; max-width: 100%; } .friends-plugin__item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; float: left; padding: 0.5rem 1rem; width: 50%; height: 100px; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .friends-plugin__item:hover { background-color: rgba(73,177,245,0.1); } .friends-plugin__item p { margin: 0; } .friends-plugin__item-avatar { margin: 0 1rem 0 0; border-radius: 50% !important; width: 60px; height: 60px; } .friends-plugin__item-info { overflow: hidden; width: 100%; color: var(--color-gray-800); } .friends-plugin__item-info__name, .friends-plugin__item-info__intro { overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .friends-plugin__item-info__name { font-weight: 700; } .friends-plugin__item-info__intro { font-size: 0.9em; color: #999; } @media (min-width: 1138px) { .header-nav-inner { width: 1138px; } .main-inner { width: 1138px; } } @media (min-width: 991.98px) { .header-nav-menu { display: inline-block !important; opacity: 1 !important; -ms-filter: none !important; filter: none !important; } .header-nav-submenu { border-radius: 3px; } } @media (max-width: 991.98px) { .header-inner { height: 17rem; } .header-banner-info__title { margin-bottom: 1rem; } .header-nav-menubtn { display: block; float: left; } .header-nav-menu { overflow: hidden; position: absolute; top: 50px; right: 0; left: 0; width: auto; height: auto; background-color: #2d2e30; } .header-nav-menu-item { float: none; overflow: hidden; margin: 0; } .header-nav-menu-item__link { padding-right: 1.5rem; padding-left: 1.5rem; text-align: left; color: #f4f5f5; } .header-nav-submenu { display: block; position: initial; width: 100%; } .header-nav-submenu-item__link { padding-right: 1rem; padding-left: 3rem; text-align: left; } .content-wrap { width: 100%; } .sidebar-wrap { display: none; } .post-list .post { margin: 0 0 1rem; padding: 1rem; } } @media (max-width: 767.98px) { .header-nav-inner { padding: 15px; } .header-banner-info__title { margin-bottom: 1rem; font-size: 3rem; } .header-banner-info__subtitle { font-size: 0.9rem; } .main-inner { padding: 15px; } } @media (max-width: 575.98px) { .header-inner { height: 13rem; } .header-nav-inner { padding: 10px; } .header-banner-info__title { margin-bottom: 0.5rem; font-size: 2rem; } .header-banner-info__subtitle { font-size: 14px; } .header-banner-arrow { bottom: 0.5rem; } .main-inner { padding: 10px; } .content, .comments { padding: 0.6rem 0.8rem; font-size: 15px; } .archive { margin-left: 0.5rem; } .archive-total { padding-left: 1rem; } .timeline-item { padding-left: 1rem; } .timeline-item__time { width: 2.75rem; } .timeline-item__title { width: calc(100% - 4rem); } .post-list .post { margin: 0 0 0.8rem; padding: 0.8rem; } .friends-plugin__item { margin: 0; padding: 0.5rem 1rem; width: 100%; } }