D
Deleted member 197709
Guest
Over time fiddling with browsers to find what I liked best. I narrowed them down. I'm partial to Firefox but kind of Like Vivaldi too. I use both equally pretty much. I decided to give them a makeover with dark themes, and made the plunge in CSS. I'm a total dumby with CSS but with trial and error and searches over time, I managed to make them both pretty much the same aesthetically.
Firefox, looks same with Librewolf and Waterfox
Vivaldi
Here's a busy look. I made audio playing tab kinna crimson so I can recognize it easier when using other tabs. Hovering over tabs, I made light grey.
Firefox / Librewolf / Waterfox
Panel
Vivaldi
Panel and side tabs position...
I can't get use to side tabs as I normally don't have but just a few open. But for many open tabs, it's pretty cool I think.
CSS code. Ugh.. This was lots of trial and error and tons of searches as I knew nothing about CSS. Perhaps there's a better way to do all this with the code, but this seems to work well without issues. Incase anyone wants to fiddle or correct my code to be more ummm politically correct so to speak.
Firefox Theme = Dark Theme by Alex
The Colors used probably wouldn't look good with a lighter theme, but it's easy enough to edit them using a color picker.
Just thought I would share for others who might like the dark themes and inverted gradient-ish look. I did this for my desktop theme as it matches it really well.
This might work on windows as well, but I don't know. I did this on my Linux Desktop with a 2560 by 1080 screen. Added notes at beginning of css snippets to help me keep track of what does what.
To enable CSS mods in Firefox....
Open Firefox and go to about:config
Search for: toolkit.legacyUserProfileCustomizations.stylesheets
Set it to true.
To find the profile chrome dir...
Go to about:support in the address bar.
Find the Profile Folder row.
Click Open Folder, or just navigate to it in your file browser.
Create userChrome.css and userContent.css files in the chrome dir.
Create folder " img " in the chrome dir for a wallpaper, if you want to use a background image.
Example of the two files listed below, representing the picts above...
Below that, is the CSS I use for Vivaldi shown in the picts above.
Hope this helps others.
Firefox...
userChrome.css
Firefox...
userContent.css
Vivaldi CSS structure is a lot different Ugh. Took me longer to figure out and tweak. Anyway...
Theme = GNOME-compatible Dark
Theme colors in Vivaldi settings-themes-theme-editor are...
Background #212121
Foreground #ced4de
Highlight #363636
Accent #171717
Vivaldi CSS... All condensed in one file.
Added a note to make tabs longer by editing a js file. I think Vivaldi kinna hard coded them to be short and it took some searching to figure out how to make them more a practical length.
Vivaldi...
Can be named anything with .css extension. Just enable and designate the used dir, in Vivaldi appearance settings.
I separated the color specific stuff so the rest of the code can work on any Vivaldi theme.
Firefox, looks same with Librewolf and Waterfox
Vivaldi
Here's a busy look. I made audio playing tab kinna crimson so I can recognize it easier when using other tabs. Hovering over tabs, I made light grey.
Firefox / Librewolf / Waterfox
Panel
Vivaldi
Panel and side tabs position...
I can't get use to side tabs as I normally don't have but just a few open. But for many open tabs, it's pretty cool I think.
CSS code. Ugh.. This was lots of trial and error and tons of searches as I knew nothing about CSS. Perhaps there's a better way to do all this with the code, but this seems to work well without issues. Incase anyone wants to fiddle or correct my code to be more ummm politically correct so to speak.
Firefox Theme = Dark Theme by Alex
The Colors used probably wouldn't look good with a lighter theme, but it's easy enough to edit them using a color picker.
Just thought I would share for others who might like the dark themes and inverted gradient-ish look. I did this for my desktop theme as it matches it really well.
This might work on windows as well, but I don't know. I did this on my Linux Desktop with a 2560 by 1080 screen. Added notes at beginning of css snippets to help me keep track of what does what.
To enable CSS mods in Firefox....
Open Firefox and go to about:config
Search for: toolkit.legacyUserProfileCustomizations.stylesheets
Set it to true.
To find the profile chrome dir...
Go to about:support in the address bar.
Find the Profile Folder row.
Click Open Folder, or just navigate to it in your file browser.
Create userChrome.css and userContent.css files in the chrome dir.
Create folder " img " in the chrome dir for a wallpaper, if you want to use a background image.
Example of the two files listed below, representing the picts above...
Below that, is the CSS I use for Vivaldi shown in the picts above.
Hope this helps others.
Firefox...
userChrome.css
CSS:
/* Tab: gradient colors */
#tabbrowser-tabs .tabbrowser-tab .tab-content{
top: 5px !important;
height: 28px !important;
background-color : #141414 !important;
background: linear-gradient(180deg, #141414 0%, #2c2c2c 100%) !important;
border-style: solid !important;
border-radius: 4px !important;
border-width: 1px 1px 1px 1px !important; /* top, right, bottom. left */
border-color: #474747 #222222 #222222 #474747 !important;
}
/* Tab: selected gradient colors */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
top: 5px !important;
height: 28px !important;
border-radius: 4px !important;
background-color : #281e17 !important;
background: linear-gradient(180deg, #281e17 0%, #7d5f47 100%) !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important; /* top, right, bottom. left */
border-color: #ae8462 #423225 #423225 #ae8462 !important;
}
/* Tab: hovered gradient colors */
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
top: 5px !important;
height: 28px !important;
border-radius: 4px !important;
background-color : #1d1d1d !important;
background: linear-gradient(180deg, #1d1d1d 0%, #616161 100%) !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important; /* top, right, bottom. left */
border-color: #7e7e7e #313131 #313131 #7e7e7e !important;
}
/* Tab: audio-playing gradient colors */
#tabbrowser-tabs .tabbrowser-tab[soundplaying] .tab-content {
top: 5px !important;
height: 28px !important;
border-radius: 4px !important;
background-color : #281919 !important;
background: linear-gradient(180deg, #281919 0%, #7d4d4e 100%) !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important; /* top, right, bottom. left */
border-color: #ae6c6d #422929 #422929 #ae6c6d !important;
}
/* Poofy away freaky neon border in panel. */
:root{ --toolbar-field-focus-border-color: #000 !important; }
@-moz-document url-prefix(chrome://browser/content/places/) {
treechildren::-moz-tree-row(current, focus) {
outline: none !important;
}
}
/* Poofy away the other freaky neon border in panel. */
#search-box,
#searchFilter,
input:not(#urlbar-input) {
outline: none !important;
border: none !important;
}Firefox...
userContent.css
CSS:
/* Home page. */
@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
.click-target-container *, .top-sites-list * {
color: #fff !important ;
text-shadow: 2px 2px 2px #222 !important ;
}
/* Home page image inside /chrome/img folder. */
body::before {
content: "" ;
z-index: -1 ;
position: fixed ;
top: 0 ;
left: 0 ;
background: #000 no-repeat url(img/Heaven-Earth-New.jpg) center ;
background-size: cover ;
width: 100vw ;
height: 100vh ;
}
}
/****************************************/
/* Poofy away yukky edit options button at bottom of home page. */
.personalizeButtonWrapper {
display: none !important ;
}
/* Poofy away freaky neon border outline in some pages text fields...*/
/* Wasted time trying to do this in userChrome.css file. Ugh! */
input:focus,
textarea:focus,
select:focus,
a:focus {
outline: none !important ;
}Vivaldi CSS structure is a lot different Ugh. Took me longer to figure out and tweak. Anyway...
Theme = GNOME-compatible Dark
Theme colors in Vivaldi settings-themes-theme-editor are...
Background #212121
Foreground #ced4de
Highlight #363636
Accent #171717
Vivaldi CSS... All condensed in one file.
Added a note to make tabs longer by editing a js file. I think Vivaldi kinna hard coded them to be short and it took some searching to figure out how to make them more a practical length.
Vivaldi...
Can be named anything with .css extension. Just enable and designate the used dir, in Vivaldi appearance settings.
I separated the color specific stuff so the rest of the code can work on any Vivaldi theme.
CSS:
/* For Dad..................... */
/* Condensed tab containers as much as possible. */
/* Note... /opt/vivaldi/resources/vivaldi/bundle.js */
/* Longer Tabs Top and Bottom... Edit vU=180 to vU=215 */
/* The letters change with each new version or update. */
/* Just search for " =180 " in the file. */
/* Last update March 19, 2026 it was the third " =180 " in the file. */
/* Vivaldi should let us do this with CSS. Not everyone is into a gazillion tiny tabs. */
/* Top Thinner tab container, move tabs to center. */
#tabs-tabbar-container.top {
height: 28px !important;
margin-top: -4px !important;
margin-bottom: 4px !important;
}
/* Bottom Thinner tab container, move tabs to center. */
#tabs-tabbar-container.bottom {
height: 28px !important;
margin-top: 2px !important;
margin-bottom: -1px !important;
}
/* Thinner tabs, corner radius, space between tabs. */
.tab {
height: 27px !important;
display: inline-block;
border-radius: 4px !important;
margin-top: 3px !important;
margin-right: 4px !important;
bottom: 1px !important;
}
/* Icon adjust.... */
.tab .tab.active .tab-header .favicon {
margin-top: -1px !important;
}
/* Stop Icon Excess Filter... Active Tab. */
.tab.active .tab-header .favicon:not(.svg) {
filter: brightness(105%) !important;
}
/* Fixed overflow with active tab, move titles to center. */
.tab-position .tab .title {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
vertical-align: middle !important;
margin-top: 0px !important;
width: 100px !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* Adjust the plus button closer to tab. */
.button-toolbar.newtab {
margin-top: 1px !important;
margin-left: -4px !important;
}
/* Fixes Tabs position when Browser is Maximized. */
/* Tabs Top..... I'm not sure why this works. */
/* Maybe only fixes my maximized screen size 2560 by 1080 ? */
.maximized #tabs-tabbar-container.top {
margin-top: 2px !important;
margin-bottom: 1px !important;
}
/* Fixes Tabs position when Browser is Maximized. */
/* Tabs Bottom..... I'm not sure why this works. */
/* Maybe only fixes my maximized screen size 2560 by 1080 ? */
.maximized #tabs-tabbar-container.bottom {
margin-top: -1px !important;
margin-bottom: 3px !important;
}
/* Color Specific..................... */
/* Linux Dark Theme.............. */
/* Inverted gradient effect on tabs. */
/* Made for a dark theme GNOME-compatible Dark. */
/* Color specific. */
.tab {
color: white !important;
background-color : #141414 !important;
background: linear-gradient(180deg, #141414 0%, #2c2c2c 100%);
border-style: solid;
border-radius: 4px !important;
border-width: 1px 1px 1px 1px; /* top, right, bottom. left */
border-color: #474747 #222222 #222222 #474747;
}
/* Tint active and border. */
.tab.active {
background-color : #281e17 !important;
background: linear-gradient(180deg, #281e17 0%, #7d5f47 100%);
border-style: solid;
border-width: 1px 1px 1px 1px; /* top, right, bottom. left */
border-color: #ae8462 #423225 #423225 #ae8462;
}
/* Subtle highlight hover inactive tabs and border. */
.tab-position .tab:not(.active):hover {
background-color : #1d1d1d !important;
background: linear-gradient(180deg, #1d1d1d 0%, #616161 100%);
border-style: solid;
border-width: 1px 1px 1px 1px; /* top, right, bottom. left */
border-color: #7e7e7e #313131 #313131 #7e7e7e;
}
/* Audio playing color. */
.tab.audio-on {
background-color : #281919 !important;
background: linear-gradient(180deg, #281919 0%, #7d4d4e 100%);
border-style: solid;
border-width: 1px 1px 1px 1px; /* top, right, bottom. left */
border-color: #ae6c6d #422929 #422929 #ae6c6d;
}
/* Audio playing hover color. */
.tab-position .tab.audio-on:not(.active):hover {
background-color : #281919 !important;
background: linear-gradient(180deg, #281919 0%, #7d4d4e 100%);
border-style: solid;
border-width: 1px 1px 1px 1px; /* top, right, bottom. left */
border-color: #ae6c6d #422929 #422929 #ae6c6d;
}
/* Panel Tweaks..................... */
/* Best with light grey theme highlight... */
#panels-container.overlay .panel-group {
background-color: var(--colorAccentBgAlpha);
}
.panel-group {
background-color: var(--colorAccentBgAlphaHeavy);
backdrop-filter: blur(1.2em) brightness(0.55);
}
.panel .tree-row {
color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.9;
}
.panel .tree-row:hover {
background-color: var(--colorAccentBgAlpha);
transition: 0.3s ease-out;
background-image: none;
border-radius:var(--radius);
}
.panel-bookmarks > section.outerScrollbar > div > div > div > * > div > label:hover, #mail_panel > section > div > div > div > * > div > label:hover {
transform: scale(1.02);
transition: 0.3s ease-out;
}
/* Side Tabs.....Any Theme................ */
/* Edited to not effect top and bottom tab bars. */
/* Fixed small gap between address bar. */
/* Fixed tab mismatch when condensed. */
/* Centered tabs. */
/* Right Side Auto hide vertical tab bar. */
div#browser:not(.fullscreen) > #main > .inner > div:not(#webview-container):not(#panels-container), #tabs-tabbar-container.right {
width: 34px !important;
transition: width 0.20s;
margin-top: -2px !important;
margin-left: -2px !important;
}
div#browser:not(.fullscreen) > #main > .inner > div:not(#webview-container):not(#panels-container):hover, #tabs-tabbar-container.right:hover {
width: 215px !important; /* See note at beginning of the file for width to work. */
transition: width 0.20s;
margin-top: -2px !important;
margin-left: -2px !important;
}
/* Left Side Auto hide vertical tab bar. */
div#browser:not(.fullscreen) > #main > .inner > div:not(#webview-container):not(#panels-container), #tabs-tabbar-container.left {
width: 34px !important;
transition: width 0.20s;
margin-top: -2px !important;
margin-right: -2px !important;
}
div#browser:not(.fullscreen) > #main > .inner > div:not(#webview-container):not(#panels-container):hover, #tabs-tabbar-container.left:hover {
width: 215px !important; /* See note at beginning of the file for width to work. */
transition: width 0.20s;
margin-top: -2px !important;
margin-right: -2px !important;
}Attachments
Last edited by a moderator:
