mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-03-14 02:41:14 -07:00
Merge branch 'master' into photon-style
This commit is contained in:
alstjr7375
commit
051e7c32be
2 changed files with 440 additions and 11 deletions
|
|
@ -236,7 +236,7 @@ set_ini_value() {
|
|||
#== Multiselect ================================================================
|
||||
# https://stackoverflow.com/questions/45382472/bash-select-multiple-answers-at-once/54261882
|
||||
multiselect() {
|
||||
echo 'Select with <space>, Done with <enter>!!!'
|
||||
echo 'Select with <space>, confirm with <enter>'
|
||||
|
||||
# little helpers for terminal print control and key input
|
||||
ESC=$( printf "\033")
|
||||
|
|
|
|||
449
userChrome.css
449
userChrome.css
|
|
@ -1,5 +1,5 @@
|
|||
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
@namespace html "http://www.w3.org/1999/xhtml";
|
||||
|
||||
@media (-moz-proton) {
|
||||
/** Default Thme - Contrast *************************************************/
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) {
|
||||
--lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */
|
||||
}
|
||||
@media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8)) {
|
||||
@media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8) or (-moz-gtk-csd-available)) {
|
||||
/* Level 4 */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox {
|
||||
background-color: var(--lwt-accent-color) !important;
|
||||
|
|
@ -564,10 +564,13 @@
|
|||
}
|
||||
}
|
||||
#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;
|
||||
|
|
@ -585,7 +588,29 @@
|
|||
margin-inline: 4px !important;
|
||||
min-width: 6.3em !important;
|
||||
}
|
||||
button:-moz-focusring {
|
||||
|
||||
/* 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"] {
|
||||
box-shadow: none !important;
|
||||
outline: 2px solid var(--in-content-focus-outline-color) !important;
|
||||
outline-offset: 2px !important;
|
||||
|
|
@ -595,13 +620,417 @@
|
|||
color: var(--in-content-button-text-color-hover) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
button[open],
|
||||
button[open]:hover {
|
||||
background-color: var(--in-content-button-background-active);
|
||||
|
||||
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;
|
||||
}
|
||||
button[disabled="true"],
|
||||
menulist[disabled="true"] {
|
||||
opacity: 0.4;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue