aiden
/
ytDownloader
mirror of https://github.com/aandrew-me/ytDownloader
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New themes

Browse Source
pull/136/head
Andrew 3 years ago
parent de9a693734
commit 951f82da8a
11 changed files with 238 additions and 146 deletions
Show Stats Download Patch File Download Diff File

100
assets/css/extra.css
Unescape Escape View File

@ -1,6 +1,86 @@
:root[theme="light"] {
--background: #fff;
--text: rgb(45, 45, 45);
--box-main: #eef4f3;
--box-toggle: rgb(215 238 233);
--box-toggleOn: rgb(28 232 138);
--item-bg: #dddddd;
--box-shadow: none;
--select: rgb(127, 253, 127);
--greenBtn: #6ade1d;
--greenBtn-bottom: #54a31f;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
: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);
--box-shadow: none;
--select: rgb(127, 253, 127);
--greenBtn: #6acd29;
--greenBtn-bottom: #4c8824;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="frappe"] {
--background: #232634;
--text: #c6d0f5;
--box-main: #303446;
--box-toggle: #414559;
--box-toggleOn: #607dc1;
--item-bg: #414559;
--select: #8caaee;
--greenBtn: #78c346;
--greenBtn-bottom: #597844;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="onedark"] {
--background: #282C34 ;
--text: #d2d6df;
--box-main: #4D515D;
--box-toggle: #2F333D;
--box-toggleOn: #13a3b7;
--item-bg: #4D515D;
--select: #57b6c2;
--greenBtn: #85cf50;
--greenBtn-bottom: #406923;
--redBtn: #be2d39;
--redBtn-bottom: #791a22;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="matrix"] {
--background: #0D0208;
--text: #00FF41;
--box-main: #0c2216;
--box-toggle: #214338;
--box-toggleOn: #24782e;
--item-bg: #214338;
--select: #00FF41;
--greenBtn: #19b42b;
--greenBtn-bottom: #10701c;
--redBtn: #19b42b;
--redBtn-bottom: #10701c;
--blueBtn: #19b42b;
--blueBtn-bottom: #10701c;
}
body {
background-color: rgba(33, 33, 39, 0.95);
color: whitesmoke;
background-color: var(--background);
color: var(--text);
padding: 20px;
font-size: x-large;
text-align: left;
@ -40,7 +120,7 @@ input[type="text"],
margin: 0 15px;
padding: 20px 15px;
border-radius: 15px;
background-color: rgb(61, 62, 63);
background-color: var(--box-main);
}
.prefBox {
@ -90,16 +170,16 @@ input[type="text"],
cursor: pointer;
}
#back {
background-color: rgb(51, 177, 219);
background-color: var(--blueBtn);
color: white;
}
#restart {
background-color: rgb(210 69 27);
background-color: var(--redBtn);
color: white;
}
.redBtn {
background-color: rgb(210 69 27);
background-color: var(--redBtn);
color: white;
text-decoration: none;
border: none;
@ -109,7 +189,7 @@ input[type="text"],
font-size: medium;
}
a {
color: rgb(34, 136, 199);
color: rgb(29, 140, 209);
cursor: pointer;
}
@ -125,8 +205,8 @@ input[type="checkbox"] {
border-radius: 10px;
font-size: large;
color: white;
background-color: rgb(35, 190, 35);
border-bottom: 4px solid rgb(30, 139, 30);
background-color: var(--greenBtn);
border-bottom: 4px solid var(--greenBtn-bottom);
cursor: pointer;
position: relative;
outline: none;
@ -138,7 +218,7 @@ input[type="checkbox"] {
}
select {
padding: 15px;
background-color: rgb(88, 232, 88);
background-color: var(--select);
border: none;
border-radius: 8px;
cursor: pointer;

137
assets/css/index.css
Unescape Escape View File

@ -1,12 +1,81 @@
:root {
:root[theme="light"] {
--background: #fff;
--text: rgb(45, 45, 45);
--box-main: #eef4f3;
--box-toggle: rgb(215 238 233);
--box-toggleOn: rgb(28 232 138);
--item-bg: #dddddd;
--box-shadow: none;
--select: rgb(127, 253, 127);
--greenBtn: #6ade1d;
--greenBtn-bottom: #54a31f;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
: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);
--theme-toggle: rgb(80, 193, 238);
--item-bg: rgb(75, 75, 75);
--box-shadow: none;
--select: rgb(127, 253, 127);
--greenBtn: #6acd29;
--greenBtn-bottom: #4c8824;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="frappe"] {
--background: #232634;
--text: #c6d0f5;
--box-main: #303446;
--box-toggle: #414559;
--box-toggleOn: #607dc1;
--item-bg: #414559;
--select: #8caaee;
--greenBtn: #78c346;
--greenBtn-bottom: #597844;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="onedark"] {
--background: #282C34 ;
--text: #d2d6df;
--box-main: #4D515D;
--box-toggle: #2F333D;
--box-toggleOn: #13a3b7;
--item-bg: #4D515D;
--select: #57b6c2;
--greenBtn: #85cf50;
--greenBtn-bottom: #406923;
--redBtn: #be2d39;
--redBtn-bottom: #791a22;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="matrix"] {
--background: #0D0208;
--text: #00FF41;
--box-main: #0c2216;
--box-toggle: #214338;
--box-toggleOn: #24782e;
--item-bg: #214338;
--select: #00FF41;
--greenBtn: #19b42b;
--greenBtn-bottom: #10701c;
--redBtn: #19b42b;
--redBtn-bottom: #10701c;
--blueBtn: #19b42b;
--blueBtn-bottom: #10701c;
}
body {
@ -84,6 +153,18 @@ body {
z-index: 2;
font-family: sans-serif;
}
#themeToggle {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
background-color: rgb(17, 25, 40);
color:white;
padding:10px;
border-radius: 5px;
outline: none;
border:none;
font-size: large;
}
.menuItem {
color: white;
text-decoration: none;
@ -142,9 +223,11 @@ body {
border-radius: 8px;
border: none;
outline: none;
width: 45%;
width: 50%;
text-align: center;
background-color: rgb(127, 253, 127);
background-color: var(--box-toggle);
color: var(--text);
font-size: large;
}
.itemTitle {
@ -221,6 +304,7 @@ body {
#options {
display: none;
position: absolute;
overflow:hidden;
z-index: 1;
left: 0;
right: 0;
@ -253,11 +337,11 @@ body {
background-color: var(--box-toggleOn);
}
select {
padding: 15px;
background-color: rgb(127, 253, 127);
.select {
padding: 12px 15px;
background-color: var(--select);
border: none;
border-radius: 8px;
border-radius: 10px;
cursor: pointer;
font-size: large;
margin: 8px;
@ -290,10 +374,10 @@ input[type="number"]::-webkit-outer-spin-button {
.submitBtn {
padding: 15px;
border-radius: 10px;
background-color: rgb(4, 207, 21);
background-color: var(--greenBtn);
color: white;
border: none;
border-bottom: 5.5px solid rgb(11, 158, 11);
border-bottom: 5.5px solid var(--greenBtn-bottom);
font-size: large;
cursor: pointer;
display: inline-block;
@ -335,7 +419,7 @@ input[type="number"]::-webkit-outer-spin-button {
}
#incorrectMsg {
color: rgb(237, 67, 67);
color: var(--redBtn);
}
#errorBtn {
@ -373,29 +457,6 @@ svg {
margin-left: 20px;
}
#themeToggle {
width: 55px;
height: 30px;
background-color: var(--theme-toggle);
border-radius: 40px;
display: flex;
cursor: pointer;
transition: linear;
transition-duration: 0.4s;
}
#themeToggleInside {
background-color: rgb(255, 255, 255);
border-radius: 30px;
width: 22px;
height: 22px;
margin: 4px;
position: relative;
transition: linear;
transition-duration: 0.4s;
left: 0px;
}
.savedMsg {
color: rgb(52, 170, 234);
cursor: pointer;
@ -409,9 +470,9 @@ button {
#extractBtn {
color: white;
background-color: rgb(80, 128, 230);
background-color: var(--blueBtn);
border: none;
border-bottom: 4px solid rgb(44, 78, 180);
border-bottom: 4px solid var(--blueBtn-bottom);
position: relative;
padding: 15px;
border-radius: 10px;
@ -428,9 +489,9 @@ button {
.advancedToggle {
color: white;
background-color: rgb(217, 68, 68);
background-color: var(--redBtn);
border: none;
border-bottom: 5px solid rgb(180, 49, 49);
border-bottom: 5px solid var(--redBtn-bottom);
position: relative;
padding: 15px;
border-radius: 10px;

9
html/about.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="dark">
<head>
<meta charset="UTF-8">
@ -18,7 +18,8 @@
</div>
<h1>ytDownloader </h1><span id="version"></span>
<p id="txt1">ytDownloader lets you download videos and audios from hundreds of sites like Youtube, Facebook, Instagram, Tiktok, Twitter and so on</p>
<p id="txt1">ytDownloader lets you download videos and audios from hundreds of sites like Youtube, Facebook,
Instagram, Tiktok, Twitter and so on</p>
<p id="txt2">It's a Free and Open Source app built on top of Node.js and Electron. yt-dlp has been used for
downloading</p>
@ -30,6 +31,10 @@
const { ipcRenderer, shell } = require("electron")
const storageTheme = localStorage.getItem("theme");
if (storageTheme) {
document.documentElement.setAttribute("theme", storageTheme)
}
ipcRenderer.send("get-version")
ipcRenderer.once("version", (event, version) => {
document.getElementById("version").textContent = version;

25
html/index.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="dark">
<head>
<header></header>
@ -39,10 +39,6 @@
<span id="popupText">Text copied</span>
<body>
<!-- Theme toggle -->
<div id="themeToggle" onclick="toggle()">
<div id="themeToggleInside"></div>
</div>
<!-- Menu icon -->
<img src="../assets/images/menu.png" alt="menu" id="menuIcon">
@ -53,6 +49,14 @@
<!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> -->
<a id="preferenceWin" class="menuItem">Preferences</a>
<a id="aboutWin" class="menuItem">About</a>
<span class="menuItem">Theme:</span>
<select name="themeToggle" id="themeToggle">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="frappe">Frappé</option>
<option value="onedark">One dark</option>
<option value="matrix">Matrix</option>
</select>
</div>
<button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button>
@ -87,7 +91,7 @@
<div id="videoList">
<label class="formatSelect">Select Format </label>
<select id="videoFormatSelect">
<select id="videoFormatSelect" class="select">
</select>
<br>
<input type="hidden" name="url" class="url" id="url">
@ -98,7 +102,7 @@
<div id="audioList">
<div id="audioPresent">
<label class="formatSelect">Select Format </label>
<select id="audioFormatSelect">
<select id="audioFormatSelect" class="select">
</select>
<br>
<input type="hidden" name="url" class="url">
@ -137,16 +141,13 @@
<input id="subChecked" class="cb" type="checkbox">
</div>
</div>
<!-- Extraction options start -->
<div id="audioExtract">
<h2 id="extractHeader">Extract Audio</h2>
<label class="formatSelect">Select Format </label>
<select id="extractSelection">
<select id="extractSelection" class="select">
<option value="mp3">Mp3</option>
<option value="aac">Aac</option>
<option value="m4a">M4a</option>
@ -157,7 +158,7 @@
<option value="vorbis">Vorbis (ogg)</option>
</select>
<label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
<select id="extractQualitySelect">
<select id="extractQualitySelect" class="select">
<option id="extractQualityNormal" value="5">Normal</option>
<option id="extractQualityBest" value="0">Best</option>
<option id="extractQualityGood" value="2">Good</option>

14
html/playlist.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="dark">
<head>
<meta charset="UTF-8">
@ -44,10 +44,6 @@
<body>
<!-- Popup message -->
<span id="popupText">Text copied</span>
<!-- Theme toggle -->
<div id="themeToggle" onclick="toggle()">
<div id="themeToggleInside"></div>
</div>
<!-- Menu icon -->
<img src="../assets/images/menu.png" alt="menu" id="menuIcon">
@ -57,6 +53,12 @@
<a id="homeWin" class="menuItem">Homepage</a>
<a id="preferenceWin" class="menuItem">Preferences</a>
<a id="aboutWin" class="menuItem">About</a>
<span class="menuItem">Theme:</span>
<select name="themeToggle" id="themeToggle">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="frappe">Frappé</option>
</select>
</div>
<button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>
@ -72,7 +74,7 @@
<br><br>
<div id="videoBox">
<label id="videoFormat">Select Video Format </label>
<select id="select">
<select id="select" class="select">
<option value="best" id="bestVideoOption">Best</option>
<option value="worst" id="worstVideoOption">Worst</option>
<option value="useConfig" id="useConfigTxt">Use config file</option>

11
html/preferences.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="dark">
<head>
<meta charset="UTF-8">
@ -39,14 +39,7 @@
<br>
<div class="prefBox">
<span id="transparentText">Enable transparent dark mode(only Linux, needs restart)</span><input type="checkbox"
class="cb" id="enableTransparent">
</div>
<br>
<!-- Language -->
<!-- Language -->
<div class="prefBox">
<label id="selectLn">Select Language (Requires reload)</label>
<select id="select" onchange="changeLanguage()">

11
main.js
Unescape Escape View File

@ -24,16 +24,10 @@ let trayEnabled = false;
app.commandLine.appendSwitch("--enable-features", "Metal");
function createWindow() {
let isTransparent = false;
if (process.platform == "linux") {
isTransparent = true;
}
win = new BrowserWindow({
show: false,
icon: __dirname + "/assets/images/icon.png",
spellcheck: false,
transparent: isTransparent,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
@ -200,10 +194,6 @@ ipcMain.on("load-win", (event, file) => {
win.loadFile(file);
});
ipcMain.on("load-page", (event, file) => {
let isTransparent = false;
if (process.platform == "linux") {
isTransparent = true;
}
secondaryWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
@ -212,7 +202,6 @@ ipcMain.on("load-page", (event, file) => {
parent: win,
modal: true,
show: false,
transparent: isTransparent
});
secondaryWindow.loadFile(file);
secondaryWindow.setMenu(null);

49
src/common.js
Unescape Escape View File

@ -32,12 +32,6 @@ getId("menuIcon").addEventListener("click", (event) => {
}, 150);
}
});
// Toggle theme
let circle = getId("themeToggleInside");
let darkTheme = true;
circle.style.left = "25px";
const root = document.querySelector(":root");
let enabledTransparent = localStorage.getItem("enabledTransparent");
@ -48,45 +42,18 @@ if (enabledTransparent == "true") {
bgColor = "rgb(40,40,40)";
}
function toggle() {
if (darkTheme == false) {
// Switching to dark theme
circle.style.left = "25px";
root.style.setProperty("--background", bgColor);
root.style.setProperty("--text", "white");
root.style.setProperty("--box-main", "rgb(80,80,80)");
root.style.setProperty("--box-toggle", "rgb(70,70,70)");
root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
root.style.setProperty("--item-bg", "rgb(75, 75, 75)");
darkTheme = true;
localStorage.setItem("theme", "dark");
} else {
// Switching to light theme
circle.style.left = "0px";
root.style.setProperty("--background", "white");
root.style.setProperty("--text", "rgb(45, 45, 45)");
root.style.setProperty("--box-main", "#eef4f3");
root.style.setProperty("--box-toggle", "rgb(215 238 233)");
root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
root.style.setProperty("--item-bg", "#dddddd");
darkTheme = false;
localStorage.setItem("theme", "light");
}
}
getId("themeToggle").addEventListener("change", ()=>{
document.documentElement.setAttribute("theme", getId("themeToggle").value)
localStorage.setItem("theme", getId("themeToggle").value)
})
const storageTheme = localStorage.getItem("theme");
if (storageTheme == "dark") {
darkTheme = false;
toggle();
} else if (storageTheme == "light") {
darkTheme = true;
toggle();
if (storageTheme){
document.documentElement.setAttribute("theme", storageTheme)
getId("themeToggle").value = storageTheme
}
////
let advancedHidden = true;

18
src/preferences.js
Unescape Escape View File

@ -1,3 +1,8 @@
const storageTheme = localStorage.getItem("theme");
if (storageTheme){
document.documentElement.setAttribute("theme", storageTheme)
}
let rightToLeft = false;
if (localStorage.getItem("rightToLeft")) {
rightToLeft = localStorage.getItem("rightToLeft");
@ -35,19 +40,6 @@ ipcRenderer.on("downloadPath", (event, downloadPath) => {
getId("path").textContent = downloadPath[0];
});
const enabledTransparent = getId("enableTransparent");
enabledTransparent.addEventListener("change", (event) => {
if (enabledTransparent.checked) {
localStorage.setItem("enabledTransparent", "true");
} else {
localStorage.setItem("enabledTransparent", "false");
}
});
const localEnabledTransparent = localStorage.getItem("enabledTransparent");
if (localEnabledTransparent == "true") {
enabledTransparent.checked = true;
}
// Selecting config directory

3
src/translate_preferences.js
Unescape Escape View File

@ -12,9 +12,6 @@ getId("back").textContent = i18n.__("Homepage");
getId("dlText").textContent = i18n.__("Download location");
getId("clText").innerHTML = i18n.__("Current download location - ");
getId("selectLocation").textContent = i18n.__("Select Download Location");
getId("transparentText").textContent = i18n.__(
"Enable transparent dark mode(only Linux, needs relaunch)"
);
getId("preferences").textContent = i18n.__("Preferences");
getId("selectLn").textContent = i18n.__("Select Language (Requires relaunch)");
getId("browserInfo").title = i18n.__(

7
translations/en.json
Unescape Escape View File

@ -99,5 +99,10 @@
"Disable auto updates":"Disable auto updates",
"ultralow":"ultralow",
"Close app when download finishes":"Close app when download finishes",
"Auto":"Auto"
"Auto":"Auto",
"Theme":"Theme",
"Light":"Dark",
"Frappé":"Frappé",
"One Dark":"One Dark",
"Matrix":"Matrix"
}

Write Preview
Loading…
Cancel
Save