131 lines
2.2 KiB
CSS
131 lines
2.2 KiB
CSS
/* ── Full-viewport shell ── */
|
||
.app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── App body (everything below the header) ── */
|
||
.app-body {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Grid area (fills the app body) ── */
|
||
.app-grid-area {
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Floating control panels – bottom-left corner ── */
|
||
.floating-panels-container {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
z-index: 20;
|
||
}
|
||
|
||
/* ── Empty state placeholder ── */
|
||
.empty-state {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
color: #4b5563;
|
||
user-select: none;
|
||
}
|
||
|
||
.empty-state p {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.empty-state .empty-hint {
|
||
font-size: 0.85rem;
|
||
color: #374151;
|
||
}
|
||
|
||
/* ── Access denied state ── */
|
||
.access-denied-state {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
color: #4b5563;
|
||
user-select: none;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.access-denied-title {
|
||
margin: 0;
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.access-denied-hint {
|
||
margin: 0;
|
||
font-size: 0.875rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.access-request-sent {
|
||
color: #34d399;
|
||
}
|
||
|
||
.access-request-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.access-request-btns {
|
||
display: flex;
|
||
gap: 0.6rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-request-access {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border: 1px solid rgba(99, 102, 241, 0.35);
|
||
border-radius: 6px;
|
||
color: #818cf8;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
padding: 0.45rem 1.1rem;
|
||
transition:
|
||
background 0.12s,
|
||
border-color 0.12s;
|
||
}
|
||
.btn-request-access:hover {
|
||
background: rgba(99, 102, 241, 0.25);
|
||
border-color: rgba(99, 102, 241, 0.6);
|
||
}
|
||
|
||
.link-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #818cf8;
|
||
cursor: pointer;
|
||
font-size: inherit;
|
||
padding: 0;
|
||
text-decoration: underline;
|
||
transition: color 0.12s;
|
||
}
|
||
.link-btn:hover {
|
||
color: #a5b4fc;
|
||
}
|