From f7b4f9fa5c13a2d3a6d985149a124af0a1f3b675 Mon Sep 17 00:00:00 2001 From: Luca Bilke Date: Wed, 29 Mar 2023 00:08:28 +0200 Subject: [PATCH] rework userchrome --- .../chrome/includes/cascade-colours.css | 107 ------------ .../chrome/includes/cascade-config-mouse.css | 139 ---------------- .../chrome/includes/cascade-config.css | 155 ------------------ .../includes/cascade-floating-panel.css | 1 - .../chrome/includes/cascade-nav-bar.css | 39 ----- .../cascade-responsive-windows-fix.css | 9 - .../chrome/includes/cascade-responsive.css | 35 ---- .../librewolf/chrome/includes/colours.css | 52 ++++++ .../librewolf/chrome/includes/config.css | 91 ++++++++++ .../{cascade-layout.css => layout.css} | 39 +---- .../librewolf/chrome/includes/nav-bar.css | 23 +++ .../librewolf/chrome/includes/responsive.css | 17 ++ .../includes/{cascade-tabs.css => tabs.css} | 140 +++++----------- .local/share/librewolf/chrome/userChrome.css | 43 +---- 14 files changed, 234 insertions(+), 656 deletions(-) delete mode 100644 .local/share/librewolf/chrome/includes/cascade-colours.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-config-mouse.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-config.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-floating-panel.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-nav-bar.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-responsive-windows-fix.css delete mode 100644 .local/share/librewolf/chrome/includes/cascade-responsive.css create mode 100644 .local/share/librewolf/chrome/includes/colours.css create mode 100644 .local/share/librewolf/chrome/includes/config.css rename .local/share/librewolf/chrome/includes/{cascade-layout.css => layout.css} (50%) create mode 100644 .local/share/librewolf/chrome/includes/nav-bar.css create mode 100644 .local/share/librewolf/chrome/includes/responsive.css rename .local/share/librewolf/chrome/includes/{cascade-tabs.css => tabs.css} (62%) diff --git a/.local/share/librewolf/chrome/includes/cascade-colours.css b/.local/share/librewolf/chrome/includes/cascade-colours.css deleted file mode 100644 index bd25205e6..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-colours.css +++ /dev/null @@ -1,107 +0,0 @@ -/*---+---+---+---+---+---+---+ - | 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; } diff --git a/.local/share/librewolf/chrome/includes/cascade-config-mouse.css b/.local/share/librewolf/chrome/includes/cascade-config-mouse.css deleted file mode 100644 index 659a25811..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-config-mouse.css +++ /dev/null @@ -1,139 +0,0 @@ -/*---+---+---+---+---+---+ - | G | L | O | B | A | L | - +---+---+---+---+---+---*/ - - - :root { - - /* Global Border Radius - * applied to ALL UI elements - */ --uc-border-radius: 0px; - - - /* 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; } - - - - - -/*---+---+---+---+---+---+---+ - | T | O | O | L | B | A | R | - +---+---+---+---+---+---+---*/ - - -:root { - - /* Position of the Personal Toolbar - * possible values: - * 0 – toolbar on top - * 4 – toolbar on bottom - */ --uc-toolbar-position: 0; - - /* 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; - -} - - - - - -/*---+---+---+---+---+---+---+ - | 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: 40vw; - --uc-urlbar-max-width: 40vw; - - /* Position of the URL Bar - * possible values: - * 1 – tabs on the right - * 3 – tabs on the left - */ --uc-urlbar-position: 1; - -} - - -/* Disable the Navigation Buttons */ - -/* 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):not(#star-button-box) { display: none !important; } - - -/* Hide the »Go«-arrow in the URL Bar */ -#urlbar-go-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: -moz-inline-block; - - - /* 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; } diff --git a/.local/share/librewolf/chrome/includes/cascade-config.css b/.local/share/librewolf/chrome/includes/cascade-config.css deleted file mode 100644 index cf6822f4a..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-config.css +++ /dev/null @@ -1,155 +0,0 @@ -/*---+---+---+---+---+---+ - | G | L | O | B | A | L | - +---+---+---+---+---+---*/ - - -:root { - - /* Global Border Radius - * applied to ALL UI elements - */ --uc-border-radius: 0px; - - - /* 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 | - +---+---+---+---+---+---+---*/ - - -:root { - - /* Position of the Personal Toolbar - * possible values: - * 0 – toolbar on top - * 4 – toolbar on bottom - */ --uc-toolbar-position: 0; - - /* 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; - -} - - - - - -/*---+---+---+---+---+---+---+ - | 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: 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; } - - - - - -/*---+---+---+---+---+---+---+ - | 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, 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; } diff --git a/.local/share/librewolf/chrome/includes/cascade-floating-panel.css b/.local/share/librewolf/chrome/includes/cascade-floating-panel.css deleted file mode 100644 index 46b51b143..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-floating-panel.css +++ /dev/null @@ -1 +0,0 @@ -#statuspanel #statuspanel-label { margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important; } diff --git a/.local/share/librewolf/chrome/includes/cascade-nav-bar.css b/.local/share/librewolf/chrome/includes/cascade-nav-bar.css deleted file mode 100644 index ed9b548c9..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-nav-bar.css +++ /dev/null @@ -1,39 +0,0 @@ -#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; } diff --git a/.local/share/librewolf/chrome/includes/cascade-responsive-windows-fix.css b/.local/share/librewolf/chrome/includes/cascade-responsive-windows-fix.css deleted file mode 100644 index 451fe02af..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-responsive-windows-fix.css +++ /dev/null @@ -1,9 +0,0 @@ -@media (min-width: 1000px) { - - #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 12px) calc(100vw - var(--uc-urlbar-min-width)) 0 0 !important; } - #titlebar { margin-inline-start: var(--uc-urlbar-min-width) !important; } - - #navigator-toolbox:focus-within #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 12px) calc(100vw - var(--uc-urlbar-max-width)) 0 0 !important; } - #navigator-toolbox:focus-within #titlebar { margin-inline-start: var(--uc-urlbar-max-width) !important; } - -} diff --git a/.local/share/librewolf/chrome/includes/cascade-responsive.css b/.local/share/librewolf/chrome/includes/cascade-responsive.css deleted file mode 100644 index 6e92d269b..000000000 --- a/.local/share/librewolf/chrome/includes/cascade-responsive.css +++ /dev/null @@ -1,35 +0,0 @@ -@media (min-width: 1000px) { - - - #navigator-toolbox { display: flex; flex-wrap: wrap; } - - - #nav-bar { - - order: var(--uc-urlbar-position); - width: var(--uc-urlbar-min-width); - - } - - - #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); } - - -} diff --git a/.local/share/librewolf/chrome/includes/colours.css b/.local/share/librewolf/chrome/includes/colours.css new file mode 100644 index 000000000..6789da3c6 --- /dev/null +++ b/.local/share/librewolf/chrome/includes/colours.css @@ -0,0 +1,52 @@ + /* 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; } diff --git a/.local/share/librewolf/chrome/includes/config.css b/.local/share/librewolf/chrome/includes/config.css new file mode 100644 index 000000000..0902e2904 --- /dev/null +++ b/.local/share/librewolf/chrome/includes/config.css @@ -0,0 +1,91 @@ +/* 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: 0; + /* 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; } diff --git a/.local/share/librewolf/chrome/includes/cascade-layout.css b/.local/share/librewolf/chrome/includes/layout.css similarity index 50% rename from .local/share/librewolf/chrome/includes/cascade-layout.css rename to .local/share/librewolf/chrome/includes/layout.css index 48047ca80..d85673fa1 100644 --- a/.local/share/librewolf/chrome/includes/cascade-layout.css +++ b/.local/share/librewolf/chrome/includes/layout.css @@ -1,23 +1,14 @@ :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; - + --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, @@ -25,29 +16,13 @@ #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;; - + 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; - + border: none !important; + border-radius: var(--uc-border-radius) !important; } diff --git a/.local/share/librewolf/chrome/includes/nav-bar.css b/.local/share/librewolf/chrome/includes/nav-bar.css new file mode 100644 index 000000000..84a655a84 --- /dev/null +++ b/.local/share/librewolf/chrome/includes/nav-bar.css @@ -0,0 +1,23 @@ +#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; } diff --git a/.local/share/librewolf/chrome/includes/responsive.css b/.local/share/librewolf/chrome/includes/responsive.css new file mode 100644 index 000000000..aa4c27a1d --- /dev/null +++ b/.local/share/librewolf/chrome/includes/responsive.css @@ -0,0 +1,17 @@ +@media (min-width: 1000px) { + #navigator-toolbox { display: flex; flex-wrap: wrap; } + #nav-bar { + order: var(--uc-urlbar-position); + width: var(--uc-urlbar-min-width); + } + #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); } +} diff --git a/.local/share/librewolf/chrome/includes/cascade-tabs.css b/.local/share/librewolf/chrome/includes/tabs.css similarity index 62% rename from .local/share/librewolf/chrome/includes/cascade-tabs.css rename to .local/share/librewolf/chrome/includes/tabs.css index a479810b5..e09f1d8c3 100644 --- a/.local/share/librewolf/chrome/includes/cascade-tabs.css +++ b/.local/share/librewolf/chrome/includes/tabs.css @@ -1,149 +1,85 @@ /* remove gap after pinned tabs */ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; } - - + > #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; } - - + >.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-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; - + > .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; - + 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; - + 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; - + 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; - + 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; - + 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; - + 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, diff --git a/.local/share/librewolf/chrome/userChrome.css b/.local/share/librewolf/chrome/userChrome.css index 1bb7bbf92..a027668f7 100644 --- a/.local/share/librewolf/chrome/userChrome.css +++ b/.local/share/librewolf/chrome/userChrome.css @@ -1,39 +1,8 @@ -/*==============================================================================================* +@import 'includes/config.css'; +@import 'includes/colours.css'; - +-----+-----+-----+-----+-----+-----+-----+ - | █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ | - | █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ | - +-----+-----+-----+-----+-----+-----+-----+ +@import 'includes/layout.css'; +@import 'includes/responsive.css'; - Description: Cascade is a minimalstic and keyboard centered custom theme removing a lot of the - subjective clutter default Firefox comes with. This theme is highly inspired by the - stylistic choices of SimpleFox by Miguel Ávila. 🦊 - https://github.com/migueravila/SimpleFox - - Author: Andreas Grafen - (https://andreas.grafen.info) - - Repository: https://github.com/andreasgrafen/cascade - Thank you Nick, Abdallah, Benyamin and Wael for all the great suggestions for improvements! ♡ - - Nick: https://github.com/nicksundermeyer - Abdallah: https://github.com/HeiWiper - Benyamin: https://github.com/benyaminl - Wael: https://github.com/wael444 - - If you're looking for a **mouse-friendly** clone please check out Waterfall. - https://github.com/crambaud/waterfall - -*==============================================================================================*/ - - - -@import 'includes/cascade-config.css'; -@import 'includes/cascade-colours.css'; - -@import 'includes/cascade-layout.css'; -@import 'includes/cascade-responsive.css'; -@import 'includes/cascade-floating-panel.css'; - -@import 'includes/cascade-nav-bar.css'; -@import 'includes/cascade-tabs.css'; +@import 'includes/nav-bar.css'; +@import 'includes/tabs.css';