Unify CSS
This commit is contained in:
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -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;
|
|
||||||
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
Reference in New Issue
Block a user