LCARStrek/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   background-color: var(--theme-toolbar-background);
  16   color: var(--theme-body-color);
  17 }
  18
  19 #reload-notice {
  20   font-size: 120%;
  21 }
  22
  23 #waiting-notice {
  24   font-size: 110%;
  25 }
  26
  27 /* Shaders pane */
  28
  29 #shaders-pane {
  30   min-width: 150px;
  31 }
  32
  33 #shaders-pane + .devtools-side-splitter {
  34   border-color: transparent;
  35 }
  36
  37 .side-menu-widget-item-checkbox {
  38   -moz-appearance: none;
  39   opacity: 0;
  40   transition: opacity .15s ease-out 0s;
  41 }
  42
  43 /* Only show the checkbox when the source is hovered over, is selected, or if it
  44  * is not checked. */
  45 .side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
  46 .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
  47 .side-menu-widget-item-checkbox:not([checked]) {
  48   opacity: 1;
  49   transition: opacity .15s ease-out 0s;
  50 }
  51
  52 .side-menu-widget-item-checkbox .checkbox-check {
  53   background-image: url("itemToggle.png");
  54   background-color: transparent;
  55   background-repeat: no-repeat;
  56   background-clip: content-box;
  57   background-size: 32px 16px;
  58   background-position: -16px 0;
  59   width: 16px;
  60   height: 16px;
  61   border: 0;
  62 }
  63
  64 @media (min-resolution: 1.1dppx) {
  65   .side-menu-widget-item-checkbox .checkbox-check {
  66     background-image: url("itemToggle@2x.png");
  67   }
  68 }
  69
  70 .side-menu-widget-item-checkbox[checked] .checkbox-check {
  71   background-position: 0 0;
  72 }
  73
  74 /* Shader source editors */
  75
  76 #editors-splitter {
  77   border-color: var(--theme-contrastsidebar-bordercolor);
  78 }
  79
  80 .editor-label {
  81   padding: 1px 12px;
  82   background: var(--theme-contrastsidebar-background);
  83   color: var(--theme-contrastsidebar-color);
  84 }
  85
  86 .editor-label[selected] {
  87   background-color: var(--theme-selection-background);
  88   color: var(--theme-selection-color);
  89 }
  90
  91 /* Responsive sidebar */
  92
  93 @media (max-width: 700px) {
  94   #shaders-pane {
  95     max-height: 60vh;
  96   }
  97
  98   .side-menu-widget-container {
  99     box-shadow: none !important;
 100   }
 101
 102   .side-menu-widget-item-arrow {
 103     background-image: none !important;
 104   }
 105
 106   .devtools-side-splitter {
 107     border-top-color: transparent !important;
 108   }
 109
 110   .editor-label {
 111     -moz-box-ordinal-group: 0;
 112   }
 113
 114   .editor-label:not([selected]) {
 115   }
 116 }