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 #showall,
  37 #font-showall {
  38   border-radius: 300px;
  39   border: none;
  40   background-color: var(--fonts-button-background);
  41   color: var(--fonts-selected-text);
  42   margin: 3px;
  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 #preview-text-input,
  81 #font-preview-text-input {
  82   font: inherit;
  83   margin-top: 1px;
  84   margin-bottom: 1px;
  85   padding-top: 0;
  86   padding-bottom: 0;
  87   flex: 1;
  88 }
  89
  90 .font {
  91   padding: 10px 10px;
  92 }
  93
  94 .theme-dark .font,
  95 .theme-light .font {
  96   border-bottom: 1px solid #A09090;
  97 }
  98
  99 .font:last-of-type {
 100   border-bottom: 0;
 101 }
 102
 103 .font:nth-child(even) {
 104   background: var(--theme-contrast-background);
 105 }
 106
 107 .font-preview {
 108   margin-left: -4px;
 109   height: 60px;
 110   display: block;
 111 }
 112
 113 .font-info {
 114   display: block;
 115 }
 116
 117 .font-name {
 118   display: inline;
 119 }
 120
 121 .font-css-code {
 122   max-width: 100%;
 123   overflow: hidden;
 124   text-overflow: ellipsis;
 125   padding: 5px;
 126 }
 127
 128 .theme-light .font-css-code,
 129 .theme-light .font-url ,
 130 .theme-dark .font-css-code,
 131 .theme-dark .font-url {
 132   border: 1px solid #A09090;
 133   background: #000000;
 134   color: #336699;
 135 }