mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
break down global.scss into smaller files
+ rename css folder to scss
This commit is contained in:
geoffrey45
parent
c2783fe540
commit
b070601d4d
28
src/App.vue
28
src/App.vue
@ -2,7 +2,7 @@
|
||||
<ContextMenu />
|
||||
<Modal />
|
||||
<Notification />
|
||||
<div class="l-container">
|
||||
<div id="app-grid">
|
||||
<div class="l-sidebar rounded">
|
||||
<Logo />
|
||||
<Navigation />
|
||||
@ -21,24 +21,24 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute, RouteLocationNormalized } from "vue-router";
|
||||
import { onStartTyping } from "@vueuse/core";
|
||||
import { RouteLocationNormalized, useRoute, useRouter } from "vue-router";
|
||||
|
||||
import Navigation from "@/components/LeftSidebar/Navigation.vue";
|
||||
import RightSideBar from "@/components/RightSideBar/Main.vue";
|
||||
import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
|
||||
import NavBar from "@/components/nav/NavBar.vue";
|
||||
import Tabs from "@/components/RightSideBar/Tabs.vue";
|
||||
import SearchInput from "@/components/RightSideBar/SearchInput.vue";
|
||||
import useContextStore from "@/stores/context";
|
||||
import ContextMenu from "@/components/contextMenu.vue";
|
||||
import Modal from "@/components/modal.vue";
|
||||
import Notification from "@/components/Notification.vue";
|
||||
import useQStore from "@/stores/queue";
|
||||
import Navigation from "@/components/LeftSidebar/Navigation.vue";
|
||||
import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
|
||||
import Logo from "@/components/Logo.vue";
|
||||
import Modal from "@/components/modal.vue";
|
||||
import NavBar from "@/components/nav/NavBar.vue";
|
||||
import Notification from "@/components/Notification.vue";
|
||||
import RightSideBar from "@/components/RightSideBar/Main.vue";
|
||||
import SearchInput from "@/components/RightSideBar/SearchInput.vue";
|
||||
import Tabs from "@/components/RightSideBar/Tabs.vue";
|
||||
import useContextStore from "@/stores/context";
|
||||
import useQStore from "@/stores/queue";
|
||||
|
||||
import useShortcuts from "@/composables/useKeyboard";
|
||||
import { isSameRoute } from "@/composables/perks";
|
||||
import useShortcuts from "@/composables/useKeyboard";
|
||||
|
||||
const context_store = useContextStore();
|
||||
const queue = useQStore();
|
||||
@ -78,7 +78,7 @@ onStartTyping(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./assets/css/mixins.scss";
|
||||
@import "./assets/scss/mixins.scss";
|
||||
|
||||
.l-sidebar {
|
||||
position: relative;
|
||||
|
||||
@ -1,380 +0,0 @@
|
||||
@import "../css/ProgressBar.scss";
|
||||
@import "mixins.scss";
|
||||
|
||||
:root {
|
||||
--separator: #ffffff46;
|
||||
--green: #4ad168;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: $body;
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h-1:hover {
|
||||
background-color: #3a39393d;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.border {
|
||||
background-color: $black;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 0.1px $separator solid;
|
||||
color: transparent;
|
||||
margin: $small 0 $small 0;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pad-small {
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.pad-medium {
|
||||
padding: $medium;
|
||||
}
|
||||
|
||||
.pad-large {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.card-dark {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
height: 2.25rem !important;
|
||||
}
|
||||
|
||||
.l-container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-rows: max-content 1fr max-content;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav search-input"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content tabs";
|
||||
align-content: center;
|
||||
max-width: 2720px;
|
||||
height: calc(100vh - 1rem);
|
||||
margin: 0 auto;
|
||||
gap: 1rem;
|
||||
margin: $small;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
grid-area: tabs;
|
||||
height: 3.5rem;
|
||||
margin-top: -$small;
|
||||
}
|
||||
|
||||
#acontent {
|
||||
grid-area: content;
|
||||
max-width: 1955px;
|
||||
overflow: hidden auto;
|
||||
margin-top: -$small;
|
||||
|
||||
.nav {
|
||||
margin: $small;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
grid-area: tabs;
|
||||
|
||||
@include tablet-landscape {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#gsearch-input {
|
||||
grid-area: search-input;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
grid-area: nav;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
width: 17rem;
|
||||
grid-area: l-sidebar;
|
||||
background-color: $black;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
grid-area: bottom-bar;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.ellip {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
margin-top: -$small;
|
||||
width: 29rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
|
||||
/* width */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.322);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
@-webkit-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
}
|
||||
@-o-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.now-playing-track {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
margin-top: 0;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-image: url(../../assets/icons/playing.gif);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.not_active {
|
||||
background-image: url(../../assets/icons/playing.webp);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
background-color: rgba(34, 33, 33, 0.637);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
margin: 0 $small 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
color: rgb(250, 250, 250);
|
||||
|
||||
&:hover {
|
||||
background-color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 40px;
|
||||
padding: 4px 5px;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.shuffle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& * {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background-size: 70%;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(170, 50, 50);
|
||||
}
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
background-image: url(../../assets/icons/repeat.svg);
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
background-image: url(../../assets/icons/shuffle.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.fav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& * {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background-size: 70%;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(170, 50, 50);
|
||||
}
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
background-image: url(../../assets/icons/plus.svg);
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
background-image: url(../../assets/icons/heart.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
// Styles that only apply on our dear Firefox
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
#acontent {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
#ap-page {
|
||||
width: 100% !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.ap-page-bottom-container {
|
||||
width: calc(100% - 1rem) !important;
|
||||
}
|
||||
}
|
||||
64
src/assets/scss/Global/app-grid.scss
Normal file
64
src/assets/scss/Global/app-grid.scss
Normal file
@ -0,0 +1,64 @@
|
||||
#app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-rows: max-content 1fr max-content;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav search-input"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content tabs";
|
||||
align-content: center;
|
||||
max-width: 2720px;
|
||||
height: calc(100vh - 1rem);
|
||||
margin: 0 auto;
|
||||
gap: 1rem;
|
||||
margin: $small;
|
||||
}
|
||||
|
||||
#acontent {
|
||||
grid-area: content;
|
||||
max-width: 1955px;
|
||||
overflow: hidden auto;
|
||||
margin-top: -$small;
|
||||
|
||||
.nav {
|
||||
margin: $small;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
#tabs {
|
||||
grid-area: tabs;
|
||||
height: 3.5rem;
|
||||
margin-top: -$small;
|
||||
|
||||
@include tablet-landscape {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
margin-top: -$small;
|
||||
width: 29rem;
|
||||
}
|
||||
|
||||
#gsearch-input {
|
||||
grid-area: search-input;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
grid-area: nav;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
width: 17rem;
|
||||
grid-area: l-sidebar;
|
||||
background-color: $black;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
grid-area: bottom-bar;
|
||||
height: 4rem;
|
||||
}
|
||||
77
src/assets/scss/Global/basic.scss
Normal file
77
src/assets/scss/Global/basic.scss
Normal file
@ -0,0 +1,77 @@
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ellip {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: $black;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 0.1px $separator solid;
|
||||
color: transparent;
|
||||
margin: $small 0 $small 0;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.card-dark {
|
||||
background-color: #fff;
|
||||
}
|
||||
57
src/assets/scss/Global/controls.scss
Normal file
57
src/assets/scss/Global/controls.scss
Normal file
@ -0,0 +1,57 @@
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.shuffle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& * {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background-size: 70%;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(170, 50, 50);
|
||||
}
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
background-image: url(../../assets/icons/repeat.svg);
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
background-image: url(../../assets/icons/shuffle.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.fav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& * {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background-size: 70%;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(170, 50, 50);
|
||||
}
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
background-image: url(../../assets/icons/plus.svg);
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
background-image: url(../../assets/icons/heart.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/assets/scss/Global/index.scss
Normal file
28
src/assets/scss/Global/index.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import
|
||||
"./app-grid.scss",
|
||||
"./controls.scss",
|
||||
"./inputs.scss",
|
||||
"./scrollbars.scss",
|
||||
"./state.scss",
|
||||
"./variants.scss",
|
||||
"./basic.scss";
|
||||
|
||||
:root {
|
||||
--separator: #ffffff46;
|
||||
--green: #4ad168;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: $body;
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
10
src/assets/scss/Global/inputs.scss
Normal file
10
src/assets/scss/Global/inputs.scss
Normal file
@ -0,0 +1,10 @@
|
||||
input[type="number"] {
|
||||
width: 40px;
|
||||
padding: 4px 5px;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
height: 2.25rem !important;
|
||||
}
|
||||
23
src/assets/scss/Global/scrollbars.scss
Normal file
23
src/assets/scss/Global/scrollbars.scss
Normal file
@ -0,0 +1,23 @@
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.322);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $blue;
|
||||
}
|
||||
19
src/assets/scss/Global/state.scss
Normal file
19
src/assets/scss/Global/state.scss
Normal file
@ -0,0 +1,19 @@
|
||||
|
||||
.now-playing-track-indicator {
|
||||
background-image: url(../../assets/icons/playing.gif);
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
background-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.last_played {
|
||||
background-image: url(../../assets/icons/playing.webp);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
25
src/assets/scss/Global/variants.scss
Normal file
25
src/assets/scss/Global/variants.scss
Normal file
@ -0,0 +1,25 @@
|
||||
// paddings
|
||||
.pad-small {
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.pad-medium {
|
||||
padding: $medium;
|
||||
}
|
||||
|
||||
.pad-large {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
// shadows
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
8
src/assets/scss/index.scss
Normal file
8
src/assets/scss/index.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import
|
||||
"./mixins.scss",
|
||||
"./variables",
|
||||
"./moz.scss",
|
||||
"./ProgressBar.scss",
|
||||
"./BottomBar/BottomBar.scss",
|
||||
"./Global"
|
||||
;
|
||||
5
src/assets/scss/moz.scss
Normal file
5
src/assets/scss/moz.scss
Normal file
@ -0,0 +1,5 @@
|
||||
// Styles that only apply on our dear Firefox
|
||||
|
||||
// @-moz-document url-prefix() {
|
||||
|
||||
// }
|
||||
@ -11,8 +11,8 @@
|
||||
<div class="circle"></div>
|
||||
<img class="circle" :src="paths.images.artist + images.artist" alt="" />
|
||||
</div>
|
||||
<div class="bio rounded border" v-html="bio" v-if="bio"></div>
|
||||
<div class="bio rounded border" v-else>No bio found</div>
|
||||
<div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
|
||||
<div class="bio rounded bg-black" v-else>No bio found</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -54,7 +54,7 @@ defineProps<{
|
||||
width: 100%;
|
||||
margin-right: $small;
|
||||
overflow: hidden;
|
||||
border: solid 1px $gray5;
|
||||
bg-black: solid 1px $gray5;
|
||||
background-image: linear-gradient(37deg, $gray5 20%, $gray4);
|
||||
|
||||
@include tablet-portrait {
|
||||
@ -89,7 +89,7 @@ defineProps<{
|
||||
height: 7rem;
|
||||
bottom: 0;
|
||||
left: calc($rectpos + 7rem);
|
||||
border-radius: 50%;
|
||||
bg-black-radius: 50%;
|
||||
box-shadow: 0 0 2rem rgb(0, 0, 0);
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
@ -99,7 +99,7 @@ defineProps<{
|
||||
}
|
||||
}
|
||||
.bio {
|
||||
border: solid 1px $gray5;
|
||||
bg-black: solid 1px $gray5;
|
||||
padding: $small;
|
||||
line-height: 1.5rem;
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="all-albums">
|
||||
<div class="item rounded" v-for="artist in artists" :key="artist">
|
||||
<div class="album-art image rounded"></div>
|
||||
<div class="name ellip">{{ artist.name }}</div>
|
||||
<div class="name t-center ellip">{{ artist.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -84,16 +84,8 @@ export default {
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
margin-top: $small;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: small;
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.699);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,4 +123,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script >
|
||||
export default {
|
||||
setup() {
|
||||
const artists = [
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "@/assets/css/BottomBar/BottomBar.scss";
|
||||
import Progress from "../LeftSidebar/NP/Progress.vue";
|
||||
import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
|
||||
import "@/assets/scss/BottomBar/BottomBar.scss";
|
||||
import { formatSeconds } from "@/composables/perks";
|
||||
import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
|
||||
import Progress from "../LeftSidebar/NP/Progress.vue";
|
||||
|
||||
import useQStore from "@/stores/queue";
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="l_ rounded">
|
||||
<div class="r-now-playing t-center rounded">
|
||||
<div class="headin">Now Playing</div>
|
||||
<div
|
||||
class="button menu rounded"
|
||||
@ -56,10 +56,9 @@ const showContextMenu = (e: Event) => {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.l_ {
|
||||
.r-now-playing {
|
||||
padding: 1rem;
|
||||
background-color: $primary;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
position: relative;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/css/mixins.scss";
|
||||
@import "../assets/scss/mixins.scss";
|
||||
|
||||
#logo-container {
|
||||
overflow: hidden;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import Recommendations from "./Recommendation.vue";
|
||||
import UpNext from "../queue/upNext.vue";
|
||||
import UpNext from "../Queue/upNext.vue";
|
||||
import useQStore from "../../../stores/queue";
|
||||
const queue = useQStore();
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="r-tracks rounded border">
|
||||
<div class="r-tracks rounded bg-black">
|
||||
<div class="heading">Similar tracks</div>
|
||||
<div class="tracks">
|
||||
<div class="song-item" v-for="song in songs" :key="song.artist">
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="now-playing border shadow-lg">
|
||||
<div class="now-playing bg-black shadow-lg">
|
||||
<div class="art-tags">
|
||||
<div class="duration">{{ formatSeconds(current.length) }}</div>
|
||||
<div
|
||||
:style="{
|
||||
backgroundImage: `url("${current.image}")`,
|
||||
}"
|
||||
class="album-art image border"
|
||||
class="album-art image bg-black"
|
||||
></div>
|
||||
<div class="t-a">
|
||||
<p id="title" class="ellipsis">{{ current.title }}</p>
|
||||
<div class="separator no-border"></div>
|
||||
<div class="separator no-bg-black"></div>
|
||||
<div v-if="current.artists[0] !== ''" id="artist" class="ellip">
|
||||
<span v-for="artist in putCommas(current.artists)" :key="artist">{{
|
||||
artist
|
||||
|
||||
@ -2,7 +2,18 @@
|
||||
<div class="up-next">
|
||||
<div class="r-grid">
|
||||
<UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
|
||||
<div class="scrollable-r border rounded">
|
||||
<div class="queue-actions rounded bg-black">
|
||||
<div class="left">
|
||||
<button class="clear-queue action">Clear</button>
|
||||
<button class="shuffle-queue action">Shuffle</button>
|
||||
<button class="shuffle-queue action">Shuffle</button>
|
||||
<button class="shuffle-queue action">Go to Mix</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="shuffle-queue action">Save as Playlist</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollable-r bg-black rounded">
|
||||
<div
|
||||
class="inner"
|
||||
@mouseenter="setMouseOver(true)"
|
||||
@ -25,9 +36,9 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import TrackItem from "../shared/TrackItem.vue";
|
||||
import useQStore from "../../stores/queue";
|
||||
import PlayingFrom from "./queue/playingFrom.vue";
|
||||
import UpNext from "./queue/upNext.vue";
|
||||
import useQStore from "@/stores/queue";
|
||||
import PlayingFrom from "./Queue/playingFrom.vue";
|
||||
import UpNext from "./Queue/upNext.vue";
|
||||
import { onUpdated, ref } from "vue";
|
||||
import { focusElem } from "@/composables/perks";
|
||||
|
||||
@ -59,9 +70,24 @@ onUpdated(() => {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: max-content 1fr max-content;
|
||||
grid-template-rows: max-content max-content 1fr max-content;
|
||||
gap: $small;
|
||||
|
||||
.queue-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: $small;
|
||||
padding: $small;
|
||||
|
||||
.action {
|
||||
background-color: $accent;
|
||||
padding: $smaller;
|
||||
border-radius: $smaller;
|
||||
font-size: 0.8rem;
|
||||
padding: inherit 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable-r {
|
||||
height: 100%;
|
||||
padding: $small 0 $small $small;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="playing-from" class="rounded" @click="goTo">
|
||||
<div id="playing-from" class="bg-black rounded" @click="goTo">
|
||||
<div class="h">
|
||||
<div class="icon image" :class="from.icon"></div>
|
||||
Playing from
|
||||
@ -18,8 +18,8 @@ import {
|
||||
fromAlbum,
|
||||
fromPlaylist,
|
||||
fromSearch,
|
||||
} from "../../../interfaces";
|
||||
import { FromOptions } from "../../../composables/enums";
|
||||
} from "@/interfaces";
|
||||
import { FromOptions } from "@/composables/enums";
|
||||
import { useRouter } from "vue-router";
|
||||
import { computed } from "@vue/reactivity";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main-item border" @click="playNext">
|
||||
<div class="main-item bg-black" @click="playNext">
|
||||
<div class="h">Up Next</div>
|
||||
<div class="itemx shadow">
|
||||
<div
|
||||
@ -22,12 +22,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Track } from "../../../interfaces";
|
||||
import {putCommas} from "../../../composables/perks";
|
||||
import { paths } from "../../../config";
|
||||
const imguri = paths.images.thumb;
|
||||
import { putCommas } from "@/composables/perks";
|
||||
import { paths } from "@/config";
|
||||
import { Track } from "@/interfaces";
|
||||
|
||||
const props = defineProps<{
|
||||
const imguri = paths.images.thumb;
|
||||
defineProps<{
|
||||
next: Track;
|
||||
playNext: () => void;
|
||||
}>();
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="artists-results border">
|
||||
<div class="artists-results bg-black">
|
||||
<div class="grid">
|
||||
<ArtistCard
|
||||
v-for="artist in search.artists.value"
|
||||
@ -13,9 +13,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useSearchStore from "../../../stores/search";
|
||||
import ArtistCard from "../../shared/ArtistCard.vue";
|
||||
import LoadMore from "./LoadMore.vue";
|
||||
import useSearchStore from "../../../stores/search";
|
||||
const search = useSearchStore();
|
||||
|
||||
function loadMore() {
|
||||
|
||||
@ -15,13 +15,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TabsWrapper from "./TabsWrapper.vue";
|
||||
import Tab from "./Tab.vue";
|
||||
import TracksGrid from "./TracksGrid.vue";
|
||||
import AlbumGrid from "./AlbumGrid.vue";
|
||||
import ArtistGrid from "./ArtistGrid.vue";
|
||||
import "@/assets/css/Search/Search.scss";
|
||||
|
||||
import Tab from "./Tab.vue";
|
||||
import TabsWrapper from "./TabsWrapper.vue";
|
||||
import TracksGrid from "./TracksGrid.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -31,21 +29,6 @@ import "@/assets/css/Search/Search.scss";
|
||||
width: auto;
|
||||
height: 100%;
|
||||
|
||||
.no-res {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
height: calc(100% - $small);
|
||||
place-items: center;
|
||||
font-size: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
line-height: 4rem !important;
|
||||
|
||||
.highlight {
|
||||
padding: $small;
|
||||
background-color: rgb(29, 26, 26);
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
padding: $medium;
|
||||
border-radius: $small;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="albums-results border">
|
||||
<div class="albums-results bg-black">
|
||||
<div class="grid">
|
||||
<PCard
|
||||
v-for="album in search.albums.value"
|
||||
@ -12,9 +12,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useSearchStore from "../../../stores/search";
|
||||
import PCard from "../../playlists/PlaylistCard.vue";
|
||||
import LoadMore from "./LoadMore.vue";
|
||||
import useSearchStore from "../../../stores/search";
|
||||
|
||||
const search = useSearchStore();
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="xartist" :class="{ _is_on_sidebar: alt }">
|
||||
<div
|
||||
class="artist-image image border-sm"
|
||||
class="artist-image image bg-black-sm"
|
||||
:style="{ backgroundImage: `url('${imguri + artist.image}')` }"
|
||||
></div>
|
||||
<div>
|
||||
<p class="artist-name ellipsis">{{ artist.name }}</p>
|
||||
<p class="artist-name t-center ellipsis">{{ artist.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -59,7 +59,6 @@ defineProps<{
|
||||
|
||||
.artist-name {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 510;
|
||||
max-width: 7rem;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
@dblclick="emitUpdate(track)"
|
||||
@contextmenu="showContextMenu"
|
||||
>
|
||||
<div class="index">{{ index }}</div>
|
||||
<div class="index t-center">{{ index }}</div>
|
||||
<div class="flex">
|
||||
<div @click="emitUpdate(track)" class="thumbnail">
|
||||
<img
|
||||
@ -21,9 +21,9 @@
|
||||
class="album-art image rounded"
|
||||
/>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
v-if="isPlaying && isCurrent"
|
||||
:class="{ active: isPlaying, not_active: !isPlaying }"
|
||||
class="now-playing-track-indicator image"
|
||||
v-if="isCurrent"
|
||||
:class="{ last_played: !isPlaying }"
|
||||
></div>
|
||||
</div>
|
||||
<div @click="emitUpdate(track)">
|
||||
@ -186,7 +186,6 @@ function emitUpdate(track: Track) {
|
||||
.index {
|
||||
color: grey;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
width: 2rem;
|
||||
|
||||
@include phone-only {
|
||||
@ -245,7 +244,7 @@ function emitUpdate(track: Track) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.now-playing-track {
|
||||
.now-playing-track-indicator {
|
||||
position: absolute;
|
||||
left: $small;
|
||||
top: $small;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="track-item h-1"
|
||||
class="track-item"
|
||||
@click="playThis(props.track)"
|
||||
:class="[
|
||||
{
|
||||
@ -17,9 +17,9 @@
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
class="now-playing-track-indicator image"
|
||||
v-if="props.isCurrent"
|
||||
:class="{ active: props.isPlaying, not_active: !props.isPlaying }"
|
||||
:class="{ last_played: !props.isPlaying }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
@ -36,15 +36,15 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ContextSrc } from "../../composables/enums";
|
||||
import { putCommas } from "../../composables/perks";
|
||||
import trackContext from "../../contexts/track_context";
|
||||
import { Track } from "../../interfaces";
|
||||
import { ContextSrc } from "../../composables/enums";
|
||||
|
||||
import { paths } from "../../config";
|
||||
import useContextStore from "../../stores/context";
|
||||
import useModalStore from "../../stores/modal";
|
||||
import useQueueStore from "../../stores/queue";
|
||||
import { paths } from "../../config";
|
||||
|
||||
const contextStore = useContextStore();
|
||||
const imguri = paths.images.thumb;
|
||||
|
||||
@ -101,7 +101,6 @@ function toggleBottom() {
|
||||
.ap-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: calc(100% + 1rem);
|
||||
|
||||
#ap-page {
|
||||
overflow: auto;
|
||||
@ -110,8 +109,6 @@ function toggleBottom() {
|
||||
display: grid;
|
||||
grid-template-rows: 18rem 1fr;
|
||||
gap: 1rem;
|
||||
padding-right: $small;
|
||||
width: calc(100% - $small);
|
||||
|
||||
.ap-page-content {
|
||||
padding-bottom: 16rem;
|
||||
@ -122,7 +119,7 @@ function toggleBottom() {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 15rem;
|
||||
width: calc(100% - 1.25rem);
|
||||
width: 100%;
|
||||
background-color: $gray;
|
||||
transition: all 0.5s ease !important;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import "./assets/scss/index.scss";
|
||||
import "./registerServiceWorker";
|
||||
import "../src/assets/css/global.scss";
|
||||
|
||||
import { createPinia } from "pinia";
|
||||
import { createApp } from "vue";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="home t-center">
|
||||
<home />
|
||||
</div>
|
||||
</template>
|
||||
@ -10,6 +10,5 @@ import Home from "@/components/Home.vue";
|
||||
<style>
|
||||
.home {
|
||||
padding-left: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@ export default defineConfig({
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/assets/css/_variables.scss";`,
|
||||
additionalData: `@import "@/assets/scss/_variables.scss";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user