diff --git a/.DS_Store b/.DS_Store index a549e98..0ca5be8 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 34621f6..a62f49e 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -5,15 +5,41 @@ - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + diff --git a/frontend/src/assets/Global.scss b/frontend/src/assets/Global.scss index a3bf232..8b4dbf8 100644 --- a/frontend/src/assets/Global.scss +++ b/frontend/src/assets/Global.scss @@ -1,15 +1,15 @@ -:root { - --neutral-50: #FFFAFD; - --neutral-100: #F4EFF2; - --neutral-200: #E9E1E5; - --neutral-300: #D9C8D0; - --neutral-400: #C0A6B2; - --neutral-500: #AB8998; - --neutral-600: #AB8998; - --neutral-700: #7C5A66; - --neutral-800: #684C55; - --neutral-900: #49373D; - --neutral-950: #332429; +[data-theme='light'] { + --neutral-50: #F6F7F6; + --neutral-100: #E9EAE8; + --neutral-200: #C9CBC4; + --neutral-300: #A6A99F; + --neutral-400: #81867B; + --neutral-500: #686C60; + --neutral-600: #51554C; + --neutral-700: #42463F; + --neutral-800: #373A35; + --neutral-900: #2A2B28; + --neutral-950: #111210; --primary-50: #FFF0F3; @@ -25,6 +25,31 @@ --primary-950: #520021; } +[data-theme='dark'] { + --neutral-50: #111210; + --neutral-100: #2A2B28; + --neutral-200: #373A35; + --neutral-300: #42463F; + --neutral-400: #51554C; + --neutral-500: #686C60; + --neutral-600: #81867B; + --neutral-700: #A6A99F; + --neutral-800: #C9CBC4; + --neutral-900: #E9EAE8; + --neutral-950: #F6F7F6; + + --primary-50: #520021; + --primary-100: #920945; + --primary-200: #AB064A; + --primary-300: #CD034F; + --primary-400: #ED0C5B; + --primary-500: #FF306F; + --primary-600: #ED0C5B; + --primary-700: #FF9CB6; + --primary-800: #FFC9D7; + --primary-900: #FFE2E8; + --primary-950: #FFF0F3; +} /* width */ @@ -49,7 +74,7 @@ background: var(--primary-700); } -body,p,html { +body, p, html, button { margin: 0; padding: 0; } @@ -61,10 +86,11 @@ button { } -body{ +body { overflow: hidden; margin: 0; } + #app { display: flex; flex-direction: column; @@ -78,6 +104,9 @@ body{ padding: 10px; box-sizing: border-box; } +button { + color: var(--neutral-900); +} h1, h2, h3, h4, h5, h6 { margin: 0; @@ -91,6 +120,7 @@ h1 { font-size: 24px; line-height: 29px; } + h2 { font-size: 20px; line-height: 20px; @@ -111,4 +141,44 @@ p { font-style: normal; font-weight: 400; line-height: normal; +} + + +.iconDefault { + color: var(--neutral-950); +} + +.iconDefaultStroke { + Stroke: var(--neutral-950); +} +.iconDefaultStrokeReverse { + stroke: var(--neutral-50); +} +.iconFixedStrokeWhite { + stroke: #F6F7F6; +} +.iconFixedStrokeBlack { + stroke: #111210; +} + +.iconDefaultFill { + fill: var(--neutral-950); +} + +.iconDefaultFillReverse { + fill: var(--neutral-50); +} + +.iconFixedFillWhite { + fill: #F6F7F6; +} +.iconFixedFillBlack { + fill: #111210; +} + +.colorFixedWhite { + color: #F6F7F6; +} +.colorFixedBlack { + color: #111210; } \ No newline at end of file diff --git a/frontend/src/assets/Icons/Add.vue b/frontend/src/assets/Icons/Add.vue index f019273..6f980e4 100644 --- a/frontend/src/assets/Icons/Add.vue +++ b/frontend/src/assets/Icons/Add.vue @@ -4,7 +4,7 @@ diff --git a/frontend/src/assets/Icons/DarkModeIcone.vue b/frontend/src/assets/Icons/DarkModeIcone.vue new file mode 100644 index 0000000..a6953a6 --- /dev/null +++ b/frontend/src/assets/Icons/DarkModeIcone.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/assets/Icons/DefaultPlaylist.vue b/frontend/src/assets/Icons/DefaultPlaylist.vue index 7ee1535..e87996c 100644 --- a/frontend/src/assets/Icons/DefaultPlaylist.vue +++ b/frontend/src/assets/Icons/DefaultPlaylist.vue @@ -4,8 +4,8 @@ diff --git a/frontend/src/assets/Icons/DotsMenu.vue b/frontend/src/assets/Icons/DotsMenu.vue index 9f2cc8d..db586ed 100644 --- a/frontend/src/assets/Icons/DotsMenu.vue +++ b/frontend/src/assets/Icons/DotsMenu.vue @@ -4,9 +4,9 @@ diff --git a/frontend/src/assets/Icons/HandIcon.vue b/frontend/src/assets/Icons/HandIcon.vue index f3a1c8a..5b6c41a 100644 --- a/frontend/src/assets/Icons/HandIcon.vue +++ b/frontend/src/assets/Icons/HandIcon.vue @@ -4,7 +4,7 @@ diff --git a/frontend/src/assets/Icons/InPlayListIcon.vue b/frontend/src/assets/Icons/InPlayListIcon.vue index 30957e5..98cc7ac 100644 --- a/frontend/src/assets/Icons/InPlayListIcon.vue +++ b/frontend/src/assets/Icons/InPlayListIcon.vue @@ -4,8 +4,8 @@ @@ -39,11 +40,16 @@ const props = defineProps<{ background: var(--neutral-100); position: absolute; top: 2px; - left: 2px; z-index: 9; border: 0.5px solid rgba(0, 0, 0, 0.04); border-radius: 7px; - transition: all 0.2s ease-out; + transition: left 0.2s ease-out; +} +.indicator-left { + left: 2px; +} +.indicator-right { + left: calc(50% - 2px); } .tab { diff --git a/frontend/src/items/UserLoginInfo.vue b/frontend/src/items/UserLoginInfo.vue index 978577a..212e8d2 100644 --- a/frontend/src/items/UserLoginInfo.vue +++ b/frontend/src/items/UserLoginInfo.vue @@ -8,7 +8,7 @@ const userLoginInfo = userOnlineStore(); diff --git a/frontend/src/stores/dataStore.ts b/frontend/src/stores/dataStore.ts index c768222..5859966 100644 --- a/frontend/src/stores/dataStore.ts +++ b/frontend/src/stores/dataStore.ts @@ -19,21 +19,25 @@ export const searchStore = defineStore('search', { name: 'LofiGirl', title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 1)', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', + duration: '2:00:00', }, { name: 'LofiGirl', title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 2)', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', + duration: '1:00:00', }, { name: 'LofiGirl', title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 3)', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', + duration: '3:00:00', }, { name: 'LofiGirl', title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 4)', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', + duration: '00:30:00', }, ] }), @@ -43,7 +47,7 @@ export const searchStore = defineStore('search', { this.searchQuery = query; }, - updateVideosSearch(videoList: { name: string; title: string; thumbnail: string }[]) { + updateVideosSearch(videoList: { name: string; title: string; thumbnail: string; duration: string }[]) { this.videos = videoList; }, @@ -163,11 +167,6 @@ export const lectureListStore = defineStore('lecture', { export const historyListStore = defineStore('history', { state: () => ({ history: [ - { - name: 'LofiGirl', - title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 1)', - thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', - }, { name: 'LofiGirl', title: 'lofi hip hop mix πŸ“š beats to relax/study to (Part 2)',