diff --git a/src/assets/css/ProgressBar.scss b/src/assets/css/ProgressBar.scss index 7ec7e0d..6ac0183 100644 --- a/src/assets/css/ProgressBar.scss +++ b/src/assets/css/ProgressBar.scss @@ -10,33 +10,27 @@ input[type="range"] { &::-webkit-slider-thumb { -webkit-appearance: none; - height: 0.9rem; - width: 0.9rem; - border-radius: 0 50% 50% 0; + height: 0; + width: 0.8rem; + border-radius: 50%; background: $accent; } &::-moz-range-thumb { -webkit-appearance: none; - height: 0rem; + + height: 0; border-radius: 50%; background: $accent; border: none; } - &:hover { - &::-moz-range-thumb { - height: .8rem; - } - } - &::-ms-thumb { -webkit-appearance: none; - display: none; - height: 0.9rem; - width: 0.9rem; - border-radius: 0 50% 50% 0; + height: 0; + width: 0.8rem; + border-radius: 50%; background: $accent; border: none; } diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index 37ce93f..9c8b4f9 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -17,6 +17,7 @@ body { Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; overflow: hidden; + image-rendering: -webkit-optimize-contrast; } .heading { @@ -61,7 +62,6 @@ a { display: none; } - .l-container { display: grid; grid-template-columns: min-content 1fr min-content; @@ -85,8 +85,6 @@ a { } } - - .gsearch-input { grid-area: search-input; border-left: solid 1px $gray3; @@ -164,7 +162,7 @@ a { } .shadow-sm { - box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.452); + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452); } .shadow-md { diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue index be4bd55..5e54506 100644 --- a/src/components/LeftSidebar/nowPlaying.vue +++ b/src/components/LeftSidebar/nowPlaying.vue @@ -35,6 +35,20 @@ const queue = useQStore(); position: relative; text-transform: capitalize; + &:hover { + ::-moz-range-thumb { + height: 0.8rem; + } + + ::-webkit-slider-thumb { + height: 0.8rem; + } + + ::-ms-thumb { + height: 0.8rem; + } + } + .headin { font-weight: bold; font-size: 0.9rem; @@ -84,7 +98,7 @@ const queue = useQStore(); position: absolute; font-size: 0.75rem; width: max-content; - padding: 0.2rem .35rem; + padding: 0.2rem 0.35rem; top: 13.25rem; left: 1.5rem; background-color: $black; diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue index ea32498..c13b876 100644 --- a/src/components/RightSideBar/Queue.vue +++ b/src/components/RightSideBar/Queue.vue @@ -53,6 +53,7 @@ function playThis(track: Track) { height: 100%; padding: $small; overflow: auto; + overflow-x: hidden; scrollbar-color: grey transparent; } } diff --git a/src/components/RightSideBar/queue/upNext.vue b/src/components/RightSideBar/queue/upNext.vue index b1331ff..b1933ab 100644 --- a/src/components/RightSideBar/queue/upNext.vue +++ b/src/components/RightSideBar/queue/upNext.vue @@ -40,7 +40,6 @@ const props = defineProps<{ &:hover { background-color: $accent; - border: 1px solid transparent; .h { background-color: $black; diff --git a/src/components/contextMenu.vue b/src/components/contextMenu.vue index a130274..d7ab257 100644 --- a/src/components/contextMenu.vue +++ b/src/components/contextMenu.vue @@ -90,12 +90,12 @@ const context = useContextStore(); right: -13rem; width: 13rem; top: -0.5rem; - max-height: 21.25rem; + height: 23.5rem; padding: $small !important; background-color: $context; transform: scale(0); - transform-origin: left; + transform-origin: top left; } .icon { @@ -177,14 +177,14 @@ const context = useContextStore(); .context-normalizedY { .context-item > .children { transform-origin: bottom right; + top: -.5rem; } } .context-many-kids { .context-item > .children { - top: -0.5rem; + // top: -0.5rem; overflow-y: auto; - scrollbar-width: none; } } diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue index 8af4ed9..8d7dc39 100644 --- a/src/components/shared/SongItem.vue +++ b/src/components/shared/SongItem.vue @@ -116,6 +116,7 @@ function emitUpdate(track: Track) { height: 3.75rem; text-align: left; gap: $small; + user-select: none; .context { position: fixed; diff --git a/src/composables/mediaNotification.ts b/src/composables/mediaNotification.ts index c609004..90c77b8 100644 --- a/src/composables/mediaNotification.ts +++ b/src/composables/mediaNotification.ts @@ -1,5 +1,5 @@ import { Track } from "../interfaces.js"; -import perks from "./perks.js"; +import { paths } from "../config"; export default ( track: Track, @@ -13,32 +13,32 @@ export default ( artist: track.artists.join(", "), artwork: [ { - src: track.image, + src: paths.images.thumb + track.image, sizes: "96x96", type: "image/jpeg", }, { - src: track.image, + src: paths.images.thumb + track.image, sizes: "128x128", type: "image/webp", }, { - src: track.image, + src: paths.images.thumb + track.image, sizes: "192x192", type: "image/webp", }, { - src: track.image, + src: paths.images.thumb + track.image, sizes: "256x256", type: "image/webp", }, { - src: track.image, + src: paths.images.thumb + track.image, sizes: "384x384", type: "image/webp", }, { - src: track.image, + src: paths.images.thumb + track.image, sizes: "512x512", type: "image/webp", }, diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts index d265ad6..540b113 100644 --- a/src/stores/tabs.ts +++ b/src/stores/tabs.ts @@ -10,7 +10,7 @@ const tablist = { export default defineStore("tabs", { state: () => ({ tabs: tablist, - current: tablist.home, + current: tablist.queue, }), actions: { changeTab(tab: string) { diff --git a/v1-pre-alpha.release.md b/v1-pre-alpha.release.md new file mode 100644 index 0000000..fc92b6d --- /dev/null +++ b/v1-pre-alpha.release.md @@ -0,0 +1,3 @@ +### Features required in the first release + +- [ ] \ No newline at end of file