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