feat: implement ui v1
This commit is contained in:
a.tolmachev
@@ -0,0 +1,428 @@
|
||||
:root {
|
||||
font-family:
|
||||
"IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: #1e1a17;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(234, 165, 91, 0.18), transparent 28%),
|
||||
radial-gradient(circle at 82% 10%, rgba(15, 117, 103, 0.18), transparent 24%),
|
||||
linear-gradient(180deg, #f7f1e8 0%, #f2ece2 100%);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.layout-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
padding: 32px 28px;
|
||||
border-right: 1px solid rgba(30, 26, 23, 0.08);
|
||||
background: rgba(255, 250, 244, 0.78);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.brand-block h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||
line-height: 0.96;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #9a6540;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
margin: 0;
|
||||
color: #554941;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
background: linear-gradient(135deg, #0f7567, #19735d);
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 20px 38px rgba(12, 84, 73, 0.18);
|
||||
}
|
||||
|
||||
.page-stack {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
border-radius: 28px;
|
||||
padding: 28px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
box-shadow: 0 24px 60px rgba(45, 38, 32, 0.08);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
margin: 0;
|
||||
color: #66574e;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stack-layout {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field-block span {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: #52453e;
|
||||
}
|
||||
|
||||
.field-block input,
|
||||
.field-block textarea,
|
||||
.field-block select {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(30, 26, 23, 0.14);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(255, 254, 252, 0.92);
|
||||
color: #1e1a17;
|
||||
}
|
||||
|
||||
.field-inline {
|
||||
max-width: 420px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.field-block-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #a1422c;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 46px;
|
||||
padding: 0 18px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(135deg, #0f7567, #19735d);
|
||||
color: white;
|
||||
box-shadow: 0 18px 32px rgba(12, 84, 73, 0.18);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: #ede1d1;
|
||||
color: #2e2722;
|
||||
}
|
||||
|
||||
.operation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.operation-card,
|
||||
.summary-card,
|
||||
.feedback-card,
|
||||
.result-panel {
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 252, 247, 0.9);
|
||||
border: 1px solid rgba(30, 26, 23, 0.08);
|
||||
}
|
||||
|
||||
.operation-card {
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
transition:
|
||||
transform 0.16s ease,
|
||||
box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.operation-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 18px 40px rgba(37, 31, 28, 0.08);
|
||||
}
|
||||
|
||||
.operation-card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.operation-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.operation-name {
|
||||
margin: 0;
|
||||
color: #65574f;
|
||||
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.protocol-pill,
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.protocol-rest {
|
||||
background: rgba(15, 117, 103, 0.12);
|
||||
color: #0f7567;
|
||||
}
|
||||
|
||||
.protocol-graphql {
|
||||
background: rgba(181, 92, 41, 0.12);
|
||||
color: #b55c29;
|
||||
}
|
||||
|
||||
.protocol-grpc {
|
||||
background: rgba(77, 74, 140, 0.12);
|
||||
color: #4d4a8c;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background: rgba(224, 184, 67, 0.18);
|
||||
color: #845d0e;
|
||||
}
|
||||
|
||||
.status-published {
|
||||
background: rgba(57, 153, 92, 0.16);
|
||||
color: #1c6a3e;
|
||||
}
|
||||
|
||||
.status-testing,
|
||||
.status-archived {
|
||||
background: rgba(102, 87, 78, 0.14);
|
||||
color: #5a4d46;
|
||||
}
|
||||
|
||||
.key-value-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.key-value-list div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.key-value-list dt,
|
||||
.key-value-list dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 18px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.summary-card span {
|
||||
color: #6b5d55;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.summary-card strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.feedback-card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.feedback-success {
|
||||
border-color: rgba(28, 106, 62, 0.14);
|
||||
background: rgba(243, 252, 246, 0.92);
|
||||
}
|
||||
|
||||
.feedback-error {
|
||||
border-color: rgba(161, 66, 44, 0.18);
|
||||
background: rgba(255, 246, 243, 0.92);
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
padding: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-panel h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.yaml-panel {
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(34, 30, 28, 0.96);
|
||||
color: #f6efe6;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.layout-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(30, 26, 23, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.layout-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-grid,
|
||||
.split-layout,
|
||||
.result-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user