Fix scope of the userChrome.css
This commit is contained in:
parent
9955d3cce8
commit
212182edfa
1 changed files with 78 additions and 76 deletions
154
userChrome.css
154
userChrome.css
|
|
@ -10,94 +10,96 @@ with tweaks to the spacing of drop-down menus, sizing of the tabs, and the margi
|
||||||
|
|
||||||
***/
|
***/
|
||||||
|
|
||||||
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
|
@-moz-document url(chrome://browser/content/browser.xhtml) {
|
||||||
|
|
||||||
menupopup:not(.in-menulist) > menuitem,
|
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
|
||||||
menupopup:not(.in-menulist) > menu {
|
|
||||||
padding-block: 6px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
|
|
||||||
min-height: unset !important; /* v92.0 - for padding below 4px */
|
|
||||||
}
|
|
||||||
:root {
|
|
||||||
--arrowpanel-menuitem-padding: 6px 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** Proton Tabs Tweaks ***/
|
menupopup:not(.in-menulist) > menuitem,
|
||||||
|
menupopup:not(.in-menulist) > menu {
|
||||||
|
padding-block: 6px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
|
||||||
|
min-height: unset !important; /* v92.0 - for padding below 4px */
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--arrowpanel-menuitem-padding: 6px 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Adjust tab corner shape, optionally remove space below tabs */
|
/*** Proton Tabs Tweaks ***/
|
||||||
|
|
||||||
#tabbrowser-tabs {
|
/* Adjust tab corner shape, optionally remove space below tabs */
|
||||||
--user-tab-rounding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-background {
|
#tabbrowser-tabs {
|
||||||
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
|
--user-tab-rounding: 6px;
|
||||||
margin-block: 3px 0 !important; /* Connected */
|
}
|
||||||
}
|
|
||||||
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
|
|
||||||
border-top-width: 1px !important;
|
|
||||||
border-bottom-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
|
.tab-background {
|
||||||
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
|
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
|
||||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
|
margin-block: 3px 0 !important; /* Connected */
|
||||||
border-bottom-color: transparent !important;
|
}
|
||||||
}
|
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
|
||||||
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
|
border-top-width: 1px !important;
|
||||||
--lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
|
border-bottom-width: 0 !important;
|
||||||
border-bottom-color: transparent !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Container color bar visibility */
|
/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
|
||||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
|
||||||
margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
|
--lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
|
||||||
height: 3px;
|
border-bottom-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
|
||||||
|
--lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Override Normal Density height to Compact Density height (plus room for context-line) only for tabs 1/16/2022 */
|
/* Container color bar visibility */
|
||||||
|
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||||
|
margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
#TabsToolbar, #tabbrowser-tabs {
|
/* Override Normal Density height to Compact Density height (plus room for context-line) only for tabs 1/16/2022 */
|
||||||
--tab-min-height: 37px !important;
|
|
||||||
}
|
|
||||||
/* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
|
|
||||||
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
|
|
||||||
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
|
|
||||||
--tab-min-height: 36px !important;
|
|
||||||
}
|
|
||||||
#scrollbutton-up,
|
|
||||||
#scrollbutton-down {
|
|
||||||
border-top-width: 0 !important;
|
|
||||||
border-bottom-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
|
#TabsToolbar, #tabbrowser-tabs {
|
||||||
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox {
|
--tab-min-height: 37px !important;
|
||||||
max-height: calc(var(--tab-min-height) + 1px) !important;
|
}
|
||||||
}
|
/* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
|
||||||
/* [Connected Tabs] Make sure tab attention dot isn't too low - 10 Dec 2022 */
|
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
|
||||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
|
||||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
|
--tab-min-height: 36px !important;
|
||||||
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
|
}
|
||||||
background-position-y: bottom 8px !important;
|
#scrollbutton-up,
|
||||||
}
|
#scrollbutton-down {
|
||||||
|
border-top-width: 0 !important;
|
||||||
|
border-bottom-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
#TabsToolbar {
|
/* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
|
||||||
--user-mute-button-height: 20px; /* default size is 12px, site icon is 16px */
|
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox {
|
||||||
}
|
max-height: calc(var(--tab-min-height) + 1px) !important;
|
||||||
|
}
|
||||||
|
/* [Connected Tabs] Make sure tab attention dot isn't too low - 10 Dec 2022 */
|
||||||
|
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
||||||
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
|
||||||
|
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
|
||||||
|
background-position-y: bottom 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* enlarge the move/mute button */
|
#TabsToolbar {
|
||||||
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
|
--user-mute-button-height: 20px; /* default size is 12px, site icon is 16px */
|
||||||
width: var(--user-mute-button-height) !important;
|
}
|
||||||
height: var(--user-mute-button-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** Improve toolbar ***/
|
/* enlarge the move/mute button */
|
||||||
#personal-toolbar-empty-description, toolbarbutton.bookmark-item:not(.subviewbutton) {
|
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
|
||||||
margin: 1px 2px !important;
|
width: var(--user-mute-button-height) !important;
|
||||||
padding: 3px;
|
height: var(--user-mute-button-height) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, #urlbar-label-box {
|
/*** Improve toolbar ***/
|
||||||
margin-left: 2px;
|
#personal-toolbar-empty-description, toolbarbutton.bookmark-item:not(.subviewbutton) {
|
||||||
}
|
margin: 1px 2px !important;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, #urlbar-label-box {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue