mtness firefox userChrome.css

css_mtness-devtools.css

/**
 * mtness style: firefox inspector
 *
 * based on: https://userstyles.org/styles/140217/firefox-48-devtools-colours-for-49
 * written with the left Hand of mtness http://userstyles.org/users/3613
 *
 * 2018-01-16
 *
 */
 
:root.theme-dark {
  --theme-body-background       : #393f4c;
  --theme-sidebar-background    : #393f4c;
  --theme-contrast-background   : #ffb35b;

  --theme-tab-toolbar-background: #272b35;
  --theme-toolbar-background    : #272b35;
  --theme-toolbar-background-alt: #2F343E;
  --theme-toolbar-hover         : rgba(110, 120, 130, 0.1);
  --theme-toolbar-hover-active  : rgba(110, 120, 130, 0.2);
  --theme-selection-background  : #5675B9;
  --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
  --theme-selection-color       : #f5f7fa;
  --theme-splitter-color        : #454d5d;
  --theme-comment               : #757873;
  --theme-comment-alt           : #5a6375;

  --theme-body-color            : #8fa1b2;
  --theme-body-color-alt        : #b6babf;
  --theme-body-color-inactive   : #8fa1b2;
  --theme-content-color1        : #a9bacb;
  --theme-content-color2        : #8fa1b2;
  --theme-content-color3        : #5f7387;

  --theme-highlight-green       : #00ff7f;
  --theme-highlight-blue        : #46afe3;
  --theme-highlight-bluegrey    : #5e88b0;
  --theme-highlight-purple      : #bcb8db;
  --theme-highlight-lightorange : #d99b28;
  --theme-highlight-orange      : #d96629;
  --theme-highlight-red         : #eb5368;
  --theme-highlight-pink        : #df80ff;
  --theme-highlight-gray        : #e9f4fe;

  /* For accessibility purposes we want to enhance the focus styling. This
   * should improve keyboard navigation usability. */
  --theme-focus-outline-color   : #ced3d9;

  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
  --theme-graphs-green          : #70bf53;
  --theme-graphs-blue           : #46afe3;
  --theme-graphs-bluegrey       : #5e88b0;
  --theme-graphs-purple         : #df80ff;
  --theme-graphs-yellow         : #d99b28;
  --theme-graphs-orange         : #d96629;
  --theme-graphs-red            : #eb5368;
  --theme-graphs-grey           : #757873;
  --theme-graphs-full-red       : #f00;
  --theme-graphs-full-blue      : #00f;

  /* Images */
  --theme-pane-collapse-image   : url(chrome://devtools/skin/images/pane-collapse.svg);
  --theme-pane-expand-image     : url(chrome://devtools/skin/images/pane-expand.svg);

  /* Tooltips */
  --theme-tooltip-border        : #434850;
  --theme-tooltip-background    : rgba(19, 28, 38, .9);
  --theme-tooltip-shadow        : rgba(25, 25, 25, 0.76);

  /* Command line */
  --theme-command-line-image      : url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
}

.theme-dark {
  --rule-highlight-background-color   : #594724;
  --rule-overridden-item-border-color : var(--theme-content-color1);
}


.theme-dark:root {
  --markup-outline: rgba( 0, 128, 0, .5 );
}






.theme-dark:root .theme-body
 {
  background: #000 !important;
  color     : #0c0 !important;
}

.theme-sidebar {
  background: #111 !important;
  color: #080 !important;
}

.theme-body .theme-sidebar .ruleview-selector {
	color: #08f !important;
}
.ruleview-ruleopen,
.ruleview-ruleclose {
	color: #0d0 !important;
}


.theme-comment,
.editor.comment:not(.doctype),
.cm-s-mozilla .cm-hr,
.cm-s-mozilla .cm-comment,
.variable-or-property .token-undefined,
.variable-or-property .token-null,
.CodeMirror-Tern-completion-unknown:before {
  color: #ff0 !important;
}

.theme-fg-color1,
.cm-s-mozilla .cm-number,
.variable-or-property .token-number,
.variable-or-property[return] > .title > .name,
.variable-or-property[scope] > .title > .name {
  color: #080 !important;
}

.theme-fg-color2,
.cm-s-mozilla .cm-attribute,
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-property,
.variables-view-variable > .title > .name {
  color: #8080C0 !important;
}

.theme-fg-color3,
.cm-s-mozilla .cm-builtin,
.cm-s-mozilla .cm-tag,
.cm-s-mozilla .cm-header,
.cm-s-mozilla .cm-bracket,
.variables-view-property > .title > .name {
  color: #0c0 !important;
}

.theme-link {
  color: #444 !important;
}


.CodeMirror-line {
  color: #0c0 !important;
}

.CodeMirror-line .cm-qualifier {
  color: #0080FF !important;
}

.theme-fg-color4 {
  color: var(--theme-highlight-purple) !important;
}

.theme-fg-color5 {
  color: #8080C0 !important;
}



.theme-fg-color6,
.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2,
.variable-or-property .token-string,
.cm-s-mozilla .cm-variable,
.CodeMirror-Tern-farg {
  color: steelblue !important;
}

.theme-fg-color7,
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error,
.variable-or-property .token-boolean,
.variable-or-property .token-domnode,
.variable-or-property[exception] > .title > .name {}

.cm-s-mozilla .cm-number,
.cm-s-mozilla .cm-atom {
  color: #0c0 !important;
}

.cm-s-mozilla .cm-keyword {
  color: red !important;
}


/* found here: devtools -> skin/markup.css */

/* Selected nodes in the tree should have light selected text.
   theme-selected doesn't work in this case since the text is a
   sibling of the class, not a child. */
.theme-selected ~ .editor,
.theme-selected ~ .editor .theme-fg-color1,
.theme-selected ~ .editor .theme-fg-color2,
.theme-selected ~ .editor .theme-fg-color4,
.theme-selected ~ .editor .theme-fg-color5,
.theme-selected ~ .editor .theme-fg-color7,
.theme-selected ~ .editor .close::before {
  color: #aaa !important;
}

.theme-selected ~ .editor .theme-fg-color3 { color: #ccc !important; }
.theme-selected ~ .editor .theme-fg-color6 { color: #fff !important; }


/* Applicable to the DOCTYPE */
.doctype {
	color: #FF80FF !important;
	font-style: normal !important	;
}

.not-displayed .open, 
.not-displayed .close {
	opacity: 0.75 !important;
}



/* select & highlighting stuff */

.ruleview-namecontainer:hover > .ruleview-propertyname,
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
  border-bottom-color: hsl(0,0%,25%);
}


.CodeMirror.cm-s-mozilla {
  background: #000 !important;
  color     : #0c0 !important;
}
.CodeMirror.cm-s-mozilla  pre {
  color: #0f0 !important;
}
.CodeMirror.cm-s-mozilla  .cm-builtin {
  color: #0c0 !important;
}
.CodeMirror.cm-s-mozilla  .cm-qualifier:first-letter {
  color: #0f0 !important;
}
.CodeMirror.cm-s-mozilla  .cm-tag {
  color: #880 !important;
}
.CodeMirror.cm-s-mozilla  .cm-atom {
  color: #0c0 !important;
}

.CodeMirror.cm-s-mozilla  .cm-keyword {
  color: #0f0 !important;
}

.CodeMirror.cm-s-mozilla  .cm-operator {
  color: #0f0 !important;
}

/* 
.cm-s-mozilla .cm-variable-2,
.cm-s-mozilla .cm-operator,
.cm-s-mozilla .cm-special {
  color: #fff !important;
}
 */
.cm-s-mozilla .cm-variable-3 {
  color: #0f0 !important;
}

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

.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
	background: rgb(0, 0, 106) !important;
}

.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
	background: rgb(32, 32, 32) !important;
}

.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
	background: rgba(21, 21, 21, .85) !important;
}

div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
	outline: solid 1px rgba(255, 255, 255, .0) !important;
	background-color: #040 !important;
	color: #0f0 !important;
}

.theme-bg-darker {
  background-color: var(--theme-selection-background-semitransparent) !important;
}

.theme-selected,
.CodeMirror-hint-active {
  background-color: rgb(0, 0, 106) !important;
  color: #fff !important;
}

userChrome.css

/* ------------------------------------------------------------------------- */
/*
              __                                    __ 
   ____ ___  / /_____  ___  __________  ____  ___  / /_
  / __ `__ \/ __/ __ \/ _ \/ ___/ ___/ / __ \/ _ \/ __/
 / / / / / / /_/ / / /  __(__  )__  ) / / / /  __/ /_  
/_/ /_/ /_/\__/_/ /_/\___/____/____(.)_/ /_/\___/\__/  


userChrome.css for mtness firefox

2018-01-16

/* ------------------------------------------------------------------------- */


/* permanent statusbar */
/* @import url(./css_permanent-statusbar.css); /**/

/*---------------------------------------------------------------------------------------------------------------------------*/

/* mtness style for devtools */
@import url(./css_mtness-devtools.css); /**/




/*==== Remove Send Page to Device, Send Link to Device ect, Save page to Pocket ====*/
#context-sendpagetodevice, #context-sep-sendpagetodevice,
#context-sendlinktodevice, #context-sep-sendlinktodevice,
#context_sendTabToDevice, #context_sendTabToDevice_separator,
#context-pocket {
display: none !important;
}


/*---------------------------------------------------------------------------------------------------------------------------*/


/*==== Context menu items and icons instead of just huge icons ====*/
#context-sep-navigation,
:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) .menu-iconic-highlightable-text {
  display: none !important;
}

#context-navigation{
  -moz-box-orient: vertical !important;
  -moz-appearance:none !important;
  background:unset !important;
}

:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) image {
  width: 16px !important;
  height: 16px !important;
  margin-top: unset !important;
  margin-bottom: unset !important;
  padding-top: unset !important;
  padding-bottom: unset !important;
  -moz-margin-start: 4px !important;
  -moz-margin-end: 12px !important;
}

@media (min-resolution: 120dpi) {
	:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) image  {
	  -moz-margin-end: 8px !important;
	}
}

:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) {
  -moz-appearance: menuitem !important;
  min-height: unset !important;
}

:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage):after {
  content: attr(aria-label) !important;
  display: block !important;
  visibility: visible !important;
}

#context-navigation > .menuitem-iconic{
  -moz-box-pack: start !important;
}

/* fix for German locale */
#context-bookmarkpage[aria-label*="Lesezeichen"] {
  -moz-padding-end: 10px !important;
}

:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) image {
  -moz-margin-start: 0px !important;
  -moz-margin-end: 2px !important;
}

:-moz-any(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage) image {
  opacity: 0 !important;
}


/*---------------------------------------------------------------------------------------------------------------------------*/


/* reduce text font size in location/search bar (to what is was on Win7)*/
#main-window[uidensity="compact"] :-moz-any(.searchbar-textbox, #urlbar) {
  font-size: 12px !important;
}

/* hide page action button (three dots) */
#pageActionButton {
    display: none !important;
}

/*---------------------------------------------------------------------------------------------------------------------------*/