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