quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

improve spinning logos

Browse source
This commit is contained in:
outfoxxed 2024-11-08 15:58:06 -08:00
parent 2166b238e2
commit 9ecae84852
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
14 changed files with 30 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/styles/components/featurelist.css
View file

@ -53,7 +53,6 @@
.feature-showcase {
height: 21rem;
aspect-ratio: 16 / 9;
border: 1px solid yellow;
}
.feature-video {
@ -65,53 +64,42 @@
margin: auto;
max-width: 21.5rem;
height: 100%;
border-radius: 100vh;
animation: spin 40s linear infinite;
border: 1px solid red;
& .cloud-item {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
animation: counter-spin 40s linear infinite;
width: 60px;
height: 60px;
&.hyprland {
left: 60px;
top: 60px;
}
&.wayland {
right: 60px;
top: 60px;
transform: translate(-50%, 0);
}
&.hyprland {
transform: translate(-50%, 0) rotate(72deg);
& > div { transform: rotate(-72deg) }
}
&.pipewire {
left: 60px;
bottom: 60px;
transform: translate(-50%, 0) rotate(144deg);
& > div { transform: rotate(-144deg) }
}
&.x-org {
right: 60px;
bottom: 60px;
scale: 0.9;
transform: translate(-50%, 0) rotate(216deg);
& > div { transform: rotate(-216deg) }
}
&.sway {
left: 140px;
bottom: 30px;
scale: 0.7;
transform: translate(-50%, 0) rotate(288deg);
& > div { transform: rotate(-288deg) }
}
& img {
width: 60px;
height: 60px;
}
& svg {
scale: 1.5;
& img, svg {
animation: counter-spin 40s linear infinite;
width: 80px;
height: 80px;
}
left: 50%;
height: 100%;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
transform:rotate(0deg);
}
to {
transform: rotate(360deg);