public/css/style.css

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