Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How can I remove the styleing on the download pop up? #244

Closed
1031982 opened this issue Oct 11, 2021 · 4 comments
Closed

How can I remove the styleing on the download pop up? #244

1031982 opened this issue Oct 11, 2021 · 4 comments
Labels
Class::Color Color, background, blur, etc. Component::Popup-Menu Toolbar or URL bar's popup Issue::Duplicate This issue or pull request already exists

Comments

@1031982
Copy link

1031982 commented Oct 11, 2021

Got the previous stuff done, but I ran into a personal annoyance.
The download pop up looks weird to me after being styled.
The exact pop up I'm talking about is pictured below.
download popup

I think I need to remove the following lines, but I want to make sure before I do anything.

Firefox-UI-Fix/userChrome.css

Lines 1038 to 1045 in 7acbf85

/*= Downloads Panel ========================================================*/
/* Accent Color for downloaded item */
#downloadsListBox .download-state[exists] .downloadDetails {
color: var(--button-primary-bgcolor);
}
#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
color: var(--button-primary-hover-bgcolor);
}

@kanlukasz
Copy link

Yes, very annoying.
I don't understand what the purpose of this function is 😕

@black7375 black7375 added Class::Color Color, background, blur, etc. Component::Popup-Menu Toolbar or URL bar's popup Issue::Duplicate This issue or pull request already exists labels Oct 11, 2021
@black7375
Copy link
Owner

In the development version, it was fixed. #241
This will be reflected in an upcoming release.

@1031982 1031982 mentioned this issue Oct 11, 2021
Closed
13 tasks
@black7375
Copy link
Owner

You can remove these lines

Firefox-UI-Fix/userChrome.css

Lines 558 to 1036 in dabc91c

/*= Downloads ==============================================================*/
@-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml")
{
@media (-moz-toolbar-prefers-color-scheme: dark) {
:root {
--in-content-page-background: #42414d;
}
}
#unknownContentType {
-moz-appearance: none !important; /* For Mac */
color: var(--in-content-page-color) !important;
background-color: var(--in-content-page-background) !important;
/* border-radius: 0 0 8px 8px !important; */
}
/*- Button ---------------------------------------------------------------*/
button {
-moz-appearance: none !important;
color: var(--in-content-button-text-color) !important;
background-color: var(--in-content-button-background) !important;
font: inherit;
font-size: 1em !important;
font-weight: 600 !important;
min-height: 32px !important;
border: 1px solid transparent !important; /* shows up in high-contrast mode */
border-radius: var(--in-content-button-border-radius) !important;
padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
min-height: 32px !important;
/* Use the same margin of other elements for the alignment */
margin-inline: 4px !important;
min-width: 6.3em !important;
}
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
* the 1px border): */
button.medium {
padding: 6px 13px !important;
min-height: 28px !important;
font-size: 0.95em !important;
}
button.small {
padding: 5px 11px !important;
min-height: 24px !important;
font-size: 0.9em !important;
}
/* Remove margin added by button.css */
xul|button > .button-box > .button-text {
margin: 0 !important;
}
button:-moz-focusring,
xul|menulist:-moz-focusring,
xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
xul|radio[focused="true"]:-moz-focusring {
box-shadow: none !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 2px !important;
}
button:not([disabled="true"]):hover {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
border-color: transparent !important;
}
xul|button:not([disabled="true"]):hover:active,
xul|button[open],
xul|button[open]:hover,
xul|menulist[open="true"]:not([disabled="true"]) {
background-color: var(--in-content-button-background-active) !important;
}
xul|button[default] {
background-color: var(--in-content-primary-button-background) !important;
color: var(--in-content-primary-button-text-color) !important;
}
xul|button[default]:not([disabled="true"]):hover {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color) !important;
}
xul|button[default]:not([disabled="true"]):hover:active {
background-color: var(--in-content-primary-button-background-active) !important;
}
xul|button[disabled="true"],
xul|menulist[disabled="true"] {
opacity: 0.4 !important;
}
xul|button:not([disabled="true"]):hover,
xul|menulist:not([disabled="true"]):hover {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
border-color: transparent !important;
}
@media (prefers-contrast) {
xul|button[default]:not([disabled="true"]):hover {
border-color: currentColor !important;
}
button:focus {
color: var(--in-content-button-text-color) !important;
}
xul|button[default]:focus,
button.primary:focus {
color: var(--in-content-primary-button-text-color) !important;
}
}
/*- Radio Button ---------------------------------------------------------*/
xul|radio {
/* margin-inline-start: 0 !important; */
appearance: none !important;
}
xul|*.radio-check {
appearance: none !important;
width: 16px !important;
height: 16px !important;
padding: 0 !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 100% !important;
margin-block: 2px !important; /* extend the vertical clicktarget */
margin-inline: 0 6px !important;
background-color: var(--in-content-button-background) !important;
background-position: center !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
background-color: var(--in-content-button-background-active) !important;
}
xul|*.radio-check[selected] {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--in-content-primary-button-text-color) !important;
background-color: var(--in-content-primary-button-background) !important;
background-image: url("chrome://global/skin/icons/radio.svg") !important;
border-color: transparent !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-active) !important;
}
xul|*.radio-label-box {
margin-inline: 0 8px !important;
padding-inline-start: 0 !important;
}
/* Disabled checkboxes, radios and labels */
xul|checkbox[disabled="true"],
xul|radio[disabled="true"],
xul|label[disabled="true"] {
color: inherit !important;
}
xul|checkbox[disabled="true"],
xul|radio[disabled="true"],
xul|label[disabled="true"] {
opacity: 0.5 !important;
}
/*- Check Box ------------------------------------------------------------*/
/* From checkbox.css */
checkbox {
appearance: none !important;
-moz-box-align: center !important;
margin: 4px 2px !important;
}
.checkbox-icon[src] {
margin-inline-end: 2px !important;
}
.checkbox-label {
margin: 1px 0 !important;
}
checkbox[disabled="true"] {
opacity: 0.4 !important;
}
.checkbox-check {
appearance: none !important;
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
border: 1px solid currentColor !important;
border-radius: 2px !important;
margin-inline-end: 6px !important;
}
.checkbox-check {
height: 16px !important;
width: 16px !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
) !important;
}
.checkbox-check[checked] {
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, -moz-accent-color)
) !important;
}
checkbox:-moz-focusring > .checkbox-check {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
@media (prefers-contrast) {
checkbox:not([disabled="true"]):hover > .checkbox-check {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
}
.checkbox-check[checked] {
color: var(--checkbox-checked-border-color, currentColor) !important;
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
}
}
/* From common.css */
xul|*.checkbox-check {
margin-block: 2px !important;
}
xul|richlistitem > xul|*.checkbox-check {
margin: 3px 6px !important;
}
/*- Menulist -------------------------------------------------------------*/
/* From mulist.css */
xul|menulist {
appearance: none !important;
background-color: var(--in-content-button-background, ButtonFace) !important;
color: var(--in-content-button-text-color, ButtonText) !important;
border-radius: 4px !important;
padding-block: 4px !important;
padding-inline: 12px 8px !important;
margin: 5px 2px 3px !important;
}
xul|menulist[size="medium"] {
padding-block: 6px !important;
padding-inline: 16px 10px !important;
}
xul|menulist[size="large"] {
padding-block: 8px !important;
padding-inline: 16px 12px !important;
}
xul|menulist:hover {
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
}
xul|menulist:hover:active {
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
}
xul|menulist:-moz-focusring {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
#label-box {
-moz-box-align: center !important;
-moz-box-pack: center !important;
font-weight: 600 !important;
}
dropmarker {
display: -moz-box !important;
appearance: none !important;
width: 12px !important;
height: 12px !important;
}
dropmarker::part(icon) {
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
}
#highlightable-label:not([highlightable="true"]),
#label[highlightable="true"] {
display: none !important;
}
label {
margin: 0 3px !important;
}
/* From common.css */
xul|menulist > xul|menupopup {
appearance: none !important;
/* Reset native styles on Windows and macOS */
border: none !important;
background-color: transparent !important;
--panel-border-color: var(--in-content-box-border-color) !important;
--panel-border-radius: 2px !important;
--panel-background: var(--in-content-box-background) !important;
--panel-color: var(--in-content-text-color) !important;
--panel-padding: 0 !important;
}
xul|menulist > xul|menupopup xul|menu,
xul|menulist > xul|menupopup xul|menuitem {
appearance: none !important;
font-size: 1em !important;
padding-block: 0.2em !important;
padding-inline: 10px 30px !important;
}
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
color: var(--in-content-item-hover-text) !important;
background-color: var(--in-content-item-hover) !important;
}
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
color: var(--in-content-item-selected-text) !important;
background-color: var(--in-content-item-selected) !important;
}
xul|menulist > xul|menupopup > xul|menu[disabled="true"],
xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
color: #999 !important;
/* override the [_moz-menuactive="true"] background color from
global/menu.css */
background-color: transparent !important;
}
xul|menulist > xul|menupopup xul|menuseparator {
appearance: none !important;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid var(--in-content-box-border-color) !important;
border-bottom: none !important;
}
xul|menulist::part(dropmarker) {
margin-block: 1px !important;
}
/* Override menulist.css */
xul|menulist[disabled="true"] {
background-color: var(--in-content-button-background) !important;
}
xul|menulist:-moz-focusring > xul|*.menulist-label-box {
outline: none !important;
}
/*- Each OS --------------------------------------------------------------*/
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
xul|checkbox,
xul|radio {
padding-inline-start: 0 !important;
}
/* Override menulist.css */
xul|menulist[disabled="true"] {
background-color: var(--in-content-button-background) !important;
}
xul|menulist:-moz-focusring > xul|*.menulist-label-box {
outline: none !important;
}
}
@media (-moz-gtk-csd-available) {
/* Overriding appearance also avoids incorrect selection background color with light text. */
xul|button > xul|*.button-box,
xul|menulist::part(label-box),
xul|*.radio-label-box,
xul|*.checkbox-label-box {
appearance: none !important;
}
xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
appearance: none !important;
}
xul|menulist {
font-size: inherit !important;
}
xul|menulist::part(dropmarker) {
display: -moz-box;
margin-block: 6px !important;
}
xul|menulist:-moz-focusring::part(label-box) {
outline: none !important;
}
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
display: none !important;
}
xul|menulist::part(dropmarker) {
display: -moz-box !important;
margin-block: 1px !important;
}
xul|menulist > xul|menupopup xul|menu,
xul|menulist > xul|menupopup xul|menuitem {
padding-inline-end: 34px !important;
}
xul|*.checkbox-icon,
xul|*.radio-icon {
margin-inline-end: 0 !important;
}
xul|*.text-link:-moz-focusring {
box-shadow: none !important;
}
}
}

@1031982
Copy link
Author

1031982 commented Oct 11, 2021

Thank you again black7375.

@smowtenshi smowtenshi mentioned this issue Oct 17, 2021
Closed
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Class::Color Color, background, blur, etc. Component::Popup-Menu Toolbar or URL bar's popup Issue::Duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@1031982 @black7375 @kanlukasz