mirror of
https://github.com/YspCoder/clawgo.git
synced 2026-04-28 13:27:33 +08:00
Update UI components from checkboxes to switches and introduce a recursive configuration component.
This commit is contained in:
lpf
@@ -931,7 +931,7 @@ html.theme-dark .brand-button {
|
||||
}
|
||||
|
||||
.ui-form-label {
|
||||
color: var(--color-zinc-700);
|
||||
color: #000;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -951,27 +951,26 @@ html.theme-dark .brand-button {
|
||||
|
||||
.ui-boolean-head {
|
||||
display: grid;
|
||||
grid-template-columns: 40px minmax(0, 1fr);
|
||||
column-gap: 0.85rem;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
column-gap: 0.65rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ui-boolean-card {
|
||||
min-height: 92px;
|
||||
padding: 1rem 1.1rem;
|
||||
min-height: 56px;
|
||||
padding: 0.75rem 0.85rem;
|
||||
}
|
||||
|
||||
.ui-boolean-card-detailed {
|
||||
min-height: 132px;
|
||||
padding: 1.1rem 1.15rem;
|
||||
min-height: 80px;
|
||||
padding: 0.75rem 0.85rem;
|
||||
}
|
||||
|
||||
.ui-checkbox-field {
|
||||
display: flex;
|
||||
min-height: 92px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.1rem;
|
||||
padding: 0.75rem 0.85rem;
|
||||
}
|
||||
|
||||
.ui-toolbar-checkbox {
|
||||
@@ -992,49 +991,66 @@ html.theme-dark .brand-button {
|
||||
border-color: color-mix(in srgb, var(--color-indigo-400) 34%, var(--color-zinc-800));
|
||||
}
|
||||
|
||||
.ui-checkbox {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
flex-shrink: 0;
|
||||
border: 1.5px solid rgb(148 163 184 / 0.9);
|
||||
border-radius: 0.3rem;
|
||||
background: rgb(255 255 255 / 0.94);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 0.62rem 0.62rem;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
transform 160ms ease;
|
||||
.ui-switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ui-checkbox:hover {
|
||||
border-color: rgb(249 115 22 / 0.72);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.95),
|
||||
0 0 0 3px rgb(249 115 22 / 0.08);
|
||||
.ui-switch-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ui-checkbox:checked {
|
||||
border-color: var(--color-indigo-500);
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.2L5.7 10L11 4.6' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
|
||||
linear-gradient(135deg, var(--button-start) 0%, var(--button-end) 100%);
|
||||
box-shadow:
|
||||
0 0 0 2px rgb(249 115 22 / 0.12),
|
||||
0 4px 12px rgb(249 115 22 / 0.18);
|
||||
.ui-switch-track {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
border-radius: 9999px;
|
||||
background: rgb(200 210 220 / 0.6);
|
||||
border: 1.5px solid rgb(120 130 145 / 0.7);
|
||||
transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.ui-checkbox:focus-visible {
|
||||
.ui-switch-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 9999px;
|
||||
background: white;
|
||||
box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
|
||||
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.ui-switch:hover .ui-switch-track {
|
||||
border-color: rgb(249 115 22 / 0.5);
|
||||
box-shadow: 0 0 0 3px rgb(249 115 22 / 0.08);
|
||||
}
|
||||
|
||||
.ui-switch-input:checked + .ui-switch-track {
|
||||
background: linear-gradient(135deg, rgb(249 115 22 / 0.92) 0%, rgb(245 158 11 / 0.92) 100%);
|
||||
border-color: rgb(249 115 22 / 0.7);
|
||||
}
|
||||
|
||||
.ui-switch-input:checked + .ui-switch-track .ui-switch-knob {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.ui-switch-input:focus-visible + .ui-switch-track {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 3px rgb(249 115 22 / 0.14),
|
||||
inset 0 0 0 2px rgb(255 255 255 / 0.96);
|
||||
box-shadow: 0 0 0 3px rgb(249 115 22 / 0.18);
|
||||
}
|
||||
|
||||
.ui-input,
|
||||
@@ -1143,37 +1159,29 @@ html.theme-dark .ui-textarea::placeholder {
|
||||
color: rgb(111 131 155 / 0.9);
|
||||
}
|
||||
|
||||
html.theme-dark .ui-checkbox {
|
||||
border-color: rgb(151 170 194 / 0.86);
|
||||
background: rgb(14 24 40 / 0.92);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.06),
|
||||
0 0 0 1px rgb(8 12 20 / 0.32);
|
||||
html.theme-dark .ui-switch-track {
|
||||
background: rgb(50 60 75 / 0.7);
|
||||
border-color: rgb(100 116 139 / 0.5);
|
||||
}
|
||||
|
||||
html.theme-dark .ui-checkbox:hover {
|
||||
border-color: rgb(241 165 97 / 0.78);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.06),
|
||||
0 0 0 1px rgb(8 12 20 / 0.32),
|
||||
0 0 0 3px rgb(232 132 58 / 0.12);
|
||||
html.theme-dark .ui-switch:hover .ui-switch-track {
|
||||
border-color: rgb(251 146 60 / 0.6);
|
||||
box-shadow: 0 0 0 3px rgb(251 146 60 / 0.12);
|
||||
}
|
||||
|
||||
html.theme-dark .ui-checkbox:checked {
|
||||
border-color: rgb(241 165 97 / 0.78);
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.2L5.7 10L11 4.6' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
|
||||
linear-gradient(135deg, rgb(249 115 22 / 0.96) 0%, rgb(245 158 11 / 0.96) 100%);
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(255 196 128 / 0.24),
|
||||
0 0 0 3px rgb(232 132 58 / 0.16),
|
||||
0 6px 16px rgb(232 132 58 / 0.2);
|
||||
html.theme-dark .ui-switch-input:checked + .ui-switch-track {
|
||||
background: linear-gradient(135deg, rgb(249 115 22 / 0.96) 0%, rgb(245 158 11 / 0.96) 100%);
|
||||
border-color: rgb(251 146 60 / 0.7);
|
||||
box-shadow: 0 0 0 1px rgb(255 196 128 / 0.18), 0 4px 12px rgb(232 132 58 / 0.18);
|
||||
}
|
||||
|
||||
html.theme-dark .ui-checkbox:focus-visible {
|
||||
box-shadow:
|
||||
0 0 0 3px rgb(232 132 58 / 0.18),
|
||||
inset 0 0 0 2px rgb(9 16 28 / 0.95);
|
||||
html.theme-dark .ui-switch-knob {
|
||||
background: rgb(226 232 240 / 0.96);
|
||||
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
html.theme-dark .ui-switch-input:focus-visible + .ui-switch-track {
|
||||
box-shadow: 0 0 0 3px rgb(251 146 60 / 0.2);
|
||||
}
|
||||
|
||||
.ui-select option {
|
||||
|
||||
Reference in New Issue
Block a user