moving design to final files

static/style.css

@@ -1,8 +1,15 @@
+:root {
+  --ribbon-width: 160px;
+}
+
 /* #################### */
 /* #### structure ##### */
 /* #################### */
 
-html, body { margin: 0; height: 100%; }
+html, body {
+  margin: 0;
+  height: 100%;
+}
 
 main {
   height: 100%;
@@ -11,7 +18,7 @@ main {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 150px 1fr 1fr;
   gap: 0 0;
-  grid-template-areas: "nav nav" "queue queue" "browser result";
+  grid-template-areas: "nav nav" "queue queue" "browser result" "footer footer";
 }
 
 #queue {
@@ -33,6 +40,13 @@ main {
   grid-area: browser;
 }
 
+main footer {
+  grid-area: footer;
+  overflow: auto;
+  background-color: #041936;
+  text-align: right;
+}
+
 table {
   width: 100%;
 }
@@ -43,8 +57,22 @@ table {
 }
 
 #sanic-logo {
-  max-width: 80%;
-  max-height: 80%;
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+#sanic-logo > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+#sanic-logo img {
+  max-width: 75%;
+  max-height: 75%;
+  margin: auto;
 }
 
 .spaced {
@@ -52,14 +80,6 @@ table {
   justify-content: space-between;
 }
 
-/* #################### */
-/* ###### debug ####### */
-/* #################### */
-
-div {
-  border: 1px solid blue;
-}
-
 /* #################### */
 /* ### pretty stuff ### */
 /* #################### */
@@ -132,3 +152,116 @@ div {
   }
 }
 */
+
+html, body {
+  background-color: #09101d;
+  color: #bbb;
+  scrollbar-color: #490b00 #09101d;  /* only in firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
+  font-weight: normal;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12pt;
+}
+
+a {
+  color: #bbb;
+  text-decoration: none;
+}
+
+button {
+  background-color: #28374a;
+  color: #bbb;
+  border-top-color: #545454;
+  border-right-color: #3a3a3a;
+  border-bottom-color: #3a3a3a;
+  border-left-color: #545454;
+}
+
+/* borderless button used in queue */
+.borderless {
+  border: none;
+  background-color: inherit;
+  cursor: pointer;
+}
+
+input[type=text] {
+  background-color: #28374a;
+  color: white;
+  border: 1px solid black;
+  border-right-color: #545454;
+  border-bottom-color: #545454;
+}
+
+thead {
+  background: rgb(15,29,47);
+  background: linear-gradient(0deg, rgba(15,29,47,1) 0%, rgba(15,29,47,1) 50%, rgba(7,14,23,1) 100%);
+}
+
+th {
+  font-weight: bold;
+  padding: 2px 2px 2px 14px;
+  border: solid #1c2c1a;
+  border-width: 0 1px 0 0;
+  cursor: pointer;
+}
+
+/* show and hide action buttons on hover */
+tbody tr td button {
+  display: none;
+}
+
+tbody tr:hover td button {
+  display: inline-block;
+}
+
+/* fixed width for action buttons in queue so it doesn't change size when hovering */
+tbody tr td:last-of-type {
+  min-width: 6em;
+}
+
+tbody td.actions {
+  white-space: nowrap;
+}
+
+#queue {
+  border-bottom: 4px ridge #3a506b;
+}
+
+/* make arrow for currently playing song look nice */
+
+#queue table tr.playing td:first-of-type::before {
+  content: '\2BC8';  // ⯈
+}
+
+#queue table tr td:first-of-type {
+  text-align: right;
+  padding-right: 0.5em;
+}
+
+/* align times */
+
+#queue table tr td:nth-last-of-type(2) {
+  text-align: right;
+}
+
+table tr:nth-child(odd) td {
+  background: #1e1f1a;
+}
+
+table tr:nth-child(even) td {
+  background: #171812;
+}
+
+#queue table tr:nth-child(odd).playing td,
+#queue table tr:nth-child(even).playing td {
+  background-color: #490b00;
+}
+
+table tr:hover td {
+  background-color: #354158 !important; /* TODO: remove !important */
+}
+
+footer svg {
+  color: white;
+  width: 12pt;
+  height: 12pt;
+}