br0kenpixel/Tricky-Addon-Update-Target-List
1
0
Fork 0
mirror of https://github.com/KOWX712/Tricky-Addon-Update-Target-List.git synced 2025-09-06 06:37:09 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

custom checkbox style

Browse Source
This commit is contained in:
KOWX712
2025-02-11 18:29:38 +08:00
parent f36f5bf7db
commit 006ca27100
2 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
module/webui/index.html
View File

@@ -298,7 +298,14 @@
<div id="security-patch-card" class="security-patch-card">
<div class="security-patch-content">
<div class="advanced-toggle">
<input type="checkbox" id="advanced-mode" class="advanced-checkbox">
<input type="checkbox" class="checkbox" id="advanced-mode" />
<label for="advanced-mode" class="custom-checkbox">
<span class="tick-symbol">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
<path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
</svg>
</span>
</label>
<label for="advanced-mode" data-i18n="security_patch.advanced_mode">Advanced Mode</label>
</div>

51
module/webui/styles/security-patch.css
View File

@@ -40,6 +40,54 @@
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
.advanced-toggle .checkbox-wrapper {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin-left: auto;
}
.advanced-toggle .checkbox {
opacity: 0;
position: absolute;
width: 0;
height: 0;
}
.advanced-toggle .custom-checkbox {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.advanced-toggle .tick-symbol {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform 0.2s ease-out, opacity 0.3s ease;
}
.advanced-toggle .checkbox:checked + .custom-checkbox {
border-color: #007bff;
background-color: #007bff;
transition: border-color 0.1s ease;
animation: checked-bounce 0.3s ease-out;
}
.advanced-toggle .checkbox:checked + .custom-checkbox .tick-symbol {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.input-group {
@@ -52,6 +100,7 @@
padding-top: 10px;
font-size: 14px;
color: #666;
user-select: none;
}
.input-group input {
@@ -81,11 +130,13 @@
.auto-button {
background-color: #ddd;
user-select: none;
}
.save-button {
background-color: #007bff;
color: white;
user-select: none;
}
.hidden {