Stylish aTheme.css

/* AGENT SHEET */
@-moz-document url-prefix("about:stylish-edit"),url-prefix("data:text/html") {

/* BUTTON LAYOUT */
#stylish-edit.theme-body #save-button {
  -moz-box-ordinal-group: 0;
  margin-left: 5px !important;
  margin-right: 5px !important
  }

#stylish-edit.theme-body #preview-button {
  -moz-box-ordinal-group: 1;
  margin-right: 5px !important
  }

#stylish-edit.theme-body #check-for-errors-button {
  -moz-box-ordinal-group: 2;
  margin-right: 5px !important
  }

#stylish-edit.theme-body #wrap-lines {
  -moz-box-ordinal-group: 3;
  margin-left: 5px !important
  }

#stylish-edit.theme-body .devtools-separator {
  -moz-box-ordinal-group: 4;
  -moz-box-flex: 4;
  background: transparent !important
  }

#stylish-edit.theme-body button[label="Insert"] {
  -moz-box-ordinal-group: 5;
  margin-right: 5px !important
  }

  
 /* BACKGROUND & TOOLBAR MARGINS */
#editor, .CodeMirror-dialog, .devtools-monospace,
.CodeMirror-gutter.CodeMirror-foldgutter,
.CodeMirror-gutter.CodeMirror-linenumbers {
  background: #141414 !important
  }

.devtools-monospace {
  margin-left: 0px !important
  }

.CodeMirror-gutter.CodeMirror-foldgutter {
  border-right: 1px solid rgb(119,119,119) !important
  }


/* FONTS */
.devtools-monospace {
  font: normal 13px "lucida console", "dejavu sans mono" !important
  }
.CodeMirror-code {
  line-height: 12px !important
  }


/* CURSOR */
* {
  cursor: default
  }

  
/* BUTTONS */
#save-button,
#preview-button,
#check-for-errors-button,
#editor-tools button[label="Insert"] {
  color: #000 !important;
  border-radius: 0px !important;
  -moz-appearance: none !important;
  background: #BFBFBF !important
  }
#save-button:not([disabled="true"]):hover,
#preview-button:not([disabled="true"]):hover,
#check-for-errors-button:not([disabled="true"]):hover,
#editor-tools button[label="Insert"]:hover {
  color: #000 !important;
  background: #B4B4B4 !important
  }
#save-button:active,
#preview-button:active,
#check-for-errors-button:active,
#editor-tools button[label="Insert"]:active {
  color: #000 !important;
  background: #D1D1D1 !important
  }
#save-button:hover,
#preview-button:hover,
#check-for-errors-button:hover,
#editor-tools button[label="Insert"]:hover {
  color: #000 !important;
  background: #B4B4B4 !important
  }
window[sizemode="normal"] :-moz-any(#save-button, #preview-button, #check-for-errors-button),
window[sizemode="normal"] #editor-tools button[label="Insert"] {
  margin-top: 4px !important
  }
#save-button, #preview-button, button[label="Insert"], #check-for-errors-button {
  outline-color: transparent !important
  }

.devtools-toolbarbutton hbox {
  border-color: transparent !important
  }

/* SHORTENS BUTTON CHECK FOR ERRORS LABEL */
#check-for-errors-button > hbox:after {
  content: 'Check Errors';
  display: -moz-box;
  color: #000;
  margin-right: -3px
  }
#check-for-errors-button > hbox:before {
  content: '__';
  display: -moz-box;
  color: #333;
  font: normal 10px "Segoe UI";
  margin: 0 -8px -3px -1px
  }
#check-for-errors-button {
  margin-right: 1px !important
  }
#check-for-errors-button > hbox > children > label {
  display: none
  }
#check-for-errors-button:not([disabled="true"]):hover hbox:after {
  color: #000
  }
#check-for-errors-button:not([disabled="true"]):hover hbox:before {
  color: #333
  }


/* TWEAKS INSERT LABEL */
button[label="Insert"] .dropmarker-icon {
  margin-right:  -6px !important
  }
button[label="Insert"] .button-text{
  margin-right:  -12px !important
  }


/* SHORTENS WRAP LINES LABEL */
#wrap-lines > image {
  margin-right: 2px;
  opacity: .8;
  -moz-appearance: none !important
  }
#main-area #wrap-lines {
  margin: 0 -1px 0 -3px !important
  }
#main-area #wrap-lines > hbox > label {
  display: none
  }
#main-area #wrap-lines > hbox:after {
  content: 'Wrap';
  display: -moz-box;
  color: #dcdcdc;
  margin: 0 0px 0 -1px
  }
#main-area #wrap-lines > hbox:before {
  content: '__';
  display: -moz-box;
  color: #c8c8c8;
  margin: 3px -10px 0 0;
  font: normal 10px "Segoe UI"
  }


/* COLLAPSIBLE CODE */
.CodeMirror-foldgutter-open.CodeMirror-guttermarker-subtle {
  font-weight: bold !important;
  color: rgb(160,160,160) !important
  }
.CodeMirror-foldgutter-folded.CodeMirror-guttermarker-subtle {
  font-weight: bold !important;
  color: red !important
  }
.CodeMirror-foldmarker {
  font-size: 18px !important;
  color: white !important;
  padding-left: 1px !important;
  padding-right: 1px !important
  }
  
  
/* ERRORS POPUP */
#main-area #errors {
  max-height:200px !important;
  min-height: 24px !important;
  padding: 4px 0px !important;
  background: #333333 !important
  }
#main-area #errors > label {
  color: rgb(250,10,0) !important;
  font: normal 14px/14px Tahoma, Geneva, sans-serif !important;
  font: normal 12px/13px "Segoe UI" /*original style*/
  }
#main-area #errors > label:nth-child(1) {
  margin-top: -1px !important
  }
#main-area #errors > label:hover {
  color: rgb(210,210,210) !important
  }
  
  
/* AUTOCOMPLETE POPUP */
.devtools-autocomplete-popup {
  border: none !important;
  background: #313131 !important
  }
.devtools-autocomplete-popup > richlistbox > richlistitem[selected] > label.autocomplete-value {
  color: #4cd2ff !important
  }
.devtools-autocomplete-popup > richlistbox > richlistitem[selected] {
  background-color:rgba(255,255,255,.20) !important
  }
.devtools-autocomplete-popup > richlistbox > richlistitem:hover:not([selected]) {
  background-color: transparent !important
  }
.devtools-autocomplete-popup > richlistbox > richlistitem > label {
  color: #99b3ff !important
  }


/* FINDBAR POPUP & RESULTS */
.CodeMirror-dialog {
  padding-left: 10px !important;
  color:  #aaa !important;
  font: normal 90% "lucida console" !important;
  border-color: rgba(20,20,20,.7) !important
  }
.CodeMirror-dialog input {
  width: 85% !important;
  padding: 0px 0 !important;
  margin-left: 6px !important;
  color: #c8c8aa !important;
  font: normal 110% "lucida console" !important
  }
.cm-searching {
  background: rgba(250,0,0,.4) !important
  }


/* MENU POPUPS */
menupopup {
  box-shadow: none !important;
  -moz-appearance: none !important;
  border-radius: 0px !important;
  color: #ccc !important;
  border: none !important;
  background: #313131 !important
 }
menupopup .menu-text, menupopup .menu-iconic-text {
  font: normal 14px "lucida console" !important;
  color: #c8c8c8 !important
  }
menuitem {
  -moz-appearance: none !important;
  box-shadow: none !important
  }
menuitem[selected="true"]:not(hover) {
  background: transparent !important
  }
menuitem:hover,
menuitem[selected="true"]:hover {
  background: rgba(255,255,255,.10) !important
  }

  
/* SCROLLBARS PORTED FROM https://userstyles.org/styles/106537/scrollbar-graphite-autohiding-latest-wip */
/* AGENT_SHEET */
scrollcorner {
  visibility: collapse !important
  }
scrollbar > scrollbarbutton, .CodeMirror-scrollbar-filler {
  display: none !important
  }
scrollbar[orient='vertical'] >  slider > thumb {
  min-height: 14px !important
  }
scrollbar[orient='horizontal'] > slider > thumb {
  min-width: 14px !important
  }
  
  
/* COMPATIBILITY FIX FOR DEVTOOLS DARK THEME */
.theme-dark  scrollbar[orient="vertical"] {
  padding-bottom: 0px !important;
  -moz-margin-start: -14px !important;
  min-width: 14px !important;
  max-width: 14px !important
  }
.theme-dark scrollbar[orient="horizontal"] {
  margin-bottom: 4px !important;
  margin-right: 14px !important;
  margin-top: -14px !important;
  min-height: 14px !important;
  max-height: 14px !important
  }
.theme-dark #errors > scrollbar[orient="vertical"] {
  padding: 0px !important;
  margin-right: 2px !important
  }
scrollbar > slider > thumb {
  border-radius: 0px !important;
  display: -moz-box !important;
  -moz-appearance: none !important;
  background-color: #555 !important
  }
scrollbar:not(#foo) {
  background-color: #333 !important
  }

scrollbar > slider > thumb:-moz-any(:hover, :active) {
  border-radius: 0px !important;
  background-color: #5E8ACC !important
  }

  
/* COMMENT OUT TO SHOW BACKGROUND SLIDER
scrollbar, scrollbar > slider, html scrollbar:not(#foo),
#internal-code > hbox > textarea > div > scrollbar,
#errors > scrollbar[orient="vertical"] {
  -moz-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important
  }
*/

/* DEVTOOLS DARK THEME COLORS - DEFAULT */
.cm-s-mozilla .cm-meta,
.cm-s-mozilla .cm-hr,
.cm-s-mozilla .cm-comment {
  color: #707D8C !important
  }

.cm-s-mozilla .cm-number {
  color: #5c9966 !important
  }

.cm-s-mozilla .cm-attribute,
.cm-s-mozilla .cm-variable,
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-property,
.cm-s-mozilla .cm-qualifier {
  color: #3689b2 !important
  }

.cm-s-mozilla .cm-builtin,
.cm-s-mozilla .cm-tag,
.cm-s-mozilla .cm-header {
  color: #a673bf !important
  }

.cm-s-mozilla .cm-bracket,
.cm-s-mozilla .cm-keyword {
  color: #a18650 !important
  }

.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2 {
  color: #b26b47 !important
  }
.cm-s-mozilla .cm-atom,
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error {
  color: #bf5656 !important
  }

.CodeMirror pre,
.cm-s-mozilla .cm-variable-2,
.cm-s-mozilla .cm-variable-3,
.cm-s-mozilla .cm-operator,
.cm-s-mozilla .cm-special {
  color: #a9bacb !important
  }

.CodeMirror-gutters {
  border: none !important
  }

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #fff !important
  }

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #FF2323 !important
  }

.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
  border-left: solid 1px #fff !important
  }

.cm-s-mozilla div.CodeMirror-linenumber {
  font-family: "dejavu sans mono";
  color: #aaa !important
  }

/* CodeMirror "Twilight" - modified version of https://userstyles.org/styles/98638/codemirror-twilight-stylish-editor */
.devtools-separator:before {
  content: '"Twilight"';
  color: #877D5F !important
  }
div.cm-s-mozilla {
  color: #f7f7f7 !important
  }
.cm-s-mozilla span.cm-keyword {
  color: #f9ee98 !important
  }
.cm-s-mozilla span.cm-atom {
  color: #E0B300 !important
  }
.cm-s-mozilla span.cm-number {
  color: #ca7841 !important
  }
.cm-s-mozilla span.cm-def {
  color: #8DA6CE !important
  }
.cm-s-mozilla span.cm-variable-2,
.cm-s-mozilla span.cm-tag {
  color: #607392 !important
  }
.cm-s-mozilla span.cm-variable-3,
.cm-s-mozilla span.cm-def {
  color: #607392 !important
  }
.cm-s-mozilla span.cm-operator {
  color: #cda869 !important
  }
.cm-s-mozilla span.cm-comment {
  color: #777777 !important
  }
.cm-s-mozilla span.cm-string {
  color: #8f9d6a !important
  }
.cm-s-mozilla span.cm-string-2 {
  color: #bd6b18 !important
  }
.cm-s-mozilla span.cm-meta {
  color: #f7f7f7 !important
  }
.cm-s-mozilla span[class="cm-error"],
.cm-s-mozilla span.cm-builtin {
  color: #cda869 !important
  }
.cm-s-mozilla span.cm-property.cm-error,
.cm-s-mozilla span.cm-tag {
  color: #997643 !important
  }
.cm-s-mozilla span.cm-attribute {
  color: #d6bb6d !important
  }
.cm-s-mozilla span.cm-header {
  color: #FF6400 !important
  }
.cm-s-mozilla span.cm-hr {
  color: #AEAEAE !important
  }
.cm-s-mozilla span.cm-link {
  color: #ad9361 !important
  }
.cm-s-mozilla pre:not(hing) {
  color: inherit !important
  }
.cm-s-mozilla span.cm-qualifier {
  color: #f9ee98 !important
  }

  
/* OTHER PARTS OF CODEMIRROR CUSTOM LABEL */
.devtools-separator:before {
  content: '';
  display: -moz-box !important;
  padding: 7px 0 0 0px !important;
  font: italic bold 15px "dejavu serif" !important;
  text-shadow: 0px 1px 0px rgba(0,0,0,.4),0px -1px 0px rgba(0,0,0,.4),1px 2px 1px rgba(0,0,0,.3)
  }

  
/* ACTIVE LINE */
.CodeMirror-activeline-background {
  line-height: 12px !important;
  background: rgba(255,255,255,.15) !important
  }

  
/* CODEMIRROR SELECTED TEXT */
.cm-s-mozilla div.CodeMirror-selected {
  box-shadow:1px 0px 0px rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.20) !important
  }

  
/* DEFAULT SELECTED TEXT */
::-moz-selection {
  background: #4C4C4C !important;
  color: #f0f0f0 !important
  }

  
/* a) ADDS CUSTOM LABEL AFTER WRAP LABEL - CONTENT REQUIRES IMPORTANT TAG */
window.theme-body #wrap-lines:after {
  text-shadow: 0px 1px 0px rgba(0,0,0,.4),0px -1px 0px rgba(0,0,0,.4),1px 2px 1px rgba(0,0,0,.3);
  display: -moz-box !important;
  font: bold 14px "dejavu serif";
  padding: 1px 0px 0 6px;
  color: rgb(185,185,155);
  content: "..." !important
  }

  
/* b) OVERRULES CUSTOM LABEL IF UNCOMMENTED */
window.theme-body #wrap-lines:after {
  content: none !important;
  padding: 0px 0px 0 0px
  }

  
/* PALEMOON FONTS */
#internal-code > hbox {
  color: #B4B496 !important;
  font: normal 13px/13px "dejavu sans mono", "lucida console" !important
  }

/* REMOVE CHECK ERRORS BUTTON */

/*
#main-area.theme-toolbar #check-for-errors-button {
  display: none
  }

#main-area.theme-toolbar label[control="name"] {
  margin-left: 99px !important
  }

#stylish-edit.theme-body #preview-button {
  -moz-box-ordinal-group: 0
  }

#stylish-edit.theme-body #wrap-lines {
  -moz-box-ordinal-group: 1
  }

#stylish-edit.theme-body .devtools-separator {
  -moz-box-ordinal-group: 2
  }

#stylish-edit.theme-body button[label="Insert"] {
  -moz-box-ordinal-group: 3;
  margin-right: 1px !important
  }

#stylish-edit.theme-body #save-button {
  -moz-box-ordinal-group: 4
  }
*/

}