devlab/server-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: style custom checkbox with checkmark icon, add disabled button colors

Browse Source
This commit is contained in:
Agent
2026-06-14 09:58:44 -04:00
parent e6a70c427e
commit 6b2300de07
2 changed files with 65 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/assets/css/style.css
View File

@@ -716,6 +716,14 @@ code, pre {
box-shadow: var(--shadow-sm);
}
.btn:disabled,
.btn.disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-primary {
background: var(--accent);
color: white;
@@ -727,6 +735,26 @@ code, pre {
color: white;
}
.btn-primary:disabled,
.btn-primary.disabled {
background: var(--bg-tertiary);
color: var(--text-muted);
border-color: var(--border-color);
cursor: not-allowed;
transform: none;
box-shadow: none;
opacity: 0.6;
}
.btn-primary:disabled:hover,
.btn-primary.disabled:hover {
background: var(--bg-tertiary);
color: var(--text-muted);
border-color: var(--border-color);
transform: none;
box-shadow: none;
}
.btn-secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
@@ -921,13 +949,45 @@ textarea.form-input {
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
position: relative;
padding-left: 0;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.checkbox-label .checkmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-radius: 4px;
background: var(--bg-input);
transition: all var(--transition);
flex-shrink: 0;
font-size: 0.65rem;
color: transparent;
}
.checkbox-label:hover .checkmark {
border-color: var(--accent);
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.checkbox-label input[type="checkbox"]:focus-visible + .checkmark {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.font-mono {