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

Merge "Fix popups night mode"

Browse source
This commit is contained in:
jenkins-bot 2024-03-13 20:26:10 +00:00 committed by Gerrit Code Review
parent 407a1011e9 36160150cd
commit 2245ecee4e
1 changed files with 51 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@
@previewPointerHeight: 8px; @previewPointerHeight: 8px;
.mwe-popups { .mwe-popups {
background: #fff; background: @background-color-base;
position: absolute; position: absolute;
z-index: @zIndexPopup; z-index: @zIndexPopup;
box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px 1px @borderColorPopup; box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px 1px @borderColorPopup;
@ -174,7 +174,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-top( 7px, 7px, #fff, 4px ); .mwe-popups-border-pointer-top( 7px, 7px, @background-color-base, 4px );
} }
} }
@ -197,7 +197,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-top( 8px, 6px, #fff, 4px ); .mwe-popups-border-pointer-top( 8px, 6px, @background-color-base, 4px );
z-index: @zIndexForeground; z-index: @zIndexForeground;
} }
@ -207,7 +207,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-top( 8px, 290px, #fff, 4px ); .mwe-popups-border-pointer-top( 8px, 290px, @background-color-base, 4px );
} }
} }
@ -244,7 +244,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-bottom( 8px, 290px, #fff, 4px ); .mwe-popups-border-pointer-bottom( 8px, 290px, @background-color-base, 4px );
z-index: @zIndexForeground; z-index: @zIndexForeground;
} }
@ -256,7 +256,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-bottom( 8px, 417px, #fff, 4px ); .mwe-popups-border-pointer-bottom( 8px, 417px, @background-color-base, 4px );
} }
> div > a > svg { > div > a > svg {
@ -275,7 +275,7 @@
} }
&::after { &::after {
.mwe-popups-border-pointer-bottom( 7px, 7px, #fff, 4px ); .mwe-popups-border-pointer-bottom( 7px, 7px, @background-color-base, 4px );
} }
} }
} }
@ -380,7 +380,7 @@
--y5: 100%; --y5: 100%;
padding-top: 0; padding-top: 0;
display: flex; display: flex;
background: #fff; background: @background-color-base;
--pseudo-radius: 2px; --pseudo-radius: 2px;
--pointer-height: 8px; --pointer-height: 8px;
--pointer-width: 16px; --pointer-width: 16px;
@ -437,3 +437,46 @@
} }
} }
} }
// Apply night mode styles that can't be handled with CSS variables, i.e. anything with rgba()
html.skin-night-mode-clientpref-1 {
.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-extract[ dir='ltr' ]::after {
/* @noflip */
background-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 1 ) 50% );
}
.mwe-popups-extract[ dir='rtl' ]::after {
/* @noflip */
background-image: linear-gradient( to left, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 1 ) 50% );
}
}
@media ( prefers-color-scheme: dark ) {
html.skin-night-mode-clientpref-2 {
.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-extract[ dir='ltr' ]::after {
/* @noflip */
background-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 1 ) 50% );
}
.mwe-popups-extract[ dir='rtl' ]::after {
/* @noflip */
background-image: linear-gradient( to left, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 1 ) 50% );
}
}
}