src/FormView.css

   1 /* Copyright 2020 Blue Static <https://www.bluestatic.org>
   2  * This program is free software licensed under the GNU General Public License,
   3  * version 3.0. The full text of the license can be found in LICENSE.txt.
   4  * SPDX-License-Identifier: GPL-3.0-only
   5  */
   6
   7 :root {
   8   --form-width: 750px;
   9 }
  10
  11 .form {
  12 }
  13
  14 .form-name {
  15   width: var(--form-width);
  16   margin: 0 auto;
  17
  18   border: 3px solid black;
  19   border-bottom-width: 2px;
  20   box-sizing: border-box;
  21   padding: 5px;
  22 }
  23
  24 .table {
  25   width: 100%;
  26   display: flex;
  27   flex-direction: column;
  28 }
  29
  30 .line {
  31   width: var(--form-width);
  32   margin: 0 auto;
  33
  34   border: 1px solid black;
  35   box-sizing: border-box;
  36
  37   display: flex;
  38   flex-direction: row;
  39 }
  40
  41 .line:hover {
  42   background-color: #dfdfdf;
  43 }
  44
  45 .line > * {
  46   align-items: center;
  47   display: flex;
  48 }
  49
  50 .id {
  51   background-color: black;
  52   color: white;
  53   font-weight: bold;
  54   padding: 0 5px;
  55   justify-content: center;
  56   width: 10%;
  57   padding: 3px 0;
  58 }
  59
  60 .line:hover .id {
  61   background-color: #666;
  62 }
  63
  64 .description {
  65   padding: 3px 10px 3px 3px;
  66   flex: 2;
  67 }
  68
  69 .value {
  70   font-family: monospace;
  71   padding: 0 5px;
  72   flex: 1;
  73   justify-content: flex-end;
  74 }
  75
  76 .error {
  77   color: red;
  78   font-weight: bold;
  79 }
  80
  81 .trace-viewer {
  82   background-color: #fffdf1;
  83   padding: 10px;
  84   border: 1px solid red;
  85   box-sizing: border-box;
  86   width: var(--form-width);
  87   margin: 0 auto;
  88 }
  89
  90 .trace-viewer h2 {
  91   margin: 0;
  92   font-size: 14pt;
  93 }
  94
  95 .trace {
  96   font-family: monospace;
  97   white-space: pre;
  98   max-height: 400px;
  99   overflow: scroll;
 100   border: 1px solid #444;
 101   padding: 4px;
 102 }
 103
 104 .large {
 105   width: auto;
 106 }