public/css/style.css

   1
   2 body {
   3 margin: 0;
   4 margin-bottom: 1em;
   5 padding: 0;
   6 background-color: #ddd;
   7 font-family: "Bitstream Vera Sans", sans-serif;
   8 font-size: 14pt;
   9 color: #333;
  10 }
  11 #splash {
  12     z-index: 1;
  13     position: absolute;
  14     top: 0;
  15     left: 0;
  16     right: 0;
  17     bottom: 0;
  18     background: hsl(0, 0%, 30%);
  19     color: white;
  20     display: grid;
  21     transition: 0.2s;
  22 }
  23 #splash.done {
  24     opacity: 0;
  25     color: black;
  26 }
  27 #splash > p {
  28   margin: auto;
  29   width: max-content;
  30   font-size: 200%;
  31 }
  32
  33 input {
  34     font-size: 14pt;
  35 }
  36
  37 h1 {
  38 font-size: 200%;
  39 color: #000;
  40 }
  41
  42 a  {color: #03c}
  43 a:hover {
  44 background-color: #03c;
  45 color: white;
  46 text-decoration: none;
  47 }
  48
  49 #page {
  50 background-color: #ddd;
  51 max-width: 80em;
  52 margin: auto;
  53 display: grid;
  54 grid-template-columns: auto minmax(25%,20em);
  55 grid-column-gap: 1em;
  56 margin: 0 1em 1em 1em;
  57 }
  58
  59 #content {
  60 background-color: white;
  61 border: 3px solid #aaa;
  62 border-top: none;
  63 padding: 1em;
  64 }
  65
  66 #sidebar {
  67 }
  68
  69 #about, #getting-started {
  70 padding-left: 75px;
  71 padding-right: 30px;
  72 }
  73
  74
  75 #header h1, #header h2 {margin: 0}
  76 #header { font-weight: bold; }
  77 #header h2 {
  78 color: #888;
  79 font-weight: normal;
  80 font-size: 133%;
  81 }
  82
  83 #about h3 {
  84 margin: 0;
  85 margin-bottom: 10px;
  86 font-size: 120%;
  87 }
  88
  89 #sidebar ul {
  90 margin-left: 0;
  91 padding-left: 0;
  92 }
  93 #sidebar ul h3 {
  94 margin-top: 25px;
  95 font-size: 120%;
  96 padding-bottom: 10px;
  97 }
  98 #sidebar li {
  99 list-style-type: none;
 100 border-bottom: 1px solid #ccc;
 101 }
 102 #sidebar ul.links li {
 103 margin-bottom: 5px;
 104 }
 105
 106 h1, h2, h3, h4, h5 {
 107 font-family: sans-serif;
 108 margin: 1.2em 0 0.6em 0;
 109 }
 110
 111 p {
 112 line-height: 1.5em;
 113 margin: 1.6em 0;
 114 }
 115
 116 code, .filepath, .app-info {
 117     font-family: 'Andale Mono', Monaco, 'Liberation Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', monospace;
 118 }
 119
 120 #footer {
 121 padding-top: 2em;
 122 text-align: center;
 123 font-family: sans-serif;
 124 font-size: 10px;
 125 }
 126
 127 #lists-sidebar-item,
 128 .have-lists .have-no-lists {
 129     display: none;
 130 }
 131 .have-lists #lists-sidebar-item { display: block; }
 132 .needs-lists { display: none; }
 133 .have-lists .needs-lists { display: block; }
 134 .have-list-items #list-is-empty { display: none; }
 135 #list-is-empty {
 136     font-style: italic;
 137 }
 138 .table-2-col {
 139   display: grid;
 140   grid-template-columns: auto auto;
 141   column-gap: 1em;
 142 }
 143 .table-2-col > .arrow {
 144   align-self: center;
 145 }
 146 .have-list #list-contents {
 147     display: block;
 148 }
 149 .input-with-button {
 150     display: grid;
 151     grid-template-columns: auto max-content;
 152     column-gap: 1ex;
 153 }
 154
 155 .list-item-row {
 156     display: grid;
 157     grid-template-columns: max-content auto max-content;
 158     column-gap: 1ex;
 159     background: hsla(0, 0%, 90%, 0);
 160     transition: 0.5s;
 161 }
 162 .list-item-row:hover {
 163     background: hsla(0, 0%, 90%, 1);
 164 }
 165 .list-item-row .description { cursor: text; min-width: 2em; }
 166 .list-item-row .edit-trigger {
 167     cursor: pointer;
 168     visibility: hidden;
 169     opacity: 0;
 170     transition: 0.5s;
 171     background: hsla(0, 0%, 80%, 0);
 172 }
 173 .list-item-row:hover .edit-trigger {
 174     visibility: visible;
 175     opacity: 1;
 176     padding: 0 0.5ex;
 177 }
 178 .list-edit-trigger:hover {
 179     background: hsla(0, 0%, 80%, 1);
 180     border-left: 1px solid black;
 181 }
 182
 183 #busy-screen {
 184     display: none;
 185     opacity: 0;
 186     transition: 1s;
 187     width: 100%;
 188     height: 100%;
 189     position: fixed;
 190     top: 0;
 191     left: 0;
 192     background: hsla(0, 0%, 50%, 50%);
 193     z-index: 800;
 194 }
 195 .blocked #busy-screen {
 196     display: block;
 197 }
 198 .busy #busy-screen {
 199     opacity: 1;
 200 }
 201 #busy-screen > div {
 202     position: fixed;
 203     top: 1ex;
 204     right: 1ex;
 205     padding: 1em;
 206     display: inline-block;
 207     background: hsla(0, 0%, 100%, 75%);
 208     border-radius: 1ex;
 209 }
 210 ul#lists > li {
 211     padding-inline-start: .75ex;
 212     min-height: 2em;
 213     cursor: pointer;
 214     border: 1px solid transparent;
 215     border-top: 1px solid #bbb;
 216     transition: 0.25s;
 217     display: grid;
 218     grid-template-columns: auto max-content;
 219     column-gap: 1ex;
 220     align-items: center;
 221 }
 222 ul#lists > li:hover {
 223     border: 1px solid black;
 224 }
 225 ul#lists > li.selected {
 226     background: hsl(0, 0%, 70%);
 227 }
 228 #new-list-item {
 229     margin-top: 1em;
 230 }
 231 span.list-edit-trigger {
 232     visibility: hidden;
 233     opacity: 0;
 234     transition: 0.25s;
 235     height: 100%;
 236     min-width: 2em;
 237     display: grid;
 238     align-items: center;
 239     justify-items: center;
 240 }
 241 ul#lists > li:hover span.list-edit-trigger {
 242     visibility: visible;
 243     opacity: 1;
 244 }
 245
 246 ul#lists > li.editing span.ui-icon-disk { display: inline-block; }
 247
 248 .ui-widget-overlay {
 249     opacity: 0.3;
 250 }
 251 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
 252     float: none;
 253     text-align: right;
 254 }
 255 .ui-dialog-buttonset > button.btn-delete {
 256     float: left;
 257 }
 258
 259 .ui-button.btn-delete:hover {
 260     background: hsl(0, 70%, 92.9%);
 261 }