/* ====================================================== ms-aussehen.css (bereinigt, ohne eigene Farbtabelle) - Alle Farben aus farben.css - Keine eigenen :root-Farbdefinitionen mehr - Struktur und Klassennamen unverändert - Icons per HTML (img / inline SVG); Größe global über --ms-icon-size - Alle Box-Typen enthalten (ms-news, ms-liebe, ms-stellungen, ms-bilder, ms-event, ms-test, ms-gewalt) - ms-news: Neon (abhängig vom Body-Theme) – jetzt mit normalen Farben - ms-gewalt: Farben wie (hellgrau/silber, keine Neon) ====================================================== */ /* ------------------------- Globale Basisvariablen (nur Layout, keine Farben) ------------------------- */ :root { --ms-radius: 12px; --ms-padding: 12px; --ms-width: 520px; --ms-width-mobile: calc(100% - 32px); --ms-z: 99999; --ms-font-default: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ms-shadow: 0 14px 40px rgba(2, 6, 23, 0.12); /* ICON: zentrale Steuerung für alle Boxen (globale Einheit) */ --ms-icon-size: 20px; --ms-icon-padding-x: 12px; --ms-icon-padding-y: 12px; } /* ------------------------- Basislayout (Icon | Content) ------------------------- */ .ms-box { /* Default Bereichsvariablen (können pro Typ Farben/Schrift überschreiben) */ --ms-header-bg: var(--color-grau); --ms-header-farbe: var(--color-schwarz); --ms-body-bg: var(--color-weiss); --ms-body-farbe: var(--color-schwarz); --ms-icon-farbe: var(--color-blau); --ms-border: 1px solid rgba(0, 0, 0, 0.06); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(var(--ms-width), 92vw); max-width: 100%; border-radius: var(--ms-radius); box-shadow: var(--ms-shadow); z-index: var(--ms-z); font-family: var(--ms-font-default); overflow: hidden; display: grid; grid-template-columns: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2)) 1fr; grid-template-rows: auto 1fr auto; gap: 0; align-items: start; border: var(--ms-border); background: var(--ms-body-bg); } .ms-box.is-flex { display: flex; } /* Icon-Spalte */ .ms-box__icon-column, .ms-icon { grid-row: 1 / span 3; display: grid; place-items: center; padding: var(--ms-icon-padding-y) var(--ms-icon-padding-x); width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2)); min-width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2)); background: transparent; color: var(--ms-icon-farbe); } .ms-box__icon-column svg, .ms-icon svg { width: var(--ms-icon-size); height: var(--ms-icon-size); display: block; max-width: 100%; max-height: 100%; } .ms-box__icon-column img, .ms-icon img { width: var(--ms-icon-size); height: var(--ms-icon-size); display: block; object-fit: contain; background: transparent; } .ms-box__icon-column .ms-emoji, .ms-icon .ms-emoji { font-size: calc(var(--ms-icon-size) * 0.9); line-height: 1; } .ms-box[data-icon-bg="true"] .ms-box__icon-column, .ms-box[data-icon-bg="true"] .ms-icon { background-color: var(--ms-icon-bg, rgba(0, 0, 0, 0.04)); border-radius: 8px; } /* Content-Spalte */ .ms-box__content-column, .ms-content { grid-column: 2 / 3; grid-row: 1 / span 3; display: flex; flex-direction: column; min-width: 0; position: relative; gap: 0; padding: 0; } .ms-header { order: 0; background: var(--ms-header-bg); color: var(--ms-header-farbe); padding: 12px 16px; font-weight: var(--ms-header-weight, 700); font-family: var(--ms-header-font, var(--ms-font-default)); font-size: var(--ms-header-size, 16px); border-bottom: 1px solid rgba(0, 0, 0, 0.04); line-height: 1.2; word-break: break-word; } .ms-body { order: 1; background: var(--ms-body-bg); color: var(--ms-body-farbe); padding: 14px 16px; font-family: var(--ms-body-font, var(--ms-font-default)); font-size: var(--ms-body-size, 14px); font-weight: var(--ms-body-weight, 400); line-height: 1.45; flex: 1 1 auto; min-height: 0; overflow: auto; white-space: pre-wrap; } .ms-actions { order: 2; display: flex; justify-content: center; align-items: center; padding: 12px 16px; background: transparent; border-top: 1px solid rgba(0, 0, 0, 0.04); margin-top: 0; } /* OK-Button */ .ms-ok { background: var(--ms-ok-bg, var(--color-blau)); color: var(--ms-ok-fg, var(--color-weiss)); border: 0; padding: 8px 16px; border-radius: 8px; font-size: var(--ms-ok-size, 14px); font-family: var(--ms-ok-font, var(--ms-font-default)); cursor: pointer; box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08); transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .ms-ok:focus { outline: 3px solid rgba(0, 0, 0, 0.06); outline-offset: 2px; } .ms-ok:hover { filter: brightness(0.96); transform: translateY(-1px); } /* Close-Button */ .ms-close { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; display: grid; place-items: center; color: rgba(0, 0, 0, 0.45); z-index: 2; } .ms-close:hover { background: rgba(0, 0, 0, 0.04); color: var(--ms-body-farbe); } /* Zentrierte Overlay-Variante */ .ms-center-screen { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; max-width: 92vw; box-sizing: border-box; } /* ------------------------- Mobile Anpassung ------------------------- */ @media (max-width: 640px) { .ms-box { width: var(--ms-width-mobile); left: 50%; top: auto; bottom: 16px; transform: translateX(-50%); grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 10px; } .ms-box__icon-column, .ms-icon { grid-row: 1 / 2; width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 1.5)); min-width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 1.5)); padding: 8px; justify-self: start; } .ms-content { grid-row: 2 / 4; } .ms-header { padding: 10px 12px; } .ms-body { padding: 12px; } .ms-actions { padding: 10px 12px; justify-content: center; } .ms-box__icon-column svg, .ms-icon svg, .ms-box__icon-column img, .ms-icon img { width: calc(var(--ms-icon-size) * 0.8); height: calc(var(--ms-icon-size) * 0.8); } } /* ------------------------- Reduced motion ------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ------------------------- Typ-Overrides (pro Box) ------------------------- */ /* ---- ms-news (Neon – abhängig vom Body-Theme, jetzt mit normalen Farben) ---- */ .ms-news { /* Keine eigenen Farben – werden über Body-Theme gesetzt */ } /* Gemeinsame Dekorationen für alle ms-news Boxen (nutzen die gesetzten Variablen) */ .ms-news .ms-header { background-image: var(--ms-header-bg); color: var(--ms-header-farbe); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 255, 255, 0.08); box-shadow: 0 4px 18px rgba(0, 102, 255, 0.12); } .ms-news .ms-body { background: var(--ms-body-bg); color: var(--ms-body-farbe); border-left: 4px solid rgba(255, 255, 255, 0.08); padding: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); } .ms-news .ms-box__icon-column { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06) ); border-radius: 10px; } .ms-news .ms-box__icon-column svg, .ms-news .ms-box__icon-column img { filter: drop-shadow(0 6px 18px rgba(0, 102, 255, 0.18)); color: var(--ms-icon-farbe); } .ms-news .ms-ok { background-image: var(--ms-ok-bg); color: var(--ms-ok-fg); font-weight: 700; box-shadow: 0 8px 30px rgba(0, 102, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.25); border: 0; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .ms-news .ms-ok:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 102, 255, 0.28), 0 4px 10px rgba(0, 0, 0, 0.3); filter: brightness(1.03); } .ms-news .ms-close { color: rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); box-shadow: 0 6px 18px rgba(106, 0, 255, 0.06); } .ms-news .ms-close:hover { background: rgba(255, 255, 255, 0.04); color: var(--ms-header-farbe); transform: scale(1.03); } .ms-news .ms-header::after { content: ""; display: block; height: 3px; width: 100%; margin-top: 8px; border-radius: 3px; background: var(--ms-header-bg); box-shadow: 0 8px 30px rgba(0, 102, 255, 0.12); opacity: 0.95; transform-origin: left center; animation: neonPulse 3.6s ease-in-out infinite; } @keyframes neonPulse { 0% { transform: scaleX(0.92); filter: blur(0.6px); opacity: 0.9; } 50% { transform: scaleX(1.02); filter: blur(1.8px); opacity: 1; } 100% { transform: scaleX(0.92); filter: blur(0.6px); opacity: 0.9; } } /* ---- Body-Theme-spezifische Neon-Varianten für ms-news (jetzt mit normalen Farben) ---- */ /* theme-main: Blau/Cyan */ body.theme-main .ms-news { --ms-header-bg: linear-gradient(90deg, var(--color-blau), var(--color-cyan)); --ms-header-farbe: var(--color-weiss); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-cyan); --ms-icon-farbe: var(--color-cyan); --ms-border: 1px solid rgba(0, 89, 255, 0.25); --ms-ok-bg: linear-gradient(90deg, var(--color-cyan), var(--color-blau)); --ms-ok-fg: var(--color-schwarz); } /* theme-koerper: Orange/Rosa */ body.theme-koerper .ms-news { --ms-header-bg: linear-gradient( 90deg, var(--color-orange), var(--color-pink) ); --ms-header-farbe: var(--color-weiss); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-pink); --ms-icon-farbe: var(--color-orange); --ms-border: 1px solid rgba(255, 165, 0, 0.25); --ms-ok-bg: linear-gradient(90deg, var(--color-pink), var(--color-orange)); --ms-ok-fg: var(--color-schwarz); } /* theme-sex: Pink/Magenta */ body.theme-sex .ms-news { --ms-header-bg: linear-gradient( 90deg, var(--color-deeppink), var(--color-Magenta) ); --ms-header-farbe: var(--color-weiss); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-deeppink); --ms-icon-farbe: var(--color-Magenta); --ms-border: 1px solid rgba(255, 20, 147, 0.25); --ms-ok-bg: linear-gradient( 90deg, var(--color-Magenta), var(--color-deeppink) ); --ms-ok-fg: var(--color-schwarz); } /* theme-prostitution: Indigo/Violett */ body.theme-prostitution .ms-news { --ms-header-bg: linear-gradient( 90deg, var(--color-Indigo), var(--color-violet) ); --ms-header-farbe: var(--color-weiss); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-violet); --ms-icon-farbe: var(--color-Indigo); --ms-border: 1px solid rgba(75, 0, 130, 0.25); --ms-ok-bg: linear-gradient(90deg, var(--color-violet), var(--color-Indigo)); --ms-ok-fg: var(--color-schwarz); } /* theme-sextourismus: Gelb/Orange */ body.theme-sextourismus .ms-news { --ms-header-bg: linear-gradient( 90deg, var(--color-gelb), var(--color-orange) ); --ms-header-farbe: var(--color-schwarz); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-gelb); --ms-icon-farbe: var(--color-orange); --ms-border: 1px solid rgba(255, 255, 0, 0.25); --ms-ok-bg: linear-gradient(90deg, var(--color-orange), var(--color-gelb)); --ms-ok-fg: var(--color-schwarz); } /* theme-gewalt: Teal/Cyan (kühl, ernst) */ body.theme-gewalt .ms-news { --ms-header-bg: linear-gradient(90deg, var(--color-teal), var(--color-cyan)); --ms-header-farbe: var(--color-weiss); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-teal); --ms-icon-farbe: var(--color-cyan); --ms-border: 1px solid rgba(0, 128, 128, 0.25); --ms-ok-bg: linear-gradient(90deg, var(--color-cyan), var(--color-teal)); --ms-ok-fg: var(--color-schwarz); } /* ---- ms-gewalt (Farben wie – kein Neon) ---- */ .ms-gewalt { --ms-header-bg: var(--color-silver); --ms-header-farbe: var(--color-schwarz); --ms-body-bg: var(--color-lightgray); --ms-body-farbe: var(--color-schwarz); --ms-icon-farbe: var(--color-dimgray); --ms-border: 1px solid var(--color-gray); --ms-header-font: var(--ms-font-default); --ms-header-size: 16px; --ms-header-weight: 700; --ms-body-font: var(--ms-font-default); --ms-body-size: 14px; --ms-body-weight: 400; --ms-ok-bg: var(--color-gray); --ms-ok-fg: var(--color-weiss); --ms-ok-font: var(--ms-font-default); --ms-ok-size: 14px; } /* Dezente Akzente – bleibt thematisch passend */ .ms-gewalt .ms-header { border-bottom: 2px solid var(--color-firebrick); } .ms-gewalt .ms-body { border-left: 4px solid var(--color-firebrick); } .ms-gewalt .ms-ok:hover { background: var(--color-firebrick); } /* ---- Andere Box-Typen (unverändert) ---- */ /* ms-liebe */ .ms-liebe { --ms-header-bg: var(--color-lightpink); --ms-header-farbe: var(--color-rhodamine_red); --ms-body-bg: var(--color-whitesmoke); --ms-body-farbe: var(--color-brown); --ms-icon-farbe: var(--color-rhodamine_red); --ms-border: 1px solid rgba(225, 0, 152, 0.08); --ms-header-font: "Georgia", serif; --ms-header-size: 17px; --ms-header-weight: 700; --ms-body-font: "Georgia", serif; --ms-body-size: 15px; --ms-body-weight: 400; --ms-ok-bg: var(--color-rhodamine_red); --ms-ok-fg: var(--color-weiss); --ms-ok-font: "Georgia", serif; --ms-ok-size: 15px; } /* ms-stellungen */ .ms-stellungen { --ms-header-bg: var(--color-Hellgrau); --ms-header-farbe: var(--color-dimgray); --ms-body-bg: var(--color-weiss); --ms-body-farbe: var(--color-schwarz); --ms-icon-farbe: var(--color-dimgray); --ms-border: 1px solid rgba(0, 0, 0, 0.06); --ms-header-font: var(--ms-font-default); --ms-header-size: 15px; --ms-header-weight: 700; --ms-body-font: var(--ms-font-default); --ms-body-size: 14px; --ms-body-weight: 400; --ms-ok-bg: var(--color-dimgray); --ms-ok-fg: var(--color-weiss); --ms-ok-font: var(--ms-font-default); --ms-ok-size: 14px; } /* ms-bilder (dunkel) */ .ms-bilder { --ms-header-bg: var(--color-dunkelblau); --ms-header-farbe: var(--color-snow); --ms-body-bg: var(--color-schwarz); --ms-body-farbe: var(--color-lightblue); --ms-icon-farbe: var(--color-snow); --ms-border: 1px solid rgba(255, 255, 255, 0.06); --ms-header-font: "Helvetica Neue", Arial, sans-serif; --ms-header-size: 16px; --ms-header-weight: 700; --ms-body-font: "Helvetica Neue", Arial, sans-serif; --ms-body-size: 14px; --ms-body-weight: 400; --ms-ok-bg: var(--color-lightblue); --ms-ok-fg: var(--color-dunkelblau); --ms-ok-font: "Helvetica Neue", Arial, sans-serif; --ms-ok-size: 14px; } /* ms-event */ .ms-event { --ms-header-bg: var(--color-azure); --ms-header-farbe: var(--color-darkolivegreen); --ms-body-bg: var(--color-weiss); --ms-body-farbe: var(--color-darkolivegreen); --ms-icon-farbe: var(--color-lime); --ms-border: 1px solid rgba(16, 185, 129, 0.06); --ms-header-font: "Segoe UI", var(--ms-font-default); --ms-header-size: 16px; --ms-header-weight: 800; --ms-body-font: "Segoe UI", var(--ms-font-default); --ms-body-size: 14px; --ms-body-weight: 400; --ms-ok-bg: var(--color-lime); --ms-ok-fg: var(--color-schwarz); --ms-ok-font: "Segoe UI", var(--ms-font-default); --ms-ok-size: 14px; } /* ms-test (debug) */ .ms-test { --ms-header-bg: var(--color-gold); --ms-header-farbe: var(--color-firebrick); --ms-body-bg: var(--color-weiss); --ms-body-farbe: var(--color-firebrick); --ms-icon-farbe: var(--color-orange); --ms-border: 1px dashed rgba(0, 0, 0, 0.08); --ms-header-font: "Courier New", monospace; --ms-header-size: 15px; --ms-header-weight: 700; --ms-body-font: "Courier New", monospace; --ms-body-size: 13px; --ms-body-weight: 400; --ms-ok-bg: var(--color-orange); --ms-ok-fg: var(--color-weiss); --ms-ok-font: "Courier New", monospace; --ms-ok-size: 13px; } /* ------------------------- Utility / kleine Extras ------------------------- */ .ms-icon-image { display: block; border-radius: 8px; } .ms-box:focus-within { box-shadow: 0 18px 48px rgba(2, 6, 23, 0.18); } .ms-box:hover { transform: translateY(-2px); transition: transform 180ms ease, box-shadow 180ms ease; } /* ------------------------- Hinweise - Icons: keine inline width/height in PHP-Templates; Größe über --ms-icon-size steuern - ms-news: Neon abhängig vom Body-Theme – jetzt mit normalen Farben - ms-gewalt: dezente Farben (hellgrau/silber) mit rotem Akzent, kein Neon ------------------------- */