xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AC card 3D ledge press effect matching button style

Browse Source 
- default: rgb(189,174,160)/rgb(15,30,15) 0px 5px 0px 0px ledge
- hover: ledge grows to 7px + translateY(-2px)
- active: translateY(5px) + box-shadow none (press-in collapse)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yuetsh
2026-05-18 03:43:07 -06:00
parent 00cdb383ee
commit ce3be0143a
1 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
style.css
View File

@@ -1667,10 +1667,8 @@ html[data-design-theme="animal-crossing"] .card {
background: rgba(255, 252, 240, 0.85);
border: 1px solid rgba(109, 188, 126, 0.25);
border-radius: 16px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-design-theme="animal-crossing"] .card::before {
@@ -1693,10 +1691,13 @@ html[data-design-theme="animal-crossing"] .card:hover,
html[data-design-theme="animal-crossing"] .card:focus {
transform: translateY(-2px);
border-color: rgba(109, 188, 126, 0.45);
box-shadow:
0 8px 24px rgba(109, 188, 126, 0.2),
0 4px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
}
html[data-design-theme="animal-crossing"] .card:active {
transform: translateY(5px);
box-shadow: none;
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-design-theme="animal-crossing"] .card:hover h2,
@@ -1759,10 +1760,7 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
background: rgba(30, 48, 30, 0.82);
border: 1px solid rgba(158, 217, 138, 0.18);
border-radius: 16px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
@@ -1783,11 +1781,15 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
transform: translateY(-2px);
border-color: rgba(158, 217, 138, 0.45);
box-shadow:
0 8px 24px rgba(158, 217, 138, 0.2),
0 4px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:active {
transform: translateY(5px);
box-shadow: none;
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,