LCARStrek/devtools/styleeditor.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 window:not([windowtype]) {
   7   /* This does not apply to the standalone window in FF 19 and lower,
   8    * only to the dev toolbox in FF 20+. */
   9   padding: 0;
  10 }
  11
  12 #style-editor-chrome {
  13   -moz-box-flex: 1;
  14   background-color: #000000;
  15 }
  16
  17 .splitview-nav > li,
  18 .stylesheet-info,
  19 .stylesheet-more,
  20 .stylesheet-rule-count,
  21 li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
  22 li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
  23   display: -moz-box;
  24 }
  25
  26 .devtools-toolbar > spacer {
  27   -moz-box-flex: 1;
  28 }
  29
  30 .style-editor-newButton {
  31   list-style-image: url(images/add.svg);
  32 }
  33
  34 .style-editor-importButton {
  35   list-style-image: url(images/import.svg);
  36 }
  37
  38 .stylesheet-details-container {
  39   -moz-box-flex: 1;
  40 }
  41
  42 .stylesheet-media-container {
  43   overflow-y: auto;
  44 }
  45
  46 .stylesheet-error-message {
  47   display: none;
  48 }
  49
  50 li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
  51   display: block;
  52 }
  53
  54 .stylesheet-title,
  55 .stylesheet-name {
  56   text-decoration: none;
  57 }
  58
  59 .stylesheet-name {
  60   font-size: 13px;
  61   white-space: nowrap;
  62 }
  63
  64 .stylesheet-name > label {
  65   display: inline;
  66   cursor: pointer;
  67 }
  68
  69 .stylesheet-info > h1 {
  70   -moz-box-flex: 1;
  71 }
  72
  73 .splitview-nav > li > hgroup.stylesheet-info {
  74   -moz-box-pack: center;
  75 }
  76
  77 .stylesheet-more > spacer {
  78   -moz-box-flex: 1;
  79 }
  80
  81 .stylesheet-title,
  82 .stylesheet-name {
  83   color: var(--theme-highlight-blue);
  84 }
  85
  86 .stylesheet-rule-count,
  87 .stylesheet-linked-file,
  88 .stylesheet-saveButton {
  89   color: var(--theme-body-color);
  90 }
  91
  92 .stylesheet-saveButton {
  93   display: none;
  94   margin-top: 0px;
  95   margin-bottom: 0px;
  96   text-decoration: underline;
  97   cursor: pointer;
  98 }
  99
 100 .splitview-active .stylesheet-title,
 101 .splitview-active .stylesheet-name {
 102   color: var(--theme-highlight-lightorange);
 103 }
 104
 105 .splitview-active .stylesheet-rule-count,
 106 .splitview-active .stylesheet-linked-file,
 107 .splitview-active .stylesheet-saveButton {
 108   color: var(--theme-highlight-pink);
 109 }
 110
 111 .splitview-nav:focus {
 112   outline: 0; /* focus ring is on the stylesheet name */
 113 }
 114
 115 .splitview-nav > li {
 116   -moz-box-orient: horizontal;
 117 }
 118
 119 .splitview-nav > li > hgroup {
 120   display: -moz-box;
 121   -moz-box-orient: vertical;
 122   -moz-box-flex: 1;
 123 }
 124
 125 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
 126   font-style: italic;
 127 }
 128
 129 .splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
 130 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
 131   font-style: italic;
 132 }
 133
 134 .splitview-nav.empty > p {
 135   padding: 0 10px;
 136 }
 137
 138 .stylesheet-sidebar {
 139   max-width: 400px;
 140   min-width: 100px;
 141
 142   border-color: var(--theme-splitter-color);
 143 }
 144
 145 .media-rule-label {
 146   border-bottom: 1px solid var(--theme-splitter-color);
 147 }
 148
 149 .media-rule-label {
 150   display: flex;
 151   padding: 4px;
 152   cursor: pointer;
 153   border-bottom: 1px solid;
 154 }
 155
 156 .media-responsive-mode-toggle {
 157   color: var(--theme-highlight-blue);
 158   text-decoration: underline;
 159 }
 160
 161 .media-rule-line {
 162   padding-inline-start: 4px;
 163 }
 164
 165 .media-condition-unmatched {
 166   color: #8050B0;
 167 /*  opacity: 0.4;*/
 168 }
 169
 170 .media-rule-condition {
 171   flex: 1;
 172   overflow: hidden;
 173 }
 174
 175 .stylesheet-enabled {
 176   display: -moz-box;
 177   cursor: pointer;
 178   padding: 8px 0;
 179   margin: 0 8px;
 180   background-image: url("images/itemToggle.svg");
 181   background-repeat: no-repeat;
 182   background-clip: content-box;
 183   background-position: center;
 184   background-size: 16px;
 185   width: 24px;
 186   height: 40px;
 187 /*  filter: var(--icon-filter);*/
 188 }
 189
 190 .disabled > .stylesheet-enabled {
 191   filter: url(images/filters.svg#disabled-icon-state);
 192 }
 193
 194 .splitview-nav > li > .stylesheet-enabled:focus,
 195 .splitview-nav > li:hover > .stylesheet-enabled {
 196   outline: 0;
 197 }
 198
 199 .stylesheet-linked-file:not(:empty){
 200   margin-inline-end: 0.4em;
 201 }
 202
 203 .stylesheet-linked-file:not(:empty):before {
 204   margin-inline-start: 0.4em;
 205   content: " ↳ ";
 206 }
 207
 208 li.unsaved > hgroup > h1 > .stylesheet-name:before {
 209   content: "*";
 210 }
 211
 212 li.linked-file-error .stylesheet-linked-file {
 213   text-decoration: line-through;
 214 }
 215
 216 li.linked-file-error .stylesheet-linked-file:after {
 217   font-size: 110%;
 218   content: " ✘";
 219 }
 220
 221 li.linked-file-error .stylesheet-rule-count {
 222   visibility: hidden;
 223 }
 224
 225 .stylesheet-more > h3 {
 226   font-size: 11px;
 227   margin-inline-end: 2px;
 228 }
 229
 230 .devtools-searchinput,
 231 .devtools-filterinput {
 232   max-width: 25ex;
 233   font-size: 11px;
 234 }
 235
 236 .placeholder a {
 237   text-decoration: underline;
 238 }
 239
 240 h1,
 241 h2,
 242 h3 {
 243   font-size: inherit;
 244   font-weight: normal;
 245   margin: 0;
 246   padding: 0;
 247 }
 248
 249 @media (max-width: 700px) {
 250   .stylesheet-sidebar {
 251     width: 150px;
 252   }
 253 }
 254
 255 /* portrait mode */
 256 @media (max-width: 550px) {
 257   li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
 258   li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
 259     display: none;
 260   }
 261
 262   .splitview-nav {
 263     box-shadow: none;
 264   }
 265
 266   .splitview-nav > li.splitview-active {
 267     background-size: 0 0, 0 0, auto;
 268   }
 269
 270   .stylesheet-enabled {
 271     padding: 0;
 272     background-position: 0 0;
 273     height: 24px;
 274   }
 275
 276   .disabled > .stylesheet-enabled {
 277     background-position: -24px 0;
 278   }
 279
 280   .splitview-nav > li > hgroup.stylesheet-info {
 281     -moz-box-align: baseline;
 282     -moz-box-orient: horizontal;
 283     -moz-box-flex: 1;
 284   }
 285
 286   .stylesheet-sidebar {
 287     width: 180px;
 288   }
 289
 290   .stylesheet-more {
 291     -moz-box-flex: 1;
 292     -moz-box-pack: end;
 293   }
 294
 295   .stylesheet-more > spacer {
 296     -moz-box-flex: 0;
 297   }
 298 }
 299
 300 /* CSS coverage */
 301 .csscoverage-report {
 302   background-color: var(--theme-contrastsidebar-background);
 303   -moz-box-orient: horizontal;
 304 }
 305
 306 .csscoverage-report-container {
 307   height: 100vh;
 308   padding: 0 10px;
 309   overflow-x: hidden;
 310   overflow-y: auto;
 311   -moz-box-flex: 1;
 312 }
 313
 314 .csscoverage-report-content {
 315   margin: 20px auto;
 316   -moz-column-width: 300px;
 317   font-size: 13px;
 318   -moz-user-select: text;
 319 }
 320
 321 .csscoverage-report-summary,
 322 .csscoverage-report-unused,
 323 .csscoverage-report-optimize {
 324   display: inline-block;
 325 }
 326
 327 .csscoverage-report-unused,
 328 .csscoverage-report-optimize {
 329   flex: 1;
 330   min-width: 0;
 331 }
 332
 333 @media (max-width: 950px) {
 334   .csscoverage-report-content {
 335     display: block;
 336   }
 337
 338   .csscoverage-report-summary {
 339     display: block;
 340     text-align: center;
 341   }
 342 }
 343
 344 .csscoverage-report h1 {
 345   font-size: 120%;
 346 }
 347
 348 .csscoverage-report h2 {
 349   font-size: 110%;
 350 }
 351
 352 .csscoverage-report h1,
 353 .csscoverage-report h2,
 354 .csscoverage-report h3 {
 355   font-weight: bold;
 356   margin: 10px 0;
 357 }
 358
 359 .csscoverage-report code,
 360 .csscoverage-report textarea {
 361   font-family: var(--monospace-font-family);
 362   font-size: inherit;
 363 }
 364
 365 .csscoverage-list:after {
 366   content: ', ';
 367 }
 368
 369 .csscoverage-list:last-child:after {
 370   display: none;
 371 }
 372
 373 .csscoverage-report textarea {
 374   width: 100%;
 375   height: 100px;
 376 }
 377
 378 .csscoverage-report a {
 379   cursor: pointer;
 380   text-decoration: underline;
 381 }
 382
 383 .csscoverage-report > .csscoverage-toolbar {
 384   border: none;
 385   margin: 0;
 386   padding: 0;
 387 }
 388
 389 .csscoverage-report > .csscoverage-toolbarbutton {
 390   min-width: 4em;
 391   min-height: 100vh;
 392   margin: 0;
 393   padding: 0;
 394   border-radius: 0;
 395   border-top: none;
 396   border-bottom: none;
 397   border-inline-start: none;
 398 }
 399
 400 .csscoverage-report .pie-table-chart-container {
 401   -moz-box-orient: vertical;
 402   text-align: start;
 403 }
 404
 405 .chart-colored-blob[name="Used Preload"] {
 406   fill: var(--theme-highlight-pink);
 407   background: var(--theme-highlight-pink);
 408 }
 409
 410 .chart-colored-blob[name=Used] {
 411   fill: var(--theme-highlight-green);
 412   background: var(--theme-highlight-green);
 413 }
 414
 415 .chart-colored-blob[name=Unused] {
 416   fill: var(--theme-highlight-lightorange);
 417   background: var(--theme-highlight-lightorange);
 418 }
 419
 420 /* Undo 'largest' customization */
 421 .pie-chart-slice[largest] {
 422   stroke-width: 1px;
 423   stroke: rgba(0,0,0,0.2);
 424 }
 425
 426 .csscoverage-report .pie-chart-slice {
 427   cursor: default;
 428 }
 429
 430 .csscoverage-report-chart {
 431   margin: 0 20px;
 432 }