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: 12pt;
   9 color: #333;
  10 }
  11
  12 input {
  13     font-size: 12pt;
  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, .have-lists #no-lists-sidebar-item {
 111     display: none;
 112 }
 113 .have-lists #lists-sidebar-item { display: block; }
 114 .table-2-col {
 115   display: grid;
 116   grid-template-columns: auto auto;
 117   column-gap: 1em;
 118 }
 119 .table-2-col > .arrow {
 120   align-self: center;
 121 }
 122 #list-contents { display: none; }
 123 .have-list #list-contents {
 124     display: block;
 125 }
 126 #new-list-sidebar-item > div {
 127     display: grid;
 128     grid-template-columns: auto auto;
 129     column-gap: 1ex;
 130 }
 131
 132 #busy-screen {
 133     display: none;
 134     opacity: 0;
 135     transition: 1s;
 136     width: 100%;
 137     height: 100%;
 138     position: fixed;
 139     top: 0;
 140     left: 0;
 141     background: hsla(0, 0%, 50%, 50%);
 142     z-index: 800;
 143 }
 144 .blocked #busy-screen {
 145     display: block;
 146 }
 147 .busy #busy-screen {
 148     opacity: 1;
 149 }
 150 #busy-screen > div {
 151     position: fixed;
 152     top: 1ex;
 153     right: 1ex;
 154     padding: 1em;
 155     display: inline-block;
 156     background: hsla(0, 0%, 100%, 75%);
 157     border-radius: 1ex;
 158 }
 159