ytDownloader/assets/css/index.css
aandrew-me 118dd31120 Revert "Refactoring"
This reverts commit b3606ebdf6f2f4ac93b77a68e08aedfd403e1fb8.
2025-02-09 19:42:35 +03:00

888 lines
14 KiB
CSS

@font-face {
font-family: "JetBrains";
src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Ubuntu";
src: url("../fonts/Ubuntu-Regular.ttf") format("truetype");
}
: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(62, 60, 60);
--box-toggle: rgb(47, 47, 47);
--box-toggleOn: rgb(2, 123, 63);
--item-bg: rgb(75, 75, 75);
--box-shadow: none;
--select: rgb(68 214 141);
--greenBtn: #56a025;
--greenBtn-bottom: #3e6c20;
--redBtn: #c82b2d;
--redBtn-bottom: #803334;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="frappe"] {
--background: #232634;
--text: #e2e8ff;
--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;
}
:root[theme="github"] {
--background: #f6f8fa;
--text: #292d31;
--box-main: #ffffff;
--box-toggle: #f3f3f3;
--box-toggleOn: #cce5ff;
--item-bg: #3a66d150;
--select: #cce5ff;
--greenBtn: #0a9431;
--greenBtn-bottom: #0c6826;
--redBtn: #d73a49;
--redBtn-bottom: #9b2733;
--blueBtn: #005cc5;
--blueBtn-bottom: #00428e;
}
:root[theme="latte"] {
--background: #dce0e8;
--text: #4c4f69;
--box-main: #eff1f5;
--box-toggle: #e6e9ef;
--box-toggleOn: #cce5ff;
--item-bg: #bcc0cc;
--select: #cce5ff;
--greenBtn: #40a02b;
--greenBtn-bottom: #2e711f;
--redBtn: #d20f39;
--redBtn-bottom: #9c0c2b;
--blueBtn: #1e66f5;
--blueBtn-bottom: rgb(3, 49, 101);
}
:root[theme="solarized-dark"] {
--background: #002b36;
--text: #a4b1b3;
--box-main: #003745;
--box-toggle: #2e4c52;
--box-toggleOn: #005a6f;
--item-bg: #003745;
--select: #2aa198;
--greenBtn: #859900;
--greenBtn-bottom: rgb(73, 84, 1);
--redBtn: #dc322f;
--redBtn-bottom: #af2523;
--blueBtn: #268bd2;
--blueBtn-bottom: #2074b1;
}
body {
font-family: "Ubuntu";
text-align: center;
padding: 10px;
background-color: var(--background);
color: var(--text);
transition: 0.4s;
font-size: large;
}
#popupBox {
width: 100vw;
height: 100vh;
margin: 0;
background-color: rgba(17, 25, 40, 0.75);
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: none;
}
#popup {
position: absolute;
padding: 20px;
top: 50%;
left: 50%;
width: 300px;
border-radius: 10px;
transform: translate(-50%, -50%);
background-color: rgb(91, 91, 91);
color: white;
}
#tryBtn {
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;
}
#menuIcon {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s;
}
#menu {
display: none;
flex-direction: column;
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
background-color: rgba(17, 25, 40, 0.75);
border-radius: 12px;
position: absolute;
top: 40px;
right: 50px;
padding: 15px;
text-align: left;
opacity: 1;
font-size: large;
z-index: 2;
font-family: "Ubuntu";
}
#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-family: "Ubuntu";
font-size: large;
}
.menuItem {
font-family: "Ubuntu";
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
}
.menuItem:active,
.menuItem:link {
color: white;
}
#pasteUrl {
display: none;
margin-top: 15px;
font-weight: bold;
}
.item {
display: flex;
position: relative;
width: 86%;
background-color: var(--item-bg);
color: var(--text);
margin: 10px auto;
border-radius: 10px;
padding: 10px;
align-items: center;
justify-content: space-between;
}
.playlistItem {
display: flex;
position: relative;
width: 94%;
height: 25px;
background-color: var(--item-bg);
color: var(--text);
padding: 10px 25px;
border-radius: 15px;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.itemIconBox {
display: flex;
flex-direction: column;
}
.itemIcon {
max-width: 160px;
max-height: 90px;
border-radius: 10px;
margin: 0 10px 0 0;
}
.title {
padding: 12px 10px;
border-radius: 8px;
border: none;
outline: none;
width: 50%;
text-align: center;
background-color: var(--box-toggle);
color: var(--text);
font-size: large;
font-family: "Ubuntu";
}
.itemTitle {
padding: 5px;
}
.itemBody {
height: 90%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.itemProgress {
font-weight: bold;
cursor: pointer;
}
.progressBar {
width: 90%;
}
.itemSpeed {
padding: 10px 5px 5px 5px;
}
.itemClose {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
cursor: pointer;
width: 20px;
height: 20px;
}
.itemType {
font-style: italic;
margin-top: 5px;
margin: top 8px;
}
#closeHidden {
bottom: 5px;
position: absolute;
right: 5px;
cursor: pointer;
cursor: pointer;
width: 20px;
height: 20px;
}
#hidden {
display: none;
/* display: inline-block; */
position: absolute;
z-index: 1;
left: 0;
right: 0;
margin: auto;
top: 20%;
background-color: var(--box-main);
border-radius: 10px;
width: 80%;
padding: 10px 10px 15px 10px;
color: var(--text);
}
#videoBox, #audioBox {
background-color: var(--box-toggle);
padding: 10px;
border-radius: 10px;
}
#audioExtract, .separationBox {
margin: 10px;
padding: 10px;
background-color: var(--box-toggle);
border-radius: 10px;
}
#options {
display: none;
position: absolute;
overflow: hidden;
z-index: 1;
left: 0;
right: 0;
margin: auto;
top: 20%;
background-color: var(--box-main);
width: 80%;
border-radius: 10px;
padding: 10px;
color: var(--text);
}
#btnContainer {
display: flex;
flex-direction: row;
justify-content: center;
}
.toggleBtn {
width: 50%;
font-size: x-large;
border: none;
background-color: var(--box-toggle);
border-radius: 10px;
cursor: pointer;
padding: 8px;
color: var(--text);
}
#videoToggle {
background-color: var(--box-toggleOn);
}
.select {
padding: 12px 15px;
background-color: var(--select);
border: none;
border-radius: 12px;
cursor: pointer;
font-size: large;
margin-bottom: 8px;
outline: none;
max-width: min(400px, 100%);
font-family: "JetBrains";
}
.audioSelect {
width: 180px;
}
#videoTypeSelect {
width: 160px
}
#audioQualitySelect {
width: 230px;
}
#link {
padding: 10px;
}
#videoFormatSelect, #audioFormatSelect, #audioForVideoFormatSelect {
font-family: JetBrains, monospace;
font-size: medium;
width: 400px;
}
label {
position: relative;
top: 3px;
}
#videoList,
#audioList {
display: none;
}
.cb {
width: 20px;
height: 20px;
position: relative;
left: 5px;
top: 4px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
}
.submitBtn {
padding: 15px;
border-radius: 10px;
background-color: var(--greenBtn);
color: white;
border: none;
border-bottom: 5.5px solid var(--greenBtn-bottom);
font-size: large;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
}
.submitBtn:active {
border: none;
top: 5.5px;
margin-bottom: 5.5px;
}
.resumeBtn {
padding: 10px;
border-radius: 8px;
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;
position: absolute;
right: 10px;
bottom: 10px;
width: 100px;
}
.time,
.input {
padding: 8px;
border: none;
outline: none;
border-radius: 5px;
width: 70px;
font-size: large;
margin: 5px;
}
#incorrectMsg, #incorrectMsgPlaylist {
color: var(--redBtn);
}
#incorrectMsgPlaylist {
display: none;
}
#errorBtn {
display: none;
}
#errorDetails {
cursor: pointer;
font-family: monospace;
padding: 15px;
margin: 10px 0;
border: 2px solid rgb(189, 0, 0);
border-radius: 8px;
display: none;
transition: 0.5s all;
}
#loadingWrapper {
/* Default is flex */
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
}
#preparingBox {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
}
svg {
width: 100px;
height: 100px;
display: inline-block;
margin-left: 20px;
}
.savedMsg {
color: rgb(52, 170, 234);
cursor: pointer;
}
#savedMsg {
cursor: pointer;
}
button {
font-family: "Ubuntu";
font-weight: bold;
outline: none;
}
#extractBtn, .blueBtn {
color: white;
background-color: var(--blueBtn);
border: none;
border-bottom: 4px solid var(--blueBtn-bottom);
position: relative;
padding: 15px;
border-radius: 10px;
cursor: pointer;
margin: 8px;
font-size: large;
}
#extractBtn {
width: 150px;
}
#download, #audioDownload {
width: 140px;
}
#clearBtn {
display: none;
}
#extractBtn:active, .blueBtn:active {
top: 4px;
margin-bottom: 12px;
border: none;
}
.advancedToggle {
color: white;
background-color: var(--redBtn);
border: none;
border-bottom: 5px solid var(--redBtn-bottom);
position: relative;
padding: 15px;
border-radius: 10px;
cursor: pointer;
margin: 8px;
font-size: large;
}
.advancedToggle:active {
top: 5px;
margin-bottom: 13px;
border: none;
}
#advanced {
display: none;
}
.advancedItem {
border: 1.5px solid gray;
border-radius: 15px;
padding: 20px;
margin: 10px;
}
#subHeader {
font-weight: bold;
margin-top: 0;
}
h2{
margin: 12px;
font-size: 24px;
}
/* Scrollbar */
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: rgb(79, 78, 78);
border-radius: 5px;
}
#goToTop {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 2;
border: none;
outline: none;
background-image: url(../images/up-arrow.png);
background-size: contain;
width: 40px;
height: 40px;
cursor: pointer;
color: white;
cursor: pointer;
}
#popupText {
display: none;
position: fixed;
left: 25px;
bottom: 20px;
padding: 10px;
border-radius: 2px;
color: white;
background-color: rgb(80, 80, 224);
cursor: pointer;
transition: 0.5s all;
z-index: 2;
scale: 100%;
}
.scale {
animation-name: scale;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
.scaleUp {
animation-name: scaleUp;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background:linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77));
border-radius: 8px;
}
@keyframes scale {
0% {
scale: 1;
}
100% {
scale: 0;
}
}
@keyframes scaleUp {
0% {
scale: 0;
}
100% {
scale: 1;
}
}
@media screen and (max-width: 650px) {
.item {
width: 90%;
}
.title {
width: 80%;
}
}
/* Compressor styles */
#compressor-header {
text-align: center;
margin-top: 0;
}
.container {
max-width: 800px;
margin: 0 auto 10px auto;
background: var(--box-main);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.drop-zone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 2rem;
text-align: center;
margin-bottom: 2rem;
transition: border-color 0.3s ease;
background: var(--box-toggle);
}
.drop-zone:hover {
border-color: #2196F3;
cursor: pointer;
}
.compress-select {
font-family: "Ubuntu";
padding: 10px;
}
.drop-zone.dragover {
border-color: #2196F3;
background-color: var(--box-toggleOn);
}
#settings-group-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.output-folder-conf {
display: flex;
justify-content: space-between;
align-items: center;
}
#output-folder-box {
background-color: var(--item-bg);
margin-bottom: 12px;
padding: 15px;
border-radius: 8px;
text-align: left;
}
#output-folder-input {
width: 20px;
height: 20px;
margin-left: 10px;
}
.folder-input-checkbox {
display: flex;
align-items: center;
}
#output-suffix {
cursor: text;
}
.settings-group {
margin-bottom: 10px;
display: flex;
flex-direction: column;
width: 46%;
}
.compress-label {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: block;
margin-bottom: 10px;
font-weight: 500;
text-align: left;
}
#compression-status {
max-width: 800px;
margin: 20px auto 0 auto;
border-top: 1px solid var(--item-bg);
padding-top: 20px;
}
.status-item {
padding: 16px;
margin: 6px auto;
border-radius: 4px;
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: var(--item-bg);
max-width: 800px;
}
.status-item.success {
color: var(--greenBtn);
}
.status-item.error {
color: var(--redBtn);
}
.status {
min-width: 80px;
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
}
.fileinput-btn {
background: var(--blueBtn);
color: white;
padding: 10px;
display: block;
border-radius: 5px;
margin: 5px 0 10px 0;
cursor: pointer;
border: none;
}
.progressBarCompress {
width: 200px;
}
.nvidia_opt, .amf_opt, .qsv_opt, .vaapi_opt, .videotoolbox_opt {
display: none;
}
#custom-folder-select{
padding: 10px;
margin-left: 0;
display: none;
}
#custom-folder-path {
font-family: "JetBrains";
background-color: var(--box-main);
padding: 8px;
border-radius: 4px;
display: none;
}
#selected-files {
padding-top: 10px;
opacity: 0.8;
}
/* End */