Init

client/assets/app.css

@@ -0,0 +1,52 @@
+@import url('./transitions.css');
+
+.page {
+  width: 100%;
+  height: calc(100% - 64px);
+  max-height: calc(100% - 64px);
+}
+.page.streaming {
+  height: calc(100% - 64px - 165px);
+  max-height: calc(100% - 64px - 165px);
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 8px;
+}
+/* Track */
+::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0);
+}
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #855620; 
+  border-radius: 4px;
+}
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #704922; 
+}
+
+
+.tracksTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #474747;
+}
+.tracksTable tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+.tracksTable tr {
+  background-color: #373838;
+}
+.tracksTable tr:hover {
+  background-color: #474747;
+}
+.tracksTable td {
+  padding: 4px;
+}
+.tracksTable th {
+  padding: 4px;
+  font-size: 0.75rem;
+}

client/assets/transitions.css

@@ -0,0 +1,47 @@
+.slide-enter-active {
+  -moz-transition-duration: 0.1s;
+  -webkit-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -moz-transition-timing-function: ease-in;
+  -webkit-transition-timing-function: ease-in;
+  -o-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+}
+
+.slide-leave-active {
+  -moz-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.slide-enter-to, .slide-leave {
+  max-height: 600px;
+  overflow: hidden;
+}
+
+.slide-enter, .slide-leave-to {
+  overflow: hidden;
+  max-height: 0;
+}
+
+
+
+.menu-enter, .menu-leave-active {
+  transform: translateY(-15px);
+}
+.menu-enter-active {
+  transition: all 0.2s;
+}
+.menu-leave-active {
+  transition: all 0.1s;
+}
+.menu-enter,
+.menu-leave-active {
+  opacity: 0;
+}