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 #header { 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 }
 171 .list-item-row:hover {
 172     background: hsla(0, 0%, 90%, 1);
 173 }
 174 .list-item-row .description { cursor: text; min-width: 2em; }
 175 .list-item-row .edit-trigger {
 176     cursor: pointer;
 177     visibility: hidden;
 178     opacity: 0;
 179     transition: 0.5s;
 180     background: hsla(0, 0%, 80%, 0);
 181 }
 182 .list-item-row:hover .edit-trigger {
 183     visibility: visible;
 184     opacity: 1;
 185     padding: 0 0.5ex;
 186 }
 187 #list-edit-trigger:hover {
 188     background: hsla(0, 0%, 90%, 1);
 189 }
 190
 191 #busy-screen {
 192     display: none;
 193     opacity: 0;
 194     transition: 1s;
 195     width: 100%;
 196     height: 100%;
 197     position: fixed;
 198     top: 0;
 199     left: 0;
 200     background: hsla(0, 0%, 50%, 50%);
 201     z-index: 800;
 202 }
 203 .blocked #busy-screen {
 204     display: block;
 205 }
 206 .busy #busy-screen {
 207     opacity: 1;
 208 }
 209 #busy-screen > div {
 210     position: fixed;
 211     top: 1ex;
 212     right: 1ex;
 213     padding: 1em;
 214     display: inline-block;
 215     background: hsla(0, 0%, 100%, 75%);
 216     border-radius: 1ex;
 217 }
 218 ul#lists > li {
 219     padding-inline-start: .75ex;
 220     min-height: 2em;
 221     cursor: pointer;
 222     border: 1px solid transparent;
 223     border-top: 1px solid #bbb;
 224     transition: 0.25s;
 225     display: grid;
 226     grid-template-columns: auto max-content;
 227     column-gap: 1ex;
 228     align-items: center;
 229 }
 230 ul#lists > li:hover {
 231     border: 1px solid black;
 232 }
 233 ul#lists > li.selected {
 234     background: hsl(0, 0%, 70%);
 235 }
 236 #new-list-item {
 237     margin-top: 1em;
 238 }
 239 #list-edit-trigger {
 240     transition: 0.25s;
 241     height: 2em;
 242     width: 2em;
 243     display: grid;
 244     align-items: center;
 245     justify-items: center;
 246     border-radius: 0.75ex;
 247 }
 248
 249 ul#lists > li.editing span.ui-icon-disk { display: inline-block; }
 250
 251 ul#list-items {
 252     padding: 0;
 253 }
 254
 255 .ui-widget-overlay {
 256     opacity: 0.3;
 257 }
 258 .ui-dialog .ui-dialog-buttonpane {
 259     padding-left: 1.4em;
 260 }
 261 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
 262     float: none;
 263     text-align: right;
 264 }
 265 .ui-dialog-buttonset > button.btn-delete {
 266     float: left;
 267     margin-right: 2em;
 268 }
 269
 270 .ui-button.btn-delete:hover {
 271     background: hsl(0, 70%, 92.9%);
 272 }
 273
 274 .edit-item-dialog input[type="text"],
 275 .edit-list-dialog input[type="text"] {
 276     width: 100%;
 277     box-sizing: border-box;
 278 }