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
  12 input {
  13     font-size: 14pt;
  14 }
  15
  16 h1 {
  17 font-size: 200%;
  18 color: #000;
  19 }
  20
  21 a  {color: #03c}
  22 a:hover {
  23 background-color: #03c;
  24 color: white;
  25 text-decoration: none;
  26 }
  27
  28 #page {
  29 background-color: #ddd;
  30 width: 750px;
  31 margin: auto;
  32 margin-left: auto;
  33 padding-left: 0px;
  34 margin-right: auto;
  35 }
  36
  37 #content {
  38 background-color: white;
  39 border: 3px solid #aaa;
  40 border-top: none;
  41 padding: 25px;
  42 width: 500px;
  43 }
  44
  45 #sidebar {
  46 float: right;
  47 width: 175px;
  48 }
  49
  50 #about, #getting-started {
  51 padding-left: 75px;
  52 padding-right: 30px;
  53 }
  54
  55
  56 #header h1, #header h2 {margin: 0}
  57 #header { font-weight: bold; }
  58 #header h2 {
  59 color: #888;
  60 font-weight: normal;
  61 font-size: 133%;
  62 }
  63
  64 #about h3 {
  65 margin: 0;
  66 margin-bottom: 10px;
  67 font-size: 120%;
  68 }
  69
  70 #sidebar ul {
  71 margin-left: 0;
  72 padding-left: 0;
  73 }
  74 #sidebar ul h3 {
  75 margin-top: 25px;
  76 font-size: 16px;
  77 padding-bottom: 10px;
  78 border-bottom: 1px solid #ccc;
  79 }
  80 #sidebar li {
  81 list-style-type: none;
  82 }
  83 #sidebar ul.links li {
  84 margin-bottom: 5px;
  85 }
  86
  87 h1, h2, h3, h4, h5 {
  88 font-family: sans-serif;
  89 margin: 1.2em 0 0.6em 0;
  90 }
  91
  92 p {
  93 line-height: 1.5em;
  94 margin: 1.6em 0;
  95 }
  96
  97 code, .filepath, .app-info {
  98     font-family: 'Andale Mono', Monaco, 'Liberation Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', monospace;
  99 }
 100
 101 #footer {
 102 clear: both;
 103 padding-top: 2em;
 104 text-align: center;
 105 padding-right: 160px;
 106 font-family: sans-serif;
 107 font-size: 10px;
 108 }
 109
 110 #lists-sidebar-item,
 111 .have-lists .have-no-lists {
 112     display: none;
 113 }
 114 .have-lists #lists-sidebar-item { display: block; }
 115 div.needs-lists { display: none; }
 116 .have-lists div.needs-lists { display: block; }
 117 .have-list-items #list-is-empty { display: none; }
 118 #list-is-empty {
 119     font-style: italic;
 120 }
 121 .table-2-col {
 122   display: grid;
 123   grid-template-columns: auto auto;
 124   column-gap: 1em;
 125 }
 126 .table-2-col > .arrow {
 127   align-self: center;
 128 }
 129 .have-list #list-contents {
 130     display: block;
 131 }
 132 .input-with-button {
 133     display: grid;
 134     grid-template-columns: auto auto;
 135     column-gap: 1ex;
 136 }
 137 .input-with-button > button {
 138     max-width: max-content;
 139 }
 140
 141 .list-item-row {
 142     display: grid;
 143     grid-template-columns: max-content auto max-content;
 144     column-gap: 1ex;
 145     background: hsla(0, 0%, 90%, 0);
 146     transition: 0.5s;
 147 }
 148 .list-item-row:hover {
 149     background: hsla(0, 0%, 90%, 1);
 150 }
 151 .list-item-row .description { cursor: text; min-width: 2em; }
 152 .list-item-row .edit-trigger {
 153     cursor: pointer;
 154     visibility: hidden;
 155     opacity: 0;
 156     transition: 0.5s;
 157     background: hsla(0, 0%, 80%, 0);
 158 }
 159 .list-item-row:hover .edit-trigger {
 160     visibility: visible;
 161     opacity: 1;
 162     padding: 0 0.5ex;
 163 }
 164 .edit-trigger:hover {
 165     background: hsla(0, 0%, 80%, 1);
 166 }
 167
 168 #busy-screen {
 169     display: none;
 170     opacity: 0;
 171     transition: 1s;
 172     width: 100%;
 173     height: 100%;
 174     position: fixed;
 175     top: 0;
 176     left: 0;
 177     background: hsla(0, 0%, 50%, 50%);
 178     z-index: 800;
 179 }
 180 .blocked #busy-screen {
 181     display: block;
 182 }
 183 .busy #busy-screen {
 184     opacity: 1;
 185 }
 186 #busy-screen > div {
 187     position: fixed;
 188     top: 1ex;
 189     right: 1ex;
 190     padding: 1em;
 191     display: inline-block;
 192     background: hsla(0, 0%, 100%, 75%);
 193     border-radius: 1ex;
 194 }
 195 ul#lists > li {
 196     cursor: pointer;
 197     border: 1px solid transparent;
 198     transition: 0.25s;
 199 }
 200 ul#lists > li:hover {
 201     border: 1px solid black;
 202 }
 203 ul#lists > li.selected {
 204     background: hsl(0, 0%, 70%);
 205 }
 206 #new-list-item {
 207     margin-top: 1em;
 208 }