diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css index 57dd6a2d2ec9d17eb044ffa63dbfd03ae63b3c5b..3623b5527f5f9853cd42c540991cd8764acd7be4 100644 --- a/dist/css/base/gin.css +++ b/dist/css/base/gin.css @@ -1793,7 +1793,7 @@ table .views-field.views-field-operations { } .gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input { - background-color: var(--gin-bg-input); + background-color: var(--gin-bg-input-dark); } @media (forced-colors: active) { @@ -1826,7 +1826,7 @@ table .views-field.views-field-operations { @media (forced-colors: active) { :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before { - background-color: CanvasText; + background-color: CanvasText !important; } } diff --git a/dist/css/theme/accent.css b/dist/css/theme/accent.css index 705f2d6850e01c8f1a8045f10cf191798b9589ff..103cb55f3d8bdc974c7476e8b9d77673afac11cf 100644 --- a/dist/css/theme/accent.css +++ b/dist/css/theme/accent.css @@ -13,6 +13,7 @@ .gin--dark-mode [data-gin-accent] { --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08); --gin-bg-app-rgb: 27, 27, 29; + --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .63); } [data-gin-accent=blue] { diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css index f26f49868709553073e6fba9fb5e72aa201e94bf..ef5d2f0b03e002293eb10790a314a92f671ace35 100644 --- a/dist/css/theme/dialog.css +++ b/dist/css/theme/dialog.css @@ -464,7 +464,7 @@ } .gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input { - background-color: var(--gin-bg-input); + background-color: var(--gin-bg-input-dark); } @media (forced-colors: active) { @@ -497,7 +497,7 @@ @media (forced-colors: active) { .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before { - background-color: CanvasText; + background-color: CanvasText !important; } } diff --git a/dist/css/theme/variables.css b/dist/css/theme/variables.css index 34d68c2e6ed4b4eec234a9855c54ddf15268defa..2eaef634b3c8571326db9369601054d23d0169c6 100644 --- a/dist/css/theme/variables.css +++ b/dist/css/theme/variables.css @@ -207,9 +207,11 @@ --gin-color-danger-lightest: #483439; --gin-color-green: #32cea4; --gin-color-info: #559bca; + --gin-bg-input-dark: var(--gin-bg-layer1); --gin-bg-input: var(--gin-bg-layer2); --gin-bg-app: #1b1b1d; --gin-bg-layer: #2a2a2d; + --gin-bg-layer1: #909098; --gin-bg-layer2: #3b3b3f; --gin-bg-layer3: #47474c; --gin-bg-layer4: #19191b; @@ -219,10 +221,11 @@ --gin-border-color: #43454a; --gin-border-color-secondary: rgba(255, 255, 255, .075); --gin-border-color-layer: rgba(0, 0, 0, .05); + --gin-border-color-layer1: #28282a; --gin-border-color-layer2: #76777b; --gin-border-color-table: #43454a; --gin-border-color-table-header: rgba(255, 255, 255, .4); - --gin-border-color-form-element: var(--gin-border-color-layer2); + --gin-border-color-form-element: var(--gin-border-color-layer1); --gin-bg-header: #1b1b1d; --gin-switch: var(--gin-color-primary); --gin-status-text: #c3cbd0; diff --git a/styles/base/_form.scss b/styles/base/_form.scss index b46bd5b6df9d4be8b8185a2ec4163589ac510212..1893bdfac8d50f89f8cd12409b0f389f1211dfe5 100644 --- a/styles/base/_form.scss +++ b/styles/base/_form.scss @@ -154,7 +154,7 @@ box-sizing: border-box; .gin--dark-mode & { - background-color: var(--gin-bg-input); + background-color: var(--gin-bg-input-dark); } @media (forced-colors: active) { @@ -176,7 +176,7 @@ } @media (forced-colors: active) { - background-color: CanvasText; + background-color: CanvasText!important; } } diff --git a/styles/theme/accent.scss b/styles/theme/accent.scss index 5580e1c6118b6650ca20fd35303ff4d6d8163fa6..d8f9aff957c0b3a701014bd7fc00a0cfcd4d81f0 100644 --- a/styles/theme/accent.scss +++ b/styles/theme/accent.scss @@ -13,6 +13,7 @@ .gin--dark-mode [data-gin-accent] { --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08); --gin-bg-app-rgb: #{color.red($colorDarkAppBackground)}, #{color.green($colorDarkAppBackground)}, #{color.blue($colorDarkAppBackground)}; + --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .63); } // Light mode diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss index 0ea76c019678c456546471dfbb0322e53074a843..337f661a262d81b5bfce4763185fa80b0a6c7731 100644 --- a/styles/theme/variables.scss +++ b/styles/theme/variables.scss @@ -252,11 +252,13 @@ --gin-color-info: #559bca; // Input + --gin-bg-input-dark: var(--gin-bg-layer1); --gin-bg-input: var(--gin-bg-layer2); // Layers --gin-bg-app: #{$colorDarkAppBackground}; --gin-bg-layer: #2A2A2D; + --gin-bg-layer1: #909098; --gin-bg-layer2: #3B3B3F; --gin-bg-layer3: #47474c; --gin-bg-layer4: #19191b; @@ -272,6 +274,7 @@ --gin-border-color: #43454a; --gin-border-color-secondary: rgba(255, 255, 255, .075); --gin-border-color-layer: rgba(0, 0, 0, .05); + --gin-border-color-layer1: #28282A; --gin-border-color-layer2: #76777B; --gin-border-color-table: #43454a; @@ -279,7 +282,7 @@ --gin-border-color-table-header: rgba(255, 255, 255, .4); // Form element - --gin-border-color-form-element: var(--gin-border-color-layer2); + --gin-border-color-form-element: var(--gin-border-color-layer1); // Table --gin-bg-header: #{$colorDarkAppBackground};