From ecbbefce2c78a8884fd23ddc3b160336e7451cf7 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Fri, 17 Jan 2025 18:29:17 +0100 Subject: [PATCH 1/2] Alternative box-shadow for dark theme. --- pkg/web_css/lib/src/_home.scss | 4 ++-- pkg/web_css/lib/src/_variables.scss | 14 ++++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss index 8f9e8a9f9..862166085 100644 --- a/pkg/web_css/lib/src/_home.scss +++ b/pkg/web_css/lib/src/_home.scss @@ -108,14 +108,14 @@ .mini-list-item { background: var(--pub-neutral-bgColor); border-radius: 4px; - box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color); + box-shadow: var(--pub-box-shadow); padding: 28px 30px 30px; // title's top gap is about 2px (30-2 => 28) margin-bottom: 10px; min-height: 100px; &:hover { background: var(--pub-neutral-hover-bgColor); - box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color); + box-shadow: var(--pub-box-shadow-hover); @media (min-width: variables.$device-desktop-min-width) { .mini-list-item-body { diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index fff541cac..5da4fe2a9 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -79,6 +79,16 @@ --mdc-theme-primary: #0175c2; --mdc-theme-secondary: #0066d9; --mdc-typography-font-family: var(--pub-default-text-font_family); + + --pub-box-shadow: + 0 0 4px 2px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */ + 0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */ + 0.5px 1px 4px 2px hsla(0, 0%, 0%, 0.02); /* additional shadow */ + + --pub-box-shadow-hover: + 0 0 6px 3px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */ + 0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */ + 0.5px 1px 4px 3px hsla(0, 0%, 0%, 0.04); /* additional shadow */ } /// Variables that are specific to the light theme. @@ -115,9 +125,7 @@ --pub-weekly-chart-tooltip-text-color: var(--pub-color-white); --pub-detail_tab-admin-color: #990000; --pub-home_title-text-color: #254a76; - --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3); --pub-home_card_title-text-color: #1967d2; - --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; --pub-score_label-text-color: #6d7278; @@ -170,9 +178,7 @@ --pub-home_title-text-color: #31b0fc; --pub-weekly-chart-main-color: var(--pub-link-text-color); --pub-weekly-chart-tooltip-text-color: var(--pub-color-anchorBlack); - --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2); --pub-home_card_title-text-color: var(--pub-home_title-text-color); - --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; --pub-score_label-text-color: #a0b0b8; From 000ce23ef8995c7a8273181a8a46b657a8ad0bc5 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Fri, 17 Jan 2025 18:46:09 +0100 Subject: [PATCH 2/2] fix prefix --- pkg/web_css/lib/src/_home.scss | 2 +- pkg/web_css/lib/src/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss index 862166085..bd2b70301 100644 --- a/pkg/web_css/lib/src/_home.scss +++ b/pkg/web_css/lib/src/_home.scss @@ -115,7 +115,7 @@ &:hover { background: var(--pub-neutral-hover-bgColor); - box-shadow: var(--pub-box-shadow-hover); + box-shadow: var(--pub-box-hover-shadow); @media (min-width: variables.$device-desktop-min-width) { .mini-list-item-body { diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index 5da4fe2a9..3b1406c11 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -85,7 +85,7 @@ 0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */ 0.5px 1px 4px 2px hsla(0, 0%, 0%, 0.02); /* additional shadow */ - --pub-box-shadow-hover: + --pub-box-hover-shadow: 0 0 6px 3px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */ 0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */ 0.5px 1px 4px 3px hsla(0, 0%, 0%, 0.04); /* additional shadow */