LCARStrek/browser/devtools/ruleview.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* CSS Variables specific to this panel that aren't defined by the themes */
   6
   7 .theme-light {
   8   --rule-highlight-background-color: #402800;
   9 }
  10
  11 .ruleview {
  12   height: 100%;
  13 }
  14
  15 .ruleview-rule-source {
  16   text-align: end;
  17   float: right;
  18   -moz-user-select: none;
  19   margin-bottom: 2px;
  20 }
  21
  22 .ruleview-rule-source > label {
  23   cursor: pointer;
  24   margin: 0;
  25 }
  26
  27 .ruleview-rule-source[unselectable],
  28 .ruleview-rule-source[unselectable] > label {
  29   cursor: default;
  30 }
  31
  32 .ruleview-rule-source:not([unselectable]):hover {
  33   text-decoration: underline;
  34 }
  35
  36 .ruleview-header {
  37   border-top-width: 1px;
  38   border-bottom-width: 1px;
  39   border-top-style: solid;
  40   border-bottom-style: solid;
  41   padding: 1px 4px;
  42   margin-top: 4px;
  43   -moz-user-select: none;
  44   word-wrap: break-word;
  45 }
  46
  47 .ruleview-rule,
  48 #noResults {
  49   padding: 2px 4px;
  50 }
  51
  52 /* User agent styles are not editable, display them differently */
  53 .ruleview-rule[uneditable=true] {
  54   background: var(--theme-toolbar-background);
  55 }
  56
  57 .ruleview-rule[uneditable=true] :focus {
  58   outline: none;
  59 }
  60
  61 .ruleview-rule[uneditable=true] .theme-link {
  62   color: var(--theme-text-blue);
  63 }
  64
  65 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
  66   visibility: hidden;
  67 }
  68
  69 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
  70 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
  71   cursor: default;
  72 }
  73
  74 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  75 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
  76 .ruleview-propertyvalue {
  77   border-bottom-color: transparent;
  78 }
  79
  80 #noResults {
  81   font: message-box;
  82   color: #8050B0;
  83 }
  84
  85 .ruleview-rule + .ruleview-rule {
  86   border-top-width: 1px;
  87   border-top-style: dotted;
  88 }
  89
  90 .ruleview-warning {
  91   background: url("alerticon-warning.png");
  92   -moz-margin-start: 5px;
  93   display: inline-block;
  94   vertical-align: top;
  95   width: 13px;
  96   height: 12px;
  97 }
  98
  99 @media (min-resolution: 1.25dppx) {
 100   .ruleview-warning {
 101     background-image: url("alerticon-warning@2x.png");
 102   }
 103 }
 104
 105 .ruleview-ruleopen {
 106   -moz-padding-end: 5px;
 107 }
 108
 109 .ruleview-ruleclose {
 110   cursor: text;
 111   padding-right: 20px;
 112 }
 113
 114 .ruleview-propertylist {
 115   list-style: none;
 116   padding: 0;
 117   margin: 0;
 118 }
 119
 120 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 121   visibility: hidden;
 122 }
 123
 124 .ruleview-expander {
 125   display: inline-block;
 126 }
 127
 128 .ruleview-newproperty {
 129   /* (enable checkbox width: 12px) + (expander width: 15px) */
 130   -moz-margin-start: 27px;
 131 }
 132
 133 .ruleview-namecontainer,
 134 .ruleview-propertyvaluecontainer,
 135 .ruleview-propertyname,
 136 .ruleview-propertyvalue {
 137   text-decoration: inherit;
 138 }
 139
 140 .ruleview-computedlist {
 141   list-style: none;
 142   padding: 0;
 143 }
 144
 145 .ruleview-computed {
 146   -moz-margin-start: 35px;
 147 }
 148
 149 .ruleview-swatch {
 150   cursor: pointer;
 151   border-radius: 50%;
 152   width: 0.9em;
 153   height: 0.9em;
 154   vertical-align: middle;
 155   -moz-margin-end: 5px;
 156   display: inline-block;
 157   position: relative;
 158 }
 159
 160 .ruleview-colorswatch::before {
 161   content: '';
 162   background-color: #9C9CFF;
 163   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 164                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 165   background-size: 12px 12px;
 166   background-position: 0 0, 6px 6px;
 167   position: absolute;
 168   border-radius: 50%;
 169   top: 0;
 170   left: 0;
 171   right: 0;
 172   bottom: 0;
 173   z-index: -1;
 174 }
 175
 176 .ruleview-bezierswatch {
 177   background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
 178   background-size: 1em;
 179 }
 180
 181 @media (min-resolution: 1.25dppx) {
 182   .ruleview-bezierswatch {
 183     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
 184     background-size: 1em;
 185   }
 186 }
 187
 188 .ruleview-overridden {
 189   text-decoration: line-through;
 190 }
 191
 192 .styleinspector-propertyeditor {
 193   border: 1px solid #A09090;
 194   padding: 0;
 195 }
 196
 197 .ruleview-property {
 198   border-left: 3px solid transparent;
 199   clear: right;
 200 }
 201
 202 .ruleview-propertycontainer > * {
 203   vertical-align: middle;
 204 }
 205
 206 .ruleview-property[dirty] {
 207   border-left-color: var(--theme-highlight-green);
 208 }
 209
 210 .ruleview-highlight {
 211   background-color: var(--rule-highlight-background-color);
 212 }
 213
 214 .ruleview-namecontainer > .ruleview-propertyname,
 215 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 216   border-bottom: 1px dashed transparent;
 217 }
 218
 219 .ruleview-namecontainer:hover > .ruleview-propertyname,
 220 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 221   border-bottom-color: #008484;
 222 }
 223
 224 .ruleview-selector {
 225   word-wrap: break-word;
 226 }
 227
 228 .ruleview-selector-separator, .ruleview-selector-unmatched {
 229   color: #8050B0;
 230 }
 231
 232 .ruleview-selectorhighlighter {
 233   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 234   padding-left: 16px;
 235   margin-left: 5px;
 236   cursor: pointer;
 237 }
 238
 239 .ruleview-selectorhighlighter:hover {
 240   background-position: -32px 0;
 241 }
 242
 243 .ruleview-selectorhighlighter:active,
 244 .ruleview-selectorhighlighter.highlighted {
 245   background-position: -16px 0;
 246 }
 247
 248 #pseudo-class-panel:not([hidden]) {
 249   border-bottom: 1px solid var(--theme-splitter-color);
 250 }
 251
 252 #ruleview-add-rule-button::before {
 253   background-image: url("chrome://browser/skin/devtools/add.svg#add");
 254   background-size: cover;
 255 }
 256 #ruleview-add-rule-button:hover::before {
 257   background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
 258 }
 259
 260 #pseudo-class-panel-toggle::before {
 261   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
 262   background-size: cover;
 263 }
 264 #pseudo-class-panel-toggle:hover::before,
 265 #pseudo-class-panel-toggle[checked]::before {
 266   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
 267   filter: none !important;
 268 }