/* /$$ /$$ /$$$$ | $$ |_ $$ /$$$$$$$ /$$$$$$$$ | $$ /$$_____/ |__ $$__/ | $$ | $$$$$$ | $$ | $$ \____ $$ |__/ /$$$$$$ /$$$$$$$/21 |______/|_______/ ================================ Keep calm and get rich. Is the best. --------------------------------------------- Theme Name: Alright Theme URI: https://www.nicetheme.cn/ Author: nicetheme Author URI: https://www.nicetheme.cn/ Description: Alright theme is a minimalist yet feature-rich WordPress theme suitable for personal blogs and community interaction. It features a lightweight community stream with infinite scroll, enriching user interaction, and supports functions like hidden content, article content insertion, download lists, and innovative quick comment entry. With responsive design and retina screen adaptation, it offers a premium reading experience. Version: 1.1.3 License URI: LICENSE Text Domain: Alright */ /*-------------------------------------------------------------- ## Text color style --------------------------------------------------------------*/ .text-primary { color: var(--color-primary) !important; } .text-dark { color: var(--color-dark) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-muted { color: var(--color-muted) !important; } .text-light { color: var(--color-light) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } /*-------------------------------------------------------------- ## Background style --------------------------------------------------------------*/ .bg-primary { background-color: var(--color-primary) !important; } .bg-dark { background-color: var(--bg-dark) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .bg-light { background-color: var(--bg-light) !important; } .bg-white-overlay { color: #fff; background-color: rgba(255, 255, 255, 0.35); } .bg-dark-overlay { color: #fff; background-color: rgba(0, 0, 0, 0.33); } .bg-img { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .bg-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .bg-poster { background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-fixed { background-attachment: fixed; } body[data-scheme="dark"] .bg-dark { background-color: var(--bg-dark) !important; } body[data-scheme="dark"] .bg-secondary { background-color: var(--bg-secondary) !important; } body[data-scheme="dark"] .bg-light { background-color: var(--bg-muted) !important; } body[data-scheme="dark"] .bg-white-overlay { color: #fff; background-color: rgba(255, 255, 255, 0.35); } body[data-scheme="dark"] .bg-dark-overlay { color: #fff; background-color: rgba(0, 0, 0, 0.33); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .bg-dark { background-color: var(--bg-dark) !important; } body[data-scheme="auto"] .bg-secondary { background-color: var(--bg-secondary) !important; } body[data-scheme="auto"] .bg-light { background-color: var(--bg-muted) !important; } body[data-scheme="auto"] .bg-white-overlay { color: #fff; background-color: rgba(255, 255, 255, 0.35); } body[data-scheme="auto"] .bg-dark-overlay { color: #fff; background-color: rgba(0, 0, 0, 0.33); } } /*-------------------------------------------------------------- ## Buttons --------------------------------------------------------------*/ .btn { border-radius: var(--border-radius-sm); padding: .5rem 1.625rem; white-space: normal; transition: all 0.2s ease-in-out; } .btn:hover, .btn:focus, .btn:active, .btn.active { box-shadow: none !important; } .btn.disabled, .btn:disabled { color: var(--color-muted); border-color: var(--gray-3); background-color: var(--gray-3); } .btn.loading { position: relative; cursor: wait !important; color: var(--color-muted); border-color: var(--gray-3); background-color: var(--gray-3); pointer-events: none; } .btn.active, .btn.show { --bs-btn-active-color: var(--color-secondary); --bs-btn-active-bg: var(--gray-2); --bs-btn-active-border-color: var(--gray-2); } body[data-scheme="dark"] .btn.disabled, body[data-scheme="dark"] .btn:disabled { color: var(--color-light); border-color: var(--gray-5); background-color: var(--gray-5); } body[data-scheme="dark"] .btn.loading { color: var(--color-light); border-color: var(--gray-5); background-color: var(--gray-5); } body[data-scheme="dark"] .btn.active, body[data-scheme="dark"] .btn.show { --bs-btn-active-color: var(--color-muted); --bs-btn-active-bg: var(--bg-secondary); --bs-btn-active-border-color: var(--border-secondary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .btn.disabled, body[data-scheme="auto"] .btn:disabled { color: var(--color-light); border-color: var(--gray-5); background-color: var(--gray-5); } body[data-scheme="auto"] .btn.loading { color: var(--color-light); border-color: var(--gray-5); background-color: var(--gray-5); } body[data-scheme="auto"] .btn.active, body[data-scheme="auto"] .btn.show { --bs-btn-active-color: var(--color-muted); --bs-btn-active-bg: var(--bg-secondary); --bs-btn-active-border-color: var(--border-secondary); } } /*-------------------------------------------------------------- ## Button style --------------------------------------------------------------*/ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { opacity: 0.8; } /*-------------------------------------------------------------- ## Button secondary style --------------------------------------------------------------*/ .btn-secondary { --bs-btn-color: var(--gray-2); --bs-btn-bg: var(--bg-secondary); --bs-btn-border-color: var(--border-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-secondary); --bs-btn-hover-border-color: var(--border-secondary); --bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-secondary); --bs-btn-active-border-color: var(--border-secondary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--bg-secondary); --bs-btn-disabled-border-color: var(--border-secondary); } /*-------------------------------------------------------------- ## Button light style --------------------------------------------------------------*/ .btn-light { --bs-btn-color: var(--color-muted); --bs-btn-bg: var(--bg-light); --bs-btn-border-color: var(--border-color); --bs-btn-hover-color: var(--color-muted); --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: var(--color-dark); --bs-btn-active-bg: var(--border-light); --bs-btn-active-border-color: var(--border-color); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--bg-light); --bs-btn-disabled-border-color: var(--border-color); } .btn-light:hover { --bs-btn-hover-color: var(--color-dark); --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); } .btn-light:focus { --bs-btn-focus-color: var(--color-dark); --bs-btn-focus-bg: var(--bg-light); --bs-btn-focus-border-color: var(--border-color); } .btn-light:active, .btn-light.active { --bs-btn-active-color: var(--color-dark); --bs-btn-active-bg: var(--border-color); --bs-btn-active-border-color: var(--border-color); } body[data-scheme="dark"] .btn-light { --bs-btn-color: var(--color-light); --bs-btn-bg: var(--bg-light); --bs-btn-border-color: var(--border-light); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-light); --bs-btn-active-border-color: var(--border-color); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--bg-light); --bs-btn-disabled-border-color: var(--border-color); } body[data-scheme="dark"] .btn-light:hover { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); } body[data-scheme="dark"] .btn-light:focus { --bs-btn-focus-color: #fff; --bs-btn-focus-bg: var(--bg-light); --bs-btn-focus-border-color: var(--border-color); } body[data-scheme="dark"] .btn-light:active, body[data-scheme="dark"] .btn-light.active { --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-light); --bs-btn-active-border-color: var(--border-color); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .btn-light { --bs-btn-color: var(--color-light); --bs-btn-bg: var(--bg-light); --bs-btn-border-color: var(--border-light); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-light); --bs-btn-active-border-color: var(--border-color); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--bg-light); --bs-btn-disabled-border-color: var(--border-color); } body[data-scheme="auto"] .btn-light:hover { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-light); --bs-btn-hover-border-color: var(--border-color); } body[data-scheme="auto"] .btn-light:focus { --bs-btn-focus-color: #fff; --bs-btn-focus-bg: var(--bg-light); --bs-btn-focus-border-color: var(--border-color); } body[data-scheme="auto"] .btn-light:active, body[data-scheme="auto"] .btn-light.active { --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-light); --bs-btn-active-border-color: var(--border-color); } } /*-------------------------------------------------------------- ## Button dark style --------------------------------------------------------------*/ .btn-dark { --bs-btn-color: var(--gray-1); --bs-btn-bg: var(--bg-dark); --bs-btn-border-color: var(--border-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bg-secondary); --bs-btn-hover-border-color: var(--border-secondary); --bs-btn-focus-shadow-rgb: 66, 70, 73; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bg-secondary); --bs-btn-active-border-color: var(--border-secondary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--bg-secondary); --bs-btn-disabled-border-color: var(--border-secondary); } /*-------------------------------------------------------------- ## Button danger style --------------------------------------------------------------*/ .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); --bs-btn-focus-shadow-rgb: 225, 83, 97; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-danger); --bs-btn-active-border-color: var(--color-danger); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-danger); --bs-btn-disabled-border-color: var(--color-danger); } .btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active { opacity: .8; } .btn-danger:disabled, .btn-danger.disabled { opacity: .6; } /*-------------------------------------------------------------- ## Button link style --------------------------------------------------------------*/ .btn-link { --bs-btn-color: var(--color-muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--color-secondary); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--color-secondary); text-decoration: none; border-color: transparent; } .btn-link:hover, .btn-link:focus, .btn-link.active, .btn-link:active { background-color: transparent; } .btn-link:disabled, .btn-link.disabled { background-color: transparent; } body[data-scheme="dark"] .btn-link { --bs-btn-color: var(--gray-2); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .btn-link { --bs-btn-color: var(--gray-2); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } } /*-------------------------------------------------------------- ## Button success style --------------------------------------------------------------*/ .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); --bs-btn-focus-shadow-rgb: 60, 153, 110; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-success); --bs-btn-active-border-color: var(--color-success); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-success); --bs-btn-disabled-border-color: var(--color-success); } .btn-success:hover, .btn-success:focus, .btn-success.active, .btn-success:active { opacity: .8; } .btn-success:disabled, .btn-success.disabled { opacity: .6; } /*-------------------------------------------------------------- ## Button outline style --------------------------------------------------------------*/ .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-focus-shadow-rgb: 13, 110, 253; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--color-primary); --bs-gradient: none; } /*-------------------------------------------------------------- ## Button outline dark style --------------------------------------------------------------*/ .btn-outline-dark { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--border-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-5); --bs-btn-hover-border-color: var(--gray-5); --bs-btn-focus-shadow-rgb: 108, 117, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-5); --bs-btn-active-border-color: var(--gray-5); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-secondary); --bs-gradient: none; } /*-------------------------------------------------------------- ## Button outline secondary style --------------------------------------------------------------*/ .btn-outline-secondary { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--border-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-5); --bs-btn-hover-border-color: var(--gray-5); --bs-btn-focus-shadow-rgb: 108, 117, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-5); --bs-btn-active-border-color: var(--gray-5); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-secondary); --bs-gradient: none; } /*-------------------------------------------------------------- ## Button outline light style --------------------------------------------------------------*/ .btn-outline-light { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--gray-3); --bs-btn-hover-color: var(--gray-6); --bs-btn-hover-bg: var(--gray-3); --bs-btn-hover-border-color: var(--gray-3); --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: var(--gray-6); --bs-btn-active-bg: var(--gray-3); --bs-btn-active-border-color: var(--gray-3); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--gray-3); --bs-gradient: none; } body[data-scheme="dark"] .btn-outline-light { --bs-btn-color: var(--color-light); --bs-btn-border-color: var(--border-light); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-5); --bs-btn-hover-border-color: var(--gray-5); --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-5); --bs-btn-active-border-color: var(--gray-5); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-light); --bs-gradient: none; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .btn-outline-light { --bs-btn-color: var(--color-light); --bs-btn-border-color: var(--border-light); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-5); --bs-btn-hover-border-color: var(--gray-5); --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-5); --bs-btn-active-border-color: var(--gray-5); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-light); --bs-gradient: none; } } /*-------------------------------------------------------------- ## Button size style --------------------------------------------------------------*/ .btn-xs { --bs-btn-font-size: 0.75rem; padding: 0.25rem 0.75rem; } .btn-sm { --bs-btn-font-size: 0.875rem; padding: 0.375rem .75rem; } .btn-lg { --bs-btn-font-size: 1.125rem; padding: 0.625rem 1.5rem; } .btn-block { width: 100%; display: block; padding-left: 0.5rem; padding-right: 0.5rem; } .btn-xs.btn-rounded { padding-left: 0.8rem; padding-right: 0.8rem; } .btn-lg.btn-rounded { border-radius: 4rem; padding-left: 2.5rem; padding-right: 2.5rem; } @media (min-width: 768px) and (max-width: 991.98px) { .btn-sm { --bs-btn-font-size: 0.8125rem; } .btn-lg { --bs-btn-font-size: 0.9375rem; } } @media (max-width: 767.98px) { .btn { --bs-btn-font-size: 0.875rem; padding: 0.5rem 1.25rem; } .btn-xs { --bs-btn-font-size: 0.75rem; padding: 0.25rem 0.75rem; } .btn-sm { --bs-btn-font-size: 0.75rem; padding: 0.25rem 0.625rem; } .btn-lg { --bs-btn-font-size: 1rem; padding: 0.625rem 1.25rem; } } /*-------------------------------------------------------------- ## Button radius style --------------------------------------------------------------*/ .btn-rounded { border-radius: 5rem; padding-left: .875rem; padding-right: .875rem; } .rounded { border-radius: var(--border-radius-sm) !important; } .rounded-1 { border-radius: var(--border-radius-xs) !important; } .rounded-2 { border-radius: var(--border-radius-sm) !important; } .rounded-3 { border-radius: var(--border-radius-md) !important; } /*-------------------------------------------------------------- ## Button icon style --------------------------------------------------------------*/ .btn-icon { --bs-btn-font-size: 1.375rem; position: relative; width: 2.625rem; height: 2.625rem; padding: 0; text-align: center; } .btn-icon span { position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; } .btn-icon::after { content: ''; display: flex; visibility: hidden; position: absolute; z-index: 2; top: calc(50% - (var(--btn-icon-size) / 2)); left: calc(50% - (var(--btn-icon-size) / 2)); width: var(--btn-icon-size); height: var(--btn-icon-size); -webkit-animation: loading-spin-animation 0.35s infinite linear; animation: loading-spin-animation 0.35s infinite linear; border: 1px solid var(--btn-text-color); border-radius: 50%; border-top-color: transparent; border-right-color: transparent; opacity: 0; pointer-events: none; } .btn-icon.btn-spin-animation::after { content: ''; display: flex; visibility: hidden; position: absolute; z-index: 2; top: calc(50% - (var(--btn-icon-size) / 2)); left: calc(50% - (var(--btn-icon-size) / 2)); width: var(--btn-icon-size); height: var(--btn-icon-size); -webkit-animation: loading-spin-animation 0.35s infinite linear; animation: loading-spin-animation 0.35s infinite linear; border: 1px solid var(--btn-text-color); border-radius: 50%; border-top-color: transparent; border-right-color: transparent; opacity: 0; pointer-events: none; } .btn-icon.icon-loading::after { opacity: 1; visibility: visible; } .btn-icon.icon-expand-animation i { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95) } .btn-icon small { position: absolute; right: 0; top: 0; font-size: 0.75rem; line-height: 1; padding: 0.125rem 0.3125rem; border-radius: 10px; color: #fff; background-color: var(--color-danger); transform: translate(35%, -30%); z-index: 2; } .btn-icon:hover, .btn-icon:active, .btn-icon:focus { box-shadow: none; } .btn-icon.btn-xs { --bs-btn-font-size: 1.125rem; width: 1.75rem; height: 1.75rem; padding: 0; } .btn-icon.btn-sm { --bs-btn-font-size: 1.125rem; width: 2.25rem; height: 2.25rem; padding: 0; } .btn-icon.btn-md { --bs-btn-font-size: 1.5rem; width: 2.75rem; height: 2.75rem; padding: 0; } .btn-icon.btn-lg { --bs-btn-font-size: 1.625rem; width: 3rem; height: 3rem; padding: 0; } .btn-icon.btn-rounded { border-radius: 5rem; } @media (max-width: 767.98px) { .btn-icon.btn-md { --bs-btn-font-size: 1.125rem; width: 2.375rem; height: 2.375rem; } .btn-icon.btn-lg { --bs-btn-font-size: 1.5rem; width: 2.625rem; height: 2.625rem; padding: 0; } } /*-------------------------------------------------------------- ## Border --------------------------------------------------------------*/ .border-secondary { border-color: var(--border-secondary) !important; } .border-muted { border-color: var(--border-muted) !important; } .border-primary { border-color: var(--color-primary) !important; } .border-light { border-color: var(--border-color) !important; } /*-------------------------------------------------------------- ## Border radius --------------------------------------------------------------*/ .rounded { border-radius: var(--border-radius-sm) !important; } .rounded-1 { border-radius: var(--border-radius-xs) !important; } .rounded-2 { border-radius: var(--border-radius-md) !important; } .rounded-3 { border-radius: var(--border-radius-lg) !important; } /*-------------------------------------------------------------- ## Form control --------------------------------------------------------------*/ .form-control { font-size: 1rem; padding: 0.5rem .875rem; border-color: var(--border-color); background-color: transparent; color: var(--color-muted); border-radius: var(--border-radius-sm); transition: all 0.15s ease-in-out; } .form-control:focus, .form-control:active { color: var(--color-dark); border-color: var(--color-primary); background-color: transparent; box-shadow: none; } .form-control::-webkit-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::-moz-placeholder { color: var(--color-muted); opacity: 1; } .form-control:-ms-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::-ms-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::placeholder { color: var(--color-muted); opacity: 1; } .form-control:disabled, .form-control[readonly] { color: var(--color-muted); border-color: var(--border-secondary); background-color: transparent; opacity: 1; } textarea.form-control { text-align: justify; height: auto; padding: 0.5rem 0.875rem; } .form-control-lg { padding: 0.625rem 1rem; font-size: 1.125rem; } @media (max-width: 767.98px) { .form-control { font-size: .875rem; padding: 0.5rem 0.75rem; } .form-control-lg { padding: 0.5rem 1rem; font-size: 1rem; } } body[data-scheme="dark"] .form-control { color: var(--color-muted); } body[data-scheme="dark"] .form-control:focus, body[data-scheme="dark"] .form-control:active { color: #fff; } body[data-scheme="dark"] .form-control::-webkit-input-placeholder { color: var(--color-muted); } body[data-scheme="dark"] .form-control::-moz-placeholder { color: var(--color-muted); } body[data-scheme="dark"] .form-control:-ms-input-placeholder { color: var(--color-muted); } body[data-scheme="dark"] .form-control::-ms-input-placeholder { color: var(--color-muted); } body[data-scheme="dark"] .form-control::placeholder { color: var(--color-muted); } body[data-scheme="dark"] .form-control:disabled, body[data-scheme="dark"] .form-control[readonly] { color: var(--color-light); border-color: var(--border-secondary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .form-control { color: var(--color-muted); } body[data-scheme="auto"] .form-control:focus, body[data-scheme="auto"] .form-control:active { color: #fff; } body[data-scheme="auto"] .form-control::-webkit-input-placeholder { color: var(--color-muted); } body[data-scheme="auto"] .form-control::-moz-placeholder { color: var(--color-muted); } body[data-scheme="auto"] .form-control:-ms-input-placeholder { color: var(--color-muted); } body[data-scheme="auto"] .form-control::-ms-input-placeholder { color: var(--color-muted); } body[data-scheme="auto"] .form-control::placeholder { color: var(--color-muted); } body[data-scheme="auto"] .form-control:disabled, body[data-scheme="auto"] .form-control[readonly] { color: var(--color-light); border-color: var(--border-secondary); } } /*-------------------------------------------------------------- ## Form check style --------------------------------------------------------------*/ .form-check { min-height: 0; padding-left: 2em; margin-bottom: 0; } .form-check .form-check-input { margin-left: -2em; } .form-check-input { width: 1.5em; height: 1.5em; background-color: var(--gray-2); border-color: var(--gray-2); margin-top: 0.08em; } .form-check-input:active { -webkit-filter: brightness(90%); filter: brightness(90%); } .form-check-input:focus { border-color: var(--gray-2); outline: 0; box-shadow: none; } .form-check-input:checked { background-color: #49d6ab; border-color: #49d6ab; } .form-check-input[type="checkbox"]:indeterminate { background-color: #49d6ab; border-color: #49d6ab; } .form-switch { padding-left: 2.75em; } .form-switch .form-check-input { width: 2.75em; margin-left: -2.75em; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); border-radius: 3em; } .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); } body[data-scheme="dark"] .form-check-input { background-color: var(--bg-muted); border-color: var(--border-muted); } body[data-scheme="dark"] .form-check-input:focus { border-color: var(--border-muted); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .form-check-input { background-color: var(--bg-muted); border-color: var(--border-muted); } body[data-scheme="auto"] .form-check-input:focus { border-color: var(--border-muted); } } /*-------------------------------------------------------------- ## Avatar --------------------------------------------------------------*/ .flex-avatar { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; line-height: 1; white-space: nowrap; font-weight: bold; text-transform: capitalize; border-radius: 100%; } .flex-avatar img { width: inherit; height: inherit; border-radius: inherit; -o-object-fit: cover; object-fit: cover; } .flex-avatar .avatar-online { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 10px; background-color: var(--color-success); border: 2px solid #fff; } .flex-avatar:hover .avatar-online:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: circle-pulse 2s infinite; animation: circle-pulse 2s infinite; border-radius: 50%; box-shadow: 0 0 0 0 #4daa57 } @-webkit-keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } @keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } .flex-avatar .avatar-badge { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(0%, 0%); } .flex-avatar .avatar-badge.badge_4 { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOC4yNSAxMS44NDRhMi4yMzIgMi4yMzIgMCAwIDEgMCAzLjE1NkwxNy41ODggMjUuNjYyYTIuMzggMi4zOCAwIDAgMS0zLjM2NiAwbC01LjY0NC01LjY0NGEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1Ni0zLjE1NWw0LjE3IDQuMTcgOS4xOS05LjE4OWEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1NiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMzEuNzE0IiB4Mj0iLTMuNzMxIiB5MT0iLjg1NyIgeTI9IjExLjgzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM0QUIzRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwRjdDRkQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .flex-avatar .avatar-badge.badge_5 { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOC4yNSAxMS44NDRhMi4yMzIgMi4yMzIgMCAwIDEgMCAzLjE1NkwxNy41ODggMjUuNjYyYTIuMzggMi4zOCAwIDAgMS0zLjM2NiAwbC01LjY0NC01LjY0NGEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1Ni0zLjE1NWw0LjE3IDQuMTcgOS4xOS05LjE4OWEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1NiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMzEuNzE0IiB4Mj0iLTMuNzMxIiB5MT0iLjg1NyIgeTI9IjExLjgzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkI3NEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRDkwMEYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .flex-avatar .avatar-badge.w-10 { width: 10px; height: 10px; right: 0; bottom: 0; } .flex-avatar .avatar-badge.w-12 { width: 12px; height: 12px; right: 1px; bottom: 1px; } .flex-avatar .avatar-badge.w-20 { width: 20px; height: 20px; right: 5px; bottom: 5px; } /*-------------------------------------------------------------- avatar group --------------------------------------------------------------*/ .avatar-group { display: -ms-flex; display: flex; align-items: center; } .avatar-group .flex-avatar { position: relative; } .avatar-group .flex-avatar + .flex-avatar { margin-left: -0.5rem; } .avatar-group .flex-avatar:hover, .avatar-group .flex-avatar:active, .avatar-group .flex-avatar.active { z-index: 1; } /*-------------------------------------------------------------- ## Media --------------------------------------------------------------*/ .media { position: relative; display: block; overflow: hidden; padding: 0; flex-shrink: 0; border-radius: inherit; } .media:after { content: ""; display: block; padding-top: 100%; } .media-overlay { position: absolute; display: flex; align-items: center; color: #fff; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem; z-index: 1; } .media-opacity { opacity: 0.4; transition: 0.3s ease-out; } .media-overlay.bg-dark-overlay { background-color: rgba(0, 0, 0, 0.5); } .media-overlay.overlay-top { bottom: auto; } .media-overlay.overlay-bottom { top: auto; background: rgba(0, 0, 0, 0.6); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); } .media-action { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.3s; display: flex; align-items: center; } .media-action .btn { border-color: transparent; background-color: rgba(0, 0, 0, 0.5); color: #fff; } @media (max-width: 767.98px) { .media-overlay { padding: 0.5rem 0.625rem; } } .media-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 0; border-radius: inherit; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-color: rgba(120, 120, 120, 0.1); } .media-content img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .media-contain { background-color: transparent; background-size: contain; } @media (max-width: 768px) { .media-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } } .media-36x17:after { padding-top: 47.222222%; } .media-21x9:after { padding-top: 42.857143%; } .media-16x9:after { padding-top: 56.25%; } .media-4x3:after { padding-top: 75%; } .media-2x3:after { padding-top: 150%; } .media-3x2:after { padding-top: 66.66666%; } .media-3x4:after { padding-top: 133.33333%; } .media-1x2:after { padding-top: 200%; } .media-2x1:after { padding-top: 50%; } .media-3x1:after { padding-top: 33%; } .media-4x1:after { padding-top: 25%; } .media-5x1:after { padding-top: 20%; } .media-10x1:after { padding-top: 10%; } .media-1-4:after { padding-top: 25vh; min-height: 10rem; } .media-1-3:after { padding-top: 33vh; min-height: 12.5rem; } .media-1-2:after { padding-top: 50vh; min-height: 15rem; } /*-------------------------------------------------------------- custom style --------------------------------------------------------------*/ .custom-hover { position: relative; } .custom-hover img { transition: all 300ms ease-in-out; } .custom-hover:hover img { transform: scale(1.1) rotate(2deg); } /*-------------------------------------------------------------- card style --------------------------------------------------------------*/ .card, .block { position: relative; background: var(--card-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow); } .card-header, .card-footer { background-color: transparent; border-color: transparent; background-clip: padding-box; border: 0; padding: 1.25rem; } .card-header:first-child { padding: 1.25rem 1.25rem 0; border-radius: 0; } .card-header.has-border { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-3) } .card-body { padding: 1.25rem; } .card-body p:last-child { margin-bottom: 0; } .card-title { line-height: 1.5; } .card-md .card-header { padding: 2rem 2rem 0; } .card-md .card-body { padding: 2rem; } .card-md .card-footer { padding: 0 2rem 1.5rem; margin-top: -1rem; } @media (max-width: 767.98px) { .card-header { padding: .875rem .875rem 0; } .card-body { padding: .875rem; } .card-md .card-header { padding: 1.375rem 1.375rem 0; } .card-md .card-body { padding: 1.375rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .card-header { padding: 1rem 1rem 0; } .card-body { padding: 1rem; } .card-md .card-header { padding: 1.5rem 1.5rem 0; } .card-md .card-body { padding: 1.5rem; } } body[data-scheme="dark"] .card, body[data-scheme="dark"] .block { box-shadow: none; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .card, body[data-scheme="auto"] .block { box-shadow: none; } } /*-------------------------------------------------------------- ## List ----------------------------------------------------------------*/ .list-item { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; } .list-item .media-content { transition: all 300ms ease-in-out; } .list-item:hover .media-content { transform: scale(1.05); } .list-content { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; padding: 1rem; } .list-body { flex: 1 1 auto; } .list-footer { margin-top: 12px; } .list-title { display: block; color: inherit; word-break: break-all; word-wrap: break-word; } .list-action a { color: var(--color-secondary); } .list-action a.active { color: var(--color-danger) } .list-loadmore { text-align: center; margin-top: 2.25rem; } .ranking-number { position: absolute; left: 0; top: 0; width: 18px; font-size: 11px; text-align: center; color: #FFFFFF; background: linear-gradient(270deg, #787878 -17.65%, #393939 100%); border-radius: 6px 0; } .list-item:first-child .ranking-number, .list-item:nth-child(2) .ranking-number, .list-item:nth-child(3) .ranking-number { background: linear-gradient(270deg, #FFA27A -17.65%, #FF3D00 100%); } .list-rank { width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-secondary); border-radius: 100px; margin-right: 8px; } .list-item:nth-child(1) .list-rank, .list-item:nth-child(2) .list-rank, .list-item:nth-child(3) .list-rank { background: linear-gradient(270deg, #FFA27A -17.65%, #FF3D00 100%); color: #FFFFFF; } /*-------------------------------------------------------------- ## List style ----------------------------------------------------------------*/ .list { padding: 0; } .list .list-item { flex-direction: row; align-items: center; margin: 0 0 1rem; } .list .list-item:last-child { margin: 0; } .list .list-item .list-content { padding: 0; } .list .list-item .media { margin-left: .75rem; } /*-------------------------------------------------------------- ## List grid hover ----------------------------------------------------------------*/ .list-grid .list-item { flex-direction: row; margin-bottom: .75rem; } .list-grid .list-item:last-child { margin-bottom: 0; } .list-grid .list-item .media:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .list-grid .list-item .list-catname { position: absolute; left: 0.375rem; top: 0.375rem; font-size: .625rem; padding: 0.125rem 0.5rem; color: #fff; background-color: rgb(0 0 0 / 40%); border-radius: 3rem; } .list-grid .list-item .list-content { padding: 0; } .list-grid.list-grid-padding .list-item { padding: 1rem; } .list-grid.list-grid-padding .list-item > .media { border-radius: var(--border-radius-xs); margin-right: 1.25rem; } .list-grid.list-grid-padding .list-content { padding: .25rem 0; } @media (max-width: 767.98px) { .list-grid .list-item .media:first-child { margin-right: .625rem; } .list-grid .list-item .list-catname { left: 0.3125rem; top: 0.3125rem; font-size: .625rem; padding: 0.0625rem 0.375rem; } .list-grid .list-item .list-content { padding: .125rem 0; } .list-grid.list-grid-padding .list-item { padding: .625rem; margin-bottom: .625rem; } .list-grid.list-grid-padding .list-item > .media { margin-right: .625rem; } .list-grid.list-grid-padding .list-content { padding: 0; } } /*-------------------------------------------------------------- ## List grouped ----------------------------------------------------------------*/ .list-grouped { display: flex; flex-direction: row; flex-flow: row wrap; } .list-grouped > div { display: flex; } .list-grouped .list-item { align-self: stretch; flex: 1 1 auto; } .list-grouped .list-item .media { border-radius: var(--border-radius-sm); } .list-grouped .list-item .list-content { padding: 0.75rem 0 0; } @media (min-width: 768px) and (max-width: 991.98px) { .list-grouped .list-item .list-content { padding: 0.625rem 0.75rem; } } @media (max-width: 767.98px) { .list-grouped .list-item .list-content { padding: 0.625rem 0.75rem; } } /*-------------------------------------------------------------- line-clamp style ----------------------------------------------------------------*/ .h-1x { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .h-2x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .h-3x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } /*-------------------------------------------------------------- ## site background ----------------------------------------------------------------*/ .site-background { position: fixed; top: 0; left: 0; width: 100%; height: 65vh; background-size: cover; background-position: top center; background-repeat: no-repeat; transition: opacity 0.5s ease; pointer-events: none; } .site-dark-background { display: none; } body[data-scheme="auto"] .site-background, body[data-scheme="dark"] .site-background { display: none; } body[data-scheme="auto"] .site-dark-background, body[data-scheme="dark"] .site-dark-background { display: block; } .site-background::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 80%; background-image: linear-gradient(0deg, var(--bg-body) 0%, var(--bg-body) 0%, rgba(0, 0, 0, 0) 100%) } /*-------------------------------------------------------------- ## site preloader ----------------------------------------------------------------*/ .site-preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; display: flex; justify-content: center; align-items: center; background-color: var(--color-dark) } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .site-preloader { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .site-preloader .spinner { -webkit-animation: preloader-spinner 1.5s infinite linear; animation: preloader-spinner 1.5s infinite linear; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--color-primary); border-bottom-color: var(--color-primary); border-left-color: var(--color-primary); height: 50px; width: 50px } @-webkit-keyframes preloader-spinner { to { transform: rotateZ(360deg) } } @keyframes preloader-spinner { to { transform: rotateZ(360deg) } } /*-------------------------------------------------------------- ## site main ----------------------------------------------------------------*/ .site-overflow { overflow: hidden; } .site-main { position: relative; padding: 2rem 0; } @media (max-width: 767.98px) { .site-main { padding: 1rem 0; } } /*-------------------------------------------------------------- ## site promote ----------------------------------------------------------------*/ .site-promote { position: relative; } .site-promote img { border-radius: var(--border-radius-md); } .site-promote.post-foot-promote img { border-radius: var(--border-radius-sm); } /*-------------------------------------------------------------- ## site navbar ----------------------------------------------------------------*/ .site-navbar { padding-top: 1.25rem; padding-bottom: 1.25rem; transition: all 0.3s ease-in-out; } .site-navbar.sticked { position: fixed; left: 0; right: 0; z-index: 99; } .site-navbar.is-sticky { position: fixed; left: 0; right: 0; padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(0, 0, 0, 0.6); z-index: 99; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .site-navbar.is-sticky { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } @media (max-width: 767.98px) { .site-navbar { padding-top: 1rem; padding-bottom: 1rem; } } /*-------------------------------------------------------------- ## nav brand ----------------------------------------------------------------*/ .navbar-brand { margin: 0; padding: 0; } .navbar-brand .logo { max-height: 45px; } .navbar-brand .logo-dark { display: none; } body[data-scheme="light"] .site-navbar.is-sticky .navbar-brand .logo { display: none; } body[data-scheme="light"] .site-navbar.is-sticky .navbar-brand .logo-dark { display: block; } body[data-scheme="dark"] .navbar-brand .logo { display: none; } body[data-scheme="dark"] .navbar-brand .logo-dark { display: block; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .navbar-brand .logo { display: none; } body[data-scheme="auto"] .navbar-brand .logo-dark { display: block; } } @media (max-width: 767.98px) { .navbar-brand .logo { max-width: 135px; max-height: 40px; } } @media (min-width: 768px) and (max-width: 991.98px) { .navbar-brand .logo { max-height: 45px; } } /*-------------------------------------------------------------- ## Main Navigation ----------------------------------------------------------------*/ .navbar-site { flex-wrap: nowrap; } .navbar-site li { position: relative; flex-shrink: 0; } .navbar-site li a { display: block; font-size: 1rem; padding: 0.75rem .5rem; } .site-navbar.is-sticky .navbar-site li a { color: #fff; } .navbar-site > li.menu-item-has-children { margin-right: 1.25rem; } .navbar-site > li a { opacity: .7; } .navbar-site > li:hover > a, .navbar-site > li.current-menu-parent > a, .navbar-site > li.current-menu-item > a { color: var(--color-primary); opacity: 1; } /* Submenu */ .navbar-site li ul.sub-menu { position: absolute; left: 0; top: 115%; min-width: 200px; text-align: left; padding: 10px 0; opacity: 0; visibility: hidden; background: var(--gray-6); box-shadow: 0 0 15px rgb(0 0 0 / 7%); border-radius: var(--border-radius-md); transform: translateY(-10px); transition: all 500ms ease; z-index: 100; } .navbar-site li:last-child ul.sub-menu { left: auto; right: 0; } .navbar-site li ul.sub-menu li { display: block; position: relative; } .navbar-site li ul.sub-menu li:last-child { margin-bottom: 0; } .navbar-site li ul.sub-menu li a { position: relative; display: block; color: #fff; padding: 0.625rem 1.125rem; transition: all 0.3s ease-in; z-index: 1; } .navbar-site li ul.sub-menu li > a:hover, .navbar-site li ul.sub-menu li.current-menu-item > a { color: #fff; opacity: 1; } .navbar-site li:hover ul.sub-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(0px); } .navbar-site li ul.sub-menu .sub-menu { position: absolute; top: 100%; left: -10px; background: var(--gray-5); transition: 0.5s; transition-delay: 0.1s; transform: translateY(10px); pointer-events: none; visibility: hidden; opacity: 0; z-index: 999; } .navbar-site li:last-child ul.sub-menu .sub-menu { left: auto; right: 99%; } .navbar-site li ul.sub-menu .sub-menu { left: 99%; top: 0; } .navbar-site li ul.sub-menu li:hover > .sub-menu { visibility: visible; opacity: 1; transform: translate(0, -10px); transition-delay: 0s; pointer-events: all; } /*-------------------------------------------------------------- ## site submenu icon Navigation ----------------------------------------------------------------*/ .navbar-site li.menu-item-has-children > a:after { content: ''; position: absolute; top: 50%; right: -8px; height: 6px; width: 6px; border-left: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); transform: translate(-50%, -50%) rotate(315deg); opacity: 0.3; transition: all 0.2s; } .site-navbar.is-sticky .navbar-site li.menu-item-has-children > a:after { border-left: 1px solid #fff; border-bottom: 1px solid #fff; } .navbar-site li.menu-item-has-children > a:hover:after { transform: translate(-50%, -50%) rotate(135deg); } .navbar-site li ul.sub-menu li.menu-item-has-children > a:after { right: 12px; } .navbar-site li ul.sub-menu li.menu-item-has-children > a:after { transform: translate(-50%, -50%) rotate(315deg); } .navbar-site li ul.sub-menu li.menu-item-has-children > a:hover:after, .navbar-site li ul.sub-menu li.menu-item-has-children > a:hover:after { transform: translate(-50%, -50%) rotate(225deg); } body[data-scheme="dark"] .navbar-site > li:hover > a, body[data-scheme="dark"] .navbar-site > li.current-menu-parent > a, body[data-scheme="dark"] .navbar-site > li.current-menu-item > a { color: #fff; } body[data-scheme="dark"] .navbar-site li.menu-item-has-children > a:after { border-left: 1px solid #fff; border-bottom: 1px solid #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .navbar-site > li:hover > a, body[data-scheme="auto"] .navbar-site > li.current-menu-parent > a, body[data-scheme="auto"] .navbar-site > li.current-menu-item > a { color: #fff; } body[data-scheme="auto"] .navbar-site li.menu-item-has-children > a:after { border-left: 1px solid #fff; border-bottom: 1px solid #fff; } } /* -------------------------------- navbar sub -------------------------------- */ .site-navbar.is-sticky .navbar-sub a { --bs-btn-color: #fff; --bs-btn-hover-color: var(--color-light); --bs-btn-active-color: #fff; } body[data-scheme="dark"] .navbar-sub .theme-toggle { --bs-btn-color: var(--color-warning); --bs-btn-hover-color: var(--color-warning); --bs-btn-active-color: var(--color-warning); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .navbar-sub .theme-toggle { --bs-btn-color: var(--color-warning); --bs-btn-hover-color: var(--color-warning); --bs-btn-active-color: var(--color-warning); } } /* -------------------------------- aside -------------------------------- */ .mobile-aside { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.15s linear; z-index: 997; } .mobile-aside.open { visibility: visible; opacity: 1; } .mobile-aside .aside-overlay { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 998; opacity: 0; visibility: hidden; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .aside-overlay { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .mobile-aside.open .aside-overlay { opacity: 1; visibility: visible; } /*-------------------------------------------------------------- ## Mobile Navigation --------------------------------------------------------------*/ .mobile-aside .aside-body { position: absolute; display: flex; flex-direction: column; width: 300px; height: 100%; overflow: hidden; overflow-y: auto; transform: translateX(-100%); background-color: #fff; z-index: 999; transition: transform 0.3s ease-out; } .mobile-aside.open .aside-body { transform: translateX(0%); } .mobile-aside .aside-menu { display: flex; flex-direction: column; gap: 12px; padding: 1rem; } .mobile-aside .aside-menu li { position: relative; } .mobile-aside .aside-menu > li { padding: .5rem 2.5rem .5rem .5rem; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .mobile-aside .aside-menu > li > a:hover, .mobile-aside .aside-menu > li.current-menu-item > a, .mobile-aside .aside-menu > li.active > a { color: var(--color-primary); } .mobile-aside .aside-menu li a { position: relative; display: flex; align-items: center; gap: 5px; padding: .5rem .5rem; transition: all .3s; } .mobile-aside .aside-menu li a .menu-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 1.3125rem; } .mobile-aside .aside-menu li a:hover { opacity: 1; } .mobile-aside .aside-menu > li.current-menu-item > a { color: var(--color-primary); opacity: 1; } .mobile-aside .aside-menu > li > ul { display: none; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .mobile-aside .aside-menu > li.current-menu-parent > ul { display: block; } .mobile-aside .aside-menu li > ul li { padding-top: 0; padding-bottom: 0; } .mobile-aside .aside-menu li > ul li a { padding: .5rem; } .mobile-aside .aside-menu li > ul li.current-menu-item a { color: var(--color-primary); opacity: 1; } .mobile-aside .aside-menu li a .sub-pointer { position: absolute; right: 0; top: 50%; height: 25px; width: 25px; display: flex; align-items: center; justify-content: center; transform: translate(125%, -50%); opacity: .5; } .mobile-aside .aside-menu li a .sub-pointer:after { content: ""; display: block; height: 8px; width: 8px; border-left: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); transform: rotate(225deg); transition: all 0.2s; } .mobile-aside .aside-menu li a .sub-pointer.is-active:after { transform: rotate(315deg); } body[data-scheme="dark"] .mobile-aside .aside-overlay { background-color: rgba(0, 0, 0, 0.8); } body[data-scheme="dark"] .mobile-aside .aside-body { background-color: var(--bg-secondary); } body[data-scheme="dark"] .mobile-aside .aside-menu > li { background-color: var(--gray-6); border-radius: var(--border-radius-sm); } body[data-scheme="dark"] .mobile-aside .aside-menu > li > a:hover, body[data-scheme="dark"] .mobile-aside .aside-menu > li.current-menu-item > a, body[data-scheme="dark"] .mobile-aside .aside-menu > li.active > a { color: var(--color-primary); } body[data-scheme="dark"] .mobile-aside .aside-menu > li.current-menu-item > a { color: var(--color-primary); } body[data-scheme="dark"] .mobile-aside .aside-menu > li > ul { background-color: var(--gray-6); } body[data-scheme="dark"] .mobile-aside .aside-menu li > ul li.current-menu-item a { color: var(--color-primary); opacity: 1; } body[data-scheme="dark"] .mobile-aside .aside-menu li a .sub-pointer:after { border-left: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .mobile-aside .aside-overlay { background-color: rgba(0, 0, 0, 0.8); } body[data-scheme="auto"] .mobile-aside .aside-body { background-color: var(--bg-secondary); } body[data-scheme="auto"] .mobile-aside .aside-menu > li { background-color: var(--gray-6); border-radius: var(--border-radius-sm); } body[data-scheme="auto"] .mobile-aside .aside-menu > li > a:hover, body[data-scheme="auto"] .mobile-aside .aside-menu > li.current-menu-item > a, body[data-scheme="auto"] .mobile-aside .aside-menu > li.active > a { color: var(--color-primary); } body[data-scheme="auto"] .mobile-aside .aside-menu > li.current-menu-item > a { color: var(--color-primary); } body[data-scheme="auto"] .mobile-aside .aside-menu > li > ul { background-color: var(--gray-6); } body[data-scheme="auto"] .mobile-aside .aside-menu li > ul li.current-menu-item a { color: var(--color-primary); opacity: 1; } body[data-scheme="auto"] .mobile-aside .aside-menu li a .sub-pointer:after { border-left: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); } } /*-------------------------------------------------------------- ## mobile toolbar --------------------------------------------------------------*/ .mobile-toolbar { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; border-top: 1px solid rgba(24, 24, 26, 0.1); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.06); transition: all 0.3s ease; z-index: 99; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .mobile-toolbar { background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(180%) blur(4px); backdrop-filter: saturate(180%) blur(4px); } } .mobile-toolbar.hide { transform: translateY(100%); } .mobile-toolbar .toolbar-menu { display: flex; justify-content: space-around; padding: 10px 20px; } .mobile-toolbar .toolbar-menu li { position: relative; } .mobile-toolbar .toolbar-menu > li > a { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: .625rem; opacity: .6; } .mobile-toolbar .toolbar-menu > li > a:hover { opacity: 1; } .mobile-toolbar .toolbar-menu > li > a > i { font-size: 1.5rem; margin-bottom: .25rem; } .mobile-toolbar .toolbar-menu > li.current-menu-item > a { color: var(--color-primary); opacity: 1; } .mobile-toolbar .toolbar-menu li .sub-menu { position: absolute; display: flex; flex-direction: column; gap: 4px; bottom: 100%; left: 50%; width: 110px; font-size: .875rem; text-align: center; padding: 8px 0; border-radius: var(--border-radius-sm); background-color: #fff; border: 1px solid var(--border-color); transform: translate(-50%, -5px); visibility: hidden; opacity: 0; transition: all 0.3s ease; } .mobile-toolbar .toolbar-menu li.active .sub-menu { visibility: visible; opacity: 1; transform: translate(-50%, -15px); } .mobile-toolbar .toolbar-menu li .sub-menu li a { display: block; padding: 10px; } .mobile-toolbar .toolbar-menu li .sub-menu li.current-menu-item > a { color: var(--color-primary); } body[data-scheme="dark"] .mobile-toolbar { background-color: var(--bg-dark); border-top: 1px solid rgba(24, 24, 26, 0.8); box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="dark"] .mobile-toolbar { background-color: rgba(24, 24, 26, 0.8); } } body[data-scheme="dark"] .mobile-toolbar .toolbar-menu > li.current-menu-item > a { color: var(--color-primary); } body[data-scheme="dark"] .mobile-toolbar .toolbar-menu li .sub-menu { background-color: var(--bg-secondary); border: 1px solid var(--border-color); } body[data-scheme="dark"] .mobile-toolbar .toolbar-menu li .sub-menu li.current-menu-item > a { color: var(--color-primary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .mobile-toolbar { background-color: var(--bg-dark); border-top: 1px solid rgba(24, 24, 26, 0.8); box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="auto"] .mobile-toolbar { background-color: rgba(24, 24, 26, 0.8); } } body[data-scheme="auto"] .mobile-toolbar .toolbar-menu > li.current-menu-item > a { color: var(--color-primary); } body[data-scheme="auto"] .mobile-toolbar .toolbar-menu li .sub-menu { background-color: var(--bg-secondary); border: 1px solid var(--border-color); } body[data-scheme="auto"] .mobile-toolbar .toolbar-menu li .sub-menu li.current-menu-item > a { color: var(--color-primary); } } /*-------------------------------------------------------------- ## index box ----------------------------------------------------------------*/ .box-block { padding: 2rem 2rem; } .box-block.nopd-block { padding: 0; } .box-block.nopy-block { padding: 0 2rem; } .box-block.nopx-block { padding: 2rem 0; } .box-block.pd-sm-block { padding: 1.5rem; } .h-100-block { height: 100px; } .h-222-block { height: 222px; } .h-300-block { height: 300px; } .box-block .read-more-button { transform: rotate(-45deg); transition: all 0.3s ease-in-out; } .box-block:hover .read-more-button { color: var(--color-primary); transform: rotate(0deg); } @media (min-width: 768px) and (max-width: 1199.98px) { .box-block { padding: 1.25rem 1.25rem; } .box-block.nopd-block { padding: 0; } .box-block.nopy-block { padding: 0 1.25rem; } .box-block.nopx-block { padding: 1.25rem 0; } .box-block.pd-sm-block { padding: 1.125rem; } } /*-------------------------------------------------------------- ## profile box ----------------------------------------------------------------*/ .profile-block { padding: 2.5rem 1.5rem 2.5rem; } .profile-block .flex-avatar { width: 96px; height: 96px; margin-bottom: 2rem; } .profile-block .profile-name { position: relative; } .profile-block .author-badge { font-size: 11px; border: 1.2px solid var(--border-muted); padding: 1px 8px; border-radius: 12px; } .profile-block .profile-name .activity { position: absolute; right: -15px; top: 50%; width: 8px; height: 8px; border-radius: 10px; background-color: var(--gray-3); transform: translateY(-50%); } .profile-block .profile-name .activity.on { background-color: var(--color-success); } .profile-block .profile-name .activity.on:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: circle-pulse 2s infinite; animation: circle-pulse 2s infinite; border-radius: 50%; box-shadow: 0 0 0 0 #4daa57 } body[data-scheme="dark"] .profile-block .profile-name .activity { background-color: var(--gray-5); } body[data-scheme="dark"] .profile-block .profile-name .activity.on { background-color: var(--color-success); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .profile-block .profile-name .activity { background-color: var(--gray-5); } body[data-scheme="auto"] .profile-block .profile-name .activity.on { background-color: var(--color-success); } } @-webkit-keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } @keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } .data-block .item { position: relative; overflow: hidden; display: flex; flex-direction: column; } .data-block .item:after { content: ""; display: block; padding-top: 100%; } .data-block .item .item-content { position: absolute; display: flex; flex-direction: column; top: 0; bottom: 0; left: 0; right: 0; padding: .75rem; z-index: 2; } .data-block .item .item-icon { position: absolute; right: 0; bottom: 0; width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(25%, 25%); transition: all 0.3s ease-in-out; opacity: .2; } .data-block .item:hover .item-icon, .data-block .item.active .item-icon { transform: translate(20%, 20%); opacity: 1; } /*-------------------------------------------------------------- ## announcement box ----------------------------------------------------------------*/ .announcement-block { position: relative; padding: 1.375em .25rem; background: #fff; } .announcement-block::before, .announcement-block::after { content: ''; position: absolute; top: 50%; width: 50px; height: 30px; transform: translateY(-50%); z-index: 1; } .announcement-block::before { left: 0; background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 20%, #fff 100%) } .announcement-block::after { right: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%) } .announcement-block .announcement-inner { position: relative; overflow: hidden; width: 100%; } .announcement-block .announcement-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 15px; } .announcement-block .announcement-list .announcement-item { position: relative; padding-left: 20px; } .announcement-block .announcement-list .announcement-item a { white-space: nowrap; } .announcement-block .announcement-list .announcement-item i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } body[data-scheme="dark"] .announcement-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="dark"] .announcement-block::before { background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%) } body[data-scheme="dark"] .announcement-block::after { background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .announcement-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="auto"] .announcement-block::before { background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%) } body[data-scheme="auto"] .announcement-block::after { background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } } /*-------------------------------------------------------------- banner box ----------------------------------------------------------------*/ .weather-info { width: 100%; } .weather-info .item { display: flex; flex-direction: column; } /*-------------------------------------------------------------- category box ----------------------------------------------------------------*/ .category-block .category-list .item { height: 50px; margin-bottom: 1rem; } .category-block .category-list .list-item:last-child { margin-bottom: 0; } .category-block .category-list .item a { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; position: relative; overflow: hidden; padding: 7px 15px; border-radius: var(--border-radius-sm); } .category-block .category-list .item a:after { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 2; background-color: rgba(0, 0, 0, .4) } .category-block .category-list .item .item-overlay { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; transform: scale(1.05); transition: all 0.3s ease-in-out; z-index: 1; } .category-block .category-list .item a:hover .item-overlay { transform: scale(1) rotate(2deg); } .category-block .category-list .item .item-overlay img { display: flex; height: auto; position: relative; width: 100%; } .category-block .category-list .item .item-name { pointer-events: none; position: relative; z-index: 10; } .category-block .category-list .item .item-action { align-items: center; display: flex; justify-content: center; pointer-events: none; position: relative; z-index: 10; } .category-block .category-list .item .item-count { align-items: center; justify-content: center; display: flex; font-size: 10px; padding: 2px 6px; border-radius: var(--border-radius-md); background-color: rgba(0, 0, 0, 0.5); transition: all 0.3s ease-in-out; } .category-block .category-list .item a:hover .item-count { opacity: 0; transform: translateX(30px) } .category-block .category-list .item .item-arrow { position: absolute; font-size: 18px; opacity: 0; transform: translateX(-30px); z-index: 10; transition: all 0.3s ease-in-out; } .category-block .category-list .item a:hover .item-arrow { opacity: 1; transform: translateX(0) } /*-------------------------------------------------------------- image hover animation ----------------------------------------------------------------*/ .hover-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; text-align: center; line-height: 1; background-color: rgba(0, 0, 0, .65); transition: .3s; opacity: 0; z-index: 2; } .hover-content i { transform: translateY(10px); transition: .3s } a:hover .hover-content { opacity: 1; visibility: visible } a:hover .hover-content i { transform: translateY(0); } /*-------------------------------------------------------------- banner box ----------------------------------------------------------------*/ .social-block a:focus, .social-block a:active, .social-block a:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff } /*-------------------------------------------------------------- blog box ----------------------------------------------------------------*/ .blog-block .blog-banner .swiper-slide { width: 42%; } .blog-block .blog-banner.banner-nextprev .swiper-pagination { bottom: 0; transform: translate(-50%, 175%); } .blog-block .blog-list li { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 5px; padding: 5px 8px 5px 12px; margin-bottom: 1rem; border-radius: var(--border-radius-xs); background-image: linear-gradient(90deg, var(--bg-light) 0%, rgba(255, 255, 255, 0) 100%); transition: .3s } .blog-block .blog-list li:hover { transform: scale(1.02) translateY(-4px); } .blog-block .blog-list li:last-child { margin-bottom: 0; } .blog-block .blog-list li.top { background-image: linear-gradient(90deg, rgba(255, 166, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) } .blog-block .blog-list li.hot { background-image: linear-gradient(90deg, rgb(255 0 0 / 4%) 0%, rgba(0, 0, 0, 0) 100%) } .blog-block .blog-list li.top::after { content: ''; position: relative; display: flex; flex-shrink: 0; width: 30px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDYuMzIxIDkuNjdjMCAuNTIxLS4wNjQuOTg3LS4xOTMgMS4zOTctLjEyOS40MS0uMzA1Ljc3NC0uNTI3IDEuMDlhMy42NCAzLjY0IDAgMCAxLS43NTYuOCA0LjM3NSA0LjM3NSAwIDAgMS0uOTA1LjU0NWMtLjMxMS4xNC0uNjI3LjI0My0uOTUuMzA4YTQuNTAyIDQuNTAyIDAgMCAxLS44OTYuMDk2aC01LjE2OHYtMi4yODVoNS4xNjhhMi43IDIuNyAwIDAgMCAuNzktLjE3NmMuMjQxLS4xLjQ0Ni0uMjMxLjYxNi0uMzk1LjE3LS4xNjQuMzAyLS4zNi4zOTUtLjU5LjA5NC0uMjMzLjE0MS0uNDk3LjE0MS0uNzlWOC42MzNjLS4wMy0uMjg3LS4wOS0uNTUxLS4xODQtLjc5MWExLjgzMyAxLjgzMyAwIDAgMC0uMzg3LS42MTUgMS42MiAxLjYyIDAgMCAwLS41OC0uMzk2Yy0uMjI5LS4xLS40OTItLjE1LS43OTEtLjE1aC01LjE1Yy0uMzA1IDAtLjUzNy4wOC0uNjk1LjIzOC0uMTU4LjE1OC0uMjM3LjM4Ny0uMjM3LjY4NVYxN2gtMi4yODVWNy42MDRjMC0uNTg1LjEwNS0xLjA4My4zMTYtMS40OTQuMjE3LS40MS40ODMtLjc0LjgtLjk5My4zMjItLjI1Mi42Ny0uNDMzIDEuMDQ2LS41NDUuMzc1LS4xMTcuNzItLjE3NiAxLjAzNy0uMTc2aDUuMTY4Yy41MTUgMCAuOTc4LjA2OCAxLjM4OC4yMDMuNDEuMTI5Ljc3LjMwNCAxLjA4MS41MjcuMzE3LjIxNy41ODQuNDY5LjguNzU2LjIyMy4yODcuNDA1LjU4OS41NDUuOTA1LjE0Ny4zMS4yNTIuNjI3LjMxNy45NS4wNjQuMzE2LjA5Ni42MTUuMDk2Ljg5NlY5LjY3Wk0zMS41MDMgMTEuOTAyYzAgLjc2OC0uMTMyIDEuNDc0LS4zOTYgMi4xMTlhNS4wMiA1LjAyIDAgMCAxLTEuMDk4IDEuNjcgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4wOTggNS41MzggNS41MzggMCAwIDEtMi4wOTIuMzg3aC0zLjA5NGE1LjYwNSA1LjYwNSAwIDAgMS0yLjEtLjM4NyA1LjAyIDUuMDIgMCAwIDEtMS42Ny0xLjA5OSA1LjEzNCA1LjEzNCAwIDAgMS0xLjEwOC0xLjY3IDUuNTQxIDUuNTQxIDAgMCAxLS4zOTUtMi4xMThWOS40OTRjMC0uNzYyLjEzMi0xLjQ2NS4zOTUtMi4xMS4yNy0uNjUuNjQtMS4yMDYgMS4xMDgtMS42N2E1LjAyMSA1LjAyMSAwIDAgMSAxLjY3LTEuMDk4IDUuNDk1IDUuNDk1IDAgMCAxIDIuMS0uMzk1aDMuMDk0YTUuNDMgNS40MyAwIDAgMSAyLjA5Mi4zOTVjLjY0NC4yNjQgMS4yMDEuNjMgMS42NyAxLjA5OS40NjguNDYzLjgzNSAxLjAyIDEuMDk4IDEuNjcuMjY0LjY0NC4zOTYgMS4zNDcuMzk2IDIuMTF2Mi40MDdabS0yLjI4NS0yLjQwOGEzLjI0IDMuMjQgMCAwIDAtLjIyLTEuMjIyIDIuNTc4IDIuNTc4IDAgMCAwLS42MDYtLjk0IDIuNTc5IDIuNTc5IDAgMCAwLS45NC0uNjA2IDMuMTkyIDMuMTkyIDAgMCAwLTEuMjA1LS4yMmgtMy4wOTRjLS40NDUgMC0uODUyLjA3My0xLjIyMS4yMi0uMzY0LjE0LS42NzcuMzQyLS45NC42MDZhMi42NzYgMi42NzYgMCAwIDAtLjYxNi45NGMtLjE0LjM2NC0uMjExLjc3MS0uMjExIDEuMjIydjIuNDA4YzAgLjQ1Mi4wNy44NjIuMjExIDEuMjMuMTQ2LjM2NC4zNTEuNjc4LjYxNS45NDEuMjY0LjI1OC41NzcuNDYuOTQuNjA3LjM3LjE0Ljc3Ny4yMSAxLjIyMi4yMWgzLjA3N2MuNDQ1IDAgLjg1LS4wNyAxLjIxMi0uMjEuMzctLjE0Ny42ODYtLjM0OS45NS0uNjA3YTIuNjggMi42OCAwIDAgMCAuNjA2LS45NGMuMTQ2LS4zNy4yMi0uNzguMjItMS4yM1Y5LjQ5M1pNMTYuNzY0IDYuNjgyaC01LjAzN1YxN0g5LjQ0MlY2LjY4Mkg0LjM5N1Y0LjM5NmgxMi4zNjd2Mi4yODZaIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iNDQuMDQ4IiB4Mj0iOS4xMDciIHkxPSIuNSIgeTI9IjI2LjI3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkM0NTEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjgyMEUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .blog-block .blog-list li.hot::after { content: ''; position: relative; display: flex; flex-shrink: 0; width: 30px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } body[data-scheme="dark"] .blog-block .blog-list li { background-image: linear-gradient(90deg, var(--gray-6) 0%, rgba(0, 0, 0, 0) 100%); } body[data-scheme="dark"] .blog-block .blog-list li.hot { background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .blog-block .blog-list li { background-image: linear-gradient(90deg, var(--gray-6) 0%, rgba(0, 0, 0, 0) 100%); } body[data-scheme="auto"] .blog-block .blog-list li.hot { background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) } } /*-------------------------------------------------------------- banner box ----------------------------------------------------------------*/ .banner-block { background: transparent; border: 0; } .banner-block .swiper { border-radius: inherit; } .banner-block .swiper-slide img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .banner-nextprev { position: relative; } .banner-nextprev .swiper-button-next, .banner-nextprev .swiper-button-prev { width: var(--swiper-navigation-size); color: var(--swiper-pagination-color); background-color: rgba(0, 0, 0, 0.2); border-radius: 100%; opacity: 0; visibility: hidden; transform-origin: 0 0 0; transition: all 0.3s ease-out 0s; } .banner-nextprev:hover .swiper-button-next, .banner-nextprev:hover .swiper-button-prev { opacity: 1; visibility: visible; z-index: 2; } .banner-nextprev:hover .swiper-button-next { right: 3%; } .banner-nextprev:hover .swiper-button-prev { left: 3%; } .banner-nextprev .swiper-button-next.swiper-button-disabled, .banner-nextprev .swiper-button-prev.swiper-button-disabled { opacity: 0; } .banner-nextprev .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.5); } .banner-nextprev .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.5); } .banner-nextprev .swiper-button-next:after, .banner-nextprev .swiper-button-prev:after { position: relative; font-size: calc((var(--swiper-navigation-size) / 2.25)); } .banner-nextprev .swiper-button-prev:after { left: -1px; } .banner-nextprev .swiper-button-next:after { left: 1px; } .banner-nextprev .swiper-pagination { --swiper-pagination-bullet-horizontal-gap: 2px; display: flex; left: 50%; width: auto; padding: 0.3125rem .3125rem; border-radius: 3rem; transform: translateX(-50%); background-color: rgb(0 0 0 / 20%); } .banner-nextprev .swiper-pagination.swiper-pagination-lock { display: none; } @media (max-width: 767.98px) { .banner-nextprev .swiper-pagination { --swiper-pagination-bullet-horizontal-gap: 2px; padding: 0.25rem .375rem; bottom: 5px; } } /*-------------------------------------------------------------- comments block ----------------------------------------------------------------*/ .comments-block { display: flex; flex-direction: column; background: #fff; } .comments-block-list { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; height: 100%; } .comments-block-list::before, .comments-block-list::after { content: ''; position: absolute; top: 0; width: 50px; height: 100%; z-index: 1; } .comments-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 20%, #fff 100%); } .comments-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%) } .comments-block-list ul { display: flex; white-space: nowrap; margin-bottom: 14px; gap: 14px; } .comments-block-list ul:last-child { margin-bottom: 0; } .comments-block-list ul li:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .comments-block-list ul li a { display: flex; align-items: center; padding: 6px 10px 6px 7px; background-color: var(--bg-light); border-radius: 100px; max-width: 200px; } .comments-block-list ul li .item-avatar { width: 20px; height: 20px; margin-right: 6px; } .comments-block-list ul li .item-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body[data-scheme="dark"] .comments-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="dark"] .comments-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%); } body[data-scheme="dark"] .comments-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } body[data-scheme="dark"] .comments-block-list ul li a { background-color: var(--gray-6); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .comments-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="auto"] .comments-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%); } body[data-scheme="auto"] .comments-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } body[data-scheme="auto"] .comments-block-list ul li a { background-color: var(--gray-6); } } /*-------------------------------------------------------------- links block ----------------------------------------------------------------*/ .links-block { background: #fff; } .links-block-list { position: relative; overflow: hidden; } .links-block-list::before, .links-block-list::after { content: ''; position: absolute; top: 0; width: 50px; height: 100%; z-index: 1; } .links-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, #fff 100%); } .links-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, #fff 100%) } .links-block-list ul { display: flex; white-space: nowrap; margin-bottom: 12px; padding: 0 2rem; gap: 12px; } .links-block-list ul:last-child { margin-bottom: 0; } .links-block-list ul li:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .links-block-list ul li a { position: relative; display: flex; align-items: center; padding: 4px; background-color: var(--bg-light); color: var(--color-muted); border-radius: 100px; max-width: 200px; } .links-block-list ul li .item-avatar { width: 36px; height: 36px; text-transform: capitalize; } .links-block-list ul li .item-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 0; margin-left: 6px; display: none; transition: .3s } .links-block-list ul li:hover .item-text { display: block; width: auto; } body[data-scheme="dark"] .links-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="dark"] .links-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%); } body[data-scheme="dark"] .links-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } body[data-scheme="dark"] .links-block-list ul li a { background-color: var(--bg-light); color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .links-block { background-image: linear-gradient(90deg, var(--bg-secondary), var(--bg-dark)); } body[data-scheme="auto"] .links-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, var(--bg-secondary) 100%); } body[data-scheme="auto"] .links-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, var(--bg-dark) 100%) } body[data-scheme="auto"] .links-block-list ul li a { background-color: var(--bg-light); color: #fff; } } /*-------------------------------------------------------------- ## tags list --------------------------------------------------------------*/ .tags-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .tags-list li { white-space: nowrap; } .tags-list li a { position: relative; display: block; color: var(--color-muted); background-color: var(--gray-1); padding: .25rem .75rem .25rem 2.25rem; border-radius: 30px; } .tags-list li.hot a { background-color: var(--outline-danger); color: var(--color-danger); } .tags-list a:hover { color: var(--color-dark); } .tags-list a::before { content: ''; position: absolute; display: block; left: 9px; top: 50%; width: 20px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(0, -50%); } .tags-list a::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01MS43MTcgMjcuNjk0YTUuMDgzIDUuMDgzIDAgMCAxLTcuMTg4IDBsLTEuOTk2LTEuOTk3YTUuMDgzIDUuMDgzIDAgMCAxIDAtNy4xODhsMS45OTYtMS45OTdhNS4wODMgNS4wODMgMCAwIDEgNy4xODggMGwxLjk5NyAxLjk5N2E1LjA4MyA1LjA4MyAwIDAgMSAwIDcuMTg4bC0xLjk5NyAxLjk5N1ptLTEzLjgyMS00LjE4YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDg0SDI5Ljk5YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgyLTUuMDgzVjIwLjY5YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgyLTUuMDgzaDIuODI0YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgzIDUuMDgzdjIuODI0Wm0xNi43MjIgMTYuMzY3YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDgzaC0yLjgyNGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRabS0xNi43MjIgMGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4MyA1LjA4M0gyOS45OWE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRaIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeDI9IjgwIiB5MT0iMjkuMTQzIiB5Mj0iMjkuMTQzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzMyQUNGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzEzOTRGMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } .tags-list li.hot a::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01MS43MTcgMjcuNjk0YTUuMDgzIDUuMDgzIDAgMCAxLTcuMTg4IDBsLTEuOTk2LTEuOTk3YTUuMDgzIDUuMDgzIDAgMCAxIDAtNy4xODhsMS45OTYtMS45OTdhNS4wODMgNS4wODMgMCAwIDEgNy4xODggMGwxLjk5NyAxLjk5N2E1LjA4MyA1LjA4MyAwIDAgMSAwIDcuMTg4bC0xLjk5NyAxLjk5N1ptLTEzLjgyMS00LjE4YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDg0SDI5Ljk5YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgyLTUuMDgzVjIwLjY5YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgyLTUuMDgzaDIuODI0YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgzIDUuMDgzdjIuODI0Wm0xNi43MjIgMTYuMzY3YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDgzaC0yLjgyNGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRabS0xNi43MjIgMGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4MyA1LjA4M0gyOS45OWE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRaIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeDI9IjgwIiB5MT0iMjkuMTQzIiB5Mj0iMjkuMTQzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZFNkY2NiIvPjxzdG9wIG9mZnNldD0iLjk5NCIgc3RvcC1jb2xvcj0iI0ZENTA0MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } .tags-list a.istag::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01Ni42MTQgMjYuMzAzSDI2Ljc4Yy0yLjAzNCAwLTMuMzktMS42OTUtMy4zOS0zLjM5czEuNjk1LTMuMzkgMy4zOS0zLjM5aDI5LjQ5NWMyLjAzNCAwIDMuMzkgMS42OTUgMy4zOSAzLjM5cy0xLjAxNyAzLjM5LTMuMDUxIDMuMzlaIi8+PGcgZmlsdGVyPSJ1cmwoI2IpIj48cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMzEuMTg4IDQ4aC0uNjc4Yy0yLjAzNS0uMzM5LTMuMDUyLTIuMDM0LTIuNzEzLTQuMDY4bDUuMDg2LTI5LjE1NmMuMzM5LTIuMDM0IDIuMDM0LTMuMDUgNC4wNjgtMi43MTIgMi4wMzQuMzQgMy4wNTEgMi4wMzQgMi43MTIgNC4wNjhsLTUuMDg1IDI5LjE1NmMtLjM0IDEuNjk1LTEuNjk1IDIuNzEyLTMuMzkgMi43MTJabTEyLjIwNCAwaC0uNjc4Yy0yLjAzNC0uMzM5LTMuMDUxLTIuMDM0LTIuNzEyLTQuMDY4bDUuMDg1LTI5LjE1NmMuMzQtMi4wMzQgMi4wMzQtMy4wNSA0LjA2OC0yLjcxMiAyLjAzNS4zNCAzLjA1MiAyLjAzNCAyLjcxMyA0LjA2OGwtNS4wODYgMjkuMTU2QzQ2LjQ0MyA0Ni45ODMgNDUuMDg3IDQ4IDQzLjM5MiA0OFoiLz48L2c+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUyLjg4NSA0MC41NDJIMjMuMzljLTIuMDM0IDAtMy4zOS0xLjY5Ni0zLjM5LTMuMzkgMC0xLjY5NiAxLjY5NS0zLjM5IDMuMzktMy4zOWgyOS40OTVjMi4wMzQgMCAzLjM5IDEuNjk0IDMuMzkgMy4zOSAwIDEuNjk0LTEuMzU2IDMuMzktMy4zOSAzLjM5WiIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSI4MCIgeTE9IjI5LjE0MyIgeTI9IjI5LjE0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRTZGNjYiLz48c3RvcCBvZmZzZXQ9Ii45OTQiIHN0b3AtY29sb3I9IiNGRDUwNDMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjM5LjgzMyIgeDI9IjM5LjgzMyIgeTE9IjEyIiB5Mj0iNDgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRjFGMUYxIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJiIiB3aWR0aD0iMzQuMTk5IiBoZWlnaHQ9IjQ2IiB4PSIyMi43MzMiIHk9IjciIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJoYXJkQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDA3XzYyIi8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQwN182MiIgcmVzdWx0PSJzaGFwZSIvPjwvZmlsdGVyPjwvZGVmcz48L3N2Zz4='); } .tags-list a.isdraft::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIiBmaWxsPSJ1cmwoI2EpIiByeD0iMzAiLz48cGF0aCBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMi4yNSIgZD0iTTI2Ljc3MiA0My44MTJoNi4wMUw1NC44MiAyMS43NzRsLTYuMDEtNi4wMS0yMi4wMzggMjIuMDM4djYuMDFaIi8+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMi4yNSIgZD0ibTQyLjggMjEuNzc0IDYuMDEgNi4wMSIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSI4MCIgeTE9IjI5LjE0MyIgeTI9IjI5LjE0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMxQkQxQzIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMEJEQUQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .tags-list a.ispending::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIiBmaWxsPSJ1cmwoI2EpIiByeD0iMzAiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC41ODYgMTYuNDA0YTIgMiAwIDAgMSAyLjgyOCAwbDggOGEyIDIgMCAxIDEtMi44MjggMi44MjhsLTgtOGEyIDIgMCAwIDEgMC0yLjgyOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTU5LjQxNCAxNi40MDRhMiAyIDAgMCAxIDAgMi44MjhsLTggOGEyIDIgMCAwIDEtMi44MjgtMi44MjhsOC04YTIgMiAwIDAgMSAyLjgyOCAwWk02MS4zMTcgMzIuMzEzYTIgMiAwIDAgMSAuMTg4IDIuODIybC03IDhhMiAyIDAgMCAxLTIuOTIuMDk3bC00LTRhMiAyIDAgMSAxIDIuODMtMi44MjhsMi40ODggMi40ODggNS41OTItNi4zOWEyIDIgMCAwIDEgMi44MjItLjE4OVpNMTggMTcuODE4YTIgMiAwIDAgMSAyLTJoMjJhMiAyIDAgMCAxIDIgMnY4YTIgMiAwIDAgMS0yIDJIMjBhMiAyIDAgMCAxLTItMnYtOFptNCAydjRoMTh2LTRIMjJaTTE4IDMzLjgxOGEyIDIgMCAwIDEgMi0yaDIyYTIgMiAwIDAgMSAyIDJ2OGEyIDIgMCAwIDEtMiAySDIwYTIgMiAwIDAgMS0yLTJ2LThabTQgMnY0aDE4di00SDIyWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeDI9IjgwIiB5MT0iMjkuMTQzIiB5Mj0iMjkuMTQzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZEQTcxNCIvPjxzdG9wIG9mZnNldD0iLjk5NCIgc3RvcC1jb2xvcj0iI0ZEOEIwNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } .tags-list a.isprivate::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTI0IDI4LjM2NWEzLjU1NiAzLjU1NiAwIDAgMSAzLjU1Ni0zLjU1NWgyNC44ODhBMy41NTYgMy41NTYgMCAwIDEgNTYgMjguMzY0djE0LjIyMmEzLjU1NiAzLjU1NiAwIDAgMS0zLjU1NiAzLjU1NkgyNy41NTZBMy41NTYgMy41NTYgMCAwIDEgMjQgNDIuNTg3VjI4LjM2NVptNy4xMTEgMy41NTZ2Ny4xMUg0OC44OXYtNy4xMUgzMS4xMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMxLjExMSAyMS44ODljMC00LjkxIDMuOTgtOC44ODkgOC44ODktOC44ODkgNC45MSAwIDguODg5IDMuOTggOC44ODkgOC44ODl2NS4zMzNhMy41NTYgMy41NTYgMCAwIDEtNy4xMTEgMFYyMS44OWExLjc3OCAxLjc3OCAwIDEgMC0zLjU1NiAwdjUuMzMzYTMuNTU2IDMuNTU2IDAgMSAxLTcuMTEgMFYyMS44OVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSI4MCIgeTE9IjI5LjE0MyIgeTI9IjI5LjE0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjk0NDciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjVDMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } @media (max-width: 991.98px) { .forum-posts .tags-list { flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; justify-content: start; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .forum-posts .tags-list::-webkit-scrollbar { display: none; } } @media (max-width: 767.98px) { .tags-list { gap: 8px; } .tags-list li a { padding: .25rem .75rem .25rem 2.125rem; } .tags-list a::before { left: 8px; } } body[data-scheme="dark"] .tags-list li a { color: var(--color-light); background-color: var(--bg-light); } body[data-scheme="dark"] .tags-list a:hover { color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .tags-list li a { color: var(--color-light); background-color: var(--bg-light); } body[data-scheme="auto"] .tags-list a:hover { color: #fff; } } /*-------------------------------------------------------------- ## Cats list --------------------------------------------------------------*/ .cats-list { } .cats-list .item { position: relative; } .cats-list .item-content { position: absolute; left: 0; bottom: 0; right: 0; padding: 1rem 1.25rem; background-color: rgba(0, 0, 0, 0.3); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .cats-list .item-content a { color: #fff; } @supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) { .cats-list .item-content { -webkit-backdrop-filter: saturate(180%) blur(4px); backdrop-filter: saturate(180%) blur(4px); } } @media (max-width: 767.98px) { .cats-list .media-2x1:after { padding-top: 50%; } } /*-------------------------------------------------------------- social list --------------------------------------------------------------*/ .social-list a:hover, .social-list a:focus, .social-list a:active { transform: scale(1.2); color: #fff; } .social-list a.weibo:hover, .social-list a.weibo:focus, .social-list a.weibo:active { background-color: #d52c2b; border-color: #d52c2b; } .social-list a.weixin:hover, .social-list a.weixin:focus, .social-list a.weixin:active { background-color: #07C160; border-color: #07C160; } .social-list a.bilibili:hover, .social-list a.bilibili:focus, .social-list a.bilibili:active { background-color: #fb7299; border-color: #fb7299; } .social-list a.youtube:hover { background-color: #ff0033; border-color: #ff0033; } .social-list a.twitter:hover { background-color: #1d9bf0; border-color: #1d9bf0; } .social-list a.zhihu:hover { background-color: #1772f6; border-color: #1772f6; } .social-list a.douyin:hover { background-color: #fe2c55; border-color: #fe2c55; } .social-list a.taobao:hover { background-color: #ff5000; border-color: #ff5000; } .social-list a.instagram:hover { background-color: #ff1a82; border-color: #ff1a82; } .social-list a.linkedin:hover { background-color: #0a66c2; border-color: #0a66c2; } .social-list a.xiaohongshu:hover { background-color: #ff2342; border-color: #ff2342; } .social-list a.kuaishou:hover { background-color: #ff3d13; border-color: #ff3d13; } .social-list a.qq:hover { background-color: #2f71f2; border-color: #2f71f2; } .social-list a.alipay:hover { background-color: #00a3ee; border-color: #00a3ee; } .social-list a.fackbook:hover { background-color: #0866ff; border-color: #0866ff; } /*-------------------------------------------------------------- forum --------------------------------------------------------------*/ .forum-tab { margin-bottom: 1rem } .forum-tab .forum-tabmenu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } @media (max-width: 991.98px) { .forum-tab .forum-tabmenu { flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; justify-content: start; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .forum-tab .forum-tabmenu::-webkit-scrollbar { display: none; } } .forum-tab .forum-tabmenu li { flex-shrink: 0; white-space: nowrap; } .forum-tab .forum-tabmenu li a { display: flex; align-items: center; gap: 4px; color: var(--color-muted); padding: 4px 8px 4px 10px; border-radius: var(--border-radius-xs); } .forum-tab .forum-tabmenu li a:hover, .forum-tab .forum-tabmenu li.active a { color: #fff; background-color: var(--color-primary); } .forum-tab .forum-tabmenu li span { font-size: 10px; } body[data-scheme="dark"] .forum-tab .forum-tabmenu li a { color: var(--gray-3); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .forum-tab .forum-tabmenu li a { color: var(--gray-3); } } .forum-category-info { overflow: hidden; display: flex; align-items: center; justify-content: center; border: 0; } .forum-category-info .forum-category-inner { position: relative; width: 100%; padding: 2.5rem 2rem; transition: all 0.3s ease-in-out; z-index: 2; } .forum-category-info.close .forum-category-inner { padding: 1.75rem; } .forum-category-info .forum-category-inner small { color: #fff; background-color: var(--color-primary); border-radius: var(--border-radius-xs); line-height: 1.5; padding: 1px 8px; } .forum-category-info .forum-category-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 1.375rem; } .forum-category-info .forum-tag-icon { width: 24px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01Ni42MTQgMjYuMzAzSDI2Ljc4Yy0yLjAzNCAwLTMuMzktMS42OTUtMy4zOS0zLjM5czEuNjk1LTMuMzkgMy4zOS0zLjM5aDI5LjQ5NWMyLjAzNCAwIDMuMzkgMS42OTUgMy4zOSAzLjM5cy0xLjAxNyAzLjM5LTMuMDUxIDMuMzlaIi8+PGcgZmlsdGVyPSJ1cmwoI2IpIj48cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMzEuMTg4IDQ4aC0uNjc4Yy0yLjAzNS0uMzM5LTMuMDUyLTIuMDM0LTIuNzEzLTQuMDY4bDUuMDg2LTI5LjE1NmMuMzM5LTIuMDM0IDIuMDM0LTMuMDUgNC4wNjgtMi43MTIgMi4wMzQuMzQgMy4wNTEgMi4wMzQgMi43MTIgNC4wNjhsLTUuMDg1IDI5LjE1NmMtLjM0IDEuNjk1LTEuNjk1IDIuNzEyLTMuMzkgMi43MTJabTEyLjIwNCAwaC0uNjc4Yy0yLjAzNC0uMzM5LTMuMDUxLTIuMDM0LTIuNzEyLTQuMDY4bDUuMDg1LTI5LjE1NmMuMzQtMi4wMzQgMi4wMzQtMy4wNSA0LjA2OC0yLjcxMiAyLjAzNS4zNCAzLjA1MiAyLjAzNCAyLjcxMyA0LjA2OGwtNS4wODYgMjkuMTU2QzQ2LjQ0MyA0Ni45ODMgNDUuMDg3IDQ4IDQzLjM5MiA0OFoiLz48L2c+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUyLjg4NSA0MC41NDJIMjMuMzljLTIuMDM0IDAtMy4zOS0xLjY5Ni0zLjM5LTMuMzkgMC0xLjY5NiAxLjY5NS0zLjM5IDMuMzktMy4zOWgyOS40OTVjMi4wMzQgMCAzLjM5IDEuNjk0IDMuMzkgMy4zOSAwIDEuNjk0LTEuMzU2IDMuMzktMy4zOSAzLjM5WiIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSI4MCIgeTE9IjI5LjE0MyIgeTI9IjI5LjE0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRTZGNjYiLz48c3RvcCBvZmZzZXQ9Ii45OTQiIHN0b3AtY29sb3I9IiNGRDUwNDMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjM5LjgzMyIgeDI9IjM5LjgzMyIgeTE9IjEyIiB5Mj0iNDgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRjFGMUYxIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJiIiB3aWR0aD0iMzQuMTk5IiBoZWlnaHQ9IjQ2IiB4PSIyMi43MzMiIHk9IjciIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJoYXJkQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDA3XzYyIi8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQwN182MiIgcmVzdWx0PSJzaGFwZSIvPjwvZmlsdGVyPjwvZGVmcz48L3N2Zz4='); } .forum-category-info .forum-category-icon img { width: 28px; } .forum-category-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: inherit; opacity: 1; transition: all 0.3s ease-in-out; z-index: 1; } .forum-category-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } body[data-scheme="dark"] .forum-category-info .forum-category-inner { color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .forum-category-info .forum-category-inner { color: #fff; } } .forum-posts .item { margin-bottom: 1rem; } .forum-posts .item:last-child { margin-bottom: 0; } .forum-posts .item .item-info .info-avatar { width: 40px; height: 40px; } .forum-posts .item .item-images { position: relative; overflow: hidden; width: 66.667%; border-radius: var(--border-radius-sm); } .forum-posts .item .item-poster { width: 100%; } .forum-posts .item .item-video .hover-content { opacity: 1; visibility: visible; transform: translateY(0); } .forum-posts .item .item-video .hover-content i { transform: translateY(0); transition: .3s } .forum-posts .item .item-badge { position: relative; top: -1px; display: inline-block; font-size: .75rem; line-height: 1.2; padding: 2px 4px; border-radius: 4px; background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } .forum-posts .item .item-badge.sticky { background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } .forum-posts .item .item-reply { position: absolute; left: 20px; right: 20px; bottom: 60px; display: flex; align-items: center; background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); box-shadow: var(--shadow); padding: 0.75rem 0.875rem; gap: 10px; transform: translateY(10px); transition: all 0.3s ease-in-out; z-index: 3; opacity: 0; visibility: hidden; } .forum-posts .item .item-reply.active { transform: translateY(0px); visibility: visible; opacity: 1; } .forum-posts .item .item-reply .reply-avatar { width: 30px; height: 30px; } .forum-posts .item .item-reply .reply-input { background-color: transparent; border-color: transparent; padding: 2px; } .forum-posts .item .item-reply .reply-action { flex-shrink: 0; } .forum-posts .item .item-actions a { color: var(--color-muted); } .forum-posts .item .item-actions a:hover { color: var(--color-dark); } body[data-scheme="dark"] .forum-posts .item .item-reply { background-color: var(--bg-secondary); border-color: var(--border-secondary); box-shadow: none; } body[data-scheme="dark"] .forum-posts .item .item-actions a { color: var(--color-muted); } body[data-scheme="dark"] .forum-posts .item .item-actions a:hover { color: var(--color-dark); } body[data-scheme="dark"] .forum-posts .item .item-actions a { color: var(--color-muted); } body[data-scheme="dark"] .forum-posts .item .item-actions a:hover { color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .forum-posts .item .item-reply { background-color: var(--bg-secondary); border-color: var(--border-secondary); box-shadow: none; } body[data-scheme="auto"] .forum-posts .item .item-actions a { color: var(--color-muted); } body[data-scheme="auto"] .forum-posts .item .item-actions a:hover { color: var(--color-dark); } body[data-scheme="auto"] .forum-posts .item .item-actions a { color: var(--color-muted); } body[data-scheme="auto"] .forum-posts .item .item-actions a:hover { color: #fff; } } /*-------------------------------------------------------------- forum post comments --------------------------------------------------------------*/ .forum-posts .item .item-comments { background-color: var(--bg-light); border-radius: var(--border-radius-sm); padding: 12px; } .forum-posts .item .item-comments li { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; } .forum-posts .item .item-comments li:last-child { margin-bottom: 0; } .forum-posts .item .item-comments li .comment-avatar { width: 20px; height: 20px; } .forum-posts .item .item-actions a.active { color: var(--color-danger); } body[data-scheme="dark"] .forum-posts .item .item-comments { background-color: var(--gray-6); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .forum-posts .item .item-comments { background-color: var(--gray-6); } } /*-------------------------------------------------------------- forum post action --------------------------------------------------------------*/ .action-button.active { color: var(--color-danger); } .action-button .action-icon { transition: color 100ms ease; } .action-button.active .action-icon { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); } .like-action { position: relative; } .like-action.active .action-icon::before { content: "\e8e9"; } .star-action.active .action-icon::before { content: "\e8eb"; } .like-action .like-emoji-list { position: absolute; left: 50%; bottom: 100%; opacity: 0; visibility: hidden; transform: scale(0) translate(-50%, -15%); transform-origin: 0% 100%; transition: transform .5s cubic-bezier(.5, 0, 0, 1) 0s, opacity .5s cubic-bezier(.5, 0, 0, 1) 0s; } .like-action:hover .like-emoji-list { opacity: 1; visibility: visible; transform: scale(1) translate(-50%, -15%); } .like-action .like-emoji-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; background-color: var(--gray-6); border: 1px solid var(--gray-5); padding: 5px; border-radius: 100px; width: 200px; } .like-action .like-emoji-list img { flex-shrink: 0; width: 32px; transition: all 500ms ease-in-out; } .like-action .like-emoji-list img:hover { transform: scale(1.2); } /*-------------------------------------------------------------- ## Post --------------------------------------------------------------*/ .post-title { color: var(--color-dark); } .post-content { font-size: 1rem; line-height: 1.75rem; word-break: normal; word-wrap: break-word; } .post-content > *:first-child { margin-top: 0; } .post-content > *:last-child { margin-bottom: 0; } .post-content a:hover, .post-content a:focus { text-decoration: none; } .post-content p { margin: 0 0 1rem; } .post-content hr { margin: 4rem auto; } .post-content > .wp-block-cover.alignwide:first-child, .post-content > .wp-block-cover.alignfull:first-child { margin-top: 0; } /* Font Families ----------------------------- */ .post-content h1, .post-content h2, .post-content h3 { line-height: 1.5; margin: 2rem 0 1.5rem; color: var(--color-body); } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem 0 1.5rem; } .post-content h2 { position: relative; padding: 0 0 0 1.5rem; } .post-content h2:before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 24px; border-radius: 10px; background: var(--color-primary); background: linear-gradient(to top, var(--color-primary), var(--color-primary)); } .post-inner .post-content > .wp-block-cover.alignwide:first-child, .post-inner .post-content > .wp-block-cover.alignfull:first-child { margin-top: 0; } @media (max-width: 767.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 2rem auto 1rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem auto 1rem; } .post-content h2:before { top: 5px; height: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 1rem auto 1rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 1rem auto 1rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 1.5rem auto 1rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 1.5rem auto 1rem; } } /* Font link ----------------------------- */ .post-content p > a, .post-content li > a, .post-content dd > a, .post-content td a, .post-content th a, .post-content h1 a, .post-content h2 a, .post-content h3 a, .post-content h4 a, .post-content h5 a, .post-content h6 a, .post-content em a, .post-content strong a { box-shadow: 0 -2px 0 0 var(--color-danger) inset; transition: 0.2s ease-in; } .post-content p > a:hover, .post-content li > a:hover, .post-content dd > a:hover, .post-content td a:hover, .post-content th a:hover, .post-content h1 a:hover, .post-content h2 a:hover, .post-content h3 a:hover, .post-content h4 a:hover, .post-content h5 a:hover, .post-content h6 a:hover, .post-content em a:hover, .post-content strong a:hover { color: var(--color-dark); box-shadow: 0 -2px 0 0 var(--color-danger) inset; } body[data-scheme="dark"] .post-content p > a:hover, body[data-scheme="dark"] .post-content li > a:hover, body[data-scheme="dark"] .post-content dd > a:hover, body[data-scheme="dark"] .post-content td a:hover, body[data-scheme="dark"] .post-content th a:hover, body[data-scheme="dark"] .post-content h1 a:hover, body[data-scheme="dark"] .post-content h2 a:hover, body[data-scheme="dark"] .post-content h3 a:hover, body[data-scheme="dark"] .post-content h4 a:hover, body[data-scheme="dark"] .post-content h5 a:hover, body[data-scheme="dark"] .post-content h6 a:hover, body[data-scheme="dark"] .post-content em a:hover, body[data-scheme="dark"] .post-content strong a:hover { color: #fff; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .post-content p > a:hover, body[data-scheme="auto"] .post-content li > a:hover, body[data-scheme="auto"] .post-content dd > a:hover, body[data-scheme="auto"] .post-content td a:hover, body[data-scheme="auto"] .post-content th a:hover, body[data-scheme="auto"] .post-content h1 a:hover, body[data-scheme="auto"] .post-content h2 a:hover, body[data-scheme="auto"] .post-content h3 a:hover, body[data-scheme="auto"] .post-content h4 a:hover, body[data-scheme="auto"] .post-content h5 a:hover, body[data-scheme="auto"] .post-content h6 a:hover, body[data-scheme="auto"] .post-content em a:hover, body[data-scheme="auto"] .post-content strong a:hover { color: #fff; } } /* Post quote style ----------------------------- */ .wp-block-quote { border-radius: var(--border-radius-xs); background-color: var(--bg-light); } .wp-block-quote a, .wp-block-quote p > a { border-color: var(--border-muted); } .wp-block-quote a, .wp-block-quote a:hover { color: inherit; } /* Button */ .wp-block-button__link { background-color: var(--bg-secondary); } .wp-block-button__link:hover { background-color: var(--gray-5); color: #fff; } body[data-scheme="dark"] .wp-block-quote { background-color: var(--gray-5); } body[data-scheme="dark"] .wp-block-quote a, body[data-scheme="dark"] .wp-block-quote p > a { border-color: var(--gray-3); } /* Button */ body[data-scheme="dark"] .wp-block-button__link { background-color: var(--gray-5); } body[data-scheme="dark"] .wp-block-button__link:hover { background-color: var(--gray-6); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .wp-block-quote { background-color: var(--gray-5); } body[data-scheme="auto"] .wp-block-quote a, body[data-scheme="auto"] .wp-block-quote p > a { border-color: var(--gray-3); } /* Button */ body[data-scheme="auto"] .wp-block-button__link { background-color: var(--gray-5); } body[data-scheme="auto"] .wp-block-button__link:hover { background-color: var(--gray-6); } } /* Alignment Classes ------------------------- */ .post-content .alignnone, .wp-block-image, .wp-block-embed { margin: 1.5rem 0 } .alignright, a img.alignright, .wp-block-image .alignright { float: right; margin: .25rem 0 1.25rem 1.875rem } .alignleft, a img.alignleft, .wp-block-image .alignleft { float: left; margin: .25rem 1.875rem 1.25rem 0 } .aligncenter, div.aligncenter { display: block; margin: 2.5rem auto } .aligncenter > img, div.aligncenter > img { margin: 0 auto } p img.alignnone, img.alignnone { display: block; margin: 2.5rem 0 } /*-------------------------------------------------------------- Ul - style --------------------------------------------------------------*/ .post-content ul, .post-content ol { padding: 0 0 0 1.25rem; margin-bottom: 1.5rem; } .post-content ul { list-style: none; padding: 0; } .post-content ul ul, .post-content ol ol, .post-content ul ol, .post-content ol ul { margin-bottom: 1rem; } .post-content ul ul { list-style: circle; margin: 1rem 0; padding-left: 1.125rem; } .post-content ul ul ul { list-style: square; } .post-content ol { list-style: decimal; } .post-content ol ol { list-style: lower-alpha; } .post-content ol ol ol { list-style: lower-roman; } .post-content li { position: relative; margin: 0 0 1rem; } .post-content ul li { padding-left: 1.5rem; } .post-content ul li:before { content: ""; position: absolute; top: 4px; left: 0; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill-rule='evenodd' d='M10.001.833A9.17 9.17 0 0 0 .834 10a9.17 9.17 0 0 0 9.167 9.167A9.17 9.17 0 0 0 19.167 10 9.17 9.17 0 0 0 10.001.833zm4.339 7.256c.325-.325.325-.853 0-1.179s-.853-.325-1.178 0l-4.411 4.411L6.84 9.411c-.325-.325-.853-.325-1.179 0s-.325.853 0 1.178l2.5 2.5c.325.325.853.325 1.179 0l5-5z' fill='%2300A656'/%3E%3C/svg%3E"); } .post-content li li { margin: 0 0 .75rem; padding-left: 0; } .post-content li li:before { display: none; } .post-content li img { display: inline-block; } /*-------------------------------------------------------------- block table style --------------------------------------------------------------*/ table, .wp-block-table { max-width: 100%; width: 100%; min-width: 240px; border-collapse: collapse; } table thead, table tfoot, .wp-block-table thead, .wp-block-table tfoot { text-align: center; } .wp-block-table thead { border-color: var(--border-color); } table td, table th, .wp-block-table td, .wp-block-table th { padding: 5px 10px; border: 1px solid var(--border-color); } table figcaption, .wp-block-table figcaption { color: var(--color-muted); margin-bottom: 0; } table.is-style-regular .has-background, table.is-style-stripes .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, table.is-style-stripes .has-background tbody tr, .wp-block-table.is-style-regular .has-background, .wp-block-table.is-style-stripes .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, .wp-block-table.is-style-stripes .has-background tbody tr { color: var(--color-muted); } table.is-style-stripes th, table.is-style-stripes td, .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-width: 0; } table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--bg-secondary); } table.is-style-stripes .has-background tbody tr:nth-child(odd), .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { background-color: var(--bg-secondary); } table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; border: 0; text-align: center; line-height: 2; vertical-align: middle; word-break: normal; } table.wp-calendar-table th { font-weight: bold; } table.wp-calendar-table thead, table.wp-calendar-table tbody { color: var(--color-dark); border: 1px solid var(--border-color); } table.wp-calendar-table caption { font-weight: bold; text-align: left; margin-bottom: .75rem; color: var(--gray-5); } body[data-scheme="dark"] table.wp-calendar-table caption { color: var(--gray-3); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] table.wp-calendar-table caption { color: var(--gray-3); } } /* block table */ .wp-block-table { margin: 0 0 1.25rem; } .wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright { display: table; width: auto; } .wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.alignright td, .wp-block-table.alignright th { word-break: break-word; } .wp-block-table.is-style-stripes { border-width: 0; } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { border-color: transparent; } .wp-block-table table[style*="border-style"] > *, .wp-block-table table[style*="border-style"] td, .wp-block-table table[style*="border-style"] th, .wp-block-table table[style*="border-style"] tr { border-style: inherit; } .wp-block-table table[style*="border-width"] > *, .wp-block-table table[style*="border-width"] td, .wp-block-table table[style*="border-width"] th, .wp-block-table table[style*="border-width"] tr { border-width: inherit; } /**-------------------------------------------------------------- ## Post embed wrapper --------------------------------------------------------------**/ .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*-------------------------------------------------------------- wp caption style --------------------------------------------------------------*/ .wp-caption { max-width: 100%; } /*-------------------------------------------------------------- ## Post video style --------------------------------------------------------------*/ .post-video .wp-video { margin-top: 0; } /*-------------------------------------------------------------- ## thumbnail style --------------------------------------------------------------*/ .post-thumbnail img { width: 100%; height: auto; } /*-------------------------------------------------------------- ## Post excerpt --------------------------------------------------------------*/ .post-excerpt { position: relative; font-size: 1rem; line-height: 1.85; word-break: normal; word-wrap: break-word; } /**-------------------------------------------------------------- ## Post hidden tips --------------------------------------------------------------**/ .post-password-content { position: relative; } .post-password-content form { max-width: 400px; margin: 0 auto; } /*-------------------------------------------------------------- forum post post info --------------------------------------------------------------*/ .post-info .info-avatar { width: 42px; height: 42px; } .post-info .info-info .info-name { text-transform: lowercase; } /*-------------------------------------------------------------- forum post post header --------------------------------------------------------------*/ .post-header .header-badge { position: relative; top: -3px; display: inline-block; font-size: .75rem; line-height: 1.2; padding: 2px 4px; border-radius: 4px; background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } .post-header .header-badge.sticky { background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } /*-------------------------------------------------------------- forum post likes --------------------------------------------------------------*/ .post-likes .post-likes-avatar a { width: 24px; height: 24px; margin: 4px; } /* -------------------------------- ## forum post hide content ---------------------------------- */ .post-hide-content .post-hide-icon { width: 81px; margin: 0 auto 2rem; } /* -------------------------------- ## forum post download list ---------------------------------- */ .post-download-list { display: flex; flex-direction: column; gap: 10px 0; } .post-download-list .item { position: relative; display: flex; justify-content: space-between; align-items: center; background: var(--gray-1); border-radius: var(--border-radius-sm); gap: 10px; padding: 10px 10px 10px 64px; } .post-download-list .item .item-icon { position: absolute; left: 10px; top: 7px; width: 42px; height: 42px; background-repeat: no-repeat; background-size: contain; background-position: center; } .post-download-list .item .item-content { display: flex; flex-direction: row; flex-shrink: 0; } .post-download-list .item .item-action { border-radius: var(--border-radius-xs); } .post-copy-action { padding: 7px 12px; background-color: var(--gray-5); border-radius: var(--border-radius-xs); } .post-copy-action .post-copy-content { white-space: nowrap; overflow-x: scroll; overflow-y: hidden; justify-content: start; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .post-copy-action .post-copy-content::-webkit-scrollbar { display: none } @media (min-width: 768px) and (max-width: 991.98px) { .post-download-list .item { padding: 10px 10px 10px 56px; } .post-download-list .item .item-icon { left: 10px; top: 9px; width: 36px; height: 36px; } } @media (max-width: 767.98px) { .post-download-list .item { padding: 10px 10px 10px 48px; } .post-download-list .item .item-icon { left: 10px; top: 9px; width: 32px; height: 32px; } } body[data-scheme="dark"] .post-download-list .item { background: var(--bg-light); } body[data-scheme="dark"] .post-copy-action { background-color: var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .post-download-list .item { background: var(--bg-light); } body[data-scheme="auto"] .post-copy-action { background-color: var(--gray-5); } } /* -------------------------------- ## Post vote block 2024.06.16 ---------------------------------- */ .post-vote-block { position: relative; background-color: var(--gray-6); border-radius: var(--border-radius-sm); padding: 12px; margin-top: .75rem; } .post-vote-block .post-vote-list { display: flex; flex-direction: column; gap: 10px; } .post-vote-block .post-vote-list .post-vote-item { position: relative; overflow: hidden; border: 1px solid var(--gray-5); border-radius: var(--border-radius-xs); transition: all 0.3s ease-in-out; } .post-vote-block .post-vote-list .post-vote-item a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: var(--color-muted); z-index: 2; } .post-vote-block .post-vote-list .post-vote-item:hover { border-color: var(--border-muted); } .post-vote-block .post-vote-list .post-vote-item:hover a { color: #fff; } .post-vote-block .post-vote-list .post-vote-item .post-vote-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: #3a3a3c; opacity: 0; z-index: 1; transition: all 0.3s ease-in-out; } .post-vote-block .post-vote-list .post-vote-item.active .post-vote-progress { background-color: var(--gray-5); } .post-vote-block .post-vote-list .post-vote-number { opacity: 0; } .post-vote-block .post-vote-list.voted .post-vote-item { border: 1px solid var(--gray-5); } .post-vote-block .post-vote-list.voted .post-vote-number { opacity: 1; } .post-vote-block .post-vote-list.voted .post-vote-item a { color: var(--color-muted); } .post-vote-block .post-vote-list.voted .post-vote-item.active { border-color: var(--border-muted); } .post-vote-block .post-vote-list.voted .post-vote-item.active a { color: #fff; } .post-vote-block .post-vote-list.voted .post-vote-item .post-vote-progress { opacity: 1; } .post-pk-block { position: relative; background-color: var(--gray-6); border-radius: var(--border-radius-sm); padding: 12px; margin-top: .75rem; } .post-pk-block .post-pk-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .post-pk-block .post-pk-list .post-pk-item, .post-pk-block .post-pk-list .post-pk-icon { display: flex; flex: 0 0 auto; } .post-pk-block .post-pk-list .post-pk-icon { align-items: center; } .post-pk-block .post-pk-list .post-pk-icon div { display: flex; justify-content: center; flex-direction: column; flex: 1 1 auto; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAzNiAyOS4xIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2Utd2lkdGg6MH08L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+WbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxwYXRoIGQ9Ik0zLjYgMjkuMUgwTDUuMiAwaDUuN2MyLjkgMCA1IC43IDYuNCAyLjIgMS4zIDEuNSAxLjcgMy42IDEuMyA2LjMtLjMgMS43LS45IDMuMS0xLjkgNC4zcy0yLjIgMi4xLTMuNyAyLjhjLTEuNS42LTMuMSAxLTUgMUg1LjhMMy42IDI5LjFabTctMjUuN0g4LjJsLTEuNyA5LjhoMS43YzIgMCAzLjUtLjQgNC41LTEuM3MxLjctMi4xIDItMy44Yy4zLTEuNSAwLTIuNy0uNy0zLjUtLjctLjgtMS44LTEuMi0zLjQtMS4yWk0yMC4yIDI5LjFoLTMuNkwyMS44IDBoMy42bC0yLjIgMTIuNEwzMS45IDBoNGwtOS4xIDEyLjggNC4zIDE2LjNoLTMuOWwtMy41LTEzLjktMS42IDIuMkwyMCAyOS4xWiIgY2xhc3M9ImNscy0xIi8+PC9nPjwvc3ZnPg=='); } .post-pk-block .post-pk-list .post-pk-item { position: relative; transition: all 0.3s ease-in-out; } .post-pk-block .post-pk-list .post-pk-item:hover { transform: scale(1.1); } .post-pk-block .post-pk-list .post-pk-item .post-pk-content { position: relative; display: flex; justify-content: center; flex-direction: column; flex: 1 1 auto; min-width: 0; word-wrap: break-word; z-index: 1; } .post-pk-block .post-pk-list .post-pk-item { position: relative; } .post-pk-block .post-pk-list .post-pk-item .post-pk-content { color: #fff; } .post-pk-block .post-pk-list .post-pk-item:first-child { width: 40%; } .post-pk-block .post-pk-list .post-pk-item:first-child .post-pk-content { padding: 8px 10px 8px 24px; } .post-pk-block .post-pk-list .post-pk-item:first-child::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; border-top-left-radius: 60px; border-bottom-left-radius: 100px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background-color: var(--red); transform: translateX(0px) skewX(-10deg); } .post-pk-block .post-pk-list .post-pk-item:last-child { width: 40%; } .post-pk-block .post-pk-list .post-pk-item:last-child .post-pk-content { padding: 8px 24px 8px 18px; } .post-pk-block .post-pk-list .post-pk-item:last-child::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top-right-radius: 100px; border-bottom-right-radius: 60px; background-color: var(--blue); transform: translateX(0px) skewX(170deg); } .post-pk-block .post-pk-list .post-pk-content .post-pk-number { display: none; } .post-pk-block .post-pk-list.current .post-pk-content { font-size: 12px; } .post-pk-block .post-pk-list.current .post-pk-content .post-pk-body { display: flex; flex-direction: column; } .post-pk-block .post-pk-list.current .post-pk-content .post-pk-number { display: block; font-size: 20px; } /* -------------------------------- ## Comment ---------------------------------- */ .comment-respond { display: flex; flex-direction: row; gap: 8px; } .comment .comment-respond { margin-top: 20px; } .comment-respond .comment-avatar { width: 32px; height: 32px; } .comment-respond .comment-info a:hover { opacity: 1 !important; } .comment-respond .comment-body { flex: 1 1 auto; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); transition: all 0.3s ease-in-out; } .comment-respond .comment-body.active { border-color: var(--color-primary); } .comment-respond .comment-input { background-color: transparent; border-color: transparent; padding: 1px; height: 40px; transition: all 0.3s ease-in-out; resize: none; overflow-y: auto; } .comment-respond .comment-body.active .comment-input { height: 80px; } .comment-respond .comment-input::-webkit-scrollbar { width: 6px; height: 6px; } .comment-respond .comment-input::-webkit-scrollbar-thumb { background-color: var(--bg-light); border-radius: 4px; } .comment { margin-top: 30px; } .comment .comment-content { display: flex; flex-direction: row; gap: 8px; } .comment .comment-avatar { width: 32px; height: 32px; flex-basis: 32px; } .comment .comment-body { flex: 1 1 auto; } .comment .author-badge { font-size: 11px; font-weight: 400; padding: 0 4px; border-radius: 4px; color: var(--color-primary); background-color: var(--outline-primary); border: 1px solid var(--outline-primary); } .comment .comment-badge { display: flex; flex-shrink: 0; width: 26px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } .comment .children { margin-left: 40px; } .comment .children .comment { margin-top: 20px; } .comment .children .comment .comment-content { display: flex; flex-direction: row; gap: 8px; } .comment .children .comment-respond .comment-avatar, .comment .children .comment .comment-avatar { width: 24px; height: 24px; flex-basis: 24px; } .comment .children .comment .comment-body { flex: 1 1 auto; } /*-------------------------------------------------------------- ## widget search style --------------------------------------------------------------*/ .widget_search .search-form { position: relative; } .widget_search .search-form label { display: block; margin: 0; } .widget_search .search-form .search-field { width: 100%; padding: 0.5rem 0.75rem; background-color: transparent; border: 1px solid var(--gray-3); border-radius: var(--border-radius-sm); } .widget_search .search-form .search-field:focus { border-color: var(--color-primary) } .widget_search .search-form .search-submit { display: none; } body[data-scheme="dark"] .widget_search .search-form .search-field { border: 1px solid var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_search .search-form .search-field { border: 1px solid var(--gray-5); } } /*-------------------------------------------------------------- ## widget recent entries style --------------------------------------------------------------*/ .widget_recent_entries ul { padding-left: 1rem; } .widget_recent_entries ul li { margin-bottom: 0.5rem; list-style-type: circle; } .widget_recent_entries ul li a { display: block; } .widget_recent_entries ul li span { color: #8a92a9; font-size: 0.75rem; } /*-------------------------------------------------------------- ## widget categories + tag cloud style --------------------------------------------------------------*/ .widget_categories ul, .tagcloud { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .widget_categories ul li a, .tagcloud a { position: relative; display: flex; align-items: center; font-size: .875rem; padding: .3125rem .625rem; border: 1px solid var(--bg-light); background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .widget_categories ul li a { font-size: .875rem; color: var(--color-muted); } .widget_categories ul li a:hover { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .widget_categories .postform { width: 100%; padding: .5rem .75rem; border-radius: var(--border-radius-sm); border-color: var(--gray-3); outline: 0; } .widget_categories .postform:active, .widget_categories .postform:focus { border-color: var(--gray-2); } .tagcloud a { font-size: .875rem !important; padding: 0.3125rem 0.625rem; color: var(--color-muted); } .tagcloud a:hover { border: 1px solid var(--color-primary); background-color: var(--color-primary); color: #fff; } .tagcloud a span { font-size: .75rem; color: var(--color-muted); } body[data-scheme="dark"] .widget_categories ul li a { color: var(--color-light); } body[data-scheme="dark"] .widget_categories ul li a:hover { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_categories ul li a { color: var(--color-light); } body[data-scheme="auto"] .widget_categories ul li a:hover { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } } /*-------------------------------------------------------------- ## widget other style --------------------------------------------------------------*/ .widget_meta li, .widget_archive li { position: relative; font-size: 0.875rem; color: var(--color-muted); padding: 0.75rem 0; text-transform: uppercase; border-top: 1px solid var(--gray-3); display: flex; flex-direction: row; align-items: center; text-align: justify; justify-content: space-between; } .widget_archive select { width: 100%; font-size: 1rem; padding: 0.625rem 1rem; color: var(--color-muted); background-color: var(--bg-light); border-color: var(--gray-3); border-radius: var(--border-radius-sm); } body[data-scheme="dark"] .widget_meta li, body[data-scheme="dark"] .widget_archive li { color: var(--color-light); border-top: 1px solid var(--gray-5); } body[data-scheme="dark"] .widget_archive select { color: var(--color-light); background-color: var(--gray-5); border-color: var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_meta li, body[data-scheme="auto"] .widget_archive li { color: var(--color-light); border-top: 1px solid var(--gray-5); } body[data-scheme="auto"] .widget_archive select { color: var(--color-light); background-color: var(--gray-5); border-color: var(--gray-5); } } /*-------------------------------------------------------------- ## widget blogroll style --------------------------------------------------------------*/ .blogroll li { position: relative; display: flex; flex-direction: column; font-size: .75rem; padding: .75rem 3.5rem .75rem 1rem; color: var(--color-muted); background-color: var(--bg-light); border-radius: var(--border-radius-sm); margin-bottom: 1rem; } .blogroll li:last-child { margin-bottom: 0; } .blogroll li a { font-size: .875rem; text-transform: uppercase; } .blogroll li a img { position: absolute; top: 50%; right: .75rem; width: 2.5rem; height: 2.5rem; -o-object-fit: cover; object-fit: cover; transform: translateY(-50%); } body[data-scheme="dark"] .blogroll li { background-color: var(--bg-muted); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .blogroll li { background-color: var(--bg-muted); } } /*-------------------------------------------------------------- ## widget_media_image style --------------------------------------------------------------*/ .widget_media_image img { max-width: 100%; height: auto; width: auto; } /*-------------------------------------------------------------- ## widget_recent_comments style --------------------------------------------------------------*/ .widget_recent_comments ul li { font-size: 0.875rem; padding: 0.75rem 0; text-transform: uppercase; border-top: 1px solid var(--gray-3); } .widget_recent_comments ul li span { margin-right: 5px; } .widget_recent_comments ul li:first-child { border-top: 0; padding-top: 0; } .widget_recent_comments ul li:last-child { padding-bottom: 0; } body[data-scheme="dark"] .widget_recent_comments ul li { border-top: 1px solid var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_recent_comments ul li { border-top: 1px solid var(--gray-5); } } /*-------------------------------------------------------------- ## widget_recent_comments style --------------------------------------------------------------*/ .widget_nav_menu ul li { position: relative; text-transform: none; margin-bottom: .5rem; } .widget_nav_menu ul li:last-child { margin-bottom: 0; } .widget_nav_menu ul li a { display: block; padding: .5rem .75rem; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .widget_nav_menu ul li.menu-item-has-children::after { content: ""; display: block; position: absolute; top: 15px; right: 15px; height: 6px; width: 6px; border-left: 1px solid var(--gray-3); border-bottom: 1px solid var(--gray-3); transform: rotate(315deg); transition: all 0.2s; } .widget_nav_menu ul li.menu-item-has-children:hover::after { margin-top: 2px; transform: rotate(135deg); } .widget_nav_menu ul li ul { margin-top: .5rem; } .widget_nav_menu ul li > ul { display: none; } .widget_nav_menu ul li:hover > ul { display: block; } .widget_nav_menu ul li > ul ul li a { background-color: var(--bg-light); } body[data-scheme="dark"] .widget_nav_menu ul li a { background-color: var(--gray-5); } body[data-scheme="dark"] .widget_nav_menu ul li.menu-item-has-children::after { border-left: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); } body[data-scheme="dark"] .widget_nav_menu ul li > ul ul li a { background-color: var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_nav_menu ul li a { background-color: var(--gray-5); } body[data-scheme="auto"] .widget_nav_menu ul li.menu-item-has-children::after { border-left: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); } body[data-scheme="auto"] .widget_nav_menu ul li > ul ul li a { background-color: var(--gray-5); } } /*-------------------------------------------------------------- ## widget_calendar style --------------------------------------------------------------*/ .widget_calendar table { width: 100%; min-width: auto; margin: 0; border-collapse: collapse; } .widget_calendar caption { padding: 10px 0; border-bottom: 0; color: var(--color-muted); } .widget_calendar th, .widget_calendar td { padding: .5rem .25rem; text-align: center; color: var(--color-muted); } .widget_calendar tbody td a { position: relative } .widget_calendar tbody td a::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; background: var(--color-success); border-radius: 10px; margin: 0 0 0 -2px } .widget_calendar td#today { font-weight: bold } /*-------------------------------------------------------------- ## widget_media_gallery style --------------------------------------------------------------*/ .widget_media_gallery .gallery { padding: 0.75rem 0.75rem 0; margin-bottom: 0; } .widget_media_gallery .gallery-caption { padding: 0.25rem; } /*-------------------------------------------------------------- ## widget_rss style --------------------------------------------------------------*/ .widget_rss .widget-title .rsswidget:first-child { float: right; } .widget_rss ul li { text-transform: uppercase; margin-bottom: 10px; padding-top: 12px; border-top: 1px solid var(--gray-3); } .widget_rss ul li:first-child { border: none; padding-top: 0; } .widget_rss ul li .rsswidget { font-size: 0.75rem; display: block; } .widget_rss ul li .rss-date { font-size: 0.75rem; color: var(--color-muted); } .widget_rss ul li .rssSummary { font-size: 0.75rem; margin-top: 5px; color: var(--color-muted); } .widget_rss ul li cite { font-size: 0.75rem; font-style: normal; color: var(--color-muted); } body[data-scheme="dark"] .widget_rss ul li { border-top: 1px solid var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .widget_rss ul li { border-top: 1px solid var(--gray-5); } } /*-------------------------------------------------------------- ## widget authors --------------------------------------------------------------*/ .widget-authors { display: flex; flex-direction: column; gap: 20px; } .widget-authors .item { display: flex; flex-direction: row; gap: 15px; min-width: 0; word-wrap: break-word; } .widget-authors .item .flex-avatar { width: 48px; height: 48px; } .widget-authors .item .item-content { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; min-width: 0; } .widget-authors .item .item-badge { position: relative; display: inline-block; top: 1px; width: 20px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } /*-------------------------------------------------------------- ## Pagination (WordPress CSS classes) --------------------------------------------------------------*/ .pagination-container { position: relative; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 0; gap: 10px; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important; word-wrap: normal !important; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 8px; } .page-numbers, .post-page-numbers { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; text-align: center; padding: 0 .375rem; background-color: var(--bg-light); color: var(--color-muted); border-radius: var(--border-radius-xs); } .page-numbers:hover, .page-numbers.current, .post-page-numbers:hover, .post-page-numbers.current { color: #fff; background-color: var(--color-primary); } .page-numbers i { font-size: 1.25rem; } .page-numbers.dots { min-width: auto; text-align: center; padding: 0 0.375rem; background-color: transparent; border-radius: 0; } .page-numbers.dots:hover { color: var(--color-muted); background-color: transparent; } @media (max-width: 767.98px) { .pagination-container { margin: 1rem 0 0 } .page-numbers { min-width: 32px; height: 32px; } } .pagination-quick-jumper { margin-left: .25rem; } .pagination-quick-jumper .quick-jumper-input { min-width: 30px; background: var(--bg-light); color: var(--color-muted); border-radius: var(--border-radius-xs); text-align: center; border: 0; padding: .25rem; margin: 0 .25rem; } .pagination-quick-jumper .quick-jumper-input::-webkit-inner-spin-button, .pagination-quick-jumper .quick-jumper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pagination-quick-jumper .quick-jumper-input { -moz-appearance: textfield; } body[data-scheme="dark"] .page-numbers, body[data-scheme="dark"] .post-page-numbers { background-color: var(--gray-5); color: var(--color-light); } body[data-scheme="dark"] .page-numbers:hover, body[data-scheme="dark"] .page-numbers.current, body[data-scheme="dark"] .post-page-numbers:hover, body[data-scheme="dark"] .post-page-numbers.current { color: #fff; background-color: var(--color-primary); } body[data-scheme="dark"] .page-numbers.dots:hover { color: var(--color-muted); } body[data-scheme="dark"] .pagination-quick-jumper .quick-jumper-input { background: var(--bg-light); color: var(--color-light); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .page-numbers, body[data-scheme="auto"] .post-page-numbers { background-color: var(--gray-5); color: var(--color-light); } body[data-scheme="auto"] .page-numbers:hover, body[data-scheme="auto"] .page-numbers.current, body[data-scheme="auto"] .post-page-numbers:hover, body[data-scheme="auto"] .post-page-numbers.current { color: #fff; background-color: var(--color-primary); } body[data-scheme="auto"] .page-numbers.dots:hover { color: var(--color-muted); } body[data-scheme="auto"] .pagination-quick-jumper .quick-jumper-input { background: var(--bg-light); color: var(--color-light); } } /*-------------------------------------------------------------- ## post navigation style --------------------------------------------------------------*/ .post-in-navigation span, .post-in-navigation a { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; margin: .3125rem; text-align: center; color: var(--color-muted); border-radius: var(--border-radius-xs); background-color: var(--gray-2); } .post-in-navigation a:focus, .post-in-navigation a:active, .post-in-navigation a:hover, .post-in-navigation .current { color: #fff; background-color: var(--color-primary); } .post-in-navigation .current, .post-in-navigation a.prev, .post-in-navigation a.next { display: flex; } .post-in-navigation a.dots { min-width: 0; background-color: transparent; color: var(--color-muted); } @media (max-width: 767.98px) { .post-in-navigation { margin: 1.25rem 0 0; } .post-in-navigation span, .post-in-navigation a { min-width: 2rem; height: 2rem; border-radius: var(--border-radius-sm); } } @media (min-width: 768px) and (max-width: 991.98px) { .post-in-navigation { margin: 1.5rem 0 0; } .post-in-navigation span, .post-in-navigation a { min-width: 2.25rem; height: 2.25rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { .post-in-navigation { margin: 1.5rem 0 0; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .post-in-navigation { margin: 2rem 0 0; } } /*-------------------------------------------------------------- ## Page Friends --------------------------------------------------------------*/ .friends-grid { margin-bottom: 1rem; } .friends-grid:last-child { margin-bottom: 0; } .friends-grid .friends-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; } .friends-list .item { position: relative; display: flex; flex-direction: row; align-items: center; flex: 1 1 auto; gap: 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius-xs); transition: transform 0.3s ease-out; } .friends-list .item:hover { transform: scale(1.01) translateY(-5px); } .friends-list .item .item-avatar { width: 40px; height: 40px; color: #fff; } .friends-list .item .item-go { flex-shrink: 0; transform: rotate(-45deg); transition: all 0.3s ease-in-out; } .friends-list .item:hover .item-go { transform: rotate(0deg); } @media (max-width: 767.98px) { .friends-grid { margin-bottom: 1.25rem; } } /* -------------------------------- ## Page category list ---------------------------------- */ .category-tags .item { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--bg-light); border-radius: var(--border-radius-sm); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 1rem; } .category-tags .item:last-child { margin-bottom: 0; } .category-tags .item .item-bg { position: absolute; left: 5%; top: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: inherit; border-top-left-radius: 0; border-bottom-left-radius: 0; opacity: 1; transition: all 0.3s ease-in-out; z-index: 1; } .category-tags .item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0 0 0 / 100%) 15%, rgb(0 0 0 / 80%) 60%, rgba(0, 0, 0, 0) 100%); z-index: 2; } .category-tags .item .item-content { position: relative; width: 100%; padding: 1.75rem; transition: all 0.3s ease-in-out; color: #fff; z-index: 3; } .category-tags .item:hover .item-content { padding: 2.5rem 2rem; } .category-tags .item .item-content small { color: #fff; background-color: var(--gray-5); border-radius: var(--border-radius-xs); line-height: 1.5; padding: 1px 8px; } .category-tags .item .item-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 1.375rem; } .category-tags .item .item-icon img { width: 28px; } .category-tags .item .item-title { position: relative; } .category-tags .item.hot .item-title::after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(125%, -50%); width: 30px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } body[data-scheme="dark"] .category-tags .item { background-color: var(--bg-secondary); } body[data-scheme="dark"] .category-tags .item::before { background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0 0 0 / 100%) 15%, rgb(0 0 0 / 80%) 60%, rgba(0, 0, 0, 0) 100%); } body[data-scheme="dark"] .category-tags .item .item-content small { background-color: var(--gray-5); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .category-tags .item { background-color: var(--bg-secondary); } body[data-scheme="auto"] .category-tags .item::before { background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0 0 0 / 100%) 15%, rgb(0 0 0 / 80%) 60%, rgba(0, 0, 0, 0) 100%); } body[data-scheme="auto"] .category-tags .item .item-content small { background-color: var(--gray-5); } } /*-------------------------------------------------------------- ## Page authors --------------------------------------------------------------*/ .recommend-author-list .item { display: flex; flex-direction: row; align-items: center; gap: 15px; margin-bottom: 1.5rem; } .recommend-author-list .item:last-child { margin-bottom: 0; } .recommend-author-list .item .item-rank { color: var(--color-warning); } .recommend-author-list .item:nth-child(1) .item-rank, .recommend-author-list .item:nth-child(2) .item-rank, .recommend-author-list .item:nth-child(3) .item-rank { color: var(--color-danger); } .recommend-author-list .item .item-content { flex: 1 1 auto; } .recommend-author-list .item .item-avatar { width: 42px; height: 42px; } .recommend-author-list .item .item-body { flex: 1 1 auto; } .recommend-author-list .item .item-name { position: relative; } .recommend-author-list .item .item-name .activity { position: absolute; right: -15px; top: 50%; width: 8px; height: 8px; border-radius: 10px; background-color: var(--gray-5); transform: translateY(-50%); } .recommend-author-list .item .item-name .activity.on { background-color: var(--color-success); } .recommend-author-list .item .item-name .activity.on:after { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; -webkit-animation: circle-pulse 2s infinite; animation: circle-pulse 2s infinite; border-radius: 50%; box-shadow: 0 0 0 0 #4daa57 } .recommend-author-list .item .item-posts { flex-shrink: 0; width: 40%; } @media (max-width: 767.98px) { .recommend-author-list .item { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 1.5rem; } .recommend-author-list .item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .recommend-author-list .item .item-content { width: 100%; } .recommend-author-list .item .item-body { flex: 1 1 auto; } .recommend-author-list .item .item-posts { width: 100%; } } /*-------------------------------------------------------------- ## Scroll toolbar --------------------------------------------------------------*/ .scroll-toolbar { position: fixed; right: 30px; bottom: 50%; transform: translateY(45%); z-index: 99; } .scroll-toolbar .toolbar-list { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 500ms ease; } .scroll-toolbar.sticked .toolbar-list { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 991.98px) { .scroll-toolbar { right: 15px; bottom: 15%; transform: translateY(0%); } } .scroll-toolbar .totop-button { opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 500ms ease; } .scroll-toolbar .totop-button.current { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-toolbar .like-button.active, .scroll-toolbar .star-button.active { --bs-btn-active-color: #ff414d; } .scroll-toolbar .like-button.active i, .scroll-toolbar .star-button.active i { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); } .scroll-toolbar .like-button.active i::before { content: "\e8e9"; } .scroll-toolbar .star-button.active i::before { content: "\e8eb"; } /* -------------------------------- ## User ---------------------------------- */ /*-------------------------------------------------------------- ## User comments --------------------------------------------------------------*/ .author-comments { } .author-comments .item { margin-bottom: 1rem; } .author-comments .item:last-child { margin-bottom: 0; } .author-comments .item .item-avatar { width: 36px; height: 36px; } .author-comments .item .item-post-info { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; word-wrap: break-word; padding: 8px; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .author-comments .item .item-post-info .item-post-image { width: 32px; height: 32px; border-radius: calc(var(--border-radius-sm) / 2); } .author-comments .item .item-post-info .item-post-title { display: flex; flex-direction: column; flex: 1 1 auto; } body[data-scheme="dark"] .author-comments .item .item-post-info { background-color: var(--gray-6); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .author-comments .item .item-post-info { background-color: var(--gray-6); } } /* -------------------------------- ## User dropdown ---------------------------------- */ .user-dropdown { position: relative; } .user-dropdown .user-dropdown-menu { position: absolute; right: 0; top: 90%; width: 160px; background-color: #fff; box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%); border-radius: var(--border-radius-sm); visibility: hidden; opacity: 0; z-index: 99; transition: all 0.5s ease 0s; transform: scale(.85) translateY(0); } .user-dropdown:hover .user-dropdown-menu { visibility: visible; opacity: 1; top: 120%; transform: scale(1) translateY(0px); } .user-dropdown .user-dropdown-menu ul { padding: .75rem; } .user-dropdown .user-dropdown-menu ul li { margin-bottom: .375rem; } .user-dropdown .user-dropdown-menu ul li:last-child { margin-bottom: 0; } .user-dropdown .user-dropdown-menu ul li a { display: flex; align-items: center; gap: 10px; color: var(--gray-6) !important; padding: .375rem .375rem; border-radius: var(--border-radius-xs); } .user-dropdown .user-dropdown-menu ul li a:hover { background-color: var(--color-primary); color: #fff !important; } .user-dropdown .user-dropdown-menu ul li a .icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 1rem; } .user-dropdown .user-dropdown-menu ul li a .text { flex: 1 1 auto; font-size: .875rem; } body[data-scheme="dark"] .user-dropdown .user-dropdown-menu { background-color: var(--bg-secondary); } body[data-scheme="dark"] .user-dropdown .user-dropdown-menu ul li a { color: var(--gray-2) !important; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .user-dropdown .user-dropdown-menu { background-color: var(--bg-secondary); } body[data-scheme="auto"] .user-dropdown .user-dropdown-menu ul li a { color: var(--gray-2) !important; } } /*-------------------------------------------------------------- ## User profile style --------------------------------------------------------------*/ .user-profile-form { padding: 1rem 0; } .user-profile-form li { display: flex; align-items: center; flex: 1 1 auto; gap: 15px; padding: 1rem 2rem; } .user-profile-form li .item-icon { width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; background-color: var(--bg-light); border-radius: 50%; } .user-profile-form li .item-action i { position: relative; transition: all 0.3s ease-in-out; transform: translateX(-2px); } .user-profile-form li .item-action:hover i { transform: translateX(3px); } .user-profile-form li:nth-child(1) .item-icon { background-color: rgb(1 101 254 / 9%); color: var(--color-primary); } .user-profile-form li:nth-child(2) .item-icon { background-color: rgb(254 190 1 / 9%); color: rgb(254 190 1); } .user-profile-form li:nth-child(3) .item-icon { background-color: rgb(254 85 1 / 9%); color: rgb(254 85 1); } .user-profile-form li:nth-child(4) .item-icon { background-color: rgb(255 147 59 / 9%); color: rgb(255 147 59); } .user-profile-form li:nth-child(5) .item-icon { background-color: rgb(4 156 255 / 9%); color: rgb(4 156 255); } .user-profile-form li:nth-child(6) .item-icon { background-color: rgb(39 164 95 / 9%); color: rgb(39 164 95); } @media (max-width: 767.98px) { .user-profile-form { padding: 0.75rem 0; } .user-profile-form li { padding: 0.75rem 1rem; } .user-profile-form li .item-icon { width: 36px; height: 36px; } } /* -------------------------------- ## Editor radio style -------------------------------- */ .editor-type-radio { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .editor-type-radio .item .check-input { display: none; } .editor-type-radio .item .check-label { position: relative; padding: .75rem 1.5rem; display: block; cursor: pointer; color: var(--color-muted); text-align: center; background-color: var(--outline-light); border-radius: var(--border-radius-sm); } .editor-type-radio .item .check-input:checked ~ .check-label { background-color: var(--outline-primary); color: var(--color-primary); } .editor-type-radio .item .check-label .cheak-icon { display: flex; justify-content: center; align-items: center; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; margin: 0 auto 0.5rem; } .editor-tags-radio { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px } .editor-tags-radio .item .check-input { display: none; } .editor-tags-radio .item .check-label { position: relative; padding: .5rem 2.125rem .5rem .875rem; display: block; white-space: nowrap; cursor: pointer; background-color: var(--bg-light); color: var(--color-muted); border-radius: var(--border-radius-sm); } .editor-tags-radio .item .check-input:checked ~ .check-label { background-color: var(--bg-dark); color: #fff; } .editor-tags-radio .item .check-label .cheak-icon { position: absolute; top: 50%; right: 14px; width: 12px; height: 12px; transform: translateY(-50%); transition: all 300ms ease-in-out; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM2OTZDNzEiIGQ9Ik0xMDAgMjAwYTExLjM4MyAxMS4zODMgMCAwIDEtOC4wNjMtMy4zMzdBMTEuNCAxMS40IDAgMCAxIDg4LjYgMTg4LjZWMTEuNGExMS40IDExLjQgMCAwIDEgMjIuOCAwdjE3Ny4yYzAgNi4yLTUgMTEuNC0xMS40IDExLjRabTg4LjYtODguNkgxMS40YTExLjQgMTEuNCAwIDEgMSAwLTIyLjhoMTc3LjJhMTEuNDAxIDExLjQwMSAwIDAgMSAwIDIyLjhaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgyMDB2MjAwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+'); opacity: .6; } .editor-tags-radio .item .check-input:checked ~ .check-label .cheak-icon { transform: translateY(-50%) rotate(45deg); background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxMiAxMDI0YTU4LjMzNiA1OC4zMzYgMCAwIDEtNTguMzY4LTU4LjM2OFY1OC4zNjhhNTguMzM2IDU4LjMzNiAwIDEgMSAxMTYuNzM2IDB2OTA3LjI2NGMwIDMxLjc0NC0yNS42IDU4LjM2OC01OC4zNjggNTguMzY4em00NTMuNjMyLTQ1My42MzJINTguMzY4YTU4LjMzNiA1OC4zMzYgMCAxIDEgMC0xMTYuNzM2aDkwNy4yNjRhNTguMzM2IDU4LjMzNiAwIDEgMSAwIDExNi43MzZ6Ii8+PC9zdmc+'); } body[data-scheme="dark"] .editor-type-radio .item .check-label { color: var(--color-muted); background-color: var(--outline-light); } body[data-scheme="dark"] .editor-type-radio .item .check-input:checked ~ .check-label { background-color: var(--outline-primary); color: var(--color-primary); } body[data-scheme="dark"] .editor-tags-radio .item .check-label { color: var(--color-light); } body[data-scheme="dark"] .editor-tags-radio .item .check-input:checked ~ .check-label { background-color: var(--bg-muted); color: #fff; } body[data-scheme="dark"] .editor-tags-radio .item .check-label .cheak-icon { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxMiAxMDI0YTU4LjMzNiA1OC4zMzYgMCAwIDEtNTguMzY4LTU4LjM2OFY1OC4zNjhhNTguMzM2IDU4LjMzNiAwIDEgMSAxMTYuNzM2IDB2OTA3LjI2NGMwIDMxLjc0NC0yNS42IDU4LjM2OC01OC4zNjggNTguMzY4em00NTMuNjMyLTQ1My42MzJINTguMzY4YTU4LjMzNiA1OC4zMzYgMCAxIDEgMC0xMTYuNzM2aDkwNy4yNjRhNTguMzM2IDU4LjMzNiAwIDEgMSAwIDExNi43MzZ6Ii8+PC9zdmc+'); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .editor-type-radio .item .check-label { color: var(--color-muted); background-color: var(--outline-light); } body[data-scheme="auto"] .editor-type-radio .item .check-input:checked ~ .check-label { background-color: var(--outline-primary); color: var(--color-primary); } body[data-scheme="auto"] .editor-tags-radio .item .check-label { color: var(--color-light); } body[data-scheme="auto"] .editor-tags-radio .item .check-input:checked ~ .check-label { background-color: var(--bg-muted); color: #fff; } body[data-scheme="auto"] .editor-tags-radio .item .check-label .cheak-icon { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxMiAxMDI0YTU4LjMzNiA1OC4zMzYgMCAwIDEtNTguMzY4LTU4LjM2OFY1OC4zNjhhNTguMzM2IDU4LjMzNiAwIDEgMSAxMTYuNzM2IDB2OTA3LjI2NGMwIDMxLjc0NC0yNS42IDU4LjM2OC01OC4zNjggNTguMzY4em00NTMuNjMyLTQ1My42MzJINTguMzY4YTU4LjMzNiA1OC4zMzYgMCAxIDEgMC0xMTYuNzM2aDkwNy4yNjRhNTguMzM2IDU4LjMzNiAwIDEgMSAwIDExNi43MzZ6Ii8+PC9zdmc+'); } } /*-------------------------------------------------------------- ## Fileuploader style --------------------------------------------------------------*/ .fileuploader { background: transparent; border-radius: 0; padding: 0; margin: 0; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner { font-size: 30px; line-height: 1; color: var(--color-muted); background: var(--gray-6); border-radius: var(--border-radius-sm); border: 0; opacity: 1; transition: all 0.2s ease; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:hover { background: var(--gray-5); color: var(--color-secondary); border-color: transparent; opacity: 1; } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove i:before, .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success i:before { content: ""; display: block; width: 15px; height: 15px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNy44ODEgMTkzLjk5OWMxOC41OSAxOC41MjUgMTguODMgNDguNDk3LjY3NiA2Ny4zMTVsLS41NTYuNTY3TDU3OS43NjIgNTExbDI0OC4yNCAyNDkuMTE5YzE4LjcxMSAxOC43NzggMTguNjU3IDQ5LjE3LS4xMjEgNjcuODgyLTE4LjU5IDE4LjUyNS00OC41NjQgMTguNjU4LTY3LjMxNy40MzhsLS41NjUtLjU1OEw1MTIgNTc5LjAwMyAyNjQuMDAxIDgyNy44ODFjLTE4LjcxMiAxOC43NzgtNDkuMTA0IDE4LjgzMi02Ny44ODIuMTItMTguNTktMTguNTI1LTE4LjgzLTQ4LjQ5Ny0uNjc2LTY3LjMxNWwuNTU2LS41NjdMNDQ0LjIzNyA1MTEgMTk1Ljk5OSAyNjEuODgxYy0xOC43MTItMTguNzc4LTE4LjY1OC00OS4xNy4xMi02Ny44ODIgMTguNTktMTguNTI1IDQ4LjU2NC0xOC42NTggNjcuMzE3LS40MzhsLjU2NS41NThMNTEyIDQ0Mi45OTdsMjQ3Ljk5OS0yNDguODc4YzE4LjcxMi0xOC43NzggNDkuMTA0LTE4LjgzMiA2Ny44ODItLjEyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:active i:before, .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:hover i:before { content: ""; display: block; width: 15px; height: 15px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNy44ODEgMTkzLjk5OWMxOC41OSAxOC41MjUgMTguODMgNDguNDk3LjY3NiA2Ny4zMTVsLS41NTYuNTY3TDU3OS43NjIgNTExbDI0OC4yNCAyNDkuMTE5YzE4LjcxMSAxOC43NzggMTguNjU3IDQ5LjE3LS4xMjEgNjcuODgyLTE4LjU5IDE4LjUyNS00OC41NjQgMTguNjU4LTY3LjMxNy40MzhsLS41NjUtLjU1OEw1MTIgNTc5LjAwMyAyNjQuMDAxIDgyNy44ODFjLTE4LjcxMiAxOC43NzgtNDkuMTA0IDE4LjgzMi02Ny44ODIuMTItMTguNTktMTguNTI1LTE4LjgzLTQ4LjQ5Ny0uNjc2LTY3LjMxNWwuNTU2LS41NjdMNDQ0LjIzNyA1MTEgMTk1Ljk5OSAyNjEuODgxYy0xOC43MTItMTguNzc4LTE4LjY1OC00OS4xNy4xMi02Ny44ODIgMTguNTktMTguNTI1IDQ4LjU2NC0xOC42NTggNjcuMzE3LS40MzhsLjU2NS41NThMNTEyIDQ0Mi45OTdsMjQ3Ljk5OS0yNDguODc4YzE4LjcxMi0xOC43NzggNDkuMTA0LTE4LjgzMiA2Ny44ODItLjEyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); } @media (max-width: 767.98px) { .fileuploader-theme-thumbnails { padding: 10px; margin: 0; } .fileuploader-theme-thumbnails .fileuploader-items .fileuploader-items-list { margin: -10px 0 0 -10px; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item { width: calc(33.33333% - 10px); padding-top: 25%; margin: 10px 0 0 10px; } } /*-------------------------------------------------------------- ## fileuploader avatar --------------------------------------------------------------*/ .fileuploader-avatar .fileuploader-theme-thumbnails { max-width: 200px; margin: 2rem auto 2.5rem; } .fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-items-list { margin: 0; } .fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-thumbnails-input, .fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item { width: 100%; margin: 0; padding-top: 100%; } .fileuploader-avatar .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action { box-shadow: none; } /*-------------------------------------------------------------- ## Sidebar style --------------------------------------------------------------*/ .sidebar-left { position: relative; } /*-------------------------------------------------------------- ## Popup Login style --------------------------------------------------------------*/ .search-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 999; cursor: pointer; overflow-y: auto; opacity: 0; visibility: hidden; transition: all 0.15s linear; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .search-popup { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .search-popup.is-visible { visibility: visible; opacity: 1; } .search-popup.is-visible .search-popup-container { transform: scale(1) translateY(0px); } .search-popup-container { position: relative; width: 96%; max-width: 600px; background: #fff; margin: 3em auto 4em; cursor: auto; border-radius: var(--border-radius-md); transform: scale(.85) translateY(50px); transition: transform 0.3s ease-out; } .search-popup-container .search-popup-close { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 150%); } .search-hidden { overflow: hidden; } body[data-scheme="dark"] .search-popup { background-color: rgba(0, 0, 0, 0.8); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="dark"] .search-popup { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } body[data-scheme="dark"] .search-popup-container { background: var(--bg-secondary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .search-popup { background-color: rgba(0, 0, 0, 0.8); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="auto"] .search-popup { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } body[data-scheme="auto"] .search-popup-container { background: var(--bg-secondary); } } /*-------------------------------------------------------------- ## Popup Login style --------------------------------------------------------------*/ #login, #loginphone, #loginwechat, #signup, #reset-password { display: none; } #login.is-selected, #loginphone.is-selected, #loginwechat.is-selected, #signup.is-selected, #reset-password.is-selected { display: block; } /*-------------------------------------------------------------- ## Login style --------------------------------------------------------------*/ .login-popup { position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999; cursor: pointer; overflow-y: auto; visibility: hidden; opacity: 0; transition: all 0.2s linear; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .login-popup { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .login-popup.is-visible { visibility: visible; opacity: 1; } .login-popup.is-visible .login-popup-container { transform: scale(1) translateY(0px); } .login-popup-container { position: relative; width: 96%; max-width: 435px; background: #fff; margin: 2em auto; cursor: auto; border-radius: var(--border-radius-md); transform: scale(.95) translateY(50px); transition-property: transform; transition-duration: 0.5s; } @media (max-width: 767.98px) { .login-popup-container { margin: 1em auto; } } @media (min-width: 768px) { .login-popup-container { margin: 1em auto; } } body[data-scheme="dark"] .login-popup-container { background: var(--bg-secondary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .login-popup-container { background: var(--bg-secondary); } } /*-------------------------------------------------------------- ## Login form --------------------------------------------------------------*/ .login-header { font-size: 1.75rem; font-weight: bold; padding: 2.75rem 2.5rem 0; } .login-footer { border-bottom-left-radius: var(--border-radius-md); border-bottom-right-radius: var(--border-radius-md); } .login-form { padding: 2.5rem 2.5rem; } .login-form .form-submit { margin-top: 2.5rem; } .login-close { display: block; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 150%); } .login-hr { position: relative; margin-top: 2rem; margin-bottom: 1.5rem; } .login-hr span { position: relative; padding: 0 10px; } .login-hr span:before { content: ""; position: absolute; left: 100%; top: 50%; width: 100%; height: 1px; background-color: var(--bg-light); display: block; } .login-hr span:after { content: ""; position: absolute; right: 100%; top: 50%; width: 100%; height: 1px; background-color: var(--bg-light); display: block; } .login-wechat-qcode img { width: 180px; height: 180px; padding: 12px; border-radius: var(--border-radius-md); } .login-form .login-qq-button { background-color: rgb(0 139 207 / 10%); border-color: rgb(0 139 207 / 10%); } .login-form .login-qq-icon { width: 1.25rem; height: 1.25rem; background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTkxNi4wNjQgNTc0Ljg4YTEyODcuODQgMTI4Ny44NCAwIDAgMC0yOC44OTYtNzcuODA4bC0yOC42MDgtNjcuOTY4LjA0OC04LjExMkM4NTguNjU2IDE4OC4yODggNzE5LjM2IDMyIDUxMiAzMlMxNjUuMzQ0IDE4OC4yODggMTY1LjM0NCA0MjAuOTQ0bC4wNDggOC4wNjQtMjguMDMyIDY2LjYyNGExMjcxLjA0IDEyNzEuMDQgMCAwIDAtMjkuNTIgNzkuMzQ0Yy0zNC4yNzIgMTA0LjkyOC0zNi44NjQgMTgxLjI5Ni03LjU4NCAyMjYuODk2IDE1Ljg0IDI0LjY3MiA0MC42NTYgNDEuMDg4IDY4LjY0IDQ1LjY5NmExMTEuMjY0IDExMS4yNjQgMCAwIDAgMTIuMjg4IDg2LjMwNGMzMy4yMTYgNTMuNDI0IDk2LjE0NCA1Ny40MDggMTg4LjM1MiA1Ny40MDggNTMuMjMyIDAgMTA5Ljg3Mi0yLjczNiAxNDIuNDE2LTUuNTY4IDMyLjU0NCAyLjg4IDg5LjEzNiA1LjU2OCAxNDIuNDE2IDUuNTY4IDkyLjIwOCAwIDE1NS4xMzYtMy45ODQgMTg4LjMwNC01Ny4zMTIgMTQuOTI4LTI0IDIwLjQ0OC01NS43NzYgMTIuMzM2LTg2LjRhMTAxLjA0IDEwMS4wNCAwIDAgMCA2OC42NC00NS42OTZjMjkuMjMyLTQ1LjYgMjYuNjg4LTEyMS45NjgtNy41ODQtMjI2Ljk5MnptLTc2LjYwOCAxNzcuOTM2LS43Mi4wNDhjLTE4LjYyNCAwLTY5LjMxMi03OC40MzItNjkuMzEyLTc4LjQzMiAwIDQ2LjU2LTI1LjIgMTEzLjc2LTc5LjY4IDE1Ny42MzIgMjAuNCA2IDQ1LjQwOCAxNS4xNjggNjEuNDQgMjYuNDk2IDE0LjQ0OCAxMC4xMjggMTIuNjI0IDIwLjQ0OCAxMC4wMzIgMjQuNjcyLTUuNjE2IDkuMDI0LTUzLjQyNCAxMi0xMDYuOCAxMi01NC43NjggMC0xMTUuNDQtMy4xMi0xNDIuNDE2LTYtMjYuOTc2IDIuOTI4LTg3LjY0OCA2LTE0Mi40MTYgNi01My4zNzYgMC0xMDEuMTM2LTIuOTc2LTEwNi44LTEyLTIuNTkyLTQuMTc2LTQuNDE2LTE0LjU0NCAxMC4wMzItMjQuNjcyIDE2LjAzMi0xMS4yOCA0MS4wNC0yMC40OTYgNjEuNDQtMjYuNDk2LTU0LjQ4LTQzLjkyLTc5LjY4LTExMS4wNzItNzkuNjgtMTU3LjY4IDAgMC01MC43MzYgNzguNDMyLTY5LjMxMiA3OC40MzJsLS43Mi0uMDQ4Yy04LjQtLjk2LTE5LjM5Mi00NC4wNjQgMTQuNTkyLTE0OC4xNzYgNy4xMDQtMjEuODQgMTYuODQ4LTQ3LjI4IDI2LjY4OC03MS43NmwzNS45NTItODUuNDRjMC0xLjAwOC0uNDgtMTcuODU2LS40OC0yNi40OTZDMjYxLjM0NCAyNzQuODMyIDMzMy44MjQgMTI4IDUxMiAxMjhzMjUwLjY1NiAxNDYuODMyIDI1MC42NTYgMjkyLjk0NGMwIDguNjg4LS40MzIgMjUuNDg4LS40OCAyNi40OTZsMzYgODUuNDRjOS44NCAyNC40OCAxOS41ODQgNDkuOTIgMjYuNjg4IDcxLjc2IDMzLjk4NCAxMDQuMTEyIDIyLjk5MiAxNDcuMjE2IDE0LjU5MiAxNDguMTc2eiIgZmlsbD0iIzAwOGJjZiIvPjwvc3ZnPg=='); } .login-form .login-wechat-button { background-color: rgb(0 149 96 / 10%); border-color: rgb(0 149 96 / 10%); } .login-form .login-wechat-icon { width: 1.25rem; height: 1.25rem; background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTQyNCAxMjkuOTg0YzE5OC44NDggMCAzNjAgMTI1LjM3NiAzNjAgMjgwIDAgNy4wNC0uMzIgMTQuMDgtMS4wMjQgMjEuMDU2bC0xLjI4LS40NDhDODg2LjQgNDY0Ljg5NiA5NjAgNTQ1LjUzNiA5NjAgNjM5LjU1MmMwIDcyLjQ0OC00My43NzYgMTM2Ljk2LTExMS44MDggMTc4LjQ5Nkw4NTMuMTIgODk2bC03MS4yMzItNDcuNjhhMzYyLjY4OCAzNjIuNjg4IDAgMCAxLTExMi45NiAxNy43MjhjLTE0MC40MTYgMC0yNTcuNi03Ny40NC0yODQuOTI4LTE4MC40MTZsLjY0IDIuNjI0Yy0zMi0yLjU2LTYyLjg0OC04LjU3Ni05MS44NC0xNy40MDhsLTEuNTM2LS40NDgtMTM4Ljg4IDY1LjZWNTkzLjc5MkM5Ny40MDggNTQ0LjY0IDY0IDQ4MC4zMiA2NCA0MDkuOTg0YzAtMTU0LjYyNCAxNjEuMTUyLTI4MCAzNjAtMjgwem0xNTAuMDE2IDQwMS45ODRhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDAgMCAwLTY0em0xOTAuMDE2IDBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDAgMCAwLTY0ek00MjQgMjI2LjA0OGMtNzUuODQgMC0xNDUuNzI4IDIyLjk3Ni0xOTUuNjQ4IDYxLjc2LTQ0LjggMzQuODE2LTY4LjM1MiA3OC4yMDgtNjguMzUyIDEyMi4yNCAwIDM5LjQyNCAxOC44OCA3OC4yMDggNTUuMjMyIDExMS4xNjhsMS4xNTIuOTYgMzIgMjguNjcydjMzLjY2NGwzNS42NDgtMTYuODMyIDM1LjU4NCAxMC45NDRjMjAuNzM2IDYuNCA0Mi40MzIgMTAuODggNjQuODk2IDEzLjI0OGwtLjM4NCAxLjA4OGMyNy42NDgtMTAyLjc4NCAxNDQuNjQtMTc5Ljk2OCAyODQuODY0LTE3OS45NjggNy4zNiAwIDE0LjY1Ni4xOTIgMjEuODI0LjY0bC0zLjAwOC0uMTkyLjE5Mi0zLjQ1NmMwLTQzLjk2OC0yMy42MTYtODcuMzYtNjguMzUyLTEyMi4yNC00OS45Mi0zOC43Mi0xMTkuODA4LTYxLjc2LTE5NS42NDgtNjEuNzZ6bS03OC4wMTYgODMuOTA0YTQ4IDQ4IDAgMSAxIDAgOTYgNDggNDggMCAwIDEgMC05NnptMTkyIDBhNDggNDggMCAxIDEgMCA5NiA0OCA0OCAwIDAgMSAwLTk2eiIgZmlsbD0iIzAwY2Y4NyIvPjwvc3ZnPg=='); } @media (max-width: 767.98px) { .login-header { padding: 1.75rem 1.75rem 0; } .login-form { padding: 1.75rem } } body[data-scheme="dark"] .login-hr span:before { background-color: var(--bg-secondary); } body[data-scheme="dark"] .login-hr span:after { background-color: var(--bg-secondary); } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .login-hr span:before { background-color: var(--bg-secondary); } body[data-scheme="auto"] .login-hr span:after { background-color: var(--bg-secondary); } } /*-------------------------------------------------------------- ## Form field --------------------------------------------------------------*/ .form-field { position: relative; } .form-field input[type="number"] { -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; } .form-field input[type="number"]::-webkit-inner-spin-button, .form-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .form-field input[type="password"] { padding-right: 65px; } .form-field .hide-password { position: absolute; right: 0; top: 50%; font-size: 1.25rem; line-height: 1; padding: 6px 15px; color: var(--color-muted); transform: translateY(-50%); } /*-------------------------------------------------------------- ## Popup style --------------------------------------------------------------*/ body[data-scheme="dark"] .nice-popup-overlay { background: rgba(0, 0, 0, 0.8); } body[data-scheme="dark"] .nice-tips-content, body[data-scheme="dark"] .nice-popup-content { background: var(--bg-secondary); } body[data-scheme="dark"] .nice-popup-error .nice-popup-content { background: var(--bg-secondary); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="dark"] .nice-popup-error .nice-popup-content { background: rgba(33, 33, 35, 0.6); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .nice-popup-overlay { background: rgba(0, 0, 0, 0.8); } body[data-scheme="auto"] .nice-tips-content, body[data-scheme="auto"] .nice-popup-content { background: var(--bg-secondary); } body[data-scheme="auto"] .nice-popup-error .nice-popup-content { background: var(--bg-secondary); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { body[data-scheme="auto"] .nice-popup-error .nice-popup-content { background: rgba(33, 33, 35, 0.6); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } } .nice-popup-content .nice-popup-icon { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; font-size: 2rem; background-color: var(--gray-6); border-radius: 50%; } .user-profile-form li .item-action i { position: relative; transition: all 0.3s ease-in-out; transform: translateX(-2px); } .user-profile-form li .item-action:hover i { transform: translateX(3px); } .nice-popup-content .nice-popup-icon.password { background-color: rgb(254 190 1 / 9%); color: rgb(254 190 1); } .nice-popup-content .nice-popup-icon.phone { background-color: rgb(254 85 1 / 9%); color: rgb(254 85 1); } .nice-popup-content .nice-popup-icon.mail { background-color: rgb(255 147 59 / 9%); color: rgb(255 147 59); } .nice-popup-content .nice-popup-icon.name { background-color: rgb(1 101 254 / 9%); color: var(--color-primary); } .user-profile-form li:nth-child(6) .item-icon { background-color: rgb(39 164 95 / 9%); color: rgb(39 164 95); } /*-------------------------------------------------------------- ## Text selection color and background color --------------------------------------------------------------*/ .popup-actions { display: flex; flex-direction: column; } .popup-actions .item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-2); } .popup-actions .item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .popup-actions .item .item-content { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0 1rem; } .popup-actions .item .item-content .item-body { display: flex; align-items: center; gap: 0 .75rem } .popup-actions .item .item-content .item-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 1.25rem; } .popup-actions .item .item-content .item-title { opacity: .6; transition: opacity 0.3s ease-in-out; } .popup-actions .item:hover .item-content .item-title { opacity: 1; } body[data-scheme="dark"] .popup-actions .item { border-bottom: 1px solid var(--gray-6); } body[data-scheme="dark"] .popup-actions .item:last-child { border-bottom: 0; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .popup-actions .item { border-bottom: 1px solid var(--gray-6); } body[data-scheme="auto"] .popup-actions .item:last-child { border-bottom: 0; } } /*-------------------------------------------------------------- ## loading spin animation --------------------------------------------------------------*/ @-webkit-keyframes loading-spin-animation { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @keyframes loading-spin-animation { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @-webkit-keyframes icon-expand-animation { 0% { transform: scale(0) } 15% { transform: scale(1.4) } 32% { transform: scale(0.8) } 50% { transform: scale(1); opacity: 1 } to { transform: scale(1); opacity: 1 } } @keyframes icon-expand-animation { 0% { transform: scale(0) } 15% { transform: scale(1.4) } 32% { transform: scale(0.8) } 50% { transform: scale(1); opacity: 1 } to { transform: scale(1); opacity: 1 } } /*-------------------------------------------------------------- ## Text selection color and background color --------------------------------------------------------------*/ ::-moz-selection { color: #fff; background: var(--color-primary); } ::selection { color: #fff; background: var(--color-primary); } /* -------------------------------- ## ck style -------------------------------- */ .ck-body-wrapper, #post-editor { --ck-color-base-foreground: #fff; --ck-color-base-background: #fff; --ck-color-base-border: var(--gray-2); --ck-color-base-action: #53a336; --ck-color-base-focus: #6cb5f9; --ck-color-base-text: var(--color-secondary); --ck-color-base-active: var(--color-primary); --ck-color-base-active-focus: var(--color-primary); --ck-color-base-error: #db3700; --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: #cae1fc; --ck-color-focus-disabled-shadow: rgba(119, 186, 248, .3); --ck-color-focus-error-shadow: rgba(255, 64, 31, .3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: rgba(0, 0, 0, .15); --ck-color-shadow-drop-active: rgba(0, 0, 0, .2); --ck-color-shadow-inner: rgba(0, 0, 0, .1); --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: var(--gray-1); --ck-color-button-default-active-background: var(--gray-1); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: var(--gray-1); --ck-color-button-on-hover-background: var(--gray-2); --ck-color-button-on-active-background: var(--gray-2); --ck-color-button-on-disabled-background: var(--gray-1); --ck-color-button-on-color: #2977ff; --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: #4d9d30; --ck-color-button-action-active-background: #4d9d30; --ck-color-button-action-disabled-background: #7ec365; --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: #008a00; --ck-color-button-cancel: #db3700; --ck-color-switch-button-off-background: var(--gray-3); --ck-color-switch-button-off-hover-background: var(--gray-3); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: #4d9d30; --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: rgba(0, 0, 0, .1); --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); --ck-color-dialog-background: var(--ck-custom-background); --ck-color-dialog-form-header-border: var(--ck-custom-border); --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: var(--gray-1); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: var(--color-muted); --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: var(--ck-color-base-background); --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); --ck-color-engine-placeholder-text: #707070; --ck-color-upload-bar-background: #6cb5f9; --ck-color-link-default: var(--color-primary); --ck-color-link-selected-background: rgba(31, 176, 255, .1); --ck-color-link-fake-selection: rgba(31, 176, 255, .3); --ck-color-highlight-background: #ff0; --ck-color-light-red: #fcc; --ck-disabled-opacity: .5; --ck-focus-outer-shadow-geometry: 0 0 0 3px; --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); --ck-focus-ring: 1px solid var(--ck-color-focus-border); --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; --ck-ui-component-min-height: 2.3em; --ck-border-radius: var(--border-radius-sm); --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); --ck-spacing-small: 0; } #post-editor .ck.ck-button { box-shadow: none !important; transition: all .2s ease-in-out; } .ck.ck-list__item .ck-button.ck-on:hover { background-color: var(--color-primary); color: #fff; } #post-editor .ck.ck-toolbar { border: 0; margin-bottom: .75rem; } #post-editor .ck-dropdown__panel .ck.ck-toolbar { margin-bottom: 0; padding: 10px; } #post-editor .ck.ck-toolbar > .ck-toolbar__items { gap: 8px; } #post-editor .ck.ck-toolbar .ck.ck-toolbar__separator { display: none; } #post-editor .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, #post-editor .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners { border-radius: var(--ck-border-radius); } #post-editor .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) { box-shadow: none !important; } #post-editor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused { border-color: var(--color-primary); } #post-editor .ck.ck-content:not(.ck-style-grid__button__preview) { min-height: 600px; } #post-editor .ck.ck-content ul, #post-editor .ck.ck-content ol { padding: 0 0 0 1.25rem; margin-bottom: 1.5rem; } #post-editor .ck.ck-content ul { list-style: disc; } #post-editor .ck.ck-content ul ul, #post-editor .ck.ck-content ol ol, #post-editor .ck.ck-content ul ol, #post-editor .ck.ck-content ol ul { margin-bottom: 1rem; } #post-editor .ck.ck-contentul ul { list-style: circle; margin: 0.75rem 0; } #post-editor .ck.ck-content ul ul ul { list-style: square; } #post-editor .ck.ck-content ol { list-style: decimal; } #post-editor .ck.ck-content ol ol { list-style: lower-alpha; } #post-editor .ck.ck-content ol ol ol { list-style: lower-roman; } #post-editor .ck.ck-content li { line-height: 1.5; margin: 0 0 .5rem; } #post-editor .ck.ck-content li li { margin: 0 0 0.5rem; } #post-editor .ck.ck-content li img { display: inline-block; } @media (max-width: 767.98px) { #post-editor .ck.ck-content:not(.ck-style-grid__button__preview) { min-height: 400px; } } .ck-body-wrapper .ck.ck-input:focus { box-shadow: none; } .ck-body-wrapper .ck-rounded-corners .ck.ck-balloon-panel .ck.ck-label { top: -2px !important; } body[data-scheme="dark"] .ck-body-wrapper, body[data-scheme="dark"] #post-editor { --ck-color-base-foreground: transparent; --ck-color-base-background: transparent; --ck-color-base-border: var(--border-color); --ck-color-base-action: #53a336; --ck-color-base-focus: #6cb5f9; --ck-color-base-text: #fff; --ck-color-base-active: var(--color-primary); --ck-color-base-active-focus: var(--color-primary); --ck-color-base-error: #db3700; --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: #cae1fc; --ck-color-focus-disabled-shadow: rgba(119, 186, 248, .3); --ck-color-focus-error-shadow: rgba(255, 64, 31, .3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: rgba(0, 0, 0, .15); --ck-color-shadow-drop-active: rgba(0, 0, 0, .2); --ck-color-shadow-inner: rgba(0, 0, 0, .1); --ck-color-button-default-background: var(--gray-6); --ck-color-button-default-hover-background: var(--gray-6); --ck-color-button-default-active-background: var(--gray-5); --ck-color-button-default-disabled-background: var(--bg-muted); --ck-color-button-on-background: var(--gray-5); --ck-color-button-on-hover-background: var(--gray-5); --ck-color-button-on-active-background: var(--gray-6); --ck-color-button-on-disabled-background: var(--gray-5); --ck-color-button-on-color: #2977ff; --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: #4d9d30; --ck-color-button-action-active-background: #4d9d30; --ck-color-button-action-disabled-background: #7ec365; --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: #008a00; --ck-color-button-cancel: #db3700; --ck-color-switch-button-off-background: var(--gray-3); --ck-color-switch-button-off-hover-background: var(--gray-3); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: #4d9d30; --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: rgba(0, 0, 0, .1); --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); --ck-color-dialog-background: var(--ck-custom-background); --ck-color-dialog-form-header-border: var(--ck-custom-border); --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: var(--gray-1); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: var(--color-muted); --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: #fff; --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); --ck-color-tooltip-background: var(--gray-6); --ck-color-tooltip-text: #fff; --ck-color-engine-placeholder-text: #707070; --ck-color-upload-bar-background: #6cb5f9; --ck-color-link-default: var(--color-primary); --ck-color-link-selected-background: rgba(31, 176, 255, .1); --ck-color-link-fake-selection: rgba(31, 176, 255, .3); --ck-color-highlight-background: #ff0; --ck-color-light-red: #fcc; --ck-disabled-opacity: .5; --ck-focus-outer-shadow-geometry: 0 0 0 3px; --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); --ck-focus-ring: 1px solid var(--ck-color-focus-border); --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; --ck-ui-component-min-height: 2.3em; --ck-border-radius: var(--border-radius-sm); --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); --ck-spacing-small: 0; } @media (prefers-color-scheme: dark) { body[data-scheme="auto"] .ck-body-wrapper, body[data-scheme="auto"] #post-editor { --ck-color-base-foreground: transparent; --ck-color-base-background: transparent; --ck-color-base-border: var(--border-color); --ck-color-base-action: #53a336; --ck-color-base-focus: #6cb5f9; --ck-color-base-text: #fff; --ck-color-base-active: var(--color-primary); --ck-color-base-active-focus: var(--color-primary); --ck-color-base-error: #db3700; --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: #cae1fc; --ck-color-focus-disabled-shadow: rgba(119, 186, 248, .3); --ck-color-focus-error-shadow: rgba(255, 64, 31, .3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: rgba(0, 0, 0, .15); --ck-color-shadow-drop-active: rgba(0, 0, 0, .2); --ck-color-shadow-inner: rgba(0, 0, 0, .1); --ck-color-button-default-background: var(--gray-6); --ck-color-button-default-hover-background: var(--gray-6); --ck-color-button-default-active-background: var(--gray-5); --ck-color-button-default-disabled-background: var(--bg-muted); --ck-color-button-on-background: var(--gray-5); --ck-color-button-on-hover-background: var(--gray-5); --ck-color-button-on-active-background: var(--gray-6); --ck-color-button-on-disabled-background: var(--gray-5); --ck-color-button-on-color: #2977ff; --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: #4d9d30; --ck-color-button-action-active-background: #4d9d30; --ck-color-button-action-disabled-background: #7ec365; --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: #008a00; --ck-color-button-cancel: #db3700; --ck-color-switch-button-off-background: var(--gray-3); --ck-color-switch-button-off-hover-background: var(--gray-3); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: #4d9d30; --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: rgba(0, 0, 0, .1); --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); --ck-color-dialog-background: var(--ck-custom-background); --ck-color-dialog-form-header-border: var(--ck-custom-border); --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: var(--gray-1); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: var(--color-muted); --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: #fff; --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); --ck-color-tooltip-background: var(--gray-6); --ck-color-tooltip-text: #fff; --ck-color-engine-placeholder-text: #707070; --ck-color-upload-bar-background: #6cb5f9; --ck-color-link-default: var(--color-primary); --ck-color-link-selected-background: rgba(31, 176, 255, .1); --ck-color-link-fake-selection: rgba(31, 176, 255, .3); --ck-color-highlight-background: #ff0; --ck-color-light-red: #fcc; --ck-disabled-opacity: .5; --ck-focus-outer-shadow-geometry: 0 0 0 3px; --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); --ck-focus-ring: 1px solid var(--ck-color-focus-border); --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; --ck-ui-component-min-height: 2.3em; --ck-border-radius: var(--border-radius-sm); --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); --ck-spacing-small: 0; } } /* -------------------------------- ## fancybox style -------------------------------- */ .is-animating .fancybox__content, .is-dragging .fancybox__content { will-change: auto } /*-------------------------------------------------------------- ## plyr ----------------------------------------------------------------*/ .plyr--audio .plyr__controls { border-radius: var(--border-radius-sm); }