simplify userchrome to simply autohide toolbar
This commit is contained in:
parent
2655ac7e28
commit
269a4bf7d8
|
|
@ -1,52 +0,0 @@
|
|||
/* NOTE: Main Config */
|
||||
@media (prefers-color-scheme: dark) { :root {
|
||||
--uc-identity-colour-blue: #7AA2F7;
|
||||
--uc-identity-colour-turquoise: #1ABC9C;
|
||||
--uc-identity-colour-green: #9ECE6A;
|
||||
--uc-identity-colour-yellow: #E0AF68;
|
||||
--uc-identity-colour-orange: #FF9E64;
|
||||
--uc-identity-colour-red: #DB4B4B;
|
||||
--uc-identity-colour-pink: #F7768E;
|
||||
--uc-identity-colour-purple: #9D7CD8;
|
||||
--uc-base-colour: #1A1B26;
|
||||
--uc-highlight-colour: #292E42;
|
||||
--uc-inverted-colour: #C0CAF5;
|
||||
--uc-muted-colour: #3B4261;
|
||||
--uc-accent-colour: var(--uc-identity-colour-purple);
|
||||
}}
|
||||
/* NOTE: Automatic Config */
|
||||
:root {
|
||||
--lwt-frame: var(--uc-base-colour) !important;
|
||||
--lwt-accent-color: var(--lwt-frame) !important;
|
||||
--lwt-text-color: var(--uc-inverted-colour) !important;
|
||||
--toolbar-field-color: var(--uc-inverted-colour) !important;
|
||||
--toolbar-field-focus-color: var(--uc-inverted-colour) !important;
|
||||
--toolbar-field-focus-background-color: var(--uc-highlight-colour) !important;
|
||||
--toolbar-field-focus-border-color: transparent !important;
|
||||
--toolbar-field-background-color: var(--lwt-frame) !important;
|
||||
--lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important;
|
||||
--lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important;
|
||||
--urlbar-popup-url-color: var(--uc-accent-colour) !important;
|
||||
--lwt-tab-text: var(--lwt-text-colour) !important;
|
||||
--lwt-selected-tab-background-color: var(--uc-highlight-colour) !important;
|
||||
--toolbar-bgcolor: var(--lwt-frame) !important;
|
||||
--toolbar-color: var(--lwt-text-color) !important;
|
||||
--toolbarseparator-color: var(--uc-accent-colour) !important;
|
||||
--toolbarbutton-hover-background: var(--uc-highlight-colour) !important;
|
||||
--toolbarbutton-active-background: var(--toolbarbutton-hover-background) !important;
|
||||
--lwt-sidebar-background-color: var(--lwt-frame) !important;
|
||||
--sidebar-background-color: var(--lwt-sidebar-background-color) !important;
|
||||
--urlbar-box-bgcolor: var(--uc-highlight-colour) !important;
|
||||
--urlbar-box-text-color: var(--uc-muted-colour) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important;
|
||||
--urlbar-box-hover-text-color: var(--uc-inverted-colour) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important;
|
||||
}
|
||||
.identity-color-blue { --identity-tab-color: var(--uc-identity-colour-blue) !important; --identity-icon-color: var(--uc-identity-colour-blue) !important; }
|
||||
.identity-color-turquoise { --identity-tab-color: var(--uc-identity-colour-turquoise) !important; --identity-icon-color: var(--uc-identity-colour-turquoise) !important; }
|
||||
.identity-color-green { --identity-tab-color: var(--uc-identity-colour-green) !important; --identity-icon-color: var(--uc-identity-colour-green) !important; }
|
||||
.identity-color-yellow { --identity-tab-color: var(--uc-identity-colour-yellow) !important; --identity-icon-color: var(--uc-identity-colour-yellow) !important; }
|
||||
.identity-color-orange { --identity-tab-color: var(--uc-identity-colour-orange) !important; --identity-icon-color: var(--uc-identity-colour-orange) !important; }
|
||||
.identity-color-red { --identity-tab-color: var(--uc-identity-colour-red) !important; --identity-icon-color: var(--uc-identity-colour-red) !important; }
|
||||
.identity-color-pink { --identity-tab-color: var(--uc-identity-colour-pink) !important; --identity-icon-color: var(--uc-identity-colour-pink) !important; }
|
||||
.identity-color-purple { --identity-tab-color: var(--uc-identity-colour-purple) !important; --identity-icon-color: var(--uc-identity-colour-purple) !important; }
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/* NOTE: Global */
|
||||
:root {
|
||||
/* Global Border Radius
|
||||
* applied to ALL UI elements
|
||||
*/ --uc-border-radius: 2px;
|
||||
/* The distance the Statuspanel floats
|
||||
* away from the window border
|
||||
* 0 places directly in the corner
|
||||
*/ --uc-status-panel-spacing: 12px;
|
||||
}
|
||||
/* remove window control buttons */
|
||||
.titlebar-buttonbox-container { display: none !important; }
|
||||
#pageActionButton { display: none !important; }
|
||||
#PanelUI-menu-button { padding: 0px !important; }
|
||||
#PanelUI-menu-button .toolbarbutton-icon { width: 1px !important; }
|
||||
#PanelUI-menu-button .toolbarbutton-badge-stack { padding: 0px !important; }
|
||||
/* NOTE: Toolbar */
|
||||
:root {
|
||||
/* Position of the Personal Toolbar
|
||||
* possible values:
|
||||
* 0 – toolbar on top
|
||||
* 4 – toolbar on bottom
|
||||
*/ --uc-toolbar-position: 4;
|
||||
/* Darken the Personal Toolbar by X amount
|
||||
* where X = 1 means pure black
|
||||
* and X = 0 means no darkening at all
|
||||
*/ --uc-darken-toolbar: .2;
|
||||
}
|
||||
/* NOTE: URLbar */
|
||||
:root {
|
||||
/* Width of the URL Bar for the Oneline layout
|
||||
* If enabled the max-width is applied on focus
|
||||
* otherwise the URL Bar will always be it's min-width
|
||||
*/ --uc-urlbar-min-width: 35vw;
|
||||
--uc-urlbar-max-width: 35vw;
|
||||
/* Position of the URL Bar
|
||||
* possible values:
|
||||
* 1 – tabs on the right
|
||||
* 3 – tabs on the left
|
||||
*/ --uc-urlbar-position: 1;
|
||||
/* Firefox can be a little wonky with the vertical
|
||||
* URL Bar placement. Change this variable to adapt
|
||||
* to this when necessary.
|
||||
*/ --uc-urlbar-top-spacing: 1px;
|
||||
}
|
||||
/* Disable the Navigation Buttons */
|
||||
#back-button,
|
||||
#forward-button { display: none !important; }
|
||||
/* Disables the Tracking Protection Shield */
|
||||
#tracking-protection-icon-container { display: none !important; }
|
||||
/* Encryption and Permissions icons */
|
||||
/* Only hides permission items */
|
||||
/* #identity-permission-box { display: none !important; } */
|
||||
/* Hides encryption AND permission items */
|
||||
/* #identity-box { display: none !important } */
|
||||
/* Hide everything BUT the zoom indicator within the URL Bar */
|
||||
#page-action-buttons > :not(#urlbar-zoom-button) { display: none !important; }
|
||||
/* Hide the »Go«-arrow in the URL Bar */
|
||||
#urlbar-go-button { display: none !important; }
|
||||
/* NOTE: Tabbar */
|
||||
:root {
|
||||
/* Allow tabs to have dynamic widths based on
|
||||
* the Tab Bars maximum width
|
||||
*/ --uc-active-tab-width: clamp(100px, 20vw, 200px);
|
||||
--uc-inactive-tab-width: clamp(100px, 20vw, 200px);
|
||||
/* Enable this to always show the Tab Close button
|
||||
* possible values:
|
||||
* show: -moz-inline-block
|
||||
* hide: none
|
||||
*/ --show-tab-close-button: none;
|
||||
/* Enable this to only show the Tab Close button on tab hover
|
||||
* possible values:
|
||||
* show: -moz-inline-block
|
||||
* hide: none
|
||||
*/ --show-tab-close-button-hover: none;
|
||||
/* Hide the all Tabs button from the Tab Bar
|
||||
* possible values:
|
||||
* show: -moz-box
|
||||
* hide: none
|
||||
*/ --uc-show-all-tabs-button: none;
|
||||
/* Left and Right "dip" of the container indicator
|
||||
* 0px equals tab width
|
||||
* higer values make the indicator smaller
|
||||
*/ --container-tabs-indicator-margin: 10px;
|
||||
/* Amount of Glow to add to the container indicator
|
||||
* Setting it to 0 disables the Glow
|
||||
*/ --uc-identity-glow: 0 1px 10px 1px;
|
||||
}
|
||||
/* Hide the secondary Tab Label
|
||||
* e.g. playing indicator (the text, not the icon) */
|
||||
.tab-secondary-label { display: none !important; }
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
:root {
|
||||
--toolbarbutton-border-radius: var(--uc-border-radius) !important;
|
||||
--tab-border-radius: var(--uc-border-radius) !important;
|
||||
--arrowpanel-border-radius: var(--uc-border-radius) !important;
|
||||
}
|
||||
#main-window,
|
||||
#toolbar-menubar,
|
||||
#TabsToolbar,
|
||||
#navigator-toolbox,
|
||||
#sidebar-box,
|
||||
#nav-bar { box-shadow: none !important; }
|
||||
#main-window,
|
||||
#toolbar-menubar,
|
||||
#TabsToolbar,
|
||||
#PersonalToolbar,
|
||||
#navigator-toolbox,
|
||||
#sidebar-box,
|
||||
#nav-bar { border: none !important; }
|
||||
/* remove "padding" left and right from tabs */
|
||||
.titlebar-spacer { display: none !important; }
|
||||
#PersonalToolbar {
|
||||
padding: 6px !important;
|
||||
box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important;;
|
||||
}
|
||||
#statuspanel #statuspanel-label {
|
||||
border: none !important;
|
||||
border-radius: var(--uc-border-radius) !important;
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
#navigator-toolbox:not(:-moz-lwtheme) { background: var(--toolbar-field-background-color) !important; }
|
||||
|
||||
#nav-bar {
|
||||
padding-block-start: 0px !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
#urlbar,
|
||||
#urlbar * {
|
||||
padding-block-start: var(--uc-urlbar-top-spacing) !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#urlbar-background { border: transparent !important; }
|
||||
#urlbar[focused='true']
|
||||
> #urlbar-background,
|
||||
#urlbar:not([open])
|
||||
> #urlbar-background { background: var(--toolbar-field-background-color) !important; }
|
||||
#urlbar[open]
|
||||
> #urlbar-background { background: var(--toolbar-field-background-color) !important; }
|
||||
.urlbarView-row:hover
|
||||
> .urlbarView-row-inner,
|
||||
.urlbarView-row[selected]
|
||||
> .urlbarView-row-inner { background: var(--toolbar-field-focus-background-color) !important; }
|
||||
.urlbar-icon, #urlbar-go-button { margin: auto; }
|
||||
.urlbar-page-action { padding: 0 inherit !important; }
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@media (min-width: 1000px) {
|
||||
#navigator-toolbox { display: flex; flex-wrap: wrap; flex-direction: row; }
|
||||
#nav-bar {
|
||||
order: var(--uc-urlbar-position);
|
||||
width: var(--uc-urlbar-min-width);
|
||||
}
|
||||
#nav-bar #urlbar-container { min-width: 0px !important; width: auto !important; }
|
||||
#titlebar {
|
||||
order: 2;
|
||||
width: calc(100vw - var(--uc-urlbar-min-width) - 1px);
|
||||
}
|
||||
#PersonalToolbar {
|
||||
order: var(--uc-toolbar-position);
|
||||
width: 100%;
|
||||
}
|
||||
#navigator-toolbox:focus-within #nav-bar { width: var(--uc-urlbar-max-width); }
|
||||
#navigator-toolbox:focus-within #titlebar { width: calc(100vw - var(--uc-urlbar-max-width) - 1px); }
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/* remove gap after pinned tabs */
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; }
|
||||
/* Hides the list-all-tabs button*/
|
||||
#alltabs-button { display: var(--uc-show-all-tabs-button) !important; }
|
||||
/* remove tab shadow */
|
||||
.tabbrowser-tab
|
||||
>.tab-stack
|
||||
> .tab-background { box-shadow: none !important; }
|
||||
/* multi tab selection */
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme { outline-color: var(--toolbarseparator-color) !important; }
|
||||
/* tab close button options */
|
||||
.tabbrowser-tab:not([pinned]) .tab-close-button { display: var(--show-tab-close-button) !important; }
|
||||
.tabbrowser-tab:not([pinned]):hover .tab-close-button { display: var(--show-tab-close-button-hover) !important }
|
||||
/* adaptive tab width */
|
||||
.tabbrowser-tab[selected][fadein]:not([pinned]) { max-width: var(--uc-active-tab-width) !important; }
|
||||
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { max-width: var(--uc-inactive-tab-width) !important; }
|
||||
/* container tabs indicator */
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
margin: -1px var(--container-tabs-indicator-margin) 0 var(--container-tabs-indicator-margin) !important;
|
||||
height: 1px !important;
|
||||
box-shadow: var(--uc-identity-glow) var(--identity-tab-color) !important;
|
||||
}
|
||||
/* show favicon when media is playing but tab is hovered */
|
||||
.tab-icon-image:not([pinned]) { opacity: 1 !important; }
|
||||
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
|
||||
.tab-icon-overlay:not([crashed]),
|
||||
.tab-icon-overlay[pinned][crashed][selected] {
|
||||
top: 5px !important;
|
||||
z-index: 1 !important;
|
||||
padding: 1.5px !important;
|
||||
inset-inline-end: -8px !important;
|
||||
width: 16px !important; height: 16px !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
/* style and position speaker icon */
|
||||
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
|
||||
stroke: transparent !important;
|
||||
background: transparent !important;
|
||||
opacity: 1 !important; fill-opacity: 0.8 !important;
|
||||
color: currentColor !important;
|
||||
stroke: var(--toolbar-bgcolor) !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
/* change the colours of the speaker icon on active tab to match tab colours */
|
||||
.tabbrowser-tab[selected] .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
|
||||
stroke: var(--toolbar-bgcolor) !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { margin-inline-end: 9.5px !important; }
|
||||
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
|
||||
top: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin-inline-end: 5.5px !important;
|
||||
inset-inline-end: 0 !important;
|
||||
}
|
||||
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
|
||||
.tab-icon-overlay:not([crashed])[muted]:hover,
|
||||
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
|
||||
color: currentColor !important;
|
||||
stroke: var(--toolbar-color) !important;
|
||||
background-color: var(--toolbar-color) !important;
|
||||
fill-opacity: 0.95 !important;
|
||||
}
|
||||
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
|
||||
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover,
|
||||
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
|
||||
color: currentColor !important;
|
||||
stroke: var(--toolbar-color) !important;
|
||||
background-color: var(--toolbar-color) !important;
|
||||
fill-opacity: 0.95 !important;
|
||||
}
|
||||
/* speaker icon colour fix */
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying],
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[muted],
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { color: var(--toolbar-color) !important; }
|
||||
/* speaker icon colour fix on hover */
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover,
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover,
|
||||
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: var(--toolbar-bgcolor) !important; }
|
||||
|
|
@ -1,8 +1,64 @@
|
|||
@import 'includes/config.css';
|
||||
@import 'includes/colours.css';
|
||||
:root{
|
||||
--uc-toolbox-rotation: 85deg; /* Scale between 0 and 90 to determine the hitbox to unhide the toolbar */
|
||||
}
|
||||
|
||||
@import 'includes/layout.css';
|
||||
@import 'includes/responsive.css';
|
||||
:root[sizemode="maximized"]{
|
||||
--uc-toolbox-rotation: 88.5deg;
|
||||
}
|
||||
|
||||
@import 'includes/nav-bar.css';
|
||||
@import 'includes/tabs.css';
|
||||
:root[sizemode="fullscreen"],
|
||||
#navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
|
||||
|
||||
#navigator-toolbox{
|
||||
position: fixed !important;
|
||||
display: block;
|
||||
background-color: var(--lwt-accent-color,black) !important;
|
||||
transform-origin: top;
|
||||
transform: rotateX(var(--uc-toolbox-rotation));
|
||||
opacity: 0;
|
||||
line-height: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
#mainPopupSet:hover ~ box > toolbox,
|
||||
/* Uncomment the above line to make toolbar visible if some popup is hovered */
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox:focus-within{
|
||||
transform: rotateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }
|
||||
|
||||
#navigator-toolbox,
|
||||
#navigator-toolbox > *{
|
||||
width: 100vw;
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
/* These two exist for oneliner compatibility */
|
||||
#nav-bar{ width: var(--uc-navigationbar-width,100vw) }
|
||||
#TabsToolbar{ width: calc(100vw - var(--uc-navigationbar-width,0px)) }
|
||||
|
||||
/* Don't apply transform before window has been fully created */
|
||||
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
|
||||
|
||||
:root[customizing] #navigator-toolbox{
|
||||
position: relative !important;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
|
||||
#PersonalToolbar[collapsed="true"]{ display: none }
|
||||
|
||||
/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
|
||||
/*#titlebar{ margin-bottom: -9px }*/
|
||||
|
||||
/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
|
||||
/*
|
||||
#navigator-toolbox{ flex-direction: column; display: flex; }
|
||||
#titlebar{ order: 2 }
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue