LCARStrek/browser/devtools/common.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */
   7 window {
   8   padding: 0;
   9 }
  10
  11 notification {
  12   margin-bottom: 3px;
  13 }
  14
  15 /* End LCARStrek toolbox rules */
  16
  17
  18 /* Font for code */
  19 .devtools-monospace {
  20   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
  21 }
  22
  23 /* Splitters */
  24
  25 .devtools-horizontal-splitter {
  26   min-height: 3px;
  27   height: 3px;
  28   position: relative;
  29 }
  30
  31 #devtools-side-splitter {
  32   min-width: 0;
  33   width: 3px;
  34   border: none;
  35   margin: 0 3px;
  36   position: relative;
  37   cursor: e-resize;
  38 }
  39
  40 /* In-tools sidebar */
  41
  42 .devtools-toolbox-side-iframe {
  43   min-width: 465px;
  44 }
  45
  46 /* === BEGIN common.inc.css === */
  47
  48 /* Autocomplete Popup */
  49 /* Dark and light theme */
  50
  51 .devtools-autocomplete-popup {
  52   border-radius: 3px;
  53   overflow-x: hidden;
  54   max-height: 40rem;
  55 }
  56
  57 .devtools-autocomplete-listbox {
  58   background-color: transparent;
  59   border-width: 0px !important;
  60 }
  61
  62 .devtools-autocomplete-listbox > richlistitem,
  63 .devtools-autocomplete-listbox > richlistitem[selected] {
  64   width: 100%;
  65   background-color: transparent;
  66   border-radius: 4px;
  67 }
  68
  69 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
  70 .devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
  71 /*  background-color: rgba(0,0,0,0.5); */
  72 }
  73
  74 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
  75 .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
  76 /*  color: hsl(208,100%,60%);*/
  77 }
  78
  79 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
  80 /*  color: #eee;*/
  81 }
  82
  83 .devtools-autocomplete-listbox.dark-theme > richlistitem > label {
  84 /*  color: #ccc;*/
  85 }
  86
  87 .devtools-autocomplete-listbox > richlistitem > .initial-value,
  88 .devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  89   margin: 0;
  90   padding: 1px 0;
  91 }
  92
  93 .devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
  94   text-align: end;
  95 }
  96
  97 /* Rest of the dark and light theme */
  98
  99 .devtools-autocomplete-popup,
 100 .CodeMirror-hints,
 101 .CodeMirror-Tern-tooltip {
 102   border: 1px solid #FF9F00;
 103   background-color: #000000;
 104 }
 105
 106 .devtools-autocomplete-popup.light-theme {
 107 }
 108
 109 .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
 110 .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
 111 /*  background-color: rgba(128,128,128,0.3); */
 112 }
 113
 114 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
 115 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
 116 /*  color: #222;*/
 117 }
 118
 119 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
 120 /*  color: #666;*/
 121 }
 122
 123 /* Responsive container */
 124
 125 .devtools-responsive-container {
 126   -moz-box-orient: horizontal;
 127 }
 128
 129 @media (max-width: 700px) {
 130   .devtools-responsive-container {
 131     -moz-box-orient: vertical;
 132   }
 133
 134   .devtools-responsive-container > .devtools-side-splitter {
 135     border: 0;
 136     margin: 3px 0;
 137     min-height: 3px;
 138     height: 3px;
 139     /* In some edge case the cursor is not changed to n-resize */
 140     cursor: n-resize;
 141   }
 142
 143   .devtools-responsive-container > .devtools-sidebar-tabs {
 144     min-height: 35vh;
 145     max-height: 75vh;
 146   }
 147 }
 148
 149 /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
 150
 151 .devtools-tooltip.devtools-tooltip-tooltip {
 152   /* If the tooltip uses a <tooltip> XUL element */
 153   padding: 4px;
 154   background: #A09090;
 155   border-radius: 3px;
 156 }
 157
 158 .devtools-tooltip .panel-arrowcontent {
 159   /* If the tooltip uses a <panel> XUL element instead */
 160   padding: 4px;
 161 }
 162
 163 .devtools-tooltip .panel-arrowcontainer {
 164   /* Reseting the transition used when panels are shown */
 165   transition: none;
 166   /* Panels slide up/down/left/right when they appear using a transform.
 167   Since we want to remove the transition, we don't need to transform anymore
 168   plus it can interfeer by causing mouseleave events on the underlying nodes */
 169   transform: none;
 170 }
 171
 172 .devtools-tooltip[clamped-dimensions] {
 173   min-height: 100px;
 174   max-height: 400px;
 175   min-width: 100px;
 176   max-width: 400px;
 177 }
 178 .devtools-tooltip[clamped-dimensions-no-min-height] {
 179   min-height: 0;
 180   max-height: 400px;
 181   min-width: 100px;
 182   max-width: 400px;
 183 }
 184 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
 185 .devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent {
 186   overflow: hidden;
 187 }
 188
 189 /* Tooltip: Simple Text */
 190
 191 .devtools-tooltip-simple-text {
 192   background: #000000;
 193   max-width: 400px;
 194   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 195   padding: 8px 12px;
 196   white-space: pre-wrap;
 197 }
 198
 199 .devtools-tooltip-simple-text:first-child {
 200   margin-top: -4px;
 201 }
 202
 203 .devtools-tooltip-simple-text:last-child {
 204   margin-bottom: -4px;
 205 }
 206
 207 .devtools-tooltip-simple-text {
 208   background-color: #000000;
 209   max-width: 400px;
 210   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 211   padding: 8px 12px;
 212   white-space: pre-wrap;
 213 }
 214
 215 .devtools-tooltip-simple-text:first-child {
 216   margin-top: -4px;
 217 }
 218
 219 .devtools-tooltip-simple-text:last-child {
 220   margin-bottom: -4px;
 221 }
 222
 223 /* Tooltip: Alert Icon */
 224
 225 .devtools-tooltip-alert-icon {
 226   width: 32px;
 227   height: 32px;
 228   margin: 6px;
 229   -moz-margin-end: 20px;
 230 }
 231
 232 .devtools-tooltip-alert-icon {
 233   list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
 234 }
 235
 236 /* Tooltip: Variables View */
 237
 238 .devtools-tooltip-variables-view-box {
 239   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 240 }
 241
 242 .devtools-tooltip-variables-view-box .variable-or-property > .title {
 243   -moz-padding-end: 6px;
 244 }
 245
 246 /* Tooltip: Tiles */
 247
 248 .devtools-tooltip-tiles {
 249   background-color: #A09090;
 250   background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF),
 251     linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF);
 252   background-size: 20px 20px;
 253   background-position: 0 0, 10px 10px;
 254 }
 255
 256 .devtools-tooltip-iframe {
 257   border: none;
 258   background: transparent;
 259 }
 260
 261 /* Eyedropper Widget */
 262
 263 .devtools-eyedropper-panel {
 264   pointer-events: none;
 265   -moz-appearance: none;
 266   width: 156px;
 267   height: 120px;
 268   background-color: transparent;
 269   border: none;
 270 }
 271
 272 /* === END common.inc.css === */