123 lines
2.4 KiB
CSS
123 lines
2.4 KiB
CSS
/* ==== ADMIN COMMENT STYLING ==== */
|
||
.comment.admin .comment-content {
|
||
background-color: var(--color-admin-highlight);
|
||
border-left: 4px solid var(--color-primary);
|
||
}
|
||
.comment.admin .comment-author::after {
|
||
content: " (Admin)";
|
||
color: var(--color-primary);
|
||
font-weight: normal;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
/* ==== ACTION BUTTONS (nur Admin hat mehrere Buttons) ==== */
|
||
.ticket-actions-bar {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.btn-secondary {
|
||
padding: 10px 16px;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.btn-secondary {
|
||
background-color: var(--color-accent);
|
||
color: white;
|
||
}
|
||
.btn-secondary:hover {
|
||
background-color: #1976d2;
|
||
}
|
||
|
||
/* ==== CUSTOM ADMIN LAYOUT FIX ==== */
|
||
.ticket-meta-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
@media (min-width: 600px) {
|
||
.ticket-info-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
/* GRID ADMIN SIDE ORDER */
|
||
|
||
.ticket-info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
|
||
grid-template-rows: auto auto auto; /* 3 rows */
|
||
gap: 15px;
|
||
}
|
||
|
||
/* Requester: span all 3 columns on row 1 */
|
||
.info-item.requester {
|
||
grid-column: 1 / 4;
|
||
grid-row: 1 / 2;
|
||
}
|
||
|
||
/* Description: span all 3 columns on row 2 */
|
||
.info-item.description {
|
||
grid-column: 1 / 4;
|
||
grid-row: 2 / 3;
|
||
}
|
||
|
||
/* Created, Updated, Time: row 3, columns 1-3 */
|
||
.info-item.created {
|
||
grid-column: 1 / 2;
|
||
grid-row: 3 / 4;
|
||
}
|
||
.info-item.updated {
|
||
grid-column: 2 / 3;
|
||
grid-row: 3 / 4;
|
||
}
|
||
/* Time div isn’t .info-item, so select it directly by nth-child */
|
||
.ticket-info-grid > div:nth-child(5) {
|
||
grid-column: 3 / 4;
|
||
grid-row: 3 / 4;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Status, Priority, Category: row 4, columns 1-3 */
|
||
.info-item.status {
|
||
grid-column: 1 / 2;
|
||
grid-row: 4 / 5;
|
||
}
|
||
.info-item.priority {
|
||
grid-column: 2 / 3;
|
||
grid-row: 4 / 5;
|
||
}
|
||
.info-item.category {
|
||
grid-column: 3 / 4;
|
||
grid-row: 4 / 5;
|
||
}
|
||
|
||
.forms-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.compact-form {
|
||
flex: 1;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.forms-row input,
|
||
.forms-row textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.forms-row {
|
||
flex-direction: column;
|
||
}
|
||
}
|