Added search function using YT data API. Fixed slider and scrollbar on web kit. Minor changes
All checks were successful
Gitea/YTDJ/pipeline/head This commit looks good
All checks were successful
Gitea/YTDJ/pipeline/head This commit looks good
This commit is contained in:
186
css/main.css
186
css/main.css
@@ -1,5 +1,5 @@
|
||||
:root {
|
||||
--bg-color: #223;
|
||||
--bg-color: 34, 34, 51; /* #223 */
|
||||
--text-color: #eee;
|
||||
--text-color-light: #bbb;
|
||||
--accent-color-1: #ff91d8;
|
||||
@@ -9,7 +9,6 @@
|
||||
--crossfader-thumb-width: 30px;
|
||||
--crossfader-thumb-height: 60px;
|
||||
--crossfader-thumb-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -79,6 +78,11 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#bg {
|
||||
z-index: -2;
|
||||
overflow: hidden;
|
||||
@@ -105,8 +109,7 @@ textarea {
|
||||
#players, #search-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 2em;
|
||||
gap: 15px;
|
||||
/* gap: 15px; */
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@@ -142,15 +145,20 @@ iframe {
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
input[type=button], button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: var(--accent-color-2);
|
||||
color: rgb(var(--bg-color));
|
||||
border-radius: 5px;
|
||||
font-weight: 900;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
input[type=button]:hover, button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.load-button {
|
||||
/* flex-grow: 2; */
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: var(--accent-color-2);
|
||||
color: var(--bg-color);
|
||||
font-weight: 900;
|
||||
border-radius: 5px;
|
||||
/* padding: 2em; */
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@@ -244,6 +252,8 @@ input[type=range]:focus {
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
background: var(--accent-color-1);
|
||||
border-radius: 25px;
|
||||
margin-bottom: 0.5em;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -251,12 +261,13 @@ input[type=range]::-webkit-slider-thumb {
|
||||
background: var(--accent-color-2);
|
||||
border: solid var(--accent-color-1-light);
|
||||
border-width: 0px;
|
||||
margin-top: -0.4em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: var(--accent-color-1-light);
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
background: var(--accent-color-1);
|
||||
width: 100%;
|
||||
@@ -265,39 +276,10 @@ input[type=range]::-moz-range-track {
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
background: var(--accent-color-2);
|
||||
/* border: solid var(--accent-color-1-light); */
|
||||
cursor: pointer;
|
||||
border-width: 0px;
|
||||
border-radius: var(--crossfader-thumb-radius);
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: var(--accent-color-1);
|
||||
border-radius: 25px;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: var(--accent-color-1);
|
||||
border-radius: 25px;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
background: var(--accent-color-2);
|
||||
/* border: solid var(--accent-color-1-light); */
|
||||
cursor: pointer;
|
||||
margin-top: 0px;
|
||||
/*Needed to keep the Edge thumb centred*/
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: var(--accent-color-1);
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: var(--accent-color-1-light);
|
||||
}
|
||||
|
||||
/*------------------------*/
|
||||
input[type=range]#crossfader::-webkit-slider-runnable-track {
|
||||
@@ -307,12 +289,11 @@ input[type=range]#crossfader::-webkit-slider-thumb {
|
||||
margin-top: -20.65px;
|
||||
width: var(--crossfader-thumb-width);
|
||||
height: var(--crossfader-thumb-height);
|
||||
/* border-width: 5px;
|
||||
border-radius: 12px; */
|
||||
border-radius: var(--crossfader-thumb-radius);
|
||||
}
|
||||
|
||||
input[type=range]#crossfader::-moz-range-track {
|
||||
/* border-radius: 25px; */
|
||||
border-radius: var(--crossfader-thumb-radius);
|
||||
width: 100%;
|
||||
height: 13.3px;
|
||||
cursor: pointer;
|
||||
@@ -320,39 +301,100 @@ input[type=range]#crossfader::-moz-range-track {
|
||||
input[type=range]#crossfader::-moz-range-thumb {
|
||||
width: var(--crossfader-thumb-width);
|
||||
height: var(--crossfader-thumb-height);
|
||||
/* border-width: 5px; */
|
||||
/* border-radius: 12px; */
|
||||
border-radius: var(--crossfader-thumb-radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]#crossfader::-ms-track {
|
||||
/* border-width: 18.75px 0; */
|
||||
height: 13.3px;
|
||||
|
||||
.search-wrapper {
|
||||
/* margin-bottom: 2em; */
|
||||
}
|
||||
input[type=range]#crossfader::-ms-fill-lower {
|
||||
/* border-width: 2.3px;
|
||||
border-radius: 50px; */
|
||||
}
|
||||
input[type=range]#crossfader::-ms-fill-upper {
|
||||
/* border-radius: 50px; */
|
||||
}
|
||||
input[type=range]#crossfader::-ms-thumb {
|
||||
width: var(--crossfader-thumb-width);
|
||||
height: var(--crossfader-thumb-height);
|
||||
/* border-width: 5px;
|
||||
border-radius: 12px; */
|
||||
cursor: pointer;
|
||||
margin-top: 0px;
|
||||
/*Needed to keep the Edge thumb centred*/
|
||||
.search-bar-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
display: flex;
|
||||
column-gap: 1em;
|
||||
}
|
||||
#search-bar input, #search-bar button {
|
||||
height: 2em;;
|
||||
}
|
||||
|
||||
#search-button {
|
||||
padding: 0.2em 1em;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
width: 95vw;
|
||||
/* flex-direction: column; */
|
||||
column-gap: 1em;
|
||||
/* padding-bottom: 1em; */
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.8) rgba(0,0,0,0);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#search-results::-webkit-scrollbar {
|
||||
height: 9px;
|
||||
}
|
||||
#search-results::-webkit-scrollbar-track {
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
#search-results::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-item-info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-item-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.search-item-thumbnail img {
|
||||
/* width: 80%; */
|
||||
}
|
||||
.search-item-title span {
|
||||
display: inline;
|
||||
background-color: rgba(var(--bg-color), 0.8);
|
||||
padding: 0.3em 0;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.search-item-controls {
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
column-gap: 1em;
|
||||
margin: 0.5em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.load-to-A, .load-to-B {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.footer {
|
||||
font-weight: 100;
|
||||
padding-top: 2em;
|
||||
}
|
||||
.footer a, .footer a:visited {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
/* padding-top: 2em; */
|
||||
}
|
||||
|
||||
.footer span {
|
||||
|
||||
Reference in New Issue
Block a user