/* css/core.css */ /* Grundlegende Styles, Schriftarten und Farbvariablen */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); :root { /* Friendstime Logo Farben */ --friendstime-logo-friends-blue: #00A0C6; /* Ihr Blau - BITTE PRÜFEN & ANPASSEN */ --friendstime-logo-time-black: #222222; /* Dunkles Grau für Text */ /* Haupt-Theme-Farben */ --primary-color: var(--friendstime-logo-friends-blue); --primary-color-rgb: 0, 160, 198; --primary-color-hover: #008db3; /* Etwas dunkler für Hover-Effekte */ --secondary-color: #6c757d; /* Textfarben */ --text-color-base: var(--friendstime-logo-time-black); --text-color-light-variant: #343a40; --text-color-muted: #6c757d; --text-color-inverted-base: #f8f9fa; /* Für dunkle Hintergründe */ --text-color-inverted-muted: #adb5bd; --link-color: var(--primary-color); --link-hover-color: var(--primary-color-hover); /* Hintergrundfarben Basis */ --background-color-body-light: #f4f6f8; --card-background-light: #ffffff; /* Wichtig für .form-panel auf index.php */ --input-background-light: #ffffff; --background-color-body-dark: #121212; --card-background-dark: #1e1e1e; /* Wichtig für .form-panel auf index.php im Dark Mode */ --input-background-dark: #2a2a2a; /* Rahmenfarben Basis */ --border-color-light: #dee2e6; --border-color-input-light: #ced4da; --border-color-dark: #3a3a3a; --border-color-input-dark: #555555; /* Button Farben */ --button-primary-bg: var(--primary-color); --button-primary-hover-bg: var(--primary-color-hover); --button-text-color: #ffffff; /* Benachrichtigungsfarben (Kontrast geprüft) */ --success-text: #0f5132; --success-bg: #d1e7dd; --success-border: #badbcc; --error-text: #842029; --error-bg: #f8d7da; --error-border: #f5c2c7; --warning-text: #664d03; --warning-bg: #fff3cd; --warning-border: #ffecb5; --info-text: #055160; --info-bg: #cff4fc; --info-border: #9eeaf9; /* Schriftarten */ --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-base: 'Roboto', var(--font-family-sans-serif); --transition-base: all 0.2s ease-in-out; --box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075); --box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); --box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.175); --navbar-height: 60px; /* Standardhöhe Ihrer fixierten Navbars */ } /* Globale Body-Styles */ html { scroll-padding-top: calc(var(--navbar-height) + 1rem); font-size: 100%; } body { font-family: var(--font-family-base); line-height: 1.6; margin: 0; padding-top: var(--navbar-height); /* Standard-Padding für Seiten mit fixierter Navbar */ display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; /* Theme-spezifische Farben werden in light_theme.css und dark_theme.css gesetzt */ background-color: var(--current-background-color, var(--background-color-body-light)); color: var(--current-text-color, var(--text-color-base)); } /* Spezifisches Body-Styling für index.php (Landing Page), wenn Navbar dort NICHT fixiert ist */ /* Fügen Sie in index.php hinzu */ body.page-landing-non-fixed-navbar { padding-top: 0 !important; /* Entfernt das Padding, wenn die Navbar nicht fixiert ist */ } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-sans-serif); font-weight: 600; line-height: 1.3; margin-top: 0; margin-bottom: 0.75rem; color: var(--current-text-color, var(--text-color-base)); /* Stellt sicher, dass Überschriften die Theme-Farbe annehmen */ } h1 { font-size: clamp(1.8rem, 5vw, 2.25rem); } h2 { font-size: clamp(1.5rem, 4vw, 1.75rem); } h3 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); } a { text-decoration: none; transition: var(--transition-base); color: var(--current-link-color, var(--primary-color)); } a:hover { color: var(--current-link-hover-color, var(--primary-color-hover)); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 2px; } .logo-text .logo-friends { color: var(--friendstime-logo-friends-blue); font-weight: bold; } .logo-text .logo-time { font-weight: bold; color: var(--current-logo-time-color, var(--friendstime-logo-time-black)); } .form-control, .form-select { border-radius: 0.375rem; padding: 0.75rem 1rem; font-size: 1rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background-color: var(--current-input-background, var(--input-background-light)); border: 1px solid var(--current-input-border-color, var(--border-color-input-light)); color: var(--current-text-color, var(--text-color-base)); } .form-control::placeholder { color: var(--current-text-muted-color, var(--text-color-muted)); opacity: 1; } .form-control:focus, .form-select:focus { /* :focus-visible wird für Tastatur verwendet, :focus für Maus */ border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); outline: 0; } .btn { border-radius: 50px; padding: 0.75rem 1.5rem; font-weight: 500; transition: var(--transition-base); letter-spacing: 0.5px; border-width: 1px; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--button-primary-hover-bg); outline-offset: 2px; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-text-color); } .btn-primary:hover { background-color: var(--button-primary-hover-bg); border-color: var(--button-primary-hover-bg); color: var(--button-text-color); } .message-display { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: 0.375rem; text-align: center; font-weight: 500; font-size: 0.9rem; display: none; align-items: center; justify-content: center; border: 1px solid transparent; } .message-display.show { display: flex !important; } .message-display.error { background-color: var(--error-bg); color: var(--error-text); border-color: var(--error-border); } .message-display.success { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } .message-display.warning { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); } .message-display.info { background-color: var(--info-bg); color: var(--info-text); border-color: var(--info-border); } .form-panel-container { display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 2rem 1rem; width: 100%; } body.page-landing-non-fixed-navbar .form-panel-container { min-height: 100vh; padding-top: 2rem; /* Etwas Abstand oben, wenn Navbar nicht fixiert ist */ } body:not(.page-landing-non-fixed-navbar) .form-panel-container { min-height: calc(100vh - var(--navbar-height)); } .form-panel { padding: 2rem 2.5rem; border-radius: 0.75rem; box-shadow: var(--box-shadow-lg); width: 100%; max-width: 450px; text-align: center; opacity: 1; /* Hintergrundfarbe wird im Theme-CSS explizit gesetzt */ background-color: var(--current-card-background, var(--card-background-light)); } .form-panel h2 { margin-bottom: 1.75rem; font-weight: 600; font-size: 1.75rem; color: var(--current-text-color, var(--text-color-base)); } .form-panel .form-control, .form-panel .form-select, .form-panel textarea { margin-bottom: 1.25rem; } .form-panel .form-text { font-size: 0.8rem; } .form-panel hr { margin-top: 1.5rem; margin-bottom: 1.5rem; border-top-color: var(--current-border-color, var(--border-color));} .btn-custom { width: 100%; font-size: 1rem; padding: 0.75rem 1.25rem; } .btn-toggle-form, .forgot-password-link { background: none; border: none; text-decoration: none; cursor: pointer; padding: 0.5rem 0; margin-top: 1rem; font-weight: 500; font-size: 0.9rem; display: block; width: fit-content; margin-left: auto; margin-right: auto; color: var(--current-link-color, var(--primary-color)); } .btn-toggle-form:hover, .forgot-password-link:hover { text-decoration: underline; } .card-custom { border-radius: 0.5rem; margin-bottom: 1.5rem; box-shadow: var(--box-shadow-sm); background-color: var(--current-card-background); border: 1px solid var(--current-border-color); } .card-custom-header { padding: 0.75rem 1.25rem; margin-bottom: 0; font-weight: 600; border-bottom: 1px solid var(--current-border-color); background-color: rgba(0,0,0,.03); /* Leichter Akzent für Header, wird im Dark Theme überschrieben */ } .card-custom-body { padding: 1.25rem; } .card-custom-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--current-border-color); background-color: rgba(0,0,0,.03); } .footer { padding: 2rem 0; margin-top: auto; /* Hintergrund und Textfarbe werden im Theme-CSS gesetzt */ } .footer .nav-link { padding: .5rem 1rem; } /* Responsivität */ @media (max-width: 576px) { .form-panel-container { padding: 1rem 0.75rem; } .form-panel { padding: 1.5rem; margin-left: 0.75rem; margin-right: 0.75rem; } .form-panel h2 { font-size: 1.5rem; } .btn-custom { font-size: 0.95rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } }