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/. */
5 /* CSS Variables specific to the font editor that aren't defined by the themes */
7 --highlight-color: var
(--blue-55
);
8 --input-background-color: white
;
9 --input-border-color: var
(--grey-30
);
10 --preview-input-background: var
(--theme-toolbar-background
);
11 --slider-thumb-color: var
(--grey-50
);
12 --slider-track-color: var
(--grey-30
);
16 --input-background-color: var
(--grey-70
);
17 --input-border-color: var
(--grey-70
);
18 --preview-input-background: #222225;
19 --slider-thumb-color: var
(--grey-40
);
20 --slider-track-color: var
(--grey-60
);
23 #sidebar-panel-fontinspector {
26 flex-direction: column
;
32 #font-container, #font-editor
{
33 min-width: var
(--min-container-width
);
44 #font-editor summary
{
48 width: -moz-fit-content
;
51 #font-editor details
{
55 #font-editor details
.label-open
,
56 #font-editor details
.label-close
{
60 #font-editor details
[open
] .label-close
,
61 #font-editor details:not
([open
]) .label-open
{
62 display: inline-block
;
65 #font-editor .devtools-sidepanel-no-result
{
76 border: 1px solid var
(--theme-splitter-color
);
77 border-width: 0 0 1px 0;
79 grid-template-columns: 1fr auto
;
80 grid-column-gap: 10px;
85 #font-container .theme-twisty
{
86 display: inline-block
;
88 vertical-align: bottom
;
91 #font-preview-input-container {
92 background: var
(--preview-input-background
);
93 border-bottom: 1px solid var
(--theme-splitter-color
);
98 #font-preview-input-container input
{
99 background-image: none
;
101 padding-inline: 19px;
106 grid-row: 1 / span
2;
119 display: inline-block
;
120 margin-bottom: 0.6em;
122 color: var
(--theme-text-color-alt
);
126 margin-bottom: 0.2em;
134 .font-group .font-name {
138 .font-group .font-name::after {
142 .font-group .font-name:nth-last-child(1)::after {
146 /* Make font-name hoverable as doing so highlights text runs in the page.
147 The hit target is 3px around the font name, which is why we offset them with a -3px
148 horizontal margin so they appear at the same place as they normall would. */
152 margin-inline-start: -3px;
157 background-color: var
(--theme-selection-background-hover
);
161 /* Force text direction in LTR and RTL */
166 text-overflow: ellipsis
;
167 color: var
(--theme-text-color-strong
);
171 .font-css-code .theme-twisty {
172 margin-inline-start: -3px;
175 /* Force arrow direction in LTR and RTL */
176 .font-css-code .theme-twisty:not([open]) {
177 transform: rotate
(-90deg) !important
;
180 .font-css-code-expander::before {
182 display: inline-block
;
187 color: var
(--theme-text-color-inactive
);
192 vertical-align: middle
;
199 justify-content: space-between
;
205 /* Style *all* axis controls with a top separator. See reset below. */
207 border-top: 1px solid var
(--theme-splitter-color
);
211 /* Remove styles form all axis controls aside from the first one.
212 Workaround for :first-of-type which doesn't work with class names. */
213 .font-control-axis ~ .font-control-axis {
218 .font-control-used-fonts {
219 align-items: flex-start
;
220 border-bottom: 1px solid var
(--theme-splitter-color
);
226 .font-control-input {
231 .font-control-input {
237 .font-control-input .devtools-checkbox-toggle {
241 .font-control-label {
242 display: inline-block
;
246 margin-inline-end: 10px;
250 .font-control-label-text {
253 text-overflow: ellipsis
;
257 .font-control-label-detail {
258 color: var
(--theme-text-color-alt
);
266 padding-inline-end: 5px;
271 color: var
(--theme-text-color-strong
);
272 border: 1px solid var
(--input-border-color
);
273 background-color: var
(--input-background-color
);
276 /* Styles for disabled input fields */
277 .font-value-input
[disabled
],
278 .font-value-select
[disabled
],
279 .font-value-slider[disabled] {
283 /* Do not use browser "invalid" state */
284 .font-value-slider:-moz-ui-invalid
,
285 .font-value-input:-moz-ui-invalid {
289 /* Do not show dotted line focus outline */
290 .font-value-input:-moz-focusring {
294 /* Make native number steppers disappear by treating it as text field*/
295 .font-value-input[type=number] {
296 appearance: textfield
;
299 /* Swap around order of value input and unit dropdown for RTL */
300 .font-value-input:dir(rtl) {
305 /* Combined width of .font-value-input and .font-value-select */
306 width: calc
(60px + 3.8em);
307 padding-block: 2px 4px;
310 /* Mock separator because inputs don't have distinguishable borders in dark theme */
311 .theme-dark .font-value-input + .font-value-select:dir(ltr) {
312 margin-inline-start: 2px;
314 .theme-dark .font-value-input + .font-value-select:dir(rtl) {
315 margin-inline-end: 2px;
318 /* Custom styles for <select> elements within the font editor. */
320 background-image: url
(chrome://devtools
/skin
/images
/select-arrow
.svg
);
321 background-repeat: no-repeat
;
322 background-position: right
4px center
;
323 fill: var
(--theme-icon-color
);
324 -moz-context-properties: fill
;
327 padding: 1px 10px 1px 2px;
331 .font-value-input + .font-value-select:dir(ltr) {
332 border-inline-start: none
;
335 /* Swap around order of value input and unit dropdown for RTL */
336 .font-value-input + .font-value-select:dir(rtl) {
337 border-inline-end: none
;
342 .font-value-select:-moz-focusring {
344 text-shadow: 0 0 0 var
(--theme-text-color-strong
);
347 .font-value-input:focus
,
348 .font-value-select:focus {
349 outline: 1px solid var
(--highlight-color
);
350 outline-offset: -1px;
353 .font-value-slider-container {
357 margin-inline-end: 10px;
360 /* Firefox doesn't support pseudo-elements on inputs. Using the container instead. */
361 .font-value-slider-container::before
,
362 .font-value-slider-container::after {
364 color: var
(--theme-text-color-alt
);
371 .font-control-input:hover
.font-value-slider-container::before
,
372 .font-control-input:hover
.font-value-slider-container::after
,
373 .font-control-input:focus-within
.font-value-slider-container::before
,
374 .font-control-input:focus-within .font-value-slider-container::after {
378 .font-value-slider-container::before {
379 content: attr
(data-min
);
380 inset-inline-start: .3em;
383 .font-value-slider-container::after {
384 content: attr
(data-max
);
385 inset-inline-end: .3em;
389 background: transparent
;
395 The value of font-weight goes from 100 to 900 in increments of 100.
396 Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
398 .font-value-slider[name=font-weight] {
400 /* Draw a vertical line to get one notch per background-image instance */
401 background-image: linear-gradient
(90deg, var
(--slider-track-color
) var
(--notch-size
),
403 /* Offset the background so the notch aligns with the center of the slider thumb */
404 background-position: 5px center
;
405 /* Repeat the background-image horizontally */
406 background-repeat: repeat-x
;
407 /* Size the background to get nine visible notch instances. */
408 background-size: calc
(12.5% - var
(--notch-size
) / 2) 7px;
411 .font-value-slider:-moz-focusring {
415 .font-value-slider::-moz-range-thumb {
416 background-color: var
(--slider-thumb-color
);
420 .font-value-slider:focus::-moz-range-thumb {
421 background-color: var
(--highlight-color
);
424 .font-value-slider::-moz-range-track {
425 background-color: var
(--slider-track-color
);
431 color: var
(--theme-comment
);
435 .font-origin.system {
436 text-transform: capitalize
;
439 .font-origin.remote {
441 grid-template-columns: 1fr 20px;
444 .font-origin.remote .url {
445 text-overflow: ellipsis
;
451 .font-origin .copy-icon {
460 background: url
(chrome://devtools
/skin
/images
/copy
.svg
) no-repeat
;
461 background-size: 12px;
462 background-position-x: -1px;
463 -moz-context-properties: fill
;
464 fill: var
(--grey-50
);
467 #font-container .accordion
{
468 border-top: 1px solid var
(--theme-splitter-color
);
471 #font-container .accordion
._content
{
475 #font-container .accordion
+ .accordion
{