fonts.css (11763B)
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 /* CSS Variables specific to the font editor that aren't defined by the themes */ 6 :root { 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); 13 } 14 15 :root.theme-dark { 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); 21 } 22 23 #sidebar-panel-fontinspector { 24 margin: 0; 25 display: flex; 26 flex-direction: column; 27 width: 100%; 28 height: 100%; 29 overflow: auto; 30 } 31 32 #font-container, 33 #font-editor { 34 min-width: var(--min-container-width); 35 } 36 37 #font-container { 38 flex: auto; 39 } 40 41 #font-editor { 42 padding-bottom: 0.5em; 43 } 44 45 #font-editor summary { 46 user-select: none; 47 cursor: pointer; 48 margin-bottom: 0.4em; 49 width: -moz-fit-content; 50 } 51 52 #font-editor details { 53 padding-bottom: 0.5em; 54 } 55 56 #font-editor details .label-open, 57 #font-editor details .label-close { 58 display: none; 59 } 60 61 #font-editor details[open] .label-close, 62 #font-editor details:not([open]) .label-open { 63 display: inline-block; 64 } 65 66 #font-editor .devtools-sidepanel-no-result { 67 padding-bottom: 0; 68 } 69 70 .fonts-list { 71 padding: 0; 72 margin: 0; 73 list-style: none; 74 /* This is the main grid on the <ul> that the <li> will use as subgrid */ 75 display: grid; 76 grid-template-columns: 1fr max-content; 77 grid-column-gap: 10px; 78 } 79 80 .font { 81 display: grid; 82 grid-template-columns: subgrid; 83 grid-column: 1 / -1; 84 padding: 10px 20px; 85 word-break: break-all; 86 87 & + .font { 88 border-block-start: 1px solid var(--theme-splitter-color); 89 } 90 91 .font-name { 92 white-space: normal; 93 } 94 } 95 96 #font-container .theme-twisty { 97 display: inline-block; 98 cursor: pointer; 99 vertical-align: bottom; 100 background-color: transparent; 101 border: none; 102 } 103 104 #font-preview-input-container { 105 background: var(--preview-input-background); 106 border-bottom: 1px solid var(--theme-splitter-color); 107 display: flex; 108 height: 25px; 109 } 110 111 #font-preview-input-container input { 112 background-image: none; 113 flex: 1; 114 padding-inline: 19px; 115 } 116 117 .font-preview { 118 grid-column: 2; 119 grid-row: 1 / span 2; 120 object-fit: contain; 121 height: 50px; 122 width: 100%; 123 } 124 125 .font-name, 126 .font-family-name { 127 font-weight: normal; 128 white-space: nowrap; 129 } 130 131 .font-name { 132 display: inline-block; 133 margin-bottom: 0.6em; 134 font-size: 1em; 135 color: var(--theme-text-color-alt); 136 } 137 138 .font-family-name { 139 margin-bottom: 0.2em; 140 font-size: 1.2em; 141 } 142 143 .font-group { 144 margin-bottom: 0.5em; 145 } 146 147 .font-group .font-name { 148 white-space: unset; 149 /* Some font-name can be very long, holding some kind of serial numbers and configuration. 150 Make sure the string wraps properly to prevent horizontal scrollbars. */ 151 word-break: break-all; 152 } 153 154 .font-group .font-name::after { 155 content: ","; 156 } 157 158 .font-group .font-name:nth-last-child(1)::after { 159 content: ""; 160 } 161 162 /* Make font-name hoverable as doing so highlights text runs in the page. 163 The hit target is 3px around the font name, which is why we offset them with a -3px 164 horizontal margin so they appear at the same place as they normall would. */ 165 166 .font-name { 167 padding: 3px; 168 margin-inline-start: -3px; 169 border-radius: 3px; 170 171 overflow: hidden; 172 text-overflow: ellipsis; 173 max-height: calc(3lh + 3px); 174 -webkit-line-clamp: 3; 175 } 176 177 .font-name:hover { 178 background-color: var(--theme-selection-background-hover); 179 } 180 181 .font-css-code { 182 /* Force text direction in LTR and RTL */ 183 direction: ltr; 184 text-align: left; 185 margin: 0; 186 overflow: hidden; 187 text-overflow: ellipsis; 188 white-space: pre-wrap; 189 word-break: break-word; 190 text-indent: 4ch hanging each-line; 191 color: var(--theme-text-color-strong); 192 grid-column: span 2; 193 } 194 195 .font-css-code .theme-twisty { 196 margin-inline-start: -3px; 197 } 198 199 /* Force arrow direction in LTR and RTL */ 200 .font-css-code .theme-twisty[aria-expanded="false"] { 201 transform: rotate(-90deg) !important; 202 } 203 204 .font-truncated-string-expander { 205 background-color: transparent; 206 border: none; 207 padding: 0; 208 209 &::before { 210 content: "\2026"; 211 display: inline-block; 212 width: 12px; 213 height: 8px; 214 margin: 0 2px; 215 line-height: 3px; 216 color: var(--theme-icon-dimmed-color); 217 border-radius: 3px; 218 border-style: solid; 219 border-width: 1px; 220 text-align: center; 221 vertical-align: middle; 222 } 223 } 224 225 .font-control { 226 display: flex; 227 flex-direction: row; 228 flex-wrap: nowrap; 229 justify-content: space-between; 230 align-items: center; 231 padding: 0 20px; 232 margin: 0.6em 0; 233 } 234 235 /* Style *all* axis controls with a top separator. See reset below. */ 236 .font-control-axis { 237 border-top: 1px solid var(--theme-splitter-color); 238 padding-top: 1.1em; 239 } 240 241 /* Remove styles form all axis controls aside from the first one. 242 Workaround for :first-of-type which doesn't work with class names. */ 243 .font-control-axis ~ .font-control-axis { 244 border-top: unset; 245 padding-top: unset; 246 } 247 248 .font-control-used-fonts { 249 align-items: flex-start; 250 border-bottom: 1px solid var(--theme-splitter-color); 251 margin-block: 0 1em; 252 padding-top: 1em; 253 } 254 255 .font-control-box, 256 .font-control-input { 257 flex: 4; 258 min-width: 100px; 259 } 260 261 .font-control-input { 262 display: flex; 263 flex-wrap: nowrap; 264 align-items: center; 265 } 266 267 .font-control-input .devtools-checkbox-toggle { 268 margin: 2px 0; 269 } 270 271 .font-control-label { 272 display: inline-block; 273 flex: 1; 274 font-size: 12px; 275 min-width: 70px; 276 margin-inline-end: 10px; 277 user-select: none; 278 } 279 280 .font-control-label-text { 281 display: block; 282 overflow: hidden; 283 text-overflow: ellipsis; 284 white-space: nowrap; 285 } 286 287 .font-control-label-detail { 288 color: var(--theme-text-color-alt); 289 font-size: smaller; 290 } 291 292 .font-value-input { 293 text-align: right; 294 width: 60px; 295 padding: 2px 3px; 296 padding-inline-end: 5px; 297 } 298 299 .font-value-input, 300 .font-value-select { 301 color: var(--theme-text-color-strong); 302 border: 1px solid var(--input-border-color); 303 background-color: var(--input-background-color); 304 } 305 306 /* Styles for disabled input fields */ 307 .font-value-input[disabled], 308 .font-value-select[disabled], 309 .font-value-slider[disabled] { 310 opacity: 0.5; 311 } 312 313 /* Do not use browser "invalid" state */ 314 .font-value-slider:-moz-ui-invalid, 315 .font-value-input:-moz-ui-invalid { 316 box-shadow: none; 317 } 318 319 /* Do not show dotted line focus outline */ 320 .font-value-input:-moz-focusring { 321 outline: none; 322 } 323 324 /* Make native number steppers disappear by treating it as text field*/ 325 .font-value-input[type="number"] { 326 appearance: textfield; 327 } 328 329 /* Swap around order of value input and unit dropdown for RTL */ 330 .font-value-input:dir(rtl) { 331 order: 3; 332 } 333 334 .font-value-label { 335 /* Combined width of .font-value-input and .font-value-select */ 336 width: calc(60px + 3.8em); 337 padding-block: 2px 4px; 338 } 339 340 /* Mock separator because inputs don't have distinguishable borders in dark theme */ 341 .theme-dark .font-value-input + .font-value-select:dir(ltr) { 342 margin-inline-start: 2px; 343 } 344 .theme-dark .font-value-input + .font-value-select:dir(rtl) { 345 margin-inline-end: 2px; 346 } 347 348 /* Custom styles for <select> elements within the font editor. */ 349 .font-value-select { 350 background-image: url(chrome://devtools/skin/images/select-arrow.svg); 351 background-repeat: no-repeat; 352 background-position: right 4px center; 353 fill: var(--theme-icon-color); 354 -moz-context-properties: fill; 355 appearance: none; 356 box-shadow: none; 357 padding: 1px 10px 1px 2px; 358 min-width: 3.8em; 359 } 360 361 .font-value-input + .font-value-select:dir(ltr) { 362 border-inline-start: none; 363 } 364 365 /* Swap around order of value input and unit dropdown for RTL */ 366 .font-value-input + .font-value-select:dir(rtl) { 367 border-inline-end: none; 368 order: 2; 369 text-align: left; 370 } 371 372 .font-value-select:-moz-focusring { 373 color: transparent; 374 text-shadow: 0 0 0 var(--theme-text-color-strong); 375 } 376 377 .font-value-input:focus, 378 .font-value-select:focus { 379 outline: 1px solid var(--highlight-color); 380 outline-offset: -1px; 381 } 382 383 .font-value-slider-container { 384 flex: 1; 385 min-width: 50px; 386 position: relative; 387 margin-inline-end: 10px; 388 } 389 390 /* Firefox doesn't support pseudo-elements on inputs. Using the container instead. */ 391 .font-value-slider-container::before, 392 .font-value-slider-container::after { 393 user-select: none; 394 color: var(--theme-text-color-alt); 395 font-size: smaller; 396 position: absolute; 397 bottom: -0.6em; 398 visibility: hidden; 399 } 400 401 .font-control-input:hover .font-value-slider-container::before, 402 .font-control-input:hover .font-value-slider-container::after, 403 .font-control-input:focus-within .font-value-slider-container::before, 404 .font-control-input:focus-within .font-value-slider-container::after { 405 visibility: visible; 406 } 407 408 .font-value-slider-container::before { 409 content: attr(data-min); 410 inset-inline-start: 0.3em; 411 } 412 413 .font-value-slider-container::after { 414 content: attr(data-max); 415 inset-inline-end: 0.3em; 416 } 417 418 .font-value-slider { 419 background: transparent; 420 width: 100%; 421 margin: 0; 422 } 423 424 /* 425 The value of font-weight goes from 100 to 900 in increments of 100. 426 Decorate the slider for font-weight to have 9 vertical notches using a linear gradient. 427 */ 428 .font-value-slider[name="font-weight"] { 429 --notch-size: 3px; 430 /* Draw a vertical line to get one notch per background-image instance */ 431 background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size), transparent 0); 432 /* Offset the background so the notch aligns with the center of the slider thumb */ 433 background-position: 5px center; 434 /* Repeat the background-image horizontally */ 435 background-repeat: repeat-x; 436 /* Size the background to get nine visible notch instances. */ 437 background-size: calc(12.5% - var(--notch-size) / 2) 7px; 438 } 439 440 .font-value-slider:-moz-focusring { 441 outline: none; 442 } 443 444 .font-value-slider::-moz-range-thumb { 445 background-color: var(--slider-thumb-color); 446 border: 0; 447 } 448 449 .font-value-slider:focus::-moz-range-thumb { 450 background-color: var(--highlight-color); 451 } 452 453 .font-value-slider::-moz-range-track { 454 background-color: var(--slider-track-color); 455 height: 3px; 456 } 457 458 .font-origin { 459 margin-top: -0.25em; 460 color: var(--theme-comment); 461 justify-self: start; 462 } 463 464 .font-origin.system { 465 text-transform: capitalize; 466 } 467 468 .font-origin.remote { 469 display: grid; 470 grid-template-columns: 1fr 20px; 471 } 472 473 .font-origin.remote .url { 474 text-overflow: ellipsis; 475 overflow: hidden; 476 white-space: nowrap; 477 direction: ltr; 478 } 479 480 .font-origin .copy-icon { 481 border: 0; 482 padding: 0; 483 position: relative; 484 cursor: pointer; 485 width: 12px; 486 height: 12px; 487 place-self: center; 488 489 background: url(chrome://devtools/skin/images/copy.svg) no-repeat; 490 background-size: 12px; 491 background-position-x: -1px; 492 -moz-context-properties: fill; 493 fill: var(--grey-50); 494 } 495 496 #font-container .accordion { 497 border-top: 1px solid var(--theme-splitter-color); 498 } 499 500 #font-container .accordion ._content { 501 padding: 0; 502 } 503 504 #font-container .accordion + .accordion { 505 border-top: none; 506 } 507 508 .font dl { 509 display: grid; 510 grid-template-columns: auto 1fr; 511 /* Make the gap the width of the twisty so we can place it in the gap */ 512 column-gap: var(--devtools-twisty-size); 513 row-gap: 2px; 514 margin-block: 8px; 515 grid-column: 1 / -1; 516 517 dd { 518 margin-inline-start: 0; 519 word-break: initial; 520 521 /* Offset the expand button to place it inside the gap, so the text of truncated 522 strings still line up with the other values in the grid */ 523 .theme-twisty { 524 margin-inline-start: calc(-1 * var(--devtools-twisty-size)); 525 } 526 } 527 528 & a, 529 a:visited { 530 color: var(--theme-link-color); 531 } 532 }