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