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 #requests-menu-reload-notice-button {
  38   min-height: 2em;
  39 }
  40
  41 /* Shaders pane */
  42
  43 #shaders-pane {
  44   min-width: 150px;
  45 }
  46
  47 #shaders-pane + .devtools-side-splitter {
  48   border-color: transparent;
  49 }
  50
  51 .side-menu-widget-item-checkbox {
  52   -moz-appearance: none;
  53   opacity: 0;
  54   transition: opacity .15s ease-out 0s;
  55 }
  56
  57 /* Only show the checkbox when the source is hovered over, is selected, or if it
  58  * is not checked. */
  59 .side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
  60 .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
  61 .side-menu-widget-item-checkbox:not([checked]) {
  62   opacity: 1;
  63   transition: opacity .15s ease-out 0s;
  64 }
  65
  66 .side-menu-widget-item-checkbox .checkbox-check {
  67   background-image: url("itemToggle.png");
  68   background-color: transparent;
  69   background-repeat: no-repeat;
  70   background-clip: content-box;
  71   background-size: 32px 16px;
  72   background-position: -16px 0;
  73   width: 16px;
  74   height: 16px;
  75   border: 0;
  76 }
  77
  78 @media (min-resolution: 2dppx) {
  79   .side-menu-widget-item-checkbox .checkbox-check {
  80     background-image: url("itemToggle@2x.png");
  81   }
  82 }
  83
  84 .side-menu-widget-item-checkbox[checked] .checkbox-check {
  85   background-position: 0 0;
  86 }
  87
  88 /* Shader source editors */
  89
  90 #editors-splitter {
  91   border-color: #000000;
  92 }
  93
  94 .editor-label {
  95   background-color: #A09090;
  96   padding: 1px 12px;
  97   color: #000000;
  98 }
  99
 100 .editor-label[selected] {
 101   background-color: #008484;
 102   color: #FFCF00;
 103 }
 104
 105 /* Responsive sidebar */
 106
 107 @media (max-width: 700px) {
 108   #shaders-pane {
 109     max-height: 60vh;
 110   }
 111
 112   .side-menu-widget-container {
 113     box-shadow: none !important;
 114   }
 115
 116   .side-menu-widget-item-arrow {
 117     background-image: none !important;
 118   }
 119
 120   .devtools-side-splitter {
 121     border-top-color: transparent !important;
 122   }
 123
 124   .editor-label {
 125     -moz-box-ordinal-group: 0;
 126   }
 127
 128   .editor-label:not([selected]) {
 129   }
 130 }