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   -moz-margin-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 .csscoverage-report {
 294   background-color: var(--theme-contrastsidebar-background);
 295   -moz-box-orient: horizontal;
 296 }
 297
 298 .csscoverage-report-container {
 299   height: 100vh;
 300   padding: 0 10px;
 301   overflow-x: hidden;
 302   overflow-y: auto;
 303   -moz-box-flex: 1;
 304 }
 305
 306 .csscoverage-report-content {
 307   margin: 20px auto;
 308   -moz-column-width: 300px;
 309   font-size: 13px;
 310   -moz-user-select: text;
 311 }
 312
 313 .csscoverage-report-summary,
 314 .csscoverage-report-unused,
 315 .csscoverage-report-optimize {
 316   display: inline-block;
 317 }
 318
 319 .csscoverage-report-unused,
 320 .csscoverage-report-optimize {
 321   flex: 1;
 322   min-width: 0;
 323 }
 324
 325 @media (max-width: 950px) {
 326   .csscoverage-report-content {
 327     display: block;
 328   }
 329
 330   .csscoverage-report-summary {
 331     display: block;
 332     text-align: center;
 333   }
 334 }
 335
 336 .csscoverage-report h1 {
 337   font-size: 120%;
 338 }
 339
 340 .csscoverage-report h2 {
 341   font-size: 110%;
 342 }
 343
 344 .csscoverage-report h1,
 345 .csscoverage-report h2,
 346 .csscoverage-report h3 {
 347   font-weight: bold;
 348   margin: 10px 0;
 349 }
 350
 351 .csscoverage-report code,
 352 .csscoverage-report textarea {
 353   font-family: var(--monospace-font-family);
 354   font-size: inherit;
 355 }
 356
 357 .csscoverage-list:after {
 358   content: ', ';
 359 }
 360
 361 .csscoverage-list:last-child:after {
 362   display: none;
 363 }
 364
 365 .csscoverage-report textarea {
 366   width: 100%;
 367   height: 100px;
 368 }
 369
 370 .csscoverage-report a {
 371   cursor: pointer;
 372   text-decoration: underline;
 373 }
 374
 375 .csscoverage-report > .csscoverage-toolbar {
 376   border: none;
 377   margin: 0;
 378   padding: 0;
 379 }
 380
 381 .csscoverage-report > .csscoverage-toolbarbutton {
 382   min-width: 4em;
 383   min-height: 100vh;
 384   margin: 0;
 385   padding: 0;
 386   border-radius: 0;
 387   border-top: none;
 388   border-bottom: none;
 389   border-inline-start: none;
 390 }
 391
 392 .csscoverage-report .pie-table-chart-container {
 393   -moz-box-orient: vertical;
 394   text-align: start;
 395 }
 396
 397 .chart-colored-blob[name="Used Preload"] {
 398   fill: var(--theme-highlight-pink);
 399   background: var(--theme-highlight-pink);;
 400 }
 401
 402 .chart-colored-blob[name=Used] {
 403   fill: var(--theme-highlight-green);
 404   background: var(--theme-highlight-green);
 405 }
 406
 407 .chart-colored-blob[name=Unused] {
 408   fill: var(--theme-highlight-lightorange);
 409   background: var(--theme-highlight-lightorange);
 410 }
 411
 412 /* Undo 'largest' customization */
 413 .pie-chart-slice[largest] {
 414   stroke-width: 1px;
 415   stroke: rgba(0,0,0,0.2);
 416 }
 417
 418 .csscoverage-report .pie-chart-slice {
 419   cursor: default;
 420 }
 421
 422 .csscoverage-report-chart {
 423   margin: 0 20px;
 424 }