Fix a number of light mode issues and get rid of scrollbar jumping on menus (#4760)

* Fix DEV-466, Fixes #4692 as well as a bunch of other poor contrast and inconsistency issues in light mode. Adds shadows to buttons and makes scrollbar gutter stable.

* lintttt & only do scrollbar gutter on website

* try to fix following hydration issue

* try another clientonly approach

* fix home page link animation

* lint

* remove dropdown style from checkbox & improve shadow consistency

* liiiint
This commit is contained in:
Prospector
2025-11-13 15:21:43 -08:00
committed by GitHub
parent c27f787c91
commit 94c0003c19
40 changed files with 384 additions and 693 deletions

View File

@@ -825,7 +825,7 @@ a,
.v-popper--theme-dropdown,
.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
.v-popper__inner {
border: 1px solid var(--color-button-bg) !important;
border: 1px solid var(--color-divider) !important;
padding: var(--gap-sm) !important;
width: fit-content !important;
border-radius: var(--radius-md) !important;
@@ -834,7 +834,7 @@ a,
}
.v-popper__arrow-outer {
border-color: var(--color-button-bg) !important;
border-color: var(--color-divider) !important;
}
.v-popper__arrow-inner {

View File

@@ -76,7 +76,7 @@ pre {
padding: 1em 1em 1em 1em;
border-width: 5px;
border-radius: 2em;
border-color: var(--color-button-bg);
border-color: var(--color-divider);
overflow-x: hidden;
code {

View File

@@ -3,7 +3,7 @@
--surface-2: #f5f5f5;
--surface-3: #f8f8f8;
--surface-4: #ffffff;
--surface-5: #e6e6e6;
--surface-5: #dddddd;
--color-red-50: #fef2f2;
--color-red-100: #fee5e7;
@@ -97,8 +97,8 @@
--color-button-border: rgba(161, 161, 161, 0.35);
--color-scrollbar: #96a2b0;
--color-divider: var(--surface-2);
--color-divider-dark: #c8cdd3;
--color-divider: var(--surface-5);
--color-divider-dark: var(--surface-5);
--color-base: var(--color-text-default);
--color-secondary: var(--color-text-tertiary);
@@ -207,6 +207,8 @@ html {
--color-link: var(--color-blue) !important;
--color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
--shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.light-mode,