UI-Redesign: AegisSight Design, Filter-Popover, Header-Umbau
- Session-Timeout auf 60 Minuten erhöht (ACCESS_TOKEN_EXPIRY + SESSION_TIMEOUT) - AegisSight Light Theme: Gold-Akzent (#C8A851) statt Indigo - Navigation-Tabs in eigene Zeile unter Header verschoben (HTML-Struktur) - Filter-Bar durch kompaktes Popover mit Checkboxen ersetzt (Mehrfachauswahl) - Archiv-Funktion repariert (lädt jetzt per API statt leerem Store) - Filter-Bugs behoben: Reset-Button ID, Default-Werte, Ohne-Datum-Filter - Mehrspalten-Layout Feature entfernt - Online-Status vom Header an User-Avatar verschoben (grüner Punkt) - Lupen-Icon entfernt - CLAUDE.md: Docker-Deploy und CSS-Tricks Regeln aktualisiert Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Server Deploy
@@ -112,13 +112,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
min-height: var(--header-height);
|
||||
padding: 0 var(--spacing-4);
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-left,
|
||||
@@ -126,11 +128,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
.view-tabs-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-1) var(--spacing-4);
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
position: sticky;
|
||||
top: var(--header-height);
|
||||
z-index: calc(var(--z-sticky) - 1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -150,7 +161,8 @@
|
||||
}
|
||||
|
||||
.project-select {
|
||||
min-width: 160px;
|
||||
width: 100%;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
font-weight: var(--font-medium);
|
||||
font-size: var(--text-sm);
|
||||
@@ -166,15 +178,17 @@
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: 12px 20px;
|
||||
font-size: var(--text-sm);
|
||||
gap: 2px;
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-tertiary);
|
||||
background: none;
|
||||
@@ -183,6 +197,7 @@
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-default);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Tab Icon */
|
||||
@@ -207,7 +222,7 @@
|
||||
/* Active State with Underline */
|
||||
.view-tab.active {
|
||||
color: var(--primary);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
background: rgba(200, 168, 81, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
@@ -256,6 +271,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
flex: 1 1 auto;
|
||||
min-width: 150px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@@ -266,8 +284,8 @@
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 450px;
|
||||
min-width: 350px;
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
padding: 10px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid transparent;
|
||||
@@ -439,6 +457,23 @@
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--success);
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-card);
|
||||
}
|
||||
|
||||
.offline .user-avatar::after {
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
@@ -447,16 +482,16 @@
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
min-width: 220px;
|
||||
padding: var(--spacing-2);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-dropdown);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
@@ -524,34 +559,125 @@
|
||||
FILTER BAR
|
||||
======================================== */
|
||||
|
||||
.filter-bar {
|
||||
.filter-bar-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
.filter-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.filter-toggle-btn.has-filters {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.filter-popover {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: var(--spacing-4);
|
||||
z-index: var(--z-dropdown);
|
||||
min-width: 280px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.filter-popover.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-popover-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-tertiary);
|
||||
.filter-popover-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
.filter-popover-row label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.filter-checkbox-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.filter-checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
margin-left: auto;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.filter-checkbox-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.filter-checkbox-item input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-checkbox-item input[type="checkbox"]:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.filter-checkbox-item input[type="checkbox"]:checked {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.filter-checkbox-item input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.filter-popover-footer {
|
||||
padding-top: var(--spacing-2);
|
||||
border-top: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -637,26 +763,26 @@
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
.view-board .filter-bar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: var(--spacing-4);
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Column */
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
min-width: 260px;
|
||||
width: var(--column-width, 280px);
|
||||
min-width: var(--column-min-width, 260px);
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - var(--header-height) - 160px);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-light);
|
||||
@@ -697,7 +823,10 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex: 1;
|
||||
padding-right: var(--spacing-8);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.column-count {
|
||||
@@ -716,12 +845,12 @@
|
||||
|
||||
.column-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
position: absolute;
|
||||
top: var(--spacing-3);
|
||||
right: var(--spacing-3);
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
.column-actions .btn-icon {
|
||||
@@ -1276,75 +1405,3 @@
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
/* Base Multi-Column Layout - aktiviert das Feature, aber zeigt noch einspaltig */
|
||||
.board.multi-column-layout .column-body {
|
||||
/* Bleibt erstmal bei flex layout bis Inhalt zu lang wird */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
/* Dynamisch aktivierte 2-spaltige Ansicht (wenn Scrollen nötig wäre) */
|
||||
.board.multi-column-layout .column-body.dynamic-2-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
gap: var(--spacing-2);
|
||||
align-content: start;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Dynamisch aktivierte 3-spaltige Ansicht (wenn viel Inhalt) */
|
||||
.board.multi-column-layout .column-body.dynamic-3-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
gap: var(--spacing-2);
|
||||
align-content: start;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Spalten-Breite wenn erweitert */
|
||||
.board.multi-column-layout .column {
|
||||
transition: width var(--transition-default), min-width var(--transition-default);
|
||||
}
|
||||
|
||||
.board.multi-column-layout .column.expanded-2x {
|
||||
width: auto;
|
||||
min-width: 560px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.board.multi-column-layout .column.expanded-3x {
|
||||
width: auto;
|
||||
min-width: 840px;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
/* Task Cards im Multi-Column Layout */
|
||||
.board.multi-column-layout .task-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hover-Effekt für Layout-Toggle Button */
|
||||
#btn-toggle-layout {
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
#btn-toggle-layout:hover {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Active state indicator - korrigiert für richtige Selektion */
|
||||
.view-board.active .board.multi-column-layout ~ * {
|
||||
/* Dummy rule to ensure the layout class is applied */
|
||||
}
|
||||
|
||||
/* Layout toggle button active state */
|
||||
#btn-toggle-layout.active {
|
||||
color: var(--primary);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
======================================== */
|
||||
|
||||
.view-calendar {
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-6);
|
||||
gap: var(--spacing-4);
|
||||
@@ -17,6 +17,10 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.view-calendar.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Calendar Header */
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
|
||||
@@ -175,8 +175,8 @@
|
||||
}
|
||||
|
||||
.git-status-badge.ahead {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3B82F6;
|
||||
background: rgba(124, 141, 181, 0.15);
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
.git-status-badge.behind {
|
||||
|
||||
@@ -170,7 +170,7 @@ select {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: var(--text-sm);
|
||||
font-size: var(--text-base); /* 16px - verhindert iOS Zoom bei Focus */
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-default);
|
||||
@@ -604,7 +604,8 @@ input[type="color"] {
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
min-height: 44px;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
background: none;
|
||||
|
||||
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
@@ -796,7 +796,7 @@
|
||||
|
||||
.drop-zone.drag-over {
|
||||
border-color: var(--primary);
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
background: rgba(200, 168, 81, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -287,10 +287,10 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
25%, 75% {
|
||||
background-color: var(--primary-100, rgba(59, 130, 246, 0.1));
|
||||
background-color: var(--primary-100, rgba(200, 168, 81, 0.1));
|
||||
}
|
||||
50% {
|
||||
background-color: var(--primary-200, rgba(59, 130, 246, 0.2));
|
||||
background-color: var(--primary-200, rgba(200, 168, 81, 0.2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.view-list.active {
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* List Header */
|
||||
|
||||
@@ -71,6 +71,82 @@
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE COLUMN INDICATOR
|
||||
======================================== */
|
||||
|
||||
.mobile-column-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.column-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.column-dots .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
opacity: 0.3;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-dots .dot.active {
|
||||
background: var(--primary);
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.column-name {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile view hint */
|
||||
.mobile-view-hint {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-view-hint.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-view-hint.left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.mobile-view-hint.right {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE SLIDE-IN MENU
|
||||
======================================== */
|
||||
@@ -436,6 +512,221 @@
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE BOARD OPTIMIERUNG
|
||||
======================================== */
|
||||
|
||||
/* Task Cards - Groesser und besser lesbar */
|
||||
.task-card {
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.task-card-meta {
|
||||
font-size: var(--text-sm);
|
||||
gap: var(--spacing-4);
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-meta-item {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.task-meta-item .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.task-card-labels {
|
||||
gap: 8px;
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 6px 12px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.task-card-footer {
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.task-assignee-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-counts {
|
||||
font-size: var(--text-sm);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Priority Stars groesser */
|
||||
.priority-stars {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Column Header */
|
||||
.column-header {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.column-count {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Column Body */
|
||||
.column-body {
|
||||
padding: var(--spacing-3);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Add Task Button */
|
||||
.btn-add-task {
|
||||
padding: var(--spacing-4);
|
||||
font-size: var(--text-base);
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
/* Filter Bar */
|
||||
.filter-bar {
|
||||
padding: var(--spacing-4);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-height: 44px;
|
||||
font-size: var(--text-base);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Stats Bar */
|
||||
.board-stats-bar {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
gap: var(--spacing-4);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.board-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.board-stat-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.board-stat-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.board-stat-value {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.board-stat-label {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Week Strip */
|
||||
.week-strip {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
.week-strip-nav {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.week-strip-nav svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.week-strip-day {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
}
|
||||
|
||||
.week-strip-day-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.week-strip-day-number {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.week-strip-today {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
/* Board Padding */
|
||||
.board {
|
||||
padding: var(--spacing-3);
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Modal auf Mobile */
|
||||
.modal-body {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Subtasks groesser */
|
||||
.subtask-item {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.subtask-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Comments groesser */
|
||||
.comment-content {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Attachments */
|
||||
.attachment-name {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.link-item {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -469,4 +760,150 @@
|
||||
.hamburger-btn.active .hamburger-line:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
EXTRA SMALL: NOCH GROESSERE ELEMENTE
|
||||
======================================== */
|
||||
|
||||
/* Task Cards noch groesser */
|
||||
.task-card {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-card-meta {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 8px 14px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Column */
|
||||
.column-header {
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.column-body {
|
||||
padding: var(--spacing-4);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Filter - vertikal auf sehr kleinen Screens */
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: 0;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Stats Bar - scrollbar horizontal */
|
||||
.board-stats-bar {
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-5);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.board-stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.board-stat-value {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
/* Week Strip kompakter */
|
||||
.week-strip {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
}
|
||||
|
||||
.week-strip-day {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
.week-strip-day-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.week-strip-day-number {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Login Screen */
|
||||
.login-container {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.login-form .form-group label {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Form Groups */
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Add Task Button */
|
||||
.btn-add-task {
|
||||
min-height: 56px;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,8 +77,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
background: none;
|
||||
@@ -770,7 +770,9 @@
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: var(--spacing-6);
|
||||
top: calc(var(--spacing-6) + env(safe-area-inset-top, 0px));
|
||||
right: var(--spacing-6);
|
||||
right: calc(var(--spacing-6) + env(safe-area-inset-right, 0px));
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 32px;
|
||||
|
||||
@@ -59,16 +59,16 @@
|
||||
============================================================================= */
|
||||
|
||||
.notification-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
width: 380px;
|
||||
max-height: 520px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
z-index: var(--z-dropdown);
|
||||
z-index: 10001;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
.reminder-number-input:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
|
||||
.reminder-unit-select {
|
||||
@@ -200,7 +200,7 @@
|
||||
.reminder-unit-select:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
|
||||
.reminder-advance-suffix {
|
||||
@@ -293,7 +293,7 @@
|
||||
|
||||
.custom-select-trigger.active {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
|
||||
.custom-select-value {
|
||||
@@ -477,7 +477,7 @@
|
||||
border-color: #1d4ed8;
|
||||
color: white !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 3px 8px rgba(200, 168, 81, 0.4);
|
||||
}
|
||||
|
||||
#reminder-modal .btn-secondary {
|
||||
|
||||
@@ -4,6 +4,57 @@
|
||||
* Mobile und Tablet Anpassungen
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
GLOBALE RESPONSIVE ANPASSUNGEN
|
||||
======================================== */
|
||||
|
||||
/* Verhindere horizontales Scrollen */
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
.app {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hauptcontainer */
|
||||
.main {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Alle Views */
|
||||
.view {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Verhindere Überlauf bei allen Elementen */
|
||||
* {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive Box-Sizing für alle Elemente */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TABLET (max 1024px)
|
||||
======================================== */
|
||||
@@ -31,33 +82,91 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MEDIUM SCREENS (max 1200px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
/* Header-Anpassungen für mittlere Bildschirme */
|
||||
.header {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Project Selector schmaler */
|
||||
.project-select {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Search Container schmaler */
|
||||
.search-container {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Navigation tabs - kompakter und zentriert bei mittleren Bildschirmen */
|
||||
.view-tabs {
|
||||
gap: var(--spacing-xs);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-tab {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Modals anpassen */
|
||||
.modal {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* Tabellen responsiv */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
SMALL TABLET (max 768px)
|
||||
======================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
gap: var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 var(--spacing-sm);
|
||||
gap: var(--spacing-xs);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.header-center {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-top: var(--spacing-sm);
|
||||
border-top: 1px solid var(--border-default);
|
||||
.view-tabs-bar {
|
||||
display: none; /* Navigation wird ins Mobile Menu verschoben */
|
||||
}
|
||||
|
||||
.header-right {
|
||||
order: 2;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -72,28 +181,18 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-tabs {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
/* Mobile Navigation wird über Hamburger Menu gesteuert */
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Logo kleiner auf Mobile */
|
||||
.logo {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.view-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
justify-content: center;
|
||||
.filter-bar-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-board {
|
||||
@@ -101,16 +200,119 @@
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Mobile Board - One column at a time */
|
||||
.board-container {
|
||||
overflow-x: hidden !important;
|
||||
scroll-snap-type: none !important;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 200px);
|
||||
margin: 0;
|
||||
padding: var(--spacing-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.column.mobile-active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.btn-add-column {
|
||||
width: calc(100vw - 32px);
|
||||
min-width: calc(100vw - 32px);
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hide scrollbar in mobile board */
|
||||
.board-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fix for views in mobile */
|
||||
.view.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* List view mobile adjustments */
|
||||
.view-list.active {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.list-view-toggle {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-sort {
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Table responsive */
|
||||
.list-table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.list-table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
/* Calendar view mobile adjustments */
|
||||
.view-calendar {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.calendar-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
min-height: 60px;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.calendar-task {
|
||||
font-size: 9px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@@ -264,6 +466,7 @@
|
||||
left: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
bottom: var(--spacing-md);
|
||||
bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.toast {
|
||||
@@ -291,7 +494,7 @@
|
||||
|
||||
@media print {
|
||||
.header,
|
||||
.filter-bar,
|
||||
.view-tabs-bar,
|
||||
.btn-add-column,
|
||||
.column-actions,
|
||||
.btn-add-task,
|
||||
|
||||
@@ -9,26 +9,26 @@
|
||||
FARBEN - Modernes Light Theme
|
||||
======================================== */
|
||||
|
||||
/* Primärfarben */
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--primary-light: #EEF2FF;
|
||||
--accent: #06B6D4;
|
||||
--accent-hover: #0891B2;
|
||||
/* Primärfarben - AegisSight Light Theme */
|
||||
--primary: #C8A851;
|
||||
--primary-hover: #B5923E;
|
||||
--primary-light: rgba(200, 168, 81, 0.12);
|
||||
--accent: #C8A851;
|
||||
--accent-hover: #B5923E;
|
||||
|
||||
/* Hintergründe */
|
||||
--bg-main: #F8FAFC;
|
||||
--bg-main: #E8EDF6;
|
||||
--bg-secondary: #FFFFFF;
|
||||
--bg-tertiary: #F1F5F9;
|
||||
--bg-hover: #E2E8F0;
|
||||
--bg-active: #CBD5E1;
|
||||
--bg-tertiary: #F1F3F9;
|
||||
--bg-hover: #F8F9FC;
|
||||
--bg-active: #D0D6DE;
|
||||
--bg-sidebar: #FFFFFF;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-input: #FFFFFF;
|
||||
|
||||
/* Textfarben */
|
||||
--text-primary: #0F172A;
|
||||
--text-secondary: #475569;
|
||||
--text-primary: #0A1832;
|
||||
--text-secondary: #64748B;
|
||||
--text-tertiary: #64748B;
|
||||
--text-muted: #94A3B8;
|
||||
--text-placeholder: #94A3B8;
|
||||
@@ -44,9 +44,9 @@
|
||||
--error: #EF4444;
|
||||
--error-bg: #FEE2E2;
|
||||
--error-text: #991B1B;
|
||||
--info: #3B82F6;
|
||||
--info-bg: #DBEAFE;
|
||||
--info-text: #1E40AF;
|
||||
--info: #7C8DB5;
|
||||
--info-bg: rgba(124, 141, 181, 0.12);
|
||||
--info-text: #4A5568;
|
||||
|
||||
/* Prioritätsfarben */
|
||||
--priority-high: #EF4444;
|
||||
@@ -60,7 +60,7 @@
|
||||
--border-light: #F1F5F9;
|
||||
--border-default: #E2E8F0;
|
||||
--border-dark: #CBD5E1;
|
||||
--border-focus: #4F46E5;
|
||||
--border-focus: #C8A851;
|
||||
|
||||
/* Schatten */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
@@ -68,12 +68,12 @@
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.2);
|
||||
--shadow-focus: 0 0 0 3px rgba(200, 168, 81, 0.25);
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-bg: #F1F5F9;
|
||||
--scrollbar-thumb: #CBD5E1;
|
||||
--scrollbar-thumb-hover: #94A3B8;
|
||||
--scrollbar-bg: #E8EDF6;
|
||||
--scrollbar-thumb: #94A3B8;
|
||||
--scrollbar-thumb-hover: #64748B;
|
||||
|
||||
/* Overlay */
|
||||
--overlay-bg: rgba(15, 23, 42, 0.5);
|
||||
@@ -158,7 +158,7 @@
|
||||
Z-INDEX
|
||||
======================================== */
|
||||
|
||||
--z-dropdown: 100;
|
||||
--z-dropdown: 300;
|
||||
--z-sticky: 200;
|
||||
--z-modal-overlay: 900;
|
||||
--z-modal: 1000;
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren