some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / 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 .ruleview {
6   height: 100%;
7 }
8
9 .ruleview-rule-source {
10   -moz-padding-start: 5px;
11   text-align: right;
12   float: right;
13   -moz-user-select: none;
14 }
15
16 .ruleview-rule-source,
17 .ruleview-rule-source > label {
18   cursor: pointer;
19 }
20
21 .ruleview-rule-source[unselectable],
22 .ruleview-rule-source[unselectable] > label {
23   cursor: default;
24 }
25
26 .ruleview-rule-source:not([unselectable]):hover {
27   text-decoration: underline;
28 }
29
30 .ruleview-header {
31   border-top-width: 1px;
32   border-bottom-width: 1px;
33   border-top-style: solid;
34   border-bottom-style: solid;
35   padding: 1px 4px;
36   margin-top: 4px;
37   -moz-user-select: none;
38   word-wrap: break-word;
39 }
40
41 .ruleview-rule,
42 #noResults {
43   padding: 2px 4px;
44 }
45
46 /* User agent styles are not editable, display them differently */
47 .theme-dark .ruleview-rule[uneditable=true] {
48   background: #A09090; /* Tab Toolbar */
49 }
50
51 .ruleview-rule[uneditable=true] :focus {
52   outline: none;
53 }
54
55 .ruleview-rule[uneditable=true] .theme-link {
56   color: #336699; /* Blue - Grey */
57 }
58
59 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
60   visibility: hidden;
61 }
62
63 .ruleview-rule[uneditable=true] .ruleview-colorswatch {
64   cursor: default;
65 }
66
67
68 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
69 .ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
70   border-bottom-color: transparent;
71 }
72
73 #noResults {
74   font: message-box;
75   color: #8050B0;
76 }
77
78 .ruleview-rule + .ruleview-rule {
79   border-top-width: 1px;
80   border-top-style: dotted;
81 }
82
83 .ruleview-warning {
84   background: url("alerticon-warning.png");
85   -moz-margin-start: 5px;
86   display: inline-block;
87   vertical-align: top;
88   width: 13px;
89   height: 12px;
90 }
91
92 @media (min-resolution: 2dppx) {
93   .ruleview-warning {
94     background-image: url("alerticon-warning@2x.png");
95   }
96 }
97
98 .ruleview-ruleopen {
99   -moz-padding-end: 5px;
100 }
101
102 .ruleview-ruleclose {
103   cursor: text;
104   padding-right: 20px;
105 }
106
107 .ruleview-propertylist {
108   list-style: none;
109   padding: 0;
110   margin: 0;
111 }
112
113 .ruleview-rule:not(:hover) .ruleview-enableproperty {
114   visibility: hidden;
115 }
116
117 .ruleview-expander {
118   display: inline-block;
119 }
120
121 .ruleview-newproperty {
122   /* (enable checkbox width: 12px) + (expander width: 15px) */
123   -moz-margin-start: 27px;
124 }
125
126 .ruleview-namecontainer,
127 .ruleview-propertycontainer,
128 .ruleview-propertyname,
129 .ruleview-propertyvalue {
130   text-decoration: inherit;
131 }
132
133 .ruleview-computedlist {
134   list-style: none;
135   padding: 0;
136 }
137
138 .ruleview-computed {
139   -moz-margin-start: 35px;
140 }
141
142 .ruleview-colorswatch {
143   cursor: pointer;
144   border-radius: 50%;
145   width: 1em;
146   height: 1em;
147   vertical-align: text-top;
148   -moz-margin-end: 5px;
149   display: inline-block;
150   position: relative;
151 }
152
153 .ruleview-colorswatch::before {
154   content: '';
155   background-color: #9C9CFF;
156   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
157                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
158   background-size: 12px 12px;
159   background-position: 0 0, 6px 6px;
160   position: absolute;
161   border-radius: 50%;
162   top: 0;
163   left: 0;
164   right: 0;
165   bottom: 0;
166   z-index: -1;
167 }
168
169 .ruleview-overridden {
170   text-decoration: line-through;
171 }
172
173 .styleinspector-propertyeditor {
174   border: 1px solid #A09090;
175   padding: 0;
176 }
177
178 .ruleview-property {
179   border-left: 3px solid transparent;
180   clear: right;
181 }
182
183 .ruleview-property  > * {
184   vertical-align: middle;
185 }
186
187 .ruleview-property[dirty] {
188   border-left-color: #9C9CFF; /* Green */
189 }
190
191 .ruleview-namecontainer > .ruleview-propertyname,
192 .ruleview-propertycontainer > .ruleview-propertyvalue {
193   border-bottom: 1px dashed transparent;
194 }
195
196 .ruleview-namecontainer:hover > .ruleview-propertyname,
197 .ruleview-propertycontainer:hover > .ruleview-propertyvalue {
198   border-bottom-color: #008484;
199 }
200
201 .ruleview-selector {
202   word-wrap: break-word;
203 }
204
205 .ruleview-selector-separator, .ruleview-selector-unmatched {
206   color: #8050B0;
207 }