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

  • Select an option

    Learn more about clone URLs
  • Save mtness/0764847bd00d4d9ba1455de168dd86a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mtness/0764847bd00d4d9ba1455de168dd86a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mtness revised this gist Aug 1, 2018. 3 changed files with 2 additions and 170 deletions.
    82 changes: 0 additions & 82 deletions css_mtness-rdm.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,82 +0,0 @@
    /*
    * mtness RDM adjustments
    * written with the left Hand of mtness
    * 2018-01-16
    *
    * hast to be referenced in usewrContent.css
    *
    */

    @-moz-document url("chrome://devtools/content/responsive.html/index.xhtml")
    {
    #app {
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    align-items: left !important;
    height: calc(100% - 16px) !important;
    }

    #global-toolbar {
    display: block !important;
    width: 100% !important;
    position: relative;
    padding: 4px 15px !important;
    box-shadow: unset !important;
    }
    #app #global-toolbar {
    margin-bottom: 1px !important;
    }

    #global-network-throttling-selector {
    height: 18px !important;
    }
    #global-dpr-selector > select > option {
    padding: 0 5px !important;
    }

    #global-toolbar > .toolbar-button::before {
    }

    #global-touch-simulation-button {
    position: absolute;
    right: 52px;
    top: 2px;
    }
    #global-screenshot-button {
    position: absolute;
    right: 28px;
    top: 2px;
    }
    #global-exit-button {
    position: absolute;
    right: 2px;
    top: 2px;
    }


    .viewport-dimension {
    position: absolute;
    top: 5px;
    left: 220px;
    z-index: 1;
    }

    .viewport-toolbar.container {
    height: 24px !important;
    justify-content: left !important;
    }
    .viewport-rotate-button {
    position: absolute;
    left: 0 !important;
    }
    .viewport-rotate-button.devtools-button:empty::before {
    width: 22px !important;
    height: 22px !important;
    }
    .viewport-device-selector {
    text-align: left !important;
    margin-left: 48px !important;
    }

    }

    86 changes: 0 additions & 86 deletions css_mtness-viewsource.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,86 +0,0 @@
    @-moz-document url-prefix(view-source:) {
    html {
    background-color: #000 !important;
    }
    body#viewsource {
    min-height: 100% !important;
    height: unset !important;
    color: #080 !important;
    font-family:'Lucida Console' !important;
    font-size: small !important;
    font-weight: normal !important;
    white-space: pre !important;
    margin: 0 !important;
    -moz-tab-size: 4;
    }
    #viewsource.wrap {
    }
    pre {
    }
    pre[id]:before,
    span[id]:before {
    color: #888 !important;
    }
    .highlight .start-tag {
    color: #4f4 !important;
    font-weight: normal !important;
    }
    .highlight .end-tag {
    color: #4f4 !important;
    font-weight: normal !important;
    }
    .highlight .comment {
    color: yellow !important;
    font-style: normal !important;
    }
    .highlight .cdata {
    color: #CC0066 !important;
    }
    .highlight .doctype {
    color: #DD80DD !important;
    font-style: normal !important;
    }
    .highlight .pi {
    color: orchid !important;
    font-style: italic !important;
    }
    .highlight .entity {
    color: #0045FF !important;
    font-weight: normal !important;
    }
    .highlight .text {
    font-weight: normal !important;
    }
    .highlight .attribute-name {
    color: #0c0 !important;
    font-weight: normal !important;
    }
    .highlight .attribute-value {
    color: steelblue !important;
    font-weight: normal !important;
    }
    .highlight .attribute-value[href|="view"] {
    color: #88f !important;
    }
    .highlight .attribute-value[href|="view"]:hover {
    color: #bbf !important;
    }
    .highlight .markupdeclaration {
    color: steelblue !important;
    font-style: normal !important;
    }
    span:not(.error), a:not(.error) {
    }
    span[id] {
    }
    .highlight .error,
    .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-value) {
    color: red !important;
    font-weight: normal !important;
    }
    .error > .attribute-name
    {
    color: green !important;
    }
    }
    4 changes: 2 additions & 2 deletions userChrome.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,12 +15,12 @@ userChrome.css for mtness firefox


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

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

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



  2. mtness revised this gist Aug 1, 2018. 3 changed files with 476 additions and 0 deletions.
    308 changes: 308 additions & 0 deletions css_mtness-devtools.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,308 @@
    /**
    * 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;
    }





    82 changes: 82 additions & 0 deletions css_mtness-rdm.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    /*
    * mtness RDM adjustments
    * written with the left Hand of mtness
    * 2018-01-16
    *
    * hast to be referenced in usewrContent.css
    *
    */

    @-moz-document url("chrome://devtools/content/responsive.html/index.xhtml")
    {
    #app {
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    align-items: left !important;
    height: calc(100% - 16px) !important;
    }

    #global-toolbar {
    display: block !important;
    width: 100% !important;
    position: relative;
    padding: 4px 15px !important;
    box-shadow: unset !important;
    }
    #app #global-toolbar {
    margin-bottom: 1px !important;
    }

    #global-network-throttling-selector {
    height: 18px !important;
    }
    #global-dpr-selector > select > option {
    padding: 0 5px !important;
    }

    #global-toolbar > .toolbar-button::before {
    }

    #global-touch-simulation-button {
    position: absolute;
    right: 52px;
    top: 2px;
    }
    #global-screenshot-button {
    position: absolute;
    right: 28px;
    top: 2px;
    }
    #global-exit-button {
    position: absolute;
    right: 2px;
    top: 2px;
    }


    .viewport-dimension {
    position: absolute;
    top: 5px;
    left: 220px;
    z-index: 1;
    }

    .viewport-toolbar.container {
    height: 24px !important;
    justify-content: left !important;
    }
    .viewport-rotate-button {
    position: absolute;
    left: 0 !important;
    }
    .viewport-rotate-button.devtools-button:empty::before {
    width: 22px !important;
    height: 22px !important;
    }
    .viewport-device-selector {
    text-align: left !important;
    margin-left: 48px !important;
    }

    }

    86 changes: 86 additions & 0 deletions css_mtness-viewsource.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    @-moz-document url-prefix(view-source:) {
    html {
    background-color: #000 !important;
    }
    body#viewsource {
    min-height: 100% !important;
    height: unset !important;
    color: #080 !important;
    font-family:'Lucida Console' !important;
    font-size: small !important;
    font-weight: normal !important;
    white-space: pre !important;
    margin: 0 !important;
    -moz-tab-size: 4;
    }
    #viewsource.wrap {
    }
    pre {
    }
    pre[id]:before,
    span[id]:before {
    color: #888 !important;
    }
    .highlight .start-tag {
    color: #4f4 !important;
    font-weight: normal !important;
    }
    .highlight .end-tag {
    color: #4f4 !important;
    font-weight: normal !important;
    }
    .highlight .comment {
    color: yellow !important;
    font-style: normal !important;
    }
    .highlight .cdata {
    color: #CC0066 !important;
    }
    .highlight .doctype {
    color: #DD80DD !important;
    font-style: normal !important;
    }
    .highlight .pi {
    color: orchid !important;
    font-style: italic !important;
    }
    .highlight .entity {
    color: #0045FF !important;
    font-weight: normal !important;
    }
    .highlight .text {
    font-weight: normal !important;
    }
    .highlight .attribute-name {
    color: #0c0 !important;
    font-weight: normal !important;
    }
    .highlight .attribute-value {
    color: steelblue !important;
    font-weight: normal !important;
    }
    .highlight .attribute-value[href|="view"] {
    color: #88f !important;
    }
    .highlight .attribute-value[href|="view"]:hover {
    color: #bbf !important;
    }
    .highlight .markupdeclaration {
    color: steelblue !important;
    font-style: normal !important;
    }
    span:not(.error), a:not(.error) {
    }
    span[id] {
    }
    .highlight .error,
    .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-value) {
    color: red !important;
    font-weight: normal !important;
    }
    .error > .attribute-name
    {
    color: green !important;
    }
    }
  3. mtness created this gist Aug 1, 2018.
    112 changes: 112 additions & 0 deletions userChrome.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    /* ------------------------------------------------------------------------- */
    /*
    __ __
    ____ ___ / /_____ ___ __________ ____ ___ / /_
    / __ `__ \/ __/ __ \/ _ \/ ___/ ___/ / __ \/ _ \/ __/
    / / / / / / /_/ / / / __(__ )__ ) / / / / __/ /_
    /_/ /_/ /_/\__/_/ /_/\___/____/____(.)_/ /_/\___/\__/
    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;
    }

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