From 56d06e7bf0bffab98bb7a889bb9479291da2fed4 Mon Sep 17 00:00:00 2001 From: Luca Bilke Date: Tue, 28 Mar 2023 14:22:30 +0200 Subject: [PATCH] use cascade theme for librewolf --- .gitmodules | 3 - .../chrome/includes/cascade-colours.css | 107 ++++++++++++ .../chrome/includes/cascade-config-mouse.css | 139 ++++++++++++++++ .../chrome/chrome/includes/cascade-config.css | 155 ++++++++++++++++++ .../includes/cascade-floating-panel.css | 1 + .../chrome/chrome/includes/cascade-layout.css | 53 ++++++ .../chrome/includes/cascade-nav-bar.css | 39 +++++ .../cascade-responsive-windows-fix.css | 9 + .../chrome/includes/cascade-responsive.css | 35 ++++ .../chrome/chrome/includes/cascade-tabs.css | 150 +++++++++++++++++ .../librewolf/chrome/chrome/userChrome.css | 39 +++++ 11 files changed, 727 insertions(+), 3 deletions(-) create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-colours.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-config-mouse.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-config.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-floating-panel.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-layout.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-nav-bar.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-responsive-windows-fix.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-responsive.css create mode 100644 .local/share/librewolf/chrome/chrome/includes/cascade-tabs.css create mode 100644 .local/share/librewolf/chrome/chrome/userChrome.css diff --git a/.gitmodules b/.gitmodules index 73392d539..4606cdb9d 100644 --- a/.gitmodules +++ b/.gitmodules @@ -19,6 +19,3 @@ [submodule ".local/share/themes/tokyonight"] path = .local/share/themes/tokyonight url = https://git.snaile.de/luca/tokyonight-theme -[submodule ".local/share/librewolf/cascade"] - path = .local/share/librewolf/cascade - url = https://github.com/andreasgrafen/cascade diff --git a/.local/share/librewolf/chrome/chrome/includes/cascade-colours.css b/.local/share/librewolf/chrome/chrome/includes/cascade-colours.css new file mode 100644 index 000000000..bd25205e6 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-colours.css @@ -0,0 +1,107 @@ +/*---+---+---+---+---+---+---+ + | 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/chrome/includes/cascade-config-mouse.css b/.local/share/librewolf/chrome/chrome/includes/cascade-config-mouse.css new file mode 100644 index 000000000..659a25811 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-config-mouse.css @@ -0,0 +1,139 @@ +/*---+---+---+---+---+---+ + | 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/chrome/includes/cascade-config.css b/.local/share/librewolf/chrome/chrome/includes/cascade-config.css new file mode 100644 index 000000000..cf6822f4a --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-config.css @@ -0,0 +1,155 @@ +/*---+---+---+---+---+---+ + | 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/chrome/includes/cascade-floating-panel.css b/.local/share/librewolf/chrome/chrome/includes/cascade-floating-panel.css new file mode 100644 index 000000000..46b51b143 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-floating-panel.css @@ -0,0 +1 @@ +#statuspanel #statuspanel-label { margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important; } diff --git a/.local/share/librewolf/chrome/chrome/includes/cascade-layout.css b/.local/share/librewolf/chrome/chrome/includes/cascade-layout.css new file mode 100644 index 000000000..48047ca80 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-layout.css @@ -0,0 +1,53 @@ +: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; + +} diff --git a/.local/share/librewolf/chrome/chrome/includes/cascade-nav-bar.css b/.local/share/librewolf/chrome/chrome/includes/cascade-nav-bar.css new file mode 100644 index 000000000..ed9b548c9 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-nav-bar.css @@ -0,0 +1,39 @@ +#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/chrome/includes/cascade-responsive-windows-fix.css b/.local/share/librewolf/chrome/chrome/includes/cascade-responsive-windows-fix.css new file mode 100644 index 000000000..451fe02af --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-responsive-windows-fix.css @@ -0,0 +1,9 @@ +@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/chrome/includes/cascade-responsive.css b/.local/share/librewolf/chrome/chrome/includes/cascade-responsive.css new file mode 100644 index 000000000..6e92d269b --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-responsive.css @@ -0,0 +1,35 @@ +@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/chrome/includes/cascade-tabs.css b/.local/share/librewolf/chrome/chrome/includes/cascade-tabs.css new file mode 100644 index 000000000..a479810b5 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/includes/cascade-tabs.css @@ -0,0 +1,150 @@ +/* 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; } diff --git a/.local/share/librewolf/chrome/chrome/userChrome.css b/.local/share/librewolf/chrome/chrome/userChrome.css new file mode 100644 index 000000000..1bb7bbf92 --- /dev/null +++ b/.local/share/librewolf/chrome/chrome/userChrome.css @@ -0,0 +1,39 @@ +/*==============================================================================================* + + +-----+-----+-----+-----+-----+-----+-----+ + | █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ | + | █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ | + +-----+-----+-----+-----+-----+-----+-----+ + + 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';