Files
Tools/frontend/src/css/admin.css
T

141 lines
2.2 KiB
CSS

.admin {
display: flex;
flex-direction: column;
gap: 18px;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
color: var(--muted);
margin: 0 0 6px;
}
.muted {
color: var(--muted);
}
.admin-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.admin-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 12px 0 16px;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--muted);
font-weight: 600;
}
select {
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
width: 100%;
}
.admin-card textarea {
width: 100%;
}
.table {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
.table-row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 1fr);
gap: 8px;
padding: 12px 14px;
align-items: center;
background: var(--surface);
}
.table-row:nth-child(even) {
background: var(--surface-2);
}
.table-headings {
background: rgba(34, 211, 238, 0.08);
font-weight: 700;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.table.compact .table-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr);
}
.table .user {
font-weight: 700;
}
.table .actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
box-shadow: none;
padding: 9px 12px;
}
.ghost:hover {
color: var(--accent);
border-color: var(--accent);
background: rgba(34, 211, 238, 0.08);
}
.ghost.danger {
border-color: rgba(239, 68, 68, 0.4);
color: #f87171;
}
.ghost.danger:hover {
background: rgba(239, 68, 68, 0.12);
}
.table-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.error {
color: #f87171;
margin-top: 10px;
}