LCARStrek/browser/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-rule-line {
  82   -moz-padding-start: 4px;
  83 }
  84
  85 .media-condition-unmatched {
  86   color: #8050B0;
  87 }
  88
  89 .stylesheet-enabled {
  90   padding: 8px 0;
  91   margin: 0 8px;
  92   background-image: url("itemToggle.png");
  93   background-repeat: no-repeat;
  94   background-clip: content-box;
  95   background-position: 0 8px;
  96   background-size: 48px 24px;
  97   width: 24px;
  98   height: 40px;
  99 }
 100
 101 @media (min-resolution: 2dppx) {
 102   .stylesheet-enabled {
 103     background-image: url("itemToggle@2x.png");
 104   }
 105 }
 106
 107 .disabled > .stylesheet-enabled {
 108   background-position: -24px 8px;
 109 }
 110
 111 .splitview-nav > li > .stylesheet-enabled:focus,
 112 .splitview-nav > li:hover > .stylesheet-enabled {
 113   outline: 0;
 114 }
 115
 116 .stylesheet-linked-file:not(:empty){
 117   -moz-margin-end: 0.4em;
 118 }
 119
 120 .stylesheet-linked-file:not(:empty):before {
 121   -moz-margin-start: 0.4em;
 122 }
 123
 124 li.linked-file-error .stylesheet-linked-file:after {
 125   font-size: 110%;
 126 }
 127
 128 .stylesheet-more > h3 {
 129   font-size: 11px;
 130   -moz-margin-end: 2px;
 131 }
 132
 133 .devtools-searchinput {
 134   max-width: 25ex;
 135   font-size: 11px;
 136 }
 137
 138 .placeholder a {
 139   text-decoration: underline;
 140 }
 141
 142 h1,
 143 h2,
 144 h3 {
 145   font-size: inherit;
 146   font-weight: normal;
 147   margin: 0;
 148   padding: 0;
 149 }
 150
 151 @media (max-width: 700px) {
 152   .stylesheet-sidebar {
 153     width: 150px;
 154   }
 155 }
 156
 157 /* portrait mode */
 158 @media (max-width: 550px) {
 159   .splitview-nav {
 160     box-shadow: none;
 161   }
 162
 163   .splitview-nav > li.splitview-active {
 164     background-size: 0 0, 0 0, auto;
 165   }
 166
 167   .stylesheet-enabled {
 168     padding: 0;
 169     background-position: 0 0;
 170     height: 24px;
 171   }
 172
 173   .disabled > .stylesheet-enabled {
 174     background-position: -24px 0;
 175   }
 176
 177   .splitview-nav > li > hgroup.stylesheet-info {
 178     -moz-box-align: baseline;
 179   }
 180
 181   .stylesheet-sidebar {
 182     width: 180px;
 183   }
 184 }
 185
 186 .csscoverage-report {
 187   background-color: var(--theme-contrastsidebar-background);
 188 }
 189
 190 .csscoverage-report-container {
 191   height: 100vh;
 192   padding: 10px;
 193 }
 194
 195 .csscoverage-report-content {
 196   margin: 20px auto;
 197   -moz-column-width: 300px;
 198   font-size: 13px;
 199 }
 200
 201 .csscoverage-report h1 {
 202   font-size: 120%;
 203 }
 204
 205 .csscoverage-report h2 {
 206   font-size: 110%;
 207 }
 208
 209 .csscoverage-report h1,
 210 .csscoverage-report h2,
 211 .csscoverage-report h3 {
 212   font-weight: bold;
 213   margin: 10px 0;
 214 }
 215
 216 .csscoverage-list:after {
 217   content: ', ';
 218 }
 219
 220 .csscoverage-list:last-child:after {
 221   display: none;
 222 }
 223
 224 .csscoverage-report textarea {
 225   width: 100%;
 226   height: 100px;
 227 }
 228
 229 .csscoverage-report a {
 230   cursor: pointer;
 231   text-decoration: underline;
 232 }
 233
 234 .csscoverage-report > .csscoverage-toolbar {
 235   border: none;
 236   margin: 0;
 237   padding: 0;
 238 }
 239
 240 .csscoverage-report > .csscoverage-toolbarbutton {
 241   min-width: 4em;
 242   min-height: 100vh;
 243   margin: 0;
 244   padding: 0;
 245   border-radius: 0;
 246   border-top: none;
 247   border-bottom: none;
 248   -moz-border-start: none;
 249 }
 250
 251 .chart-colored-blob[name="Used Preload"] {
 252   fill: var(--theme-highlight-pink);
 253   background: var(--theme-highlight-pink);;
 254 }
 255
 256 .chart-colored-blob[name=Used] {
 257   fill: var(--theme-highlight-green);
 258   background: var(--theme-highlight-green);
 259 }
 260
 261 .chart-colored-blob[name=Unused] {
 262   fill: var(--theme-highlight-lightorange);
 263   background: var(--theme-highlight-lightorange);
 264 }
 265
 266 /* Undo 'largest' customization */
 267 .pie-chart-slice[largest] {
 268   stroke-width: 1px;
 269   stroke: rgba(0,0,0,0.2);
 270 }
 271
 272 .csscoverage-report .pie-chart-slice {
 273   cursor: default;
 274 }
 275
 276 .csscoverage-report-chart {
 277   margin: 0 50px;
 278 }