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         align-self: start;
  44         flex-shrink: 0;
  45 }
  46
  47 .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 img.popup {
  62         height: 100%; /* max assuming landscape */
  63         width: auto; /* keep aspect */
  64 }
  65
  66 h1 {
  67         margin-bottom: 1ex;
  68 }
  69 .inline {
  70         display: inline-flex;
  71         align-items: baseline;
  72         margin: 0 -1ex; /* inner gap */
  73 }
  74 .inline > * {
  75         margin: 0 1ex;
  76 }
  77 .inline .inline {
  78         display: flex;
  79         margin: 0;
  80 }
  81 .inline.multiinput {
  82         flex-wrap: wrap;
  83         justify-content: space-between;
  84 }
  85 .inline.multiinput > :last-child {
  86         text-align: right;
  87         flex-grow: 1;
  88 }
  89 .multiinput > input {
  90         width: 10em;
  91 }
  92
  93 #nav > ul,
  94 #nav > ul strong,
  95 #nav form {
  96         margin: 1ex 0;
  97         display: inline-block;
  98 }
  99
 100 #nav {
 101         position: relative;
 102 }
 103 form#search {
 104         display: block;
 105         position: absolute;
 106         width: 100%;
 107         text-align: right;
 108         top: -7ex;
 109 }
 110 #search input {
 111         width: 100%;
 112         transition: all .5s ease-in;
 113 }
 114 #search:not(:focus-within) input {
 115         width: 0;
 116         padding-left: 0;
 117         padding-right: 0;
 118         visibility: hidden;
 119 }
 120 #search button {
 121         position: absolute;
 122         right: 0;
 123         height: 100%; /* like input */
 124         border: 0;
 125         background: none;
 126         color: inherit;
 127         font: inherit;
 128         cursor: pointer;
 129 }