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