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 #sidebar-panel-fontinspector {
   6   margin: 0;
   7   display: flex;
   8   flex-direction: column;
   9   padding-bottom: 20px;
  10   width: 100%;
  11   /* Bug 1243598 - Reduce the container height by the tab height to make room
  12      for the tabs above. */
  13   height: calc(100% - 24px);
  14   position: absolute;
  15 }
  16
  17 #sidebar-panel-fontinspector > .devtools-toolbar {
  18   display: flex;
  19 }
  20
  21 #font-container {
  22   overflow: auto;
  23   flex: auto;
  24 }
  25
  26 #all-fonts {
  27   padding: 0;
  28   margin: 0;
  29 }
  30
  31 #showall,
  32 #font-showall {
  33   border-radius: 300px;
  34   border: none;
  35   background-color: var(--in-content-button-background);
  36   color: var(--in-content-selected-text);
  37   margin: 3px;
  38   cursor: pointer;
  39   position: fixed;
  40   bottom: 0;
  41   right: 0;
  42 }
  43
  44 .dim > #font-container,
  45 .font:not(.has-code) .font-css-code,
  46 .font-is-local,
  47 .font-is-remote,
  48 .font.is-local .font-format-url,
  49 #font-template {
  50   display: none;
  51 }
  52
  53 .font.is-remote .font-is-remote,
  54 .font.is-local .font-is-local {
  55   display: inline;
  56 }
  57
  58 .font-format::before {
  59   content: "(";
  60 }
  61
  62 .font-format::after {
  63   content: ")";
  64 }
  65
  66 .preview-input-toolbar {
  67   display: flex;
  68   width: 100%;
  69 }
  70
  71 .font-preview-container {
  72   overflow-x: auto;
  73 }
  74
  75 #preview-text-input,
  76 #font-preview-text-input {
  77   font: inherit;
  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 }