some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / devtools / ruleview.css
... / ...
CommitLineData
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}