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