Add application

static/css/base.css

@@ -0,0 +1,240 @@
+/* X-Small devices (portrait phones, less than 576px) */
+@media screen and (max-width:575.98px) {
+  #logo {
+      min-width: 180px;
+  }
+}
+
+/* Small devices (landscape phones, less than 768px) */
+@media screen and (max-width: 767.98px) and (min-width:576px) {
+  #logo {
+    min-width: 210px;
+  }
+}
+
+/* Medium devices (tablets, less than 992px) */
+@media screen and (max-width: 991.98px) and (min-width:768px) {
+  #logo {
+    min-width: 240px;
+  }
+}
+
+/* Large devices (desktops, less than 1200px) */
+@media screen and (max-width: 1199.98px) and (min-width:992px) {
+  #logo {
+    min-width: 270px;
+  }
+}
+
+/* X-Large devices (large desktops, less than 1400px) */
+@media screen and (max-width: 1399.98px) and (min-width:1200px) {
+  #logo {
+    min-width: 300px;
+  }
+}
+
+/* XX-Large devices (large desktops, more than 1400px) */
+@media screen and (min-width:1400px) {
+  #logo {
+    min-width: 320px;
+  }
+}
+
+@media print {
+  .noprint {
+      display: none;
+  }
+}
+
+body {
+  min-width: 100vw;
+  min-height: 100vh;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+}
+
+#footer {
+  background-color: #ccc;
+}
+
+a, a:link, a:visited, a:hover, a:active {
+  color: #006699;
+  text-decoration: none;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: #666;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  margin-top: 10px;
+  padding: 0;
+  padding-left: 0;
+}
+
+ul.btns > li {
+  padding-bottom: 10px;
+}
+
+ul.arrow {
+  list-style: none;
+  padding: 0 0 10px 20px;
+  margin: 0;
+}
+
+ul.arrow > li {
+  padding: 5px 0 0 20px;
+}
+
+ul.arrow > li:before {
+  content: "➜";
+  position: absolute;
+  margin-left: -24px;
+}
+
+ul.bool {
+  list-style: none;
+  padding: 0;
+  padding-left: 20px;
+  margin: 0;
+}
+
+ul.bool > li {
+  padding-top: 5px;
+  padding-left: 20px;
+}
+
+ul.bool > li.success:before {
+  content: "☑";
+  position: absolute;
+  margin-left: -24px;
+}
+
+ul.bool > li.failure:before {
+  content: "☐";
+  position: absolute;
+  margin-left: -24px;
+}
+
+ul.errorlist {
+  color: red;
+}
+
+#form-login {
+  max-width: 340px;
+}
+
+button.menu {
+  width: 100%;
+}
+
+@font-face {
+  font-family: "fa";
+  src: url("../fonts/fa-regular-400.woff2") format('woff2');
+}
+
+.fatt {
+  font-family: fa;
+  font-weight: 400;
+}
+
+details > summary {
+  color: #006699;
+}
+
+meter {
+  background: lightgrey;
+  width: 200px;
+}
+
+meter.meter-narrow {
+  background: lightgrey;
+  width: 80px;
+}
+
+th.number, td.number {
+  text-align: right;
+}
+
+th.rotate {
+  height: 140px;
+  white-space: nowrap;
+}
+
+th.rotate > div {
+  transform: 
+  translate(25px, -5px)
+  rotate(315deg);
+  width: 30px;
+}
+
+th.rotate > div > span {
+  border-bottom: 2px dotted #000;
+  padding: 5px 10px;
+}
+
+div.date {
+  width: 200px;
+}
+
+form > table > tbody > tr > th {
+  text-align: right;
+}
+
+select.fgrow2 {
+  flex-grow: 2 !important;
+}
+
+span.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 100%;
+}
+
+input.input-right {
+  text-align: right;
+}
+
+input#id_password, input#id_username {
+  max-width: 180px;
+}
+
+.cursor-cell {
+  cursor: cell;
+}
+
+.btn-outline-info, .btn-outline-info:active, .btn-outline-info:focus, .btn-outline-info:visited {
+  border-color: #9a1662 !important;
+  color: #9a1662 !important;
+  background-color: white !important;
+}
+.btn-outline-info:hover {
+  border-color: #9a1662 !important;
+  color: white !important;
+  background-color: #9a1662 !important;
+}
+.btn-outline-info:focus {
+  box-shadow: rgba(154, 22, 98, 0.6) 0 0 0 3px;
+  color: white !important;
+  background-color: #9a1662 !important;
+}
+
+.snap-img {
+  background: #FFF;
+  width: 181px;
+  height: 256px;
+  display: block;
+  margin: 10px auto;
+  border: 1px solid black;
+}
+
+.snaps {
+  height: calc(100vh - 90px);
+  scroll-snap-align: end;
+  scroll-snap-type: y mandatory;
+  scrollbar-color: #dd4444 white;
+  scrollbar-width: auto;
+}