113 lines
2.5 KiB
CSS
113 lines
2.5 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@source '../../internal/**/*.templ';
|
|
|
|
:root {
|
|
--bg: #111419;
|
|
--panel: #181d24;
|
|
--panel-soft: #1f2530;
|
|
--header: #1a2029;
|
|
--text: #e7eaf0;
|
|
--text-muted: #b8c0cd;
|
|
--text-faint: #8b97a8;
|
|
--accent: #cad4e4;
|
|
--danger: #d17f88;
|
|
--surface-search: rgba(10, 13, 18, 0.3);
|
|
--surface-search-focus-border: rgba(202, 212, 228, 0.24);
|
|
--surface-thumb: #141920;
|
|
--surface-input: #151b23;
|
|
--surface-input-focus: #1c2531;
|
|
--surface-tab-hover: #2a3340;
|
|
--surface-tab-active: #323d4c;
|
|
--surface-select: #1a212b;
|
|
--surface-search-view-all: #151b23;
|
|
--text-on-accent: #111419;
|
|
--overlay-subtle: rgba(0, 0, 0, 0.45);
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--poster-max-height: 360px;
|
|
--font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.volume-range {
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
accent-color: #ffffff;
|
|
}
|
|
|
|
.volume-range::-webkit-slider-runnable-track {
|
|
width: 4px;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.volume-range::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 9999px;
|
|
background: #ffffff;
|
|
border: 0;
|
|
margin-left: -5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.volume-range::-moz-range-track {
|
|
width: 4px;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.volume-range::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 9999px;
|
|
background: #ffffff;
|
|
border: 0;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.volume-wrap::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: 100%;
|
|
height: 130px;
|
|
}
|
|
|
|
.volume-wrap:has([data-mute]:hover) .volume-panel,
|
|
.volume-wrap:has([data-volume-bridge]:hover) .volume-panel,
|
|
.volume-wrap:has(.volume-panel:hover) .volume-panel,
|
|
.volume-wrap:focus-within .volume-panel,
|
|
.volume-panel:hover,
|
|
.volume-panel:focus-within {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.volume-wrap:has([data-mute]:hover) .volume-underline,
|
|
.volume-wrap:has([data-volume-bridge]:hover) .volume-underline,
|
|
.volume-wrap:has(.volume-panel:hover) .volume-underline,
|
|
.volume-wrap:focus-within .volume-underline {
|
|
opacity: 1;
|
|
}
|
|
|
|
.watch-episodes-scroll {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.watch-episodes-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|