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