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-no-max-or-min-height] {
 185   min-width: 400px;
 186   max-width: 400px;
 187 }
 188 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
 189 .devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
 190 .devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
 191   overflow: hidden;
 192 }
 193 .devtools-tooltip[wide] {
 194   max-width: 600px;
 195 }
 196
 197 /* Tooltip: Simple Text */
 198
 199 .devtools-tooltip-simple-text {
 200   background: #000000;
 201   max-width: 400px;
 202   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 203   padding: 8px 12px;
 204   white-space: pre-wrap;
 205 }
 206
 207 .devtools-tooltip-simple-text:first-child {
 208   margin-top: -4px;
 209 }
 210
 211 .devtools-tooltip-simple-text:last-child {
 212   margin-bottom: -4px;
 213 }
 214
 215 .devtools-tooltip-simple-text {
 216   background-color: #000000;
 217   max-width: 400px;
 218   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 219   padding: 8px 12px;
 220   white-space: pre-wrap;
 221 }
 222
 223 .devtools-tooltip-simple-text:first-child {
 224   margin-top: -4px;
 225 }
 226
 227 .devtools-tooltip-simple-text:last-child {
 228   margin-bottom: -4px;
 229 }
 230
 231 /* Tooltip: Alert Icon */
 232
 233 .devtools-tooltip-alert-icon {
 234   width: 32px;
 235   height: 32px;
 236   margin: 6px;
 237   -moz-margin-end: 20px;
 238 }
 239
 240 .devtools-tooltip-alert-icon {
 241   list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
 242 }
 243
 244 /* Tooltip: Variables View */
 245
 246 .devtools-tooltip-variables-view-box {
 247   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 248 }
 249
 250 .devtools-tooltip-variables-view-box .variable-or-property > .title {
 251   -moz-padding-end: 6px;
 252 }
 253
 254 /* Tooltip: Tiles */
 255
 256 .devtools-tooltip-tiles {
 257   background-color: #A09090;
 258   background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF),
 259     linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF);
 260   background-size: 20px 20px;
 261   background-position: 0 0, 10px 10px;
 262 }
 263
 264 .devtools-tooltip-iframe {
 265   border: none;
 266   background: transparent;
 267 }
 268
 269 /* Eyedropper Widget */
 270
 271 .devtools-eyedropper-panel {
 272   pointer-events: none;
 273   -moz-appearance: none;
 274   width: 156px;
 275   height: 120px;
 276   background-color: transparent;
 277   border: none;
 278   padding: 0;
 279 }
 280
 281 #color-value {
 282   color: #FF9F00;
 283 }
 284
 285 #color-value.highlight {
 286   color: #FFCF00;
 287 }
 288
 289
 290 /* === END common.inc.css === */