mirror of https://gitlab.com/octospacc/UserCSS
Update README.md, Styles/Mastodon/MastoPurpleLight.css, Styles/Firefox/README.md, LICENSE.md, Styles/Firefox/FFUltraSlim.css
This commit is contained in:
Octo Andri
parent
710507dc3e
commit
a4350d6b86
|
|
@ -657,4 +657,4 @@ the specific requirements.
|
||||||
You should also get your employer (if you work as a programmer) or
|
You should also get your employer (if you work as a programmer) or
|
||||||
school, if any, to sign a "copyright disclaimer" for the program, if
|
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||||
necessary. For more information on this, and how to apply and follow
|
necessary. For more information on this, and how to apply and follow
|
||||||
the GNU AGPL, see <https://www.gnu.org/licenses/>.
|
the GNU AGPL, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,5 @@ A collection for all my UserCSS styles.
|
||||||
|
|
||||||
I suggest using the [Stylus](https://github.com/openstyles/stylus) extension to apply them in your browser.
|
I suggest using the [Stylus](https://github.com/openstyles/stylus) extension to apply them in your browser.
|
||||||
|
|
||||||
All my styles are licensed under the AGPL-3.0 license.
|
Only my 100% original styles are licensed under the AGPL-3.0 license.
|
||||||
|
This means, not every style in this repo: for those not made from scratch, but starting from someone else's code, proper credits are indicated in the source files and I don't change the license.
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,495 @@
|
||||||
|
/*==============================================================================================*
|
||||||
|
___ ___ ___ __ __
|
||||||
|
|__ |__ | | | | |__) /\ /__` | | |\/|
|
||||||
|
| | \__/ |___ | | \ /~~\ .__/ |___ | | |
|
||||||
|
v0.1
|
||||||
|
|
||||||
|
FFUltraSlim: Extremely minimalist Firefox usertheme.
|
||||||
|
Wastes just about 25px of vertical space.
|
||||||
|
|
||||||
|
Note: Requires "Compact" toolbar density.
|
||||||
|
|
||||||
|
By OctoSpacc: https://gitlab.com/octospacc/UserCSS
|
||||||
|
|
||||||
|
Below is the original header for Cascade,
|
||||||
|
which this theme is mostly based off.
|
||||||
|
|
||||||
|
*==============================================================================================*/
|
||||||
|
|
||||||
|
/*==============================================================================================*
|
||||||
|
|
||||||
|
+-----+-----+-----+-----+-----+-----+-----+
|
||||||
|
| █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ |
|
||||||
|
| █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ |
|
||||||
|
+-----+-----+-----+-----+-----+-----+-----+
|
||||||
|
|
||||||
|
Description: Minimalist, Simple, Keyboard Centered and based on SimpleFox. 🦊
|
||||||
|
What you get is a really simple responsive one-line layout using the new Proton UI.
|
||||||
|
|
||||||
|
> SimpleFox: https://github.com/migueravila/SimpleFox
|
||||||
|
|
||||||
|
Author: Andreas Grafen
|
||||||
|
(https://andreas.grafen.info)
|
||||||
|
|
||||||
|
Repository: https://github.com/andreasgrafen/ag.proton
|
||||||
|
|
||||||
|
Thank you Nick, Abdallah and Benyamin for all the great suggestions for improvements! ♡
|
||||||
|
Nick: https://github.com/nicksundermeyer)
|
||||||
|
Abdallah: https://github.com/HeiWiper)
|
||||||
|
Benyamin: https://github.com/benyaminl)
|
||||||
|
|
||||||
|
If you're looking for a **mouse-friendly** clone please check out Waterfall.
|
||||||
|
https://github.com/crambaud/waterfall
|
||||||
|
|
||||||
|
*==============================================================================================*/
|
||||||
|
|
||||||
|
/* Ultra slim config */
|
||||||
|
|
||||||
|
.tab-content,
|
||||||
|
.toolbarbutton-1,
|
||||||
|
.tab-loading-burst,
|
||||||
|
.tab-background,
|
||||||
|
#nav-bar,
|
||||||
|
#nav-bar-customization-target,
|
||||||
|
#urlbar,
|
||||||
|
#urlbar-container,
|
||||||
|
#urlbar-input-container,
|
||||||
|
#urlbar-background {
|
||||||
|
Max-Height: 25px !important;
|
||||||
|
Font-Size: 10pt !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text, .tab-label {
|
||||||
|
Min-Height: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbox-clip {
|
||||||
|
Position: Fixed;
|
||||||
|
// Max-Height: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#identity-icon, .tab-icon-image, .tab-icon-stack {
|
||||||
|
Max-Height: 11px !important;
|
||||||
|
Max-Width: 11px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarbutton-icon, .toolbarbutton-1 {
|
||||||
|
Max-Height: 20px !important;
|
||||||
|
Max-Width: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
#TabsToolbar,
|
||||||
|
#nav-bar,
|
||||||
|
#urlbar-input-container {
|
||||||
|
Max-Height: 24px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reposition some keys here */
|
||||||
|
|
||||||
|
/* transition to oneline */
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
/* move tabs bar over */
|
||||||
|
#TabsToolbar {
|
||||||
|
margin-left: var(--uc-urlbar-width) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* move entire nav bar */
|
||||||
|
#nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 8px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=============================================================================================*/
|
||||||
|
|
||||||
|
/*---+---+---+---+---+---+
|
||||||
|
| C | O | N | F | I | G |
|
||||||
|
+---+---+---+---+---+---*/
|
||||||
|
|
||||||
|
/* Feel free to tweak the following
|
||||||
|
* config settingsto your own liking. */
|
||||||
|
|
||||||
|
/*---+---+---+---+---+---+---+
|
||||||
|
| C | O | L | O | U | R | S |
|
||||||
|
+---+---+---+---+---+---+---*/
|
||||||
|
|
||||||
|
/* Comment this block out if you want to keep the default theme colour. */
|
||||||
|
/* This will also work with custom colours from color.firefox.com. */
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) { :root {
|
||||||
|
|
||||||
|
--window-colour: #1E2021;
|
||||||
|
--secondary-colour: #191B1C;
|
||||||
|
--inverted-colour: #FAFAFC;
|
||||||
|
|
||||||
|
/* Containter Tab Colours */
|
||||||
|
--uc-identity-color-blue: #7ED6DF;
|
||||||
|
--uc-identity-color-turquoise: #55E6C1;
|
||||||
|
--uc-identity-color-green: #B8E994;
|
||||||
|
--uc-identity-color-yellow: #F7D794;
|
||||||
|
--uc-identity-color-orange: #F19066;
|
||||||
|
--uc-identity-color-red: #FC5C65;
|
||||||
|
--uc-identity-color-pink: #F78FB3;
|
||||||
|
--uc-identity-color-purple: #786FA6;
|
||||||
|
|
||||||
|
--uc-identity-color-blue-muted: #7ED6DF99;
|
||||||
|
--uc-identity-color-turquoise-muted: #55E6C199;
|
||||||
|
--uc-identity-color-green-muted: #B8E99499;
|
||||||
|
--uc-identity-color-yellow-muted: #F7D794CC;
|
||||||
|
--uc-identity-color-orange-muted: #F19066FF;
|
||||||
|
--uc-identity-color-red-muted: #FC5C65FF;
|
||||||
|
--uc-identity-color-pink-muted: #F78FB399;
|
||||||
|
--uc-identity-color-purple-muted: #786FA6FF;
|
||||||
|
|
||||||
|
}}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) { :root {
|
||||||
|
|
||||||
|
--window-colour: #FAFAFC;
|
||||||
|
--secondary-colour: #EAEAEC;
|
||||||
|
--inverted-colour: #1E2021;
|
||||||
|
|
||||||
|
/* Containter Tab Colours */
|
||||||
|
--uc-identity-color-blue: #1D65F5;
|
||||||
|
--uc-identity-color-turquoise: #209FB5;
|
||||||
|
--uc-identity-color-green: #40A02B;
|
||||||
|
--uc-identity-color-yellow: #E49320;
|
||||||
|
--uc-identity-color-orange: #FE640B;
|
||||||
|
--uc-identity-color-red: #FC5C65;
|
||||||
|
--uc-identity-color-pink: #EC83D0;
|
||||||
|
--uc-identity-color-purple: #822FEE;
|
||||||
|
|
||||||
|
--uc-identity-color-blue-muted: #1D65F5FF;
|
||||||
|
--uc-identity-color-turquoise-muted: #209FB5FF;
|
||||||
|
--uc-identity-color-green-muted: #40A02BFF;
|
||||||
|
--uc-identity-color-yellow-muted: #E49320FF;
|
||||||
|
--uc-identity-color-orange-muted: #FE640BFF;
|
||||||
|
--uc-identity-color-red-muted: #FC5C65FF;
|
||||||
|
--uc-identity-color-pink-muted: #EC83D0FF;
|
||||||
|
--uc-identity-color-purple-muted: #822FEEFF;
|
||||||
|
|
||||||
|
}}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
/* URL colour in URL bar suggestions */
|
||||||
|
--urlbar-popup-url-color: var(--uc-identity-color-purple) !important;
|
||||||
|
|
||||||
|
/*---+---+---+---+---+---+---+
|
||||||
|
| V | I | S | U | A | L | S |
|
||||||
|
+---+---+---+---+---+---+---*/
|
||||||
|
|
||||||
|
/* global border radius */
|
||||||
|
--uc-border-radius: 0;
|
||||||
|
|
||||||
|
/* dynamic url bar width settings */
|
||||||
|
--uc-urlbar-width: clamp(200px, 40vw, 500px);
|
||||||
|
|
||||||
|
/* dynamic tab width settings */
|
||||||
|
--uc-active-tab-width: clamp(100px, 20vw, 300px);
|
||||||
|
--uc-inactive-tab-width: clamp( 50px, 15vw, 200px);
|
||||||
|
|
||||||
|
/* if active always shows the tab close button */
|
||||||
|
--show-tab-close-button: none; /* DEFAULT: -moz-inline-box; */
|
||||||
|
|
||||||
|
/* if active only shows the tab close button on hover*/
|
||||||
|
--show-tab-close-button-hover: none; /* DEFAULT: -moz-inline-box; */
|
||||||
|
|
||||||
|
/* adds left and right margin to the container-tabs indicator */
|
||||||
|
--container-tabs-indicator-margin: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---+---+---+---+---+---+---+
|
||||||
|
| B | U | T | T | O | N | S |
|
||||||
|
+---+---+---+---+---+---+---*/
|
||||||
|
|
||||||
|
#back-button,
|
||||||
|
#forward-button { display: none !important; }
|
||||||
|
|
||||||
|
/* bookmark icon */
|
||||||
|
#star-button{ display: none !important; }
|
||||||
|
|
||||||
|
/* zoom indicator */
|
||||||
|
#urlbar-zoom-button { display: none !important; }
|
||||||
|
|
||||||
|
/* Make button small as Possible, hidden out of sight */
|
||||||
|
#PanelUI-button { margin-top: -5px; margin-bottom: 44px; }
|
||||||
|
|
||||||
|
#PanelUI-menu-button {
|
||||||
|
|
||||||
|
padding: 0px !important;
|
||||||
|
max-height: 1px;
|
||||||
|
|
||||||
|
list-style-image: none !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#PanelUI-menu-button .toolbarbutton-icon { width: 1px !important; }
|
||||||
|
#PanelUI-menu-button .toolbarbutton-badge-stack { padding: 0px !important; }
|
||||||
|
|
||||||
|
#reader-mode-button{ display: none !important; }
|
||||||
|
|
||||||
|
/* tracking protection shield icon */
|
||||||
|
#tracking-protection-icon-container { display: none !important; }
|
||||||
|
|
||||||
|
/* #identity-box { display: none !important } /* hides encryption AND permission items */
|
||||||
|
#identity-permission-box { display: none !important; } /* only hides permission items */
|
||||||
|
|
||||||
|
/* e.g. playing indicator (secondary - not icon) */
|
||||||
|
.tab-secondary-label { display: none !important; }
|
||||||
|
|
||||||
|
#pageActionButton { display: none !important; }
|
||||||
|
#page-action-buttons { display: none !important; }
|
||||||
|
|
||||||
|
#urlbar-go-button { display: none !important; }
|
||||||
|
|
||||||
|
/*=============================================================================================*/
|
||||||
|
|
||||||
|
/*---+---+---+---+---+---+
|
||||||
|
| L | A | Y | O | U | T |
|
||||||
|
+---+---+---+---+---+---*/
|
||||||
|
|
||||||
|
/* No need to change anything below this comment.
|
||||||
|
* Just tweak it if you want to tweak the overall layout. c: */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
--OneLinerMinWidth: 0px;
|
||||||
|
|
||||||
|
--uc-theme-colour: var(--window-colour, var(--toolbar-bgcolor));
|
||||||
|
--uc-hover-colour: var(--secondary-colour, rgba(0, 0, 0, 0.2));
|
||||||
|
--uc-inverted-colour: var(--inverted-colour, var(--toolbar-color));
|
||||||
|
|
||||||
|
--button-bgcolor: var(--uc-theme-colour) !important;
|
||||||
|
--button-hover-bgcolor: var(--uc-hover-colour) !important;
|
||||||
|
--button-active-bgcolor: var(--uc-hover-colour) !important;
|
||||||
|
|
||||||
|
--toolbarbutton-border-radius: var(--uc-border-radius) !important;
|
||||||
|
|
||||||
|
--tab-border-radius: var(--uc-border-radius) !important;
|
||||||
|
--lwt-text-color: var(--uc-inverted-colour) !important;
|
||||||
|
--lwt-tab-text: var(--uc-inverted-colour) !important;
|
||||||
|
|
||||||
|
--arrowpanel-border-radius: var(--uc-border-radius) !important;
|
||||||
|
|
||||||
|
--tab-block-margin: 2px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
window,
|
||||||
|
#main-window,
|
||||||
|
#toolbar-menubar,
|
||||||
|
#TabsToolbar,
|
||||||
|
#PersonalToolbar,
|
||||||
|
#navigator-toolbox,
|
||||||
|
#sidebar-box,
|
||||||
|
#nav-bar {
|
||||||
|
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
background: var(--uc-theme-colour) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* grey out ccons inside the toolbar to make it
|
||||||
|
* more aligned with the Black & White colour look */
|
||||||
|
#PersonalToolbar toolbarbutton:not(:hover),
|
||||||
|
#bookmarks-toolbar-button:not(:hover) { filter: grayscale(1) !important; }
|
||||||
|
|
||||||
|
/* remove window control buttons */
|
||||||
|
.titlebar-buttonbox-container { display: none !important; }
|
||||||
|
|
||||||
|
/* remove "padding" left and right from tabs */
|
||||||
|
.titlebar-spacer { display: none !important; }
|
||||||
|
|
||||||
|
/* remove gap after pinned tabs */
|
||||||
|
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||||
|
> #tabbrowser-arrowscrollbox
|
||||||
|
> .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; }
|
||||||
|
|
||||||
|
/* remove tab shadow */
|
||||||
|
.tabbrowser-tab
|
||||||
|
>.tab-stack
|
||||||
|
> .tab-background { box-shadow: none !important; }
|
||||||
|
|
||||||
|
/* tab background */
|
||||||
|
.tabbrowser-tab
|
||||||
|
> .tab-stack
|
||||||
|
> .tab-background { background: var(--uc-theme-colour) !important; }
|
||||||
|
|
||||||
|
/* active tab background */
|
||||||
|
.tabbrowser-tab[selected]
|
||||||
|
> .tab-stack
|
||||||
|
> .tab-background { background: var(--uc-hover-colour) !important; }
|
||||||
|
|
||||||
|
/* multi tab selection */
|
||||||
|
#tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { background: var(--uc-hover-colour) !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;
|
||||||
|
|
||||||
|
border-radius: var(--tab-border-radius) !important;
|
||||||
|
box-shadow: 0 1px 10px 1px var(--uc-identity-gradient-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(--uc-theme-colour) !important;
|
||||||
|
background-color: var(--uc-theme-colour) !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(--uc-hover-colour) !important;
|
||||||
|
background-color: var(--uc-hover-colour) !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(--uc-inverted-colour) !important;
|
||||||
|
background-color: var(--uc-inverted-colour) !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(--uc-inverted-colour) !important;
|
||||||
|
background-color: var(--uc-inverted-colour) !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(--uc-inverted-colour) !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(--uc-theme-colour) !important; }
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove border below whole nav */
|
||||||
|
#navigator-toolbox { border-bottom: none !important; }
|
||||||
|
|
||||||
|
#urlbar,
|
||||||
|
#urlbar * {
|
||||||
|
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar-background { border: var(--uc-hover-colour) !important; }
|
||||||
|
|
||||||
|
#urlbar[focused="true"]
|
||||||
|
> #urlbar-background,
|
||||||
|
#urlbar:not([open])
|
||||||
|
> #urlbar-background { background: transparent !important; }
|
||||||
|
|
||||||
|
|
||||||
|
#urlbar[open]
|
||||||
|
> #urlbar-background { background: var(--uc-theme-colour) !important; }
|
||||||
|
|
||||||
|
.urlbarView-row:hover
|
||||||
|
> .urlbarView-row-inner,
|
||||||
|
.urlbarView-row[selected]
|
||||||
|
> .urlbarView-row-inner { background: var(--uc-hover-colour) !important; }
|
||||||
|
|
||||||
|
#statuspanel {
|
||||||
|
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 12px !important; left: 12px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuspanel #statuspanel-label {
|
||||||
|
|
||||||
|
border: none !important;
|
||||||
|
border-radius: var(--uc-border-radius) !important;
|
||||||
|
background: var(--uc-theme-colour) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container Tabs */
|
||||||
|
.identity-color-blue { --identity-tab-color: var(--uc-identity-color-blue) !important; --identity-icon-color: var(--uc-identity-color-blue) !important; --uc-identity-gradient-color: var(--uc-identity-color-blue-muted) !important; }
|
||||||
|
.identity-color-turquoise { --identity-tab-color: var(--uc-identity-color-turquoise) !important; --identity-icon-color: var(--uc-identity-color-turquoise) !important; --uc-identity-gradient-color: var(--uc-identity-color-turquoise-muted) !important; }
|
||||||
|
.identity-color-green { --identity-tab-color: var(--uc-identity-color-green) !important; --identity-icon-color: var(--uc-identity-color-green) !important; --uc-identity-gradient-color: var(--uc-identity-color-green-muted) !important; }
|
||||||
|
.identity-color-yellow { --identity-tab-color: var(--uc-identity-color-yellow) !important; --identity-icon-color: var(--uc-identity-color-yellow) !important; --uc-identity-gradient-color: var(--uc-identity-color-yellow-muted) !important; }
|
||||||
|
.identity-color-orange { --identity-tab-color: var(--uc-identity-color-orange) !important; --identity-icon-color: var(--uc-identity-color-orange) !important; --uc-identity-gradient-color: var(--uc-identity-color-orange-muted) !important; }
|
||||||
|
.identity-color-red { --identity-tab-color: var(--uc-identity-color-red) !important; --identity-icon-color: var(--uc-identity-color-red) !important; --uc-identity-gradient-color: var(--uc-identity-color-red-muted) !important; }
|
||||||
|
.identity-color-pink { --identity-tab-color: var(--uc-identity-color-pink) !important; --identity-icon-color: var(--uc-identity-color-pink) !important; --uc-identity-gradient-color: var(--uc-identity-color-pink-muted) !important; }
|
||||||
|
.identity-color-purple { --identity-tab-color: var(--uc-identity-color-purple) !important; --identity-icon-color: var(--uc-identity-color-purple) !important; --uc-identity-gradient-color: var(--uc-identity-color-purple-muted) !important; }
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
Note: Download your desired CSS file from this repo and rename it as `userChrome.css` (important).
|
||||||
|
|
||||||
|
## How to use a userChrome.css theme
|
||||||
|
|
||||||
|
1. Type `about:config` into your URL bar. Click on the **I accept the risk** button if you're shown a warning.
|
||||||
|
2. Seach for **`toolkit.legacyUserProfileCustomizations.stylesheets`**, **`layers.acceleration.force-enabled`**, **`gfx.webrender.all`** and **`svg.context-properties.content.enabled`** and set them to **`true`**.
|
||||||
|
3. Go to your profile folder:
|
||||||
|
- Linux: `$HOME/.mozilla/firefox/######.default-release/`
|
||||||
|
- MacOS: `Users/[USERNAME]/Library/Application Support/Firefox/Profiles/######.default-release`
|
||||||
|
- Windows: `C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\######.default-release`
|
||||||
|
4. If it doesn't exist already create a folder called `chrome`.
|
||||||
|
5. Copy your desired `userChrome.css` into that folder.
|
||||||
|
6. *optional* Customise everything to your liking.
|
||||||
|
|
||||||
|
_This guide is borrowed from Cascade repo. Credits: [github.com/andreasgrafen/cascade](https://github.com/andreasgrafen/cascade/blob/main/README.md#how-to-use-a-userchromecss-theme)_
|
||||||
Loading…
Reference in New Issue