mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
461 lines
16 KiB
CSS
461 lines
16 KiB
CSS
/* Minimal visual refresh overrides — non-invasive, CSS-only. */
|
|
|
|
/* 1) Palette and radii overrides via existing tokens */
|
|
:root {
|
|
--button-radius: 8px;
|
|
--lighttheme-2: #f6f7f9; /* surfaces */
|
|
--lighttheme-3: #eceef2; /* containers */
|
|
--lighttheme-4: #d9dde5; /* borders */
|
|
--lighttheme-6: #c3c7d0; /* subtle lines */
|
|
--lighttheme-text: #111;
|
|
|
|
/* keep original semantics; just slightly modernize */
|
|
--container-color: #3a3d45; /* dark surface used in many cards */
|
|
|
|
/* global accent (aligned with about.html) */
|
|
--accent-color: #3e8fd8;
|
|
--accent-hover-color: #56a5ea;
|
|
|
|
/* unified link colors (light theme) — aligned with about.html accent */
|
|
--a-link: #3e8fd8; /* base: #4299e1 softened */
|
|
--a-visited: #3e8fd8;
|
|
--a-hover: #56a5ea; /* lighter hover */
|
|
--a-focus: #56a5ea;
|
|
--a-active: #2f7ec4;
|
|
|
|
/* lighter links used in specific sections */
|
|
--a-lighter-link: #2d6aa6;
|
|
--a-lighter-visited: #2d6aa6;
|
|
--a-lighter-hover: #3e7fbd;
|
|
--a-lighter-focus: #3e7fbd;
|
|
--a-lighter-active: #246295;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* soften Discord greys slightly */
|
|
--discord-grey-5: #2f3237;
|
|
--discord-grey-7: #3a3d45;
|
|
--discord-text: hsl(210 10% 92% / 1);
|
|
/* muted icon color to match subdued typography */
|
|
--muted-icon: #c8ccd4;
|
|
/* unified link colors (dark theme) */
|
|
--a-dark-link: #9ec7ee; /* tinted to about.html accent */
|
|
--a-dark-visited: #9ec7ee;
|
|
--a-dark-hover: #b9d8f6;
|
|
--a-dark-focus: #b9d8f6;
|
|
--a-dark-active: #8abbe8;
|
|
--a-darker-link: #bcd8f4;
|
|
--a-darker-visited: #bcd8f4;
|
|
--a-darker-hover: #cfe6fb;
|
|
--a-darker-focus: #cfe6fb;
|
|
--a-darker-active: #a9cdef;
|
|
/* accent for dark UI */
|
|
--accent-color: #6fb7ef;
|
|
--accent-hover-color: #8ec9f4;
|
|
}
|
|
}
|
|
|
|
/* 2) Typographic refresh (safe defaults) */
|
|
body {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* subtle depth */
|
|
background-image: radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,0.025), transparent 60%),
|
|
radial-gradient(1000px 600px at 110% 0%, rgba(0,0,0,0.08), transparent 60%);
|
|
}
|
|
|
|
/* 3) Cards and columns (landing containers) */
|
|
.column.card,
|
|
.column {
|
|
/* Use solid backgrounds to preserve icon contrast and avoid transparency */
|
|
background-color: var(--lighttheme-3) !important;
|
|
backdrop-filter: saturate(120%) blur(2px);
|
|
border: 1px solid var(--lighttheme-4);
|
|
border-radius: 14px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.02) inset;
|
|
}
|
|
.darktheme .column.card,
|
|
.darktheme .column {
|
|
background-color: var(--discord-grey-7) !important;
|
|
border: 1px solid #4a4d55;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.02) inset;
|
|
}
|
|
|
|
.column:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 24px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Prevent hover-lift effect when a tile is expanded full-window */
|
|
.skip-animation,
|
|
.in-animation {
|
|
transition: none !important;
|
|
}
|
|
.skip-animation:hover,
|
|
.in-animation:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* 4) Container content panels */
|
|
.container-inner {
|
|
padding: 14px 16px;
|
|
border-radius: 12px;
|
|
}
|
|
/* preserve existing backgrounds from main.css; no overrides here */
|
|
|
|
/* 5) Buttons and inputs (respect existing tokens) */
|
|
button {
|
|
border-radius: var(--button-radius);
|
|
transition: box-shadow .15s ease, transform .08s ease, filter .15s ease;
|
|
}
|
|
button:hover {
|
|
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
|
|
}
|
|
button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Accessible focus treatment */
|
|
:where(a, button, [role="button"], input, select, textarea):focus-visible {
|
|
outline: 2px solid var(--a-hover);
|
|
outline-offset: 2px;
|
|
}
|
|
.darktheme :where(a, button, [role="button"], input, select, textarea):focus-visible {
|
|
outline-color: var(--a-dark-hover);
|
|
}
|
|
|
|
input[type="text"], input[type="search"], input[type="number"], select {
|
|
border: 1px solid var(--lighttheme-4);
|
|
background: var(--lighttheme-2);
|
|
color: var(--lighttheme-text);
|
|
border-radius: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
.darktheme input[type="text"],
|
|
.darktheme input[type="search"],
|
|
.darktheme input[type="number"],
|
|
.darktheme select {
|
|
border: 1px solid #4a4d55;
|
|
background: var(--discord-grey-5);
|
|
color: var(--discord-text);
|
|
}
|
|
|
|
/* 17) Radios/checkboxes: make checked state feel active */
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
accent-color: var(--accent-color);
|
|
}
|
|
.darktheme input[type="radio"],
|
|
.darktheme input[type="checkbox"] {
|
|
accent-color: var(--accent-color);
|
|
}
|
|
input[type="radio"] + label,
|
|
input[type="checkbox"] + label { cursor: pointer; }
|
|
input[type="radio"]:checked + label,
|
|
input[type="checkbox"]:checked + label {
|
|
color: var(--a-link);
|
|
font-weight: 600;
|
|
}
|
|
/* Override: do not color labels on selection — only the control gets color */
|
|
input[type="radio"]:checked + label,
|
|
input[type="checkbox"]:checked + label {
|
|
color: inherit !important;
|
|
font-weight: inherit !important;
|
|
}
|
|
.darktheme input[type="radio"]:checked + label,
|
|
.darktheme input[type="checkbox"]:checked + label {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Higher-contrast placeholders (theme-aware) */
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: #6b7686 !important; /* slightly darker than default for readability */
|
|
}
|
|
.darktheme :not(.promptModalInner) > input::placeholder,
|
|
.darktheme :not(.promptModalInner) > textarea::placeholder {
|
|
color: var(--muted-icon, #c8ccd4) !important; /* brighter on dark for contrast */
|
|
}
|
|
|
|
/* Vendor placeholder fallbacks */
|
|
::-webkit-input-placeholder { color: #6b7686 !important; }
|
|
::-moz-placeholder { color: #6b7686 !important; }
|
|
:-ms-input-placeholder { color: #6b7686 !important; }
|
|
:-moz-placeholder { color: #6b7686 !important; }
|
|
.darktheme ::-webkit-input-placeholder { color: var(--muted-icon, #c8ccd4) !important; }
|
|
.darktheme ::-moz-placeholder { color: var(--muted-icon, #c8ccd4) !important; }
|
|
.darktheme :-ms-input-placeholder { color: var(--muted-icon, #c8ccd4) !important; }
|
|
.darktheme :-moz-placeholder { color: var(--muted-icon, #c8ccd4) !important; }
|
|
|
|
|
|
/* Light theme icon subtlety */
|
|
.column.card .las { color: #5b6574; }
|
|
|
|
/* 13) High-contrast treatment for copy links (reshare) */
|
|
/* The anchor element itself carries .grabLinks; ensure we target it directly */
|
|
a.grabLinks:link,
|
|
a.grabLinks:visited {
|
|
color: var(--a-link) !important;
|
|
text-decoration: underline;
|
|
}
|
|
.darktheme a.grabLinks:link,
|
|
.darktheme a.grabLinks:visited {
|
|
color: var(--a-dark-link) !important;
|
|
text-decoration: underline;
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
|
|
}
|
|
a.grabLinks:hover,
|
|
a.grabLinks:active {
|
|
color: var(--a-hover) !important;
|
|
}
|
|
.darktheme a.grabLinks:hover,
|
|
.darktheme a.grabLinks:active {
|
|
color: var(--a-dark-hover) !important;
|
|
}
|
|
|
|
/* Copy-this-URL label: increase contrast subtly */
|
|
#copythisurl { color: #5b6574 !important; }
|
|
.darktheme #copythisurl { color: var(--muted-icon) !important; }
|
|
|
|
/* 13b) Fix dark-mode audio source multiselect contrast */
|
|
.darktheme ul#audioSource,
|
|
.darktheme ul#audioSource3 {
|
|
background-color: var(--discord-grey-6) !important;
|
|
border: 1px solid var(--discord-grey-8) !important;
|
|
}
|
|
.darktheme ul#audioSource label,
|
|
.darktheme ul#audioSource3 label {
|
|
background-color: transparent !important;
|
|
color: var(--discord-text) !important;
|
|
}
|
|
|
|
/* Ensure selected audio source labels don't turn white */
|
|
ul#audioSource input:checked + label,
|
|
ul#audioSource3 input:checked + label {
|
|
color: #111 !important;
|
|
}
|
|
.darktheme ul#audioSource input:checked + label,
|
|
.darktheme ul#audioSource3 input:checked + label {
|
|
color: var(--discord-text) !important;
|
|
}
|
|
|
|
/* 8) Director/Guest toolbar polish (glass, non-invasive) */
|
|
#subControlButtons {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(8px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
}
|
|
.darktheme #subControlButtons {
|
|
background-color: rgba(28, 31, 36, 0.6);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow: 0 10px 28px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
#subControlButtons div, #subControlButtons span button {
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
|
|
}
|
|
#subControlButtons div:hover { border-radius: 8px; }
|
|
|
|
/* Controls grid buttons: consistent shape & hover */
|
|
.controlsGrid button {
|
|
border-radius: 8px;
|
|
padding: 6px 8px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
|
|
}
|
|
.controlsGrid button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
|
|
}
|
|
|
|
/* Director message box: glass pane */
|
|
.controlsGrid .director-message-box {
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(6px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(6px) saturate(120%);
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
.darktheme .controlsGrid .director-message-box {
|
|
background: rgba(58,61,69,0.55);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.darktheme .controlsGrid .director-message-box textarea {
|
|
background-color: rgba(64,66,73,0.7);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* 9) Optional: utility class for explicit glass usage (not applied anywhere yet) */
|
|
.glass {
|
|
background-color: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(10px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(120%);
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
|
|
}
|
|
.darktheme .glass {
|
|
background-color: rgba(28,31,36,0.6);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* 13) Close buttons and director link icons — unify intensity */
|
|
.close-btn, .overlayCloseBtn { color: #5b6574; }
|
|
.close-btn:hover, .overlayCloseBtn:hover { color: var(--a-hover); }
|
|
.darktheme .close-btn, .darktheme .overlayCloseBtn { color: var(--muted-icon); }
|
|
.darktheme .close-btn:hover, .darktheme .overlayCloseBtn:hover { color: var(--a-dark-hover); }
|
|
|
|
.director-link-icons .las { color: #5b6574; }
|
|
.director-link-icons .las:hover { color: var(--a-hover); }
|
|
.darktheme .director-link-icons .las { color: var(--muted-icon); }
|
|
.darktheme .director-link-icons .las:hover { color: var(--a-dark-hover); }
|
|
|
|
/* 14) Modal glass and alert polish (safe: background/border only) */
|
|
.modal-content,
|
|
.alertModalInner,
|
|
.popup-message {
|
|
background-color: rgba(255,255,255,0.80) !important;
|
|
backdrop-filter: blur(8px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
|
border: 1px solid rgba(0,0,0,0.08) !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
.darktheme .modal-content,
|
|
.darktheme .alertModalInner,
|
|
.darktheme .popup-message {
|
|
background-color: rgba(34,37,44,0.70) !important;
|
|
border: 1px solid rgba(255,255,255,0.08) !important;
|
|
}
|
|
|
|
/* 15) Chat send button harmony */
|
|
.chatBarInputButton {
|
|
background-color: var(--accent-color) !important;
|
|
color: #000 !important;
|
|
border: 1px solid #2f7ec4 !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
.chatBarInputButton:hover {
|
|
background-color: var(--accent-hover-color) !important;
|
|
}
|
|
|
|
/* 16) Solo link accent harmonization */
|
|
a.soloLink:link, a.soloLink:visited { color: var(--a-link); }
|
|
.darktheme a.soloLink:link, .darktheme a.soloLink:visited { color: var(--a-dark-link); }
|
|
a.soloLink:hover { color: var(--a-hover); }
|
|
.darktheme a.soloLink:hover { color: var(--a-dark-hover); }
|
|
|
|
/* 10) Header glass — subtle and safe */
|
|
#header {
|
|
background-color: rgba(15, 19, 29, 0.60) !important;
|
|
backdrop-filter: blur(6px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(6px) saturate(120%);
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.darktheme #header {
|
|
background-color: rgba(14, 17, 24, 0.60) !important;
|
|
}
|
|
|
|
/* 11) Chat module glass and cohesion */
|
|
#chatModule {
|
|
background-color: rgba(255,255,255,0.75) !important;
|
|
backdrop-filter: blur(10px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(120%);
|
|
border: 1px solid rgba(0,0,0,0.08) !important;
|
|
border-radius: 10px !important;
|
|
overflow: hidden;
|
|
}
|
|
.darktheme #chatModule {
|
|
background-color: rgba(28,31,36,0.65) !important;
|
|
border: 1px solid rgba(255,255,255,0.08) !important;
|
|
}
|
|
.chat-header {
|
|
background-color: transparent !important;
|
|
border-bottom: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
.darktheme .chat-header { border-bottom-color: rgba(255,255,255,0.08); }
|
|
.chat-input-area { background-color: transparent !important; }
|
|
|
|
/* Chat links harmonized with accent */
|
|
div#chatBody a {
|
|
color: var(--a-link) !important;
|
|
background-color: rgba(62,143,216,0.1) !important;
|
|
border: 1px solid currentColor !important;
|
|
}
|
|
.darktheme div#chatBody a {
|
|
color: var(--a-dark-link) !important;
|
|
background-color: rgba(158,199,238,0.10) !important;
|
|
border-color: var(--a-dark-link) !important;
|
|
}
|
|
|
|
/* 12) Primary CTA harmony */
|
|
.gobutton {
|
|
background-color: var(--accent-color) !important;
|
|
border-color: #2f7ec4 !important;
|
|
}
|
|
.gobutton:hover {
|
|
background-color: var(--accent-hover-color) !important;
|
|
border-color: #2f7ec4 !important;
|
|
}
|
|
|
|
/* 20) Message cards — softer backgrounds and accents */
|
|
.message-card { border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
|
.warning.message-card { background: #fffbe8; border-left: 4px solid #f2df75; }
|
|
.info.message-card { background: #eef3fb; border-left: 4px solid #9fc4f5; }
|
|
.darktheme .message-card { background-color: #2f3237; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
|
|
.darktheme .warning.message-card { background: #3a3d45; border-left-color: #f2df75; }
|
|
.darktheme .info.message-card { background: #363b46; border-left-color: #9fc4f5; }
|
|
|
|
/* 21) Tooltips — readability and polish */
|
|
.tooltip .tooltiptext {
|
|
background-color: rgba(15,19,29,0.92) !important;
|
|
color: #e8eef6 !important;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
|
|
}
|
|
.darktheme .tooltip .tooltiptext { background-color: rgba(34,37,44,0.95) !important; }
|
|
|
|
/* 22) Sliders — theme-aware styling */
|
|
input[type="range"] { -webkit-appearance: none; background: transparent; height: 24px; }
|
|
input[type="range"]:focus { outline: none; }
|
|
/* WebKit */
|
|
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--lighttheme-4); border-radius: 999px; }
|
|
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); border: 1px solid #2f7ec4; margin-top: -5px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
|
|
/* Firefox */
|
|
input[type="range"]::-moz-range-track { height: 6px; background: var(--lighttheme-4); border-radius: 999px; }
|
|
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); border: 1px solid #2f7ec4; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
|
|
input[type="range"]::-moz-range-progress { height: 6px; background: var(--accent-color); border-radius: 999px; }
|
|
.darktheme input[type="range"]::-webkit-slider-runnable-track { background: var(--discord-grey-6); }
|
|
.darktheme input[type="range"]::-moz-range-track { background: var(--discord-grey-6); }
|
|
.darktheme input[type="range"]::-moz-range-progress { background: var(--a-dark-link); }
|
|
.darktheme input[type="range"]::-webkit-slider-thumb { background: var(--a-dark-link); border-color: #6b8db3; }
|
|
.darktheme input[type="range"]::-moz-range-thumb { background: var(--a-dark-link); border-color: #6b8db3; }
|
|
|
|
/* 23) Non-expanded tiles — prevent scrollbars */
|
|
.column.card:not(.skip-animation):not(.in-animation) { overflow-y: hidden !important; }
|
|
|
|
/* 25) Create a Room (#container-1) — reduce boldness, improve contrast */
|
|
.darktheme #container-1 th b,
|
|
.darktheme #container-1 td b { font-weight: 400 !important; }
|
|
.darktheme #container-1 th,
|
|
.darktheme #container-1 td,
|
|
.darktheme #container-1 label { color: #fff !important; }
|
|
.darktheme #container-1 [data-translate="guests-only-see-director"],
|
|
.darktheme #container-1 [data-translate="scenes-can-see-director"] { color: #fff !important; font-weight: 400 !important; }
|
|
|
|
.invite_setting_group {
|
|
padding: 20px;
|
|
}
|
|
|
|
#videoname4 {
|
|
padding: 25px;
|
|
}
|
|
|
|
/* Subtle vertical balance for all tile headings */
|
|
.column.card > i { margin-top: 17px!important;}
|
|
|