wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 15:16:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modify drop-shadows for dark-mode

Browse source 
Changes drop-shadow color for Page Previews from
`rgba( 0, 0, 0, 0.05 )` to `@background-color-neutral`.

This is a slight visual change that maintains the tone of the
gray border, but removes it's opacity.

Bug: T365428
Change-Id: I065324e35eb28027d98e88d35b99b1d5266690d5
This commit is contained in:
Jan Drewniak 2024-06-12 19:19:22 -04:00
parent 52f0a7a2c3
commit 39f09414c8
1 changed files with 7 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/ui/templates/popup/popup.less
View file

@ -12,12 +12,13 @@
// Not tall Landscape Portrait
// Not tall Missing Landscape
@borderColorPopup: rgba( 0, 0, 0, 0.05 );
@borderColorPopup: @background-color-neutral;
// The subtracting-triangles method results in a line that
// is ~0.7px wide, so make it slightly darker to compensate.
@borderColorPopupPointerNoImage: rgba( 0, 0, 0, 0.07 );
@previewFooterCogIconInteractionAreaSize: 34px;
@previewFooterHeight: @popupPadding + @previewFooterCogIconInteractionAreaSize;
@previewBoxShadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 0 1px @borderColorPopup;
// Same as the --pointer-height in popup.less
@previewPointerHeight: 8px;
@ -26,7 +27,7 @@
background: @background-color-base;
position: absolute;
z-index: @zIndexPopup;
box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px 1px @borderColorPopup;
box-shadow: @previewBoxShadow;
padding: 0;
display: none;
font-size: 14px;
@ -440,12 +441,8 @@
// Apply night mode styles that can't be handled with CSS variables, i.e. anything with rgba()
html.skin-theme-clientpref-night {
.mwe-popups {
box-shadow: 0 30px 90px -20px rgba( 255, 255, 255, 0.3 ), 0 0 1px 1px rgba( 255, 255, 255, 0.05 );
&.mwe-popups-no-image-pointer::before {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );
}
.mwe-popups.mwe-popups-no-image-pointer::before {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );
}
.mwe-popups-extract[ dir='ltr' ]::after {
@ -461,12 +458,8 @@ html.skin-theme-clientpref-night {
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
.mwe-popups {
box-shadow: 0 30px 90px -20px rgba( 255, 255, 255, 0.3 ), 0 0 1px 1px rgba( 255, 255, 255, 0.05 );
&.mwe-popups-no-image-pointer::before {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );
}
.mwe-popups.mwe-popups-no-image-pointer::before {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );
}
.mwe-popups-extract[ dir='ltr' ]::after {