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