move

public/static/app.css

@@ -0,0 +1,741 @@
+body {
+  overflow-y: hidden;
+  user-select: none;
+}
+
+#app-body {
+  overflow-y: overlay;
+}
+
+h1 {
+  font-weight: 200;
+  font-size: 3rem;
+}
+
+h4 {
+  margin: 0;
+}
+
+input:invalid {
+  border-color: var(--danger);
+}
+
+footer {
+  opacity: 0.5;
+  padding: 12px;
+  text-align: center;
+}
+
+td.fillCell {
+  display: flex;
+}
+
+td.fillCell>* {
+  flex-grow: 1;
+}
+
+.configValues td>* {
+  margin: 0;
+  vertical-align: middle;
+}
+
+.configValues td:first-child {
+  text-align: right;
+}
+
+.configValues td:last-child {
+  text-align: left;
+}
+
+.selected {
+  background-color: var(--selected);
+}
+
+#albums,
+#artists,
+#boxes,
+#radios,
+#search,
+#welcome {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  overflow-y: overlay;
+  align-content: flex-start;
+}
+
+.componentTitle {
+  position: absolute;
+  bottom: 0;
+  background-color: #ffffffb0;
+  width: 100%;
+  padding: 2px 0;
+  text-align: center;
+}
+
+.favourite {
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+}
+
+.favourite.active {
+  color: var(--yellow);
+}
+
+/*
+  DIALOGS
+*/
+
+#artistViewer #background,
+#albumViewer #background,
+#boxViewer #background {
+  background-size: cover;
+  background-position: center;
+  top: -16px;
+  left: -16px;
+  right: -16px;
+  bottom: -16px;
+  position: absolute;
+  filter: blur(8px);
+  opacity: 0.75;
+}
+
+/*
+  ARTIST
+*/
+.artistCover {
+  height: 128px;
+  width: 256px;
+  background: var(--white);
+}
+
+.artistName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: auto;
+  max-width: 256px;
+}
+
+/*
+  ALBUM
+*/
+.container {
+  align-self: flex-start;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  animation: fadeIn ease 0.3s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0.1;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideToTop {
+  from {
+    margin-top: -47px;
+  }
+
+  to {
+    margin-top: 0px;
+  }
+}
+
+@keyframes slideOverTop {
+  from {
+    margin-top: 0px;
+  }
+
+  to {
+    margin-top: -47px;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+.album>*,
+.album-line>*,
+.artist>*,
+.box>*,
+.radio>* {
+  cursor: pointer;
+}
+
+.albumCover,
+.radioCover {
+  width: 128px;
+  height: 128px;
+  background-color: white;
+}
+
+.albumCover.line {
+  width: 64px;
+  height: 64px;
+}
+
+.albumTitle,
+.radioTitle {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0;
+  max-width: 128px;
+}
+
+.radioUrl {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0;
+  max-width: 128px;
+  font-size: 0.8rem;
+  margin-top: 6px;
+}
+
+/*
+  TRACK
+*/
+.tracks,
+.videos {
+  display: block;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.track,
+.video {
+  max-width: 100%;
+  cursor: pointer;
+  align-items: center;
+  position: relative;
+}
+
+.track {
+  padding: 12px 8px;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.track:hover:not(.selected),
+.video:hover:not(.selected) {
+  background-color: var(--button-hover);
+}
+
+.track input {
+  width: 100%;
+  margin: 4px 0 0 0;
+}
+
+.trackDetails {
+  display: flex;
+  align-items: center;
+}
+
+.trackCover {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  background: var(--white);
+}
+
+.trackCover,
+.videoCover {
+  margin-right: 8px;
+}
+
+.trackTitle,
+.videoTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.radioCover {
+  border-radius: 64px;
+}
+
+.radioTitle {
+  margin-top: 4px;
+  width: 100%;
+  padding: 2px 0;
+  text-align: center;
+}
+
+/*
+  BOX
+*/
+.boxCover {
+  width: 128px;
+  height: 180px;
+  background: var(--white);
+}
+
+.boxTitle {
+  overflow: hidden;
+  margin: auto;
+  max-width: 128px;
+}
+
+.video {
+  margin: 0;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.videoCover {
+  margin: 0;
+  width: 100%;
+}
+
+.videoTitle {
+  width: auto;
+  left: 12px;
+  right: 12px;
+  bottom: 12px;
+}
+
+/*
+  WELCOME
+*/
+
+#welcome #welcomeLeft {
+  min-height: 100%;
+}
+
+#welcome h3 {
+  margin-bottom: 0px;
+  height: 16px;
+}
+
+#welcome #banner {
+  min-height: 256px;
+  background: radial-gradient(circle farthest-side at left 5% top 30px,
+      var(--dark90),
+      var(--dark));
+  color: var(--white);
+  border-bottom: 1px solid var(--light-border);
+}
+
+#welcome #banner h1 {
+  text-shadow: 1px 4px 2px black;
+}
+
+/*
+  HISTORY
+*/
+#history {
+  max-height: 110px;
+  min-height: 110px;
+  overflow-y: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+#history .boxCover {
+  width: 68px;
+  height: 96px;
+}
+
+#history .boxTitle {
+  width: 68px;
+}
+
+#history .albumCover,
+#history .radioCover {
+  width: 96px;
+  height: 96px;
+}
+
+#history .albumTitle,
+#history .radioTitle {
+  max-width: 96px;
+}
+
+#history .artistCover {
+  width: 192px;
+  height: 96px;
+}
+
+#history .artistName {
+  width: 192px;
+}
+
+@media (max-width: 480px),
+(max-height: 480px) {
+  #history {
+    max-height: 220px;
+    min-height: 110px;
+  }
+}
+
+/*
+  NEWEST
+*/
+#newest {
+  border-left: 1px solid var(--dark-border);
+  width: 228px;
+  background-color: var(--white);
+  min-height: 100%;
+}
+
+#newest .boxCover {
+  width: 90px;
+  height: 128px;
+}
+
+#newest .boxTitle {
+  width: 90px;
+}
+
+#mostListened .track {
+  padding: 8px;
+}
+
+#newestVideos {
+  flex-wrap: wrap;
+}
+
+#mostViewed {
+  flex: 2;
+}
+
+#mostViewedVideos {
+  flex-wrap: wrap;
+  max-height: 292px;
+  overflow-y: hidden;
+}
+
+#mostViewedVideos .video {
+  padding: 8px;
+  flex-grow: 1;
+  align-items: flex-start;
+}
+
+#mostViewedVideos .video:hover {
+  background-color: transparent;
+}
+
+#mostViewedVideos .videoCover {
+  width: 156px;
+}
+
+#mostViewedVideos .videoTitle {
+  width: 156px;
+  left: initial;
+  right: initial;
+  bottom: 8px;
+}
+
+/*
+  SEARCH
+*/
+#search .boxCover {
+  width: 90px;
+  height: 128px;
+}
+
+#search .boxTitle {
+  width: 90px;
+}
+
+#search .radioTitle {
+  display: none;
+}
+
+#search .track {
+  padding: 0;
+  margin: 12px;
+  justify-content: flex-end;
+  height: 128px;
+}
+
+#search .track .trackDetails {
+  flex-direction: column-reverse;
+  max-height: 128px;
+}
+
+#search .track .trackDetails .trackTitle {
+  white-space: initial;
+  max-lines: 3;
+  box-sizing: content-box;
+  max-width: 64px;
+  max-height: 96px;
+  text-align: center;
+}
+
+#search .track .trackDetails img {
+  margin: 0;
+  margin-top: 4px;
+  width: 64px;
+  height: 64px;
+}
+
+#search .video .videoCover {
+  height: 128px;
+  width: auto;
+}
+
+#search .video:hover,
+#search .track:hover {
+  background-color: transparent;
+}
+
+#login,
+#setup {
+  background: radial-gradient(circle farthest-side at left 5% top 30px,
+      var(--dark90),
+      var(--dark));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  flex-grow: 1;
+  color: var(--white);
+}
+
+#login form,
+#setup form {
+  text-align: center;
+}
+
+#loginLogin button,
+#loginRegestration button,
+#setup button {
+  display: initial;
+  color: var(--white);
+  margin-top: 8px;
+}
+
+#loginLogin input {
+  font-size: medium;
+}
+
+#login h1,
+#setup h1 {
+  margin-top: 0;
+  text-align: center;
+}
+
+#loginViewer {
+  display: flex;
+  flex-direction: row;
+}
+
+#loginLogo {
+  width: 192px;
+  height: 192px;
+}
+
+#loginLogin {
+  padding-right: 32px;
+  place-items: center;
+}
+
+#loginContinue {
+  border-left: 1px solid var(--light-border);
+  padding-left: 32px;
+  justify-content: center;
+  height: 100%;
+}
+
+#loginGuest button {
+  border-radius: 0px;
+  font-size: x-large;
+  padding: 4px;
+  padding-right: 12px;
+  border-bottom-right-radius: 29px;
+  border-top-right-radius: 29px;
+  border-left: 4px solid var(--primary);
+}
+
+#loginGuest button:hover {
+  background-color: var(--white);
+}
+
+.loadingItem {
+  width: 100%;
+  animation: glow 1s infinite alternate;
+  text-align: center;
+  padding: 16px;
+}
+
+.loading {
+  animation: glow 1s infinite alternate;
+}
+
+.z1 {
+  z-index: 1;
+}
+.z2 {
+  z-index: 2;
+}
+
+@keyframes glow {
+  to {
+    background-color: var(--selected50);
+  }
+}
+
+@media (max-width: 480px) {
+  #app-body {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  #artists .artistCover {
+    min-width: 100%;
+    height: initial;
+    min-height: 128px;
+  }
+
+  #artists .artistName {
+    max-width: initial;
+  }
+
+  nav>div:last-child>input {
+    border-left: none;
+  }
+
+  #loginLogin {
+    padding: 0;
+  }
+
+  #loginContinue {
+    border: none;
+    padding: 0;
+  }
+
+  #loginViewer {
+    flex-direction: column;
+  }
+
+  #newest {
+    margin-top: 8px;
+    border-top: 1px solid var(--dark-border);
+    width: 100%;
+    border-left: none;
+  }
+
+  #mostListened .trackTitle {
+    max-width: 256px;
+  }
+
+  #mostUsed {
+    flex-direction: column;
+  }
+
+  #mostViewedVideos .video {
+    align-items: center;
+  }
+}
+
+@media (max-width: 480px),
+(max-height: 480px) {
+
+  .albumCover,
+  .radioCover {
+    width: 96px;
+    height: 96px;
+  }
+
+  .albumTitle,
+  .radioTitle {
+    max-width: 96px;
+  }
+
+  #search .boxCover {
+    width: 68px;
+    height: 96px;
+  }
+
+  #search .boxTitle {
+    width: 68px;
+  }
+
+  #search .artistCover {
+    width: 192px;
+    height: 96px;
+  }
+
+  #search .artistName {
+    width: 192px;
+  }
+
+  #search .track {
+    height: 96px;
+  }
+
+  #search .video .videoCover {
+    height: 96px;
+    width: auto;
+  }
+
+  #boxes .boxCover {
+    width: 96px;
+    height: 145px;
+  }
+
+  #boxes .boxTitle {
+    width: 96px;
+  }
+
+  #loginLogo {
+    width: 128px;
+    height: 128px;
+  }
+
+  #login button {
+    padding: 8px;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  #welcome #banner {
+    height: 160px;
+    min-height: 160px;
+  }
+
+  #newest {
+    min-height: initial;
+  }
+}
+
+@media (max-height: 480px) {
+  #loginLogo {
+    display: none;
+  }
+
+  #login h1 {
+    margin-bottom: 12px;
+    font-size: 2rem;
+  }
+}