From 08875526198e5dbc9ea31f7fea63c73bc157f757 Mon Sep 17 00:00:00 2001 From: Krzysztof Witucki Date: Tue, 24 Dec 2019 12:16:49 +0100 Subject: [PATCH] Fix shadow on notification overlay and navigation-drawer minerva.variables.less: added gray color variable MainMenu.less: added shadow to navigation NotificationOverlay.less: changed alpha color of shadow drawers.less: replaced rgba color with the same color variable Bug: T231205 Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a --- minerva.less/minerva.variables.less | 1 + resources/skins.minerva.mainMenu.styles/MainMenu.less | 2 ++ .../skins.minerva.mainMenu.styles/NotificationsOverlay.less | 2 +- skinStyles/mobile.startup/drawers.less | 2 +- 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 9c30a30c2..065554106 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -29,6 +29,7 @@ @grayLight: @colorGray12; @grayLightest: @colorGray14; @background-color-primary: @wmui-color-accent90; +@grayDrawerShadow: rgba( 0, 0, 0, 0.35 ); /* * FIXME: Use these variables directly from wikimedia-ui-base when available. diff --git a/resources/skins.minerva.mainMenu.styles/MainMenu.less b/resources/skins.minerva.mainMenu.styles/MainMenu.less index 420a16e7a..a62088cbc 100644 --- a/resources/skins.minerva.mainMenu.styles/MainMenu.less +++ b/resources/skins.minerva.mainMenu.styles/MainMenu.less @@ -38,6 +38,7 @@ // .menu #mw-mf-page-left { visibility: visible; + box-shadow: 1px 0 8px 0 @grayDrawerShadow; .transform( translate( 0, 0 ) ); } } @@ -63,6 +64,7 @@ #main-menu-input:checked ~ #mw-mf-page-left { visibility: visible; + box-shadow: 1px 0 8px 0 @grayDrawerShadow; .transform( translate( 0, 0 ) ); } diff --git a/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less b/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less index f09e377f4..a8905c7dd 100644 --- a/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less +++ b/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less @@ -12,7 +12,7 @@ display: block; width: auto; right: 0; - box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 ); + box-shadow: -5px 0 0 0 @grayDrawerShadow; } @media all and ( min-width: @width-breakpoint-tablet ) { diff --git a/skinStyles/mobile.startup/drawers.less b/skinStyles/mobile.startup/drawers.less index 0e9d17f67..a23369a34 100644 --- a/skinStyles/mobile.startup/drawers.less +++ b/skinStyles/mobile.startup/drawers.less @@ -27,7 +27,7 @@ bottom: 0; left: 0; right: 0; - box-shadow: 0 -1px 8px 0 rgba( 0, 0, 0, 0.35 ); + box-shadow: 0 -1px 8px 0 @grayDrawerShadow; word-wrap: break-word; // needs to be higher than for overlays to show on top of overlays z-index: @z-indexOverOverlay;