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

feat: AC button pill shape with 3D ledge press effect

Browse Source 
- border-radius: 50px (pill shape matching animal-island-ui reference)
- box-shadow ledge: rgb(189,174,160) 0 5px in light, rgb(15,30,15) 0 5px in dark
- :active collapses ledge with translateY(5px) + box-shadow: none
- :hover lifts to 7px ledge
- fix: index.html fallback label Animal Crossing (was 动森)
- fix: remove redundant color on .card:hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yuetsh
2026-05-18 03:41:35 -06:00
parent d1ccf962ea
commit 00cdb383ee
2 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -44,7 +44,7 @@
</li>
<li role="option" data-value="nord" aria-selected="false">Nord</li>
<li role="option" data-value="animal-crossing" aria-selected="false">
动森
Animal Crossing
</li>
</ul>
</label>

33
style.css
View File

@@ -1643,7 +1643,24 @@ html[data-design-theme="animal-crossing"] body {
html[data-design-theme="animal-crossing"] .design-theme-button,
html[data-design-theme="animal-crossing"] .theme-toggle {
border-radius: 14px;
border-radius: 50px;
box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
font-weight: 600;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-design-theme="animal-crossing"] .design-theme-button:hover,
html[data-design-theme="animal-crossing"] .theme-toggle:hover {
transform: translateY(-2px);
box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
border-color: rgba(109, 188, 126, 0.45);
}
html[data-design-theme="animal-crossing"] .design-theme-button:active,
html[data-design-theme="animal-crossing"] .theme-toggle: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 {
@@ -1674,7 +1691,6 @@ html[data-design-theme="animal-crossing"] .card p {
html[data-design-theme="animal-crossing"] .card:hover,
html[data-design-theme="animal-crossing"] .card:focus {
color: var(--accent);
transform: translateY(-2px);
border-color: rgba(109, 188, 126, 0.45);
box-shadow:
@@ -1793,6 +1809,19 @@ html[data-theme="dark"][data-design-theme="animal-crossing"]
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"][data-design-theme="animal-crossing"]
.design-theme-button,
html[data-theme="dark"][data-design-theme="animal-crossing"] .theme-toggle {
box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
}
html[data-theme="dark"][data-design-theme="animal-crossing"]
.design-theme-button:hover,
html[data-theme="dark"][data-design-theme="animal-crossing"]
.theme-toggle:hover {
box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
color: #b0c8a0;
}