This repository has been archived by the owner on May 22, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
BearTheme.css
166 lines (131 loc) · 10.8 KB
/
BearTheme.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
/*
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*/
#sidebar{} /*General sidebar style*/
#sidebar #working-set-header{} /*"Working files" header*/
#sidebar #open-files-container{} /*Working files style*/
#sidebar #open-files-container ul li.selected a{} /*Selected working file*/
#sidebar #open-files-container ul li.selected a span.extension{} /*Selected working file's extension*/
#sidebar #open-files-container ul li .file-status-icon{} /*Icon next to a file, dot, X etc.*/
/*Project file header*/
#sidebar #project-files-header{} /*Browser header, path select, search, X etc.*/
#sidebar #project-files-header #project-dropdown-toggle{} /*Path select toggle*/
#sidebar #project-files-header #project-dropdown-toggle #project-title{} /*Currently selected project title*/
#sidebar #project-files-header #project-dropdown-toggle .dropdown-arrow{} /*Select toggle arrow - SVG image*/
#sidebar #project-files-header #closeAllFolders{} /*Close all icon*/
#sidebar #project-files-header #search-files-button{} /*Search file icon*/
/*Project files container*/
#sidebar #project-files-container{} /*Project files - WITHOUT header*/
#sidebar #project-files-container .jstree-icon{} /*Icon next to files (left side), like close/open arrow for parent element*/
#sidebar #project-files-container li.jstree-closed{} /*Closed tree element*/
#sidebar #project-files-container li.jstree-open{} /*Open tree element*/
#sidebar #project-files-container ul li a{} /*Project container file*/
#sidebar #project-files-container ul li a.jstree-hovered{} /*Project container file hovered*/
#sidebar #project-files-container ul li a span.extension{} /*Project container file's extension*/
/*Main area*/
.CodeMirror{}/*Main coding area, without line count.*/
.CodeMirror-lines{}/*Code lines, syntax coloring has higher priority then .CodeMirror-lines*/
.CodeMirror div.CodeMirror-cursor { border-left: 1px solid white; z-index: 3;} /*Cursor stling*/
.CodeMirror div.CodeMirror-secondarycursor {} /* Shown when moving in bi-directional text - from CM docs*/
/*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.*/
.CodeMirror .CodeMirror-vscrollbar{ width: 8px; bottom:8px !important;} /*Scrollbar vertical. These values MUST be the same as height/width of scrollbars*/
.CodeMirror .CodeMirror-hscrollbar{ height:8px; right:8px !important;} /*Scrollbar horizontal. These values MUST be the same as height/width of scrollbars*/
.CodeMirror ::-webkit-scrollbar { width: 8px; height:8px;} /* The width of vertical scrollbars and height of horizontal scrollbars*/
.CodeMirror ::-webkit-scrollbar-track {background: none;} /* The track that scrollbars run in */
.CodeMirror ::-webkit-scrollbar-thumb {background: #a5a4a4; border-radius: 4px} /* The scrollbar thumb */
.CodeMirror-scrollbar-filler {height:8px !important; width:8px !important; background:none;} /* Corner where scrollbars meet. Width and height MUST be the same as that of scrollbars. Background should be the same as that of the scrollbar track*/
.CodeMirror-gutter-filler{ height:8px !important;} /* Linenumber area left of horizontal scrollbar. Height MUST be the same as width/height of scrollbars */
.CodeMirror .CodeMirror-scroll .CodeMirror-gutters{}/*Left vertical bar with line count*/
.CodeMirror-gutter{} /*Left bar with line count - it will affect global line count, BUT line count in inline editor won't be changed.*/
.CodeMirror-linenumbers{} /*Line count bar only, without "gutter"*/
.CodeMirror-foldgutter{} /*It's exactly .CodeMirror-gutter{} without .CodeMirror-linenumbers{}.*/
/*Syntax elements & action*/
.CodeMirror .cm-atom{} /*Atribbute value ex. #f00 in color:#f00;*/
.CodeMirror .cm-def{} /*variable definition*/
.CodeMirror .cm-number{} /*Numbers*/
.CodeMirror .cm-variable{} /*Variable name ex. class Variable_name */
.CodeMirror .cm-variable-2{} /*Variable declaration ex. $variable */
.CodeMirror .cm-property{} /*Property ex. color in color:#f00;*/
.CodeMirror .cm-operator{} /*Operators ex. dots (:) between property and atom value */
.CodeMirror .cm-comment{} /*Comment*/
.CodeMirror .cm-string{} /*String elements ex. "description" in name="description" - including quotation*/
.CodeMirror .cm-meta{} /*Meta elements like ex.: <!DOCTYPE html>*/
.CodeMirror .cm-qualifier{} /*Final qualifier like css class ex.: .cm-qualifier*/
.CodeMirror .cm-tag{} /*Tags ex. ul or <ul>*/
.CodeMirror .cm-attribute{} /*Attribute ex. rel, href, name*/
.CodeMirror .cm-keyword {} /*Element call ex. array, class, public function, if, elseif, !important*/
.CodeMirror .cm-matchingtag{}
.CodeMirror .CodeMirror-matchingtag{} /*Matching tags, open/close. Try !important for color etc. if it doesn't work. DON'T use background property, it may break your cursor visibility.*/
div.CodeMirror span.CodeMirror-matchingbracket{} /*Matching brackets, open/close. DON'T use background property, it may break your cursor visibility.*/
.CodeMirror-selected{} /*Selected lines - may need !important*/
.CodeMirror-activeline-background{} /*Active line - may need !important*/
.CodeMirror-gutter-elt{} /*Active line, line count section*/
div.CodeMirror span.CodeMirror-searching{} /*Search result highlight- may need !important*/
/*Status bar - bottom*/
#status-bar{}/*Bottom status bar*/
#status-bar #status-info{}/*Line & column info*/
#status-bar #status-indicators{}/*Second part of the status bar*/
#status-bar #status-indicators{} #status-indent{} /*Indent status info*/
#status-bar #status-indicators{} #status-language{} /*Language info*/
#status-bar #status-indicators{} #fileSizeInfo{} /*File size*/
#status-bar #status-indicators{} #filePathInfo{} /*File path*/
/*Status bar - ex. debug area*/
#problems-panel{} /*Bottom error panel main wrapper*/
#problems-panel .toolbar{} /*Error panel toolbar with title and X*/
#problems-panel .toolbar .title{} /*Error panel toolbar title eg. "JSLint Errors"*/
#problems-panel .toolbar .close{} /*X to close error panel*/
#problems-panel .toolbar .table-container{} /*Table container with errors*/
#problems-panel .table .tbody{} /*Table with errors - additional classes for look: table-striped table-condensed row-highlight, fimilar for people working with Boostrap*/
#problems-panel .table .tbody tr{} /*Single row containing line number, "error" message and code info*/
#problems-panel .table .tbody tr td.line-number{} /*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*/
#main-toolbar{} /*Whole toolbar*/
#main-toolbar .buttons{} /*Buttons group*/
/*Modal windows like context-menu, quick-view or hint container*/
#context-menu-bar .dropdown-menu{} /*Dropdown menu, available under right-click - may need !important*/
#context-menu-bar .dropdown-menu a{} /*Single option, treat it like <li> ex. background*/
#context-menu-bar .dropdown-menu a:hover{} /*Single option, treat it like <li> ex. background - hover state. RGBA is not working!*/
/*If you need different dropdown style for different sections, use IDs below.*/
#context-menu-bar #project-context-menu .dropdown-menu{} /*Dropdown menu for project files section*/
#context-menu-bar #editor-context-menu .dropdown-menu{} /*Dropdown menu for editor section*/
#context-menu-bar #inline-editor-context-menu .dropdown-menu{} /*Dropdown menu for inline editor like Quick Edit*/
/*--back to general--*/
#codehint-menu-bar .dropdown-menu{} /*Code hint menu, dropdown visible when writing code.*/
#codehint-menu-bar .dropdown-menu li a{} /*Code hint menu option, dropdown visible when writing code. Treat like <li>*/
#codehint-menu-bar .dropdown-menu li a span.code-hint-item{} /*Single hint in dropdown menu, automaticlly puts already typed text into <strong>*/
/*Inline editor(Ex. Quick Edit - Ctrl + E)*/
.inline-widget{} /*Inline widget wrap, won't affect line count bar*/
.inline-text-editor{} /*Whole editing area - without active rule*/
.inline-text-editor .CodeMirror-lines{}/*Code lines in inline editor, syntax coloring has higher priority then .CodeMirror-lines*/
.inline-editor-header{} /*Inline text editor header, includes info about inline editor file*/
.inline-editor-header a.filename{} /*Filename visible in inline editor - may need !important*/
.inline-editor-header a.filename span.line-number{} /*Line number next to filename - may need !important*/
.inline-editor-header button.btn{} /*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-widget .CodeMirror-gutter{} /*Inline editor "gutter", won't affect line count in inline editor*/
.inline-widget .CodeMirror-linenumbers{} /*Inline editor line numbers bar - no "gutter"*/
.inline-widget .related-container{} /*Related container with similar rules*/
.inline-widget .related-container .selection {} /*Currently selected style rule*/
.inline-widget .related-container ul li.selected {} /*Currently selected style rule from related container - text*/
.inline-widget .related-container .related ul li{} /*List element with rule*/
.inline-widget .related-container .related ul li .related-file{} /*File information for rule*/
/*Inline widget - extended color picker*/
.inline-widget .color-editor{} /*Extended color editor area*/
.inline-widget .color-editor .sliders .color-selection-field{} /*Color selection square - big one*/
.inline-widget .color-editor .hue-slider{} /*Hue slider*/
.inline-widget .color-editor .opacity-slider{} /*Opacity slider*/
.inline-widget .color-editor input.color-value{} /*Input for color value*/
.inline-widget .color-editor ul.button-bar{} /*Buttons for RGBa, HEX, HSLA*/
.inline-widget .color-editor ul.button-bar li a{} /*Single buttons <li>*/
.inline-widget .color-editor ul.button-bar li a.rgba{} /*RGBa button*/
.inline-widget .color-editor ul.button-bar li a.hex{} /*HEX button*/
.inline-widget .color-editor ul.button-bar li a.hsla{} /*HSLA button*/
.inline-widget .color-editor .large-swatches{} /*Big swatches with currently picked and original color*/
.inline-widget .color-editor .large-swatches .current-color{} /*Current color swatch*/
.inline-widget .color-editor .large-swatches .original-color{} /*Original color swatch*/
.inline-widget .color-editor ul.swatches{} /*Small swatches with color suggestions*/
.inline-widget .color-editor ul.swatches li .swatch-bg{} /*Swatch sample*/
.inline-widget .color-editor ul.swatches li span.value{} /*Swatch label with color value*/