editor.css

   1 dl {
   2         display: inline-grid;
   3         grid: auto-flow / min-content repeat(10, auto);
   4 }
   5
   6 form > ul {
   7         display: table;
   8         border-spacing: 0 2px;
   9 }
  10 form > ul > li {
  11         display: table-row;
  12 }
  13 form > ul > li > * {
  14         display: table-cell;
  15         padding-right: .5em;
  16 }
  17 form > ul > li > label {
  18         /* th */
  19         text-align: right;
  20 }
  21 form > ul > li > label + * {
  22         /* td */
  23         width: 40em;
  24 }
  25
  26 .multiinput,
  27 input,select {
  28         box-sizing: border-box;
  29         flex-grow: 1;
  30 }
  31 input:not([type=submit]) {
  32         padding: .4rem;
  33         font-family: monospace;
  34 }
  35 input[type=number] {
  36         max-width: 7em;
  37 }
  38 select {
  39         padding: .3rem .2rem; /* TODO: input */
  40 }
  41 #thumbpreview {
  42         width: 300px;
  43         align-self: start;
  44         flex-shrink: 0;
  45 }
  46
  47 ul.popup {
  48         display: flex;
  49         flex-wrap: wrap;
  50         align-items: end;
  51         position: fixed;
  52         left: 0;
  53         top: 0;
  54         margin: auto;
  55         max-height: 90%;
  56         max-width: 90%;
  57         overflow: auto;
  58         background: rgba(0, 0, 0, .8);
  59         border: 1px solid #CCC;
  60 }
  61
  62 h1 {
  63         margin-bottom: 1ex;
  64 }
  65 .inline {
  66         display: inline-flex;
  67         align-items: baseline;
  68         margin: 0 -1ex; /* inner gap */
  69 }
  70 .inline > * {
  71         margin: 0 1ex;
  72 }
  73 .inline .inline {
  74         display: flex;
  75         margin: 0;
  76 }
  77 .inline.multiinput {
  78         flex-wrap: wrap;
  79 }
  80 .multiinput > input {
  81         width: 10em;
  82 }
  83
  84 #nav > ul,
  85 #nav > ul strong,
  86 #nav form {
  87         margin: 1ex 0;
  88         display: inline-block;
  89 }