2023251
/
trihub-ernaehrung-backseatDevs
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(contact): Kontakt-Popup an das Design des Buchungsdialogs angleichen 

Buttonfarbe, Rundungen, Formularfelder und Fensterdarstellung vereinheitlichen; bestehende Schriftfarben beibehalten.
feature/beraterprofile
Marvin Gemlin 2026-09-29 15:15:24 +00:00
parent d79ab2b0ce
commit fc19fef576
1 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/features/contact/contact.css
View File

@ -23,30 +23,30 @@
--contact-foreground: oklch(96% 0.008 210); --contact-foreground: oklch(96% 0.008 210);
--contact-accent: oklch(70% 0.12 205); --contact-accent: oklch(70% 0.12 205);
box-sizing: border-box; box-sizing: border-box;
width: min(586px, calc(100% - 32px)); width: min(32rem, calc(100vw - 2rem));
max-height: calc(100dvh - 32px); max-height: calc(100dvh - 2rem);
margin: auto; margin: auto;
padding: 32px; padding: 1.75rem;
border: 1px solid oklch(100% 0 0 / 0.1); overflow-y: auto;
border-radius: 1.1rem; border: 1px solid #324449;
background: oklch(17% 0.024 221); border-radius: 1.25rem;
background: #071316;
color: var(--contact-foreground); color: var(--contact-foreground);
font: font:
400 16px/1.5 "DM Sans", 400 16px/1.5 "DM Sans",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
box-shadow: 0 24px 80px #0008; box-shadow: 0 1.5rem 4rem #0006;
} }
.contact-dialog::backdrop { .contact-dialog::backdrop {
background: #000a; background: rgb(0 0 0 / 65%);
backdrop-filter: blur(4px);
} }
.contact-dialog * { .contact-dialog * {
box-sizing: border-box; box-sizing: border-box;
} }
.contact-dialog h2 { .contact-dialog h2 {
margin: 8px 32px 8px 0; margin: 8px 32px 8px 0;
font-size: 28px; font-size: 1.35rem;
line-height: 1.25; line-height: 1.25;
} }
.contact-dialog p { .contact-dialog p {
@ -69,54 +69,57 @@
} }
.contact-form label { .contact-form label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 0.35rem;
font-weight: 600;
} }
.contact-form input:not([type="checkbox"]), .contact-form input:not([type="checkbox"]),
.contact-form select { .contact-form select {
width: 100%; width: 100%;
min-height: 48px; min-height: 2.75rem;
padding: 10px 12px; padding: 0.65rem 0.8rem;
border: 1px solid oklch(100% 0 0 / 0.12); border: 1px solid #61777d;
border-radius: 6px; border-radius: 0.75rem;
background: oklch(13% 0.022 223); background: #101e22;
color: inherit; color: inherit;
font: inherit; font: inherit;
color-scheme: dark; color-scheme: dark;
} }
.contact-dialog button { .contact-dialog button {
min-height: 44px; min-height: 2.75rem;
padding: 10px 16px; padding: 0.65rem 0.8rem;
border: 0; border: 1px solid transparent;
border-radius: 6px; border-radius: 0.75rem;
font: font: inherit;
500 14px/1.5 "DM Sans",
sans-serif;
cursor: pointer; cursor: pointer;
} }
.contact-dialog .contact-close { .contact-dialog .contact-close {
float: right; position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0; padding: 0;
width: 44px; width: 2.75rem;
height: 2.75rem;
border: 0;
background: transparent; background: transparent;
color: inherit; color: inherit;
font-size: 28px; font-size: 28px;
} }
.contact-submit { .contact-submit {
width: 100%; width: 100%;
background: white; background: #53d5cd;
color: oklch(20% 0.03 220); color: oklch(20% 0.03 220);
} }
.contact-submit:hover:not(:disabled) { .contact-submit:hover:not(:disabled) {
background: var(--contact-accent); background: #6de0d9;
} }
.contact-dialog :disabled { .contact-dialog :disabled {
opacity: 0.5; opacity: 0.7;
cursor: not-allowed; cursor: not-allowed;
} }
.contact-dialog :focus-visible { .contact-dialog :focus-visible {
outline: 3px solid oklch(70% 0.12 205 / 0.45); outline: 3px solid #53d5cd;
outline-offset: 3px; outline-offset: 4px;
} }
.contact-dialog .contact-help { .contact-dialog .contact-help {
margin-top: 8px; margin-top: 8px;
@ -145,8 +148,3 @@
.contact-status a { .contact-status a {
color: var(--contact-accent); color: var(--contact-accent);
} }
@media (max-width: 480px) {
.contact-dialog {
padding: 24px 20px;
}
}