/* Import any webextension tweaks here - Example Shown below */
/* IMPORTANT: change the Internal UUID in the corresponding css file */
@import "webextension-tweaks/tree_style_tabs.css";
@import "webextension-tweaks/stylus.css";
@import "color_variables.css";

: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: #5c5a5a; /* inbetween main dark and light color */
	--primary-accent-color: darkcyan; 
	--primary-accent-color-dark: #007878; /* Darker cyan color */
}

@-moz-document url-prefix(about:about), url-prefix(about:crashes), url(about:debugging), 
	             url-prefix(about:downloads), url-prefix(about:privatebrowsing), 
	             url-prefix(about:buildconfig), url-prefix(about:networking),
	             url-prefix(about:license), url(about:studies), url(about:telemetry), 
	             url(about:support), url(about:sessionrestore), url-prefix(about:neterror), url(about:home),
	             url(about:debugging#addons), url-prefix(about:preferences) {
    :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;
    }
}


@-moz-document url(about:blank), url(about:newtab), url(about:buildconfig), url(about:), url(about:accounts), 
	             url(about:cache), url(about:memory), url(about:mozilla), url(about:performance), 
	             url(about:plugins), url(about:profiles), url(about:rights), url(about:robots), url(about:serviceworkers), 
	             url(about:studies), url(about:sync-log), url(about:url-classifier), url(about:webrtc), 
	             url(https://www.mozilla.org/credits/), url(about:sessionrestore), url(about:addons), 
	             url-prefix(about:neterror), url(about:home), url(about:debugging#addons) {
	
	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:hover, .text-link:hover {
	    color: var(--primary-accent-color-dark) !important;
	}
	
	a {
	    color: var(--primary-accent-color) !important;
	}
	
	h1 {
	    color: var(--primary-light-color) !important;
	}
	
	/* about:neterror button */
	#errorTryAgain {
		background: var(--primary-accent-color) !important;
		color: var(--primary-light-color) !important;
	}
		
}

@-moz-document url-prefix(view-source) {
	*|*:root {
	  background-color: var(--primary-dark-color) !important;
	  color: var(--primary-light-color) !important;
	}
	
	.highlight .attribute-value {
	    color: var(--primary-accent-color) !important;
	}
	
	.highlight .start-tag {
	    color: var(--magenta-60) !important;
	}
	
	.highlight .error, .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) {
	    color: var(--red-60) !important;
	}
	
	.highlight .attribute-name {
	    color: var(--primary-light-color) !important;
	}

}




@-moz-document url-prefix(about:preferences) {

	page {
		filter: invert(80%) hue-rotate(150deg);
		background-color: var(--primary-dark-color) !important;
	}

	#categories, .search-container {
		background-color: white !important;
	}

	.category[selected], .category:hover {
		color: #3e8bdb !important;
		-moz-border-start: 4px solid #3e8bdb !important;
	}

	#tabsElement tab[selected] {
		-moz-border-bottom-colors: var(--primary-dark-color) !important;
	}

	.help-button {
		display: none !important;
	}

}
	


@-moz-document url(about:debugging) {
	.addon-target-container {
	    background: var(--dark-accent) !important;
	}
	
	.addon-target-button:enabled:focus, .addon-target-button:enabled:hover {
	    color: var(--primary-accent-color-dark) !important;
	}
	.addon-target-button:enabled:focus, .addon-target-button:enabled {
	    color: var(--primary-accent-color) !important;
	}
}

@-moz-document url(about:memory) {
	div.opsRow {
	    background-color: var(--dark-accent) !important;
	}
	
}

@-moz-document url(about:accounts) {
	#stage {
	    background: var(--dark-accent) !important;
	}
	
	.button-row button, .button-row a.button {
	    background: var(--primary-accent-color) !important;
	}
	
	.button-row a.button:active, .button-row a.button:hover, .button-row a.button:focus, .button-row button:active, .button-row button:hover, .button-row button:focus {
	    background: var(--primary-accent-color-dark) !important;
	}
	
	
}



@-moz-document url(about:performance) {
	
	#subprocess-reports th {
	    background-color: var(--primary-accent-color) !important;
		color: white !important;
	}
	
	#subprocess-reports td {
	    background-color: var(--primary-light-color) !important;
	}
	
}


@-moz-document url(about:profiles), url(about:url-classifier), url(about:plugins), url(about:support) {
		
	#action-box {
	    background-color: var(--dark-accent) !important;
		color: var(--primary-light-color) !important;
	}
	
	button, html|select, xul|colorpicker[type="button"], xul|menulist {
		background-color: var(--primary-accent-color) !important;
	}
	
	th {
	    background-color: var(--primary-accent-color-dark) !important;
	}
	
	td {
	    color: var(--primary-light-color) !important;
	    background-color: var(--dark-accent) !important;
	}
	
	button {
	    background-color: var(--dark-accent) !important;
	    border: 1px solid var(--primary-light-color) !important;
		color: var(--primary-light-color) !important;
	}
	
	.notice {
	    background: var(--dark-accent) !important;
	}
	
	h2 {
	    color: var(--primary-accent-color) !important;
	}
	
}

@-moz-document url(about:robots) {
	
	#errorPageContainer {
	    background-color: var(--dark-accent) !important;
	}
	
}

@-moz-document url(about:studies) {
	
	.info-box-content {
	    background-color: var(--dark-accent) !important;
	}
	
}

@-moz-document url(about:webrtc) {
	
	#content > div {
	    background: var(--dark-accent) !important;
	}
	
}

@-moz-document url(about:config) {

	#configDeck {
		background: var(--primary-dark-color) !important;
		color: var(--primary-accent-color) !important;
	}

	scrollbar {
		-moz-appearance: none !important;
		background: white !important;
	}

	thumb {
		-moz-appearance: scalethumb-vertical !important;
	}

	#textbox, tree#configTree {
		filter: invert(80%) hue-rotate(150deg);
	}
	
	button {
		background-color: var(--primary-accent-color) !important;
	    border: 1px solid var(--primary-light-color) !important;
		color: var(--primary-light-color) !important;
	}
	
	button:hover {
		background-color: var(--primary-accent-color-dark) !important;
		
	}
		
  
}

@-moz-document url(about:addons), url(about:debugging#addons) {
	
	.detail-view-container {
    	color: var(--primary-light-color) !important;
  	}
	
	.detail-row, .detail-row-complex, setting {
    	line-height: 20px;
    	text-shadow: none !important;;
  	} 
	
	.detail-view-container {
    	font-size: 1.25rem;
    	color: #ccc !important;
  	}
	
	page#addons-page, page.greasemonkey #greasemonkey-sort-bar, #list-view[type="userstyle"] #addon-list-empty[hidden] ~ #userstyle-sorting, #addons-page .global-info-container, .alert, #nav-header, #categories, #header-utils-btn, textbox#header-search {
		background: var(--primary-dark-color) !important;
		color: #ccc important;
	}

	richlistitem.category:not([selected]), #detail-contrib-description, page.greasemonkey #greasemonkey-sort-bar .text-link {
		color: #d2d2d2 !important;
	}

	.name-container {
		color: #d2d2d2 !important;
		font-weight: unset !important;
	}

	.addon[selected], .category[selected] {
		background: #565656 !important;
		-moz-border-start: 4px solid var(--primary-accent-color) !important;
	}

	#header-utils-btn:hover {
		color: white !important;
		background: #222 !important;
	}

	.addon {
		color: gray !important;
	}
	
	.addon[active="false"] {
		opacity: 0.4 !important;
	}

	richlistitem.category[selected], #main #promos.js, #featured-addons, #addons {
		background: var(--primary-dark-color) !important;
		color: var(--primary-accent-color) !important;
	}

	richlistitem.category:hover:not([selected]) {
		text-decoration: underline !important;
	}

	#view-port-container #detail-view, #view-port-container #list-view {
		filter: unset !important;
		background-color: black !important;
		color: #d2d2d2 !important;
	}

	.icon, #view-port-container #detail-view image, #view-port-container #list-view image, deck.view-pane, #detail-contributions {
		background-color: transparent !important;
	}
	
	/* Remove dotted border around addons section when selected */
	.list > scrollbox > .scrollbox-innerbox {
    	border: 1px dotted transparent !important;
  	}
	
	/* Cog wheel */
	#header-utils-btn {
    	fill: var(--primary-light-color) !important;;
  	}
	
	#header-utils-btn:hover {
		background: var(--dark-accent) !important;	
	}
	
	description {
   		margin-bottom: 4px;
    	color: var(--primary-light-color) !important;
  	}
	
	*|button, menulist {
		-moz-appearance: none !important;
		background: linear-gradient(var(--dark-accent), var(--dark-accent)) !important;
		border: 1px #444 solid !important;
		color: #999 !important;
		box-shadow: unset !important;
		text-decoration: unset !important;
	}

	*|button:hover {
		color: white !important;
		background: #222 !important;
	}

	#category-discover {
		display: none !important;
	}
	
	.addon-view[notification="warning"] {
		--view-highlight-color: transparent !important;
	}
	
	
	.text-link {
    	color: var(--primary-accent-color) !important;
  	}
	
	textbox[type="search"] {
    	color: var(--primary-light-color) !important;
  	}
	
	textbox[focused] {
    	border-color: var(--primary-accent-color) !important;;
  	}
	
	/*Dark context menu*/
  menupopup, popup, popup > menu > menupopup, menupopup > menu > menupopup {
    	-moz-appearance: none !important;
    	background: var(--dark-accent) !important;
    	
	}
    /* Remove separator */
  	menupopup menuseparator {
    	padding: 0 !important;
	}
 
  	menupopup menu, menuitem {
    	-moz-appearance: none !important;
    	color: var(--primary-light-color) !important;   
  	}
 
  	menupopup menu:hover, menuitem:hover {
    	color: var(--primary-light-color) !important;
    	background-color: #4a4a4f !important;
	 }
	
	 /* about:debugging#addons */
	 .addon-target-container {
      background: var(--grey-80) !important;;
  }
	
}





@-moz-document url-prefix(about:newtab), url(about:home) {
	
	.search-wrapper .search-label, .search-wrapper .search-button {
	    fill: var(--primary-light-color) !important;
		opacity: .7 !important;
	}

	.search-wrapper input {
	    color: var(--primary-light-color) !important;
	    background: #4a4a4f !important;
	}

	.prefs-pane-button button {
		fill: #4a4a4f !important
	}
	
	/* Preferencs/close button */   
	  .prefs-pane-button button:hover {
	    background-color: var(--grey-90) !important;;
	  }
  
  
	/* Main background */
	.prefs-pane .sidebar {
		background: var(--primary-dark-color) !important;
		border-left: 1px solid var(--primary-light-color) !important;
		color: var(--primary-light-color) !important;
	}

	/* Inner options panel */
	.prefs-pane .prefs-modal-inner-wrapper .options {
		background: #4a4a4f !important;
		border: 1px solid var(--primary-light-color);
	}

	/* Check boxes */
	.prefs-pane [type="checkbox"]:not(:checked) + label::before, .prefs-pane [type="checkbox"]:checked + label::before {
		border: 1px solid var(--primary-light-color) !important;
		background: var(--grey-90) !important;
	}

	/* Check marks */
	.prefs-pane [type="checkbox"]:not(:checked) + label::after, .prefs-pane [type="checkbox"]:checked + label::after {
		fill: var(--primary-accent-color);
	}

	/* Bottom Panel */
	.prefs-pane .actions {
		background-color: var(--primary-dark-color) !important;
		border-left: 1px solid var(--primary-light-color) !important;
		border-top: 1px solid var(--primary-light-color) !important;
	}

	/* "Done Button */
	.actions button.done {
		background: var(--primary-accent-color) !important;;
		border: solid 1px var(--primary-accent-color-dark) !important;;
		color: var(--primary-light-color) !important;
	}

	.actions button:hover:not(.dismiss) {
		box-shadow: 0 0 0 5px var(--primary-light-color) !important;
	}

	/* Search Bar */
	.search-wrapper:active input, .search-wrapper input:focus {
		border-color: var(--primary-accent-color-dark) !important;
		box-shadow: 0 0 0 2px var(--primary-accent-color) !important;
	}


	/* Onboarding Message */
	#onboarding-notification-bar {
		background: var(--grey-90) !important;
		color: var(--primary-light-color) !important;
		border-top: 2px solid var(--primary-dark-color) !important;
	}

	#onboarding-notification-body {
		color: var(--primary-light-color) !important;
	}

	.onboarding-action-button {
		background: var(--primary-accent-color) !important;
		border: 1px solid var(--primary-accent-color-dark) !important;
		color: var(--primary-light-color) !important;
	}

	#onboarding-notification-close-btn {
		filter: invert(65%)!important;
	}
	
	.contentSearchHeader, .search-wrapper .contentSearchSuggestionTable {
	    background-color: var(--grey-60) !important;
	    color: var(--primary-light-color) !important;
	    border-bottom: 1px solid var(--primary-light-color) !important;
	}

	.contentSearchSuggestionsContainer, .contentSearchHeaderRow, .contentSearchSuggestionRow, #contentSearchDefaultEngineHeader, #contentSearchSearchWithHeader {
	    background: var(--grey-60) !important;
	    color: var(--primary-light-color) !important;
	}
	
	.contentSearchSearchWithHeaderSearchText {
	    color: var(--primary-accent-color) !important;
	}
	
}