Files
gott/wwwroot/css/form.css
T
Meleki 3ef78b5eb1 feat: Admin-Benutzerverwaltung + Dashboard-Layout-Fixes
Backend:
- AdminEndpoint.cs: 5 Endpunkte (List, Create, Update, Reset PW, Delete) - Admin-only
- DatabaseService: CreateUser(), UpdateUserAdmin(), DeleteUser() (kaskadiert Tokens + Shares)
- Route in Program.cs registriert

Frontend:
- admin-page.js: User-Liste mit Edit/Delete, Inline-Formular Create/Edit
- api.js: 5 Admin-API-Funktionen
- index.html: Template tpl-admin, Script-Tag, Dashboard-Link 'Benutzerverwaltung'
- dashboard.js: Admin-Link nur für Admins sichtbar
- form.css: Styles für admin-user-list, admin-user-row, admin-checkbox-row
- dashboard.css: Header-Overflow-Fix, Agents vor Cronjobs
- index.html: Template-Reihenfolge Agents vor Cronjobs

TODO: User-Management als erledigt markiert
2026-03-05 19:19:16 +01:00

410 lines
6.8 KiB
CSS

.form {
padding: var(--page-padding);
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
width: 100%;
}
.form label {
margin-top: var(--box-spacing);
}
.avatar-section {
display: flex;
align-items: center;
gap: var(--box-spacing);
}
.avatar-preview {
width: 64px;
height: 64px;
background: var(--f2-bg);
border: var(--border-width) solid var(--f2-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
border-radius: var(--border-radius);
}
.avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.input-with-btn {
display: flex;
gap: var(--badge-spacing);
}
.input-with-btn input {
flex: 1;
}
.input-with-btn button {
align-self: center;
}
#agentFilesSection {
margin-top: var(--box-spacing);
}
.form-actions {
display: flex;
gap: var(--badge-spacing);
margin-block: var(--box-spacing) calc(var(--page-spacing) * 4);
}
/* ── Custom Commands ── */
.custom-commands {
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
}
.custom-command-item {
display: flex;
}
.custom-command-fields {
flex: 1;
display: flex;
gap: var(--badge-spacing);
overflow: hidden;
}
.custom-command-fields .cmd-type {
flex: 0 0 auto;
width: 10em;
}
.custom-command-fields .cmd-name {
flex: 2;
}
.custom-command-fields .cmd-command {
flex: 5;
}
.custom-command-item .remove-cmd-btn {
margin-left: var(--badge-spacing);
color: var(--dangerous);
align-self: center;
}
.custom-command-item .remove-cmd-btn:hover {
background: var(--dangerous);
color: var(--f1-bg);
}
.add-cmd-btn {
align-self: flex-start;
}
/* ── Checkbox ── */
label.checkbox-label {
display: flex;
align-items: center;
gap: var(--badge-spacing);
cursor: pointer;
margin-top: var(--badge-spacing);
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.checkbox-hint {
opacity: var(--semi-transparent);
font-size: var(--font-size);
}
/* ── Skills ── */
.skill-list {
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
}
label.skill-item {
display: flex;
align-items: center;
gap: var(--badge-spacing);
cursor: pointer;
padding: var(--badge-spacing) var(--box-spacing);
background: var(--f2-bg);
border: var(--border-width) solid var(--f2-border);
border-radius: var(--border-radius);
margin-top: 0;
}
.skill-item:hover {
border-color: var(--accent);
}
.skill-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.skill-version {
opacity: var(--semi-transparent);
}
.skill-desc {
opacity: var(--semi-transparent);
font-size: var(--font-size);
margin-left: auto;
}
.skill-empty {
opacity: var(--semi-transparent);
padding: var(--box-spacing);
}
.skill-empty code {
background: var(--f2-bg);
padding: 2px 6px;
border-radius: var(--border-radius);
}
.skill-unavailable {
opacity: var(--semi-transparent);
cursor: not-allowed;
}
.skill-unavailable:hover {
border-color: var(--f2-border);
}
.skill-warning {
color: var(--dangerous);
margin-left: auto;
}
/* ── Profile ── */
.profile-message {
padding: var(--badge-spacing) var(--box-spacing);
border-radius: var(--border-radius);
margin-top: var(--badge-spacing);
}
.profile-message-success {
background: rgba(0, 180, 0, 0.15);
color: #0a0;
}
.profile-message-error {
background: rgba(220, 0, 0, 0.15);
color: var(--dangerous);
}
.profile-divider {
border: none;
border-top: var(--border-width) solid var(--f2-border);
margin: var(--box-spacing) 0;
}
.danger-btn {
color: var(--dangerous);
border-color: currentcolor;
}
.danger-btn:hover {
color: var(--f1-bg);
background: var(--dangerous);
}
.positive-btn {
color: var(--secondary);
border-color: currentcolor;
}
.positive-btn:hover {
color: var(--f1-bg);
background: var(--secondary);
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 2.4em;
height: 1.4em;
cursor: pointer;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--f2-border);
border-radius: 1em;
transition: background var(--transition-duration);
}
.toggle-slider::before {
content: '';
position: absolute;
width: 1em;
height: 1em;
left: .2em;
top: .2em;
background: var(--f1-bg);
border-radius: 50%;
transition: transform var(--transition-duration);
}
.toggle-switch input:checked + .toggle-slider {
background: var(--secondary);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(1em);
}
/* ── Telegram Section ── */
.telegram-status-box {
padding: var(--box-padding);
background: var(--f3-bg);
border: var(--border-width) solid var(--f2-border);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
}
.telegram-status-box .tg-error {
color: var(--dangerous);
}
.telegram-actions {
margin-top: var(--badge-spacing);
}
/* ── Cronjob Status ── */
.form-status-box {
padding: var(--box-padding);
background: var(--f3-bg);
border: var(--border-width) solid var(--f2-border);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
}
.form-group:has(.form-status-box:empty) {
display: none;
}
.form-status-box .status-active {
color: var(--secondary);
}
.form-status-box .status-inactive {
opacity: var(--semi-transparent);
}
.form-status-box .status-error {
color: var(--dangerous);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--badge-spacing);
padding: var(--box-padding);
padding-inline: 0;
}
.form-check-group {
display: flex;
gap: var(--badge-spacing);
}
.form-check-group label {
display: flex;
align-items: center;
gap: var(--badge-spacing);
cursor: pointer;
margin-top: 0;
}
.form-check-group input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.form-hint {
display: block;
margin-top: 4px;
font-size: var(--font-size);
opacity: var(--semi-transparent);
}
/* ── Admin User List ── */
.admin-user-list {
display: flex;
flex-direction: column;
}
.admin-user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--box-padding);
}
.admin-user-info {
display: flex;
flex-direction: column;
}
.admin-user-name {
font-weight: bold;
}
.admin-user-meta {
opacity: var(--semi-transparent);
}
.admin-user-actions {
display: flex;
gap: var(--badge-spacing);
flex-shrink: 0;
}
.admin-checkbox-row {
margin: var(--badge-spacing) 0;
}
.admin-checkbox-row .toggle-label {
display: flex;
align-items: center;
gap: var(--badge-spacing);
cursor: pointer;
}