dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add a11y panel

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-07-21 21:11:22 +08:00
parent dc778836f1
commit 5b376cc116
5 changed files with 433 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/css/components/a11y.css Normal file
View File

@@ -0,0 +1,77 @@
.a11y-panel-enter-active {
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.a11y-panel-leave-active {
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ios-toggle {
position: relative;
width: 42px;
height: 24px;
background: #e5e5e5;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
pointer-events: auto;
}
.ios-toggle input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.ios-toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition:
transform 0.3s ease,
background-color 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
z-index: 0;
}
.ios-toggle input:checked + .toggle-track::after {
transform: translateX(18px);
}
.ios-toggle input:checked + .toggle-track {
background: rgba(var(--color-primary-500), 1);
}
.ios-toggle input:checked ~ .ios-toggle-ball {
transform: translateX(18px);
}
.ios-toggle.is-checked {
background: rgba(var(--color-primary-500), 1);
}
.ios-toggle:has(input:checked) {
background: rgba(var(--color-primary-500), 1);
}
.ios-toggle:has(input:checked)::after {
transform: translateX(18px);
}
.dark .ios-toggle {
background: #404040;
}
.dark .ios-toggle::after {
background: #f5f5f5;
}