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

mobile

Browse source
This commit is contained in:
Xanazf 2024-11-09 07:56:21 +02:00
parent 325be308bd
commit 9e7563315a
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
2 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,9 +32,6 @@
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
} }
& .shiki {
margin-block: unset;
}
} }
html.dark .featurelist-item { html.dark .featurelist-item {
@ -67,17 +64,22 @@ html.dark .feature-text {
} }
.feature-showcase { .feature-showcase {
max-height: 21rem; max-width: 75svw;
aspect-ratio: 16 / 9; max-height: min-content;
width: 100%; height: 15rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
& video { & video {
height: 100%; scale: 0.85;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
border-radius: 0.681rem; border-radius: 0.681rem;
} }
& .shiki {
margin-block: unset;
font-size: 0.55rem;
}
} }
html:not(.dark) .feature-showcase .shiki, html:not(.dark) .feature-showcase .shiki,
@ -94,29 +96,39 @@ html:not(.dark) .feature-showcase .shiki span {
& .cloud-item { & .cloud-item {
position: absolute; position: absolute;
scale: 0.8;
&.wayland { &.wayland {
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
&.hyprland { &.hyprland {
transform: translate(-50%, 0) rotate(72deg); transform: translate(-50%, 0) rotate(72deg);
& > div { transform: rotate(-72deg) } & > div {
transform: rotate(-72deg);
}
} }
&.pipewire { &.pipewire {
transform: translate(-50%, 0) rotate(144deg); transform: translate(-50%, 0) rotate(144deg);
& > div { transform: rotate(-144deg) } & > div {
transform: rotate(-144deg);
}
} }
&.x-org { &.x-org {
transform: translate(-50%, 0) rotate(216deg); transform: translate(-50%, 0) rotate(216deg);
& > div { transform: rotate(-216deg) } & > div {
transform: rotate(-216deg);
}
} }
&.sway { &.sway {
transform: translate(-50%, 0) rotate(288deg); transform: translate(-50%, 0) rotate(288deg);
& > div { transform: rotate(-288deg) } & > div {
transform: rotate(-288deg);
} }
& img, svg { }
& img,
svg {
animation: counter-spin 40s linear infinite; animation: counter-spin 40s linear infinite;
width: 80px; width: 60px;
height: 80px; height: 60px;
} }
left: 50%; left: 50%;
height: 100%; height: 100%;
@ -125,7 +137,7 @@ html:not(.dark) .feature-showcase .shiki span {
@keyframes spin { @keyframes spin {
from { from {
transform:rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
@ -172,5 +184,20 @@ html:not(.dark) .feature-showcase .shiki span {
} }
.feature-showcase { .feature-showcase {
width: auto; width: auto;
aspect-ratio: 16 / 9;
& video {
scale: 1;
}
& .shiki {
font-size: 1rem;
}
& .cloud-item {
scale: 1;
& img,
svg {
width: 80px;
height: 80px;
}
}
} }
} }

2
src/styles/css-config/code.css
View file

@ -24,7 +24,7 @@ html.dark .shiki span {
pre { pre {
padding: 1rem; padding: 1rem;
border-radius: 0.618rem; border-radius: 0.618rem;
overflow: auto; overflow: hidden;
text-wrap: wrap; text-wrap: wrap;
& > button { & > button {