From 98eaa00cd5409b496370667a36c7d1197e47363f Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Tue, 11 Jun 2024 16:46:30 -0400 Subject: [PATCH] Improve Minerva drop-shadows in dark-mode Converts several drop-shadows to use standard Codex values: - `.search-box .search` uses `@box-shadow-drop-small` - `.drawer, .toast` uses `@box-shadow-drop-xx-large` - `.toggle-list__list--drop-down` uses `@border-color-base` Bug: T364425 Change-Id: Id00e525655d3a7138aa65f424fd6ab2ff82290c8 --- includes/Skins/ToggleList/DropdownList.less | 3 ++- resources/skins.minerva.base.styles/ui.less | 2 +- skinStyles/mobile.startup/drawers.less | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/includes/Skins/ToggleList/DropdownList.less b/includes/Skins/ToggleList/DropdownList.less index fab73605c..aceb7c48b 100644 --- a/includes/Skins/ToggleList/DropdownList.less +++ b/includes/Skins/ToggleList/DropdownList.less @@ -8,7 +8,8 @@ overflow-y: auto; // The menu floats over content but below overlays. z-index: @z-index-drawer; - box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1; + // Two box-shadows: first creates a drop-shadow, second acts as a subtle border. + box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @border-color-base; visibility: hidden; opacity: 0; transform: translateY( -8px ); diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index d9728e6fa..a36d1e038 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -112,7 +112,7 @@ main { border: @border-width-base @border-style-base var( --border-color-inverted ); border-radius: @border-radius-base; padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon; - box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 ); + box-shadow: @box-shadow-drop-small; // Keyboard focus is taken care of below at `.search:focus`. outline: 0; transition-property: border-color, box-shadow; diff --git a/skinStyles/mobile.startup/drawers.less b/skinStyles/mobile.startup/drawers.less index 39dcdff89..72f7cb8f2 100644 --- a/skinStyles/mobile.startup/drawers.less +++ b/skinStyles/mobile.startup/drawers.less @@ -36,7 +36,7 @@ .toast, .drawer { box-sizing: border-box; - box-shadow: 0 -1px 8px 0 @box-shadow-color-base; + box-shadow: @box-shadow-drop-xx-large; word-wrap: break-word; // don't use visibility: hidden in old browsers that don't support animations display: none;