root/Jyotisha
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(web): soften the home entry pill borders

Browse Source
This commit is contained in:
jesse-ux
2026-09-22 13:05:07 +08:00
parent 92e79642d2
commit 45ec46176d
7 changed files with 106 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+19 -8
View File
@@ -2238,19 +2238,21 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
}
.starter-entry {
--starter-entry-border: color-mix(in srgb, var(--color-border) 62%, transparent);
position: relative;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-4);
border: 1px solid var(--color-border-strong);
border: 1px solid var(--starter-entry-border);
border-radius: 999px;
background: var(--color-canvas);
box-shadow: 0 1px 1px color-mix(in srgb, var(--color-ink) 4%, transparent);
color: var(--color-ink);
cursor: pointer;
font-size: var(--type-body-sm);
transition: border-color 140ms ease-out;
transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out;
}
.starter-entry > svg {
@@ -2272,22 +2274,31 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
content: "";
}
/* Pressed feedback is transient; hover only moves the hairline. A hover that
shades the surface reads as "selected" and sticks on touch devices. */
/* Pressed feedback is a quiet surface tint. Hover only darkens the same soft
border; it does not switch to the action color, which read as a selected
control and stuck on touch. */
.starter-entry:not(:disabled):active {
border-color: color-mix(in srgb, var(--color-action) 44%, var(--color-border-strong));
background: var(--color-action-soft);
border-color: var(--starter-entry-border);
background: color-mix(in srgb, var(--color-canvas-soft) 80%, var(--color-canvas));
box-shadow: none;
}
@media (hover: hover) {
.starter-entry:not(:disabled):hover { border-color: var(--color-action); }
.starter-entry:not(:disabled):hover {
border-color: color-mix(in srgb, var(--color-border-strong) 45%, var(--color-border));
}
}
.starter-entry:focus-visible {
outline: 3px solid color-mix(in srgb, var(--color-focus) 56%, transparent);
outline: 3px solid color-mix(in srgb, var(--color-focus) 80%, transparent);
outline-offset: 2px;
}
@media (max-width: 375px) {
.starter-entry-row { max-width: 100%; }
.starter-entry { max-width: 100%; }
}
.starter-entry-hint,
.starter-entry-boundary {
max-width: 560px;