devtools/client/themes/fonts.css

   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, #font-editor {
  33   min-width: var(--min-container-width);
  34 }
  35
  36 #font-container {
  37   flex: auto;
  38 }
  39
  40 #font-editor {
  41   padding-bottom: .5em;
  42 }
  43
  44 #font-editor summary {
  45   user-select: none;
  46   cursor: pointer;
  47   margin-bottom: .4em;
  48   width: -moz-fit-content;
  49 }
  50
  51 #font-editor details {
  52   padding-bottom: .5em;
  53 }
  54
  55 #font-editor details .label-open,
  56 #font-editor details .label-close {
  57   display: none;
  58 }
  59
  60 #font-editor details[open] .label-close,
  61 #font-editor details:not([open]) .label-open {
  62   display: inline-block;
  63 }
  64
  65 #font-editor .devtools-sidepanel-no-result {
  66   padding-bottom: 0;
  67 }
  68
  69 .fonts-list {
  70   padding: 0;
  71   margin: 0;
  72   list-style: none;
  73 }
  74
  75 .font {
  76   border: 1px solid var(--theme-splitter-color);
  77   border-width: 0 0 1px 0;
  78   display: grid;
  79   grid-template-columns: 1fr auto;
  80   grid-column-gap: 10px;
  81   padding: 10px 20px;
  82   overflow: auto;
  83 }
  84
  85 #font-container .theme-twisty {
  86   display: inline-block;
  87   cursor: pointer;
  88   vertical-align: bottom;
  89 }
  90
  91 #font-preview-input-container {
  92   background: var(--preview-input-background);
  93   border-bottom: 1px solid var(--theme-splitter-color);
  94   display: flex;
  95   height: 25px;
  96 }
  97
  98 #font-preview-input-container input {
  99   background-image: none;
 100   flex: 1;
 101   padding-inline: 19px;
 102 }
 103
 104 .font-preview {
 105   grid-column: 2;
 106   grid-row: 1 / span 2;
 107   object-fit: contain;
 108   height: 50px;
 109   width: 100%;
 110 }
 111
 112 .font-name,
 113 .font-family-name {
 114   font-weight: normal;
 115   white-space: nowrap;
 116 }
 117
 118 .font-name {
 119   display: inline-block;
 120   margin-bottom: 0.6em;
 121   font-size: 1em;
 122   color: var(--theme-text-color-alt);
 123 }
 124
 125 .font-family-name {
 126   margin-bottom: 0.2em;
 127   font-size: 1.2em;
 128 }
 129
 130 .font-group {
 131   margin-bottom: .5em;
 132 }
 133
 134 .font-group .font-name {
 135   white-space: unset;
 136 }
 137
 138 .font-group .font-name::after {
 139   content: ",";
 140 }
 141
 142 .font-group .font-name:nth-last-child(1)::after {
 143   content: "";
 144 }
 145
 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. */
 149
 150 .font-name {
 151   padding: 3px;
 152   margin-inline-start: -3px;
 153   border-radius: 3px;
 154 }
 155
 156 .font-name:hover {
 157   background-color: var(--theme-selection-background-hover);
 158 }
 159
 160 .font-css-code {
 161   /* Force text direction in LTR and RTL */
 162   direction: ltr;
 163   text-align: left;
 164   margin: 0;
 165   overflow: hidden;
 166   text-overflow: ellipsis;
 167   color: var(--theme-text-color-strong);
 168   grid-column: span 2;
 169 }
 170
 171 .font-css-code .theme-twisty {
 172   margin-inline-start: -3px;
 173 }
 174
 175 /* Force arrow direction in LTR and RTL */
 176 .font-css-code .theme-twisty:not([open]) {
 177   transform: rotate(-90deg) !important;
 178 }
 179
 180 .font-css-code-expander::before {
 181   content: "\2026";
 182   display: inline-block;
 183   width: 12px;
 184   height: 8px;
 185   margin: 0 2px;
 186   line-height: 3px;
 187   color: var(--theme-text-color-inactive);
 188   border-radius: 3px;
 189   border-style: solid;
 190   border-width: 1px;
 191   text-align: center;
 192   vertical-align: middle;
 193 }
 194
 195 .font-control {
 196   display: flex;
 197   flex-direction: row;
 198   flex-wrap: nowrap;
 199   justify-content: space-between;
 200   align-items: center;
 201   padding: 0 20px;
 202   margin: .6em 0;
 203 }
 204
 205 /* Style *all* axis controls with a top separator. See reset below. */
 206 .font-control-axis {
 207   border-top: 1px solid var(--theme-splitter-color);
 208   padding-top: 1.1em;
 209 }
 210
 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 {
 214   border-top: unset;
 215   padding-top: unset;
 216 }
 217
 218 .font-control-used-fonts {
 219   align-items: flex-start;
 220   border-bottom: 1px solid var(--theme-splitter-color);
 221   margin-block: 0 1em;
 222   padding-top: 1em;
 223 }
 224
 225 .font-control-box,
 226 .font-control-input {
 227   flex: 4;
 228   min-width: 100px;
 229 }
 230
 231 .font-control-input {
 232   display: flex;
 233   flex-wrap: nowrap;
 234   align-items: center;
 235 }
 236
 237 .font-control-input .devtools-checkbox-toggle {
 238   margin: 2px 0;
 239 }
 240
 241 .font-control-label {
 242   display: inline-block;
 243   flex: 1;
 244   font-size: 12px;
 245   min-width: 70px;
 246   margin-inline-end: 10px;
 247   user-select: none;
 248 }
 249
 250 .font-control-label-text {
 251   display: block;
 252   overflow: hidden;
 253   text-overflow: ellipsis;
 254   white-space: nowrap;
 255 }
 256
 257 .font-control-label-detail {
 258   color: var(--theme-text-color-alt);
 259   font-size: smaller;
 260 }
 261
 262 .font-value-input {
 263   text-align: right;
 264   width: 60px;
 265   padding: 2px 3px;
 266   padding-inline-end: 5px;
 267 }
 268
 269 .font-value-input,
 270 .font-value-select {
 271   color: var(--theme-text-color-strong);
 272   border: 1px solid var(--input-border-color);
 273   background-color: var(--input-background-color);
 274 }
 275
 276 /* Styles for disabled input fields */
 277 .font-value-input[disabled],
 278 .font-value-select[disabled],
 279 .font-value-slider[disabled] {
 280   opacity: 0.5;
 281 }
 282
 283 /* Do not use browser "invalid" state */
 284 .font-value-slider:-moz-ui-invalid,
 285 .font-value-input:-moz-ui-invalid {
 286   box-shadow: none;
 287 }
 288
 289 /* Do not show dotted line focus outline */
 290 .font-value-input:-moz-focusring {
 291   outline: none;
 292 }
 293
 294 /* Make native number steppers disappear by treating it as text field*/
 295 .font-value-input[type=number] {
 296   appearance: textfield;
 297 }
 298
 299 /* Swap around order of value input and unit dropdown for RTL */
 300 .font-value-input:dir(rtl) {
 301   order: 3;
 302 }
 303
 304 .font-value-label {
 305   /* Combined width of .font-value-input and .font-value-select */
 306   width: calc(60px + 3.8em);
 307   padding-block: 2px 4px;
 308 }
 309
 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;
 313 }
 314 .theme-dark .font-value-input + .font-value-select:dir(rtl) {
 315   margin-inline-end: 2px;
 316 }
 317
 318 /* Custom styles for <select> elements within the font editor. */
 319 .font-value-select {
 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;
 325   appearance: none;
 326   box-shadow: none;
 327   padding: 1px 10px 1px 2px;
 328   min-width: 3.8em;
 329 }
 330
 331 .font-value-input + .font-value-select:dir(ltr) {
 332   border-inline-start: none;
 333 }
 334
 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;
 338   order: 2;
 339   text-align: left;
 340 }
 341
 342 .font-value-select:-moz-focusring {
 343   color: transparent;
 344   text-shadow: 0 0 0 var(--theme-text-color-strong);
 345 }
 346
 347 .font-value-input:focus,
 348 .font-value-select:focus {
 349   outline: 1px solid var(--highlight-color);
 350   outline-offset: -1px;
 351 }
 352
 353 .font-value-slider-container {
 354   flex: 1;
 355   min-width: 50px;
 356   position: relative;
 357   margin-inline-end: 10px;
 358 }
 359
 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 {
 363   user-select: none;
 364   color: var(--theme-text-color-alt);
 365   font-size: smaller;
 366   position: absolute;
 367   bottom: -.6em;
 368   visibility: hidden;
 369 }
 370
 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 {
 375   visibility: visible;
 376 }
 377
 378 .font-value-slider-container::before {
 379   content: attr(data-min);
 380   inset-inline-start: .3em;
 381 }
 382
 383 .font-value-slider-container::after {
 384   content: attr(data-max);
 385   inset-inline-end: .3em;
 386 }
 387
 388 .font-value-slider {
 389   background: transparent;
 390   width: 100%;
 391   margin: 0;
 392 }
 393
 394 /*
 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.
 397 */
 398 .font-value-slider[name=font-weight] {
 399   --notch-size: 3px;
 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),
 402    transparent 0);
 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;
 409 }
 410
 411 .font-value-slider:-moz-focusring {
 412   outline: none;
 413 }
 414
 415 .font-value-slider::-moz-range-thumb {
 416   background-color: var(--slider-thumb-color);
 417   border: 0;
 418 }
 419
 420 .font-value-slider:focus::-moz-range-thumb {
 421   background-color: var(--highlight-color);
 422 }
 423
 424 .font-value-slider::-moz-range-track {
 425   background-color: var(--slider-track-color);
 426   height: 3px;
 427 }
 428
 429 .font-origin {
 430   margin-top: -.25em;
 431   color: var(--theme-comment);
 432   justify-self: start;
 433 }
 434
 435 .font-origin.system {
 436   text-transform: capitalize;
 437 }
 438
 439 .font-origin.remote {
 440   display: grid;
 441   grid-template-columns: 1fr 20px;
 442 }
 443
 444 .font-origin.remote .url {
 445   text-overflow: ellipsis;
 446   overflow: hidden;
 447   white-space: nowrap;
 448   direction: ltr;
 449 }
 450
 451 .font-origin .copy-icon {
 452   border: 0;
 453   padding: 0;
 454   position: relative;
 455   cursor: pointer;
 456   width: 12px;
 457   height: 12px;
 458   place-self: center;
 459
 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);
 465 }
 466
 467 #font-container .accordion {
 468   border-top: 1px solid var(--theme-splitter-color);
 469 }
 470
 471 #font-container .accordion ._content {
 472   padding: 0;
 473 }
 474
 475 #font-container .accordion + .accordion {
 476   border-top: none;
 477 }