LCARStrek/browser/devtools/shadereditor.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* === file identical to shadereditor.inc.css === */
   6
   7 window {
   8   padding: 0;
   9 }
  10
  11 /* Reload and waiting notices */
  12
  13 .notice-container {
  14   margin-top: -50vh;
  15
  16   background-color: #000000;
  17   color: #FF9F00;
  18 }
  19
  20 #reload-notice {
  21   font-size: 120%;
  22 }
  23
  24 #waiting-notice {
  25   font-size: 110%;
  26 }
  27
  28 #waiting-notice::before {
  29   display: inline-block;
  30   content: "";
  31   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
  32   width: 16px;
  33   height: 16px;
  34   -moz-margin-end: 6px;
  35 }
  36
  37 /* Shaders pane */
  38
  39 #shaders-pane {
  40   min-width: 150px;
  41 }
  42
  43 #shaders-pane + .devtools-side-splitter {
  44   border-color: transparent;
  45 }
  46
  47 .side-menu-widget-item-checkbox {
  48   -moz-appearance: none;
  49   opacity: 0;
  50   transition: opacity .15s ease-out 0s;
  51 }
  52
  53 /* Only show the checkbox when the source is hovered over, is selected, or if it
  54  * is not checked. */
  55 .side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
  56 .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
  57 .side-menu-widget-item-checkbox:not([checked]) {
  58   opacity: 1;
  59   transition: opacity .15s ease-out 0s;
  60 }
  61
  62 .side-menu-widget-item-checkbox .checkbox-check {
  63   background-image: url("itemToggle.png");
  64   background-color: transparent;
  65   background-repeat: no-repeat;
  66   background-clip: content-box;
  67   background-size: 32px 16px;
  68   background-position: -16px 0;
  69   width: 16px;
  70   height: 16px;
  71   border: 0;
  72 }
  73
  74 @media (min-resolution: 2dppx) {
  75   .side-menu-widget-item-checkbox .checkbox-check {
  76     background-image: url("itemToggle@2x.png");
  77   }
  78 }
  79
  80 .side-menu-widget-item-checkbox[checked] .checkbox-check {
  81   background-position: 0 0;
  82 }
  83
  84 /* Shader source editors */
  85
  86 #editors-splitter {
  87   border-color: #000000;
  88 }
  89
  90 .editor-label {
  91   background-color: #A09090;
  92   padding: 1px 12px;
  93   color: #000000;
  94 }
  95
  96 .editor-label[selected] {
  97   background-color: #008484;
  98   color: #FFCF00;
  99 }
 100
 101 /* Responsive sidebar */
 102
 103 @media (max-width: 700px) {
 104   #shaders-pane {
 105     max-height: 60vh;
 106   }
 107
 108   .side-menu-widget-container {
 109     box-shadow: none !important;
 110   }
 111
 112   .side-menu-widget-item-arrow {
 113     background-image: none !important;
 114   }
 115
 116   .devtools-side-splitter {
 117     border-top-color: transparent !important;
 118   }
 119
 120   .editor-label {
 121     -moz-box-ordinal-group: 0;
 122   }
 123
 124   .editor-label:not([selected]) {
 125   }
 126 }