-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtomorrow-night.css
241 lines (206 loc) · 7.69 KB
/
tomorrow-night.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
/* Tomorrow Night Colors */
/*
BearTheme is bare theme for styling Adobe Brackets (Code Mirror) editor. Some elements need be overwritien, if you find comment with "may need !important", give it a try.
Good luck, have fun!
*/
/*Sidebar*/
/*General sidebar style*/
/*"Working files" header*/
/*Working files style*/
#sidebar #open-files-container ul li.selected a {
color: #81a2be; }
/*Selected working file*/
#sidebar #open-files-container ul li.selected a span.extension {
color: #81a2be; }
/*Selected working file's extension*/
/*Icon next to a file, dot, X etc.*/
/*Project file header*/
/*Browser header, path select, search, X etc.*/
/*Path select toggle*/
/*Currently selected project title*/
/*Select toggle arrow - SVG image*/
/*Close all icon*/
/*Search file icon*/
/*Project files container*/
/*Project files - WITHOUT header*/
/*Icon next to files (left side), like close/open arrow for parent element*/
/*Closed tree element*/
/*Open tree element*/
/*Project container file*/
/*Project container file hovered*/
/*Project container file's extension*/
/*Main area*/
.CodeMirror {
background: #1d1f21;
font-family: 'Source Code Pro', Monaco;
font-weight: 600; }
/*Main coding area, without line count.*/
.CodeMirror-lines {
color: #c5c8c6;
line-height: 16px; }
/*Code lines, syntax coloring has higher priority then .CodeMirror-lines*/
/*Scrollbar vertical*/
/*Brackets is based on webkit, so you can use scrollbar styling. Example below contains 8px width, grey scrollbar for the main area. You can use it with other section, just remember about z-indexes or things like 'selected' with overlap your scrollbar.*/
/*Scrollbar horizontal*/
.CodeMirror .CodeMirror-scroll .CodeMirror-gutters {
background: #1d1f21; }
/*Left vertical bar with line count*/
/*Left bar with line count - it will affect global line count, BUT line count in inline editor won't be changed.*/
/*Line count bar only, without "gutter"*/
/*It's exactly .CodeMirror-gutter{} without .CodeMirror-linenumbers{}.*/
.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
background: rgba(255, 255, 255, 0.07); }
/*active line number*/
/*Syntax elements & action*/
.CodeMirror .cm-atom {
color: #8abeb7; }
/*Atribbute value ex. #f00 in color:#f00;*/
.CodeMirror .cm-def {
color: #c5c8c6; }
/*variable definition*/
.CodeMirror .cm-number {
color: #de935f; }
/*Numbers*/
.CodeMirror .cm-variable {
color: #de935f; }
/*Variable name ex. class Variable_name */
.CodeMirror .cm-variable-2 {
color: #81a2be; }
/*Variable declaration ex. $variable */
.CodeMirror .cm-property {
color: #f0c674; }
/*Property ex. color in color:#f00;*/
.CodeMirror .cm-operator {
color: #c5c8c6; }
/*Operators ex. dots (:) between property and atom value */
.CodeMirror .cm-comment {
color: #969896; }
/*Comment*/
.CodeMirror .cm-string {
color: #b5bd68; }
/*String elements ex. "description" in name="description" - including quotation*/
.CodeMirror .cm-meta {
color: #cc6666; }
/*Meta elements like ex.: <!DOCTYPE html>*/
.CodeMirror .cm-qualifier {
color: #cc6666; }
/*Final qualifier like css class ex.: .cm-qualifier*/
.CodeMirror .cm-tag {
color: #b294bb; }
/*Tags ex. ul or <ul>*/
.CodeMirror .cm-attribute {
color: #de935f; }
/*Attribute ex. rel, href, name*/
.CodeMirror .cm-keyword {
color: #b294bb; }
/*Element call ex. array, class, public function, if, elseif, !important*/
.CodeMirror .CodeMirror-matchingtag {
border-bottom: 1px solid #66476f;
color: #b294bb !important;
background: rgba(0, 0, 0, 0) !important; }
/*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/
div.CodeMirror span.CodeMirror-matchingbracket {
border-bottom: 1px solid #777d79;
color: #c5c8c6 !important; }
/*Matching brackets, open/close*/
.CodeMirror-selected {
background: #35393c !important; }
/*Selected lines - may need !important*/
.CodeMirror-activeline-background {
background-color: rgba(0, 0, 0, 0) !important; }
/*Active line - may need !important*/
div.CodeMirror span.CodeMirror-searching {
background: #cc6666 !important;
color: #1d1f21 !important;
padding: 1px 5px; }
/*Search result highlight- may need !important*/
.CodeMirror-cursor {
border-left: 1px solid #b5bd68 !important; }
/*Status bar - bottom*/
#status-bar {
background-color: #3B3F41;
color: #c5c8c6; }
/*Bottom status bar*/
/*Line & column info*/
/*Second part of the status bar*/
/*Indent status info*/
/*Language info*/
/*File size*/
/*File path*/
/*Status bar - ex. debug area*/
/*Bottom error panel main wrapper*/
/*Error panel toolbar with title and X*/
/*Error panel toolbar title eg. "JSLint Errors"*/
/*X to close error panel*/
/*Table container with errors*/
/*Table with errors - additional classes for look: table-striped table-condensed row-highlight, fimilar for people working with Boostrap*/
/*Single row containing line number, "error" message and code info*/
/*Line number for error row*/
/*There are no separated classes for error and code excerpt, the only hint I can give is: error is second child and excerpt is 3rd chaild of tr.*/
/*Right toolbar - live preview, extensions*/
/*Whole toolbar*/
/*Buttons group*/
/*Modal windows like context-menu, quick-view or hint container*/
/*Dropdown menu, available under right-click - may need !important*/
/*Single option, treat it like <li> ex. background*/
/*If you need different dropdown style for different sections, use IDs below.*/
/*Dropdown menu for project files section*/
/*Dropdown menu for editor section*/
/*Dropdown menu for inline editor like Quick Edit*/
/*--back to general--*/
/*Code hint menu, dropdown visible when writing code.*/
/*Code hint menu option, dropdown visible when writing code. Treat like <li>*/
/*Single hint in dropdown menu, automaticlly puts already typed text into <strong>*/
/*Inline editor(Ex. Quick Edit - Ctrl + E)*/
.inline-widget {
background: #111213;
margin: 4px 0;
color: #c5c8c6;
text-shadow: none !important; }
/*Inline widget wrap, won't affect line count bar*/
.inline-text-editor {
color: #c5c8c6; }
/*Whole editing area - without active rule*/
/*Code lines in inline editor, syntax coloring has higher priority then .CodeMirror-lines*/
.inline-editor-header {
color: #c5c8c6; }
/*Inline text editor header, includes info about inline editor file*/
.inline-editor-header a.filename {
color: #c5c8c6 !important; }
/*Filename visible in inline editor - may need !important*/
.inline-editor-header a.filename span.line-number {
color: #c5c8c6 !important; }
/*Line number next to filename - may need !important*/
/*Button responsible for "New rule"*/
/*Global rules apply to inline editor scroll, just use .inline-widget class to target only bar options of this area. Example below.*/
/*Inline editor "gutter", won't affect line count in inline editor*/
/*Inline editor line numbers bar - no "gutter"*/
/*Related container with similar rules*/
/*Currently selected style rule*/
/*Currently selected style rule from related container - text*/
/*List element with rule*/
/*File information for rule*/
/*Inline widget - extended color picker*/
/*Extended color editor area*/
.inline-widget .gradient-overlay, .inline-widget .luminosity-gradient {
border-bottom: 0 !important; }
/*Color selection square - big one*/
/*Hue slider*/
/*Opacity slider*/
/*Input for color value*/
/*Buttons for RGBa, HEX, HSLA*/
.inline-widget .color-editor ul.button-bar li a {
border: 1px solid #c5c8c6 !important; }
/*Single buttons <li>*/
/*RGBa button*/
/*HEX button*/
/*HSLA button*/
/*Big swatches with currently picked and original color*/
/*Current color swatch*/
/*Original color swatch*/
.inline-widget .color-editor ul.swatches {
border-bottom: 0 !important;
box-shadow: 0 !important; }
/*Small swatches with color suggestions*/
/*Swatch sample*/
/*Swatch label with color value*/