nachbaisabel/frontend_projekt
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

t

Browse Source
This commit is contained in:
GeNii96 2026-06-03 08:56:56 +02:00
parent 6df5485707
commit 289f7eebbe
2 changed files with 114 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
OnlyPrompt.Frontend/css/base.css
View File

@ -44,18 +44,28 @@ body {
.layout {
display: flex;
min-height: 100vh;
width: 100%;
background: var(--bg);
}
#sidebar-container {
flex-shrink: 0;
display: flex;
position: sticky;
top: 0;
height: 100vh;
align-self: flex-start;
overflow-y: auto;
}
/* Main content area - flex child that fills remaining space */
.page-body {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
max-width: 100%;
padding: 0;
width: 100%;
}
/* ── Reusable empty / error state components ─────────────────────────── */

201
OnlyPrompt.Frontend/css/topbar.css
View File

@ -14,112 +14,115 @@
align-items: center;
justify-content: space-between;
gap: 18px;
}
box-sizing: border-box;
.topbar-search {
flex: 1; /* Takes all available space */
max-width: none; /* No upper limit, expands freely */
display: flex;
align-items: center;
gap: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 10px 20px;
border-radius: 14px; /* Rounded like login inputs */
}
.topbar-search i {
color: #94a3b8;
font-size: 1.3rem;
}
.topbar-search input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 0.95rem;
color: #334155;
}
.topbar-search input::placeholder {
color: #94a3b8;
font-weight: 400;
}
/* Icons and avatar container */
.topbar-actions {
display: flex;
align-items: center;
gap: 16px;
}
.topbar-icon-btn {
background: transparent;
border: none;
font-size: 1.4rem;
color: #475569;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
}
.topbar-icon-btn:hover {
background: #f1f5f9;
color: #3b82f6;
}
.topbar-avatar-btn {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.topbar-avatar {
width: 48px;
height: 48px;
object-fit: cover;
border: 1px solid #e2e8f0;
border-radius: 50%; /* Avatar round */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.topbar-shell {
padding: 12px 20px;
}
.topbar-search {
padding: 8px 16px;
flex: 1; /* Takes all available space */
max-width: none; /* No upper limit, expands freely */
display: flex;
align-items: center;
gap: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 10px 20px;
border-radius: 14px; /* Rounded like login inputs */
}
.topbar-search i {
font-size: 1.1rem;
color: #94a3b8;
font-size: 1.3rem;
}
.topbar-avatar {
width: 40px;
height: 40px;
.topbar-search input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 0.95rem;
color: #334155;
}
.topbar-icon-btn {
font-size: 1.2rem;
padding: 6px;
.topbar-search input::placeholder {
color: #94a3b8;
font-weight: 400;
}
/* Icons and avatar container */
.topbar-actions {
gap: 8px;
display: flex;
align-items: center;
gap: 16px;
}
.topbar-icon-btn {
background: transparent;
border: none;
font-size: 1.4rem;
color: #475569;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition:
background 0.2s,
color 0.2s;
}
.topbar-icon-btn:hover {
background: #f1f5f9;
color: #3b82f6;
}
.topbar-avatar-btn {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.topbar-avatar {
width: 48px;
height: 48px;
object-fit: cover;
border: 1px solid #e2e8f0;
border-radius: 50%; /* Avatar round */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.topbar-shell {
padding: 12px 20px;
}
.topbar-search {
padding: 8px 16px;
}
.topbar-search i {
font-size: 1.1rem;
}
.topbar-avatar {
width: 40px;
height: 40px;
}
.topbar-icon-btn {
font-size: 1.2rem;
padding: 6px;
}
.topbar-actions {
gap: 8px;
}
}
@media (max-width: 480px) {
.topbar-shell {
padding: 10px 16px;
}
.topbar-search {
padding: 6px 12px;
}
}
}
@media (max-width: 480px) {
.topbar-shell {
padding: 10px 16px;
}
.topbar-search {
padding: 6px 12px;
}
}