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 .csscoverage-report {
  17   background: #A09090; /* Toolbars */
  18 }
  19
  20 .csscoverage-report-container {
  21   height: 100vh;
  22   padding: 10px;
  23 }
  24
  25 .csscoverage-report-content {
  26   font-size: 13px;
  27   margin: 0 auto;
  28   max-width: 600px;
  29   padding: 0 10px;
  30 }
  31
  32 .csscoverage-report h1,
  33 .csscoverage-report h2,
  34 .csscoverage-report h3 {
  35   font-weight: bold;
  36 }
  37
  38 .csscoverage-report textarea {
  39   width: 100%;
  40   height: 100px;
  41 }
  42
  43 .csscoverage-report > .csscoverage-toolbar {
  44   border: none;
  45   margin: 0;
  46   padding: 0;
  47 }
  48
  49 .csscoverage-report > .csscoverage-toolbarbutton {
  50   min-width: 4em;
  51   min-height: 100vh;
  52   margin: 0;
  53   padding: 0;
  54   border-radius: 0;
  55   border-top: none;
  56   border-bottom: none;
  57   -moz-border-start: none;
  58 }
  59
  60 .stylesheet-title,
  61 .stylesheet-name {
  62   text-decoration: none;
  63   color: #9C9CFF;
  64 }
  65
  66 .stylesheet-name {
  67   font-size: 13px;
  68 }
  69
  70 .stylesheet-rule-count,
  71 .stylesheet-linked-file,
  72 .stylesheet-saveButton {
  73   color: #FF9F00;
  74 }
  75
  76 .stylesheet-saveButton {
  77   text-decoration: underline;
  78   cursor: pointer;
  79 }
  80
  81 .splitview-active .stylesheet-title,
  82 .splitview-active .stylesheet-name {
  83   color: #FFCF00;
  84 }
  85
  86 .splitview-active .stylesheet-rule-count,
  87 .splitview-active .stylesheet-linked-file,
  88 .splitview-active .stylesheet-saveButton {
  89   color: #E7ADE7;
  90 }
  91
  92 .splitview-nav:focus {
  93   outline: 0; /* focus ring is on the stylesheet name */
  94 }
  95
  96 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
  97   font-style: italic;
  98 }
  99
 100 .splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
 101 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
 102   font-style: italic;
 103 }
 104
 105 .splitview-nav.empty > p {
 106   padding: 0 10px;
 107 }
 108
 109 .stylesheet-sidebar {
 110   width: 230px;
 111 }
 112
 113 .stylesheet-sidebar {
 114   border-left: 1px solid #9C9CFF;
 115 }
 116
 117 .media-rule-label {
 118   border-bottom: 1px solid #A09090;
 119 }
 120
 121 .media-rule-label {
 122   padding: 4px;
 123   cursor: pointer;
 124 }
 125
 126 .media-condition-unmatched {
 127   color: #8050B0;
 128 }
 129
 130 .stylesheet-enabled {
 131   padding: 8px 0;
 132   margin: 0 8px;
 133   background-image: url("itemToggle.png");
 134   background-repeat: no-repeat;
 135   background-clip: content-box;
 136   background-position: 0 8px;
 137   background-size: 48px 24px;
 138   width: 24px;
 139   height: 40px;
 140 }
 141
 142 @media (min-resolution: 2dppx) {
 143   .stylesheet-enabled {
 144     background-image: url("itemToggle@2x.png");
 145   }
 146 }
 147
 148 .disabled > .stylesheet-enabled {
 149   background-position: -24px 8px;
 150 }
 151
 152 #style-editor-options {
 153   width: 20px;
 154   overflow: hidden;
 155 }
 156
 157 .splitview-nav > li > .stylesheet-enabled:focus,
 158 .splitview-nav > li:hover > .stylesheet-enabled {
 159   outline: 0;
 160 }
 161
 162 .stylesheet-linked-file:not(:empty){
 163   -moz-margin-end: 0.4em;
 164 }
 165
 166 .stylesheet-linked-file:not(:empty):before {
 167   -moz-margin-start: 0.4em;
 168 }
 169
 170 li.linked-file-error .stylesheet-linked-file:after {
 171   font-size: 110%;
 172 }
 173
 174 .stylesheet-more > h3 {
 175   font-size: 11px;
 176   -moz-margin-end: 2px;
 177 }
 178
 179 .devtools-searchinput {
 180   max-width: 25ex;
 181   font-size: 11px;
 182 }
 183
 184 .placeholder {
 185   color: white;
 186 }
 187
 188 .placeholder a {
 189   text-decoration: underline;
 190 }
 191
 192 h1,
 193 h2,
 194 h3 {
 195   font-size: inherit;
 196   font-weight: normal;
 197   margin: 0;
 198   padding: 0;
 199 }
 200
 201 @media (max-width: 700px) {
 202   .stylesheet-sidebar {
 203     width: 150px;
 204   }
 205 }
 206
 207 /* portrait mode */
 208 @media (max-width: 550px) {
 209   .splitview-nav {
 210     box-shadow: none;
 211   }
 212
 213   .splitview-nav > li.splitview-active {
 214     background-size: 0 0, 0 0, auto;
 215   }
 216
 217   .stylesheet-enabled {
 218     padding: 0;
 219     background-position: 0 0;
 220     height: 24px;
 221   }
 222
 223   .disabled > .stylesheet-enabled {
 224     background-position: -24px 0;
 225   }
 226
 227   .splitview-nav > li > hgroup.stylesheet-info {
 228     -moz-box-align: baseline;
 229   }
 230
 231   .stylesheet-sidebar {
 232     width: 180px;
 233   }
 234 }