feat: improve operator UI and navigation
This commit is contained in:
a.tolmachev
+194
-2
@@ -53,7 +53,9 @@ button {
|
||||
.layout-sidebar {
|
||||
padding: 32px 28px;
|
||||
border-right: 1px solid rgba(30, 26, 23, 0.08);
|
||||
background: rgba(255, 250, 244, 0.78);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 248, 239, 0.94), rgba(246, 238, 228, 0.86)),
|
||||
rgba(255, 250, 244, 0.78);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
@@ -61,6 +63,46 @@ button {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.workspace-header h2 {
|
||||
margin: 4px 0 8px;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 0.94;
|
||||
}
|
||||
|
||||
.workspace-header p {
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
color: #62534b;
|
||||
}
|
||||
|
||||
.workspace-badges {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.workspace-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
background: rgba(255, 254, 250, 0.78);
|
||||
color: #5e514a;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -91,13 +133,33 @@ button {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
margin: 0 0 4px;
|
||||
color: #8d5e3d;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
}
|
||||
|
||||
.nav-link strong {
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.nav-link span {
|
||||
font-size: 0.84rem;
|
||||
color: #6a5b53;
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
background: linear-gradient(135deg, #0f7567, #19735d);
|
||||
color: white;
|
||||
@@ -105,6 +167,31 @@ button {
|
||||
box-shadow: 0 20px 38px rgba(12, 84, 73, 0.18);
|
||||
}
|
||||
|
||||
.nav-link-active span {
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.sidebar-meta {
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
|
||||
.sidebar-pill-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-stack {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
@@ -239,6 +326,89 @@ button {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 22px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
background: rgba(255, 252, 246, 0.92);
|
||||
}
|
||||
|
||||
.hero-card-accent {
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(15, 117, 103, 0.12), transparent 34%),
|
||||
linear-gradient(180deg, rgba(248, 242, 233, 0.98), rgba(255, 252, 246, 0.92));
|
||||
}
|
||||
|
||||
.hero-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero-metrics div {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.hero-metrics span {
|
||||
color: #71625b;
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.hero-metrics strong {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
justify-items: start;
|
||||
padding: 26px;
|
||||
border-radius: 24px;
|
||||
border: 1px dashed rgba(30, 26, 23, 0.18);
|
||||
background: rgba(253, 249, 243, 0.74);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
color: #65574f;
|
||||
}
|
||||
|
||||
.operation-card,
|
||||
.summary-card,
|
||||
.feedback-card,
|
||||
@@ -273,6 +443,11 @@ button {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.operation-card-header {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.operation-name {
|
||||
margin: 0;
|
||||
color: #65574f;
|
||||
@@ -280,6 +455,15 @@ button {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card-link-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
color: #0f7567;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.protocol-pill,
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
@@ -527,6 +711,10 @@ pre {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(30, 26, 23, 0.08);
|
||||
}
|
||||
|
||||
.workspace-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
@@ -548,4 +736,8 @@ pre {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user