isaacclad/ladill-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make launcher scroll affordance visible on open.
Deploy Ladill Hosting / deploy (push) Successful in 39s
Details

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 13:52:32 +00:00
co-authored by Cursor
parent e57bfb082a
commit 3a75eefeff
2 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+57 -7
View File
@@ -69,36 +69,86 @@
}
}
/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll indicator */
/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll cues */
.ladill-launcher-apps-wrap {
position: relative;
}
.ladill-launcher-apps {
max-height: calc(6 * 5.25rem + 5 * 0.25rem);
overflow-y: scroll;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgb(148 163 184) rgb(241 245 249);
scrollbar-color: rgb(100 116 139) rgb(226 232 240);
margin-right: -0.25rem;
padding-right: 0.25rem;
}
/* Clip the last visible row so the next row peeks — scroll is obvious without hovering. */
.ladill-launcher-apps--peek {
max-height: calc(6 * 5.25rem + 5 * 0.25rem - 1.75rem);
}
.ladill-launcher-apps::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
width: 10px;
}
.ladill-launcher-apps::-webkit-scrollbar-track {
background: rgb(241 245 249);
background: rgb(226 232 240);
border-radius: 9999px;
}
.ladill-launcher-apps::-webkit-scrollbar-thumb {
background-color: rgb(148 163 184);
background-color: rgb(100 116 139);
border-radius: 9999px;
min-height: 2.5rem;
border: 2px solid rgb(241 245 249);
border: 2px solid rgb(226 232 240);
background-clip: padding-box;
}
.ladill-launcher-apps::-webkit-scrollbar-thumb:hover {
background-color: rgb(100 116 139);
background-color: rgb(71 85 105);
}
/* Always-visible rail — does not rely on OS overlay scrollbars. */
.ladill-launcher-scroll-rail {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 10px;
border-radius: 9999px;
background: rgb(226 232 240);
pointer-events: none;
}
.ladill-launcher-scroll-fade {
position: absolute;
left: 0;
right: 12px;
bottom: 0;
height: 2.25rem;
background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255));
pointer-events: none;
}
.ladill-launcher-scroll-more {
position: absolute;
left: 50%;
bottom: 0.125rem;
z-index: 1;
display: flex;
height: 1.25rem;
width: 1.25rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgb(255 255 255);
color: rgb(100 116 139);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
pointer-events: none;
}