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