Created
December 14, 2015 21:53
-
-
Save dancingfrog/3bdb7d9727466abb658a to your computer and use it in GitHub Desktop.
Brackets Theme Boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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 .CodeMirror-vscrollbar{} /*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.*/ | |
| .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar {width: 8px;} | |
| .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar-track {background: none;} | |
| .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {background: #a5a4a4;} | |
| .CodeMirror .CodeMirror-hscrollbar{} /*Scrollbar horizontal*/ | |
| .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-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 bg, color etc. if it doesn't work*/ | |
| div.CodeMirror span.CodeMirror-matchingbracket{} /*Matching brackets, open/close*/ | |
| .CodeMirror-selected{} /*Selected lines - may need !important*/ | |
| .CodeMirror-activeline-background{} /*Active line - may need !important*/ | |
| 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*/ | |
| /*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*/ | |
| /*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*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment