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