dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

animation tweaks and mobile desktop fixes

Browse source
This commit is contained in:
dvorakmortonxd 2026-09-23 11:50:25 +02:00
commit ee11b4f71b
4 changed files with 107 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/app/skeuo.css
View file

@ -92,17 +92,13 @@ html[data-device="phone"] .skeuo-mobile-root { display: block; }
color: #ffffff;
cursor: default;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
transition: transform 0.12s ease, background-color 0.12s ease,
border-color 0.12s ease;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.win-icon:hover,
.win-icon.selected {
background: rgba(61, 174, 233, 0.16);
border-color: rgba(61, 174, 233, 0.4);
}
.win-icon:active {
transform: scale(0.9);
}
.win-icon-glyph {
width: 48px;
height: 48px;
@ -128,8 +124,11 @@ a.win-icon {
right: 10px;
left: auto;
align-items: flex-end;
flex-wrap: nowrap;
max-height: none;
/* Wrap into extra columns on short screens so the service shortcuts never
collide with the friends stack anchored to the bottom-right. */
flex-wrap: wrap;
align-content: flex-start;
max-height: calc(100% - 350px);
}
.win-icons-br {
top: auto;
@ -396,6 +395,17 @@ a.win-icon {
.app-surface .service-button::before {
content: none;
}
/* Emoji glyphs get a square drop-shadow, so the status glow is drawn with the
status dot behind the icon instead of a filter on the glyph. */
.app-surface .service-button:not(.friend) .service-icon {
filter: none;
}
.app-surface .service-button:not(.friend) .service-status-dot {
width: 34px;
height: 34px;
background: radial-gradient(circle, var(--status-glow) 0%, rgba(0, 0, 0, 0) 70%);
filter: blur(1px);
}
.app-surface .service-button:hover {
background: linear-gradient(to bottom, #f2f9ff, #cfe4f8);
border-color: #7db9e8;
@ -912,6 +922,31 @@ a.win-icon {
background: transparent;
color: #eff0f1;
cursor: pointer;
animation: tbBtnIn 0.16s ease-out;
}
.win-tb-btn.closing {
animation: tbBtnOut 0.12s ease-in forwards;
pointer-events: none;
}
@keyframes tbBtnIn {
from {
opacity: 0;
transform: translateY(6px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes tbBtnOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(6px) scale(0.92);
}
}
.win-tb-btn::after {
content: "";
@ -1031,6 +1066,20 @@ a.win-icon {
overflow: auto;
padding: 10px 12px;
}
.kickoff.closing {
animation: kickoffOut 0.16s ease-in forwards;
pointer-events: none;
}
@keyframes kickoffOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
}
.kickoff-section-title {
margin: 4px 2px 8px;
font-size: 0.7rem;
@ -1098,6 +1147,9 @@ a.win-icon {
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
"Helvetica Neue", Arial, sans-serif;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.mobile-home::before {
content: "";