From 6b494ef34df999f0c4c3a9dadd926e3a9676be56 Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Thu, 24 Apr 2025 22:34:09 +0300 Subject: [PATCH] Design changes --- assets/css/extra.css | 31 +++++++++++------ assets/css/index.css | 69 +++++++++++++++++++++---------------- assets/images/close.png | Bin 1348 -> 1046 bytes html/index.html | 74 ++++++++++++++++++++++------------------ html/playlist.html | 2 +- src/common.js | 25 +++++++++++++- 6 files changed, 124 insertions(+), 77 deletions(-) diff --git a/assets/css/extra.css b/assets/css/extra.css index 07b78b9..377c3f1 100644 --- a/assets/css/extra.css +++ b/assets/css/extra.css @@ -3,6 +3,7 @@ --text: rgb(45, 45, 45); --box-main: #eef4f3; --box-toggle: rgb(215 238 233); + --box-separation: rgb(215 238 233); --box-toggleOn: rgb(28 232 138); --item-bg: #dddddd; --box-shadow: none; @@ -16,20 +17,22 @@ } :root[theme="dark"] { - --background: rgb(40, 40, 40); - --text: white; - --box-main: rgb(80, 80, 80); - --box-toggle: rgb(70, 70, 70); - --box-toggleOn: rgb(28 232 138); - --item-bg: rgb(75, 75, 75); + --background: #121212; + --text: rgb(229, 229, 229); + --box-main: #1d1d1d; + --box-toggle: #191919; + --box-separation: #2e2e2e; + --box-toggleOn: #2e2e2e; + --item-bg: #191919; --box-shadow: none; - --select: rgb(127, 253, 127); - --greenBtn: #6acd29; - --greenBtn-bottom: #4c8824; - --redBtn: #d64d4f; - --redBtn-bottom: #854243; + --select: rgb(68 214 141); + --greenBtn: #24D166; + --greenBtn-bottom: #3e6c20; + --redBtn: #c82b2d; + --redBtn-bottom: #803334; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); + --border: none; } :root[theme="frappe"] { @@ -37,6 +40,7 @@ --text: #e2e8ff; --box-main: #303446; --box-toggle: #414559; + --box-separation: #414559; --box-toggleOn: #607dc1; --item-bg: #414559; --select: #8caaee; @@ -52,6 +56,7 @@ --text: #d2d6df; --box-main: #4d515d; --box-toggle: #2f333d; + --box-separation: #2f333d; --box-toggleOn: #13a3b7; --item-bg: #4d515d; --select: #57b6c2; @@ -67,6 +72,7 @@ --text: #00ff41; --box-main: #0c2216; --box-toggle: #214338; + --box-separation: #214338; --box-toggleOn: #24782e; --item-bg: #214338; --select: #00ff41; @@ -83,6 +89,7 @@ --text: #292d31; --box-main: #ffffff; --box-toggle: #f3f3f3; + --box-separation: #f3f3f3; --box-toggleOn: #cce5ff; --item-bg: #3a66d150; --select: #cce5ff; @@ -99,6 +106,7 @@ --text: #4c4f69; --box-main: #eff1f5; --box-toggle: #e6e9ef; + --box-separation: #e6e9ef; --box-toggleOn: #cce5ff; --item-bg: #bcc0cc; --select: #cce5ff; @@ -115,6 +123,7 @@ --text: #a4b1b3; --box-main: #003745; --box-toggle: #2e4c52; + --box-separation: #2e4c52; --box-toggleOn: #005a6f; --item-bg: #003745; --select: #2aa198; diff --git a/assets/css/index.css b/assets/css/index.css index 5b105f8..77b6f20 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -13,6 +13,7 @@ --text: rgb(45, 45, 45); --box-main: #eef4f3; --box-toggle: rgb(215 238 233); + --box-separation: rgb(215 238 233); --box-toggleOn: rgb(28 232 138); --item-bg: #dddddd; --box-shadow: none; @@ -26,13 +27,13 @@ } :root[theme="dark"] { - --background: #141d28; - --text: white; - --box-main: #161b26; - --box-toggle: #141924; - --box-separation: #1c2331; - --box-toggleOn: #1d2835; - --item-bg: rgb(75, 75, 75); + --background: #121212; + --text: rgb(229, 229, 229); + --box-main: #1d1d1d; + --box-toggle: #191919; + --box-separation: #2e2e2e; + --box-toggleOn: #2e2e2e; + --item-bg: #191919; --box-shadow: none; --select: rgb(68 214 141); --greenBtn: #24D166; @@ -41,6 +42,7 @@ --redBtn-bottom: #803334; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); + --border: none; } :root[theme="frappe"] { @@ -48,6 +50,7 @@ --text: #e2e8ff; --box-main: #303446; --box-toggle: #414559; + --box-separation: #414559; --box-toggleOn: #607dc1; --item-bg: #414559; --select: #8caaee; @@ -63,6 +66,7 @@ --text: #d2d6df; --box-main: #4d515d; --box-toggle: #2f333d; + --box-separation: #2f333d; --box-toggleOn: #13a3b7; --item-bg: #4d515d; --select: #57b6c2; @@ -78,6 +82,7 @@ --text: #00ff41; --box-main: #0c2216; --box-toggle: #214338; + --box-separation: #214338; --box-toggleOn: #24782e; --item-bg: #214338; --select: #00ff41; @@ -94,6 +99,7 @@ --text: #292d31; --box-main: #ffffff; --box-toggle: #f3f3f3; + --box-separation: #f3f3f3; --box-toggleOn: #cce5ff; --item-bg: #3a66d150; --select: #cce5ff; @@ -110,6 +116,7 @@ --text: #4c4f69; --box-main: #eff1f5; --box-toggle: #e6e9ef; + --box-separation: #e6e9ef; --box-toggleOn: #cce5ff; --item-bg: #bcc0cc; --select: #cce5ff; @@ -126,6 +133,7 @@ --text: #a4b1b3; --box-main: #003745; --box-toggle: #2e4c52; + --box-separation: #2e4c52; --box-toggleOn: #005a6f; --item-bg: #003745; --select: #2aa198; @@ -173,15 +181,12 @@ body { background-color: rgb(137, 226, 255); color: rgb(35, 35, 35); border: none; - border-bottom: 4px solid rgb(63, 169, 205); padding: 10px; border-radius: 10px; cursor: pointer; position: relative; } #tryBtn:active { - top: 4px; - margin-bottom: 4px; border: none; } @@ -251,7 +256,7 @@ body { color: var(--text); margin: 10px auto; border-radius: 10px; - padding: 10px; + padding: 20px; align-items: center; justify-content: space-between; } @@ -262,7 +267,7 @@ body { height: 25px; background-color: var(--item-bg); color: var(--text); - padding: 10px 25px; + padding: 16px 25px; border-radius: 15px; align-items: center; justify-content: space-between; @@ -283,11 +288,12 @@ body { .title { padding: 12px 10px; border-radius: 8px; + margin-left: 4px; border: none; outline: none; width: 50%; text-align: center; - background-color: var(--box-toggle); + background-color: var(--box-separation); color: var(--text); font-size: large; font-family: "Ubuntu"; @@ -315,8 +321,8 @@ body { } .itemClose { position: absolute; - top: 5px; - right: 5px; + top: 8px; + right: 8px; cursor: pointer; cursor: pointer; width: 20px; @@ -329,9 +335,9 @@ body { } #closeHidden { - bottom: 5px; + bottom: 7px; position: absolute; - right: 5px; + right: 10px; cursor: pointer; cursor: pointer; width: 20px; @@ -350,8 +356,9 @@ body { background-color: var(--box-main); border-radius: 15px; width: 80%; - padding: 10px 10px 15px 10px; + padding: 10px 10px 25px 10px; color: var(--text); + border: var(--border); } #videoBox, #audioBox { @@ -393,7 +400,7 @@ body { .toggleBtn { width: 50%; font-size: x-large; - border: none; + border: var(--border); background-color: var(--box-toggle); border-radius: 10px; cursor: pointer; @@ -439,6 +446,10 @@ body { width: 400px; } +.formatSelect { + margin-right: 4px; +} + label { position: relative; top: 3px; @@ -468,7 +479,6 @@ input[type="number"]::-webkit-outer-spin-button { background-color: var(--greenBtn); color: white; border: none; - border-bottom: 5.5px solid var(--greenBtn-bottom); font-size: large; cursor: pointer; display: inline-block; @@ -476,9 +486,8 @@ input[type="number"]::-webkit-outer-spin-button { position: relative; } .submitBtn:active { + background-color: var(--greenBtn-bottom); border: none; - top: 5.5px; - margin-bottom: 5.5px; } .resumeBtn { @@ -487,7 +496,6 @@ input[type="number"]::-webkit-outer-spin-button { background-color: rgb(64, 227, 64); color: white; border: none; - border-bottom: 4px solid rgb(54, 205, 54); cursor: pointer; display: inline-block; outline: none; @@ -568,7 +576,6 @@ button { color: white; background-color: var(--blueBtn); border: none; - border-bottom: 4px solid var(--blueBtn-bottom); position: relative; padding: 15px; border-radius: 10px; @@ -590,8 +597,7 @@ button { } #extractBtn:active, .blueBtn:active { - top: 4px; - margin-bottom: 12px; + background-color: var(--blueBtn-bottom); border: none; } @@ -599,7 +605,6 @@ button { color: white; background-color: var(--redBtn); border: none; - border-bottom: 5px solid var(--redBtn-bottom); position: relative; padding: 15px; border-radius: 10px; @@ -609,8 +614,7 @@ button { } .advancedToggle:active { - top: 5px; - margin-bottom: 13px; + background-color: var(--blueBtn-bottom); border: none; } @@ -887,4 +891,9 @@ body::-webkit-scrollbar-thumb { opacity: 0.8; } -/* End */ \ No newline at end of file +::view-transition-old(root), +::view-transition-new(root) { + animation: none; + mix-blend-mode: normal; +} +/* End */ diff --git a/assets/images/close.png b/assets/images/close.png index 00f9132fad50ffb077e5a5d2ee76d3356eea3074..a0afcf20f5cf5db52d8a3b1e58f06e6d8ffdd044 100644 GIT binary patch literal 1046 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wSy!Sl0AZa85pY67#JE_7#My5g&JNk zFq9fFFuY1&V6d9Oz#v{QXIG#NP-0quPlzj!Zf)&oX#t{6Bof30io>KJT#$m+R){!6 zFNt1G5oi3lKFoL)3Ks|Nmb~=LE=m1|>m$!3-=W z_Po6IEDC4;z4Z0{r|=^<_zbhj&miOP-+6g_e)t6a2>c%MlE;`OSpJ2AJ+JW*o=1Cu zdKr_v-CYcC-j*!_aySb-B8wRqdB1}&;}WsE;y^+65>H=O_LnTY{3>iO7tM_X>Ur$x z;uw-~@9oX#>LvpowuH9Hyfb-@b`~#^wx0j{fBoH(raX?!&!#aqW0tSo$8W}2HIG|d zFGePD&X2vpHKq0+&cEpST(Dpfcgg?6C67K#`txUDl)KTPZ}RH1ufA;Y*x6;SnZ-4C z!ryo6A4yIWUXdHate*0@sL(;>u1l&=eCF%TeHo5RpL&02S#!%i@?z)qtDNP^C)6ch z2X+58D*eUqj3JXOMOg3xL9fTUj=rrxmgQ9aPUl;x+v6bJca z)f>kHP98e$aq`r0hm)7wSEsyP94PcbajHuVhpOWIFjd3(Vycew-BbhTv#BP|XI3qo zziZMSf8UkN^JfLI+nFxqt9j-1$?kuB{F-$_FXlhwJi6gOV^#h~k2=e|b6r8m--pR|QRy^VlJup0g3#)Ew|n{@f2D5|+FhTf#rT=^{a+!Y zc!MbiejbX*>^LXxy0yS--|qMJhyH%{)2ve3#MJ#WY55i9Nq-uT)&$yle>9%>S?Jao z@%6v#HTG;b343oD#q`zm0Xkxq!^40j7)S5EOiY{Lkumf3{9*IO|=aStPBhuRmnU;(U6;;l9^Ts z(qO7+oZUMR;Gb;nAp1^Q!X`miS vke=ZDw370~qEv?R@^Zb*yzJuS#DY}4{G#;P?`))iiWody{an^LB{Ts5dUUh2 delta 1328 zcmV-01<(4H2*e6TiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^Z)<=1am@3 zR0s$N2z&@+hyVZp32;bRa{vGU`2YX_`2ih<1c8&~11En3!AV3xR9J;LRw;>nVUZ%C1W~wv1WNyhl$N9_;((Ay+(Sis(l`W2B$vC0-3D5`|XcvV#ErK7alMS^TyEyUu{FR)QM9 zVK5JMN!=NI_H5%&0Pk(Pokt?Kz%UD-qZQ*O+J(W-YG>!}(8@}_Wq|k7(>Np8qLhC*XfyNq^XI<@0=%D|?%~A#IBN5% z9M>%{MrTKp$xOA4JagM_=bSBlDsup6v#d6y)yq}e?rZ?yk;tthTk`;gga9$t!7cu@ z+Qy7Al~fb&&}6rZo*o>#ausrY9nR7d7%BHPVM3tm(q)L=UTi&n1o`o!ufHfIcJg^x zf=z#nCRZ{70LbFEo0$W^u`5>*nVc-Y!N>@53-PA1b?-SmHiquGc`zZGo6pVr%xnK!6;%LAN}pb}?M`YJIJaMg zbC#aK&1Ux?#>dfpbIu3Bgh2PrIfTc@y*7V0n}xIVq!AS5Sun;h5fV4}>=&oL1H)HA z0MHt4Dg|q32v%P?L9G6MSOWvtO{V}N9KSh-a5TDSp2;A$xDdEhQYk2{!9bt!*^w{5 z2QU~2P=!dRU=0q!>hJd;LIVTnh{X_&#`et9Y2@OI`)*dHHKbA?20@im?LZkRk&AyX z!cC>Tws5r0Je4}o9001tPXiGGS_7y;Y{nPirrtF4xv4kUY{47=bOpd@ZP5W^KZ&%~ z-ZKH%_q?tZ6QZ)=Vhw%aXbi{evZI-dF;Eo%#+W3q)&RUztKIFXH@@WvN23iXTCb8) z-ZK&H5;WFYGM}4Acw(Z)JcZ489GidfxPN0#OavAypj?W*xL_anwo_!e~R|?!8&=e3|6z=N^7`dRMoQ!s7kqzZyY|0D zDShiNIA0x3B(?+q=#siamiPuuPQKIaSW8Fez)Mir4!gSpyo>U z&xH$j!SG{X^h3%RgDuzf<$g$5uSb%}vt^Kq)XvUbFk~A;99~N626I8=2*l)0lYFG>lg&YXWSrigfKIFs3G004l|<>j}~X2x;dLa~LK-b_ksY`ZRY z@_E$WxEW)ror^0Y$>d+P^ m0}+1XB6NQ^k!bqH_4*%KMM^OUUC*Wf0000Download Playlist Preferences - Compressor + Compressor About Theme: - -
- +
+ +
+
+

Video

+ + +
+ - -
-

Audio

- - + +
+ +
+
+
+ + +
+ + +
+ + +
+
+ +
+ +
-
-
- - -
- - -
- - -
-
- - -
- - -
+
Close app when download finishes diff --git a/html/playlist.html b/html/playlist.html index 1216679..4ec4748 100644 --- a/html/playlist.html +++ b/html/playlist.html @@ -135,7 +135,7 @@

- +
diff --git a/src/common.js b/src/common.js index a07b4c3..ffdb053 100644 --- a/src/common.js +++ b/src/common.js @@ -38,8 +38,31 @@ getId("menuIcon").addEventListener("click", () => { }); getId("themeToggle").addEventListener("change", () => { - document.documentElement.setAttribute("theme", getId("themeToggle").value); localStorage.setItem("theme", getId("themeToggle").value); + + const x = window.innerWidth; + const y = 0; + const maxRadius = Math.hypot(window.innerWidth, window.innerHeight); + + const transition = document.startViewTransition(() => { + document.documentElement.setAttribute("theme", getId("themeToggle").value); + }); + + transition.ready.then(() => { + document.documentElement.animate( + { + clipPath: [ + `circle(0px at ${x}px ${y}px)`, + `circle(${maxRadius}px at ${x}px ${y}px)` + ] + }, + { + duration: 1100, + easing: 'cubic-bezier(0.4, 0, 0.2, 1)', + pseudoElement: '::view-transition-new(root)' + } + ); + }); }); const storageTheme = localStorage.getItem("theme");