Unify CSS

This commit is contained in:
2024-12-01 01:35:33 -06:00
parent 35f7af7c5e
commit 92ec2bdef0
6 changed files with 126 additions and 186 deletions

View File

@ -1,70 +0,0 @@
/* container colors */
#main-window:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
--cust-accent: color-mix(in srgb, var(--container-color) 60%, black);
--cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
--cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
--cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
#TabsToolbar,
.urlbarView-row:is([selected]),
::-moz-selection {
background-color: var(--cust-accent) !important;
}
#titlebar,
.browser-toolbar,
.tab-background:is([selected], [multiselected]) {
background-color: var(--cust-accent-dark) !important;
&:-moz-window-inactive {
opacity: .85 !important;
}
}
#urlbar-background,
#searchbar,
.panel-viewcontainer {
outline: none !important;
border: none !important;
background-color: var(--cust-accent-darker) !important;
}
.urlbarView-url {
color: var(--cust-accent-text) !important;
}
}
#main-window:has(.tabbrowser-tab[selected].identity-color-blue) {
--container-color: dodgerblue;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
--container-color: turquoise;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-green) {
--container-color: green;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-yellow) {
--container-color: gold;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
--container-color: orange;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-red) {
--container-color: firebrick;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-pink) {
--container-color: pink;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-purple) {
--container-color: purple;
}

View File

@ -1,37 +0,0 @@
/* main colors */
#main-window {
--cust-accent: AccentColor;
--cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
--cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
--cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
#TabsToolbar,
.urlbarView-row:is([selected]),
::-moz-selection {
background-color: var(--cust-accent) !important;
}
#titlebar,
.browser-toolbar,
.tab-background:is([selected], [multiselected]) {
background-color: var(--cust-accent-dark) !important;
&:-moz-window-inactive {
opacity: .85 !important;
}
}
#urlbar-background,
#searchbar,
.panel-viewcontainer {
outline: none !important;
border: none !important;
background-color: var(--cust-accent-darker) !important;
}
.urlbarView-url,.urlbarView-action {
color: var(--cust-accent-text) !important;
}
}

View File

@ -1,37 +0,0 @@
/* private colors */
#main-window[privatebrowsingmode="temporary"] {
--cust-accent: color-mix(in srgb, purple 60%, black);
--cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
--cust-accent-darker: color-mix(in srgb, var(--cust-accent) 35%, black);
--cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
#TabsToolbar,
.urlbarView-row:is([selected]),
::-moz-selection {
background-color: var(--cust-accent) !important;
}
#titlebar,
.browser-toolbar,
.tab-background:is([selected], [multiselected]) {
background-color: var(--cust-accent-dark) !important;
&:-moz-window-inactive {
opacity: .85 !important;
}
}
#urlbar-background,
#searchbar,
.panel-viewcontainer {
outline: none !important;
border: none !important;
background-color: var(--cust-accent-darker) !important;
}
.urlbarView-url {
color: var(--cust-accent-text) !important;
}
}

View File

@ -1,14 +0,0 @@
@import 'colors_main.css';
@import 'colors_private.css';
@import 'colors_container.css';
/* hide */
#alltabs-button,
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
#navigator-toolbox {
border-bottom: none !important;
}

View File

@ -1,26 +0,0 @@
@import 'colors_private.css';
@import 'colors_container.css';
/* Padding */
#TabsToolbar {
min-height: 52px !important;
}
/* Hide spacer */
#alltabs-button,
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
/* Container Color overrides */
:root:has(.tabbrowser-tab[selected][class*="identity-color-"]), .tabbrowser-tab:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
menupopup, panel, .tabbrowser-tab, .browser-toolbar {
color: white !important;
color-scheme: dark !important;
}
#navigator-toolbox {
border-bottom: none !important;
}
}

View File

@ -1,2 +1,126 @@
@import 'bkspl/linux.css'; /* HIDE */
/* @import 'bkspl/windows.css'; */ /* Left spacer */
#alltabs-button,
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
/* Bottom divider */
#navigator-toolbox {
border-bottom: none !important;
}
/* Windows overrides */
@media (-moz-platform: windows) {
/* Top margin for AHK */
#TabsToolbar {
min-height: 52px !important;
}
}
/* APPLY COLORS */
/* Tab bar and inactive tabs */
#TabsToolbar,
.urlbarView-row:is([selected]),
::-moz-selection {
background-color: var(--cust-accent) !important;
&:-moz-window-inactive {
background-color: var(--cust-accent-inactive) !important;
}
}
/* Navbar and active tab */
#titlebar,
.browser-toolbar,
.tab-background:is([selected], [multiselected]) {
background-color: var(--cust-accent-dark) !important;
&:-moz-window-inactive {
opacity: .85 !important;
}
}
/* Menus and dropdowns */
#urlbar-background,
#searchbar,
.panel-viewcontainer {
outline: none !important;
border: none !important;
background-color: var(--cust-accent-darker) !important;
}
/* URLbar text */
.urlbarView-url,
.urlbarView-action,
.urlbarView-favicon {
color: var(--cust-accent-text) !important;
}
/* SETUP */
/* Color mix */
@media (prefers-color-scheme: dark) {
:root{
--cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
--cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
--cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
--cust-accent-inactive: color-mix(in srgb, var(--cust-accent) 80%, black);
}
}
@media (prefers-color-scheme: light) {
:root{
--cust-accent-dark: color-mix(in srgb, var(--cust-accent) 30%, white);;
--cust-accent-darker: color-mix(in srgb, var(--cust-accent) 20%, white);
--cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, black);
--cust-accent-inactive: color-mix(in srgb, var(--cust-accent) 80%, white);
}
}
/* System Accent colors */
#main-window {
--cust-accent: AccentColor;
}
/* Private colors */
#main-window[privatebrowsingmode="temporary"] {
--cust-accent: color-mix(in srgb, purple 60%, black);
}
/* Container colors */
#main-window:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
--cust-accent: color-mix(in srgb, var(--container-color) 60%, black);
}
#main-window:has(.tabbrowser-tab[selected].identity-color-blue) {
--container-color: dodgerblue;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
--container-color: turquoise;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-green) {
--container-color: green;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-yellow) {
--container-color: gold;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
--container-color: orange;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-red) {
--container-color: firebrick;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-pink) {
--container-color: pink;
}
#main-window:has(.tabbrowser-tab[selected].identity-color-purple) {
--container-color: purple;
}