mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 05:08:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Playlists, Play Next, Code Refactor

Browse source
This commit is contained in:
Shiny Nematoda 2022-04-21 18:38:21 +05:30
parent 5486be7613
commit 51c56abe16
17 changed files with 664 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/assets/base.css
View file

@ -141,6 +141,17 @@ button {
text-transform: capitalize;
}
.textbox {
padding: .5rem 1rem;
color: var(--color-text);
background: var(--color-background-mute);
border-radius: .25rem;
font-size: 1rem;
border: none;
appearence: none;
outline: none;
}
.bg-img {
background-image: linear-gradient(45deg, #88c0d0, #5e81ac);
background-position: center;
@ -175,25 +186,38 @@ button {
}
.popup-wrap {
--display: none;
position: relative;
}
.popup-wrap:hover,
.popup-wrap:focus,
.popup:focus,
.popup:active {
--display: flex;
}
.popup {
position: absolute;
display: var(--display);
display: flex;
background-color: var(--color-background);
padding: 0.5rem;
border-radius: 0.125rem;
z-index: 999;
bottom: 1.25rem;
box-shadow: 0 0 0.5rem var(--color-border);
animation: fade 0.4s ease;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 530px) {
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
.bars-wrap {
@ -222,22 +246,15 @@ button {
}
/* Animations */
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
@keyframes fill {
from {
width: 0;
}
to {
width: var(--width);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@keyframes heightc {
50% {
height: 100%;