1berry/ytDownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design changes

Browse Source
This commit is contained in:
aandrew-me 2025-04-24 22:34:09 +03:00
parent 0fea89d39a
commit 6b494ef34d
6 changed files with 124 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/css/extra.css
View File

@ -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;

67
assets/css/index.css
View File

@ -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;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
/* End */

BIN
assets/images/close.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

10
html/index.html
View File

@ -93,6 +93,7 @@
</div>
<p id="title">Title </p>
<div class="videoAudioContainer">
<!-- Video tab -->
<div id="videoList">
<div class="separationBox">
@ -118,7 +119,7 @@
<br>
<button class="submitBtn" id="videoDownload">Download</button>
<button id="advancedVideoToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
<button id="advancedVideoToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
</div>
<!-- Audio tab -->
@ -130,11 +131,16 @@
<br>
<input type="hidden" name="url" class="url">
<button class="submitBtn" id="audioDownload">Download</button>
<button id="advancedAudioToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
<button id="advancedAudioToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
</div>
</div>
</div>
<div id="advanced">
<!-- <div class="advancedItem">
<p>Custom yt-dlp arguments</p>
<input type="text" id="argInput">
</div> -->
<div class="advancedItem">
<span id="quitTxt">Close app when download finishes</span>
<input type="checkbox" id="quitChecked" class="cb">

2
html/playlist.html
View File

@ -135,7 +135,7 @@
</div>
<br>
<button id="advancedToggle" class="advancedToggle">More options</button>
<button id="advancedToggle" class="blueBtn">More options</button>
<br>
<!-- Hidden -->

25
src/common.js
View File

@ -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");