523 lines
14 KiB
CSS
523 lines
14 KiB
CSS
/*---+---+---+---+---+---+
|
||
| G | L | O | B | A | L |
|
||
+---+---+---+---+---+---*/
|
||
|
||
:root {
|
||
/* Global Border Radius
|
||
* applied to ALL UI elements
|
||
*/
|
||
--uc-border-radius: 8px;
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/*---+---+---+---+---+---+---+
|
||
| T | O | O | L | B | A | R |
|
||
+---+---+---+---+---+---+---*/
|
||
|
||
/* Position of the Personal Toolbar
|
||
* possible values:
|
||
* 0 – toolbar on top
|
||
* 4 – toolbar on bottom
|
||
*/
|
||
:root {
|
||
--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
|
||
*/
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--uc-darken-toolbar: 0.2;
|
||
}
|
||
}
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
--uc-darken-toolbar: 0;
|
||
}
|
||
}
|
||
|
||
/*---+---+---+---+---+---+---+
|
||
| U | R | L | — | B | A | R |
|
||
+---+---+---+---+---+---+---*/
|
||
|
||
: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: 100vw;
|
||
--uc-urlbar-max-width: 100vw;
|
||
|
||
/* 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 extension page box */
|
||
#identity-box.extensionPage {
|
||
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;
|
||
}
|
||
|
||
/* Hides the Extensions Menu Icon */
|
||
/* #unified-extensions-button { display: none !important; } */
|
||
|
||
/*---+---+---+---+---+---+---+
|
||
| T | A | B | — | B | A | R |
|
||
+---+---+---+---+---+---+---*/
|
||
|
||
:root {
|
||
/* Allow tabs to have dynamic widths based on
|
||
* the Tab Bars maximum width
|
||
*/
|
||
--uc-active-tab-width: clamp(100px, 30vw, 300px);
|
||
--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;
|
||
}
|
||
|
||
|
||
|
||
/*---+---+---+---+---+---+---+
|
||
| C | O | L | O | U | R | S |
|
||
+---+---+---+---+---+---+---*/
|
||
|
||
|
||
@media (prefers-color-scheme: dark) { :root {
|
||
|
||
/* These colours are (mainly) used by the
|
||
Container Tabs Plugin */
|
||
--uc-identity-colour-blue: #7ED6DF;
|
||
--uc-identity-colour-turquoise: #55E6C1;
|
||
--uc-identity-colour-green: #B8E994;
|
||
--uc-identity-colour-yellow: #F7D794;
|
||
--uc-identity-colour-orange: #F19066;
|
||
--uc-identity-colour-red: #FC5C65;
|
||
--uc-identity-colour-pink: #F78FB3;
|
||
--uc-identity-colour-purple: #786FA6;
|
||
|
||
/* Cascades main Colour Scheme */
|
||
--uc-base-colour: #1E2021;
|
||
--uc-highlight-colour: #191B1C;
|
||
--uc-inverted-colour: #FAFAFC;
|
||
--uc-muted-colour: #AAAAAC;
|
||
--uc-accent-colour: var(--uc-identity-colour-purple);
|
||
|
||
}}
|
||
|
||
|
||
@media (prefers-color-scheme: light) { :root {
|
||
|
||
/* These colours are (mainly) used by the
|
||
Container Tabs Plugin */
|
||
--uc-identity-colour-blue: #1D65F5;
|
||
--uc-identity-colour-turquoise: #209FB5;
|
||
--uc-identity-colour-green: #40A02B;
|
||
--uc-identity-colour-yellow: #E49320;
|
||
--uc-identity-colour-orange: #FE640B;
|
||
--uc-identity-colour-red: #FC5C65;
|
||
--uc-identity-colour-pink: #EC83D0;
|
||
--uc-identity-colour-purple: #822FEE;
|
||
|
||
/* Cascades main Colour Scheme */
|
||
--uc-base-colour: #FAFAFC;
|
||
--uc-highlight-colour: #DADADC;
|
||
--uc-inverted-colour: #1E2021;
|
||
--uc-muted-colour: #191B1C;
|
||
--uc-accent-colour: var(--uc-identity-colour-purple);
|
||
|
||
}}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Down here I'm just reassigning variables based on the colours set above.
|
||
Feel free to play around with these but there is no editing necessary below this line. c:
|
||
*/
|
||
|
||
: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; }
|
||
|
||
|
||
/*---+---+---+---+---+---+
|
||
| L | A | Y | O | U | T |
|
||
+---+---+---+---+---+---*/
|
||
|
||
: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;
|
||
}
|
||
|
||
#toolbar-menubar {
|
||
&[autohide="true"] {
|
||
&[inactive]:not([customizing]) {
|
||
width: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* fix Shield Icon padding */
|
||
#urlbar-input-container[pageproxystate="valid"]
|
||
> #tracking-protection-icon-container
|
||
> #tracking-protection-icon-box
|
||
> #tracking-protection-icon {
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
#TabsToolbar {
|
||
order: 2;
|
||
}
|
||
#nav-bar {
|
||
order: 3;
|
||
}
|
||
|
||
#PersonalToolbar {
|
||
padding: 6px !important;
|
||
box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important;
|
||
order: var(--uc-toolbar-position);
|
||
width: 100%;
|
||
}
|
||
|
||
#statuspanel #statuspanel-label {
|
||
border: none !important;
|
||
border-radius: var(--uc-border-radius) !important;
|
||
}
|
||
|
||
|
||
/*---+---+---+---+---+---+---+---+---+
|
||
| R | E | S | P | O | N | I | V | E |
|
||
+---+---+---+---+---+---+---+---+---*/
|
||
|
||
@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;
|
||
}
|
||
|
||
#TabsToolbar {
|
||
width: calc(100vw - var(--uc-urlbar-min-width) - 1px);
|
||
}
|
||
|
||
#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);
|
||
}
|
||
}
|
||
|
||
/*---+---+---+---+---+---+---+---+
|
||
| F | L | O | A | T | I | N | G |
|
||
+---+---+---+---+---+---+---+---*/
|
||
|
||
#statuspanel #statuspanel-label {
|
||
margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important;
|
||
}
|
||
|
||
|
||
|
||
/*---+---+---+---+---+---+
|
||
| N | A | V | B | A | R |
|
||
+---+---+---+---+---+---*/
|
||
|
||
#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 * {
|
||
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;
|
||
}
|
||
|
||
/* #page-action-buttons, */
|
||
#home-button,
|
||
#stop-reload-button {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
/*---+---+---+---+---+---+
|
||
| N | O | T | A | B | S |
|
||
+---+---+---+---+---+---*/
|
||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
|
||
See the above repository for updates as well as full license text. */
|
||
|
||
/* Hides tabs toolbar */
|
||
/* For OSX use hide_tabs_toolbar_osx.css instead */
|
||
|
||
/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
|
||
* In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
|
||
*/
|
||
|
||
/* IMPORTANT */
|
||
/*
|
||
Get window_control_placeholder_support.css
|
||
Window controls will be all wrong without it
|
||
*/
|
||
|
||
:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
|
||
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }
|
||
#titlebar{
|
||
will-change: unset !important;
|
||
transition: none !important;
|
||
opacity: 1 !important;
|
||
}
|
||
#TabsToolbar{ visibility: collapse !important }
|
||
:root[sizemode="fullscreen"] #titlebar{ position: relative }
|
||
|
||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{
|
||
visibility: visible !important;
|
||
z-index: 2;
|
||
}
|
||
|
||
:root:not([inFullscreen]) #nav-bar{
|
||
margin-top: calc(0px - var(--uc-toolbar-height,0px));
|
||
}
|
||
|
||
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
|
||
min-height: unset !important;
|
||
height: var(--uc-toolbar-height,0px) !important;
|
||
position: relative;
|
||
}
|
||
|
||
#toolbar-menubar[autohide="false"]{
|
||
margin-bottom: var(--uc-toolbar-height,0px)
|
||
}
|
||
|
||
:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
|
||
flex-grow: 1;
|
||
align-items: stretch;
|
||
background-attachment: scroll, fixed, fixed;
|
||
background-position: 0 0, var(--lwt-background-alignment), right top;
|
||
background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat;
|
||
background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto;
|
||
padding-right: 20px;
|
||
}
|
||
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{
|
||
background-color: var(--lwt-accent-color);
|
||
background-image: linear-gradient(var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none);
|
||
mask-image: linear-gradient(to left, transparent, black 20px);
|
||
}
|
||
|
||
#toolbar-menubar:not([inactive]){ z-index: 2 }
|
||
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
margin-left: var(--uc-window-drag-space-pre,0px)
|
||
}
|
||
|
||
|