Minor fine tuning of CSS in new popup panel

Hopefully these will address some of the glitches
mentioned in the feedback comments:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629636210
This commit is contained in:
Raymond Hill 2020-05-16 09:30:48 -04:00
parent 8859d4352f
commit ed49b42959
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 16 additions and 7 deletions

View File

@ -13,7 +13,6 @@
--popup-gap-extra-thin: calc(0.25 * var(--font-size)); --popup-gap-extra-thin: calc(0.25 * var(--font-size));
font-size: var(--font-size); font-size: var(--font-size);
line-height: 20px; line-height: 20px;
width: 100%;
} }
:root body.loading { :root body.loading {
opacity: 0; opacity: 0;
@ -121,9 +120,6 @@ body.needSave #revertRules {
.itemRibbon > span { .itemRibbon > span {
margin-bottom: var(--popup-gap); margin-bottom: var(--popup-gap);
} }
.itemRibbon > [data-i18n] {
min-width: 10em;
}
.itemRibbon > [data-i18n] + span { .itemRibbon > [data-i18n] + span {
justify-self: end; justify-self: end;
text-align: end; text-align: end;
@ -511,7 +507,7 @@ body:not([data-more~="e"]) [data-more="e"] {
} }
:root.desktop #main { :root.desktop #main {
max-width: 340px; max-width: 340px;
width: 22em; width: 21em;
} }
:root:not(.mobile) #switch:hover { :root:not(.mobile) #switch:hover {
background-color: var(--default-surface-hover); background-color: var(--default-surface-hover);

View File

@ -1,4 +1,4 @@
/* /**
References: References:
https://protocol.mozilla.org/ https://protocol.mozilla.org/
@ -185,7 +185,20 @@
--bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1); --bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1);
} }
/* Default dark theme starts here */ /**
Default dark theme starts here
Assign a default background color if dark mode is enabled -- hopefully
this will avoid flashes of white background until the document's own CSS
overrides the default color value below.
https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
*/
@media (prefers-color-scheme: dark) {
body {
background-color: var(--dark-gray-90);
}
}
:root.dark { :root.dark {
} }