• file
• revisions
• annotate
• diff
• comparison
• raw

browser/themes/shared/devtools/dark-theme.css@6474c204b198 (annotated)

browser/themes/shared/devtools/dark-theme.css

Wed, 31 Dec 2014 06:09:35 +0100

author

Michael Schloh von Bennewitz <michael@schloh.com>

date

Wed, 31 Dec 2014 06:09:35 +0100

changeset 0

6474c204b198

permissions

-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0	1	/* vim:set ts=2 sw=2 sts=2 et: */
michael@0	2	/* This Source Code Form is subject to the terms of the Mozilla Public
michael@0	3	* License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0	4	* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0	5
michael@0	6	/* According to:
michael@0	7	* https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
michael@0	8	*/
michael@0	9	.theme-body {
michael@0	10	background: #14171a;
michael@0	11	color: #a9bacb;
michael@0	12	}
michael@0	13
michael@0	14	.theme-sidebar {
michael@0	15	background: #181d20;
michael@0	16	color: #a9bacb;
michael@0	17	}
michael@0	18
michael@0	19	::-moz-selection {
michael@0	20	background-color: #1d4f73;
michael@0	21	color: #f5f7fa;
michael@0	22	}
michael@0	23
michael@0	24	.theme-bg-darker {
michael@0	25	background-color: rgba(0,0,0,0.5);
michael@0	26	}
michael@0	27
michael@0	28	.theme-selected {
michael@0	29	background-color: #1d4f73;
michael@0	30	color: #f5f7fa; /* Light foreground text */
michael@0	31	}
michael@0	32
michael@0	33	.theme-bg-contrast,
michael@0	34	.variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
michael@0	35	background: #a18650;
michael@0	36	}
michael@0	37
michael@0	38	.theme-link,
michael@0	39	.cm-s-mozilla .cm-link { /* blue */
michael@0	40	color: #3689b2;
michael@0	41	}
michael@0	42
michael@0	43	/*
michael@0	44	* FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
michael@0	45	* failures in debug builds.
michael@0	46	*/
michael@0	47	.theme-link:visited,
michael@0	48	.cm-s-mozilla .cm-link:visited { /* blue */
michael@0	49	color: #3689b2;
michael@0	50	}
michael@0	51
michael@0	52
michael@0	53	.theme-comment,
michael@0	54	.cm-s-mozilla .cm-meta,
michael@0	55	.cm-s-mozilla .cm-hr,
michael@0	56	.cm-s-mozilla .cm-comment,
michael@0	57	.variable-or-property .token-undefined,
michael@0	58	.variable-or-property .token-null { /* grey */
michael@0	59	color: #5c6773;
michael@0	60	}
michael@0	61
michael@0	62	.theme-gutter {
michael@0	63	background-color: #0f171f;
michael@0	64	color: #667380;
michael@0	65	border-color: #303b47;
michael@0	66	}
michael@0	67
michael@0	68	.theme-separator { /* grey */
michael@0	69	border-color: #303b47;
michael@0	70	}
michael@0	71
michael@0	72	.theme-fg-color1,
michael@0	73	.cm-s-mozilla .cm-number,
michael@0	74	.variable-or-property .token-number,
michael@0	75	.variable-or-property[return] > .title > .name,
michael@0	76	.variable-or-property[scope] > .title > .name { /* green */
michael@0	77	color: #5c9966;
michael@0	78	}
michael@0	79
michael@0	80	.theme-fg-color2,
michael@0	81	.cm-s-mozilla .cm-attribute,
michael@0	82	.cm-s-mozilla .cm-variable,
michael@0	83	.cm-s-mozilla .cm-def,
michael@0	84	.cm-s-mozilla .cm-property,
michael@0	85	.cm-s-mozilla .cm-qualifier,
michael@0	86	.variables-view-variable > .title > .name { /* blue */
michael@0	87	color: #3689b2;
michael@0	88	}
michael@0	89
michael@0	90	.theme-fg-color3,
michael@0	91	.cm-s-mozilla .cm-builtin,
michael@0	92	.cm-s-mozilla .cm-tag,
michael@0	93	.cm-s-mozilla .cm-header,
michael@0	94	.variables-view-property > .title > .name { /* pink/lavender */
michael@0	95	color: #a673bf;
michael@0	96	}
michael@0	97
michael@0	98	.theme-fg-color4 { /* purple/violet */
michael@0	99	color: #6270b2;
michael@0	100	}
michael@0	101
michael@0	102	.theme-fg-color5,
michael@0	103	.cm-s-mozilla .cm-bracket,
michael@0	104	.cm-s-mozilla .cm-keyword { /* Yellow */
michael@0	105	color: #a18650;
michael@0	106	}
michael@0	107
michael@0	108	.theme-fg-color6,
michael@0	109	.cm-s-mozilla .cm-string,
michael@0	110	.cm-s-mozilla .cm-string-2,
michael@0	111	.variable-or-property .token-string { /* Orange */
michael@0	112	color: #b26b47;
michael@0	113	}
michael@0	114
michael@0	115	.theme-fg-color7,
michael@0	116	.cm-s-mozilla .cm-atom,
michael@0	117	.cm-s-mozilla .cm-quote,
michael@0	118	.cm-s-mozilla .cm-error,
michael@0	119	.variable-or-property .token-boolean,
michael@0	120	.variable-or-property .token-domnode,
michael@0	121	.variable-or-property[exception] > .title > .name { /* Red */
michael@0	122	color: #bf5656;
michael@0	123	}
michael@0	124
michael@0	125	.variable-or-property .token-domnode {
michael@0	126	font-weight: bold;
michael@0	127	}
michael@0	128
michael@0	129	.theme-toolbar,
michael@0	130	.devtools-toolbar,
michael@0	131	.devtools-sidebar-tabs > tabs,
michael@0	132	.CodeMirror-dialog { /* General toolbar styling */
michael@0	133	color: #b6babf;
michael@0	134	background-color: #343c45;
michael@0	135	border-color: hsla(210,8%,5%,.6);
michael@0	136	}
michael@0	137
michael@0	138	.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
michael@0	139	color: black;
michael@0	140	}
michael@0	141
michael@0	142	.ruleview-colorswatch,
michael@0	143	.computedview-colorswatch,
michael@0	144	.markupview-colorswatch {
michael@0	145	box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
michael@0	146	}
michael@0	147
michael@0	148	/* CodeMirror specific styles.
michael@0	149	* Best effort to match the existing theme, some of the colors
michael@0	150	* are duplicated here to prevent weirdness in the main theme. */
michael@0	151
michael@0	152	.CodeMirror { /* Inherit platform specific font sizing and styles */
michael@0	153	font-family: inherit;
michael@0	154	font-size: inherit;
michael@0	155	background: transparent;
michael@0	156	}
michael@0	157
michael@0	158	.CodeMirror pre,
michael@0	159	.cm-s-mozilla .cm-variable-2,
michael@0	160	.cm-s-mozilla .cm-variable-3,
michael@0	161	.cm-s-mozilla .cm-operator,
michael@0	162	.cm-s-mozilla .cm-special { /* theme-body color */
michael@0	163	color: #a9bacb;
michael@0	164	}
michael@0	165
michael@0	166	.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
michael@0	167	border-left: solid 1px #fff;
michael@0	168	}
michael@0	169
michael@0	170	.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
michael@0	171	background: rgb(185, 215, 253);
michael@0	172	}
michael@0	173
michael@0	174	.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
michael@0	175	background: rgb(176, 176, 176);
michael@0	176	}
michael@0	177
michael@0	178	.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
michael@0	179	background: rgba(185, 215, 253, .15);
michael@0	180	}
michael@0	181
michael@0	182	div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
michael@0	183	outline: solid 1px rgba(255, 255, 255, .25);
michael@0	184	color: white;
michael@0	185	}
michael@0	186
michael@0	187	/* Highlight for a line that contains an error. */
michael@0	188	div.CodeMirror div.error-line {
michael@0	189	background: rgba(255,0,0,0.2);
michael@0	190	}
michael@0	191
michael@0	192	/* Highlight for a line that represents a stack frame's location. */
michael@0	193	div.CodeMirror div.debug-line {
michael@0	194	background: rgba(0,128,255,0.1);
michael@0	195	box-shadow:
michael@0	196	0 1px 0 0 rgba(0,128,255,0.4),
michael@0	197	0 -1px 0 0 rgba(0,128,255,0.4);
michael@0	198	}
michael@0	199
michael@0	200	/* Generic highlighted text */
michael@0	201	div.CodeMirror span.marked-text {
michael@0	202	background: rgba(255,255,0,0.2);
michael@0	203	border: 1px dashed rgba(192,192,0,0.6);
michael@0	204	-moz-margin-start: -1px;
michael@0	205	-moz-margin-end: -1px;
michael@0	206	}
michael@0	207
michael@0	208	/* Highlight for evaluating current statement. */
michael@0	209	div.CodeMirror span.eval-text {
michael@0	210	background-color: #556;
michael@0	211	}
michael@0	212
michael@0	213	.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
michael@0	214	color: #5f7387;
michael@0	215	}
michael@0	216
michael@0	217	.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
michael@0	218	border-right-color: #343c45;
michael@0	219	background-color: #181d20;
michael@0	220	}
michael@0	221
michael@0	222	.cm-s-markup-view pre {
michael@0	223	line-height: 1.4em;
michael@0	224	min-height: 1.4em;
michael@0	225	}
michael@0	226
michael@0	227	/* Twisty and checkbox controls */
michael@0	228	.theme-twisty, .theme-checkbox {
michael@0	229	width: 14px;
michael@0	230	height: 14px;
michael@0	231	background-repeat: no-repeat;
michael@0	232	background-image: url("chrome://browser/skin/devtools/controls.png");
michael@0	233	background-size: 56px 28px;
michael@0	234	}
michael@0	235
michael@0	236	.theme-twisty {
michael@0	237	cursor: pointer;
michael@0	238	background-position: -28px -14px;
michael@0	239	}
michael@0	240
michael@0	241	.theme-twisty:-moz-focusring {
michael@0	242	outline-style: none;
michael@0	243	}
michael@0	244
michael@0	245	.theme-twisty[open] {
michael@0	246	background-position: -42px -14px;
michael@0	247	}
michael@0	248
michael@0	249	.theme-checkbox {
michael@0	250	display: inline-block;
michael@0	251	border: 0;
michael@0	252	padding: 0;
michael@0	253	outline: none;
michael@0	254	background-position: -28px 0;
michael@0	255	}
michael@0	256
michael@0	257	.theme-checkbox[checked] {
michael@0	258	background-position: -42px 0;
michael@0	259	}
michael@0	260
michael@0	261	@media (min-resolution: 2dppx) {
michael@0	262	.theme-twisty, .theme-checkbox {
michael@0	263	background-image: url("chrome://browser/skin/devtools/controls@2x.png");
michael@0	264	}
michael@0	265	}
michael@0	266
michael@0	267	/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
michael@0	268
michael@0	269	.theme-tooltip-panel .panel-arrowcontent {
michael@0	270	padding: 5px;
michael@0	271	background: rgba(19, 28, 38, .9);
michael@0	272	border-radius: 5px;
michael@0	273	box-shadow: none;
michael@0	274	border: 3px solid #434850;
michael@0	275	}
michael@0	276
michael@0	277	/* Overring panel arrow images to fit with our light and dark themes */
michael@0	278
michael@0	279	.theme-tooltip-panel .panel-arrow[side="top"] {
michael@0	280	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
michael@0	281	margin-bottom: -4px;
michael@0	282	}
michael@0	283
michael@0	284	.theme-tooltip-panel .panel-arrow[side="bottom"] {
michael@0	285	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
michael@0	286	margin-top: -4px;
michael@0	287	}
michael@0	288
michael@0	289	.theme-tooltip-panel .panel-arrow[side="left"] {
michael@0	290	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
michael@0	291	margin-right: -4px;
michael@0	292	}
michael@0	293
michael@0	294	.theme-tooltip-panel .panel-arrow[side="right"] {
michael@0	295	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
michael@0	296	margin-left: -4px;
michael@0	297	}
michael@0	298
michael@0	299	@media (min-resolution: 2dppx) {
michael@0	300	.theme-tooltip-panel .panel-arrow[side="top"],
michael@0	301	.theme-tooltip-panel .panel-arrow[side="bottom"] {
michael@0	302	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
michael@0	303	}
michael@0	304
michael@0	305	.theme-tooltip-panel .panel-arrow[side="left"],
michael@0	306	.theme-tooltip-panel .panel-arrow[side="right"] {
michael@0	307	list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
michael@0	308	}
michael@0	309	}
michael@0	310
michael@0	311	.theme-tooltip-panel .devtools-tooltip-simple-text {
michael@0	312	color: white;
michael@0	313	border-bottom: 1px solid #434850;
michael@0	314	}
michael@0	315
michael@0	316	.theme-tooltip-panel .devtools-tooltip-font-previewer-text {
michael@0	317	color: white;
michael@0	318	}
michael@0	319
michael@0	320	.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
michael@0	321	border-bottom: 0;
michael@0	322	}
michael@0	323
michael@0	324	.devtools-horizontal-splitter {
michael@0	325	border-bottom: 1px solid black;
michael@0	326	}
michael@0	327
michael@0	328	.devtools-side-splitter {
michael@0	329	-moz-border-end: 1px solid black;
michael@0	330	border-color: black; /* Needed for responsive container at low width. */
michael@0	331	}
michael@0	332
michael@0	333	.devtools-textinput,
michael@0	334	.devtools-searchinput {
michael@0	335	background-color: rgba(24, 29, 32, 1);
michael@0	336	color: rgba(184, 200, 217, 1);
michael@0	337	}
michael@0	338
michael@0	339	%include toolbars.inc.css