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   background-color: #000000;
  14 }
  15
  16 .stylesheet-title,
  17 .stylesheet-name {
  18   text-decoration: none;
  19   color: var(--theme-highlight-blue);
  20 }
  21
  22 .stylesheet-name {
  23   font-size: 13px;
  24 }
  25
  26 .stylesheet-rule-count,
  27 .stylesheet-linked-file,
  28 .stylesheet-saveButton {
  29   color: var(--theme-body-color);
  30 }
  31
  32 .stylesheet-saveButton {
  33   text-decoration: underline;
  34   cursor: pointer;
  35 }
  36
  37 .splitview-active .stylesheet-title,
  38 .splitview-active .stylesheet-name {
  39   color: var(--theme-highlight-lightorange);
  40 }
  41
  42 .splitview-active .stylesheet-rule-count,
  43 .splitview-active .stylesheet-linked-file,
  44 .splitview-active .stylesheet-saveButton {
  45   color: var(--theme-highlight-pink);
  46 }
  47
  48 .splitview-nav:focus {
  49   outline: 0; /* focus ring is on the stylesheet name */
  50 }
  51
  52 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
  53   font-style: italic;
  54 }
  55
  56 .splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
  57 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
  58   font-style: italic;
  59 }
  60
  61 .splitview-nav.empty > p {
  62   padding: 0 10px;
  63 }
  64
  65 .stylesheet-sidebar {
  66   max-width: 400px;
  67   min-width: 100px;
  68
  69   border-color: #9C9CFF; /* Splitters */
  70 }
  71
  72 .media-rule-label {
  73   border-bottom: 1px solid #A09090; /* Grey */
  74 }
  75
  76 .media-rule-label {
  77   padding: 4px;
  78   cursor: pointer;
  79 }
  80
  81 .media-responsive-mode-toggle {
  82   color: var(--theme-highlight-blue);
  83   text-decoration: underline;
  84 }
  85
  86 .media-rule-line {
  87   -moz-padding-start: 4px;
  88 }
  89
  90 .media-condition-unmatched {
  91   color: #8050B0;
  92 /*  opacity: 0.4;*/
  93 }
  94
  95 .stylesheet-enabled {
  96   padding: 8px 0;
  97   margin: 0 8px;
  98   background-image: url("itemToggle.png");
  99   background-repeat: no-repeat;
 100   background-clip: content-box;
 101   background-position: 0 8px;
 102   background-size: 48px 24px;
 103   width: 24px;
 104   height: 40px;
 105 }
 106
 107 @media (min-resolution: 1.1dppx) {
 108   .stylesheet-enabled {
 109     background-image: url("itemToggle@2x.png");
 110   }
 111 }
 112
 113 .disabled > .stylesheet-enabled {
 114   background-position: -24px 8px;
 115 }
 116
 117 .splitview-nav > li > .stylesheet-enabled:focus,
 118 .splitview-nav > li:hover > .stylesheet-enabled {
 119   outline: 0;
 120 }
 121
 122 .stylesheet-linked-file:not(:empty){
 123   -moz-margin-end: 0.4em;
 124 }
 125
 126 .stylesheet-linked-file:not(:empty):before {
 127   -moz-margin-start: 0.4em;
 128 }
 129
 130 li.linked-file-error .stylesheet-linked-file:after {
 131   font-size: 110%;
 132 }
 133
 134 .stylesheet-more > h3 {
 135   font-size: 11px;
 136   -moz-margin-end: 2px;
 137 }
 138
 139 .devtools-searchinput {
 140   max-width: 25ex;
 141   font-size: 11px;
 142 }
 143
 144 .placeholder a {
 145   text-decoration: underline;
 146 }
 147
 148 h1,
 149 h2,
 150 h3 {
 151   font-size: inherit;
 152   font-weight: normal;
 153   margin: 0;
 154   padding: 0;
 155 }
 156
 157 @media (max-width: 700px) {
 158   .stylesheet-sidebar {
 159     width: 150px;
 160   }
 161 }
 162
 163 /* portrait mode */
 164 @media (max-width: 550px) {
 165   .splitview-nav {
 166     box-shadow: none;
 167   }
 168
 169   .splitview-nav > li.splitview-active {
 170     background-size: 0 0, 0 0, auto;
 171   }
 172
 173   .stylesheet-enabled {
 174     padding: 0;
 175     background-position: 0 0;
 176     height: 24px;
 177   }
 178
 179   .disabled > .stylesheet-enabled {
 180     background-position: -24px 0;
 181   }
 182
 183   .splitview-nav > li > hgroup.stylesheet-info {
 184     -moz-box-align: baseline;
 185   }
 186
 187   .stylesheet-sidebar {
 188     width: 180px;
 189   }
 190 }
 191
 192 .csscoverage-report {
 193   background-color: var(--theme-contrastsidebar-background);
 194 }
 195
 196 .csscoverage-report-container {
 197   height: 100vh;
 198   padding: 10px;
 199 }
 200
 201 .csscoverage-report-content {
 202   margin: 20px auto;
 203   -moz-column-width: 300px;
 204   font-size: 13px;
 205 }
 206
 207 .csscoverage-report h1 {
 208   font-size: 120%;
 209 }
 210
 211 .csscoverage-report h2 {
 212   font-size: 110%;
 213 }
 214
 215 .csscoverage-report h1,
 216 .csscoverage-report h2,
 217 .csscoverage-report h3 {
 218   font-weight: bold;
 219   margin: 10px 0;
 220 }
 221
 222 .csscoverage-list:after {
 223   content: ', ';
 224 }
 225
 226 .csscoverage-list:last-child:after {
 227   display: none;
 228 }
 229
 230 .csscoverage-report textarea {
 231   width: 100%;
 232   height: 100px;
 233 }
 234
 235 .csscoverage-report a {
 236   cursor: pointer;
 237   text-decoration: underline;
 238 }
 239
 240 .csscoverage-report > .csscoverage-toolbar {
 241   border: none;
 242   margin: 0;
 243   padding: 0;
 244 }
 245
 246 .csscoverage-report > .csscoverage-toolbarbutton {
 247   min-width: 4em;
 248   min-height: 100vh;
 249   margin: 0;
 250   padding: 0;
 251   border-radius: 0;
 252   border-top: none;
 253   border-bottom: none;
 254   -moz-border-start: none;
 255 }
 256
 257 .chart-colored-blob[name="Used Preload"] {
 258   fill: var(--theme-highlight-pink);
 259   background: var(--theme-highlight-pink);;
 260 }
 261
 262 .chart-colored-blob[name=Used] {
 263   fill: var(--theme-highlight-green);
 264   background: var(--theme-highlight-green);
 265 }
 266
 267 .chart-colored-blob[name=Unused] {
 268   fill: var(--theme-highlight-lightorange);
 269   background: var(--theme-highlight-lightorange);
 270 }
 271
 272 /* Undo 'largest' customization */
 273 .pie-chart-slice[largest] {
 274   stroke-width: 1px;
 275   stroke: rgba(0,0,0,0.2);
 276 }
 277
 278 .csscoverage-report .pie-chart-slice {
 279   cursor: default;
 280 }
 281
 282 .csscoverage-report-chart {
 283   margin: 0 50px;
 284 }