28 lines
2.0 KiB
PHP
28 lines
2.0 KiB
PHP
<style>
|
|
/* api#260 / preland#13: утверждённый общий control, без замены DOM страницы. */
|
|
html[data-theme="light"] { color-scheme: light; }
|
|
html[data-theme="dark"] { color-scheme: dark; }
|
|
body.theme-dark { background-color: #000; }
|
|
.theme-switch { width:88px;height:44px;border-radius:14px;display:flex;flex:0 0 88px;box-shadow:inset 0 0 0 1px #d8d9e1;background:#f1f2f6;isolation:isolate; }
|
|
.theme-switch button { position:relative;width:44px;height:44px;padding:10px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:14px;cursor:pointer;flex:none;color:#000; }
|
|
.theme-switch button::before { content:'';position:absolute;inset:4px;border-radius:10px;z-index:-1; }
|
|
.theme-switch button[aria-pressed="true"]::before { background:#fff;box-shadow:0 1px 4px #10182818; }
|
|
.theme-switch button:focus-visible { outline:2px solid #7754df;outline-offset:3px; }
|
|
.theme-switch svg { display:block;width:24px;height:24px;flex:none;opacity:.6;pointer-events:none; }
|
|
.theme-switch button[aria-pressed="true"] svg { opacity:1; }
|
|
.theme-dark .theme-switch { background:#0b0b10;box-shadow:inset 0 0 0 1px #39343f; }
|
|
.theme-dark .theme-switch button { color:#fff; }
|
|
.theme-dark .theme-switch button[aria-pressed="true"]::before { background:#30283c;box-shadow:inset 0 0 0 1px #655374; }
|
|
.header .navbar>.container>div.d-flex { gap:24px;flex-shrink:0; }
|
|
.header .btn-header { margin-right:0!important; }
|
|
body:not(.theme-dark) .header img[src$="/coin-wh.svg"] { filter:brightness(.35) sepia(.6) saturate(4) hue-rotate(228deg); }
|
|
@media(max-width:767.98px) {
|
|
.header .navbar>.container>div.d-flex { gap:12px; }
|
|
.theme-switch { width:64px;height:30px;flex-basis:64px;border-radius:9px; }
|
|
.theme-switch button { width:32px;height:30px;padding:5px 6px;border-radius:9px; }
|
|
.theme-switch button::before { inset:3px;border-radius:6px; }
|
|
.theme-switch button::after { content:'';position:absolute;top:-7px;bottom:-7px;left:0;right:0; }
|
|
.theme-switch svg { width:20px;height:20px; }
|
|
}
|
|
</style>
|