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         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, textarea, select {
  28         box-sizing: border-box;
  29         flex-grow: 1;
  30 }
  31 input:not([type=submit]), textarea {
  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 #convertpreview {
  42         width: 300px;
  43         height: 200px;
  44         align-self: start;
  45         flex-shrink: 0;
  46         position: relative;
  47         overflow: hidden;
  48 }
  49
  50 .popup {
  51         display: flex;
  52         flex-wrap: wrap;
  53         align-items: end;
  54         position: fixed;
  55         left: 0;
  56         top: 0;
  57         margin: auto;
  58         max-height: 90%;
  59         max-width: 90%;
  60         overflow: auto;
  61         background: rgba(0, 0, 0, .8);
  62         border: 1px solid #CCC;
  63 }
  64 img.popup {
  65         height: 100%; /* max assuming landscape */
  66         width: auto; /* keep aspect */
  67 }
  68
  69 h1 {
  70         margin-bottom: 1ex;
  71 }
  72 .inline {
  73         display: inline-flex;
  74         align-items: baseline;
  75         margin: 0 -1ex; /* inner gap */
  76 }
  77 .inline > * {
  78         margin: 0 1ex;
  79 }
  80 .inline .inline {
  81         display: flex;
  82         margin: 0;
  83 }
  84 .inline.multiinput {
  85         flex-wrap: wrap;
  86         justify-content: space-between;
  87 }
  88 .inline.multiinput > :last-child {
  89         text-align: right;
  90         flex-grow: 1;
  91 }
  92 .multiinput > input {
  93         width: 10em;
  94 }
  95
  96 #nav > ul,
  97 #nav > ul strong,
  98 #nav form {
  99         margin: 1ex 0;
 100         display: inline-block;
 101 }
 102
 103 #nav {
 104         position: relative;
 105 }
 106 form#search {
 107         display: block;
 108         position: absolute;
 109         width: 100%;
 110         text-align: right;
 111         top: -7ex;
 112 }
 113 #search input {
 114         width: 100%;
 115         transition: all .5s ease-in;
 116 }
 117 #search:not(:focus-within) input {
 118         width: 0;
 119         padding-left: 0;
 120         padding-right: 0;
 121         visibility: hidden;
 122 }
 123 #search button {
 124         position: absolute;
 125         right: 0;
 126         height: 100%; /* like input */
 127         border: 0;
 128         background: none;
 129         color: inherit;
 130         font: inherit;
 131         cursor: pointer;
 132 }