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#style-editor-chrome { 6 -moz-box-flex: 1; 7} 8 9.splitview-nav > li, 10.stylesheet-info, 11.stylesheet-more, 12.stylesheet-rule-count, 13li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton, 14li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { 15 display: -moz-box; 16} 17 18.devtools-toolbar > spacer { 19 -moz-box-flex: 1; 20} 21 22.style-editor-newButton { 23 list-style-image: url(images/add.svg); 24} 25 26.style-editor-importButton { 27 list-style-image: url(images/import.svg); 28} 29 30.stylesheet-details-container { 31 -moz-box-flex: 1; 32} 33 34.stylesheet-media-container { 35 overflow-y: auto; 36} 37 38.stylesheet-error-message { 39 display: none; 40} 41 42li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { 43 display: block; 44} 45 46.stylesheet-title, 47.stylesheet-name { 48 text-decoration: none; 49} 50 51.stylesheet-name { 52 font-size: 13px; 53 white-space: nowrap; 54} 55 56.stylesheet-name > label { 57 display: inline; 58 cursor: pointer; 59} 60 61.stylesheet-info > h1 { 62 -moz-box-flex: 1; 63} 64 65.splitview-nav > li > hgroup.stylesheet-info { 66 -moz-box-pack: center; 67} 68 69.stylesheet-more > spacer { 70 -moz-box-flex: 1; 71} 72 73.stylesheet-title, 74.stylesheet-name, 75.stylesheet-rule-count, 76.stylesheet-linked-file, 77.stylesheet-saveButton { 78 color: var(--theme-body-color); 79} 80 81.stylesheet-saveButton { 82 display: none; 83 margin-top: 0px; 84 margin-bottom: 0px; 85 text-decoration: underline; 86 cursor: pointer; 87} 88 89.splitview-active .stylesheet-title, 90.splitview-active .stylesheet-name, 91.theme-light .splitview-active .stylesheet-rule-count, 92.theme-light .splitview-active .stylesheet-linked-file, 93.theme-light .splitview-active .stylesheet-saveButton { 94 color: var(--theme-selection-color); 95} 96 97.splitview-nav:focus { 98 outline: 0; /* focus ring is on the stylesheet name */ 99} 100 101.splitview-nav > li { 102 -moz-box-orient: horizontal; 103} 104 105.splitview-nav > li > hgroup { 106 display: -moz-box; 107 -moz-box-orient: vertical; 108 -moz-box-flex: 1; 109} 110 111.splitview-nav > li.unsaved > hgroup .stylesheet-name { 112 font-style: italic; 113} 114 115.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, 116.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { 117 font-style: italic; 118} 119 120.splitview-nav.empty > p { 121 padding: 0 10px; 122} 123 124.stylesheet-sidebar { 125 max-width: 400px; 126 min-width: 100px; 127 border-color: var(--theme-splitter-color); 128} 129 130.media-rule-label { 131 display: flex; 132 padding: 4px; 133 cursor: pointer; 134 border-bottom: 1px solid var(--theme-splitter-color); 135} 136 137.media-responsive-mode-toggle { 138 color: var(--theme-highlight-blue); 139 text-decoration: underline; 140} 141 142.media-rule-line { 143 padding-inline-start: 4px; 144} 145 146.media-condition-unmatched { 147 opacity: 0.4; 148} 149 150.media-rule-condition { 151 flex: 1; 152 overflow: hidden; 153} 154 155.stylesheet-enabled { 156 display: -moz-box; 157 cursor: pointer; 158 padding: 8px 0; 159 margin: 0 8px; 160 background-image: url(images/item-toggle.svg); 161 background-repeat: no-repeat; 162 background-clip: content-box; 163 background-position: center; 164 background-size: 16px; 165 width: 24px; 166 height: 40px; 167 168 /* The icon color should always match the text color. */ 169 -moz-context-properties: fill; 170 fill: currentColor; 171} 172 173.disabled > .stylesheet-enabled { 174 opacity: 0.3; 175} 176 177.stylesheet-linked-file:not(:empty){ 178 margin-inline-end: 0.4em; 179} 180 181.stylesheet-linked-file:not(:empty):before { 182 margin-inline-start: 0.4em; 183 content: " ↳ "; 184} 185 186li.unsaved > hgroup > h1 > .stylesheet-name:before { 187 content: "*"; 188} 189 190li.linked-file-error .stylesheet-linked-file { 191 text-decoration: line-through; 192} 193 194li.linked-file-error .stylesheet-linked-file:after { 195 font-size: 110%; 196 content: " ✘"; 197} 198 199li.linked-file-error .stylesheet-rule-count { 200 visibility: hidden; 201} 202 203.stylesheet-more > h3 { 204 font-size: 11px; 205 margin-inline-end: 2px; 206} 207 208.devtools-searchinput, 209.devtools-filterinput { 210 max-width: 25ex; 211 font-size: 11px; 212} 213 214.placeholder a { 215 text-decoration: underline; 216} 217 218h1, 219h2, 220h3 { 221 font-size: inherit; 222 font-weight: normal; 223 margin: 0; 224 padding: 0; 225} 226 227@media (max-width: 700px) { 228 .stylesheet-sidebar { 229 width: 150px; 230 } 231} 232 233/* portrait mode */ 234@media (max-width: 550px) { 235 li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count, 236 li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count { 237 display: none; 238 } 239 240 .splitview-nav { 241 box-shadow: none; 242 } 243 244 .splitview-nav > li.splitview-active { 245 background-size: 0 0, 0 0, auto; 246 } 247 248 .stylesheet-enabled { 249 padding: 0; 250 height: 24px; 251 } 252 253 .splitview-nav > li > hgroup.stylesheet-info { 254 -moz-box-align: baseline; 255 -moz-box-orient: horizontal; 256 -moz-box-flex: 1; 257 } 258 259 .stylesheet-sidebar { 260 width: 180px; 261 } 262 263 .stylesheet-more { 264 -moz-box-flex: 1; 265 -moz-box-pack: end; 266 } 267 268 .stylesheet-more > spacer { 269 -moz-box-flex: 0; 270 } 271} 272