mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-11-02 10:52:27 +00:00
feat: add design tokens and css tooling
This commit is contained in:
thePR0M3TH3AN committed
1 parent
6376e73951
commit
143abc8fd1
11 files changed
+1767
-126
No files matched your search
+164
-104
@@ -1,24 +1,6 @@
|
||||
@import "./tokens.css";
|
||||
|
||||
:root {
|
||||
/*
|
||||
Core palette tokens used across the application.
|
||||
--color-page keeps the primary content surface neutral while --color-surface
|
||||
powers the dark shells (sidebar, dialogs, cards).
|
||||
*/
|
||||
--color-page: #ffffff;
|
||||
--color-surface: #0f172a;
|
||||
--color-bg: var(--color-surface);
|
||||
--color-card: #1e293b;
|
||||
--color-card-private: #3b1d74;
|
||||
--color-primary: #fe0032;
|
||||
--color-secondary: #ff93a5;
|
||||
--color-card-critical: #3f0b13;
|
||||
--color-text: #f8fafc;
|
||||
--color-text-strong: #0f172a;
|
||||
--color-muted: #94a3b8;
|
||||
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1);
|
||||
--modal-motion-duration: 160ms;
|
||||
--scrollbar-width: 0.5rem;
|
||||
--scrollbar-track: rgba(255, 255, 255, 0.1);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
|
||||
@@ -73,7 +55,7 @@ html {
|
||||
|
||||
/* Core Styles */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-family: var(--font-family-sans);
|
||||
background-color: var(--color-page);
|
||||
color: var(--color-text-strong);
|
||||
line-height: 1.5;
|
||||
@@ -176,11 +158,15 @@ header img {
|
||||
|
||||
.video-card.video-card--owner-private {
|
||||
background-color: var(--color-card-private) !important;
|
||||
box-shadow: 0 0 0 0.125rem rgba(168, 85, 247, 0.55), var(--shadow-md);
|
||||
box-shadow:
|
||||
0 0 0 0.125rem rgba(168, 85, 247, 0.55),
|
||||
var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card.video-card--owner-private:hover {
|
||||
box-shadow: 0 0 0 0.125rem rgba(192, 132, 252, 0.65), var(--shadow-lg);
|
||||
box-shadow:
|
||||
0 0 0 0.125rem rgba(192, 132, 252, 0.65),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-visibility-toggle {
|
||||
@@ -208,8 +194,12 @@ header img {
|
||||
padding: 0.4rem 0.95rem;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.18s ease, color 0.18s ease,
|
||||
border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
|
||||
transition:
|
||||
background-color 0.18s ease,
|
||||
color 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.video-visibility-toggle__option:not(.is-disabled):hover {
|
||||
@@ -218,10 +208,15 @@ header img {
|
||||
}
|
||||
|
||||
.video-visibility-toggle__option[data-active="true"] {
|
||||
background: linear-gradient(135deg, rgba(129, 140, 248, 0.4), rgba(192, 132, 252, 0.32));
|
||||
color: #f8fafc;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(129, 140, 248, 0.4),
|
||||
rgba(192, 132, 252, 0.32)
|
||||
);
|
||||
color: var(--color-text);
|
||||
border-color: rgba(129, 140, 248, 0.6);
|
||||
box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4) inset,
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(129, 140, 248, 0.4) inset,
|
||||
0 6px 14px -6px rgba(129, 140, 248, 0.55);
|
||||
}
|
||||
|
||||
@@ -240,11 +235,15 @@ header img {
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
background-color: var(--color-card-critical);
|
||||
box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.35), var(--shadow-md);
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem rgba(239, 68, 68, 0.35),
|
||||
var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
|
||||
box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.45), var(--shadow-lg);
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem rgba(239, 68, 68, 0.45),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card--enter {
|
||||
@@ -263,7 +262,9 @@ header img {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 0.0625rem solid transparent;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
transition:
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.watch-history-card:hover {
|
||||
@@ -294,7 +295,7 @@ header img {
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
background-color: #0f172a;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.watch-history-card__thumbnailInner img {
|
||||
@@ -316,7 +317,7 @@ header img {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
@@ -327,13 +328,13 @@ header img {
|
||||
|
||||
.watch-history-card__title:hover,
|
||||
.watch-history-card__title:focus {
|
||||
color: #60a5fa;
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.watch-history-card__created {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #9ca3af;
|
||||
color: var(--color-muted-alt);
|
||||
}
|
||||
|
||||
.watch-history-card__meta {
|
||||
@@ -348,7 +349,7 @@ header img {
|
||||
.watch-history-card__watched {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #d1d5db;
|
||||
color: var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.watch-history-card__creator {
|
||||
@@ -366,9 +367,11 @@ header img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #1f2937;
|
||||
background-color: var(--color-panel);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.watch-history-card__creatorAvatar:hover,
|
||||
@@ -391,14 +394,14 @@ header img {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #e5e7eb;
|
||||
color: var(--color-subtle);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.watch-history-card__creatorName:hover,
|
||||
.watch-history-card__creatorName:focus {
|
||||
color: #60a5fa;
|
||||
color: var(--color-info);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -418,42 +421,45 @@ header img {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 0.0625rem solid transparent;
|
||||
background-color: #1f2937;
|
||||
color: #e5e7eb;
|
||||
background-color: var(--color-panel);
|
||||
color: var(--color-subtle);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, color 0.2s ease,
|
||||
border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.watch-history-card__action:hover,
|
||||
.watch-history-card__action:focus {
|
||||
background-color: #111827;
|
||||
color: #ffffff;
|
||||
border-color: #374151;
|
||||
background-color: var(--color-surface-alt);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.watch-history-card__action--primary {
|
||||
background-color: #2563eb;
|
||||
color: #ffffff;
|
||||
background-color: var(--color-info-strong);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.watch-history-card__action--primary:hover,
|
||||
.watch-history-card__action--primary:focus {
|
||||
background-color: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
background-color: var(--color-info-pressed);
|
||||
border-color: var(--color-info-pressed);
|
||||
}
|
||||
|
||||
.watch-history-card__action--danger {
|
||||
background-color: #7f1d1d;
|
||||
color: #ffffff;
|
||||
background-color: var(--color-critical);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.watch-history-card__action--danger:hover,
|
||||
.watch-history-card__action--danger:focus {
|
||||
background-color: #991b1b;
|
||||
border-color: #991b1b;
|
||||
background-color: var(--color-critical-strong);
|
||||
border-color: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -584,7 +590,7 @@ header img {
|
||||
.video-card .thumbnail-container {
|
||||
position: relative;
|
||||
padding-top: 56.25%;
|
||||
background-color: #0f172a;
|
||||
background-color: var(--color-surface);
|
||||
overflow: hidden;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
@@ -656,8 +662,8 @@ header img {
|
||||
justify-content: stretch;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #0f172a;
|
||||
color: #e2e8f0;
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-subtle-text);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
@@ -704,7 +710,11 @@ header img {
|
||||
padding: clamp(1.25rem, 2vw, 1.5rem);
|
||||
border-radius: 1.25rem;
|
||||
border: 0.0625rem solid rgba(148, 163, 184, 0.28);
|
||||
background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.72));
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
rgba(15, 23, 42, 0.94),
|
||||
rgba(15, 23, 42, 0.72)
|
||||
);
|
||||
box-shadow: 0 1.75rem 3.5rem rgba(8, 11, 30, 0.45);
|
||||
}
|
||||
|
||||
@@ -761,7 +771,10 @@ header img {
|
||||
box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -776,7 +789,11 @@ header img {
|
||||
|
||||
#profileModal .profile-card--active {
|
||||
border-color: rgba(59, 130, 246, 0.55);
|
||||
background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.78));
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
rgba(37, 99, 235, 0.22),
|
||||
rgba(15, 23, 42, 0.78)
|
||||
);
|
||||
box-shadow: 0 1.35rem 2.8rem rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
@@ -841,14 +858,17 @@ header img {
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
#profileModal .profile-card__action:hover,
|
||||
#profileModal .profile-card__action:focus-visible {
|
||||
background: rgba(59, 130, 246, 0.24);
|
||||
border-color: rgba(59, 130, 246, 0.6);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
#profileModal .profile-card__name {
|
||||
@@ -862,7 +882,9 @@ header img {
|
||||
|
||||
#profileModal .profile-card__npub {
|
||||
font-size: 0.75rem;
|
||||
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family:
|
||||
"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Monaco,
|
||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
color: rgba(148, 163, 184, 0.85);
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -884,14 +906,17 @@ header img {
|
||||
color: rgba(226, 232, 240, 0.85);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
background 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
#profileModal .profile-switcher__add:hover,
|
||||
#profileModal .profile-switcher__add:focus-visible {
|
||||
border-color: rgba(96, 165, 250, 0.65);
|
||||
background: rgba(59, 130, 246, 0.18);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -979,7 +1004,7 @@ header img {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
background-color: #0f172a;
|
||||
background-color: var(--color-surface);
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
animation: fadeIn var(--modal-motion-duration) ease-out;
|
||||
@@ -1002,7 +1027,7 @@ header img {
|
||||
#playerModal .player-modal__video video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-color: #000;
|
||||
background-color: var(--color-black);
|
||||
border-radius: 0.75rem;
|
||||
display: block;
|
||||
box-shadow: 0 1.125rem 2.75rem rgba(8, 11, 30, 0.55);
|
||||
@@ -1031,13 +1056,13 @@ header img {
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: #9ca3af;
|
||||
color: var(--color-muted-alt);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.view-count-text {
|
||||
white-space: nowrap;
|
||||
color: #6b7280;
|
||||
color: var(--color-muted-strong);
|
||||
}
|
||||
|
||||
html.modal-open {
|
||||
@@ -1085,7 +1110,7 @@ body.modal-open #sidebarOverlay {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #0f172a;
|
||||
background-color: var(--color-surface);
|
||||
animation: fadeIn var(--modal-motion-duration) ease-out;
|
||||
}
|
||||
|
||||
@@ -1143,7 +1168,7 @@ body.modal-open #sidebarOverlay {
|
||||
.modal-nav .icon-button {
|
||||
background-color: rgba(30, 41, 59, 0.85);
|
||||
border: 0.0625rem solid rgba(148, 163, 184, 0.4);
|
||||
color: #f8fafc;
|
||||
color: var(--color-text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1184,7 +1209,7 @@ body.modal-open #sidebarOverlay {
|
||||
width: 18rem;
|
||||
max-width: calc(100vw - 2rem);
|
||||
background: rgba(11, 17, 32, 0.96);
|
||||
color: #e5e7eb;
|
||||
color: var(--color-subtle);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
box-shadow: 0 22px 48px -18px rgba(8, 14, 28, 0.7);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
@@ -1323,7 +1348,7 @@ button:not(.icon-button):focus {
|
||||
animation: spin 1s linear infinite;
|
||||
border: 0.125rem solid rgba(96, 165, 250, 0.35);
|
||||
border-radius: 9999px;
|
||||
border-top-color: #60a5fa;
|
||||
border-top-color: var(--color-info);
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
@@ -1342,7 +1367,7 @@ button:not(.icon-button):focus {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #6b7280;
|
||||
color: var(--color-muted-strong);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
@@ -1356,7 +1381,7 @@ button:not(.icon-button):focus {
|
||||
align-items: center;
|
||||
background-color: rgba(31, 41, 55, 0.9);
|
||||
border-radius: 0.5rem;
|
||||
color: #e5e7eb;
|
||||
color: var(--color-subtle);
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
@@ -1367,7 +1392,7 @@ button:not(.icon-button):focus {
|
||||
animation: spin 1s linear infinite;
|
||||
border: 0.125rem solid rgba(229, 231, 235, 0.35);
|
||||
border-radius: 9999px;
|
||||
border-top-color: #f9fafb;
|
||||
border-top-color: var(--color-page-alt);
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
@@ -1451,7 +1476,7 @@ footer a:hover {
|
||||
|
||||
#disclaimerModal .modal-footer {
|
||||
padding: 1.25rem 1.5rem 1.75rem;
|
||||
background-color: #1a2234;
|
||||
background-color: var(--color-overlay);
|
||||
border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@@ -1537,16 +1562,18 @@ footer a:hover {
|
||||
width: 2.5rem; /* 40px */
|
||||
height: 2.5rem; /* 40px */
|
||||
line-height: 0;
|
||||
background-color: #3f3f46; /* Gray 700 */
|
||||
color: #fff;
|
||||
background-color: var(--color-neutral-700); /* Gray 700 */
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: #52525b; /* Gray 600 */
|
||||
background-color: var(--color-neutral-600); /* Gray 600 */
|
||||
}
|
||||
|
||||
.icon-button:focus,
|
||||
@@ -1566,7 +1593,7 @@ footer a:hover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
background-color: #1e293b;
|
||||
background-color: var(--color-card);
|
||||
}
|
||||
.ratio-16-9 > img {
|
||||
position: absolute;
|
||||
@@ -1607,7 +1634,10 @@ footer a:hover {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
width 200ms ease,
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
/* Keep below modal stacks so dialogs overlay the drawer. */
|
||||
z-index: var(--z-sidebar);
|
||||
box-shadow: none;
|
||||
@@ -1681,7 +1711,10 @@ footer a:hover {
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
|
||||
transition:
|
||||
background 180ms ease,
|
||||
color 180ms ease,
|
||||
border-color 180ms ease;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -1689,7 +1722,7 @@ footer a:hover {
|
||||
.sidebar-collapse-toggle:hover {
|
||||
background: rgba(148, 163, 184, 0.18);
|
||||
border-color: rgba(148, 163, 184, 0.35);
|
||||
color: #f8fafc;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar-collapse-toggle:focus-visible {
|
||||
@@ -1723,14 +1756,17 @@ footer a:hover {
|
||||
font-weight: 600;
|
||||
color: rgba(226, 232, 240, 0.94);
|
||||
text-decoration: none;
|
||||
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
color 160ms ease,
|
||||
transform 160ms ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar-nav-link:hover {
|
||||
background: rgba(148, 163, 184, 0.18);
|
||||
color: #f8fafc;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar-nav-link:focus-visible {
|
||||
@@ -1779,7 +1815,10 @@ footer a:hover {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
border-color 160ms ease,
|
||||
color 160ms ease;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1787,7 +1826,7 @@ footer a:hover {
|
||||
.sidebar-dropup-trigger:hover {
|
||||
background: rgba(51, 65, 85, 0.95);
|
||||
border-color: rgba(148, 163, 184, 0.32);
|
||||
color: #f8fafc;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar-dropup-trigger:focus-visible {
|
||||
@@ -1826,7 +1865,10 @@ footer a:hover {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(0.5rem);
|
||||
transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease,
|
||||
visibility 160ms ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@@ -1917,19 +1959,34 @@ body.sidebar-open #sidebarOverlay {
|
||||
|
||||
#app {
|
||||
box-sizing: border-box;
|
||||
transition: margin-left 200ms ease, width 200ms ease, max-width 200ms ease;
|
||||
transition:
|
||||
margin-left 200ms ease,
|
||||
width 200ms ease,
|
||||
max-width 200ms ease;
|
||||
}
|
||||
|
||||
#app[data-sidebar-state="collapsed"] {
|
||||
margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));
|
||||
width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
|
||||
max-width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
|
||||
margin-left: calc(
|
||||
var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
|
||||
);
|
||||
width: calc(
|
||||
100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
|
||||
);
|
||||
max-width: calc(
|
||||
100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
|
||||
);
|
||||
}
|
||||
|
||||
#app[data-sidebar-state="expanded"] {
|
||||
margin-left: calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));
|
||||
width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
|
||||
max-width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
|
||||
margin-left: calc(
|
||||
var(--sidebar-width-expanded) + var(--sidebar-content-gap)
|
||||
);
|
||||
width: calc(
|
||||
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
|
||||
);
|
||||
max-width: calc(
|
||||
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
|
||||
);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed,
|
||||
@@ -2032,28 +2089,31 @@ body.sidebar-open #sidebarOverlay {
|
||||
|
||||
.edit-field-button {
|
||||
align-items: center;
|
||||
background-color: #1f2937;
|
||||
background-color: var(--color-panel);
|
||||
border-radius: 0.5rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--color-subtle-text);
|
||||
display: inline-flex;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.85rem;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.edit-field-button:hover,
|
||||
.edit-field-button:focus {
|
||||
background-color: #334155;
|
||||
color: #f8fafc;
|
||||
background-color: var(--color-panel-hover);
|
||||
color: var(--color-text);
|
||||
transform: translateY(-0.0625rem);
|
||||
}
|
||||
|
||||
.locked-input {
|
||||
background-color: rgba(31, 41, 55, 0.75) !important;
|
||||
border-color: rgba(55, 65, 81, 0.9) !important;
|
||||
color: #94a3b8 !important;
|
||||
color: var(--color-muted) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user