/*
Theme Name: MedianWP
Theme URI: https://exthem.es/item/median-wp-themes-premium/
Author: exthemes dev
Author URI: https://exthem.es/
Description: MedianWP Plus-UI for wordpress themes by exthemes.web.id - rey.web.id.
Version: 3.3
Tested up to: 6.0
Requires PHP: 7.4
Text Domain: medianwp
Tags: MedianWP, median, medianui, plus-ui, exthemes, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, rtl-language-support, editor-style, custom-menu (optional)
*/
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:italic;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYOyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYNyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:italic;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ-yDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ9yH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:italic;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:normal;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:normal;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Noto Sans'; font-style:normal;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Font: Body + Heading(Alternative), Fira Sans(Latin) by Google */
@font-face {
font-family:'Fira Sans'; font-style:italic;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9C4kDNxMZdWfMOD5VvkrjJYTI.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9C4kDNxMZdWfMOD5VvkojN.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:italic;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrA6Qif4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrA6Qhf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:italic;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrAWRSf4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrAWRRf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:italic;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrByRCf4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrByRBf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vfkw.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:normal;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnZKveRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnZKvuQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:normal;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnSKzeRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnSKzuQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Fira Sans'; font-style:normal;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnLK3eRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnLK3uQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Font: Source code, Fira Mono(Latin) by Google */
@font-face {
font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
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;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: .82em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: .88em;
}
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;
outline: 0;
}
button, input {
overflow: visible;
}
button, select {
text-transform: none;
}
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: .35em .75em .625em;
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=checkbox], [type=radio] {
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], .hidden {
display: none;
}
/* Basic: CSS */
::selection {
color: var(--selectC);
background-color: var(--selectBg);
opacity: .85;
}
::placeholder {
color: var(--placeHolder);
}
::before, ::after, * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
font: var(--fontSize) var(--fontBody);
}
body {
position: relative;
margin: 0;
padding: 0 !important;
color: var(--themeC);
background-color: var(--themeBg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
margin-block: .67em;
font: var(--head-fontWg) 1.4rem/1.4 var(--fontHead);
color: currentColor;
}
h1 {
font-size: var(--head-H1);
}
h2 {
font-size: var(--head-H2);
}
h3 {
font-size: var(--head-H3);
}
h4 {
font-size: var(--head-H4);
}
h5 {
font-size: var(--head-H5);
}
h6 {
font-size: var(--head-H6);
}
a {
color: var(--themeLink);
text-decoration: none;
}
a:hover {
filter: brightness(.9);
transition: filter .1s;
}
table {
border-spacing: 0;
}
iframe {
width: 100%;
border: 0;
margin-inline: auto;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
svg {
width: 24px;
height: 24px;
fill: currentColor;
}
svg.line, svg .line {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.25;
}
.invisible {
opacity: 0;
visibility: hidden;
}
.clear {
width: 100%;
display: block;
margin: 0;
padding: 0;
float: none;
clear: both;
}
.break {
word-break: break-word;
}
/* Basic: input and details tag */
input {
color: var(--inputC);
background-color: var(--inputBg);
}
input[type=search]::-ms-clear, input[type=search]::-ms-reveal {
display: none;
appearance: none;
width: 0;
height: 0;
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
display: none;
-webkit-appearance: none;
appearance: none;
}
details summary.n, details.sp summary, details.ac summary {
list-style: none;
outline: none;
cursor: default;
}
details summary.n::-webkit-details-marker, details.sp summary::-webkit-details-marker, details.ac summary::-webkit-details-marker {
display: none;
}
/* Basic: function */
.fc::after {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transition: background var(--tDuration), var(--tShowHide), backdrop-filter var(--tDuration);
background-color: transparent;
opacity: 0;
visibility: hidden;
}
.free::after, .new::after {
display: inline-block;
content: var(--free);
color: var(--themeLink);
font-weight: 400;
font-size: small;
text-indent: 5px;
}
.new::after {
content: var(--new);
}
.extL::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-inline-start: 5px;
background: url("data:image/svg+xml,") center / 16px no-repeat;
}
.noList, .noList ul, .noList ol {
list-style: none;
margin: 0;
padding: 0;
}
.noWrap {
white-space: nowrap;
}
.ellips {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cInherit a {
color: inherit;
}
.cInherit.u a:hover {
text-decoration: underline;
}
.bgInherit {
background-color: inherit;
}
.bgAlt {
background-color: var(--themeBg-alt);
}
.clamp {
/*display:-webkit-box;*/
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.strike {
text-decoration: line-through;
}
.flex {
display: flex;
}
.flex.center {
align-items: center;
justify-content: center;
}
.flex.column {
flex-direction: column;
}
.flex.wrap {
flex-wrap: wrap;
}
.flex.space-between {
justify-content: space-between;
}
.flex.baseline {
align-items: baseline;
}
.flexIn {
display: inline-flex;
}
.flexIn.baseline {
align-items: baseline;
}
.flexIn.center {
align-items: center;
}
.shrink {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.opacity {
opacity: .8;
}
/* Font style */
.fontM {
font-size: .93em;
}
.fontS {
font-size: small;
}
.fontSm {
font-size: smaller;
}
.fontB {
font-family: var(--fontBody);
}
.fontBa {
font-family: var(--fontBody-alt);
}
.fontC {
font-family: var(--fontCode);
}
/* Icon and SVG */
.ic {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--iconWidth);
height: var(--iconHeight);
}
.op svg {
opacity: .8;
}
.i12 svg {
flex-shrink: 0;
width: 12px;
height: 12px;
}
.i14 svg {
flex-shrink: 0;
width: 14px;
height: 14px;
}
.i16 svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.i18 svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.i20 svg {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.i22 svg {
flex-shrink: 0;
width: 22px;
height: 22px;
}
.i28 svg {
flex-shrink: 0;
width: 28px;
height: 28px;
}
/* Button */
.button {
display: inline-flex;
align-items: center;
column-gap: 8px;
max-width: var(--button-maxWidth);
padding: .75rem 1rem;
outline: 0;
border: 0;
border-radius: var(--buttonBd-radius);
color: var(--buttonC);
background-color: var(--buttonBg);
font: 1rem/1.5 var(--fontBody);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.button:hover {
filter: brightness(1.1);
}
.button:active {
filter: brightness(.9);
}
.button.ln {
border: var(--buttonBd-line) solid var(--buttonBd-color);
color: inherit;
background-color: transparent;
}
.button.ln:hover {
border-color: var(--buttonBg);
box-shadow: 0 0 0 .5px var(--buttonBg) inset;
}
.button.sc {
padding-inline: 0;
color: currentColor;
background-color: transparent;
}
.button.sc:hover {
text-decoration: underline;
}
.button.round {
border-radius: 30px;
}
.button svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.button span::after {
content: attr(data-text);
display: block;
font-size: smaller;
text-indent: 4px;
opacity: .8;
}
.btnF {
display: flex;
justify-content: center;
gap: 12px;
margin-block: 1em;
}
/* Avatar */
.avatar {
min-width: 28px;
min-height: 28px;
border-radius: 50%;
background-color: var(--contentBg-sec);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.avatar.im {
width: 35px;
height: 35px;
}
/* Back to top */
.bT {
align-items: center;
gap: 5px;
position: relative;
margin-inline-end: -2px;
}
.bT::before {
content: attr(data-text);
opacity: .8;
}
/* Sticky ad */
.stickAd {
position: fixed;
left: 0;
bottom: 0;
right: 0;
min-height: 70px;
max-height: 200px;
padding: 5px;
border-top: 1px solid var(--contentBd-color);
background-color: var(--contentBg);
transition: border var(--tDuration), padding var(--tDuration), min-height var(--tDuration);
z-index: 1;
}
.stickAd .n {
position: absolute;
top: -28px;
right: 0;
width: 45px;
height: 28px;
border-radius: 10px 0 0;
border: 1px solid var(--contentBd-color);
border-right: 0;
border-bottom: 0;
background-color: var(--contentBg);
}
.stickAd .n::after {
content: '\2715';
font-size: 13px;
}
.stickAd:not([open]) {
border-top: 0;
padding-block: 0;
min-height: 0;
}
/* Error 404 */
.errorP {
height: 100vh;
text-align: center;
}
.errorC {
width: calc(100% - calc(var(--contentPadding) * 2));
max-width: 450px;
margin: auto;
font-family: var(--fontBody-alt);
}
.errorC .e {
font-size: 4rem;
color: rgb(0 0 0 / 10%);
}
.errorC .t {
font-size: 1.6rem;
}
.errorC p {
margin-block: 25px 30px;
line-height: 1.4;
}
.errorC .button {
padding-inline: 2.5em;
}
.errorC .button::before {
content: attr(aria-label);
}
/* Notify */
.nB .fixN {
--minHeight: 45px;
--minHeight-phone: var(--closeHeight-phone);
display: inline-flex;
align-items: center;
position: fixed;
bottom: calc(-100px + var(--contentPadding-minus));
min-height: var(--minHeight);
padding: 15px 20px;
border-radius: var(--contentBd-radius);
color: #d9e2f0;
background: #323232;
font: small/1.3 var(--fontBody-alt);
box-shadow: 5px 10px 20px 0 rgb(0 0 0 / 10%);
transition: bottom var(--tDuration), var(--tShowHide);
z-index: 99;
animation: slideIn 2.2s ease-in forwards;
}
.nB:not(.r) .fixN {
left: var(--contentPadding);
direction: ltr;
}
.nB.r .fixN {
right: var(--contentPadding);
direction: rtl;
}
.fixN.copied::before {
content: var(--copied);
}
/* Widget: notify */
.notify {
--padding: 15px;
--closeW: 32px;
color: var(--notifC);
background-color: var(--notifBg);
}
.notify:not(.no-items) {
/* margin-block-end: var(--contentSpace); */
;
}
.notify details {
position: relative;
min-height: 0;
padding-block: 0;
padding-inline-end: calc(var(--closeW) - 7px);
transition: min-height var(--tDuration), padding var(--tDuration);
overflow: hidden;
}
.notify details[open] {
min-height: var(--notifHeight);
padding-block: var(--padding);
}
.notify summary {
position: absolute;
top: 15px;
width: var(--closeW);
min-height: 20px;
}
.notify summary:not(.r) {
right: -7px;
}
.notify summary.r {
left: -7px;
}
.notify summary .c::after {
content: '\2715';
font-weight: 400;
font-size: 14px;
}
.notify .p {
min-height: calc(var(--notifHeight) - (var(--padding) * 2));
line-height: 1.3;
font-family: var(--fontBody-alt);
}
.notify a:not(.b) {
color: var(--notifLink);
text-decoration: underline;
font-weight: 500;
}
.notify a.b {
margin-inline-start: 5px;
padding: 6px 8px;
border-radius: var(--contentBd-radius);
color: #3740ff;
background-color: #fffdfc;
box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
}
/* noScript/cookie */
body.nB .lazy:not([lazied]) {
display: none;
}
.nJ {
position: fixed;
left: 0;
bottom: var(--contentPadding);
right: 0;
max-width: 400px;
margin-inline: var(--contentPadding);
padding: 18px 20px;
padding-block-end: 36px;
border-radius: var(--contentBd-radius);
color: var(--warnC);
background: var(--warnBg);
font: small/1.3 var(--fontBody-alt);
box-shadow: 0 15px 30px -8px rgb(0 0 0 / 8%);
z-index: 99;
}
.nJ:not([open]) {
display: none;
}
.nJ summary {
position: absolute;
bottom: 12px;
right: 20px;
}
.nJ span:not(.c)::before {
content: attr(data-text);
}
.nJ span.c {
display: flex;
align-items: center;
gap: 5px;
font-weight: 500;
}
.nJ span.c::before {
content: attr(data-text);
}
.nJs .noJava, .njs .lazyYt {
display: none;
}
.nJ.cookie:not(.hidden) {
display: block;
}
.nJ.cookie {
bottom: calc(-100px + var(--contentPadding));
margin-bottom: var(--contentPadding);
padding-block-end: 15px;
color: #0e2045;
background-color: #fffdfc;
font-size: .94rem;
box-shadow: 0 15px 30px 8px rgb(0 0 0 / 8%);
transition: bottom var(--tDuration), var(--tShowHide);
animation: slideTop 2.2s ease-in forwards;
}
.nJ.cookie p {
margin-block: 0 5px;
}
.nJ.cookie p a:hover {
text-decoration: underline;
opacity: 1;
}
.nJ.cookie .ft {
gap: 20px;
justify-content: flex-end;
font-weight: 500;
}
.nJ.cookie .ft >* {
padding-block: 5px;
}
.nJ.cookie .acc {
color: var(--themeLink);
cursor: pointer;
}
/* Element: po-up */
.popH {
align-items: baseline;
justify-content: space-between;
column-gap: 20px;
top: 0;
left: 0;
right: 0;
padding-block: 20px;
background-color: inherit;
z-index: 3;
}
.popH .filter {
align-items: center;
justify-content: flex-end;
column-gap: 10px;
flex-shrink: 0;
min-width: 50px;
}
.popH .c {
display: none;
align-items: center;
justify-content: center;
gap: 5px;
width: var(--iconWidth);
height: var(--iconHeight);
margin-inline-end: -10px;
}
.popH .c::after {
content: '\2715';
font-weight: 400;
font-size: 14px;
}
.popH .t {
display: none;
}
.popH .t::before {
content: attr(data-text);
flex-grow: 1;
opacity: .8;
}
.popUp .popH .c {
display: flex;
}
.popUp .popH .t {
display: block;
}
.popUp .popH {
position: absolute;
height: 60px;
padding: 10px var(--contentPadding);
}
.popUp .popH .title {
margin: 0;
font-size: 1em;
}
.popUp {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: var(--vHeight);
margin-bottom: -100%;
font-size: 1rem;
opacity: 0;
visibility: hidden;
transition: width var(--tDuration), height var(--tDuration), margin var(--tDuration), var(--tShowHide);
z-index: 20;
}
.popUp .popIn {
display: flex;
position: relative;
width: 100%;
max-width: var(--contentPop-maxWidth);
max-height: calc(100% - (var(--contentPadding) * 2));
border: var(--contentBd-line) solid var(--contentBd-color);
border-radius: var(--contentBd-radiusA);
transition: inherit;
z-index: 3;
overflow: hidden;
}
.popUp .popC {
width: 100%;
padding: 60px var(--contentPadding) var(--contentPadding);
background-color: var(--contentBg);
overflow-y: scroll;
overflow-x: hidden;
}
.popI:checked ~ .popUp {
opacity: 1;
visibility: visible;
margin-bottom: 0;
}
.popI:checked ~ .popUp .fc::after {
opacity: 1;
visibility: visible;
background-color: var(--themeBg-pop);
backdrop-filter: saturate(180%) blur(10px);
}
/* element: Main */
.maxC {
margin-inline: auto;
padding-inline: var(--contentPadding);
max-width: var(--content-maxWidth);
}
.mainH {
--gapH: 15px;
gap: var(--gapH);
height: var(--headerHeight);
position: -webkit-sticky;
position: sticky;
top: 0;
border-bottom: var(--headerBd-line) solid var(--headerBd-color);
color: var(--headerC);
background-color: var(--headerBg);
z-index: 10;
}
.mainN {
min-height: calc(var(--vHeight) - var(--headerHeight));
transition: min-height var(--tDuration);
}
.mainF {
position: relative;
margin-block-start: auto;
padding-block: 25px;
border-radius: var(--footerBd-radiusTL) var(--footerBd-radiusTR) 0 0;
color: var(--footerC);
background-color: var(--footerBg);
}
/* mainH */
.mainH >* {
align-items: center;
}
.headL {
--gap: 10px;
gap: var(--gap);
width: var(--headerWidth-expand);
}
.headR {
--gap: 15px;
flex-grow: 1;
gap: var(--gap);
width: calc(100% - (var(--headerWidth-expand) + var(--gapH)));
padding-inline-end: var(--contentPadding);
}
.headT {
max-width: calc(100% - (((var(--sideWidth) - var(--iconWidth)) / 2) + var(--iconWidth) + var(--gap)));
}
.headB {
position: relative;
margin-inline-start: auto;
}
/* mainH: icon */
.headi.menu {
height: 100%;
padding-inline-start: calc((var(--sideWidth) - var(--iconWidth)) /2);
}
.headi:not(.menu) {
align-items: center;
justify-content: flex-end;
gap: 2px;
position: relative;
margin-inline-end: -8px;
}
.headi .sc {
display: none;
}
.ibook .bc {
position: relative;
}
.ibook .bc svg {
z-index: -1;
}
.ibook .bc::before {
content: attr(data-text);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1px;
right: 2px;
min-width: 18px;
height: 18px;
border-radius: 20px;
color: var(--themeLink);
background-color: var(--headerBg);
font-weight: 500;
font-size: 10px;
font-style: normal;
}
/* mainH: setting */
.settB {
--maxWidth: 260px;
--maxWidth-minus: -260px;
}
.settB .h {
align-items: center;
align-self: flex-start;
gap: 6px;
padding-top: var(--contentPadding-box);
}
.settB .h::after {
content: attr(data-text);
}
.settB .h svg {
display: none;
}
.setti {
--gap: 15px;
flex-wrap: wrap;
gap: var(--gap);
}
.setti >* {
width: calc((100% / 5) - (var(--gap) * 4/5));
}
.ipopUp {
position: absolute;
top: 0;
width: var(--maxWidth);
padding: var(--contentPadding-box);
border: var(--contentBd-line) solid var(--contentBd-color);
border-radius: var(--contentBd-radiusA);
background-color: var(--contentBg);
transition: top var(--tDuration), left var(--tDuration), right var(--tDuration), var(--tShowHide);
box-shadow: 0 10px 30px -8px rgb(0 0 0 / 15%);
overflow: hidden;
z-index: 1;
}
.ipopUp:not(.r) {
right: 0;
}
.ipopUp.r {
left: 0;
}
/* set theme or bookmark */
.iTheme, .iBook {
gap: 15px;
padding-top: 0;
}
.inn {
--gap: 10px;
flex-wrap: wrap;
gap: 12px var(--gap);
}
.inn >*:not(:last-child) {
width: calc((100% / 3) - (var(--gap) * 2/3));
transition: font-weight var(--tDuration), color var(--tDuration), opacity var(--tDuration);
}
.inn >*:not(:last-child):hover {
opacity: .8;
}
.inn >*:last-child {
width: 100%;
}
.inn >*:not(:last-child)::after {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inn >*::after {
content: attr(data-text);
display: block;
}
.inn .i {
height: 36px;
margin-bottom: 6px;
border-radius: calc(var(--contentBd-radiusA) /1.5);
background-color: #e5e5e6;
overflow: hidden;
transition: box-shadow var(--tDuration);
}
.inn .i >* {
flex: 1 0 50%;
padding-inline-start: 6px;
padding-block-start: 6px;
}
.inn .k {
gap: 7px;
height: 100%;
padding-block: 8px 0;
padding-inline: 8px;
background-color: #fffdfc;
}
.inn .k:not(.r) {
border-top-left-radius: calc(var(--contentBd-radiusA) /2.2);
}
.inn .k.r {
border-top-left-radius: 0;
border-top-right-radius: calc(var(--contentBd-radiusA) /2.2);
}
.inn .k >* {
gap: 4px;
width: 100%;
}
.inn .k >*::before, .inn .k >*::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 1px;
background-color: rgb(0 0 0 / 60%);
}
.inn .p::before {
width: 100%;
}
.inn .p::after {
width: 60%;
}
.inn .a >*:not(:first-child), .inn .a >*:not(:first-child) .k {
padding-inline-start: 0;
}
.inn .a >*:not(:first-child) .k:not(.r), .inn .a >*:not(:first-child) .k.r {
border-radius: 0;
}
.inn .a >*:first-child .k {
padding-inline-end: 0;
}
.inn .a >*:first-child .t::after {
flex-grow: 1;
width: 3px;
}
.inn .a >*:first-child .p::after {
width: 100%;
}
.inn .a >*:not(:first-child) .t::before, .inn .a >*:not(:first-child) .p::after {
width: 8px;
}
.inn .a >*:not(:first-child) .t::after {
display: none;
}
.inn .rev {
background-color: #22262d;
}
.inn .rev .k {
background-color: #5a5c63;
}
.inn .rev .k >*::before, .inn .rev .k >*::after {
background-color: #d9e2f0;
}
/* set theme or bookmark: active */
.setI:checked ~ .settB .iSett, .setI:checked ~ .settB .iTheme, .setI:checked ~ .settB .iBook, .darkI:checked ~ .settB .iTheme, .bookI:checked ~ .settB .iBook {
top: 5px;
}
.setI:checked ~ .settB .iSett, .darkI:checked ~ .settB .iTheme, .bookI:checked ~ .settB .iBook, .setI:checked ~ .section .st.fc::after, .darkI:checked ~ .section .dc.fc::after, .bookI:checked ~ .section .bc.fc::after, .setI:checked ~ .darkI:checked ~ .section .dc.fc::after, .setI:checked ~ .bookI:checked ~ .section .bc.fc::after {
opacity: 1;
visibility: visible;
}
.setI:checked ~ .settB .iTheme .h svg, .setI:checked ~ .settB .iBook .h svg {
display: block;
}
.setI:checked ~ .settB .iTheme:not(.r), .setI:checked ~ .settB .iBook:not(.r) {
right: var(--maxWidth-minus);
}
.setI:checked ~ .settB .iTheme.r, .setI:checked ~ .settB .iBook.r {
left: var(--maxWidth-minus);
}
.setI:checked ~ .darkI:checked ~ .settB .iTheme:not(.r), .setI:checked ~ .bookI:checked ~ .settB .iBook:not(.r) {
right: 0;
}
.setI:checked ~ .darkI:checked ~ .settB .iTheme.r, .setI:checked ~ .bookI:checked ~ .settB .iBook.r {
left: 0;
}
.setI:checked ~ .darkI:checked ~ .section .dc.fc::after, .setI:checked ~ .bookI:checked ~ .section .bc.fc::after {
z-index: 2;
}
/* mainH: Bookmark */
.addb ~ label svg {
display: none;
}
.addb:not(:checked) ~ label svg:nth-child(1), .addb:checked ~ label svg:nth-child(2) {
display: block;
}
.addb:checked ~ label svg, .book .bm-delete:hover {
color: var(--themeLink);
opacity: 1;
}
.addl .addb:checked ~ label::before {
content: var(--removeBookmark);
}
.addl label::before {
content: var(--addBookmark);
position: relative;
max-width: 0;
padding-inline: 0;
transition: max-width var(--tDuration), padding-inline var(--tDuration);
opacity: .8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.addl:hover label::before {
max-width: var(--bookmarkTextLenght);
padding-inline: 4px 3px;
opacity: 1;
}
.iBook {
padding: 0;
}
.iBook:not(.item) >* {
padding-inline: var(--contentPadding-box);
}
.iBook .bookmark-inner {
gap: 20px;
max-height: 300px;
padding-block-end: var(--contentPadding-box);
overflow-x: hidden;
overflow-y: scroll;
}
.iBook .loading {
gap: 8px;
}
.iBook .loading::after {
content: attr(data-text);
}
.book {
--thumbSize: 50px;
gap: 14px;
}
.book >.flex {
gap: 10px;
align-items: center;
}
.book .bm-thumb {
position: relative;
width: var(--thumbSize);
opacity: .8;
}
.book .bm-thumb a {
display: block;
position: inherit;
padding-top: var(--thumbnailRatio-box);
border-radius: var(--contentBd-radius);
background-color: var(--contentBg-alt);
overflow: hidden;
}
.book .bm-im {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-size: 10px;
line-height: 1.1;
}
.book .bm-title {
font: .95rem/1.3 var(--fontBody-alt);
}
.book .bm-title a {
display: -webkit-box;
-webkit-line-clamp: 3;
}
.book .bm-title a:hover, .book ~ .more:hover span:not(.fontSm) {
text-decoration: underline;
}
.book .bm-delete {
padding: 5px;
padding-inline-end: 0;
cursor: pointer;
}
.book ~ .more span:not(.fontSm) {
margin-inline-end: 6px;
color: var(--themeLink);
}
.book.all {
--gap: 16px;
--thumbSize: 60px;
gap: var(--gap);
}
.book.all >.flex {
gap: 15px;
width: calc((100% / 2) - (var(--gap) / 2));
padding: 15px;
border: 1px solid var(--contentBd-color);
border-radius: var(--contentBd-radius);
background-color: var(--contentBg);
transition: border-color var(--tDuration), box-shadow var(--tDuration);
overflow: hidden;
}
.book.all >.flex:hover {
border-color: var(--themeLink);
box-shadow: 0 0 0 .5px var(--themeLink) inset, 0 25px 60px -20px rgb(0 0 0 / 20%);
}
.book.all .bm-thumb {
opacity: 1;
}
.book.all .bm-title {
font-size: 1.15rem;
}
.book.all .bm-delete {
padding: 8px;
}
@media screen and (max-width:640px) {
.book.all {
--gap: 14px;
}
.book.all >.flex {
width: 100%;
}
}
@media screen and (max-width:500px) {
.book.all >.flex {
gap: 12px;
padding: 10px;
}
.book.all .bm-title {
font-size: 1.05rem;
}
}
/* mainN */
.mainL {
position: relative;
width: var(--sideWidth-collapse);
z-index: 1;
transition: width var(--tDuration);
}
.mainR {
width: calc(100% - var(--sideWidth-collapse));
}
.leftW {
height: var(--vHeight);
color: var(--sideC);
background-color: var(--sideBg);
transition: height var(--tDuration);
}
.leftC {
padding-inline: calc((var(--sideWidth) - var(--iconWidth)) /2);
}
.leftN {
width: 100%;
height: 100%;
padding-block: var(--contentPadding-box) var(--closeHeight-phone);
background-color: inherit;
}
.leftP {
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding-block: 18px;
background-color: inherit;
}
/* mainN: menu */
.leftNav {
--padding: 10px;
}
.leftNav:not(.r) .a::before {
right: calc(var(--contentPadding-minus) + 3px);
border-radius: 2px 0 0 2px;
}
.leftNav.r .a::before {
left: calc(var(--contentPadding-minus) + 3px);
border-radius: 0 2px 2px 0;
}
.leftNav .a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
border-inline-start: 2px solid var(--themeLink);
opacity: 0;
visibility: hidden;
transition: var(--tShowHide);
}
.leftNav .a {
align-items: center;
position: relative;
min-width: var(--iconWidth);
padding-block: var(--padding);
filter: none;
}
.leftNav .a svg {
flex-shrink: 0;
}
.leftNav .a svg.r {
width: 14px;
height: 14px;
margin-inline-start: auto;
}
.leftNav .a >svg {
margin-inline-start: calc((var(--iconWidth) - 20px) / 2);
margin-inline-end: calc(((var(--iconWidth) - 20px) / 2) + 10px - calc((var(--iconWidth) - 20px) / 2));
}
.leftNav .a >.text {
padding-inline-start: calc((var(--iconWidth) - 20px) / 2);
}
.leftNav .a:hover >svg, .leftNav .a.home >svg {
color: var(--themeLink);
}
.leftNav .a:hover::before, .leftNav details[open] .a::before, .leftNav .a.home::before {
opacity: .8;
visibility: visible;
}
.leftNav .br::after {
content: '';
display: block;
margin-block: 12px;
border-bottom: var(--sideBd-line) solid var(--sideBd-color);
}
.leftNav details[open] svg.r {
transform: rotate(180deg);
}
.leftNav details .n {
padding-block: 5px 10px;
padding-inline-start: calc(var(--iconWidth) - 15px);
overflow: hidden;
}
.leftNav details .n li {
position: relative;
padding-inline-start: calc((var(--iconWidth) - 20px) + 10px);
}
.leftNav details .n li >* {
display: inline-block;
padding-block: 4px;
}
.leftNav details .n li::after {
content: '';
position: absolute;
top: -85px;
width: 14px;
height: 100px;
border-inline-start: 1.5px solid var(--sideBd-color);
border-block-end: 1.5px solid var(--sideBd-color);
}
.leftNav:not(.r) details .n li::after {
left: 0;
border-radius: 0 0 0 8px;
}
.leftNav.r details .n li::after {
right: 0;
border-radius: 0 0 8px 0;
}
.leftNav details .n li.m::before {
content: attr(data-text);
display: block;
margin-block: 15px 8px;
font-size: smaller;
opacity: .6;
}
.leftNav details .n li.m::after {
height: 124px;
}
.addNav li:not(:last-child)::after {
content: '\00B7';
margin-inline: 8px;
}
/* mainC */
.mainAd:not(.no-items) {
margin-block-end: var(--contentSpace);
}
.mainC {
padding-block-end: var(--contentSpace);
}
.mainC >.maxC {
margin-block-start: var(--contentPadding);
}
.mainB {
justify-content: center;
gap: var(--contentSpace);
}
.mainB .blogB {
width: calc(100% - (var(--sidebarWidth) + var(--contentSpace)));
transition: width var(--tDuration), max-width var(--tDuration);
}
.mainB .blogB.item {
max-width: var(--contentPost-maxWidth);
}
.mainB .blogB.static {
max-width: var(--contentPage-maxWidth);
}
.mainB .sideB {
gap: var(--contentSpace);
width: var(--sidebarWidth);
max-width: 500px;
}
.mainB .sideSticky {
position: -webkit-sticky;
position: sticky;
top: calc(var(--headerHeight) + 10px);
}
.mainB .sideB .section:not(.slider) {
gap: 0;
}
.mainB .sideB .widget:not(:first-child) {
margin-top: var(--contentSpace);
}
.mainB .sideB #HTML11 {
margin-top: 0;
}
.mainB .section:not(.slider) {
gap: var(--contentSpace);
}
.mainB.full :is(.blogB, .sideB) {
width: 100%;
}
.blogB >.section:not(:last-child) {
margin-bottom: var(--contentSpace);
}
/* mainM */
.mainM {
display: none;
position: fixed;
left: var(--mobileMargin);
bottom: var(--mobileMargin);
right: var(--mobileMargin);
border-top: var(--mobileBd-line) solid var(--mobileBd-color);
border-radius: var(--mobileBd-radiusTL) var(--mobileBd-radiusTR) var(--mobileBd-radiusBR) var(--mobileBd-radiusBL);
color: var(--mobileC);
background-color: var(--mobileBg);
box-shadow: 0 -10px 25px -5px rgb(0 0 0 / 10%);
z-index: 1;
}
.mobileM {
height: var(--mobileHeight);
padding-inline: var(--contentPadding);
font-size: 9px;
}
.mobileM >* {
justify-content: center;
width: 20%;
}
.mobileM *[data-text] {
justify-content: center;
min-width: 40px;
max-width: 100px;
min-height: 35px;
}
.mobileM *[data-text]::after {
content: attr(data-text);
display: block;
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobileM.index .search:nth-last-child(2) {
order: 3;
}
/* mainF */
.mainF::before {
content: '';
position: absolute;
top: 0;
left: var(--contentPadding);
right: var(--contentPadding);
border-block-start: var(--footerBd-line) solid var(--footerBd-color);
}
.mainF .credits {
align-items: center;
gap: 10px;
}
.mainF .HTML {
margin-inline-end: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.mainF .credit, .mainF .credit .e {
display: inline;
}
.mainF .credit .e::before {
content: '\00A9';
}
.mainF .socials {
position: relative;
margin-inline-end: -6px;
}
.mainF .socials div.ic {
opacity: .5;
}
.mainF .socials .ic {
width: 30px;
height: 30px;
}
/* Widget: default */
.widget .title {
position: relative;
margin-block: 0 var(--widgetTitle-space);
font-weight: var(--widgetTitle-fontWg);
font-size: var(--widgetTitle-font);
}
.widget .title.s {
font-size: small;
}
.widget .title::after {
content: '';
display: var(--widgetTitle-afterD);
vertical-align: middle;
width: var(--widgetTitle-afterWd);
margin-inline-start: 8px;
border-bottom: 1px solid var(--widgetTitle-afterC);
opacity: 1;
}
.no-items {
display: none;
}
/* Widget: Header */
.Header {
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.Header img {
max-width: var(--headerLogo-maxWidth);
max-height: var(--headerLogo-maxHeight);
}
.Header a:hover {
opacity: 1;
}
.headN {
display: block;
margin: 0;
font-weight: var(--header-fontWg);
font-size: var(--header-font);
}
.headt {
display: block;
}
.headt::after {
content: var(--headerText-after);
display: inline-block;
font-weight: 400;
font-size: 11px;
line-height: 14px;
opacity: .8;
}
/* Widget: BlogSearch */
.BlogSearch form {
position: relative;
margin-inline: -10px;
border-radius: var(--contentBd-radiusA);
background-color: transparent;
overflow: hidden;
}
.BlogSearch input[type=search] {
display: block;
width: 320px;
height: 42px;
padding-inline: 40px;
border: 0;
transition: margin var(--tDuration), padding-inline var(--tDuration), background var(--tDuration);
}
.BlogSearch .b {
position: absolute;
top: 0;
bottom: 0;
min-width: 40px;
padding: 0;
border: 0;
transition: var(--tShowHide);
}
.BlogSearch .ba:not(.r), .BlogSearch .bu.r {
left: 0;
}
.BlogSearch .ba.r, .BlogSearch .bu:not(.r) {
right: 0;
}
.BlogSearch .bu::before {
content: '\2715';
content: attr(data-text);
padding-inline-end: 15px;
font-size: 12px;
}
.BlogSearch:focus-within .b.bu {
opacity: 1;
visibility: visible;
color: inherit;
}
.BlogSearch:focus-within input, .BlogSearch:hover input {
background-color: var(--contentBg-sec);
}
/* Widget: Profile */
.proP:checked ~ .profileIcon .fc::after, .proP:checked ~ .profilePop {
opacity: 1;
visibility: visible;
}
.proT:not(:checked) ~ .t.clamp {
display: -webkit-box;
}
.proT:not(:checked) ~ label {
display: inline-block;
}
.proT:not(:checked) ~ .proTeam >*:not(.s) {
display: none;
}
.profileIcon .a span.p::before, .Profile .location::after, .profilePop label::before {
content: attr(data-text);
}
.profileIcon .a {
align-items: center;
}
.profileIcon .a span.p {
margin-inline-start: 6px;
}
.profileIcon .n {
max-width: calc(100% - 45px);
}
.profileIcon .avatar {
margin-inline-start: calc((var(--iconWidth) - 20px) / 2 - 4px);
margin-inline-end: calc(((var(--iconWidth) - 20px) / 2) + 6px);
}
.profileIcon.team .avatar, .profileIcon.team .avi {
min-width: 32px;
min-height: 32px;
margin-inline-start: calc((var(--iconWidth) - 20px) / 2 - 6px);
margin-inline-end: 0;
border: 2px solid var(--sideBg);
}
.profileIcon.team .avatar:not(:first-child) {
margin-inline-start: -8px;
}
.profileIcon.team .avi {
display: none;
border-width: 0;
}
.profilePop {
position: absolute;
bottom: var(--contentPadding);
width: 220px;
min-height: 160px;
max-height: 220px;
border: var(--contentBd-line) solid var(--contentBd-color);
border-radius: var(--contentBd-radiusA);
background-color: var(--contentBg);
box-shadow: 0 25px 60px -20px rgb(0 0 0 / 20%);
transition: var(--tShowHide);
z-index: 1;
overflow: hidden;
}
.profilePop:not(.r) {
left: var(--contentPadding);
}
.profilePop.r {
right: var(--contentPadding);
}
.profilePop.team {
--padding: 15px;
--padding-minus: -15px;
padding: var(--padding);
}
.profilePop .h {
gap: 10px;
padding: 15px;
}
.profilePop .h .n {
width: calc(100% - (28px + 10px));
}
.profilePop .d {
padding: 0 15px 15px;
}
.profilePop .d a {
text-decoration: underline;
}
.profilePop label {
display: none;
padding-block-start: 5px;
color: var(--themeLink);
}
.proTeam {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.proTeam .team >* {
--gap: 10px;
align-items: center;
gap: var(--gap);
position: relative;
width: calc(100% + (var(--padding) * 2));
margin-inline: var(--padding-minus);
padding: 5px var(--padding);
}
.proTeam .team >*::after {
content: attr(data-text);
flex: 1 0 calc(100% - (35px + var(--gap)));
/*white-space:nowrap;*/
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.proTeam .team .avatar {
width: 35px;
height: 35px;
}
/* Widget: Sliders */
.slideB {
border-radius: var(--sliderBd-radius);
overflow: hidden;
}
.slideB:hover .slideI svg {
opacity: 1;
visibility: visible;
}
.slideB:hover .slideI svg .pause {
display: block;
}
.slideB:hover .slideI svg .play, .slideI svg .pause {
display: none;
}
.slideB:hover .slider, .slideB:hover .slideI .i {
animation-play-state: paused;
}
.slideB a:hover{
filter:none;color:red;
}
.slideB span.cap:hover {
color:white;
}
.slider.no-items ~ .slideI {
display: none;
}
.slideI {
--height: 12px;
--dotHeight: 4px;
gap: 5px;
position: relative;
height: var(--height);
margin-block: 5px calc(var(--contentSpace) - (var(--height) - var(--dotHeight)));
}
.slideI .i {
width: var(--dotHeight);
height: var(--dotHeight);
border-radius: 10px;
background-color: rgb(0 0 0 / 15%);
transition: width var(--tDuration), background-color var(--tDuration);
}
.slideI:not(.r) svg {
right: 0;
}
.slideI.r svg {
left: 0;
}
.slideI svg {
position: absolute;
top: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--tDuration) .4s, visibility var(--tDuration) .4s;
}
.slideI .i:nth-child(1) {
animation: bullet 16.4s ease 0ms infinite;
}
.slideI .i:nth-child(2) {
animation: bullet 16.4s ease 4100ms infinite;
}
.slideI .i:nth-child(3) {
animation: bullet 16.4s ease 8200ms infinite;
}
.slideI .i:nth-child(4) {
animation: bullet 16.4s ease 12300ms infinite;
}
.slideI .i:nth-last-child(){
animation: bullet 16.4s ease 16300ms infinite;
}
.slider {
position: relative;
width: 400%;
transition: all 800ms cubic-bezier(.770, 0.0, .175, 1.0);
transition-timing-function: cubic-bezier(.770, 0.0, .175, 1.0);
animation: slide 16.4s cubic-bezier(.770, 0.0, .175, 1.0) infinite;
}
.slider >* {
flex-shrink: 0;
width: calc(100% / 4);
}
.slider .item {
position: relative;
border-radius: var(--sliderBd-radius);
overflow: hidden;
}
.slider .img {
display: block;
padding-top: var(--sliderRatio);
color: #d9e2f0;
background-color: var(--contentBg-alt);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.slider .cap {
display: block;
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
padding-block-start: 40px;
background-image: linear-gradient(0deg, rgb(45 49 56 / 90%) 0%, rgb(45 49 56 / 50%) 60%, rgb(45 49 56 / 0%) 100%);
font-family: var(--fontBody-alt);
}
/* Widget: FeaturedPost */
.itemP.featured article {
--gap: 20px;
align-items: center;
gap: var(--gap);
}
.itemP.featured article .pI {
width: var(--thumbnailSize);
}
.itemP.featured article .pC {
width: calc(100% - (var(--gap) + var(--thumbnailSize)));
}
/* Widget: PopularPost */
.itemP.popular {
--counter: 30px;
gap: 18px;
counter-reset: popular;
}
.itemP.popular article.most {
gap: 18px;
}
.itemP.popular .pH.info .label:not(:first-child)::before {
content: '\00B7';
margin-inline: 8px 6px;
}
.itemP.popular .pT .name {
font-size: var(--postTitle-fontItems);
}
.itemP.popular .pS {
display: block;
}
.itemP.popular .pS .snippet {
-webkit-line-clamp: 2;
}
.itemP.popular article .pC::before {
content: '0' counter(popular);
counter-increment: popular;
flex: 0 0 var(--counter);
color: var(--themeC-alt);
font: 700 1.1rem var(--fontBody-alt);
opacity: .6;
}
.itemP.popular article:not(:nth-child(-n+9)) .pC::before {
content: counter(popular);
}
.itemP.popular article .pB {
flex-grow: 1;
width: calc(100% - var(--counter));
}
/* Widget: Label */
.itemL .labi:checked ~ label::before {
content: attr(data-hide);
}
.itemL .labi:checked ~ label::after {
display: none;
}
.itemL .labi:not(:checked) ~ .lab >*:is(.s) {
display: none;
}
.itemL .lab {
--gap: 10px;
gap: var(--gap);
}
.itemL .lab >* {
max-width: 100%;
}
.itemL .lab.list >* {
width: calc((100% / 2) - (var(--gap) / 2));
}
.itemL .link {
align-items: center;
gap: 8px;
width: 100%;
padding: 10px;
border: 1px solid var(--contentBg-sec);
border-radius: var(--contentBd-radius);
background-color: var(--contentBg-sec);
line-height: 18px;
}
.itemL a.link:is(.c, .noBg) {
border-color: var(--contentBd-color);
}
.itemL .link:is(.c, .noBg) {
background-color: transparent;
}
.itemL a.link:hover, .itemL div.link {
border-color: var(--themeLink);
box-shadow: 0 0 0 .5px var(--themeLink) inset;
filter: none;
}
.itemL a.link:hover .count, .itemL div.link .count {
color: var(--themeLink);
}
.itemL a.link:hover .count svg, .itemL div.link .count svg {
stroke: none;
fill: currentColor;
opacity: 1;
}
.itemL .count.flexIn {
gap: 4px;
}
.itemL .count::before {
content: attr(data-text);
}
.itemL label {
gap: 6px;
margin-top: 10px;
padding-block: 8px;
}
.itemL label::before {
content: attr(data-show);
color: var(--themeLink);
}
.itemL label::after {
content: attr(data-length);
font-size: smaller;
opacity: .8;
}
/* Widget: RelatedPost */
.itemR {
--cgap: 20px;
gap: 30px var(--cgap);
}
.itemR article {
--gap: 20px;
align-items: flex-start;
gap: var(--gap);
}
.itemR .pI, .itemR .pC {
width: 100%;
}
.itemR .pI .image {
display: block;
position: inherit;
padding-top: var(--thumbnailRatio);
}
.itemR .pI .mi {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.itemR .pH.info .label:not(:first-child)::before {
content: '\00B7';
margin-inline: 8px;
}
.itemR .pT .clamp {
display: -webkit-box;
}
.itemR .pS .snippet {
-webkit-line-clamp: 2;
}
.itemR:not(.type-2, .type-3, .type-4) {
--colGap: 40px;
--thumbnailSize: 65px;
column-gap: var(--colGap);
}
.itemR:not(.type-2, .type-3, .type-4) >* {
width: calc((100% / 2) - (var(--colGap) / 2));
}
.itemR:not(.type-2, .type-3, .type-4) article {
flex-direction: row-reverse;
}
.itemR:not(.type-2, .type-3, .type-4) .pC {
width: calc(100% - (var(--gap) + var(--thumbnailSize)));
}
.itemR:not(.type-2, .type-3, .type-4) .pI {
width: var(--thumbnailSize);
}
.itemR:not(.type-2, .type-3, .type-4) .pI .image {
padding-top: var(--thumbnailRatio-box);
}
.itemR:is(.type-2, .type-3, .type-4) article {
width: calc((100% / 3) - (var(--cgap) * 2/3));
}
.itemR:is(.type-2, .type-3, .type-4) .pT .name:not(.item) {
--postTitle-fontItems: 1.1em;
}
/* Widget: ContactForm */
.formB {
max-width: 480px;
font-size: 1rem;
}
.formB form {
gap: 20px;
}
form .area {
--paddingB: 14px;
--paddingI: 16px;
display: block;
position: relative;
}
form .area .n {
display: block;
position: absolute;
top: var(--paddingB);
padding-inline: 6px;
font-size: 1rem;
line-height: 1.5;
opacity: .8;
transition: top var(--tDuration), padding var(--tDuration), var(--tShowHide), font-size var(--tDuration), background var(--tDuration);
}
.nB:not(.r) form .area .n {
left: calc(var(--paddingI) - 6px);
}
.nB.r form .area .n {
right: calc(var(--paddingI) - 6px);
}
form .area .sup {
display: block;
padding-inline: var(--paddingI);
padding-block-start: 4px;
font-size: small;
line-height: 1.5;
}
form input[type=email]:not([data-filled=true]):focus ~ .sup, form textarea:not([data-filled=true]):focus ~ .sup {
color: #d32f2f;
}
form input:is([type=text], [type=email]), form textarea {
--themeLink: currentColor;
display: block;
width: 100%;
padding: var(--paddingB) var(--paddingI);
border: var(--inputBd-line) solid var(--inputBd-color);
border-radius: var(--inputBd-radius);
color: var(--inputC);
background-color: var(--themeBg);
font: 1rem/1.5 var(--fontBody);
transition: border-color var(--tDuration), box-shadow var(--tDuration), min-height var(--tDuration);
}
form input:is([type=text][data-filled=true], [type=email][data-filled=true]), form textarea[data-filled=true], form input:is([type=text], [type=email]):focus, form textarea:focus {
border-color: var(--themeLink);
box-shadow: 0 0 0 .5px var(--themeLink) inset;
}
form input:is([type=text][data-filled=true], [type=email][data-filled=true]) ~ .n, form textarea[data-filled=true] ~ .n, form .area:focus-within .n {
top: -10px;
background-color: var(--themeBg);
font-size: small;
opacity: 1;
}
form textarea {
min-height: 100px;
}
form textarea:focus, form textarea[data-filled=true] {
min-height: 200px;
}
/* Widget: ToC */
.tocP {
position: fixed;
top: var(--headerHeight);
width: var(--tocWidth);
height: calc(var(--vHeight) - var(--headerHeight));
margin-inline-end: var(--tocWidth-minus);
color: var(--tocC);
background-color: var(--tocBg);
box-shadow: 0 5px 30px 0 rgb(0 0 0 / 5%);
opacity: 0;
visibility: hidden;
transition: margin var(--tDuration), var(--tShowHide);
z-index: 5;
}
.tocP:not(.r), .tocP.r::before {
right: 0;
}
.tocP.r, .tocP:not(.r)::before {
left: 0;
}
.tocP::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
border-inline-start: var(--tocBd-line) solid var(--tocBd-color);
z-index: 2;
}
.tocIn {
position: relative;
height: 100%;
background-color: inherit;
}
.tocIn label {
align-items: center;
gap: 6px;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
padding: 10px 20px;
background-color: inherit;
z-index: 1;
}
.tocIn label::after {
content: var(--tableToc);
}
.tocC {
height: inherit;
padding-block: 60px var(--contentPadding-box);
padding-inline: var(--contentPadding-box);
line-height: 1.3;
overflow-x: hidden;
overflow-y: scroll;
}
.tocC a {
/*display:-webkit-box;*/
display: inline;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tocC ol {
overflow: hidden;
}
.tocC ol ol {
margin-top: 3px;
padding-top: 5px;
}
.tocC ol ol ol ol {
display: none;
}
.tocC >ol >li:not(:last-child) {
margin-bottom: 15px;
}
.tocC li {
position: relative;
padding-inline-start: 8px;
}
.tocC li li {
padding-inline-start: 17px;
}
.tocC li li:not(:last-child) {
margin-bottom: 5px;
}
.tocC li li::before {
content: '';
position: absolute;
top: -389px;
min-width: 12px;
height: 400px;
border: 1.5px solid var(--themeBd-color);
border-block-start: 0;
border-inline-end: 0;
}
.tocC:not(.r) li li::before {
left: 1px;
border-radius: 0 0 0 8px;
}
.tocC.r li li::before {
right: 1px;
border-radius: 0 0 8px 0;
}
.tocB span {
position: fixed;
top: calc(var(--headerHeight) + 40px);
width: 45px;
height: 40px;
background-color: var(--tocBg);
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 10%);
opacity: 0;
visibility: hidden;
transition: var(--tShowHide);
z-index: 1;
}
.tocB:not(.r) span {
right: 0;
border-radius: 20px 0 0 20px;
}
.tocB.r span {
left: 0;
border-radius: 0 20px 20px 0;
}
.tocI:not(:checked) ~ .tocB span, .tocI:checked ~ .tocB.fc::after {
opacity: 1;
visibility: visible;
}
.tocI:checked ~ .tocP {
margin-inline-end: 0;
opacity: 1;
visibility: visible;
}
/* Widget: Blog */
.blogP.flex {
--gap: 20px;
gap: 40px var(--gap);
}
.blogP.flex >article {
gap: 20px;
width: calc((100% / 3) - (var(--gap) * 2/3));
}
.blogP.flex >article, .itemP.featured article {
padding: var(--postPadding);
border: var(--postBd-line) solid var(--postBd-color);
border-radius: var(--postBd-radius);
color: var(--postC);
background-color: var(--postBg);
box-shadow: 0 8px 24px -4px var(--postBs-color);
transition: box-shadow var(--tDuration);
overflow: hidden;
}
.blogP.flex >article:hover, .itemP.featured article:hover {
box-shadow: 0 20px 60px -20px var(--postBs-hoverColor);
}
.blogP.flex >article .pC, .itemP.featured article .pC {
padding: var(--postPadding-content);
padding-block-start: 0;
}
article.shop .prices {
margin-block-start: .5em;
line-height: 1.2;
}
article.shop .prices i {
font-style: normal;
}
article.shop .prices i.strike {
opacity: .8;
font-size: smaller;
}
article.shop .prices i:not(.strike) {
display: block;
color: var(--themeLink);
font-weight: 600;
font-size: 1.1em;
}
article:not(.sponsor):hover .pF .jump {
opacity: 1;
}
/* Widget: Blog - title + breadcrumbs */
.blogT {
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--widgetTitle-space);
}
.blogT.home .title {
margin: 0;
}
.blogT.item {
justify-content: flex-start;
}
.blogT.item .tab .n >* {
overflow: hidden;
text-overflow: ellipsis;
}
.blogT.item .a::before {
display: none;
}
.blogT.item .tab:not(:first-child)::before, .blogT:not(.item) .n:not(.s)::before {
content: var(--breadcrumbs);
flex-shrink: 0;
margin-inline: 8px;
}
.blogT .tab {
align-items: baseline;
overflow: hidden;
}
.blogT .a {
flex-shrink: 0;
opacity: .8;
}
.blogT .a::before {
content: attr(data-text);
}
.blogT .n.name::after {
content: attr(data-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blogT .n.s {
padding-inline-start: 5px;
}
/* Widget: Blog - pagination */
.blogN, .blogPg {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin-block: calc(var(--contentSpace) * 1.5) 0;
}
.blogN.n {
justify-content: center;
}
.blogN >* {
font-size: inherit;
}
.blogN >*::after {
content: attr(data-text);
}
.blogN .m {
cursor: not-allowed;
color: var(--themeC-alt);
background-color: var(--contentBg-sec);
}
.blogN .np {
flex-direction: row-reverse;
}
.blogN .np::after {
content: var(--pageNext);
}
.blogN .pp {
/*align-self:center;*/
margin-inline: -2px auto;
}
.blogN .pp::after {
content: var(--pagePrev);
}
.blogN .pp svg, .blogN .np svg {
width: 14px;
height: 14px;
}
.blogN svg.line {
stroke-width: 1.5;
}
.blogN .j {
margin-inline: auto;
}
.blogN .j:not(.m) {
cursor: pointer;
}
.blogN .j.n {
background: transparent;
}
/* Widget: Blog - product */
.shop .pPad {
margin-block: 15px;
}
.shop .pPric {
display: flex;
flex-direction: column;
margin-block-start: 30px;
color: var(--themeLink);
font-size: 1.8rem;
}
.shop .pPric i {
font-style: normal;
}
.shop .pPric .strike {
order: 2;
color: var(--themeC);
font-size: small;
opacity: .8;
}
.shop .pPric .price {
font-weight: 600;
line-height: 1.4;
}
.shop .pPric::before {
content: attr(data-text);
}
.shop .pPric::before, .shop .pInfo small {
display: block;
color: var(--themeC);
font-size: small;
opacity: .8;
}
.shop .pInfo {
font-size: 1rem;
}
.shop .pInfo:not(.o) {
--gap: 20px;
display: flex;
gap: var(--gap);
}
.shop .pInfo:not(.o) >* {
width: calc((100% / 2) - (var(--gap) / 2));
}
.shop .pMart {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-block: 15px;
}
.shop .pMart small {
width: 100%;
}
.shop .pMart a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 4px;
border: 1px solid var(--contentBd-color);
border-radius: 12px;
overflow: hidden;
}
/* Widget: Blog - post */
/* thumbnail and comment count */
.pI {
position: relative;
border-radius: var(--contentBd-radius);
background-color: var(--contentBg-alt);
overflow: hidden;
}
.pI .thumbnail {
display: block;
position: inherit;
padding-top: var(--thumbnailRatio);
}
.pI .thumbnail amp-img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
text-align: center;
transform: translate(-50%, -50%);
}
.pI.youtube:not(.noImage) .thumbnail::after {
content: '';
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 30%) url("data:image/svg+xml,") center / 24px no-repeat;
opacity: 0;
transition: opacity var(--tDuration), -webkit-backdrop-filter var(--tDuration), backdrop-filter var(--tDuration);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
}
.pI.youtube:not(.noImage):hover .thumbnail::after {
opacity: 1;
}
.pI.youtube img {
max-width: 100%;
max-height: none;
}
.pI .img {
position: absolute;
top: 50%;
left: 50%;
max-width: 110%;
max-height: 100%;
font-size: .7em;
text-align: center;
transform: translate(-50%, -50%);
}
.pI .img.null::before {
content: var(--noImage);
}
.pI .bar {
justify-content: flex-end;
flex-direction: row-reverse;
gap: 6px;
position: absolute;
top: 0;
padding: 8px;
font-size: .76em;
}
.pI .bar:not(.r) {
right: 0;
}
.pI .bar.r {
left: 0;
}
.pI .bar >* {
gap: 3px;
padding: 4px 5px;
border-radius: 12px;
color: #0e2045;
background-color: #fffdfc;
box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%);
}
.pI .bar >*:hover {
filter: none;
}
.pI .bar >*:not(.tag)::before {
content: attr(data-text);
text-indent: 2px;
opacity: .8;
}
.pI .bar >.discount {
background-color: #fff6bf;
}
.pI .bar >.discount::before {
opacity: 1;
}
/* head, time and label */
.time:not(.timeAgo)::before, .jump::before {
content: attr(data-text);
}
.pH .reading::before {
content: var(--readtimeBefore) ' ';
margin-inline: 5px;
}
.pH .reading::after {
content: ' ' var(--readtimeAfter);
}
.pH.info {
justify-content: flex-start;
align-items: baseline;
margin-block-end: 8px;
}
.pH.info .label::before {
opacity: .8;
}
.pH.info .label::before, .pH.info .label [data-text]::before {
content: attr(data-text);
}
.pH.info .label >span:not(:first-child)::before {
content: var(--breadcrumbs);
opacity: .8;
}
.pH.info .label [data-text] {
display: inline;
padding-block: 4px;
}
.pH.info .label a:hover {
text-decoration: underline;
}
.pH:not(.info) {
--gap: 8px;
--imgWidth: 28px;
--fontDate: inherit;
--fontDate-phone: .93em;
align-items: center;
gap: var(--gap);
margin-block: 20px 25px;
}
.pH:not(.info).tag {
margin-block-start: 25px;
}
.pH:not(.info) .avatar.im {
width: var(--imgWidth);
height: var(--imgWidth);
}
.pH:not(.info) .m {
display: inline-block;
line-height: 1.3;
}
.pH:not(.info) .m::after {
content: attr(data-text);
margin-inline-end: 5px;
}
.pH:not(.info) .date {
font-size: var(--fontDate);
white-space: nowrap;
}
.pH:not(.info) .time.update:not(.timeAgo)::before {
content: var(--latestUpdate) ' ' attr(data-text);
}
.pH .item {
width: calc(100% - (100px + var(--imgWidth)));
}
.pH .share {
gap: 10px;
max-width: 100px;
margin-inline-start: auto;
font-size: var(--fontDate);
}
.pH .share [aria-label=Share] {
gap: 7px;
flex-direction: row-reverse;
}
.pH .share [aria-label=Share]::before {
content: attr(data-text);
}
/* title */
.pT .name {
margin: 0;
}
.pT .name:not(.item) {
font: var(--postTitle-fontWg) var(--postTitle-fontItems)/1.3 var(--fontBody-alt);
}
.pT .item {
font: var(--postTitle-fontWg) var(--postTitle-font)/1.3 var(--fontBody-alt);
}
.pT a:hover {
text-decoration: underline;
}
/* snippet */
.pS .snippet {
margin-block: .75em .5em;
line-height: 1.5;
}
.pS:not(.noImage) .snippet {
display: -webkit-box;
}
/* description */
.pD {
margin-block: 15px 25px;
font: var(--postDescription-font)/1.4 var(--fontBody-alt);
}
/* foot */
.pF.items {
gap: 5px;
margin-block-start: auto;
padding-top: 5px;
}
.pF.items.shop {
display: none;
}
.pF.item {
gap: var(--contentSpace);
margin-top: var(--contentSpace);
}
.pF .jump {
margin-inline-start: auto;
}
.pF .jump:not(.sponsor) {
opacity: 0;
transition: var(--tShowHide);
}
.pF .jump:hover {
text-decoration: underline;
}
.pF .label {
gap: 10px;
}
.pF .label >*::before {
content: attr(aria-label);
}
.pF .label >*:hover {
text-decoration: underline;
}
.pF .labels .flex {
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.pF .labels .flex >* {
padding: 8px 14px;
border: 1px solid var(--contentBd-color);
border-radius: 20px;
}
.pF .labels .flex >*:not(label):hover {
border-color: var(--themeLink);
box-shadow: 0 0 0 .5px var(--themeLink) inset;
}
.pF .labels .flex >*:not(label)::before {
content: attr(aria-label);
}
.pF .labels .li:not(:checked) ~ .flex >*:not(.s), .pF .labels .li:checked ~ .flex label {
display: none;
}
.pF .labels .flex label {
padding-inline: 0;
border: 0;
}
.pF .labels .flex label::before {
content: attr(data-show);
}
/* share */
.shared {
position: fixed;
left: 0;
right: 0;
z-index: 10;
}
.shareB .popIn {
max-width: 480px;
}
.shareI {
gap: 30px;
}
.shareL {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-auto-rows: 50px;
grid-gap: 35px 15px;
padding-bottom: 30px;
}
.shareL >[data-text] {
position: relative;
}
.shareL >[data-text]::after {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
bottom: -18px;
text-align: center;
opacity: .8;
}
.shareL >[data-text] >* {
width: 50px;
height: 50px;
margin-inline: auto;
border-radius: 20px;
background-color: var(--contentBg-alt);
overflow: hidden;
}
.shareC::before {
content: var(--copyLink);
opacity: .8;
}
.shareC .copy {
--gap: 15px;
align-items: center;
gap: var(--gap);
margin-top: 15px;
padding-inline: 15px;
border: 1px solid var(--contentBd-color);
border-radius: var(--contentBd-radius);
overflow: hidden;
transition: border var(--tDuration), background var(--tDuration), box-shadow var(--tDuration);
}
.shareC label {
flex-shrink: 0;
padding: 10px 0;
color: var(--themeLink);
}
.shareC input {
flex-grow: 1;
padding: 16px 0;
border: 0;
outline: 0;
background-color: transparent;
opacity: .6;
}
.shareC input:focus, .shareC .copy:hover input {
opacity: 1;
}
/* writter */
.authors {
gap: 10px;
padding-block: var(--contentPadding);
border-block: 1px solid var(--contentBd-color);
background-color: var(--contentBg);
}
.authors .name {
width: calc(100% - (40px + 14px));
max-width: 400px;
}
.authors .m::before {
content: attr(data-write) ' ';
opacity: .8;
}
.authors .m::after {
content: attr(data-text);
font-weight: 500;
}
.authors .d {
margin-top: 4px;
}
.authors .namei:not(:checked) ~ .d label::before {
content: attr(data-text);
color: var(--themeLink);
}
.authors .namei:not(:checked) ~ .d .clamp {
display: -webkit-box;
-webkit-line-clamp: 1;
}
/* component */
.pE {
position: relative;
margin-top: 40px;
font: var(--postBody-font)/var(--lineHeight) var(--fontBody);
transition: font var(--tDuration);
}
/* head */
.pE h1, .pE h2, .pE h3, .pE h4, .pE h5, .pE h6 {
margin-top: 1em;
line-height: 1.3;
font-family: var(--fontBody-alt);
}
.pE h1:target, .pE h2:target, .pE h3:target, .pE h4:target, .pE h5:target, .pE h6:target {
margin-top: 0;
padding-top: var(--headerHeight);
}
.pE :is(h1, h2, h3, h4, h5, h6).h::before {
content: attr(data-text);
}
/* Paragraph */
.pE p {
margin-block: var(--lineSpacing);
}
.pRef {
font: 1rem/1.4 var(--fontBody-alt);
opacity: .8;
word-break: break-word;
}
.pRef ol, .pRef ul {
padding-inline-start: 30px;
}
.pIndent {
text-indent: 2.2em;
}
.pE:not(.r) .dropCap {
float: left;
margin-block-start: 5px;
margin-inline-end: 8px;
font: 3.4em/45px var(--fontBody-alt);
}
.pE.postBody p a.extL::after, .pE.postBody p a.extLink::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-inline-start: 5px;
background: url("data:image/svg+xml,") center / 16px no-repeat;
}
.pE hr {
margin-block: var(--postBreak);
border: 0;
font: 24px var(--fontCode);
}
.pE hr::before {
content: '\007E';
display: block;
letter-spacing: .6em;
text-indent: .6em;
text-align: center;
opacity: .8;
clear: both;
}
.pE hr.dot::before {
content: '\2027 \2027 \2027';
}
.pE hr.line::before {
content: '';
border-bottom: 1px solid var(--contentBd-color);
}
/* blockquote */
blockquote {
position: relative;
margin-inline: 0;
padding-block: 8px;
padding-inline-start: 20px;
border-inline-start: 1px solid var(--contentBd-color);
font-size: .97em;
line-height: 1.6;
opacity: .8;
}
blockquote.s-1, details.sp {
padding-block: 1.7em;
padding-inline-start: 40px;
border-block: 1px solid var(--contentBd-color);
border-inline-start: 0;
}
blockquote.s-1::before {
content: '\201D';
position: absolute;
top: 5px;
font-size: 60px;
line-height: normal;
opacity: .5;
}
.pE:not(.r) blockquote.s-1::before {
left: 4px;
}
.pE.r blockquote.s-1::before {
right: 4px;
}
/* img */
.pE img, .cm img {
display: inline-block;
border-radius: var(--postImageBd-radius);
}
/* scroll-img */
.psImg {
--gap: 14px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--gap);
margin-block: var(--lineSpacing);
}
.psImg img {
display: block;
}
.psImg >* {
width: calc((100% / 2) - (var(--gap) / 2));
position: relative;
}
.scImg >* {
width: calc((100% / 3) - (var(--gap) * 2/3));
}
.btImg label {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: .93rem;
font-family: var(--fontBody-alt);
border-radius: var(--postImageBd-radius);
color: #d9e2f0;
background-color: var(--themeBg-pop);
transition: var(--tShowHide);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
}
.hdImg .shImg {
width: 100%;
margin-block: 0;
}
.inImg:not(:checked) ~ .hdImg .shImg {
display: none;
}
.inImg:checked ~ .hdImg .btImg label {
opacity: 0;
visibility: hidden;
}
/* caption */
figure {
margin-inline: 0;
}
figcaption, .tr-caption, .psCaption {
display: block;
margin-top: 8px;
font-size: small;
line-height: 1.3;
opacity: .8;
}
/* ad */
.Blog ~ .LinkList {
display: none;
}
.pE .widget, .post .nAd >* {
margin-block: 40px;
}
/* Note */
.note {
position: relative;
padding: 18px 20px;
padding-inline-start: 40px;
border-radius: var(--contentBd-radius);
color: var(--noteC);
background-color: var(--noteBg);
font: 14px/1.4 var(--fontBody-alt);
overflow: hidden;
}
.note::after {
content: var(--noteAfter);
position: absolute;
top: 12px;
min-width: 15px;
text-align: center;
font-size: 1.5rem;
}
.note.wr {
color: var(--warnC);
background-color: var(--warnBg);
}
.note.wr::after {
content: var(--warnAfter);
}
.nB:not(.r) .note::after {
left: 14px;
}
.nB.r .note::after {
right: 14px;
}
/* list */
.step {
counter-reset: num;
line-height: 1.6;
}
.step >li {
position: relative;
counter-increment: num;
padding-inline-start: 45px;
}
.step >li:not(:last-child) {
padding-bottom: 15px;
}
.step >li::before {
content: counter(num) '.';
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
width: 30px;
height: 30px;
border: 1px solid var(--stepC);
border-radius: 50%;
color: currentColor;
font: small var(--fontBody-alt);
transition: background var(--tDuration), color var(--tDuration);
}
.pE:not(.r) .step >li::before {
left: 0;
}
.pE.r .step >li::before {
right: 0;
}
.step >li:hover::before {
background-color: var(--stepC);
color: var(--stepHover);
}
.step >li::after {
content: '';
position: absolute;
top: calc(30px + 8px);
bottom: 8px;
border-inline-start: 1px solid var(--stepC);
}
.pE:not(.r) .step >li::after {
left: calc(30px / 2);
}
.pE.r .step >li::after {
right: calc(30px / 2);
}
.step img {
margin-top: 1.2em;
}
/* list - pros, cons */
.pros, .cons {
margin-block: 5px 15px;
padding-inline-start: 10px;
font-size: 1.02rem;
line-height: 1.5;
}
.pros li, .cons li {
margin-bottom: 10px;
padding-inline-start: 10px;
}
.pros li::marker {
content: '\002B';
}
.cons li::marker {
content: '\2212';
}
/* related */
.pRelate {
margin-block: 2.5em;
padding-block: 1.7em;
border-block: var(--contentBd-line) solid var(--contentBd-color);
font: 14px/1.4 var(--fontBody-alt);
}
.pRelate b {
font-weight: 400;
opacity: .8;
}
.pRelate ul, .pRelate ol {
margin-block: 10px 0;
padding-inline-start: 20px;
}
.pRelate li {
padding-block: 2px;
}
.pRelate a:hover {
text-decoration: underline;
}
/* table */
.table {
margin-block: 1em;
padding-block-end: 4px;
overflow-y: hidden;
overflow-x: auto;
scroll-behavior: smooth;
}
table {
margin-inline-end: auto;
font: 14px/1.4 var(--fontBody-alt);
}
table:not(.tr-caption-container) {
border: 1px solid var(--contentBd-color);
border-radius: var(--contentBd-radius);
overflow: hidden;
}
table:not(.tr-caption-container) td {
padding: 14px;
}
table:not(.tr-caption-container) tr:not(:last-child) td, table th {
border-bottom: 1px solid var(--contentBd-color);
}
table th {
padding: 15px 14px;
font-weight: 500;
text-align: inherit;
}
table th:not(:last-child), table:not(.tr-caption-container) td:not(:last-child) {
border-inline-end: 1px solid var(--contentBd-color);
}
.table.w90 table:not(.tr-caption-container) {
min-width: 90%;
}
.table.w100 table:not(.tr-caption-container) {
min-width: 100%;
}
.table.noLine table th:not(:last-child), .table.noLine table:not(.tr-caption-container) td:not(:last-child) {
border-inline-color: transparent;
}
.table.withBg table:not(.tr-caption-container) tbody tr:nth-child(2n+1), .table.hoverBg table:not(.tr-caption-container) tbody tr:hover {
background-color: var(--tableBg-color);
}
/* toc */
details.sp {
padding: 1.5em 1.25em;
border-color: var(--themeLink);
font-size: .96em;
}
details.sp summary {
display: flex;
justify-content: space-between;
align-items: baseline;
column-gap: 10px;
line-height: 1.4;
}
details.sp summary::after {
content: '\276F';
flex-shrink: 0;
color: var(--themeLink);
font-size: small;
transform: rotate(90deg);
cursor: pointer;
}
details.sp[open] summary::after {
transform: rotate(-90deg);
}
details.toc .toC {
margin-top: 1em;
}
details.toc a:hover {
text-decoration: underline;
}
details.toc a {
/*display:-webkit-box;*/
display: inline;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: inherit;
}
details.toc ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: toc;
overflow: hidden;
}
details.toc ol ol {
padding-top: 5px;
}
details.toc ol ol ol::before {
content: '';
position: absolute;
top: 0;
width: 15px;
height: 100%;
border-inline-start: 1.5px solid var(--contentBd-color);
}
details.toc ol ol ol ol {
display: none;
}
details.toc li {
position: relative;
padding-inline-start: 28px;
}
details.toc li::before {
content: counters(toc,'.')'. ';
counter-increment: toc;
position: absolute;
top: 0;
min-width: 24px;
font-size: small;
line-height: 1.8;
text-align: end;
opacity: .8;
}
details.toc li li {
padding-inline-start: 17px;
}
details.toc li li::before {
content: '';
top: -85px;
min-width: 12px;
height: 100px;
border: 1.5px solid var(--themeBd-color);
border-block-start: 0;
border-inline-end: 0;
}
.pE:not(.r) details.toc li::before {
left: 0;
border-radius: 0 0 0 8px;
}
.pE.r details.toc li::before {
right: 0;
border-radius: 0 0 8px 0;
}
.pE:not(.r) details.toc ol ol ol::before {
left: 0;
}
.pE.r details.toc ol ol ol::before {
right: 0;
}
/* accordion */
.showH {
margin-block: 1.7em;
font: .98em/1.6 var(--fontBody);
}
details.ac {
padding: 1.5em 1.25em;
border-bottom: var(--contentBd-line) solid var(--contentBd-color);
}
details.ac:first-child {
border-top: var(--contentBd-line) solid var(--contentBd-color);
}
details.ac summary {
display: flex;
align-items: baseline;
justify-content: space-between;
transition: color var(--tDuration);
}
details.ac summary::after {
content: '\276F';
flex-shrink: 0;
display: inline;
font-size: small;
transform: rotate(90deg);
cursor: pointer;
}
details.ac[open] summary {
color: var(--themeLink);
}
details.ac:not(.alt)[open] summary::after {
transform: rotate(-90deg);
}
details.ac.alt summary::after {
content: '\002B';
font-size: 1.25em;
line-height: 20px;
transform: none;
}
details.ac.alt[open] summary::after {
content: '\2212';
}
details.ac .aC {
margin-block: 1em;
}
details.ac .aC p:first-child {
margin-block-start: 0;
}
/* youtube-fullpage */
.videoYt {
position: relative;
padding-bottom: 56.25%;
border-radius: var(--contentBd-radius);
overflow: hidden;
}
.videoYt iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
}
/* youtube-lazy */
.lazyYt {
position: relative;
padding-top: 56.25%;
border-radius: var(--contentBd-radius);
overflow: hidden;
}
.lazyYt img {
top: -16.84%;
left: 0;
width: 100%;
border: 0;
border-radius: 0;
opacity: .95;
z-index: -1;
}
.lazyYt img:hover {
transform: none;
box-shadow: none;
}
.lazyYt img, .lazyYt iframe, .lazyYt .play {
position: absolute;
}
.lazyYt iframe {
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.lazyYt .play {
display: block;
width: 70px;
height: 70px;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
transition: all .5s ease;
}
.lazyYt .play svg {
width: inherit;
height: inherit;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-width: 8;
}
.lazyYt .play .c {
stroke: rgba(255,255,255,.85);
stroke-dasharray: 650;
stroke-dashoffset: 650;
transition: all .4s ease-in-out;
opacity: .3;
}
.lazyYt .play .t {
stroke: rgba(255,255,255,.75);
stroke-dasharray: 240;
stroke-dashoffset: 480;
transition: all .6s ease-in-out;
transform: translateY(0);
}
.lazyYt .play:hover .t {
animation: nudge .6s ease-in-out;
-webkit-animation: nudge .6s ease-in-out;
}
.lazyYt .play:hover .t, .lazyYt .play:hover .c {
stroke-dashoffset: 0;
opacity: .9;
stroke: var(--themeLink);
}
.nAMP .lazyYt {
display: none;
}
/* button */
.pE .button {
margin-block: .4em;
}
.pE .btnF .button {
margin: 0;
}
/* button-download */
.dlBox {
display: flex;
align-items: center;
max-width: 500px;
margin-block: 1.6em;
padding: .8em;
border: 1px solid var(--contentBd-color);
border-radius: var(--contentBd-radius);
font: 14px var(--fontBody-alt);
transition: box-shadow var(--tDuration), border-color var(--tDuration);
}
.dlBox:hover {
box-shadow: 0 15px 50px -20px rgb(0 0 0 / 20%);
}
.dlBox .fT {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 42px;
height: 42px;
background-color: rgb(152 155 159 / 20%);
border-radius: var(--contentBd-radius);
}
.dlBox .fT::before {
content: attr(data-text);
opacity: .8;
}
.dlBox .fT.lazy {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.dlBox .fT.lazy::before {
display: none;
}
.dlBox .button {
flex-shrink: 0;
height: 40px;
margin: 0;
padding: 10px 12px;
font-size: small;
}
.dlBox .button::after {
content: attr(aria-label);
}
.dlBox .fN {
flex-grow: 1;
width: calc(100% - 200px);
padding: 0 15px;
}
.dlBox .fN >* {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dlBox .fS {
line-height: 1.5;
font-size: small;
opacity: .8;
}
/* lightBox */
.lightBox {
position: relative;
}
.lightBox img {
display: block;
transition: position var(--tDuration), margin var(--tDuration);
}
.lightBox details .n, .lightBox details[open] {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
transition: position var(--tDuration), background-color var(--tDuration), backdrop-filter var(--tDuration), height var(--tDuration);
}
.lightBox details .n .c {
position: fixed;
bottom: -20px;
right: -20px;
width: 42px;
height: 42px;
border-radius: 50%;
color: currentColor;
background-color: var(--contentBg);
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 20px -5px rgb(0 0 0 / 20%);
transition: bottom var(--tDuration), right var(--tDuration), var(--tShowHide);
}
.lightBox details .n .c::after {
content: '\2715';
font-weight: 400;
font-size: 14px;
}
.lightBox details[open] {
position: fixed;
height: var(--vHeight);
background-color: var(--themeBg-pop);
backdrop-filter: saturate(180%) blur(10px);
z-index: 10;
}
.lightBox details[open] .n .c {
bottom: 20px;
right: 20px;
opacity: 1;
visibility: visible;
}
.lightBox details[open] ~ *, .lightBox details[open] ~ noscript >* {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: calc(100% - (var(--contentPadding) * 2));
max-height: calc(100% - (var(--contentPadding) * 2));
margin: auto;
z-index: 10;
}
/* syntax */
.pre {
color: var(--synC);
background-color: var(--synBg);
border: var(--synBd-line) solid var(--synBd-color);
border-radius: var(--synBd-radius);
direction: ltr;
}
.pre:not(.tb) {
position: relative;
margin: 1.7em auto;
font-family: var(--fontCode);
overflow: hidden;
}
.pre:not(.tb)::before {
content: '';
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
left: 0;
right: 0;
padding-inline: 10px;
color: var(--synGray);
background-color: inherit;
font-size: 11px;
line-height: 30px;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.pre:not(.tb).html::before {
content: '.html';
}
.pre:not(.tb).css::before {
content: '.css';
}
.pre:not(.tb).js::before {
content: '.js';
}
.pre:not(.tb).custom::before {
content: attr(data-text);
}
.pre:not(.tb, :hover)::before {
opacity: 1;
visibility: visible;
transition-delay: 2s;
}
.pre:not(.tb) button {
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
right: 0;
padding: 0 10px;
border: 0;
color: var(--synGray);
background-color: inherit;
font-size: 11px;
line-height: 30px;
z-index: 2;
}
.pre:not(.tb, :hover) button {
opacity: 0;
visibility: hidden;
transition-delay: 2s;
z-index: 1;
}
.pre pre, .pre.tb pre {
margin: 0;
padding-top: 30px;
color: inherit;
background-color: inherit;
}
pre {
display: block;
position: relative;
font: 13px/1.6 var(--fontCode);
color: var(--synC);
background-color: var(--synBg);
margin: 1.7em auto;
padding: 20px;
border-radius: var(--contentBd-radius);
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow: auto;
direction: ltr;
white-space: pre;
}
pre i {
color: var(--synBlue);
font-style: normal;
}
pre i.block {
color: #fff;
background-color: var(--synBlue);
}
code, kbd {
display: inline;
padding: 5px;
border-radius: 2px;
font: 14px var(--fontCode);
background-color: #ebeced;
color: #2f3337;
}
/* Multi syntax */
.pre.tb .preH {
font-size: .93rem;
margin: 0;
}
.pre.tb .preH >* {
padding-top: 15px;
}
.pre.tb .preH::after {
content: '';
margin-left: auto;
padding: 15px;
font: 10px var(--fontCode);
color: var(--synGray);
}
.pre.tb >:not(.preH) {
display: none;
}
.pE input[id*="1"]:checked ~ div[class*="C-1"], .pE input[id*="2"]:checked ~ div[class*="C-2"], .pE input[id*="3"]:checked ~ div[class*="C-3"], .pE input[id*="4"]:checked ~ div[class*="C-4"] {
display: block;
}
/* hljs */
.hljs-comment, .hljs-code, .hljs-meta, pre i.gray {
color: var(--synGray);
}
.hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red {
color: var(--synOrange);
}
.hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue {
color: var(--synBlue);
}
.hljs-attribute {
}
.hljs-params, pre i.green {
color: var(--synGreen);
}
.hljs-number, .hljs-symbol {
color: var(--synRed);
}
.hljs-regexp, .hljs-link {
color: var(--synGold);
}
.hljs-deletion {
background-color: var(--warnBg);
color: var(--warnC);
}
.hljs-addition {
background-color: var(--noteBg);
color: var(--noteC);
}
.hljs-strong {
font-weight: bold;
}
.hljs-code, .hljs-emphasis {
font-style: italic;
}
/* tabs */
.tbHd.stick:not(.preH) {
position: -webkit-sticky;
position: sticky;
top: var(--headerHeight);
background-color: var(--contentBg);
z-index: 1;
}
.tbHd {
display: flex;
margin-bottom: 30px;
border-bottom: var(--contentBd-line) solid var(--contentBd-color);
font: 14px/1.6 var(--fontBody-alt);
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.tbHd >* {
position: relative;
padding: 12px 15px;
transition: opacity var(--tDuration);
opacity: .6;
white-space: nowrap;
scroll-snap-align: start;
}
.tbHd >*::before {
content: attr(data-text);
}
.tbHd >*::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
right: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background-color: var(--themeLink);
opacity: 0;
transition: var(--tShowHide);
}
.tbCn >* {
display: none;
width: 100%;
}
.tbCn >* p:first-child {
margin-top: 0;
}
.pE input[id*="1"]:checked ~ .tbHd label[for*="1"], .pE input[id*="2"]:checked ~ .tbHd label[for*="2"], .pE input[id*="3"]:checked ~ .tbHd label[for*="3"], .pE input[id*="4"]:checked ~ .tbHd label[for*="4"] {
color: var(--themeLink);
opacity: 1;
font-weight: 500;
}
.pE input[id*="1"]:checked ~ .tbHd label[for*="1"]::after, .pE input[id*="2"]:checked ~ .tbHd label[for*="2"]::after, .pE input[id*="3"]:checked ~ .tbHd label[for*="3"]::after, .pE input[id*="4"]:checked ~ .tbHd label[for*="4"]::after {
opacity: 1;
}
.pE input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], .pE input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], .pE input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], .pE input[id*="4"]:checked ~ .tbCn div[class*="Text-4"] {
display: block;
}
/* split */
.blogPg {
font-size: small;
align-items: baseline;
justify-content: center;
gap: 0;
}
.blogPg >*:not(.page) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
min-width: 40px;
height: 40px;
border-radius: var(--contentBd-radius);
color: inherit;
}
.blogPg a {
opacity: .6;
}
.blogPg a:hover {
opacity: 1;
}
.blogPg .current:not(.page)::after, .blogPg .n::after {
content: '';
display: block;
width: 20px;
border-bottom: 1px solid currentColor;
}
.blogPg .n, .blogN .j.hm {
gap: 4px;
margin-inline-start: 5px;
transition: gap var(--tDuration);
}
.blogN .j.hm {
background: transparent;
}
.blogPg .n::before {
content: var(--pageNext);
}
.blogPg .n::after {
width: 1px;
opacity: 0;
visibility: hidden;
transition: width var(--tDuration), var(--tShowHide);
}
.blogPg .n:hover {
gap: 8px;
}
.blogN .j.hm.currents, .blogN .pp.currents, .blogN .np.currents{
cursor:not-allowed;
color:var(--themeC-alt);
}
.blogN svg {
display:none;
}
.blogPg .n:hover::after {
width: 20px;
opacity: 1;
visibility: visible;
}
/* .j.button{
color:white;
} */
.blogPg .a:hover {
color: var(--themeLink);
}
/* component: responsive */
@media screen and (max-width:640px) {
/* scroll-img */
.scImg {
flex-wrap: nowrap;
justify-content: flex-start;
padding-inline: var(--contentPadding);
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.scImg >* {
flex: 0 0 80%;
scroll-snap-align: center;
}
.pE img.full {
max-width: none;
border-radius: 0;
}
/* Table */
.table {
display: flex;
padding-inline: var(--contentPadding);
}
/* full-width */
.pE img.full, .scImg, .table {
position: relative;
width: calc(100% + (var(--contentPadding) * 2));
margin-inline: var(--contentPadding-minus);
}
}
@media screen and (max-width:500px) {
/* scroll-img */
.hdImg >*, .shImg >*, .grImg >*:first-child, .grImg >*:nth-child(4), .grImg >*:nth-child(7) {
width: 100%;
}
.pE .separator a {
display: block!important;
margin: 0!important;
}
/* button */
.btnF >* {
flex-grow: 1;
justify-content: center;
}
.btnF >*:first-child {
flex: 0 0 auto;
}
.dlBox a::after {
display: none;
}
.dlBox .button {
min-width: 45px;
height: 45px;
justify-content: center;
}
}
/* comment */
.pR {
margin-top: var(--contentSpace);
}
/* comment-button */
.cmButton .button {
justify-content: center;
width: 100%;
max-width: none;
padding-block: 18px;
padding-inline: var(--contentPadding-box);
font-family: var(--fontBody-alt);
}
.cmButton .button span::before {
content: attr(data-comment);
}
.cmButton .button:hover {
box-shadow: 0 15px 50px -20px rgb(0 0 0 / 20%), 0 0 0 .5px var(--themeLink) inset;
}
/* comment-head */
.cmH .s {
gap: 5px;
}
.cmH .s::before {
content: attr(data-text);
opacity: .8;
}
.cmi:checked ~ .cm .cmH .s::before {
content: attr(data-new);
}
.cmi:checked ~ .cm .cmH .s svg {
transform: rotate(180deg);
}
.cmi:checked ~ .cm .cmO {
flex-direction: column-reverse;
}
/* comment-func */
.item-control {
display: none;
}
#comment:target .cm.popUp {
margin-bottom: 0;
opacity: 1;
visibility: visible;
}
#comment:target .cm.popUp .fc::after {
opacity: 1;
visibility: visible;
background-color: var(--themeBg-pop);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
}
#comment:target .popI:not(:checked) ~ .cmButton, .popI:checked ~ .cmButton, #comment:not(:target) .popI:not(:checked) ~ .cmButton ~ .cm:not(.popUp) {
display: none;
}
#comment:target .popI:checked ~ .cm.popUp {
margin-bottom: -100%;
opacity: 0;
visibility: hidden;
}
#comment:target .popI:checked ~ .cm.popUp .fc::after {
background-color: transparent;
opacity: 0;
visibility: hidden;
backdrop-filter: none;
}
#comment:target .popI:checked ~ .cmButton {
display: block;
}
/* comment-title */
.cm .title {
margin: 0;
font-size: 1em;
}
/* comment-iframe */
.cm.embed .cmF, .cmO .cmX {
position: relative;
width: calc(100% + (10px * 2));
margin-inline: -10px;
}
.cmm.note {
margin-inline: 10px;
font-size: small;
}
/* comment-list */
.cmO {
margin-block-start: var(--contentPadding);
}
.cmO li {
flex-wrap: wrap;
gap: 10px;
padding-bottom: 25px;
}
.cmO li li {
position: relative;
padding-bottom: 15px;
}
.cmO .cmI {
position: relative;
width: calc(100% - (35px + 10px));
}
.cmT {
width: 100%;
}
.cmT svg {
color: var(--themeLink);
margin-inline-start: 3px;
}
.cmT .time::before {
content: '\00B7';
margin-inline: 8px;
}
.cmC {
color: var(--themeC-alt);
}
.cmC img {
font-size: smaller;
margin-block-start: 1em;
}
.cmC.delete {
display: block;
margin-block-start: .5em;
padding: 15px;
border: 1px dashed rgb(0 0 0 / 20%);
border-radius: 3px;
text-align: center;
}
.cmC i[rel=image] {
display: block;
position: relative;
min-height: 50px;
margin-block-start: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .93em;
opacity: .8;
}
.cmC i[rel=image]::before {
content: 'Enable javascript to view image';
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px;
border: 1px dashed rgb(0 0 0 / 20%);
border-radius: 3px;
background-color: var(--contentBg);
text-align: center;
}
.cmC i[rel=quote] {
display: block;
margin-block: 1em .5em;
padding-block: 6px;
padding-inline-start: 15px;
border-inline-start: 1px solid var(--contentBd-color);
opacity: .8;
}
.cmC i[rel=pre] {
display: block;
margin-block: 1em .5em;
padding: 15px;
border: var(--synBd-line) solid var(--synBd-color);
border-radius: var(--contentBd-radius);
color: var(--synC);
background-color: var(--synBg);
font: normal 13px/1.6 var(--fontCode);
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow: auto;
direction: ltr;
white-space: pre;
}
.cmJ:not(.cmc), .cmR {
margin-block-start: .75em;
}
.cmJ:not(.cmc) >*::after {
/* content: var(--reply); */
;
}
.cmJ.cmc >*::after {
content: var(--replies);
}
.cmR summary {
align-items: center;
padding-block: 5px;
}
.cmR summary::before {
content: attr(aria-label);
}
.cmR summary::after {
content: '';
display: var(--widgetTitle-afterD);
vertical-align: middle;
width: 30px;
margin-inline-start: 8px;
border-bottom: 1px solid var(--widgetTitle-afterC);
}
.cmR[open] summary::before {
content: attr(data-text);
}
.cmS {
margin-block-start: 1.5em;
}
.cmS .cmI {
width: 100%;
}
.cmS .cmA {
position: absolute;
width: 20px;
}
.cmS .cmA .avatar.im {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
}
.cmS .cmT {
padding-inline-start: 26px;
}
.cmS .cmC {
margin-block-start: .5em;
}
/* Set theme: switch */
.dc[aria-label=Dark] svg >* {
display: none;
}
.nB[data-theme=default] .inn .A, .nB[data-theme=dark] .inn .D, .nB[data-theme=light] .inn .L {
color: var(--themeLink);
opacity: 1;
}
.nB[data-theme=default] .inn .A .i, .nB[data-theme=dark] .inn .D .i, .nB[data-theme=light] .inn .L .i {
box-shadow: 0 0 0 1px var(--themeLink);
}
.nB[data-theme=default] .dc[aria-label=Dark] svg .sun, .nB[data-theme=light] .dc[aria-label=Dark] svg .sun, .nB[data-theme=dark] .dc[aria-label=Dark] svg .moon {
display: block;
}
.nB[data-theme=default] .dc[aria-label=Dark] svg {
z-index: -1;
}
.nB[data-theme=default] .dc[aria-label=Dark] {
position: relative;
}
.nB[data-theme=default] .dc[aria-label=Dark]::before {
content: 'A';
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 5px;
right: 4px;
width: 14px;
height: 16px;
border-radius: 6px;
background-color: var(--headerBg);
font-size: smaller;
}
.nB[data-theme=default] .iSett .dc[aria-label=Dark]::before {
background-color: var(--contentBg);
}
/* Set theme: dark */
.nB[data-theme=dark] {
--themeLink: var(--darkLink);
--themeC: var(--darkC);
--themeC-alt: var(--darkC-alt);
--themeBg: var(--darkBg);
--themeBg-alt: var(--darkBg-alt);
--themeBg-sec: var(--darkBg-sec);
--themeBg-pop: var(--darkBg-pop);
--themeBd-color: var(--darkBd-color);
--synC: var(--themeC-alt);
--synBg: var(--themeBg-alt);
--synBd-color: var(--themeBd-color);
--tableBg-color: rgb(45 49 56 / 80%);
/* reset */
--buttonBg: var(--themeLink);
--stepC: var(--themeLink);
--headerBg: var(--themeBg);
--sideBg: var(--themeBg);
--sidebarBg: var(--themeBg);
--footerBg: var(--themeBg);
--postBg: var(--themeBg);
--mobileBg: var(--themeBg-alt);
--tocBg: var(--themeBg-alt);
--contentBg: var(--themeBg);
--contentBg-alt: var(--themeBg-alt);
--contentBg-sec: var(--themeBg-sec);
--buttonBd-color: var(--themeBd-color);
--headerBd-color: var(--themeBd-color);
--sideBd-color: var(--themeBd-color);
--sidebarBd-color: var(--themeBd-color);
--footerBd-color: var(--themeBd-color);
--postBd-color: var(--themeBd-color);
--mobileBd-color: var(--themeBd-color);
--tocBd-color: var(--themeBd-color);
--contentBd-color: var(--themeBd-color);
--headerC: currentColor;
--sideC: currentColor;
--sidebarC: currentColor;
--footerC: currentColor;
--postC: currentColor;
--mobileC: currentColor;
--tocC: currentColor;
--contentC: currentColor;
}
.nB[data-theme=dark] .ipopUp, .nB[data-theme=dark] .profilePop {
background-color: var(--contentBg-alt);
}
@media (prefers-color-scheme: dark) {
/* Set theme: switch */
.nB[data-theme=default] .dc[aria-label=Dark] svg .sun {
display: none;
}
.nB[data-theme=default] .dc[aria-label=Dark] svg .moon {
display: block;
}
.nB[data-theme=default] {
--themeLink: var(--darkLink);
--themeC: var(--darkC);
--themeC-alt: var(--darkC-alt);
--themeBg: var(--darkBg);
--themeBg-alt: var(--darkBg-alt);
--themeBg-sec: var(--darkBg-sec);
--themeBg-pop: var(--darkBg-pop);
--themeBd-color: var(--darkBd-color);
--synC: var(--themeC-alt);
--synBg: var(--themeBg-alt);
--synBd-color: var(--themeBd-color);
--tableBg-color: rgb(45 49 56 / 80%);
/* reset */
--buttonBg: var(--themeLink);
--stepC: var(--themeLink);
--headerBg: var(--themeBg);
--sideBg: var(--themeBg);
--sidebarBg: var(--themeBg);
--footerBg: var(--themeBg);
--postBg: var(--themeBg);
--mobileBg: var(--themeBg-alt);
--tocBg: var(--themeBg-alt);
--contentBg: var(--themeBg);
--contentBg-alt: var(--themeBg-alt);
--contentBg-sec: var(--themeBg-sec);
--buttonBd-color: var(--themeBd-color);
--headerBd-color: var(--themeBd-color);
--sideBd-color: var(--themeBd-color);
--sidebarBd-color: var(--themeBd-color);
--footerBd-color: var(--themeBd-color);
--postBd-color: var(--themeBd-color);
--mobileBd-color: var(--themeBd-color);
--tocBd-color: var(--themeBd-color);
--contentBd-color: var(--themeBd-color);
--headerC: currentColor;
--sideC: currentColor;
--sidebarC: currentColor;
--footerC: currentColor;
--postC: currentColor;
--mobileC: currentColor;
--tocC: currentColor;
--contentC: currentColor;
}
.nB[data-theme=default] .ipopUp, .nB[data-theme=dark] .profilePop {
background-color: var(--contentBg-alt);
}
}
/* Additional (Dummy ad) */
.adB {
display: flex;
min-height: 60px;
border: 1px solid rgb(0 0 0 /10%);
border-radius: 2px;
font-size: smaller;
}
.adB::before {
content: attr(data-text);
margin: auto;
opacity: .7;
}
/* Responsive */
@media screen and (max-width:1100px) {
/* mainC */
.mainB .blogB {
width: calc(100% - ((var(--sidebarWidth) - 20px) + var(--contentSpace)));
}
.mainB .sideB {
width: calc(var(--sidebarWidth) - 20px);
}
/* Widget: Blog */
.blogP.flex >article {
width: calc((100% / 2) - (var(--gap) * 1/2));
}
}
@media screen and (min-width:897px) {
.slideB {
margin: auto;
width: calc(100% - 5px);
border-radius: 0;
}
/* mainN */
.leftW {
position: sticky;
top: var(--headerHeight);
height: calc(var(--vHeight) - var(--headerHeight));
}
.leftW::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
border-inline-end: var(--sideBd-line) solid var(--sideBd-color);
}
.leftW:not(.r)::after {
right: 0;
}
.leftW.r::after {
left: 0;
}
/* mainN: active and openMenu */
.nB:not(.openMenu) .navi:checked ~ .mainW .leftN, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN {
overflow-x: hidden;
overflow-y: hidden;
}
.nB:not(.openMenu) .navi:checked ~ .mainW .leftN:hover, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN:hover {
overflow-y: scroll;
}
.nB.openMenu .mainN, .nB:not(.openMenu) .navi:checked ~ .mainW .mainN {
--sideWidth-collapse: var(--sideWidth-expand);
}
.nB.openMenu .navi:checked ~ .mainW .mainN {
--sideWidth-collapse: var(--sideWidth);
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav .n, .nB.openMenu .navi:checked ~ .mainW .leftNav .n {
--top: 6px;
position: absolute;
top: calc(var(--padding) - (var(--top) - 2px));
max-width: 160px;
padding: var(--top) 10px;
border: var(--sideBd-line) solid var(--sideBd-color);
border-radius: var(--contentBd-radiusA);
background-color: var(--contentBg);
box-shadow: 0 10px 30px -5px rgb(0 0 0 / 10%);
font-size: .93em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: var(--tShowHide);
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n {
top: calc(var(--padding) - (var(--top) - 12px));
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav:not(.r) details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav:not(.r) details .n {
left: 55px;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav.r details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav.r details .n {
right: 55px;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n li, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n li {
padding-inline-start: 0;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n li::after, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n li::after, .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftN .profileIcon .n, .nB.openMenu .navi:checked ~ .mainW .leftN .profileIcon .n, .nB:not(.openMenu) .navi:checked ~ .mainW .leftN .profileIcon.team .avi, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN .profileIcon.team .avi {
display: none;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftN .profileIcon.team .avi, .nB.openMenu .navi:checked ~ .mainW .leftN .profileIcon.team .avi {
display: flex;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav .a:hover .n, .nB.openMenu .navi:checked ~ .mainW .leftNav .a:hover .n, .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details:hover .n, .nB.openMenu .navi:checked ~ .mainW .leftNav details:hover .n {
opacity: 1;
visibility: visible;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav:not(.r) .n, .nB.openMenu .navi:checked ~ .mainW .leftNav:not(.r) .n {
left: 35px;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav.r .n, .nB.openMenu .navi:checked ~ .mainW .leftNav.r .n {
right: 35px;
}
.nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav summary .flexIn, .nB.openMenu .navi:checked ~ .mainW .leftNav summary .flexIn {
display: none;
}
}
@media screen and (max-width:896px) {
/* mainH */
#mobile-menu {
z-index: 3;
}
.nB:not(.stickyHeader) .mainH {
position: relative;
}
.mainH.geser {
top: -100vh;
}
/* mainN */
.mainR {
width: 100%;
}
.mainL {
position: fixed;
top: 0;
bottom: 0;
width: calc(100% - (var(--contentPadding) * 2));
max-width: var(--sideWidth-max);
margin-inline-start: calc(-100% + (var(--contentPadding) * 2));
margin-block: var(--sideMargin-phone);
opacity: 0;
visibility: hidden;
transition: margin var(--tDuration), var(--tShowHide);
z-index: 10;
overflow: hidden;
}
.mainL:not(.r) {
left: 0;
}
.mainL.r {
right: 0;
}
.leftW {
position: relative;
height: 100%;
border-radius: var(--sideBd-radiusTL) var(--sideBd-radiusTR) var(--sideBd-radiusBR) var(--sideBd-radiusBL);
overflow: hidden;
}
.leftN {
overflow-y: scroll;
}
.leftF {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: var(--closeHeight-phone);
border-block-start: var(--sideBd-line) solid var(--sideBd-color);
background-color: inherit;
}
.leftF label {
align-items: inherit;
justify-content: inherit;
min-width: 100px;
padding-block: 10px;
color: var(--themeLink);
}
.leftF label, .leftP {
background-color: transparent;
z-index: 1;
}
.leftF label::before {
content: attr(aria-label);
}
/* mainN: active */
.navi:checked ~ .mainW .mainL {
opacity: 1;
visibility: visible;
margin-inline-start: var(--sideMargin-phone);
margin-inline-end: var(--sideMargin-phone);
}
.navi:checked ~ .mainW .fc[for=forNav]::after {
opacity: 1;
visibility: visible;
background-color: var(--themeBg-pop);
backdrop-filter: saturate(180%) blur(10px);
z-index: 2;
}
/* mainC */
.mainB {
align-items: center;
flex-direction: column;
gap: calc(var(--contentSpace) * 1.5);
}
.mainB :is(.blogB, .sideB) {
flex: 1 0 100%;
width: 100%;
}
/* mainM/mainF */
.mainM {
display: block;
}
.mainM:not(.no-items) ~ .mainF {
padding-block-end: calc(25px + var(--mobileHeight));
}
/* Widget: Sliders */
.slideB {
width: calc(100% + (var(--contentPadding) * 2));
margin-inline: var(--contentPadding-minus);
padding-inline: calc(var(--contentPadding) / 2);
border-radius: 0;
}
.slideI {
margin-inline: calc(var(--contentPadding) / 2);
}
.slider {
left: calc(var(--contentPadding-minus) / -2);
right: calc(var(--contentPadding-minus) / -2);
}
.slider >* {
padding-inline-end: var(--contentPadding);
}
/* Widget: Blog */
.blogP.flex >article {
width: calc((100% / 3) - (var(--gap) * 2/3));
}
}
@media screen and (min-width:768px) {
/* Scrollbar custom */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgb(0 0 0 / 15%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(0 0 0 / 35%);
}
::-webkit-scrollbar-thumb:active {
background-color: rgb(0 0 0 / 35%);
}
}
@media screen and (min-width:641px) {
.pinnedTag {
top: 15px;
}
.mainB.full .sideB {
display: none;
}
}
@media screen and (max-width:640px) {
/* Variable */
.nB {
--headerHeight: var(--headerHeight-phone);
--postTitle-font: var(--postTitle-fontPhone);
--thumbnailSize: 250px;
}
/* Notify */
.nB:not(.r) .fixN, .nB.r .fixN {
left: 0;
right: 0;
}
.nB .fixN {
--minHeight: var(--minHeight-phone);
margin-bottom: var(--contentPadding-minus);
border-radius: 0;
box-shadow: none;
}
/* noScript/cookie */
.nJ {
bottom: 0;
max-width: none;
margin-inline: 0;
border-radius: 0;
box-shadow: none;
}
.nJ.cookie {
margin-bottom: 0;
}
/* mainH */
.mainH {
padding-inline: var(--contentPadding);
border-radius: 0 0 var(--headerBd-radiusBR) var(--headerBd-radiusBL);
}
.headL {
--gap: 12px;
flex-grow: 1;
width: 50%;
}
.headR {
flex-grow: 0;
gap: 0;
width: auto;
margin-inline-start: auto;
padding-inline: 0;
}
.headT {
max-width: calc(100% - (var(--iconWidth) + var(--gap)) + 8px);
}
.headi.menu {
margin-inline-start: -8px;
padding-inline-start: 0;
}
.headi .sc {
display: inline-flex;
}
/* Widget: BlogSearch */
.BlogSearch {
position: fixed;
top: 0;
left: 0;
right: 0;
margin-block-start: var(--headerHeight-min);
transition: margin var(--tDuration);
z-index: 2;
}
.BlogSearch form {
background-color: var(--headerBg);
margin-inline: 0;
border-bottom: var(--headerBd-line) solid var(--headerBd-color);
border-radius: 0 0 var(--headerBd-radiusBR) var(--headerBd-radiusBL);
}
.BlogSearch input[type=search] {
width: 100%;
height: var(--headerHeight);
padding-inline: 62px;
border-width: 0;
}
.BlogSearch .b {
padding-inline: var(--contentPadding);
}
.BlogSearch:focus-within {
margin-block-start: 0;
}
.BlogSearch:focus-within input, .BlogSearch:hover input {
background-color: inherit;
}
/* Element: po-up */
.popUp {
align-items: flex-end;
}
.popUp .popIn {
max-width: 100%;
margin-block-end: 0;
border: 0;
border-radius: var(--contentBd-radiusA) var(--contentBd-radiusA) 0 0;
}
.popUp .popC {
padding-block: 0 calc(var(--closeHeight-phone) + var(--contentPadding-box));
}
.popUp .popH {
position: static;
padding: var(--contentPadding-box) 0;
}
.popUp .popH::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: var(--closeHeight-phone);
background-color: inherit;
border-top: 1px solid var(--contentBd-color);
z-index: 2;
}
.popUp .popH .c {
justify-content: flex-end;
position: absolute;
bottom: calc((var(--closeHeight-phone) - var(--iconWidth)) / 2);
min-width: 60px;
width: auto;
margin-inline-end: 0;
color: var(--themeLink);
z-index: 2;
}
.popUp .popH .c::after {
content: attr(aria-label);
}
.popUp .popH .c:not(.r) {
right: var(--contentPadding);
}
.popUp .popH .c.r {
left: var(--contentPadding);
}
.popUp .popIn:not(.n) {
border-radius: 0;
height: var(--vHeight);
max-height: 100%;
}
/* Widget: RelatedPost */
.itemR:not(.type-2, .type-3, .type-4) >* {
width: 100%;
max-width: 500px;
}
.itemR:not(.type-2, .type-4) .pT .clamp {
-webkit-line-clamp: 2;
}
.itemR:is(.type-2, .type-3, .type-4) {
--cgap: 15px;
}
.itemR:is(.type-2, .type-3, .type-4) article {
--gap: 15px;
width: calc((100% / 2) - (var(--cgap) / 2));
}
.itemR:is(.type-2, .type-3, .type-4) .pT .name:not(.item) {
--postTitle-fontItems: 1em;
}
.itemR.type-4 .pS {
display: block;
}
/* Widget: ToC */
.tocP {
top: var(--tocMargin);
bottom: var(--tocMargin);
height: auto;
border-radius: var(--tocBd-radiusTL) var(--tocBd-radiusTR) var(--tocBd-radiusBR) var(--tocBd-radiusBL);
overflow: hidden;
z-index: 11;
}
.tocP:not(.r) {
right: var(--tocMargin);
}
.tocP.r {
left: var(--tocMargin);
}
.tocB.fc::after {
z-index: 10;
}
.tocP::before {
display: none;
}
.tocI:checked ~ .tocB.fc::after {
background-color: var(--themeBg-pop);
backdrop-filter: saturate(180%) blur(10px);
}
/* Widget: Blog */
.blogP.flex >article {
width: calc((100% / 2) - (var(--gap) * 1/2));
}
.nB:not(.oneGrid) .blogP.flex >article {
gap: 15px;
}
.nB:not(.oneGrid) .blogP.flex .pS .clamp {
-webkit-line-clamp: 2;
}
/* Widget: Blog - post */
/* snippet and jumplink */
.nB:not(.oneGrid) .pF .jump:not(.sponsor) {
display: none;
}
}
@media screen and (max-width:500px) {
/* Variable */
.nB {
--postPadding: var(--postPadding-phone);
--postTitle-fontItems: var(--postTitle-fontItemsPhone);
--postDescription-font: var(--postDescription-fontPhone);
--postBody-font: var(--postBody-fontPhone);
--thumbnailSize: 100%;
}
/* Widget: RelatedPost */
.itemR.type-3 article {
flex-direction: row;
width: 100%;
}
.itemR.type-3 .pI {
--thumbnailSize: 40%;
width: var(--thumbnailSize);
}
.itemR.type-3 .pC {
width: calc(100% - (var(--gap) + var(--thumbnailSize)));
}
.itemR.type-4 {
flex-wrap: nowrap;
position: relative;
width: calc(100% + (var(--contentPadding) *2));
margin-inline: var(--contentPadding-minus);
padding-inline: var(--contentPadding);
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: none;
}
.itemR.type-4 article {
width: 85%;
scroll-snap-align: center;
}
.itemR.type-4 .pT .name:not(.item) {
--postTitle-fontItems: 1.1em;
}
/* Widget: Blog */
.blogP.flex {
--gap: 15px;
}
.oneGrid .blogP.flex >article {
width: 100%;
}
/* head, time and label */
.pH:not(.info) {
--fontDate: var(--fontDate-phone);
}
.pH:not(.info) .date {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.pH .share [aria-label=Share]:not(.nt)::before {
display: none;
}
}
@media screen and (max-width: 640px) {
.pS:not(.show), .nB:not(.oneGrid) .pF .jump:not(.sponsor) {
display: none;
}
}
/* Effect */
@keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
@keyframes slideIn {
0% {
opacity: 0;
}
10%, 80% {
opacity: 1;
bottom: var(--contentPadding);
}
100% {
bottom: calc(-100px + var(--contentPadding-minus));
opacity: 0;
visibility: hidden;
}
}
@keyframes slideTop {
0%, 40% {
opacity: 0;
}
50%, 100% {
opacity: 1;
bottom: 0;
}
}
@keyframes bullet {
1%, 21% {
width: 10px;
background-color: var(--themeLink);
}
22%, 39% {
width: 4px;
background-color: rgb(0 0 0 / 15%);
}
}
@keyframes slide {
0%, 20% {
margin-inline-start: 0;
}
25%, 45% {
margin-inline-start: -100%;
}
50%, 70% {
margin-inline-start: -200%;
}
75%, 95% {
margin-inline-start: -300%;
}
}
/* Hide scroll */
.scrlH::-webkit-scrollbar {
width: 0;
height: 0;
}
.scrlH::-webkit-scrollbar-track {
background-color: transparent;
}
.scrlH::-webkit-scrollbar-thumb {
background-color: transparent;
border: none;
}
/* Print (Do not print selected area) */
@media print {
.noPrint {
display: none;
}
}
/* Do not copy */
body.notCopy,.preCopy {
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
blockquote,pre,code,.note,.noteAlert,kbd,.code,.postReference,.izincopy,h1,i[rel=pre],i[rel=code] {
user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-webkit-touch-callout: text;
}
kbd,span.code {
user-select: all;
}
.SinglePost span.tab.shrink.noWrap {
display: none;
}
main.SinglePost .authors .name {
width: calc(100% - (40px + 14px));
max-width: 100%;
}
/* related
.pRelate{margin-block:2.5em;padding-block:1.7em;border-block:var(--contentBd-line) solid var(--contentBd-color);font:14px/1.4 var(--fontBody-alt);}
.pRelate b{font-weight:400;opacity:.8;}
.pRelate ul,.pRelate ol{margin-block:10px 0;padding-inline-start:20px;}
.pRelate li{padding-block:2px;}
.pRelate a:hover{text-decoration:underline;}
*/
/* Post related */
.pRelate{position:relative;margin:42px 0;padding:1.5em 0;border:1px solid var(--sideBd-color);border-left:0;border-right:0;font-size:14px;line-height:1.8em;}
.pRelate b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:var(--themeBg);border:1px solid var(--sideBd-color);border-radius:15px;position:absolute;top:-15.5px;left:20px;}
.pRelate ul{margin:8px 0 0;padding-left:20px;}
.pRelate li:hover{margin-left:5px;}
.pRelate a:hover{opacity:.8;}