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