LCARStrek/devtools/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 :root {
   6   --fonts-button-text: #000000;
   7   --fonts-button-background: #C09070;
   8 }
   9
  10 #sidebar-panel-fontinspector {
  11   margin: 0;
  12   display: flex;
  13   flex-direction: column;
  14   padding-bottom: 20px;
  15   width: 100%;
  16   height: 100%;
  17 }
  18
  19 #sidebar-panel-fontinspector > .devtools-toolbar {
  20   display: flex;
  21 }
  22
  23 #font-container {
  24   overflow: auto;
  25   flex: auto;
  26 }
  27
  28 #all-fonts {
  29   padding: 0;
  30   margin: 0;
  31 }
  32
  33 #font-showall {
  34   border-radius: 300px;
  35   border: none;
  36   background-color: var(--fonts-button-background);
  37   color: var(--fonts-button-text);
  38   margin: 3px;
  39   padding: 0 6px;
  40   cursor: pointer;
  41   position: absolute;
  42   bottom: 0;
  43   offset-inline-end: 0;
  44 }
  45
  46 .dim > #font-container,
  47 .font:not(.has-code) .font-css-code,
  48 .font-is-local,
  49 .font-is-remote,
  50 .font.is-local .font-format-url,
  51 #font-template {
  52   display: none;
  53 }
  54
  55 .font.is-remote .font-is-remote,
  56 .font.is-local .font-is-local {
  57   display: inline;
  58 }
  59
  60 .font-format::before {
  61   content: "(";
  62 }
  63
  64 .font-format::after {
  65   content: ")";
  66 }
  67
  68 .preview-input-toolbar {
  69   display: flex;
  70   width: 100%;
  71 }
  72
  73 .font-preview-container {
  74   overflow-x: auto;
  75 }
  76
  77 #font-preview-text-input {
  78   margin-top: 1px;
  79   margin-bottom: 1px;
  80   padding-top: 0;
  81   padding-bottom: 0;
  82   flex: 1;
  83 }
  84
  85 .font {
  86   padding: 10px 10px;
  87 }
  88
  89 .theme-dark .font,
  90 .theme-light .font {
  91   border-bottom: 1px solid #A09090;
  92 }
  93
  94 .font:last-of-type {
  95   border-bottom: 0;
  96 }
  97
  98 .font:nth-child(even) {
  99   background: var(--theme-contrast-background);
 100 }
 101
 102 .font-preview {
 103   margin-left: -4px;
 104   height: 60px;
 105   display: block;
 106 }
 107
 108 .font-info {
 109   display: block;
 110 }
 111
 112 .font-name {
 113   display: inline;
 114 }
 115
 116 .font-css-code {
 117   max-width: 100%;
 118   overflow: hidden;
 119   text-overflow: ellipsis;
 120   padding: 5px;
 121 }
 122
 123 .theme-light .font-css-code,
 124 .theme-light .font-url ,
 125 .theme-dark .font-css-code,
 126 .theme-dark .font-url {
 127   border: 1px solid #A09090;
 128   background: #000000;
 129   color: #336699;
 130 }