/* ========================================================= LARP-NETZ CHAT Grunddesign v1 ========================================================= */ :root { --ln-blue: #2872fa; --ln-blue-hover: #1559ed; --ln-ink: #192a3d; --ln-text: #3A4F66; --ln-border: #e1e8ed; --ln-soft: #f2f5f7; --ln-paper: #FAFBFC; --ln-white: #ffffff; --ln-radius: 8px; } /* --------------------------------------------------------- Grundfläche --------------------------------------------------------- */ html, body, #matrixchat { background: var(--ln-paper); } body { color: var(--ln-text); } /* --------------------------------------------------------- Linke Navigation Dunkler, klarer LARP-Netz-Rahmen --------------------------------------------------------- */ .mx_SpacePanel { background: #111d2b !important; border-right: 1px solid rgba(255,255,255,.07) !important; } .mx_LeftPanel { background: var(--ln-ink) !important; border-right: 0 !important; } .mx_LeftPanel .mx_RoomList, .mx_RoomList { background: var(--ln-ink) !important; } /* Raum-/Space-Texte links */ .mx_LeftPanel, .mx_LeftPanel span, .mx_LeftPanel div, .mx_LeftPanel a { --cpd-color-text-primary: #ffffff; } .mx_RoomSublist_label, .mx_RoomSublist_labelContainer, .mx_RoomSublist_header { color: rgba(255,255,255,.72) !important; } /* ausgewählter / aktiver Raum */ .mx_RoomTile_selected, .mx_RoomTile_selected:hover { background: rgba(255,255,255,.13) !important; border-radius: 6px; } /* Hover auf Räumen */ .mx_RoomTile:hover { background: rgba(255,255,255,.08) !important; border-radius: 6px; } /* --------------------------------------------------------- Hauptraum --------------------------------------------------------- */ .mx_RoomView, .mx_RoomView_body, .mx_RoomView_messagePanel { background: var(--ln-white) !important; } /* Raumkopf */ .mx_RoomHeader { background: var(--ln-paper) !important; border-bottom: 1px solid var(--ln-border) !important; } /* Überschriften mit dem Charakter der Webseite */ .mx_RoomHeader h1, .mx_RoomHeader_heading, .mx_RoomSublist_label, .mx_Dialog_title { font-family: Georgia, "Times New Roman", serif !important; } /* --------------------------------------------------------- Composer --------------------------------------------------------- */ .mx_MessageComposer_wrapper { background: var(--ln-paper) !important; border-top: 1px solid var(--ln-border) !important; } .mx_MessageComposer_input { background: var(--ln-white) !important; border: 1px solid var(--ln-border) !important; border-radius: var(--ln-radius) !important; } /* --------------------------------------------------------- Buttons / Aktionen --------------------------------------------------------- */ .mx_AccessibleButton_kind_primary, button.mx_AccessibleButton_kind_primary { background: var(--ln-blue) !important; border-radius: 5px !important; } .mx_AccessibleButton_kind_primary:hover, button.mx_AccessibleButton_kind_primary:hover { background: var(--ln-blue-hover) !important; } /* Links */ .mx_RoomView a, .mx_Dialog a { color: var(--ln-blue); } /* --------------------------------------------------------- Dialoge / Einstellungen --------------------------------------------------------- */ .mx_Dialog { border-radius: var(--ln-radius) !important; } .mx_TabbedView_tabLabel_active { color: var(--ln-blue) !important; } /* --------------------------------------------------------- Rechte Seitenleiste --------------------------------------------------------- */ .mx_RightPanel { background: var(--ln-paper) !important; border-left: 1px solid var(--ln-border) !important; } /* --------------------------------------------------------- Etwas weniger "Softwarekasten" --------------------------------------------------------- */ .mx_RoomView_messagePanel { scrollbar-color: #c8d1da transparent; } /* ========================================================= LARP-NETZ CHAT Navigation v2 ========================================================= */ /* --------------------------------------------------------- SPACES – schmale linke Hauptnavigation --------------------------------------------------------- */ .mx_SpacePanel { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding-top: 10px !important; box-sizing: border-box; background: linear-gradient( 180deg, #101c29 0%, #16283a 100% ) !important; } /* Space-Buttons klarer voneinander trennen */ .mx_SpacePanel .mx_AccessibleButton { margin: 5px auto !important; } /* Space-Avatare wirken mehr wie eigenständige Welten */ .mx_SpacePanel img, .mx_SpacePanel .mx_BaseAvatar { border-radius: 14px !important; transition: border-radius .18s ease, transform .18s ease; } .mx_SpacePanel .mx_AccessibleButton:hover img, .mx_SpacePanel .mx_AccessibleButton:hover .mx_BaseAvatar { border-radius: 9px !important; transform: translateY(-1px); } /* --------------------------------------------------------- RAUMLISTE – zweite Navigationsebene --------------------------------------------------------- */ .mx_LeftPanel { width: 286px !important; min-width: 250px !important; background: linear-gradient( 180deg, #192a3d 0%, #21384f 100% ) !important; box-shadow: 3px 0 18px rgba(17, 29, 43, .08); } /* Raumlistenbereiche */ .mx_RoomSublist { margin: 4px 8px 10px 8px !important; } /* Kategorieüberschriften */ .mx_RoomSublist_label, .mx_RoomSublist_header { padding-top: 10px !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .03em; color: rgba(255,255,255,.68) !important; } /* --------------------------------------------------------- RAUMZEILEN --------------------------------------------------------- */ .mx_RoomTile { min-height: 38px !important; margin: 2px 6px !important; padding-left: 5px !important; padding-right: 5px !important; border-radius: 7px !important; transition: background .15s ease, transform .15s ease; } .mx_RoomTile:hover { background: rgba(255,255,255,.075) !important; transform: translateX(1px); } .mx_RoomTile_selected, .mx_RoomTile_selected:hover { background: rgba(255,255,255,.15) !important; box-shadow: inset 3px 0 0 #2872fa; } /* Raumname */ .mx_RoomTile_name, .mx_RoomTile_nameContainer { color: rgba(255,255,255,.90) !important; } /* Ungelesene Räume */ .mx_RoomTile_unread .mx_RoomTile_name, .mx_RoomTile_highlight .mx_RoomTile_name { color: #ffffff !important; font-weight: 600 !important; } /* --------------------------------------------------------- RAUMKOPF --------------------------------------------------------- */ .mx_RoomHeader { min-height: 64px !important; padding-left: 22px !important; padding-right: 18px !important; background: rgba(250,251,252,.97) !important; box-shadow: 0 1px 7px rgba(25,42,61,.06); } .mx_RoomHeader_heading { color: #192a3d !important; } /* --------------------------------------------------------- CHAT – breiter, ruhiger, weniger Software-Kasten --------------------------------------------------------- */ .mx_RoomView_messagePanel { padding-left: 24px !important; padding-right: 24px !important; } /* Nachrichten reagieren subtil auf Hover statt Chatblasen */ .mx_EventTile { border-radius: 7px; } .mx_EventTile:hover { background: rgba(242,245,247,.72) !important; } /* --------------------------------------------------------- EINGABEFELD --------------------------------------------------------- */ .mx_MessageComposer { padding-left: 18px !important; padding-right: 18px !important; padding-bottom: 14px !important; } .mx_MessageComposer_wrapper { max-width: 1100px; margin-left: auto !important; margin-right: auto !important; border-top: 0 !important; } .mx_MessageComposer_input { min-height: 44px !important; box-shadow: 0 3px 14px rgba(25,42,61,.06); } /* --------------------------------------------------------- RECHTE SEITENLEISTE --------------------------------------------------------- */ .mx_RightPanel { background: #FAFBFC !important; box-shadow: -3px 0 14px rgba(25,42,61,.04); } /* ========================================================= LARP-NETZ CHAT Room List v3 – Element 1.12.27 ========================================================= */ /* * Neue Element-Raumliste. * Wir benutzen bewusst die offiziellen CPD-Designvariablen, * statt interne CSS-Module zu überschreiben. */ .mx_RoomListPanel { background: linear-gradient( 180deg, #192a3d 0%, #21384f 100% ) !important; --cpd-color-bg-canvas-default: #192a3d; --cpd-color-text-primary: #ffffff; --cpd-color-text-secondary: rgba(255,255,255,.74); --cpd-color-icon-primary: rgba(255,255,255,.78); --cpd-color-icon-secondary: rgba(255,255,255,.58); --cpd-color-bg-action-tertiary-hovered: rgba(255,255,255,.08); --cpd-color-bg-action-tertiary-selected: rgba(255,255,255,.15); --cpd-color-bg-accent-rest: #2872fa; --cpd-color-border-interactive-hovered: rgba(255,255,255,.22); color: rgba(255,255,255,.84) !important; } /* Raumzeilen der aktuellen Room List */ .mx_RoomListItemView { color: rgba(255,255,255,.78) !important; } .mx_RoomListItemView:hover { color: #ffffff !important; } .mx_RoomListItemView_selected { color: #ffffff !important; } /* Der aktive Raum bekommt zusätzlich etwas Tiefe */ .mx_RoomListItemView_selected { filter: drop-shadow(0 2px 5px rgba(5,15,25,.10)); } /* Trennung zwischen Space-Leiste und Raumliste */ .mx_RoomListPanel { border-right: 1px solid rgba(255,255,255,.06) !important; box-shadow: 3px 0 18px rgba(17,29,43,.10); } /* ========================================================= LARP-NETZ CHAT Navigation Finish ========================================================= */ .mx_RoomListPanel { --cpd-color-bg-action-tertiary-hovered: rgba(40,114,250,.09); --cpd-color-bg-action-tertiary-selected: rgba(40,114,250,.18); --cpd-color-bg-accent-rest: #2872fa; } /* Räume etwas kompakter */ .mx_RoomListItemView { min-height: 42px !important; } /* Aktiver Raum: kein grauer Standardblock mehr */ .mx_RoomListItemView_selected { color: #ffffff !important; } /* Raumliste optisch etwas luftiger unter dem Spieltitel */ .mx_RoomListPanel [role="list"], .mx_RoomListPanel [role="tree"] { padding-top: 4px; } /* Links insgesamt etwas ruhiger */ .mx_RoomListPanel { box-shadow: 4px 0 18px rgba(17,29,43,.08); } /* ========================================================= LARP-NETZ CHAT Global UI v7 Theme-ready Basis ========================================================= */ :root { --ln-space-accent: #2872fa; --ln-space-accent-strong: #1559ed; --ln-surface: #ffffff; --ln-surface-soft: #f7f9fb; --ln-surface-muted: #f2f5f7; --ln-line: #e1e8ed; --ln-text-main: #192a3d; --ln-text-soft: #60758a; --ln-shadow-soft: 0 8px 28px rgba(25,42,61,.07); --ln-shadow-small: 0 2px 10px rgba(25,42,61,.06); } /* --------------------------------------------------------- RAUMKOPF --------------------------------------------------------- */ .mx_RoomHeader { min-height: 62px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--ln-line) !important; box-shadow: 0 2px 12px rgba(25,42,61,.045) !important; } .mx_RoomHeader_heading { color: var(--ln-text-main) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 600 !important; } .mx_RoomHeader_info, .mx_RoomHeader_members, .mx_RoomHeader_userStatus { color: var(--ln-text-soft) !important; } .mx_RoomHeader_icon { opacity: .78; } .mx_RoomHeader .mx_AccessibleButton:hover { background: rgba(40,114,250,.07) !important; } /* --------------------------------------------------------- CHAT-GRUNDFLÄCHE --------------------------------------------------------- */ .mx_RoomView, .mx_RoomView_body, .mx_RoomView_timeline, .mx_RoomView_messageListWrapper, .mx_RoomView_messagePanel { background: var(--ln-surface) !important; } .mx_RoomView_messagePanel { padding-left: 30px !important; padding-right: 30px !important; } /* --------------------------------------------------------- NACHRICHTEN --------------------------------------------------------- */ .mx_EventTile { border-radius: 8px !important; transition: background .14s ease, box-shadow .14s ease; } .mx_EventTile:hover { background: rgba(242,245,247,.72) !important; } .mx_EventTile_senderDetails, .mx_EventTile_senderDetailsLink { color: var(--ln-text-main) !important; font-weight: 600 !important; } .mx_EventTile_body, .mx_EventTile_content { color: #2d4155 !important; } .mx_EventTile_selected { background: rgba(40,114,250,.075) !important; } /* --------------------------------------------------------- EINGABEBEREICH --------------------------------------------------------- */ .mx_MessageComposer { padding: 10px 22px 18px 22px !important; background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(247,249,251,.92) 30%, #f7f9fb 100% ) !important; } .mx_MessageComposer_wrapper { max-width: 1120px !important; margin: 0 auto !important; background: #ffffff !important; border: 1px solid var(--ln-line) !important; border-radius: 12px !important; box-shadow: var(--ln-shadow-small) !important; } .mx_MessageComposer_row { min-height: 46px !important; } .mx_MessageComposer_input, .mx_MessageComposer_wysiwyg { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ln-text-main) !important; } .mx_MessageComposer_button, .mx_MessageComposer_sendMessage { border-radius: 8px !important; } .mx_MessageComposer_button:hover, .mx_MessageComposer_sendMessage:hover { background: rgba(40,114,250,.08) !important; } /* --------------------------------------------------------- RECHTE SEITENLEISTE --------------------------------------------------------- */ .mx_RightPanel, .mx_RightPanel_ResizeWrapper { background: var(--ln-surface-soft) !important; } .mx_RightPanel { border-left: 1px solid var(--ln-line) !important; box-shadow: -4px 0 18px rgba(25,42,61,.035) !important; --cpd-color-bg-canvas-default: #f7f9fb; --cpd-color-bg-subtle-secondary: #f2f5f7; --cpd-color-text-primary: #192a3d; --cpd-color-text-secondary: #60758a; --cpd-color-bg-accent-rest: var(--ln-space-accent); } /* --------------------------------------------------------- SCROLLBARS --------------------------------------------------------- */ .mx_RoomView_messagePanel, .mx_RightPanel, .mx_RoomListPanel { scrollbar-color: #bdc8d3 transparent; } /* --------------------------------------------------------- THEME-HOOKS Diese Variablen überschreiben wir später je Space. --------------------------------------------------------- */ .mx_RoomHeader, .mx_MessageComposer_wrapper, .mx_RoomListPanel, .mx_RightPanel { --ln-current-accent: var(--ln-space-accent); } /* ========================================================= LARP-NETZ CHAT Space Panel v8 Korrektes Auf-/Zuklappen der Hauptnavigation ========================================================= */ .mx_SpacePanel { box-sizing: border-box !important; transition: width .18s ease, min-width .18s ease, max-width .18s ease; --activeBackground-color: rgba(40,114,250,.18); --activeBorder-color: #2872fa; --cpd-color-text-primary: #ffffff; --cpd-color-text-secondary: rgba(255,255,255,.72); --cpd-color-icon-primary: rgba(255,255,255,.82); --cpd-color-icon-secondary: rgba(255,255,255,.62); } /* Eingeklappt: nur Icons */ .mx_SpacePanel.collapsed { width: 72px !important; min-width: 72px !important; max-width: 72px !important; } /* Aufgeklappt: echte Hauptnavigation */ .mx_SpacePanel:not(.collapsed) { width: 224px !important; min-width: 224px !important; max-width: 224px !important; } /* Namen der Spaces gut lesbar */ .mx_SpacePanel .mx_SpaceButton_name { color: rgba(255,255,255,.84) !important; } /* aktiver Space */ .mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_name { color: #ffffff !important; font-weight: 600 !important; } /* Hover */ .mx_SpacePanel .mx_SpaceButton:hover .mx_SpaceButton_selectionWrapper { background: rgba(255,255,255,.07) !important; } /* Aufgeklappt etwas mehr Luft */ .mx_SpacePanel:not(.collapsed) .mx_SpaceButton { padding-right: 8px !important; } /* ========================================================= LARP-NETZ CHAT Space Themes v9 Automatischer Wechsel über data-larp-space ========================================================= */ /* --------------------------------------------------------- FALLBACK / LARP-NETZ --------------------------------------------------------- */ :root { --ln-space-accent: #2872fa; --ln-space-accent-strong: #1559ed; --ln-theme-nav-top: #192a3d; --ln-theme-nav-bottom: #21384f; --ln-theme-soft: rgba(40,114,250,.08); --ln-theme-selected: rgba(40,114,250,.18); } /* --------------------------------------------------------- DER FUNKE !CWXeOCQmlPhtKPosjk:larp-netz.ch --------------------------------------------------------- */ html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] { --ln-space-accent: #b96732; --ln-space-accent-strong: #8f4725; --ln-theme-nav-top: #2a2423; --ln-theme-nav-bottom: #3b2d28; --ln-theme-soft: rgba(185,103,50,.09); --ln-theme-selected: rgba(185,103,50,.20); } /* --------------------------------------------------------- CCCV beide derzeit vorhandenen Space-IDs --------------------------------------------------------- */ html[data-larp-space="!eDefvOEZWORCSkWWNE:larp-netz.ch"], html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] { --ln-space-accent: #2b8c8c; --ln-space-accent-strong: #226d70; --ln-theme-nav-top: #173238; --ln-theme-nav-bottom: #21474d; --ln-theme-soft: rgba(43,140,140,.09); --ln-theme-selected: rgba(43,140,140,.20); } /* --------------------------------------------------------- FEUERRABEN ORGA !EFJYMgWmWTKMCjlPFH:larp-netz.ch --------------------------------------------------------- */ html[data-larp-space="!EFJYMgWmWTKMCjlPFH:larp-netz.ch"] { --ln-space-accent: #a93d42; --ln-space-accent-strong: #7f292e; --ln-theme-nav-top: #2b2025; --ln-theme-nav-bottom: #44272d; --ln-theme-soft: rgba(169,61,66,.09); --ln-theme-selected: rgba(169,61,66,.20); } /* ========================================================= THEME AUF DIE PLATTFORM ANWENDEN ========================================================= */ /* Space-/Raumnavigation */ .mx_RoomListPanel { background: linear-gradient( 180deg, var(--ln-theme-nav-top) 0%, var(--ln-theme-nav-bottom) 100% ) !important; --cpd-color-bg-canvas-default: var(--ln-theme-nav-top); --cpd-color-bg-action-tertiary-hovered: var(--ln-theme-soft); --cpd-color-bg-action-tertiary-selected: var(--ln-theme-selected); --cpd-color-bg-accent-rest: var(--ln-space-accent); } /* aktiver Raum */ .mx_RoomListItemView_selected { filter: drop-shadow( 0 2px 5px rgba(10,20,30,.12) ); } /* Header-Akzent */ .mx_RoomHeader { box-shadow: inset 0 -2px 0 color-mix( in srgb, var(--ln-space-accent) 28%, transparent ), 0 2px 12px rgba(25,42,61,.045) !important; } /* Header-Buttons */ .mx_RoomHeader .mx_AccessibleButton:hover { background: var(--ln-theme-soft) !important; } /* ausgewählte Nachrichten */ .mx_EventTile_selected { background: var(--ln-theme-soft) !important; } /* Composer-Akzent */ .mx_MessageComposer_wrapper:focus-within { border-color: color-mix( in srgb, var(--ln-space-accent) 48%, var(--ln-line) ) !important; box-shadow: 0 0 0 2px color-mix( in srgb, var(--ln-space-accent) 10%, transparent ), var(--ln-shadow-small) !important; } /* Buttons im Composer */ .mx_MessageComposer_button:hover, .mx_MessageComposer_sendMessage:hover { background: var(--ln-theme-soft) !important; } /* rechte Seitenleiste übernimmt Accent */ .mx_RightPanel { --cpd-color-bg-accent-rest: var(--ln-space-accent); } /* ========================================================= LARP-NETZ v10 Dezenter Profilring ========================================================= */ .mx_HomePage_profile .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(199,163,91,.76), 0 4px 14px rgba(0,0,0,.20) !important; } /* ========================================================= LARP-NETZ v11 HOME Portal-Willkommensseite ========================================================= */ .mx_HomePage_default::before { background-image: url("/larp-netz-home.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Dezenter matter Antikgold-Rand nur am eigenen Profil */ .mx_HomePage_profile .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(181,154,99,.76), 0 4px 14px rgba(0,0,0,.20) !important; } /* ========================================================= LARP-NETZ v12 HOME POLISH ========================================================= */ /* Hero ruhiger und hochwertiger */ .mx_HomePage_hero { width: min(100%, 820px) !important; max-width: 820px !important; margin: 0 auto 28px !important; text-align: center !important; } /* Elegantere LARP-Netz-Typografie */ .mx_HomePage_hero h1 { margin: 0 !important; color: #ffffff !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif !important; font-size: clamp(40px, 4.2vw, 56px) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: -.018em !important; text-shadow: 0 2px 18px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.55) !important; } /* Goldene Trennlinie mit kleinem Diamanten */ .mx_HomePage_hero::after { content: "◆"; display: flex; align-items: center; justify-content: center; width: min(460px, 72vw); height: 18px; margin: 18px auto 0; color: #b59a63; font-size: 11px; line-height: 18px; background: linear-gradient( to right, rgba(181,154,99,.00) 0%, rgba(181,154,99,.72) 8%, rgba(181,154,99,.72) 45%, rgba(181,154,99,.00) 45%, rgba(181,154,99,.00) 55%, rgba(181,154,99,.72) 55%, rgba(181,154,99,.72) 92%, rgba(181,154,99,.00) 100% ) center / 100% 1px no-repeat; text-shadow: 0 1px 3px rgba(0,0,0,.65); } /* Profilkarte etwas feiner */ .mx_HomePage_profile { border: 1px solid rgba(181,154,99,.43) !important; background: linear-gradient( 135deg, rgba(27,34,41,.80), rgba(22,29,36,.74) ) !important; box-shadow: 0 18px 46px rgba(0,0,0,.25) !important; } /* Goldring wirklich sichtbar direkt um das Profilbild */ .mx_HomePage_profile .mx_BaseAvatar { box-sizing: border-box !important; border: 2px solid rgba(181,154,99,.88) !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(20,24,29,.55), 0 5px 16px rgba(0,0,0,.28) !important; } .mx_HomePage_profile .mx_BaseAvatar_image, .mx_HomePage_profile .mx_BaseAvatar img { border-radius: 50% !important; } /* Name etwas weniger Element, etwas mehr LARP-Netz */ .mx_HomePage_profileText strong { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: 23px !important; font-weight: 600 !important; letter-spacing: -.01em !important; } /* Begrüssung weich statt UI-Label */ .mx_HomePage_profileHint { margin-top: 5px !important; color: rgba(255,255,255,.78) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-style: italic; line-height: 1.4 !important; } /* Kleinere Displays */ @media (max-width: 850px) { .mx_HomePage_hero h1 { font-size: 40px !important; } .mx_HomePage_hero::after { width: min(380px, 70vw); } } /* ========================================================= LARP-NETZ v14 ROOM THEME NUR bei geöffnetem Matrix-Raum Die HomePage bleibt vollständig unangetastet. ========================================================= */ html[data-larp-view="room"] { --larp-room-gold: #b59a63; --larp-room-gold-soft: rgba(181,154,99,.32); --larp-room-gold-faint: rgba(181,154,99,.10); --larp-room-ink: #263746; --larp-room-muted: #687581; --larp-room-paper: #fbfaf7; --larp-room-paper-soft: #f5f3ee; --larp-room-panel: #f3f5f5; } /* ========================================================= LINKER RAUMBEREICH ========================================================= */ html[data-larp-view="room"] .mx_RoomListPanel { background: linear-gradient( 180deg, #223348 0%, #1c2d3f 100% ) !important; border-right: 1px solid rgba(181,154,99,.20) !important; } /* Raumzeilen */ html[data-larp-view="room"] .mx_RoomListItem { border-radius: 8px !important; } html[data-larp-view="room"] .mx_RoomListItem:hover { background: rgba(255,255,255,.055) !important; } /* ausgewählter Raum */ html[data-larp-view="room"] .mx_RoomListItem_selected { background: linear-gradient( 90deg, rgba(181,154,99,.13), rgba(53,82,116,.34) ) !important; box-shadow: inset 3px 0 0 var(--larp-room-gold) !important; } /* Room-Avatar bereits auf zukünftige Icons vorbereiten */ html[data-larp-view="room"] .mx_RoomListItem .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(181,154,99,.42), 0 2px 6px rgba(0,0,0,.16) !important; } /* ========================================================= RAUMKOPF ========================================================= */ html[data-larp-view="room"] .mx_RoomHeader { min-height: 62px !important; background: linear-gradient( 180deg, #fdfcf9 0%, #f8f6f1 100% ) !important; border-bottom: 1px solid rgba(181,154,99,.48) !important; box-shadow: 0 3px 14px rgba(34,49,63,.055) !important; } /* Raumname */ html[data-larp-view="room"] .mx_RoomHeader_name, html[data-larp-view="room"] .mx_RoomHeader_heading, html[data-larp-view="room"] .mx_RoomHeader_headingWrapper { color: var(--larp-room-ink) !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.012em !important; } /* Avatar im Header */ html[data-larp-view="room"] .mx_RoomHeader .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(181,154,99,.62), 0 3px 8px rgba(31,43,54,.12) !important; } /* Header-Aktionen neutral statt knallblau */ html[data-larp-view="room"] .mx_RoomHeader button, html[data-larp-view="room"] .mx_RoomHeader .mx_AccessibleButton { color: #536271 !important; } /* ========================================================= NACHRICHTENFLÄCHE ========================================================= */ html[data-larp-view="room"] .mx_RoomView_body, html[data-larp-view="room"] .mx_RoomView_timeline, html[data-larp-view="room"] .mx_RoomView_MessageList { background: linear-gradient( 180deg, #fcfbf8 0%, #faf9f6 100% ) !important; } /* Event-Tiles */ html[data-larp-view="room"] .mx_EventTile { border-radius: 9px !important; transition: background .14s ease !important; } html[data-larp-view="room"] .mx_EventTile:hover { background: rgba(181,154,99,.045) !important; } /* Nachrichtenavatar */ html[data-larp-view="room"] .mx_EventTile .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(181,154,99,.30) !important; } /* Absender */ html[data-larp-view="room"] .mx_EventTile_sender, html[data-larp-view="room"] .mx_EventTile_senderDetails { font-weight: 650 !important; } /* Datumsseparator */ html[data-larp-view="room"] .mx_DateSeparator { color: #636f79 !important; } html[data-larp-view="room"] .mx_DateSeparator > hr, html[data-larp-view="room"] .mx_DateSeparator_line { border-color: rgba(181,154,99,.28) !important; } /* ========================================================= COMPOSER ========================================================= */ html[data-larp-view="room"] .mx_MessageComposer { background: #faf9f6 !important; border-top: 1px solid rgba(181,154,99,.20) !important; } html[data-larp-view="room"] .mx_MessageComposer_wrapper { background: #ffffff !important; border: 1px solid rgba(71,88,104,.24) !important; border-radius: 12px !important; box-shadow: 0 3px 12px rgba(27,39,50,.055) !important; } html[data-larp-view="room"] .mx_MessageComposer_wrapper:focus-within { border-color: rgba(181,154,99,.78) !important; box-shadow: 0 0 0 2px rgba(181,154,99,.10), 0 4px 14px rgba(27,39,50,.07) !important; } html[data-larp-view="room"] .mx_BasicMessageComposer, html[data-larp-view="room"] .mx_MessageComposer_input { background: transparent !important; } /* ========================================================= RECHTES PERSONEN-/INFO-PANEL ========================================================= */ html[data-larp-view="room"] .mx_RightPanel, html[data-larp-view="room"] .mx_RightPanel_container { background: #f3f5f5 !important; border-left: 1px solid rgba(181,154,99,.24) !important; } html[data-larp-view="room"] .mx_RightPanel_header { background: #faf9f5 !important; border-bottom: 1px solid rgba(181,154,99,.30) !important; } html[data-larp-view="room"] .mx_RightPanel .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(181,154,99,.30) !important; } /* Einladen-Button */ html[data-larp-view="room"] .mx_RightPanel button, html[data-larp-view="room"] .mx_RightPanel .mx_AccessibleButton { border-color: rgba(181,154,99,.36) !important; } /* ========================================================= TEXTAUSWAHL & LINKS ========================================================= */ html[data-larp-view="room"] .mx_RoomView a { text-decoration-color: rgba(181,154,99,.55); } /* ========================================================= STARTSEITE EXPLIZIT SCHÜTZEN ========================================================= */ html[data-larp-view="home"] .mx_HomePage { isolation: isolate; } /* ========================================================= LARP-NETZ v15 HOME RESTORE NUR STARTSEITE ========================================================= */ /* --------------------------------------------------------- HINTERGRUND --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_default { position: relative !important; overflow: hidden !important; background-color: #17232f !important; } html[data-larp-view="home"] .mx_HomePage_default::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-image: url("/larp-netz-home.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; pointer-events: none !important; } /* sehr dezente Lesbarkeitsschicht */ html[data-larp-view="home"] .mx_HomePage_default::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 90deg, rgba(7,14,22,.22) 0%, rgba(7,14,22,.12) 42%, rgba(7,14,22,.08) 100% ), linear-gradient( 180deg, rgba(5,11,18,.03) 0%, rgba(5,11,18,.17) 100% ) !important; pointer-events: none !important; } /* --------------------------------------------------------- ZENTRIERUNG --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_default_wrapper { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: min(100%, 1100px) !important; min-height: 100% !important; margin: 0 auto !important; padding: 58px 48px 72px !important; } /* --------------------------------------------------------- TITEL --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_hero { width: min(100%, 900px) !important; max-width: 900px !important; margin: 0 auto 25px !important; text-align: center !important; } html[data-larp-view="home"] .mx_HomePage_hero h1 { margin: 0 !important; color: #f8f5ee !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif !important; font-size: clamp(42px, 4.4vw, 58px) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -.018em !important; text-align: center !important; text-shadow: 0 2px 18px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.70) !important; } /* --------------------------------------------------------- GOLDENE TRENNLINIE --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_hero::after { content: "◆" !important; display: flex !important; align-items: center !important; justify-content: center !important; width: min(470px, 72vw) !important; height: 20px !important; margin: 17px auto 0 !important; color: #b59a63 !important; font-size: 10px !important; line-height: 20px !important; background: linear-gradient( #b59a63, #b59a63 ) left center / 44% 1px no-repeat, linear-gradient( #b59a63, #b59a63 ) right center / 44% 1px no-repeat !important; text-shadow: 0 1px 3px rgba(0,0,0,.65) !important; } /* --------------------------------------------------------- PROFILKARTE --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_profile { display: flex !important; align-items: center !important; gap: 20px !important; box-sizing: border-box !important; width: min(100%, 660px) !important; margin: 0 auto !important; padding: 20px 25px !important; color: #ffffff !important; background: linear-gradient( 135deg, rgba(29,36,43,.82), rgba(22,29,36,.76) ) !important; border: 1px solid rgba(181,154,99,.55) !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* --------------------------------------------------------- PROFILBILD + MATTER GOLD-RING --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar { box-sizing: border-box !important; border: 2px solid #b59a63 !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(14,20,26,.72), 0 5px 16px rgba(0,0,0,.30) !important; } html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar_image, html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar img { border-radius: 50% !important; } /* --------------------------------------------------------- PROFILTEXT --------------------------------------------------------- */ html[data-larp-view="home"] .mx_HomePage_profileText { display: flex !important; flex-direction: column !important; min-width: 0 !important; text-align: left !important; } html[data-larp-view="home"] .mx_HomePage_profileLabel { margin-bottom: 3px !important; color: rgba(255,255,255,.62) !important; font-family: system-ui, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .085em !important; text-transform: uppercase !important; } html[data-larp-view="home"] .mx_HomePage_profileText strong { color: #ffffff !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: 23px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; } html[data-larp-view="home"] .mx_HomePage_profileHint { margin-top: 6px !important; color: rgba(255,255,255,.79) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-style: italic !important; line-height: 1.4 !important; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 800px) { html[data-larp-view="home"] .mx_HomePage_default_wrapper { padding: 42px 24px !important; } html[data-larp-view="home"] .mx_HomePage_hero h1 { font-size: 38px !important; } html[data-larp-view="home"] .mx_HomePage_hero::after { width: min(390px, 72vw) !important; } } @media (max-width: 520px) { html[data-larp-view="home"] .mx_HomePage_hero h1 { font-size: 31px !important; } html[data-larp-view="home"] .mx_HomePage_profile { padding: 17px 18px !important; gap: 15px !important; } } /* ========================================================= LARP-NETZ v16 HOME FINAL Ausschliesslich /#/home ========================================================= */ /* Hintergrund bleibt unser festgelegtes Portalbild */ html[data-larp-view="home"] .mx_HomePage_default::before { background-image: url("/larp-netz-home.png") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } /* Bild nicht tot abdunkeln */ html[data-larp-view="home"] .mx_HomePage_default::after { background: linear-gradient( 90deg, rgba(8,14,21,.17) 0%, rgba(8,14,21,.08) 46%, rgba(8,14,21,.06) 100% ), linear-gradient( 180deg, rgba(8,14,21,.02) 0%, rgba(8,14,21,.14) 100% ) !important; } /* Hauptinhalt */ html[data-larp-view="home"] .mx_HomePage_default_wrapper { width: min(100%, 1080px) !important; padding: 48px 42px 64px !important; } /* ========================================================= TITEL ========================================================= */ html[data-larp-view="home"] .mx_HomePage_hero { width: min(100%, 760px) !important; max-width: 760px !important; margin: 0 auto 28px !important; text-align: center !important; } html[data-larp-view="home"] .mx_HomePage_hero h1 { max-width: 760px !important; margin: 0 auto !important; color: #e7c889 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif !important; font-size: clamp(48px, 4.8vw, 63px) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -.025em !important; text-shadow: 0 2px 2px rgba(15,12,8,.72), 0 5px 18px rgba(0,0,0,.30) !important; } /* Goldlinie wie in unserer Zielansicht */ html[data-larp-view="home"] .mx_HomePage_hero::after { content: "◆" !important; display: flex !important; align-items: center !important; justify-content: center !important; width: min(470px, 70vw) !important; height: 22px !important; margin: 17px auto 0 !important; color: #c3a463 !important; font-size: 10px !important; background: linear-gradient( #b99c60, #b99c60 ) left center / 44% 1px no-repeat, linear-gradient( #b99c60, #b99c60 ) right center / 44% 1px no-repeat !important; text-shadow: 0 1px 4px rgba(0,0,0,.65) !important; } /* ========================================================= PROFILKARTE ========================================================= */ html[data-larp-view="home"] .mx_HomePage_profile { width: min(100%, 650px) !important; min-height: 116px !important; gap: 22px !important; margin: 0 auto !important; padding: 21px 26px !important; background: linear-gradient( 135deg, rgba(25,32,39,.87), rgba(21,27,34,.79) ) !important; border: 1px solid rgba(195,164,99,.78) !important; border-radius: 15px !important; box-shadow: 0 19px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } /* ========================================================= PROFILBILD Goldring sitzt jetzt um den kompletten Avatar-Uploader ========================================================= */ html[data-larp-view="home"] .mx_HomePage_profile .mx_MiniAvatarUploader { flex: 0 0 auto !important; padding: 2px !important; border: 2px solid rgba(195,164,99,.94) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(10,16,22,.72), 0 5px 16px rgba(0,0,0,.29) !important; } html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar { border: 0 !important; border-radius: 50% !important; box-shadow: none !important; } html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar_image, html[data-larp-view="home"] .mx_HomePage_profile .mx_BaseAvatar img { border-radius: 50% !important; } /* ========================================================= PROFILTEXT ========================================================= */ html[data-larp-view="home"] .mx_HomePage_profileLabel { color: rgba(255,255,255,.63) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .085em !important; } html[data-larp-view="home"] .mx_HomePage_profileText strong { color: #f7f5ef !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: 24px !important; font-weight: 600 !important; } html[data-larp-view="home"] .mx_HomePage_profileHint { margin-top: 7px !important; color: rgba(255,255,255,.82) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-style: italic !important; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 820px) { html[data-larp-view="home"] .mx_HomePage_hero { max-width: 620px !important; } html[data-larp-view="home"] .mx_HomePage_hero h1 { font-size: 43px !important; } } @media (max-width: 540px) { html[data-larp-view="home"] .mx_HomePage_default_wrapper { padding: 34px 20px !important; } html[data-larp-view="home"] .mx_HomePage_hero h1 { font-size: 31px !important; } html[data-larp-view="home"] .mx_HomePage_profile { min-height: auto !important; padding: 17px !important; } } /* ========================================================= LARP-NETZ v18 HOME CLEAN Auf der echten LARP-Netz-Startseite gibt es keine Element-Sammelliste für Räume und Direktnachrichten. ========================================================= */ html[data-larp-view="home"] .mx_LeftPanel { display: none !important; } html[data-larp-view="home"] .mx_LeftPanel_wrapper { display: none !important; } html[data-larp-view="home"] .mx_RoomListPanel { display: none !important; } /* * Trenn-/Resize-Element zwischen Raumliste und Hauptbereich * auf Home ebenfalls entfernen. */ html[data-larp-view="home"] .mx_ResizeHandle { display: none !important; } /* * Hauptbereich darf nach Wegfall der Raumliste den * vollständigen verbleibenden Platz benutzen. */ html[data-larp-view="home"] .mx_HomePage { min-width: 0 !important; width: 100% !important; flex: 1 1 auto !important; } /* ========================================================= LARP-NETZ v21 ACTIVE SPACE RING Nur der tatsächlich aktive SpaceButton. Keine Größen-, Margin- oder Layoutänderungen. ========================================================= */ .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active { background: transparent !important; outline: none !important; box-shadow: none !important; } /* Startseite + Nachrichten */ .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_SpaceButton_avatarPlaceholder { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(190, 160, 98, .94), 0 0 0 4px rgba(12, 20, 29, .72), 0 0 13px rgba(190, 160, 98, .28) !important; } /* Normale Matrix-Spaces */ .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(190, 160, 98, .94), 0 0 0 4px rgba(12, 20, 29, .72), 0 0 13px rgba(190, 160, 98, .28) !important; } /* Tastaturfokus bleibt sichtbar, aber ebenfalls rund */ .mx_SpacePanel .mx_SpaceButton:focus-visible { outline: none !important; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(94, 146, 221, .55) !important; } /* ========================================================= LARP-NETZ v22 META ICON ALIGNMENT Startseite + Nachrichten benutzen in Element einen avatarPlaceholder statt eines normalen RoomAvatar. Wir gleichen nur diese beiden Sonderbuttons geometrisch an. ========================================================= */ /* Äusserer Element-Placeholder exakt auf Avatargrösse bringen */ .mx_SpaceButton[aria-label="Startseite"] .mx_SpaceButton_avatarPlaceholder, .mx_SpaceButton[aria-label="Nachrichten"] .mx_SpaceButton_avatarPlaceholder { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; /* v21-Ring vom falschen Container entfernen */ box-shadow: none !important; background: transparent !important; } /* innerer Icon-Wrapper ebenfalls exakt */ .mx_SpaceButton[aria-label="Startseite"] .mx_SpaceButton_icon, .mx_SpaceButton[aria-label="Nachrichten"] .mx_SpaceButton_icon { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* PNG selbst exakt wie ein normaler Space-Avatar */ .mx_SpaceButton[aria-label="Startseite"] .mx_SpaceButton_icon img, .mx_SpaceButton[aria-label="Nachrichten"] .mx_SpaceButton_icon img { display: block !important; width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; object-fit: cover !important; box-sizing: border-box !important; } /* Aktiver Ring direkt um das sichtbare Bild */ .mx_SpaceButton.mx_SpaceButton_active[aria-label="Startseite"] .mx_SpaceButton_icon img, .mx_SpaceButton.mx_SpaceButton_active[aria-label="Nachrichten"] .mx_SpaceButton_icon img { box-shadow: 0 0 0 2px rgba(190, 160, 98, .94), 0 0 0 4px rgba(12, 20, 29, .72), 0 0 13px rgba(190, 160, 98, .28) !important; } /* Der Button selbst bekommt bei diesen beiden keinen Extra-Ring */ .mx_SpaceButton.mx_SpaceButton_active[aria-label="Startseite"], .mx_SpaceButton.mx_SpaceButton_active[aria-label="Nachrichten"] { outline: none !important; box-shadow: none !important; } /* Im schmalen Zustand Sondericons exakt mittig */ .mx_SpaceButton_narrow[aria-label="Startseite"], .mx_SpaceButton_narrow[aria-label="Nachrichten"] { justify-content: center !important; } /* Tastaturfokus ebenfalls direkt am sichtbaren Icon */ .mx_SpaceButton[aria-label="Startseite"]:focus-visible .mx_SpaceButton_icon img, .mx_SpaceButton[aria-label="Nachrichten"]:focus-visible .mx_SpaceButton_icon img { box-shadow: 0 0 0 2px rgba(94, 146, 221, .62), 0 0 0 4px rgba(12, 20, 29, .72) !important; } /* ========================================================= LARP-NETZ v23 COLLAPSED CENTERING Nur eingeklappter Space-Balken. Aufgeklappte Navigation bleibt unverändert. ========================================================= */ /* Jeder eingeklappte Space-Eintrag nutzt die volle Breite und zentriert seinen Button darin. */ .mx_SpacePanel .mx_SpaceItem.collapsed { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Der eigentliche Button wird exakt mittig gesetzt. Keine Änderung an Icon-Grösse oder Ring. */ .mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceButton { margin-left: auto !important; margin-right: auto !important; flex: 0 0 auto !important; } /* Element-Narrow-State ebenfalls sauber mittig */ .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_narrow { margin-left: auto !important; margin-right: auto !important; justify-content: center !important; } /* Sicherstellen, dass der Avatar selbst keinen alten seitlichen Versatz mitbringt. */ .mx_SpacePanel .mx_SpaceItem.collapsed .mx_SpaceButton_avatarPlaceholder, .mx_SpacePanel .mx_SpaceItem.collapsed .mx_BaseAvatar { margin-left: auto !important; margin-right: auto !important; } /* ========================================================= LARP-NETZ v24 NACHRICHTEN SIDEBAR Nur MetaSpace.Home = Nachrichten ========================================================= */ html[data-larp-space="home-space"] .mx_LeftPanel_panel:first-of-type, html[data-larp-space="home-space"] .mx_LeftPanel_outerWrapper, html[data-larp-space="home-space"] .mx_LeftPanel_wrapper { background: linear-gradient( 180deg, #182a3b 0%, #1c3043 100% ) !important; } /* Nachrichten-Panel */ html[data-larp-space="home-space"] .mx_RoomListPanel { background: transparent !important; } /* Überschrift Nachrichten */ html[data-larp-space="home-space"] .mx_RoomListPanel h1, html[data-larp-space="home-space"] .mx_RoomListPanel h2, html[data-larp-space="home-space"] .mx_RoomListPanel [role="heading"] { color: #f0ece2 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-weight: 600 !important; letter-spacing: .01em !important; } /* Suchfeld zurückhaltender */ html[data-larp-space="home-space"] .mx_RoomListSearch input, html[data-larp-space="home-space"] .mx_RoomListSearch { border-color: rgba(195, 164, 99, .28) !important; } /* Einzelne DM-Einträge */ html[data-larp-space="home-space"] .mx_RoomListItem { margin: 3px 8px !important; border-radius: 9px !important; transition: background .15s ease, box-shadow .15s ease !important; } /* Hover */ html[data-larp-space="home-space"] .mx_RoomListItem:hover { background: rgba(255, 255, 255, .055) !important; } /* Aktiver Privat-Chat */ html[data-larp-space="home-space"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="home-space"] .mx_RoomListItem[aria-selected="true"] { background: linear-gradient( 90deg, rgba(181, 154, 99, .17), rgba(64, 103, 145, .20) ) !important; box-shadow: inset 3px 0 0 #b59a63 !important; } /* Namen */ html[data-larp-space="home-space"] .mx_RoomListItem .mx_RoomListItem_name, html[data-larp-space="home-space"] .mx_RoomListItem .mx_RoomListItem_title { color: #e9edf1 !important; font-weight: 500 !important; } /* Avatar-Ring der privaten Chats */ html[data-larp-space="home-space"] .mx_RoomListItem .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(181, 154, 99, .48) !important; } /* Header-Trennung */ html[data-larp-space="home-space"] .mx_RoomListPanel { border-right: 1px solid rgba(181, 154, 99, .16) !important; } /* ========================================================= LARP-NETZ v25 NACHRICHTEN WORKSPACE Nur geöffnete private Chats. Navigation bleibt unangetastet. ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] { --larp-chat-bg: #111922; --larp-chat-bg-soft: #15212d; --larp-chat-bg-raised: #1a2734; --larp-chat-border: rgba(181, 154, 99, .22); --larp-chat-gold: #b59a63; --larp-chat-gold-light: #d0b578; --larp-chat-text: #eeeae2; --larp-chat-muted: #99a6b2; } /* ========================================================= GESAMTE CHATFLÄCHE ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomView_wrapper, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomView, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomView_body, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomView_messagePanel, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomView_timeline, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessagePanel { background: var(--larp-chat-bg) !important; color: var(--larp-chat-text) !important; } /* ========================================================= CHAT-HEADER ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomHeader { background: linear-gradient( 180deg, #182430 0%, #141f2a 100% ) !important; border-bottom: 1px solid var(--larp-chat-border) !important; box-shadow: 0 1px 0 rgba(0,0,0,.28) !important; } html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomHeader h1, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomHeader .mx_RoomHeader_name, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomHeader .mx_RoomHeader_heading { color: #f3efe7 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-weight: 600 !important; } /* Kopf-Avatar dezent einfassen */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RoomHeader .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(181,154,99,.62) !important; } /* ========================================================= NACHRICHTEN / EVENTS ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile, html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile_line, html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile_content, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MTextBody { color: var(--larp-chat-text) !important; } /* Nachricht-Hover nur ganz leicht sichtbar */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile:hover { background: rgba(255,255,255,.028) !important; } /* Uhrzeit / Metadaten */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile_timestamp, html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile_editButton, html[data-larp-space="home-space"][data-larp-view="room"] .mx_EventTile_unsigned { color: var(--larp-chat-muted) !important; } /* Datums-Trenner */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_DateSeparator { color: #c9b88e !important; } html[data-larp-space="home-space"][data-larp-view="room"] .mx_DateSeparator::before, html[data-larp-space="home-space"][data-larp-view="room"] .mx_DateSeparator::after { border-color: rgba(181,154,99,.18) !important; } /* Bilder / Anhänge nicht zusätzlich in Karten pressen */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_MImageBody img { border-radius: 8px !important; box-shadow: 0 5px 20px rgba(0,0,0,.22) !important; } /* ========================================================= MESSAGE COMPOSER ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessageComposer, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessageComposer_wrapper { background: var(--larp-chat-bg) !important; } html[data-larp-space="home-space"][data-larp-view="room"] .mx_BasicMessageComposer, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessageComposer_input { background: var(--larp-chat-bg-raised) !important; color: var(--larp-chat-text) !important; border: 1px solid rgba(181,154,99,.26) !important; border-radius: 10px !important; box-shadow: 0 6px 20px rgba(0,0,0,.15) !important; } html[data-larp-space="home-space"][data-larp-view="room"] .mx_BasicMessageComposer:focus-within, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessageComposer_input:focus-within { border-color: rgba(208,181,120,.58) !important; box-shadow: 0 0 0 1px rgba(208,181,120,.12), 0 6px 20px rgba(0,0,0,.18) !important; } /* Placeholder */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_BasicMessageComposer .public-DraftEditorPlaceholder-root, html[data-larp-space="home-space"][data-larp-view="room"] .mx_MessageComposer_input::placeholder { color: #8694a0 !important; } /* ========================================================= RECHTE INFOSEITE ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel_wrapper, html[data-larp-space="home-space"][data-larp-view="room"] .mx_BaseCard { background: #15212d !important; color: var(--larp-chat-text) !important; } html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel { border-left: 1px solid var(--larp-chat-border) !important; } /* rechte Panel-Titel */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel h1, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel h2, html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel h3 { color: #eeeae2 !important; } /* Unterteilungen rechts */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel hr, html[data-larp-space="home-space"][data-larp-view="room"] .mx_BaseCard hr { border-color: rgba(181,154,99,.17) !important; } /* Links nicht grell-blau */ html[data-larp-space="home-space"][data-larp-view="room"] .mx_RightPanel a { color: #d0b578 !important; } /* ========================================================= SCROLLBAR DEZENT ========================================================= */ html[data-larp-space="home-space"][data-larp-view="room"] ::-webkit-scrollbar-thumb { background: rgba(181,154,99,.28) !important; border-radius: 20px !important; } /* ========================================================= LARP-NETZ v26 MESSAGES LANDING Nachrichten-Einstiegsseite. Portal-Startseite bleibt unverändert. ========================================================= */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_default { background: radial-gradient( circle at 58% 42%, #1d2b38 0%, #14202b 44%, #0f1821 100% ) !important; } /* Portalbild auf Nachrichten-Seite abschalten */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_default::before { background-image: none !important; opacity: 1 !important; } /* ruhiger dunkler Overlay */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_default::after { background: linear-gradient( 180deg, rgba(7,12,18,.12), rgba(7,12,18,.44) ) !important; } /* Inhalt mittig */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_default_wrapper { position: relative !important; width: min(100%, 820px) !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 48px !important; } /* Profilkarte gehört nur auf Portal-Startseite */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_profile { display: none !important; } /* Hero als Nachrichten-Landing */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero { position: relative !important; width: min(100%, 640px) !important; margin: 0 auto !important; padding-top: 180px !important; text-align: center !important; } /* Brief als grosszügiges Wasserzeichen */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 150px !important; height: 150px !important; transform: translateX(-50%) !important; border-radius: 50% !important; background: url("/img/larp-netz-nachrichten.png") center / contain no-repeat !important; opacity: .24 !important; filter: saturate(.72) brightness(.82) !important; box-shadow: 0 0 55px rgba(181,154,99,.08) !important; } /* ursprünglichen Willkommen-Text unsichtbar machen */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero h1 { font-size: 0 !important; line-height: 1 !important; margin: 0 !important; color: transparent !important; text-shadow: none !important; } /* neuer Titel */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero h1::before { content: "Nachrichten" !important; display: block !important; color: #eee6d6 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: 48px !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.015em !important; text-shadow: 0 3px 16px rgba(0,0,0,.34) !important; } /* Goldlinie ersetzen */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero::after { content: "◆" !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 390px !important; max-width: 70vw !important; height: 20px !important; margin: 18px auto 0 !important; color: #b99c60 !important; font-size: 8px !important; background: linear-gradient( #8f774b, #8f774b ) left center / 45% 1px no-repeat, linear-gradient( #8f774b, #8f774b ) right center / 45% 1px no-repeat !important; } /* Hinweistext unter Goldlinie */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_default_wrapper::after { content: "Wähle links eine Unterhaltung aus." !important; display: block !important; margin-top: 22px !important; color: #aeb8c1 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: .01em !important; } /* Nachrichten-Raumliste bleibt dunkel */ html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_LeftPanel_outerWrapper, html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_LeftPanel_wrapper, html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_RoomListPanel { background: linear-gradient( 180deg, #182a3b 0%, #1c3043 100% ) !important; } /* Responsive */ @media (max-width: 720px) { html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero { padding-top: 145px !important; } html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero::before { width: 120px !important; height: 120px !important; } html[data-larp-home-mode="messages"][data-larp-view="home"] .mx_HomePage_hero h1::before { font-size: 38px !important; } } /* ========================================================= LARP-NETZ v27 MESSAGES HOME Eigene Nachrichten-Einstiegsseite. Keine Auswirkung auf Portal-Startseite oder Räume. ========================================================= */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome { position: relative !important; min-width: 0 !important; min-height: 100% !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; color: #eeeae2 !important; background: radial-gradient( circle at 50% 42%, rgba(44, 64, 80, .72) 0%, rgba(25, 39, 52, .96) 40%, #111922 76% ) !important; } /* sehr dezente Tiefe */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 115deg, rgba(181,154,99,.025), transparent 34%, transparent 68%, rgba(91,126,159,.035) ) !important; } /* Inhalt */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_content { position: relative !important; z-index: 1 !important; width: min(680px, calc(100% - 80px)) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 56px 40px 70px !important; } /* Briefmotiv */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_mark { width: 150px !important; height: 150px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 30px !important; opacity: .24 !important; filter: saturate(.72) brightness(.9) !important; } html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_mark img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 50% !important; box-shadow: 0 0 55px rgba(181,154,99,.10) !important; } /* Titel */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome h1 { margin: 0 !important; color: #f1ece2 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(38px, 4vw, 54px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: -.015em !important; text-shadow: 0 3px 16px rgba(0,0,0,.30) !important; } /* Goldlinie */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_divider { width: min(390px, 70%) !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 20px auto 18px !important; color: #b59a63 !important; font-size: 8px !important; background: linear-gradient( rgba(181,154,99,.62), rgba(181,154,99,.62) ) left center / 45% 1px no-repeat, linear-gradient( rgba(181,154,99,.62), rgba(181,154,99,.62) ) right center / 45% 1px no-repeat !important; } /* Hinweis */ html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome p { margin: 0 !important; color: #aeb8c1 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: .01em !important; } /* Nachrichtenliste links bleibt wie bisher */ html[data-larp-home-mode="messages"] .mx_LeftPanel_outerWrapper, html[data-larp-home-mode="messages"] .mx_LeftPanel_wrapper, html[data-larp-home-mode="messages"] .mx_RoomListPanel { background: linear-gradient( 180deg, #182a3b 0%, #1c3043 100% ) !important; } /* kleine Displays */ @media (max-width: 760px) { html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_content { width: calc(100% - 40px) !important; padding: 40px 20px 54px !important; } html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome_mark { width: 115px !important; height: 115px !important; margin-bottom: 24px !important; } html[data-larp-home-mode="messages"] .mx_LarpNetzMessagesHome p { font-size: 15px !important; } } /* ========================================================= /* ========================================================= /* ========================================================= LARP-NETZ v34 COMPOUND ROOM THEME Geöffnete Rooms + DMs. Navigation, Portal und Nachrichten-Landingpage bleiben unangetastet. ========================================================= */ /* --------------------------------------------------------- COMPOUND THEME --------------------------------------------------------- */ .mx_LarpNetzRoomMode, .mx_LarpNetzRoomMode .mx_RoomView, .mx_LarpNetzRoomMode .mx_MainSplit, .mx_LarpNetzRoomMode .mx_RightPanel_ResizeWrapper, .mx_LarpNetzRoomMode .mx_RightPanel, .mx_LarpNetzRoomMode .mx_BaseCard { --cpd-color-bg-canvas-default: #111922 !important; --cpd-color-bg-subtle-primary: #182531 !important; --cpd-color-bg-subtle-secondary: #1c2936 !important; --cpd-color-theme-bg: #111922 !important; --cpd-color-text-primary: #eeeae2 !important; --cpd-color-text-secondary: #aeb8c1 !important; --cpd-color-icon-primary: #d7d9d8 !important; --cpd-color-icon-secondary: #aeb8c1 !important; --cpd-color-icon-tertiary: #8f9ba5 !important; --cpd-color-icon-quaternary: #788590 !important; --cpd-color-icon-secondary-alpha: rgba(174,184,193,.72) !important; --cpd-color-border-interactive-secondary: rgba(181,154,99,.24) !important; --cpd-color-border-interactive-primary: #b59a63 !important; --cpd-color-bg-action-primary-rest: #496f95 !important; --cpd-color-text-action-accent: #cdb276 !important; color-scheme: dark !important; } /* --------------------------------------------------------- GESAMTE ROOM-FLÄCHE --------------------------------------------------------- */ .mx_LarpNetzRoomMode, .mx_LarpNetzRoomMode .mx_RoomView, .mx_LarpNetzRoomMode .mx_MainSplit, .mx_LarpNetzRoomMode .mx_MainSplit_timeline, .mx_LarpNetzRoomMode .mx_RoomView_body, .mx_LarpNetzRoomMode .mx_RoomView_timeline, .mx_LarpNetzRoomMode .mx_RoomView_messagePanel, .mx_LarpNetzRoomMode .mx_RoomView_messageListWrapper, .mx_LarpNetzRoomMode .mx_RoomView_MessageList, .mx_LarpNetzRoomMode .mx_ScrollPanel { background: #111922 !important; color: #eeeae2 !important; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RoomHeader, .mx_LarpNetzRoomMode .mx_RoomHeader.light-panel { background: linear-gradient( 180deg, #182531 0%, #141f29 100% ) !important; border-bottom: 1px solid rgba(181,154,99,.22) !important; color: #eeeae2 !important; box-shadow: none !important; } .mx_LarpNetzRoomMode .mx_RoomHeader_heading, .mx_LarpNetzRoomMode .mx_RoomHeader_truncated { color: #f1ece2 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-weight: 600 !important; } .mx_LarpNetzRoomMode .mx_RoomHeader_icon { color: #aeb8c1 !important; } /* --------------------------------------------------------- TIMELINE --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_EventTile, .mx_LarpNetzRoomMode .mx_EventTile_line, .mx_LarpNetzRoomMode .mx_EventTile_content, .mx_LarpNetzRoomMode .mx_EventTile_body, .mx_LarpNetzRoomMode .mx_MTextBody { background: transparent !important; color: #eeeae2 !important; } .mx_LarpNetzRoomMode .mx_EventTile:hover { background: rgba(255,255,255,.032) !important; } /* Namen warm-gold statt Element-Violett */ .mx_LarpNetzRoomMode .mx_EventTile_senderDetails, .mx_LarpNetzRoomMode .mx_EventTile_senderDetailsLink { color: #cdb276 !important; } /* Zeit / Metadaten */ .mx_LarpNetzRoomMode .mx_EventTile_timestamp, .mx_LarpNetzRoomMode .mx_EventTile_unsigned, .mx_LarpNetzRoomMode .mx_EventTile_editButton { color: #8f9ca7 !important; } /* Links */ .mx_LarpNetzRoomMode .mx_EventTile a, .mx_LarpNetzRoomMode .mx_MTextBody a { color: #d0b77f !important; } /* Bilder */ .mx_LarpNetzRoomMode .mx_MImageBody img { border-radius: 8px !important; box-shadow: 0 6px 22px rgba(0,0,0,.30) !important; } /* --------------------------------------------------------- TIMELINE-TRENNER --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_TimelineSeparator { color: #aaa18e !important; } /* --------------------------------------------------------- COMPOSER-GESAMTFLÄCHE --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_MessageComposer, .mx_LarpNetzRoomMode .mx_MessageComposer_wrapper, .mx_LarpNetzRoomMode .mx_MessageComposer_row { background: #111922 !important; } /* tatsächlicher Composer */ .mx_LarpNetzRoomMode .mx_BasicMessageComposer { background: #1a2632 !important; border: 1px solid rgba(181,154,99,.28) !important; border-radius: 10px !important; box-shadow: 0 5px 18px rgba(0,0,0,.19) !important; } .mx_LarpNetzRoomMode .mx_BasicMessageComposer:focus-within { border-color: rgba(205,178,118,.62) !important; box-shadow: 0 0 0 1px rgba(205,178,118,.09), 0 5px 18px rgba(0,0,0,.22) !important; } .mx_LarpNetzRoomMode .mx_BasicMessageComposer_input, .mx_LarpNetzRoomMode .mx_MessageComposer_input { background: transparent !important; color: #eeeae2 !important; } /* Placeholder */ .mx_LarpNetzRoomMode .mx_BasicMessageComposer_inputEmpty > :first-child::before { color: #87949f !important; } /* --------------------------------------------------------- RIGHT PANEL WRAPPER --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel_ResizeWrapper, .mx_LarpNetzRoomMode .mx_RightPanel, .mx_LarpNetzRoomMode .mx_BaseCard, .mx_LarpNetzRoomMode .mx_UserInfo, .mx_LarpNetzRoomMode .mx_UserInfo_container { background: #151f2a !important; color: #eeeae2 !important; } .mx_LarpNetzRoomMode .mx_RightPanel { border-left: 1px solid rgba(181,154,99,.20) !important; } /* Kartenkopf */ .mx_LarpNetzRoomMode .mx_BaseCard_header, .mx_LarpNetzRoomMode .mx_BaseCard_header_title { background: #151f2a !important; color: #eeeae2 !important; } .mx_LarpNetzRoomMode .mx_BaseCard_header_title_heading { color: #f1ece2 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; } /* UserInfo */ .mx_LarpNetzRoomMode .mx_UserInfo_profile_name { color: #f1ece2 !important; } .mx_LarpNetzRoomMode .mx_UserInfo_profile_mxid, .mx_LarpNetzRoomMode .mx_UserInfo_profileStatus, .mx_LarpNetzRoomMode .mx_UserInfo_timezone { color: #9eabb5 !important; } /* rechte Panel-Texte */ .mx_LarpNetzRoomMode .mx_RightPanel p, .mx_LarpNetzRoomMode .mx_RightPanel li, .mx_LarpNetzRoomMode .mx_UserInfo_field, .mx_LarpNetzRoomMode .mx_UserInfo_memberDetails { color: #c4ccd2 !important; } /* Trenner rechts */ .mx_LarpNetzRoomMode .mx_UserInfo_container + .mx_UserInfo_container, .mx_LarpNetzRoomMode .mx_UserInfo_separator { border-color: rgba(181,154,99,.16) !important; } /* --------------------------------------------------------- SUCHE IM RECHTEN PANEL --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel input { background: #1a2632 !important; color: #eeeae2 !important; border-color: rgba(181,154,99,.22) !important; } /* --------------------------------------------------------- GENERISCHE CPD-OBERFLÄCHEN INNERHALB DES ROOMS --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RoomView_wrapper .light-panel { background: #151f2a !important; color: #eeeae2 !important; } /* --------------------------------------------------------- SCROLLBARS --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RoomView_wrapper ::-webkit-scrollbar-thumb, .mx_LarpNetzRoomMode .mx_RightPanel ::-webkit-scrollbar-thumb { background: rgba(181,154,99,.25) !important; border-radius: 20px !important; } /* ========================================================= LARP-NETZ v35 RIGHT PANEL FINISH Nur rechte Infoleiste. Keine Änderung an Navigation, Startseiten oder Timeline. ========================================================= */ /* --------------------------------------------------------- Grundfläche rechts --------------------------------------------------------- */ .mx_RightPanel, .mx_RightPanel_ResizeWrapper, .mx_RightPanel .mx_BaseCard, .mx_RightPanel .mx_AutoHideScrollbar { background: #151f2a !important; color: #eeeae2 !important; --cpd-color-bg-canvas-default: #151f2a !important; --cpd-color-bg-subtle-primary: #182531 !important; --cpd-color-bg-subtle-secondary: #1c2936 !important; --cpd-color-text-primary: #eeeae2 !important; --cpd-color-text-secondary: #aeb8c1 !important; --cpd-color-icon-primary: #d7d9d8 !important; --cpd-color-icon-secondary: #aeb8c1 !important; } /* --------------------------------------------------------- UserInfo-Struktur Das sind die hellen Blöcke aus dem Screenshot. --------------------------------------------------------- */ .mx_RightPanel .mx_UserInfo, .mx_RightPanel .mx_UserInfo_container, .mx_RightPanel .mx_UserInfo_memberDetailsContainer, .mx_RightPanel .mx_UserInfo_memberDetails, .mx_RightPanel .mx_UserInfo_header, .mx_RightPanel .mx_UserInfo_profile, .mx_RightPanel .mx_UserInfo_field, .mx_RightPanel .mx_UserInfo_profileField { background: #151f2a !important; color: #eeeae2 !important; } /* einzelne Abschnitte subtil voneinander trennen */ .mx_RightPanel .mx_UserInfo_container { border-color: rgba(181,154,99,.18) !important; } /* --------------------------------------------------------- Aktionszeilen Favorit, Einladen, Personen, Threads, Dateien usw. --------------------------------------------------------- */ .mx_RightPanel .mx_AccessibleButton, .mx_RightPanel [role="button"] { color: #e7e5df !important; } .mx_RightPanel .mx_AccessibleButton:not(.mx_UserInfo_verification), .mx_RightPanel [role="button"] { background-color: transparent !important; } .mx_RightPanel .mx_AccessibleButton:hover, .mx_RightPanel [role="button"]:hover { background-color: rgba(255,255,255,.045) !important; } /* Icons */ .mx_RightPanel .mx_AccessibleButton::before, .mx_RightPanel .mx_AccessibleButton::after { background-color: #aeb8c1 !important; } /* --------------------------------------------------------- Namen und Überschriften --------------------------------------------------------- */ .mx_RightPanel h1, .mx_RightPanel h2, .mx_RightPanel h3, .mx_RightPanel .mx_BaseCard_header_title, .mx_RightPanel .mx_BaseCard_header_title_heading, .mx_RightPanel .mx_UserInfo_profile_name { color: #f1ece2 !important; } /* sekundäre Informationen */ .mx_RightPanel .mx_UserInfo_profile_mxid, .mx_RightPanel .mx_UserInfo_profileStatus, .mx_RightPanel .mx_UserInfo_timezone, .mx_RightPanel .mx_UserInfo_roleDescription { color: #9eabb5 !important; } /* --------------------------------------------------------- Suche oben rechts --------------------------------------------------------- */ .mx_RightPanel input, .mx_RightPanel textarea { background: #1a2632 !important; color: #eeeae2 !important; border-color: rgba(181,154,99,.24) !important; } /* --------------------------------------------------------- Links --------------------------------------------------------- */ .mx_RightPanel a { color: #d0b77f !important; } /* --------------------------------------------------------- Trennlinien --------------------------------------------------------- */ .mx_RightPanel hr, .mx_RightPanel .mx_UserInfo_container + .mx_UserInfo_container, .mx_RightPanel .mx_UserInfo_separator { border-color: rgba(181,154,99,.18) !important; } /* --------------------------------------------------------- BaseCard-Reste --------------------------------------------------------- */ .mx_RightPanel .mx_BaseCard_header, .mx_RightPanel .mx_BaseCard_footer { background: #151f2a !important; border-color: rgba(181,154,99,.18) !important; color: #eeeae2 !important; } /* --------------------------------------------------------- Scrollbar --------------------------------------------------------- */ .mx_RightPanel ::-webkit-scrollbar-thumb { background: rgba(181,154,99,.25) !important; border-radius: 20px !important; } /* ========================================================= LARP-NETZ v36 RIGHT PANEL MENU ITEMS Die hellen Flächen stammen aus den Compound MenuItems der RoomSummaryCardView. Nur rechte Infospalte. ========================================================= */ /* --------------------------------------------------------- Compound-Aktionsfarben im rechten Panel --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel { --cpd-color-bg-action-secondary-rest: transparent !important; --cpd-color-bg-action-secondary-hovered: rgba(64,103,145,.18) !important; --cpd-color-bg-action-secondary-pressed: rgba(64,103,145,.26) !important; --cpd-color-bg-action-secondary-disabled: transparent !important; --cpd-color-bg-action-tertiary-rest: transparent !important; --cpd-color-bg-action-tertiary-hovered: rgba(64,103,145,.18) !important; --cpd-color-bg-action-tertiary-pressed: rgba(64,103,145,.26) !important; --cpd-color-bg-action-tertiary-selected: rgba(181,154,99,.12) !important; --cpd-color-text-primary: #eeeae2 !important; --cpd-color-text-secondary: #b7c0c8 !important; --cpd-color-icon-primary: #d9dddf !important; --cpd-color-icon-secondary: #aeb8c1 !important; --cpd-color-border-interactive-secondary: rgba(181,154,99,.20) !important; } /* --------------------------------------------------------- Compound MenuItems --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitem"], .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemcheckbox"], .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemradio"] { background: transparent !important; color: #eeeae2 !important; border-color: transparent !important; } .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitem"]:hover, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemcheckbox"]:hover, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemradio"]:hover { background: rgba(64,103,145,.18) !important; } /* --------------------------------------------------------- Falls Compound die Einträge als Buttons rendert --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel button:not(.mx_UserInfo_verify_button) { color: #eeeae2 !important; } .mx_LarpNetzRoomMode .mx_RightPanel button:not(.mx_UserInfo_verify_button):not([data-kind="primary"]) { background-color: transparent !important; } .mx_LarpNetzRoomMode .mx_RightPanel button:not(.mx_UserInfo_verify_button):not([data-kind="primary"]):hover { background-color: rgba(64,103,145,.18) !important; } /* --------------------------------------------------------- Icons und Texte in Menüzeilen --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitem"] svg, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemcheckbox"] svg, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemradio"] svg { color: #b7c0c8 !important; fill: currentColor !important; } .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitem"] span, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemcheckbox"] span, .mx_LarpNetzRoomMode .mx_RightPanel [role="menuitemradio"] span { color: #eeeae2 !important; } /* --------------------------------------------------------- Gruppenfläche um die RoomSummary-Menüpunkte --------------------------------------------------------- */ .mx_LarpNetzRoomMode .mx_RightPanel .mx_BaseCard { --cpd-color-bg-canvas-default: #151f2a !important; --cpd-color-bg-subtle-primary: #182531 !important; --cpd-color-bg-subtle-secondary: #1a2632 !important; } /* deaktivierte Einträge bleiben sichtbar, aber gedämpft */ .mx_LarpNetzRoomMode .mx_RightPanel [aria-disabled="true"] { color: #6f7c86 !important; opacity: .58 !important; } /* Warn-/Vertrauensbadge NICHT neutralisieren */ .mx_LarpNetzRoomMode .mx_RightPanel .mx_UserInfo_verification, .mx_LarpNetzRoomMode .mx_RightPanel .mx_UserInfo_verified_badge { opacity: 1 !important; } /* ========================================================= LARP-NETZ v37 START PAGE FINAL Nur die Portal-Startseite. Navigation, Nachrichten und Rooms bleiben unangetastet. ========================================================= */ /* --------------------------------------------------------- Gesamtausrichtung --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_default { position: relative !important; } html[data-larp-home-mode="start"] .mx_HomePage_default_wrapper { width: 100% !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; padding: clamp(48px, 7vh, 92px) clamp(36px, 6vw, 100px) clamp(58px, 9vh, 110px) !important; transform: translateY(-1.5vh); } /* --------------------------------------------------------- Titel --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_hero { width: min(100%, 980px) !important; margin: 0 auto 30px !important; text-align: center !important; } html[data-larp-home-mode="start"] .mx_HomePage_hero h1 { margin: 0 !important; color: #f3eee5 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(42px, 4.4vw, 64px) !important; line-height: 1.08 !important; font-weight: 500 !important; letter-spacing: -.018em !important; text-wrap: balance; text-shadow: 0 2px 5px rgba(0,0,0,.72), 0 7px 24px rgba(0,0,0,.30) !important; } /* --------------------------------------------------------- Goldtrenner --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_hero::after { content: "◆" !important; display: flex !important; align-items: center !important; justify-content: center !important; width: min(410px, 54vw) !important; height: 20px !important; margin: 20px auto 0 !important; color: #b59a63 !important; font-size: 8px !important; background: linear-gradient( rgba(181,154,99,.60), rgba(181,154,99,.60) ) left center / 44% 1px no-repeat, linear-gradient( rgba(181,154,99,.60), rgba(181,154,99,.60) ) right center / 44% 1px no-repeat !important; filter: drop-shadow( 0 1px 2px rgba(0,0,0,.45) ); } /* --------------------------------------------------------- Profilkarte --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_profile { width: min(650px, calc(100% - 40px)) !important; min-height: 92px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 20px !important; margin: 0 auto !important; padding: 18px 24px !important; background: linear-gradient( 135deg, rgba(24,29,34,.91) 0%, rgba(31,36,41,.87) 100% ) !important; border: 1px solid rgba(181,154,99,.32) !important; border-radius: 14px !important; box-shadow: 0 12px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* --------------------------------------------------------- Avatar --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_profile .mx_MiniAvatarUploader { flex: 0 0 auto !important; } html[data-larp-home-mode="start"] .mx_HomePage_profile .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(181,154,99,.72), 0 4px 14px rgba(0,0,0,.30) !important; } /* Kamera dezent als editierbares Profilbild */ html[data-larp-home-mode="start"] .mx_HomePage_profile .mx_MiniAvatarUploader_button { box-shadow: 0 0 0 1px rgba(181,154,99,.26) !important; } /* --------------------------------------------------------- Profiltext --------------------------------------------------------- */ html[data-larp-home-mode="start"] .mx_HomePage_profileText { min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; text-align: left !important; } html[data-larp-home-mode="start"] .mx_HomePage_profileLabel { color: #aeb4b8 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 650 !important; letter-spacing: .085em !important; text-transform: uppercase !important; } html[data-larp-home-mode="start"] .mx_HomePage_profileText strong { color: #f2eee6 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: 24px !important; line-height: 1.18 !important; font-weight: 600 !important; } html[data-larp-home-mode="start"] .mx_HomePage_profileHint { margin-top: 2px !important; color: #cbc5ba !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; line-height: 1.35 !important; font-style: italic !important; } /* --------------------------------------------------------- Kleinere Fenster --------------------------------------------------------- */ @media (max-width: 900px) { html[data-larp-home-mode="start"] .mx_HomePage_default_wrapper { padding-left: 32px !important; padding-right: 32px !important; } html[data-larp-home-mode="start"] .mx_HomePage_profile { width: min(620px, 100%) !important; } } @media (max-width: 600px) { html[data-larp-home-mode="start"] .mx_HomePage_default_wrapper { padding: 42px 20px 56px !important; } html[data-larp-home-mode="start"] .mx_HomePage_hero { margin-bottom: 24px !important; } html[data-larp-home-mode="start"] .mx_HomePage_hero h1 { font-size: clamp(34px, 9vw, 44px) !important; } html[data-larp-home-mode="start"] .mx_HomePage_profile { width: 100% !important; padding: 16px 18px !important; gap: 16px !important; } html[data-larp-home-mode="start"] .mx_HomePage_profileText strong { font-size: 21px !important; } } /* ========================================================= LARP-NETZ v38 SPACE ACCENT CANON Grundsatz: - eine dunkle LARP-Netz-Oberfläche für alle Spaces - eine Akzentfarbe pro Space - Rooms erben die Farbe ihres Spaces - keine vollflächig wechselnden Space-Farben ========================================================= */ /* --------------------------------------------------------- SYSTEM / FALLBACK Wichtig: Kein kräftig-blauer Lade-Fallback mehr. Vor dem Erkennen eines Spaces erscheint bereits der neutrale LARP-Netz-Kanon. --------------------------------------------------------- */ :root { --ln-space-accent: #b59a63; --ln-space-accent-strong: #8f784b; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(181,154,99,.075); --ln-theme-selected: rgba(181,154,99,.145); --ln-space-border: rgba(181,154,99,.24); } /* --------------------------------------------------------- DER FUNKE Glut / Kupfer --------------------------------------------------------- */ html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] { --ln-space-accent: #bd6d3c; --ln-space-accent-strong: #914d2c; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(189,109,60,.085); --ln-theme-selected: rgba(189,109,60,.17); --ln-space-border: rgba(189,109,60,.30); } /* --------------------------------------------------------- CCCV Bernstein / Ocker --------------------------------------------------------- */ html[data-larp-space="!eDefvOEZWORCSkWWNE:larp-netz.ch"], html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] { --ln-space-accent: #b78b50; --ln-space-accent-strong: #89683d; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(183,139,80,.08); --ln-theme-selected: rgba(183,139,80,.16); --ln-space-border: rgba(183,139,80,.28); } /* --------------------------------------------------------- FEUERRABEN ORGA Feuerrot / Kupferrot --------------------------------------------------------- */ html[data-larp-space="!EFJYMgWmWTKMCjlPFH:larp-netz.ch"] { --ln-space-accent: #a94d45; --ln-space-accent-strong: #7e3732; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(169,77,69,.085); --ln-theme-selected: rgba(169,77,69,.17); --ln-space-border: rgba(169,77,69,.29); } /* --------------------------------------------------------- TAVERNE Warmes Braun / Altgold --------------------------------------------------------- */ html[data-larp-space="!rDiIzsfUyJRuxZegHI:larp-netz.ch"] { --ln-space-accent: #9c7b55; --ln-space-accent-strong: #735a40; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(156,123,85,.08); --ln-theme-selected: rgba(156,123,85,.16); --ln-space-border: rgba(156,123,85,.28); } /* --------------------------------------------------------- SUCHER Kühles Petrol / Blau --------------------------------------------------------- */ html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] { --ln-space-accent: #4e8391; --ln-space-accent-strong: #386471; --ln-theme-nav-top: #182a3b; --ln-theme-nav-bottom: #1c3043; --ln-theme-soft: rgba(78,131,145,.085); --ln-theme-selected: rgba(78,131,145,.17); --ln-space-border: rgba(78,131,145,.29); } /* ========================================================= EINHEITLICHE NAVIGATIONSFLÄCHE Nur echte Spaces. Nachrichten/Home bleiben in ihrem eigenen Kanon. ========================================================= */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_LeftPanel_outerWrapper, html[data-larp-space]:not([data-larp-space="home-space"]) .mx_LeftPanel_wrapper, html[data-larp-space]:not([data-larp-space="home-space"]) .mx_RoomListPanel { background: linear-gradient( 180deg, #182a3b 0%, #1c3043 100% ) !important; } /* --------------------------------------------------------- Room Hover --------------------------------------------------------- */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_RoomListItem:hover { background: var(--ln-theme-soft) !important; } /* --------------------------------------------------------- Aktiver Room Nur hier wird die Space-Identität deutlich sichtbar. --------------------------------------------------------- */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space]:not([data-larp-space="home-space"]) .mx_RoomListItem[aria-selected="true"] { background: linear-gradient( 90deg, var(--ln-theme-selected) 0%, rgba(255,255,255,.018) 100% ) !important; box-shadow: inset 3px 0 0 var(--ln-space-accent) !important; } /* --------------------------------------------------------- Geöffneter Room: dünne Space-Farbe im Header --------------------------------------------------------- */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_LarpNetzRoomMode .mx_RoomHeader { border-bottom: 1px solid var(--ln-space-border) !important; } /* --------------------------------------------------------- Composer-Fokus übernimmt ebenfalls nur den Akzent --------------------------------------------------------- */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_LarpNetzRoomMode .mx_BasicMessageComposer:focus-within { border-color: var(--ln-space-border) !important; } /* --------------------------------------------------------- Roomlisten-Trennkante --------------------------------------------------------- */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_RoomListPanel { border-right: 1px solid rgba(181,154,99,.10) !important; } /* ========================================================= LARP-NETZ v39 CCCV PUMA LANDING CCCV = Die Pumas Eigene Space-Startseite. Rooms bleiben ausschliesslich links. ========================================================= */ /* --------------------------------------------------------- CCCV Space-Grundfläche --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_SpaceRoomView { background: #111922 !important; color: #eeeae2 !important; } /* --------------------------------------------------------- Landingfläche --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding { width: 100% !important; height: 100% !important; min-height: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; padding: 56px 48px !important; color: #eeeae2 !important; background: radial-gradient( circle at 50% 34%, rgba(183,139,80,.13) 0%, rgba(183,139,80,.045) 28%, transparent 54% ), linear-gradient( 180deg, #131d27 0%, #111922 52%, #0f171f 100% ) !important; } /* --------------------------------------------------------- Sehr dezente atmosphärische Struktur --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: .42 !important; background: radial-gradient( ellipse at 50% 100%, rgba(183,139,80,.06), transparent 52% ) !important; } /* --------------------------------------------------------- Inhalt --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_content { position: relative !important; z-index: 1 !important; width: min(720px, 100%) !important; margin: 0 auto !important; text-align: center !important; } /* --------------------------------------------------------- Puma-Emblem --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem { display: flex !important; justify-content: center !important; margin: 0 auto 24px !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(183,139,80,.72), 0 0 0 6px rgba(183,139,80,.065), 0 18px 45px rgba(0,0,0,.34) !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem img { border-radius: 50% !important; } /* --------------------------------------------------------- CCCV / Die Pumas --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity h1 { margin: 0 !important; color: #f3eee5 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(42px, 4.4vw, 58px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: .045em !important; text-shadow: 0 3px 18px rgba(0,0,0,.34) !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_subtitle { margin-top: 8px !important; color: #c7aa70 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; line-height: 1.3 !important; font-style: italic !important; letter-spacing: .035em !important; } /* --------------------------------------------------------- Goldene Trennlinie --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_divider { width: min(380px, 72%) !important; margin: 24px auto 30px !important; color: #b78b50 !important; font-size: 8px !important; line-height: 1 !important; background: linear-gradient( rgba(183,139,80,.58), rgba(183,139,80,.58) ) left center / 44% 1px no-repeat, linear-gradient( rgba(183,139,80,.58), rgba(183,139,80,.58) ) right center / 44% 1px no-repeat !important; } /* --------------------------------------------------------- Willkommenstext --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_welcome { margin: 0 0 14px !important; color: #f0ece3 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(25px, 2.1vw, 31px) !important; line-height: 1.25 !important; font-weight: 500 !important; } /* --------------------------------------------------------- Beschreibung --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_description { max-width: 620px !important; margin: 0 auto !important; color: #c9ced1 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; font-weight: 400 !important; } /* --------------------------------------------------------- Navigationshinweis --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_hint { margin: 18px auto 0 !important; color: #9da7ad !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; line-height: 1.45 !important; font-style: italic !important; } /* --------------------------------------------------------- CCCV Rooms links Puma-Akzent jetzt deutlich sichtbar: - Hover sehr dezent - aktiver Room mit linker Bernsteinlinie --------------------------------------------------------- */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_RoomListItem:hover { background: rgba(183,139,80,.075) !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"] { background: linear-gradient( 90deg, rgba(183,139,80,.19) 0%, rgba(183,139,80,.055) 75%, transparent 100% ) !important; box-shadow: inset 3px 0 0 #b78b50 !important; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 800px) { html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding { padding: 38px 26px !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { width: 92px !important; height: 92px !important; } } /* ========================================================== LARP-NETZ V40 CCCV LANDING CENTER ========================================================== */ html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding { width: 100%; min-width: 0; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_content { width: min(760px, calc(100% - 64px)); margin-left: auto !important; margin-right: auto !important; display: flex; flex-direction: column; align-items: center; text-align: center; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem { margin-left: auto !important; margin-right: auto !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity { width: 100%; display: flex; flex-direction: column; align-items: center; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity h1, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_subtitle, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_divider, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_welcome, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_description, html[data-larp-space="!toBOlWFlGCKvAaoyFg:larp-netz.ch"] .mx_LarpNetzSpaceLanding_hint { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* LARP-NETZ: DER FUNKE UI21 START */ /* --------------------------------------------------------- DER FUNKE – Space und Landing gemeinsamer LARP-Netz-Kanon, eigener Kupfer-/Glutcharakter --------------------------------------------------------- */ html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_SpaceRoomView { background: #111922 !important; color: #eeeae2 !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding { width: 100% !important; height: 100% !important; min-height: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; padding: 54px 48px !important; color: #eeeae2 !important; background: radial-gradient( circle at 50% 31%, rgba(211,122,62,.15) 0%, rgba(189,109,60,.055) 26%, transparent 52% ), radial-gradient( ellipse at 50% 100%, rgba(150,74,37,.055) 0%, transparent 46% ), linear-gradient( 180deg, #131d27 0%, #111922 54%, #0e161e 100% ) !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: .72 !important; background: radial-gradient(circle at 24% 73%, rgba(216,119,55,.11) 0 1px, transparent 2px), radial-gradient(circle at 71% 22%, rgba(232,151,86,.10) 0 1px, transparent 2px), radial-gradient(circle at 83% 66%, rgba(216,119,55,.09) 0 1px, transparent 2px), radial-gradient(circle at 39% 18%, rgba(232,151,86,.08) 0 1px, transparent 2px) !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_content { position: relative !important; z-index: 1 !important; width: min(720px, calc(100% - 64px)) !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem { display: flex !important; justify-content: center !important; margin: 0 auto 24px !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(211,122,62,.78), 0 0 0 6px rgba(211,122,62,.07), 0 0 34px rgba(211,122,62,.13), 0 18px 45px rgba(0,0,0,.36) !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem img { border-radius: 50% !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity h1 { margin: 0 !important; color: #e0ae78 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(42px, 4.3vw, 58px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: .055em !important; text-shadow: 0 2px 16px rgba(0,0,0,.42), 0 0 24px rgba(185,103,50,.08) !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_subtitle { margin: 9px auto 0 !important; color: #c99061 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: .035em !important; text-align: center !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_divider { width: min(390px, 72%) !important; margin: 24px auto 30px !important; color: #bd6d3c !important; font-size: 8px !important; line-height: 1 !important; text-align: center !important; background: linear-gradient( rgba(189,109,60,.58), rgba(189,109,60,.58) ) left center / 44% 1px no-repeat, linear-gradient( rgba(189,109,60,.58), rgba(189,109,60,.58) ) right center / 44% 1px no-repeat !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_welcome { margin: 0 auto 14px !important; color: #f0ece3 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(25px, 2.1vw, 31px) !important; line-height: 1.25 !important; font-weight: 500 !important; text-align: center !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_description { max-width: 630px !important; margin: 0 auto !important; color: #c9ced1 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; font-weight: 400 !important; text-align: center !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_hint { margin: 18px auto 0 !important; color: #9da7ad !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; line-height: 1.45 !important; font-style: italic !important; text-align: center !important; } /* --------------------------------------------------------- DER FUNKE – Bereichsicons --------------------------------------------------------- */ html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title { min-height: 25px !important; display: inline-flex !important; align-items: center !important; padding-left: 31px !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 24px 24px !important; color: #d9c7b5 !important; letter-spacing: .045em !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title[data-ln-funke-icon="allgemein"] { background-image: url("/funke-icons/01-Der-Funke-Allgemein.png") !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title[data-ln-funke-icon="sc"] { background-image: url("/funke-icons/07-Der-Funke-SC.png") !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title[data-ln-funke-icon="nsc"] { background-image: url("/funke-icons/11-Der-Funke-NSC.png") !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title[data-ln-funke-icon="orga"] { background-image: url("/funke-icons/17-Der-Funke-Orga.png") !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .ln-funke-section-title[data-ln-funke-icon="taverne"] { background-image: url("/funke-icons/21-Der-Funke-Taverne.png") !important; } /* --------------------------------------------------------- DER FUNKE – Rooms links --------------------------------------------------------- */ html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_RoomListItem:hover { background: rgba(189,109,60,.07) !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"] { background: linear-gradient( 90deg, rgba(189,109,60,.18) 0%, rgba(189,109,60,.05) 76%, transparent 100% ) !important; box-shadow: inset 3px 0 0 #bd6d3c !important; } @media (max-width: 800px) { html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding { padding: 38px 26px !important; } html[data-larp-space="!CWXeOCQmlPhtKPosjk:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { width: 92px !important; height: 92px !important; } } /* LARP-NETZ: DER FUNKE UI21 ENDE */ /* LARP-NETZ OTHER SPACE ROOMS START */ /* * Gleiches Room-Prinzip wie CCCV und Der Funke: * Theme-Farbe kommt aus den bereits vorhandenen Variablen. * * Enthalten: * - zweite CCCV-ID * - Feuerraben Orga * - Taverne * - Sucher */ html[data-larp-space="!eDefvOEZWORCSkWWNE:larp-netz.ch"] .mx_RoomListItem:hover, html[data-larp-space="!EFJYMgWmWTKMCjlPFH:larp-netz.ch"] .mx_RoomListItem:hover, html[data-larp-space="!rDiIzsfUyJRuxZegHI:larp-netz.ch"] .mx_RoomListItem:hover, html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_RoomListItem:hover { background: var(--ln-theme-soft) !important; } html[data-larp-space="!eDefvOEZWORCSkWWNE:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!eDefvOEZWORCSkWWNE:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"], html[data-larp-space="!EFJYMgWmWTKMCjlPFH:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!EFJYMgWmWTKMCjlPFH:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"], html[data-larp-space="!rDiIzsfUyJRuxZegHI:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!rDiIzsfUyJRuxZegHI:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"], html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_RoomListItem.mx_RoomListItem_selected, html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_RoomListItem[aria-selected="true"] { background: linear-gradient( 90deg, var(--ln-theme-selected) 0%, var(--ln-theme-soft) 76%, transparent 100% ) !important; box-shadow: inset 3px 0 0 var(--ln-space-accent) !important; } /* LARP-NETZ OTHER SPACE ROOMS END */ /* LARP-NETZ VISIBLE RIGHT FRAME START */ /* * Sichtbarer rechter Abschluss der gesamten Element-App. * Nur innerhalb echter Spaces. * Keine Auswirkung auf Home/Startseite. * * Die Farbe stammt weiterhin aus dem vorhandenen Space-Theme. */ html[data-larp-space]:not([data-larp-space="home-space"]) .mx_MatrixChat { box-shadow: inset -2px 0 0 var(--ln-space-border, rgba(181,154,99,.32)) !important; } /* LARP-NETZ VISIBLE RIGHT FRAME END */ /* LARP-NETZ: SUCHER LANDING UI22 START */ /* --------------------------------------------------------- SUCHER – Space und Landing gemeinsamer LARP-Netz-Kanon, kühler Petrol-/Blaucharakter --------------------------------------------------------- */ html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_SpaceRoomView { background: #111922 !important; color: #eeeae2 !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding { width: 100% !important; height: 100% !important; min-height: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; padding: 54px 48px !important; color: #eeeae2 !important; background: radial-gradient( circle at 50% 31%, rgba(78,131,145,.17) 0%, rgba(78,131,145,.06) 27%, transparent 53% ), radial-gradient( ellipse at 50% 100%, rgba(56,100,113,.07) 0%, transparent 47% ), linear-gradient( 180deg, #131d27 0%, #111922 54%, #0e161e 100% ) !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: .62 !important; background: radial-gradient(circle at 22% 71%, rgba(112,165,178,.08) 0 1px, transparent 2px), radial-gradient(circle at 74% 23%, rgba(128,181,193,.07) 0 1px, transparent 2px), radial-gradient(circle at 84% 67%, rgba(78,131,145,.08) 0 1px, transparent 2px) !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_content { position: relative !important; z-index: 1 !important; width: min(720px, calc(100% - 64px)) !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem { display: flex !important; justify-content: center !important; margin: 0 auto 24px !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(78,131,145,.82), 0 0 0 6px rgba(78,131,145,.075), 0 0 34px rgba(78,131,145,.13), 0 18px 45px rgba(0,0,0,.36) !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem img { border-radius: 50% !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_identity h1 { margin: 0 !important; color: #9fc5ce !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(42px, 4.3vw, 58px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: .055em !important; text-shadow: 0 2px 16px rgba(0,0,0,.42), 0 0 24px rgba(78,131,145,.10) !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_divider { width: min(390px, 72%) !important; margin: 24px auto 30px !important; color: var(--ln-space-accent) !important; font-size: 8px !important; line-height: 1 !important; text-align: center !important; background: linear-gradient( rgba(78,131,145,.60), rgba(78,131,145,.60) ) left center / 44% 1px no-repeat, linear-gradient( rgba(78,131,145,.60), rgba(78,131,145,.60) ) right center / 44% 1px no-repeat !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_welcome { margin: 0 auto 14px !important; color: #f0ece3 !important; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important; font-size: clamp(25px, 2.1vw, 31px) !important; line-height: 1.25 !important; font-weight: 500 !important; text-align: center !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_description { max-width: 630px !important; margin: 0 auto !important; color: #c9ced1 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; font-weight: 400 !important; text-align: center !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_hint { margin: 18px auto 0 !important; color: #9da7ad !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; line-height: 1.45 !important; font-style: italic !important; text-align: center !important; } @media (max-width: 800px) { html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding { padding: 38px 26px !important; } html[data-larp-space="!tzhgaXZIPaJLaXYTNx:larp-netz.ch"] .mx_LarpNetzSpaceLanding_emblem .mx_BaseAvatar { width: 92px !important; height: 92px !important; } } /* LARP-NETZ: SUCHER LANDING UI22 END */