mirror of
https://github.com/sotam0316/brain_dogfood.git
synced 2026-04-24 19:48:35 +09:00
leeyj
108 lines
2.3 KiB
CSS
108 lines
2.3 KiB
CSS
/* Main Content Area */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 2rem 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Top Navigation Bar */
|
|
.topbar {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.search-bar {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 12px;
|
|
padding: 0.8rem 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 400px;
|
|
}
|
|
|
|
.search-bar input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: white;
|
|
width: 100%;
|
|
font-family: var(--font);
|
|
}
|
|
|
|
/* Glass Panels & Modals Base */
|
|
.glass-panel {
|
|
background: var(--card); backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
|
|
padding: 1.2rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
backdrop-filter: blur(5px);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal.active { display: flex; }
|
|
|
|
.modal-content {
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* UI Utility Components */
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid rgba(255,255,255,0.1);
|
|
border-top: 4px solid var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
.primary-btn {
|
|
background: var(--accent);
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
border: none;
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.primary-btn:hover { background: var(--accent-hover); }
|
|
|
|
.action-btn {
|
|
background: rgba(0,0,0,0.4);
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
color: white;
|
|
transition: background 0.2s;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.action-btn:hover { background: rgba(184, 59, 94, 0.8); }
|
|
.ai-btn:hover { background: var(--ai-accent); color: white; }
|