word/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 }
   9 form > ul > li {
  10         display: table-row;
  11 }
  12 form > ul > li > * {
  13         display: table-cell;
  14         padding-right: .5em;
  15 }
  16 form > ul > li > label {
  17         /* th */
  18         text-align: right;
  19 }
  20 form > ul > li > label + * {
  21         /* td */
  22         width: 40em;
  23 }
  24
  25 .multiinput,
  26 input, textarea, select {
  27         box-sizing: border-box;
  28         flex-grow: 1;
  29 }
  30 input:not([type=submit]), textarea {
  31         padding: .4rem;
  32         font-family: monospace;
  33 }
  34 input[type=number] {
  35         max-width: 7em;
  36 }
  37 select {
  38         padding: .3rem .2rem; /* TODO: input */
  39 }
  40 #convertpreview {
  41         width: 300px;
  42         height: 200px;
  43         align-self: start;
  44         flex-shrink: 0;
  45         position: relative;
  46         overflow: hidden;
  47 }
  48
  49 .popup {
  50         display: flex;
  51         flex-wrap: wrap;
  52         justify-content: space-evenly;
  53         gap: 1em;
  54         position: fixed;
  55         left: 0;
  56         top: 0;
  57         max-width: 100%;
  58         max-height: 100%; /* scroll */
  59         margin: auto;
  60         overflow: auto;
  61         background: rgba(0, 0, 0, .8);
  62         border: 1px solid #CCC;
  63         z-index: 1;
  64 }
  65 .popup img {
  66         height: 20vh;
  67         width: auto;
  68 }
  69 img {
  70         max-width: 100%;
  71         object-fit: contain;
  72 }
  73
  74 h1 {
  75         margin-bottom: 1ex;
  76 }
  77 .inline {
  78         display: inline-flex;
  79         align-items: baseline;
  80         margin: 0 -1ex; /* inner gap */
  81 }
  82 .inline > * {
  83         margin: 1px 1ex;
  84 }
  85 .inline .inline {
  86         display: flex;
  87         margin: 0;
  88 }
  89 .inline.multiinput {
  90         flex-wrap: wrap;
  91         justify-content: space-between;
  92 }
  93 .inline.multiinput > :last-child {
  94         text-align: right;
  95         flex-grow: 1;
  96 }
  97 .multiinput > input {
  98         width: 10em;
  99 }
 100
 101 #nav > ul,
 102 #nav > ul strong,
 103 #nav form {
 104         margin: 1ex 0;
 105         display: inline-block;
 106 }
 107
 108 #nav {
 109         position: relative;
 110 }
 111 form#search {
 112         display: block;
 113         position: absolute;
 114         width: 100%;
 115         text-align: right;
 116         top: -7ex;
 117 }
 118 #search input {
 119         width: 100%;
 120         transition: all .5s ease-in;
 121 }
 122 #search:not(:focus-within) input {
 123         width: 0;
 124         padding-left: 0;
 125         padding-right: 0;
 126         visibility: hidden;
 127 }
 128 #search button {
 129         position: absolute;
 130         right: 0;
 131         height: 100%; /* like input */
 132         border: 0;
 133         background: none;
 134         color: inherit;
 135         font: inherit;
 136         cursor: pointer;
 137 }