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: 1px solid #FF9F00;
  53   background-color: #000000;
  54   border-radius: 3px;
  55   overflow-x: hidden;
  56   max-height: 40rem;
  57 }
  58
  59 .devtools-autocomplete-listbox {
  60   background-color: transparent;
  61   border-width: 0px !important;
  62 }
  63
  64 .devtools-autocomplete-listbox > richlistitem,
  65 .devtools-autocomplete-listbox > richlistitem[selected] {
  66   width: 100%;
  67   background-color: transparent;
  68   border-radius: 4px;
  69 }
  70
  71 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
  72 .devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
  73 /*  background-color: rgba(0,0,0,0.5); */
  74 }
  75
  76 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
  77 .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
  78 /*  color: hsl(208,100%,60%);*/
  79 }
  80
  81 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
  82 /*  color: #eee;*/
  83 }
  84
  85 .devtools-autocomplete-listbox.dark-theme > richlistitem > label {
  86 /*  color: #ccc;*/
  87 }
  88
  89 .devtools-autocomplete-listbox > richlistitem > .initial-value,
  90 .devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  91   margin: 0;
  92   padding: 1px 0;
  93 }
  94
  95 .devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
  96   text-align: right;
  97 }
  98
  99 /* Rest of the light theme */
 100
 101 .devtools-autocomplete-popup.light-theme {
 102 }
 103
 104 .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
 105 .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
 106 /*  background-color: rgba(128,128,128,0.3); */
 107 }
 108
 109 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
 110 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
 111 /*  color: #222;*/
 112 }
 113
 114 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
 115 /*  color: #666;*/
 116 }
 117
 118 /* Responsive container */
 119
 120 .devtools-responsive-container {
 121   -moz-box-orient: horizontal;
 122 }
 123
 124 @media (max-width: 700px) {
 125   .devtools-responsive-container {
 126     -moz-box-orient: vertical;
 127   }
 128
 129   .devtools-responsive-container > .devtools-side-splitter {
 130     border: 0;
 131     margin: 3px 0;
 132     min-height: 3px;
 133     height: 3px;
 134     /* In some edge case the cursor is not changed to n-resize */
 135     cursor: n-resize;
 136   }
 137
 138   .devtools-responsive-container > .devtools-sidebar-tabs {
 139     min-height: 35vh;
 140     max-height: 75vh;
 141   }
 142 }
 143
 144 /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
 145
 146 .devtools-tooltip.devtools-tooltip-tooltip {
 147   /* If the tooltip uses a <tooltip> XUL element */
 148   padding: 4px;
 149   background: #A09090;
 150   border-radius: 3px;
 151 }
 152
 153 .devtools-tooltip .panel-arrowcontent {
 154   /* If the tooltip uses a <panel> XUL element instead */
 155   padding: 4px;
 156 }
 157
 158 .devtools-tooltip .panel-arrowcontainer {
 159   /* Reseting the transition used when panels are shown */
 160   transition: none;
 161   /* Panels slide up/down/left/right when they appear using a transform.
 162   Since we want to remove the transition, we don't need to transform anymore
 163   plus it can interfeer by causing mouseleave events on the underlying nodes */
 164   transform: none;
 165 }
 166
 167 .devtools-tooltip[clamped-dimensions] {
 168   min-height: 100px;
 169   max-height: 400px;
 170   min-width: 100px;
 171   max-width: 400px;
 172 }
 173 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent {
 174   overflow: hidden;
 175 }
 176
 177 /* Tooltip: Simple Text */
 178
 179 .devtools-tooltip-simple-text {
 180   background: #000000;
 181   max-width: 400px;
 182   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 183   padding: 8px 12px;
 184   white-space: pre-wrap;
 185 }
 186
 187 .devtools-tooltip-simple-text:first-child {
 188   margin-top: -4px;
 189 }
 190
 191 .devtools-tooltip-simple-text:last-child {
 192   margin-bottom: -4px;
 193 }
 194
 195 .devtools-tooltip-simple-text {
 196   background-color: #000000;
 197   max-width: 400px;
 198   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 199   padding: 8px 12px;
 200   white-space: pre-wrap;
 201 }
 202
 203 .devtools-tooltip-simple-text:first-child {
 204   margin-top: -4px;
 205 }
 206
 207 .devtools-tooltip-simple-text:last-child {
 208   margin-bottom: -4px;
 209 }
 210
 211 /* Tooltip: Font Family Previewer Text */
 212 .devtools-tooltip-font-previewer-text {
 213   max-width: 400px;
 214   line-height: 1.5;
 215   font-size: 150%;
 216   text-align: center;
 217 }
 218
 219 /* Tooltip: Alert Icon */
 220
 221 .devtools-tooltip-alert-icon {
 222   width: 32px;
 223   height: 32px;
 224   margin: 6px;
 225   -moz-margin-end: 20px;
 226 }
 227
 228 .devtools-tooltip-alert-icon {
 229   list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
 230 }
 231
 232 /* Tooltip: Variables View */
 233
 234 .devtools-tooltip-variables-view-box {
 235   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 236 }
 237
 238 /* Tooltip: Tiles */
 239
 240 .devtools-tooltip-tiles {
 241   background-color: #A09090;
 242   background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF),
 243     linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF);
 244   background-size: 20px 20px;
 245   background-position: 0 0, 10px 10px;
 246 }
 247
 248 .devtools-tooltip-iframe {
 249   border: none;
 250   background: transparent;
 251 }
 252
 253 /* Eyedropper Widget */
 254
 255 .devtools-eyedropper-panel {
 256   pointer-events: none;
 257   -moz-appearance: none;
 258   width: 156px;
 259   height: 120px;
 260   background-color: transparent;
 261   border: none;
 262 }
 263
 264 /* === END common.inc.css === */