github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add hit-area utility classes for improved touch targets

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lluis Agusti
2026-03-11 18:02:30 +08:00
parent 1747fe9859
commit da2dcce2ed
1 changed files with 133 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
autogpt_platform/frontend/src/app/globals.css
View File

@@ -438,3 +438,136 @@ body[data-google-picker-open="true"] [data-dialog-content] {
[data-streamdown="table-wrapper"] td {
padding: 0.875rem 1rem; /* py-3.5 px-4 */
}
@utility hit-area-debug {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
@apply border border-dashed border-blue-500 bg-blue-500/10;
}
&:hover::before {
@apply border border-dashed border-green-500 bg-green-500/10;
}
}
@utility hit-area {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-* {
position: relative;
--hit-area-t: calc(--value([*]) * -1);
--hit-area-b: calc(--value([*]) * -1);
--hit-area-l: calc(--value([*]) * -1);
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-x-* {
position: relative;
--hit-area-l: calc(--value([*]) * -1);
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-y-* {
position: relative;
--hit-area-t: calc(--value([*]) * -1);
--hit-area-b: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-l-* {
position: relative;
--hit-area-l: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-r-* {
position: relative;
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-t-* {
position: relative;
--hit-area-t: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-b-* {
position: relative;
--hit-area-b: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}