From 64a2264c3086355f04f8bb9243b3785f501d294f Mon Sep 17 00:00:00 2001 From: Gabriel Goldbronn Date: Sat, 3 May 2025 12:56:10 +0200 Subject: [PATCH] add theme --- .DS_Store | Bin 6148 -> 6148 bytes .idea/workspace.xml | 47 +++++++-- frontend/src/assets/Global.scss | 98 +++++++++++++++--- frontend/src/assets/Icons/Add.vue | 2 +- frontend/src/assets/Icons/DarkModeIcone.vue | 15 +++ frontend/src/assets/Icons/DefaultPlaylist.vue | 4 +- frontend/src/assets/Icons/DotsMenu.vue | 6 +- frontend/src/assets/Icons/HandIcon.vue | 2 +- frontend/src/assets/Icons/InPlayListIcon.vue | 4 +- frontend/src/assets/Icons/LeaveIcon.vue | 2 +- frontend/src/assets/Icons/LectureListIcon.vue | 2 +- frontend/src/assets/Icons/LightModeIcone.vue | 21 ++++ frontend/src/assets/Icons/LogoIcon.vue | 22 ++-- frontend/src/assets/Icons/NextIcon.vue | 4 +- frontend/src/assets/Icons/PauseIcon.vue | 4 +- frontend/src/assets/Icons/Play.vue | 2 +- frontend/src/assets/Icons/PlayIcon.vue | 2 +- frontend/src/assets/Icons/PlaylistIcon.vue | 2 +- frontend/src/assets/Icons/PrevIcon.vue | 4 +- frontend/src/assets/Icons/RepeatIcon.vue | 2 +- frontend/src/assets/Icons/SearchIcon.vue | 2 +- frontend/src/assets/Icons/SetingsIcon.vue | 2 +- frontend/src/assets/Icons/ShuffleIcon.vue | 6 +- frontend/src/assets/Icons/SoundIcon.vue | 6 +- frontend/src/assets/Icons/Top.vue | 2 +- frontend/src/assets/Icons/UserIcon.vue | 4 +- frontend/src/assets/Icons/YoutubePlaylist.vue | 4 +- frontend/src/components/InfoHeader.vue | 43 +++++++- frontend/src/components/LectureList.vue | 29 +++++- frontend/src/components/Playlist.vue | 12 ++- frontend/src/components/SearchPreview.vue | 1 + frontend/src/items/Button.vue | 68 ++++++++++++ frontend/src/items/InputSearch.vue | 1 - frontend/src/items/Miniature.vue | 15 +++ frontend/src/items/SwitchTab.vue | 12 ++- frontend/src/items/UserLoginInfo.vue | 2 +- frontend/src/stores/dataStore.ts | 11 +- 37 files changed, 376 insertions(+), 89 deletions(-) create mode 100644 frontend/src/assets/Icons/DarkModeIcone.vue create mode 100644 frontend/src/assets/Icons/LightModeIcone.vue create mode 100644 frontend/src/items/Button.vue diff --git a/.DS_Store b/.DS_Store index a549e98fca7a7d7b80d67f618fb5bbeef75d936c..0ca5be8e60926b7965e9eaa7073e7f0cca6aaa75 100644 GIT binary patch delta 138 zcmZoMXffE}%figJmU(gji!^hu(Zk7kEV5v_k42hE;lkwAEY(Vi8Vn2!tPFY#nG7im zsSJs^`7SO=Ir&LIQ4WbU$IqBNob16W!v`2`z4>jkIV#~i^t X0d_vN1_alForjs-|H5W>_PqiCTr(?> delta 138 zcmZoMXffE}%fievzj|^2i!}4P)*F-aSY*L;AB!{-d%@(@EY(VKy$lQttPFY#nG7im zsSJs^`7SO=Ir&LIQI2mLmw#S)W3mUU3>%Q^Qh0fD7HbA0lZn~n1~!q&FWC55?|r>~ d%n{5JVCQ3F(76iZTCnplvv6+M?9RSd0083^EC2ui 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)',