ShadowFox/userContent.css

/* Import about page files 
 * Recomended for everyone using the dark theme */
@import "userContent-files/about_pages/about.css";
@import "userContent-files/about_pages/accounts.css";
@import "userContent-files/about_pages/addons.css";
@import "userContent-files/about_pages/config.css";
@import "userContent-files/about_pages/memory.css";
@import "userContent-files/about_pages/neterror.css";
@import "userContent-files/about_pages/newtab_and_home.css";
@import "userContent-files/about_pages/performance.css";
@import "userContent-files/about_pages/plugins.css";
@import "userContent-files/about_pages/preferences.css";
@import "userContent-files/about_pages/profiles.css";
@import "userContent-files/about_pages/serviceworkers.css";
@import "userContent-files/about_pages/studies.css";
@import "userContent-files/about_pages/support.css";
@import "userContent-files/about_pages/url-classifier.css";
@import "userContent-files/about_pages/webrtc.css";




/* Import Relevant webextension tweaks here
 * IMPORTANT: If used, change the Internal UUID in the corresponding css file */
@import "webextension-tweaks/tree_style_tabs.css";
@import "webextension-tweaks/stylus.css";
@import "webextension-tweaks/multiple_tabs_handler.css";



/* Import relevent website dark themes */
@import "userContent-files/webpages/view_source.css";
@import "userContent-files/webpages/amo_store.css";

/* Photon Colors CSS Variables v1.4.0
* Colors are taken from: https://github.com/FirefoxUX/design-tokens */
:root {
  --magenta-50: #ff1ad9;
  --magenta-60: #ed00b5;
  --magenta-70: #b5007f;
  --magenta-80: #7d004f;
  --magenta-90: #440027;

  --purple-50: #9400ff;
  --purple-60: #8000d7;
  --purple-70: #6200a4;
  --purple-80: #440071;
  --purple-90: #25003e;

  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --blue-90: #000f40;

  --teal-50: #00feff;
  --teal-60: #00c8d7;
  --teal-70: #008ea4;
  --teal-80: #005a71;
  --teal-90: #002d3e;

  --green-50: #30e60b;
  --green-60: #12bc00;
  --green-70: #058b00;
  --green-80: #006504;
  --green-90: #003706;

  --yellow-50: #ffe900;
  --yellow-60: #d7b600;
  --yellow-70: #a47f00;
  --yellow-80: #715100;
  --yellow-90: #3e2800;

  --red-50: #ff0039;
  --red-60: #d70022;
  --red-70: #a4000f;
  --red-80: #5a0002;
  --red-90: #3e0200;

  --orange-50: #ff9400;
  --orange-60: #d76e00;
  --orange-70: #a44900;
  --orange-80: #712b00;
  --orange-90: #3e1300;

  --grey-10: #f9f9fa;
  --grey-20: #ededf0;
  --grey-30: #d7d7db;
  --grey-40: #b1b1b3;
  --grey-50: #737373;
  --grey-60: #4a4a4f;
  --grey-70: #38383d;
  --grey-80: #2a2a2e;
  --grey-90: #0c0c0d;

  --ink-70: #363959;
  --ink-80: #202340;
  --ink-90: #0f1126;

}

:root {
	--primary-dark-color: #323234;  /* Color of FF dark theme nav-bar */
	--primary-light-color: #A6A6A6; /* Off white */
	--light-accent-color: #9c9d9f; /* Slightly darker off white */
	--dark-accent: #3C3C3C; /* darker shade of main color */
	--mid-way-color: s#5c5a5a; /* inbetween main dark and light color */
	--primary-accent-color: darkcyan; 
	--primary-accent-color-dark: #007878; /* Darker cyan color */
}

@-moz-document url-prefix(about:) {
    :root {
	    --in-content-page-color: var(--primary-light-color) !important;
	    --in-content-page-background: var(--dark-accent) !important;
	    --in-content-text-color: var(--primary-light-color) !important;
	    --in-content-selected-text: var(--primary-light-color) !important;
	    --in-content-box-background: var(--primary-dark-color) !important;
	    --in-content-box-background-odd: var(--light-accent-color) !important;
	    --in-content-box-background-hover: var(--dark-accent) !important;
	    --in-content-box-background-active: var(--dark-accent) !important;
	    --in-content-box-border-color: var(--primary-dark-color) !important;
	    --in-content-item-hover: var(--dark-accent) !important;
	    --in-content-item-selected: var(--dark-accent) !important;
	    --in-content-border-highlight: var(--dark-accent) !important;
	    --in-content-border-focus: var(--dark-accent) !important;
	    --in-content-border-color: var(--primary-dark-color) !important;
	    --in-content-category-outline-focus: 1px dotted var(--dark-accent) !important;
	    --in-content-category-text: var(--primary-light-color) !important;
	    --in-content-category-text-active: var(--primary-light-color) !important;
	    --in-content-category-text-selected: var(--primary-accent-color) !important;
	    --in-content-category-text-selected-active: var(--primary-accent-color-dark) !important;
	    --in-content-category-background-selected-hover: var(--primary-dark-color) !important;
	    --in-content-category-background-selected-active: var(--primary-dark-color) !important;
	    --in-content-link-color: var(--primary-accent-color) !important;
	    --in-content-link-color-hover: var(--primary-accent-color-dark) !important;
	    --in-content-link-color-visited: var(--dark-accent) !important;
	    --in-content-primary-button-background: var(--dark-accent) !important;
	    --in-content-primary-button-background-hover: var(--primary-accent-color-dark) !important;
	    --in-content-primary-button-background-active: var(--primary-accent-color-dark) !important;
	    --in-content-table-header-background: var(--dark-accent) !important;
		--in-content-category-background: var(--primary-dark-color) !important;
    }
}



/* Basic changes fundamental to all pages */
@-moz-document url-prefix(about:), url(https://www.mozilla.org/credits/) {	
	
	html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
		background: var(--primary-dark-color) !important;
		color: var(--primary-light-color) !important;
	}	
	
	a:link {
		color: var(--primary-accent-color) !important;
	}
}