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/. */
12 .stylesheet-rule-count
,
13 li
.splitview-active
> hgroup
> .stylesheet-more
> h3
> .stylesheet-saveButton
,
14 li:hover
> hgroup
> .stylesheet-more
> h3
> .stylesheet-saveButton
{
18 .devtools-toolbar > spacer {
22 .style-editor-newButton {
23 list-style-image: url
(images/add.svg);
26 .style-editor-importButton {
27 list-style-image: url
(images/import.svg);
31 #style-editor-chrome toolbar
.devtools-searchbox
{
32 /* Adjust default focused styling as it looks a bit off */
35 & > .devtools-filterinput
{
40 .stylesheet-details-container {
46 .stylesheet-editor-status {
49 border-block-start: 1px solid var
(--theme-splitter-color
) !important
;
50 border-block-end: none
!important
;
52 /* Only show the editor toolbar if there's a stylesheet editor */
53 .devtools-main-content:empty + & {
57 .style-editor-prettyPrintButton.devtools-button {
60 * common.css sets a pointer-events:none on disabled button,
61 * but here we want the title to be displayed since it gives extra information.
66 background-image: url
(chrome://devtools
/content
/debugger
/images
/prettyPrint
.svg
);
71 .stylesheet-at-rules-container {
77 .stylesheet-error-message {
81 li
.error
> .stylesheet-info
> .stylesheet-more
> .stylesheet-error-message
{
87 text-decoration: none
;
95 .stylesheet-name > label {
100 .stylesheet-info > h1 {
104 .stylesheet-info a.stylesheet-name:focus-visible {
105 outline-offset: -2px;
108 .splitview-nav > li > hgroup.stylesheet-info {
109 justify-content: center
;
110 /* This prevents stylesheets with long names from breaking the layout of
111 the StyleEditor sources sidebar. */
115 .stylesheet-more > spacer {
121 .stylesheet-rule-count
,
122 .stylesheet-linked-file
,
123 .stylesheet-saveButton {
124 color: var
(--theme-body-color
);
127 .stylesheet-saveButton {
131 text-decoration: underline
;
135 .splitview-active
.stylesheet-title
,
136 .splitview-active
.stylesheet-name
,
137 .theme-light
.splitview-active
.stylesheet-rule-count
,
138 .theme-light
.splitview-active
.stylesheet-linked-file
,
139 .theme-light .splitview-active .stylesheet-saveButton {
140 color: var
(--theme-selection-color
);
143 .splitview-nav:focus {
144 outline: 0; /* focus ring is on the stylesheet name */
147 .splitview-nav > li {
151 .splitview-nav > li > hgroup {
153 flex-direction: column
;
157 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
161 .splitview-nav:-moz-locale-dir
(ltr
) > li
.unsaved
> hgroup
.stylesheet-name:before
,
162 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
166 .splitview-nav.empty > p {
170 .stylesheet-sidebar {
173 border-color: var
(--theme-splitter-color
);
179 * +----------------------------------------------+
180 * | Rule information | line number |
181 * +----------------------------------------------+
183 grid-template-columns: 1fr max-content
;
185 border-bottom: 1px solid var
(--theme-splitter-color
);
187 word-break: break-word
;
190 .media-responsive-mode-toggle {
191 color: var
(--theme-highlight-blue
);
192 text-decoration: underline
;
196 padding-inline-start: 4px;
199 .media-condition-unmatched {
208 background-image: url
(images
/eye-opened
.svg
);
209 background-repeat: no-repeat
;
210 background-clip: content-box
;
211 background-position: center
;
212 background-size: 16px;
217 /* The icon color should always match the text color. */
218 -moz-context-properties: fill
, stroke
;
220 stroke: currentColor
;
223 .disabled > .stylesheet-toggle {
224 background-image: url
(images
/eye-closed
.svg
);
227 .stylesheet-system > .stylesheet-toggle {
228 /* Override the default "color: grayText" from [disabled] browser style */
234 .stylesheet-linked-file:not(:empty){
235 margin-inline-end: 0.4em;
238 .stylesheet-linked-file:not(:empty):before {
239 margin-inline-start: 0.4em;
243 li
.unsaved
> hgroup
> h1
> .stylesheet-name:before
{
247 li
.linked-file-error
.stylesheet-linked-file
{
248 text-decoration: line-through
;
251 li
.linked-file-error
.stylesheet-linked-file:after
{
256 li
.linked-file-error
.stylesheet-rule-count
{
260 .stylesheet-more > h3 {
262 margin-inline-end: 2px;
266 text-decoration: underline
;
278 @media (max-width: 700px) {
279 .stylesheet-sidebar {
285 @media (max-width: 550px) {
286 li
.splitview-active
> hgroup
> .stylesheet-more
> .stylesheet-rule-count
,
287 li:hover
> hgroup
> .stylesheet-more
> .stylesheet-rule-count
{
295 .splitview-nav > li.splitview-active {
296 background-size: 0 0, 0 0, auto
;
304 .splitview-nav > li > hgroup.stylesheet-info {
305 align-items: baseline
;
310 .stylesheet-sidebar {
316 justify-content: flex-end
;
319 .stylesheet-more > spacer {
324 .source-editor-frame {