Skip to content

Commit

Permalink
Clean: Proton - common others
Browse files Browse the repository at this point in the history
  • Loading branch information
@black7375
black7375 committed May 31, 2022
1 parent a2d5227 commit 0a7be87
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 93 deletions.
38 changes: 14 additions & 24 deletions css/leptonChrome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1509,15 +1509,13 @@
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 {
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
* the 1px border): */
padding: 6px 13px !important;
min-height: 28px !important;
font-size: 0.95em !important;
}

button.small {
padding: 5px 11px !important;
min-height: 24px !important;
Expand All @@ -1529,15 +1527,6 @@
margin: 0 !important;
}

button:-moz-focusring,
xul|menulist:-moz-focusring,
xul|checkbox:-moz-focusring > .checkbox-check,
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;
Expand Down Expand Up @@ -1591,6 +1580,15 @@
color: var(--in-content-primary-button-text-color) !important;
}
}
button:-moz-focusring,
xul|menulist:-moz-focusring,
xul|checkbox:-moz-focusring > .checkbox-check,
xul|radio[focused="true"]:-moz-focusring {
box-shadow: none !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 2px !important;
}

/*- Radio Button -----------------------------------------------------------*/
xul|radio {
/* margin-inline-start: 0 !important; */
Expand Down Expand Up @@ -1763,25 +1761,20 @@
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;
Expand All @@ -1799,11 +1792,10 @@
width: 12px !important;
height: 12px !important;
}

/* dropmarker::part(icon)
* ::part is not apply chrome
*/
dropmarker[exportparts="icon: dropmarker-icon"] {
/* dropmarker::part(icon)
* ::part is not apply chrome
*/
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
Expand Down Expand Up @@ -1844,13 +1836,11 @@
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;
Expand Down
133 changes: 64 additions & 69 deletions src/theme/proton_chrome/_proton_commons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,40 +56,31 @@
/* 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;
&.medium {
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
* the 1px border): */
padding: 6px 13px !important;
min-height: 28px !important;
font-size: 0.95em !important;
}
&.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,
Expand Down Expand Up @@ -135,6 +126,15 @@
}
}

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;
}

/*- Radio Button -----------------------------------------------------------*/
xul|radio {
@include Proton.RadioGlobal;
Expand Down Expand Up @@ -252,29 +252,26 @@
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;
}
&[size="medium"] {
padding-block: 6px !important;
padding-inline: 16px 10px !important;
}
&[size="large"] {
padding-block: 8px !important;
padding-inline: 16px 12px !important;
}

xul|menulist:-moz-focusring {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
&:hover {
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
}
&:hover:active {
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
}
&:-moz-focusring {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
}

#label-box {
Expand All @@ -288,15 +285,15 @@
appearance: none !important;
width: 12px !important;
height: 12px !important;
}

/* dropmarker::part(icon)
* ::part is not apply chrome
*/
dropmarker[exportparts="icon: dropmarker-icon"] {
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
&[exportparts="icon: dropmarker-icon"] {
/* dropmarker::part(icon)
* ::part is not apply chrome
*/
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"]),
Expand Down Expand Up @@ -330,25 +327,23 @@
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|menu,
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;
}
&:not([disabled="true"])[selected="true"] {
color: var(--in-content-item-selected-text) !important;
background-color: var(--in-content-item-selected) !important;
}
&[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 {
Expand Down

0 comments on commit 0a7be87

Please sign in to comment.