styles in Datei verschoben
This commit is contained in:
@@ -0,0 +1,276 @@
|
||||
:root {
|
||||
--ink: #1B2430;
|
||||
--ink-soft: #5C6B7A;
|
||||
--surface: #FFFFFF;
|
||||
--canvas: #F5F7F8;
|
||||
--line: #D7DEE3;
|
||||
--accent: #0E7C7B;
|
||||
--accent-dark: #0B6362;
|
||||
--ok: #1D7A3E;
|
||||
--bad: #B3261E;
|
||||
--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.45rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: var(--ink-soft);
|
||||
margin-top: 6px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step[data-disabled="true"] {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 650;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--ink-soft);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.step-label .num {
|
||||
font-family: var(--mono);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin: 14px 0 6px;
|
||||
}
|
||||
|
||||
label:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
input[type="text"]:focus-visible,
|
||||
textarea:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Autocomplete */
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#customerSearch {
|
||||
font-size: 1.05rem;
|
||||
padding: 13px 14px;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + 4px);
|
||||
z-index: 10;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.suggestions.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.suggestion+.suggestion {
|
||||
border-top: 1px solid var(--canvas);
|
||||
}
|
||||
|
||||
.suggestion.active,
|
||||
.suggestion:hover {
|
||||
background: #E9F3F3;
|
||||
}
|
||||
|
||||
.suggestion .cnum {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.suggestion-empty {
|
||||
padding: 12px 14px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Gewaehlter Kunde als Chip */
|
||||
.customer-chip {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: #E9F3F3;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.customer-chip.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.customer-chip .cnum {
|
||||
font-family: var(--mono);
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.customer-chip .cname {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.customer-chip button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--ink-soft);
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.submit {
|
||||
font: inherit;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 11px 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit:hover {
|
||||
background: #0B6362;
|
||||
}
|
||||
|
||||
.submit:disabled {
|
||||
background: var(--line);
|
||||
color: var(--ink-soft);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
margin-top: 14px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.92rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feedback.error {
|
||||
display: block;
|
||||
background: #FBEAE9;
|
||||
color: var(--bad);
|
||||
border: 1px solid #EBC4C1;
|
||||
}
|
||||
|
||||
.feedback.success {
|
||||
display: block;
|
||||
background: #E8F3EC;
|
||||
color: var(--ok);
|
||||
border: 1px solid #BFDEC9;
|
||||
}
|
||||
|
||||
.feedback a {
|
||||
color: inherit;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.feedback .mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
Reference in New Issue
Block a user