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-selected-text);
  41   margin: 3px;
  42   cursor: pointer;
  43   position: fixed;
  44   bottom: 0;
  45   right: 0;
  46 }
  47
  48 .dim > #font-container,
  49 .font:not(.has-code) .font-css-code,
  50 .font-is-local,
  51 .font-is-remote,
  52 .font.is-local .font-format-url,
  53 #font-template {
  54   display: none;
  55 }
  56
  57 .font.is-remote .font-is-remote,
  58 .font.is-local .font-is-local {
  59   display: inline;
  60 }
  61
  62 .font-format::before {
  63   content: "(";
  64 }
  65
  66 .font-format::after {
  67   content: ")";
  68 }
  69
  70 .preview-input-toolbar {
  71   display: flex;
  72   width: 100%;
  73 }
  74
  75 .font-preview-container {
  76   overflow-x: auto;
  77 }
  78
  79 #font-preview-text-input {
  80   font: inherit;
  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 }