Skip to content

Instantly share code, notes, and snippets.

@mtness

mtness/css_mtness-devtools.css

Last active August 1, 2018 19:37
Show Gist options
  • Save mtness/0764847bd00d4d9ba1455de168dd86a5 to your computer and use it in GitHub Desktop.
Save mtness/0764847bd00d4d9ba1455de168dd86a5 to your computer and use it in GitHub Desktop.
Download ZIP
mtness firefox userChrome.css
Raw
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;
}
Raw
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;
}
/*---------------------------------------------------------------------------------------------------------------------------*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment