/* ===================================================================== SaaS-Helfer KB — style.css Aether v2 (bereinigt) + Layout-Fix + Site-Anpassungen in EINER Datei. Selbst gehostet — ersetzt den externen Aether-Link im . Reihenfolge ist relevant: THEME zuerst, SITE-ANPASSUNGEN danach, damit die Anpassungen das Theme per Kaskade überschreiben. ===================================================================== */ /* ===================================================================== === THEME (Aether v2 — bereinigt) === Superseded Layout-Regeln entfernt (siehe Kommentare beim Layout-Fix). ===================================================================== */ :root { --color-primary: #1ca0f1 !important; --cta-color-bg: #e4f5fe !important; --cta-padding: 8px 16px !important; --cta-border-radius: 50px !important; --cta-color-text: #424b55 !important; --color-text-default: #424b55; --callout-border-radius: 20px !important; --inline-code-bg-color: rgba(28, 160, 241, 0.1) !important; --content-width: 1500px !important; /**/ --color-code-block: #fafafa !important; --color-text-light: white !important; --column-spacing: 15px !important; --collection-card-cover-size-small: 180px !important; --collection-card-cover-size-medium: 260px !important; --collection-card-cover-size-large: calc(50% - 15px) !important; --transition: all .17s ease-in-out !important; /* --color-bg-gray-light: #f5f5f5!important; */ --color-bg-gray: #f5f4f2 !important; --color-ui-hover-bg: rgba(150, 150, 150, .1) !important; --color-ui-hover-bg-light: #e7f5fd !important; --color-border-default: #F1F5F7; --color-accent-bg: var(--color-primary); --color-card-bg: rgba(150, 150, 150, .1) !important; } body { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } .notion-root, .notion-root.has-footer { padding: 0 !important; } @media all and (max-width: 860px) { .notion-root, .notion-root.has-footer { padding-left: var(--padding-left-mobile) !important; padding-right: var(--padding-right-mobile) !important; } } .super-sidebar .super-navigation-menu__list { margin-bottom: 6px !important; } .super-navbar { border-bottom: 1px solid var(--color-border-default) !important; display: flex!important; justify-content: center !important; z-index: 20 !important; flex-direction: column!important; align-items: center!important; } .super-navbar__breadcrumbs { border-bottom: 1px solid var(--color-border-default) !important; } .super-navbar__button.super-navbar__menu-open { display: none !important; } .super-navbar__logo:hover { opacity: .7 !important; transition: var(--transition) !important; } .super-navbar__item { opacity: 1 !important; } .super-navbar__menu-wrapper { overflow: auto !important; } .super-navbar__menu-item-list .super-navbar__item { border-radius: 10px !important; } .super-navbar__menu-item-list .super-navbar__item:hover { background: var(--color-ui-hover-bg) !important; opacity: 1 !important; } .super-navbar__cta { transition: all 0.2s ease-in-out !important; font-weight: 500 !important; border-radius: var(--cta-border-radius) !important; background: var(--cta-color-bg) !important; color: var(--cta-color-text) !important; } .notion-icon__search:hover path:nth-child(2) { fill: var(--color-primary) !important; } .notion-search__input { background: var(--color-bg-default) !important; } .notion-search__box { background: var(--color-bg-default) !important; } .notion-search__wrapper { background: rgba(0, 0, 0, 0.5) !important; } .notion-caption { text-align: center !important; margin-top: 10px !important; } .notion-header { /* display: flex!important; align-items: center!important; margin-bottom: 1rem!important; margin-top: 0px!important; */ display: none !important; } .notion-header__title-wrapper { margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; height: 100% !important; } .notion-header__icon-wrapper { font-size: 54px !important; line-height: 64px !important; padding: 0px !important; margin: 0px !important; } .notion-header__cover { display: none !important; } .notion-header__content { padding: 0px !important; display: flex !important; } .notion-header__title { margin-left: 0px !important; padding: 0px !important; display: flex !important; align-items: center !important; font-size: 2.8rem !important; letter-spacing: -1px !important; font-weight: 600 !important; font-size: 40px !important; margin-top: 25px !important; font-family: 'Lora'; } .notion-header__icon-wrapper { position: relative !important; top: 11px !important; margin: 0 !important; width: 50px !important; height: 50px !important; } .notion-header__icon { width: 50px !important; height: 50px !important; } .notion-embed { margin: 35px 0 !important; } .notion-page { margin: 0 !important; padding: 8px 5px!important; padding-left: 8px!important; } .notion-page>div { padding: 0px!important; } .notion-page__title { font-size: 15px !important; line-height: 1.5 !important; display: flex !important; align-items: center !important; } .notion-page__title span { font-weight: 500 !important; } .notion-page__title .notion-semantic-string, .notion-page__title.notion-semantic-string { border: 0 !important; text-decoration: none!important; font-weight: 400 !important; white-space: pre-wrap !important; line-height: 1 !important; } .notion-page__title .notion-semantic-string span { line-height: 1 !important; } .notion-page>div:hover { background: 0 0 !important; } .notion-table-of-contents { margin: 0 !important; padding: 0 !important; } .notion-table-of-contents__item { margin: 10px 0 !important; font-size: 15px !important; } .notion-table-of-contents__item .notion-semantic-string { border: 0 !important; } .notion-table-of-contents__item a div { padding: 0 !important; } .notion-table-of-contents__item:hover { background: 0 0 !important; opacity: .6 !important; } .notion-text__content { margin: 10px 0 !important; padding: 0 !important; } .notion-semantic-string .link { opacity: 1 !important; } ul>.notion-list-item:before { content: "-" !important; opacity: 0.3 !important; display: inline-block !important; margin-left: -1em !important; } .notion-heading { margin: 2.4rem 0 2rem 0 !important; font-weight: 600 !important; } h1.notion-heading { line-height: 1 !important; margin-bottom: 10px !important; letter-spacing: -1px !important; font-weight: 600 !important; margin-top: 25px !important; } h1.notion-heading .notion-semantic-string { line-height: 1.2 !important; } h2.notion-heading { line-height: 1.5 !important; margin-bottom: 0 !important; letter-spacing: -.9px !important; } h3.notion-heading { text-transform: none !important; letter-spacing: -.6px !important; margin-bottom: 10px !important; } p>span>span>a { border: 0 !important; opacity: 1 !important; } .notion-embed { margin: 10px 0px !important; } .notion-image { margin: 20px 0px !important; } .notion-callout .notion-image.page-width { width: 100% !important; max-width: 100% !important; } pre { padding: 20px !important; margin: 10px 0 20px 0 !important; } .notion-semantic-string.code { background: var(--inline-code-bg-color) !important; color: var(--color-text-default) !important; font-size: 0.9em !important; white-space: pre-wrap !important; padding: 2px 6px !important; } ul>.notion-list-item:before { content: "" !important; opacity: 0.3 !important; display: inline-block !important; margin-left: 0 !important; } .notion-quote { border: 1px solid var(--color-border-default) !important; border-radius: 15px !important; padding: 15px 22px !important; margin: 1rem 0 !important; letter-spacing: -.4px !important; } .notion-embed__container>iframe { border-radius: 25px !important; box-shadow: 0 10px 40px -10px rgb(0 0 0 / 12%) !important; } .notion-callout.border> { display: block !important; } .notion-callout__content .notion-link { color: var(--color-text-default) !important; opacity: .6 !important; } .notion-callout__content .notion-link:hover { color: var(--color-text-default) !important; opacity: 1 !important; } .notion-callout { display: flex !important; width: 100% !important; align-self: flex-start; border-radius: var(--callout-border-radius) !important; margin-top: 20px !important; } .notion-callout__icon { margin-right: 10px !important; margin-top: 3px !important; margin-left: 3px !important; } .notion-callout__content { margin: 0 !important; display: inline-block !important; } .notion-breadcrumb__item:hover { background: 0 0 !important; } /* --- ENTFERNT: .notion-column-list:first-child Flex-Regel --- --- ENTFERNT: .notion-root > .notion-column-list:first-child max-width-Regel --- Beide :first-child-Selektoren matchten nie (der Property-Block steht vor der Column-List). Ersetzt durch den LAYOUT-FIX weiter unten. */ .notion-toggle.bg-brown { display: none !important; } .notion-toggle .notion-heading { margin-top: 0px !important; } .notion-semantic-string .resource .notion-link { border: 0 !important; } /* --- ENTFERNT: nth-child(1){width:100%} und der @media(min-width:861px)- Block — beide vom LAYOUT-FIX überschrieben. --- */ .notion-root>.notion-column-list>.notion-column:nth-child(2) { margin-left: 0 !important; min-width: 130px !important; height: calc(100vh - var(--navbar-height)) !important; flex-shrink: 0 !important; position: sticky !important; position: -webkit-sticky !important; top: var(--navbar-height) !important; padding: 30px !important; padding-top: 48px !important; border-left: 1px solid var(--color-border-default) !important; z-index: 10 !important; background: transparent !important; overflow: auto !important; } .notion-root>.notion-column-list>.notion-column:nth-child(2) .notion-text .color-gray { text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 2px !important; margin-bottom: 10px !important; opacity: .6 !important; font-weight: 500 !important; } .notion-root>.notion-column-list>.notion-column:nth-child(2) .notion-text:first-child { margin-bottom: 0 !important; margin-top: 0 !important; } .notion-root>.notion-column-list>.notion-column:nth-child(2)::-webkit-scrollbar { width: 12px !important; border: 0!important; background: transparent!important; } .notion-root>.notion-column-list>.notion-column:nth-child(2)::-webkit-scrollbar-track { background: transparent !important; border: 0!important; } .notion-root>.notion-column-list>.notion-column:nth-child(2)::-webkit-scrollbar-thumb { background-color: var(--color-ui-hover-bg); border-radius: 20px !important; } /* ===================================================================== === LAYOUT-FIX === Erzwingt den Zweispalter (Artikel + TOC), der sonst umbricht, weil Aethers :first-child-Selektoren nicht greifen. Steht bewusst NACH der Basis-Regel von nth-child(2) oben — gleiche Spezifität, Quell- reihenfolge entscheidet, also müssen diese Overrides danach kommen. Kalibrierung: Artikel max-width 960px (820 = schmaler / 1040 = breiter), TOC 240px, Gap 32px, Umbruch-Breakpoint 900px. ===================================================================== */ /* Haupt-Layout: echte Zweispalter-Reihe, kein Umbruch */ .notion-root > .notion-column-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 32px !important; width: 100% !important; max-width: 1300px !important; margin: 0 auto !important; } /* ab 901px: Artikel fluid, TOC fest schmal */ @media all and (min-width: 901px) { .notion-root > .notion-column-list > .notion-column:nth-child(1) { flex: 1 1 auto !important; width: auto !important; /* überschreibt Notions Inline-Breite */ min-width: 0 !important; /* MUSS schrumpfen dürfen */ max-width: 960px !important; /* <-- hier ggf. 820 / 1040 einstellen */ margin: 0 !important; padding: 30px 28px 80px !important; height: auto !important; z-index: 10 !important; } .notion-root > .notion-column-list > .notion-column:nth-child(2) { display: block !important; /* hebt das alte 1100px-Ausblenden auf */ flex: 0 0 240px !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; margin: 0 !important; /* neutralisiert Notions Inline-Margin */ padding: 40px 16px 24px !important; } } /* bis 900px: TOC ausblenden, Artikel volle Breite */ @media all and (max-width: 900px) { .notion-root > .notion-column-list > .notion-column:nth-child(2) { display: none !important; } .notion-root > .notion-column-list > .notion-column:nth-child(1) { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding-left: 20px !important; padding-right: 20px !important; } } /* === Ende LAYOUT-FIX === */ .notion-collection__header { display: none !important; } .notion-collection { margin-top: 15px !important; } .notion-collection-gallery { border-top: 0 !important; gap: 30px !important; padding-top: 0px !important; } .notion-collection-list, .notion-collection-board { border-top: 0 !important; overflow: auto !important; } .notion-collection-card { transition: var(--transition) !important; } .notion-collection-card.board { border-radius: 10px !important; border: 0 !important; box-shadow: 0 10px 15px -10px rgb(0 0 0 / 9%) !important; } .notion-collection-card.board:hover { box-shadow: 0 10px 20px -10px rgb(0 0 0 / 17%) !important; background: var(--color-bg-default) !important; transform: translateY(-4px) !important; } .notion-collection-gallery.large>.notion-collection-card, .notion-collection-gallery.medium>.notion-collection-card { border-radius: 10px !important; border: 1px solid var(--color-border-default) !important; box-shadow: 0 10px 20px -10px rgb(0 0 0 / 12%) !important; } .notion-collection-gallery>.notion-collection-card:hover { box-shadow: 0 20px 40px -10px rgb(0 0 0 / 12%) !important; background: var(--color-bg-default) !important; transform: translateY(-4px) !important; } .gallery.notion-collection-card .notion-property__title { align-items: center !important; justify-content: center !important; padding-bottom: 0 !important; margin-top: 10px !important; margin-bottom: 0px !important; } .notion-collection-gallery>.notion-collection-card { padding-bottom: 12px !important; } .gallery .notion-property__title .notion-property__title__icon-wrapper { display: none !important; } .gallery .notion-collection-card__content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; margin-bottom: 0px !important; opacity: 0.6 !important; padding-inline-start: 0px !important; } .notion-collection-card__cover img { margin: 0 !important; } .notion-collection-table__head-cell.title { text-align: left !important; } .notion-collection-table__cell { padding: 8px !important; } td, th { text-align: left !important; } .notion-collection-table th { border: 0 !important; } .notion-collection-table td, .notion-collection-table th { padding: 8px !important; } .notion-collection-table td { border-left: 0 !important; border-right: 0 !important; } .notion-collection-table__wrapper { overflow-x: hidden !important; } .notion-collection-table__wrapper { overflow: auto !important; } .notion-search.open .notion-search__wrapper { z-index: 100 !important; } .notion-collection-card.gallery .notion-property__title .notion-semantic-string { white-space: pre-wrap !important; text-align: center !important; font-weight: 600 !important; } .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img, .notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img { height: 190px !important; min-height: 190px !important; } .notion-collection-list__item { padding: 8px !important; } .notion-collection-list__item:hover { background: var(--color-ui-hover-bg) !important; } .notion-search__clear svg { display: none !important; } .notion-search__clear:before { content: 'clear' !important; text-transform: uppercase !important; font-size: 12px !important; font-weight: 500 !important; padding: 5px !important; color: #878683 !important; } .notion-search__wrapper:before { content: url('https://super.so/icon/light/x.svg') !important; display: flex !important; color: white !important; position: absolute !important; left: 50% !important; right: 50% !important; top: 50px !important; cursor: pointer !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column:last-child { text-align: right !important; } .notion-root>.notion-column-list .notion-column-list:last-child { margin-top: 25px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column { position: relative !important; padding: 25px !important; width: 100% !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column div p span span span { z-index: 2 !important; position: relative !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column:last-child .notion-page { display: flex !important; justify-content: flex-end !important; height: auto !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column a { position: absolute !important; height: auto !important; width: 100% !important; top: 0 !important; right: 0 !important; left: 0 !important; border: 0 !important; z-index: 0 !important; padding: 25px !important; padding-top: 60px !important; z-index: 1 !important; border-radius: 20px !important; border: 1px solid var(--color-border-default) !important; transition: var(--transition) !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column .highlighted-color.color-gray { pointer-events: none !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column a:hover { background: var(--color-ui-hover-bg) !important; } p { letter-spacing: -0.2px !important; line-height: 1.6 !important; font-weight: 400 !important; } .notion-heading .notion-heading__anchor { top: -100px !important; } .notion-image img { border-radius: 20px !important; } .notion-column-list:first-child .page-active { background: var(--color-ui-hover-bg) !important; } .notion-column-list:first-child .page-icon-active { filter: grayscale(0%) !important; opacity: 1 !important; } .super-footer { border-top: 1px solid var(--color-border-default) !important; } /* --- ENTFERNT: @media(max-width:1100px) TOC-Ausblendung --- Der LAYOUT-FIX blendet die TOC jetzt bei <=900px aus. --- */ @media all and (max-width: 764px) { .notion-root>.notion-column-list .notion-column-list:last-child { grid-template-columns: 1fr !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column { height: 100px !important; } .super-navbar__item { padding: 12px !important; } .super-navbar__button.super-navbar__menu-open { display: flex !important; } .notion-image.page-width { width: 100% !important; max-width: 100% !important; margin-left: 0px !important; transform: translateX(0%) !important; } .notion-collection-gallery.large { grid-template-columns: 1fr !important; } .notion-navbar__search { right: 15px !important; } .notion-header { left: 0 !important; top: 100px !important; } .notion-header__icon-wrapper { width: 30px !important; height: 30px !important; } .notion-header__icon { width: 30px !important; height: 30px !important; } .notion-header__title { font-size: 32px !important; } /* --- ENTFERNT: nth-child(2){width:100 ...} (ungültige CSS-Einheit) und .notion-column-list{flex-direction:column} — beide vom LAYOUT-FIX abgelöst. --- */ .notion-navbar__search { margin-right: 40px !important; right: 10px !important; } h1.notion-heading { font-size: 2.4rem !important; font-weight: 700 !important; line-height: 1 !important; margin-top: 0.75rem !important; margin-bottom: 10px !important; } h1.notion-heading .notion-semantic-string { line-height: 1.1 !important; } h2.notion-heading { font-size: 1.8rem !important; line-height: 1.2 !important; margin-bottom: 0 !important; } h3.notion-heading { font-size: 1.4rem !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 10px !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column { padding: 10px 20px 0px 20px !important; margin-bottom: 10px !important; } .notion-root>.notion-column-list .notion-column-list:last-child .notion-column a { padding: 45px 20px 20px 20px !important; } .notion-root>.notion-column-list>.notion-column>.notion-image.page-width { width: 100% !important; max-width: 100% !important; } } @media all and (max-width: 764px) { .notion-root>.notion-callout>.notion-callout__content>.notion-text:nth-child(2) p span { display: flex !important; flex-direction: column !important; margin-bottom: 5px !important; } } /* APP ROUTER BUTTON FIX */ .notion-root .notion-text strong .notion-link, .notion-root .notion-text .notion-link strong { padding: var(--cta-padding) !important; border-radius: var(--cta-border-radius) !important; opacity: 1 !important; font-weight: 500 !important; display: inline-flex !important; justify-content: center !important; transition: var(--transition) !important; background: var(--cta-color-bg) !important; color: var(--cta-color-text) !important; margin: -2px !important; text-decoration: none!important; } .notion-root .notion-text strong .notion-link:hover, .notion-root .notion-text .notion-link strong:hover { opacity: .7 !important; } .notion-quote.bg-gray, .notion-quote.bg-brown, .notion-quote.bg-orange, .notion-quote.bg-yellow, .notion-quote.bg-green, .notion-quote.bg-blue, .notion-quote.bg-purple, .notion-quote.bg-red, .notion-quote.bg-pink { border: none !important; } .static-tweet-body { font: inherit !important; } .static-tweet { --link-color: var(--color-primary) !important; } .notion-collection-card__content .notion-property__select { flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; } .notion-collection-card__property { justify-content: center !important; } .notion-collection-card__property-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Sidebar */ .super-navigation-menu__item, .super-navigation-menu__list-header { border-radius: 12px!important; } .super-navigation-menu__items .super-navigation-menu__list .super-navigation-menu__list-header{ box-shadow:0px 4px 6px -5px #666666; } .super-navigation-menu__items .super-navigation-menu__list a{ margin-bottom:5px; } .super-navigation-menu__item svg:first-child:not(.super-navigation-menu__list .super-navigation-menu__item > svg:first-child), .super-navigation-menu__list-header svg:first-child { width: 24px!important; height: 24px!important; background: var(--color-primary)!important; padding: 5px!important; display: flex!important; justify-content: center!important; border-radius: 7px!important; stroke: white!important; margin: 0!important; } .super-navigation-menu__list .super-navigation-menu__item svg { opacity: .7!important; } .super-navigation-menu__list-items .super-navigation-menu__item { align-items: center!important; } .super-navigation-menu__list-items .super-navigation-menu__item svg { margin-top: 0px!important; } .super-search-input { border-radius: 7px!important; padding: 4px 8px!important; } /* ===================================================================== === SITE-ANPASSUNGEN === Eigene Regeln. Stehen bewusst NACH dem Theme, damit sie es per Kaskade überschreiben. ===================================================================== */ /* --- Artikel → Modul Breadcrumb --- Wird vom externen script.js als erstes Kind von
eingefügt (die Navbar ist deaktiviert). Sitzt damit oben im Content-Bereich, etwa auf Höhe der Such-Leiste in der Sidebar. Gleiche max-width und gleiches padding-left wie .notion-header__content (siehe Kommentar dort) -> Breadcrumb-Link, Titel UND Artikel-Body stehen auf jeder Viewport-Breite an derselben x-Position. Werte (1232 / 28) deshalb bewusst hardcoded statt über --layout-max-width / --padding-left. >>> Vertikale Position über padding-top (60px) feinjustieren. */ .article-crumb { box-sizing: border-box; width: 100%; max-width: 1232px; margin: 0 auto; padding: 60px 28px 8px 28px; } @media (max-width: 764px) { .article-crumb { padding-left: var(--padding-left-mobile); padding-right: var(--padding-right-mobile); padding-top: 24px; } } .article-crumb a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--color-text-default); white-space: nowrap; transition: opacity .15s ease; } .article-crumb a:hover { opacity: .6; } /* --- Property-Block auf Artikelseiten ausblenden --- Bleibt per display:none im DOM, damit das Breadcrumb-Script die Modul-Property weiterhin auslesen kann. Mehrere Selektoren bewusst behalten — Super hat den Wrapper irgendwann von .notion-page__properties-layout auf .notion-page__properties umbenannt (Stand der gespeicherten Artikel-HTML). Beide Varianten + Collection / Detail-Pendant stehen drin, damit der Block nicht wieder durchschlägt, falls Super den Namen erneut anpasst. */ .notion-page__properties, .notion-page__properties-layout, .notion-collection-page__properties, .notion-page__details { display: none !important; } /* --- "Link to Page"-Blöcke als Karten (Drawer-Style) --- */ .notion-page { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 20px !important; margin: 4px 0 !important; background-color: var(--fg-color-0, rgba(0,0,0,0.04)) !important; border: 1.5px solid var(--fg-color-1, rgba(0,0,0,0.08)) !important; border-left: 4px solid var(--fg-color-3, #555) !important; border-radius: 8px !important; text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } .notion-page:hover { background-color: var(--fg-color-1, rgba(0,0,0,0.07)) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important; } .notion-page__icon { display: none !important; } .notion-page__title { font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } /* --- DB-Listenansicht als Karten (gleiche Optik wie der Drawer-Style) --- ERSTE FASSUNG. Die genaue Listen-DOM von Super kann abweichen — gegen eine echte Modulseite in Listenansicht prüfen und ggf. Padding bzw. Innenabstände der Titel-/Property-Zellen nachjustieren. */ .notion-collection-list { border-top: 0 !important; } .notion-collection-list__item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 20px !important; margin: 4px 0 !important; background-color: var(--fg-color-0, rgba(0,0,0,0.04)) !important; border: 1.5px solid var(--fg-color-1, rgba(0,0,0,0.08)) !important; border-left: 4px solid var(--fg-color-3, #555) !important; border-radius: 8px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } .notion-collection-list__item:hover { background-color: var(--fg-color-1, rgba(0,0,0,0.07)) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important; } /* Seiten-Icon in der Listenansicht ausblenden. Mehrere Selektoren, alle auf .notion-collection-list__item begrenzt, damit nichts außerhalb der Liste betroffen ist. Gegen die echte Listen-DOM prüfen — bleibt das Icon stehen, Klasse durchgeben. */ .notion-collection-list__item .notion-page__icon, .notion-collection-list__item .notion-record-icon, .notion-collection-list__item .notion-property__title svg:first-child, .notion-collection-list__item .notion-property__title img { display: none !important; } /* --- Direkte Block-Kinder von .notion-root.max-width einrücken --- Das THEME setzt .notion-root { padding: 0 !important } (oben Zeile ~31). Bei Artikeln gleicht der LAYOUT-FIX das per article-column-padding (28px) wieder aus, sodass der Body etwas Luft zum Sidebar-Rand hat. Modul-/ Root-Seiten haben aber oft keinen .notion-column-list — H2-Überschriften und Collection-Container hängen direkt unter .notion-root.max-width und säßen sonst bündig am Sidebar-Rand. Selektor bewusst als universal-not gebaut statt als explizite Liste, damit AUCH künftig hinzugefügte Block-Typen (Texte, Callouts, Bilder, Toggles, weitere Heading-Levels) automatisch eingerückt werden — ohne diese Regel nachpflegen zu müssen. Ausschlüsse: - .notion-column-list → Artikel-Wrapper; Layout vom LAYOUT-FIX. - .notion-page__properties* / .notion-page__details → Property-Wrapper; sind display:none. - .notion-page → Link-to-Page-Karten; haben eigenes Karten-Padding, das hier nicht überschrieben werden soll. Hinweis: Padding insettet den Block-Inhalt, nicht die Block-Aussenkante. Reine Text-Blöcke (Heading, Text) verhalten sich damit visuell wie erwartet. Blöcke mit sichtbarem Rand/Hintergrund (Callout, Quote) würden hier nur ihren Inhalt einrücken, nicht ihre Kante — falls so ein Block später als direktes Root-Kind auftaucht und das stört, separat per margin oder zusätzlichem Selektor behandeln. 28px = exakt der Inset des Artikel-Bodys (LAYOUT-FIX column-padding). */ .notion-root.max-width > *:not(.notion-column-list):not(.notion-page__properties):not(.notion-page__properties-layout):not(.notion-page__details):not(.notion-collection-page__properties):not(.notion-page) { padding-left: 28px !important; padding-right: 28px !important; } /* --- Native Notion-Kopfzeile (Icon + Titel) auf Artikeln zeigen --- Das Theme blendet .notion-header aus; hier wieder einblenden. Die Titel-Regeln sind 1:1 wie zuvor übernommen — einige Properties werden vom Theme via !important überdeckt und tragen daher nichts bei; bewusst so belassen, damit die Optik exakt gleich bleibt. */ .notion-header.page, .notion-header { display: block !important; } .notion-header__title { font-size: 2.5rem; font-weight: 700; margin: 0 0 24px 0; line-height: 1.2; } .notion-header__title-wrapper { display: flex; align-items: center; gap: 12px; } /* --- Artikeltitel auf die Artikel-Spalte ausrichten --- Der Titel sass vorher in einer Box mit max-width=--layout-max-width (1400) und padding-left=--padding-left (96). Der Body sitzt aber in .notion-column-list mit max-width=1300, darin die Artikel-Spalte (max 960) + gap (32) + TOC (240) = 1232 effektive Breite, per justify-content:center zentriert, mit padding-left=28 auf der Spalte. Zwei unterschiedliche max-width-Werte = zwei unterschiedliche Zentrierungs-Tempi -> auf engeren Viewports driftete der Titel nach rechts vom Body weg. Lösung: Title-Container mit denselben Eckwerten konfigurieren wie die effektive Artikel-Spalte: max-width = 1232px (= 960 + 32 + 240, art-col + gap + TOC) padding-left = 28px (= LAYOUT-FIX article-column padding) Dann zentriert die Header-Box auf jeder Viewport-Breite identisch zum Body -> Titel + Body deckungsgleich, kein Drift mehr. Hinweis: 1232 / 28 sind aus dem LAYOUT-FIX abgeleitet. Wer dort an Artikel-Spalten-max-width, TOC-Breite, Gap oder Spalten-Padding dreht, muss diese Werte hier mitziehen. */ .notion-header__content.max-width { max-width: 1232px !important; padding-left: 28px !important; padding-right: 28px !important; margin: 0 auto !important; box-sizing: border-box !important; } .notion-header__content { padding-left: 28px !important; padding-right: 28px !important; } @media (max-width: 764px) { .notion-header__content { padding-left: var(--padding-left-mobile) !important; padding-right: var(--padding-right-mobile) !important; } } /* --- Titel-Ausrichtung: Header-Content auf beide Selektoren erzwingen --- Super's super.css setzt padding-left: var(--padding-left) (96px) auf dem Zwei-Klassen-Selektor .notion-header__content.max-width — höhere Spezifität als unser .notion-header__content (ein Klasse). Deshalb driftet der Titel nach rechts weg. Fix: gleichen Wert UND margin:0 auto explizit auf dem spezifischeren Selektor erzwingen, exakt wie bei .article-crumb. */ .notion-header__content.max-width { max-width: 1232px !important; padding-left: 28px !important; padding-right: 28px !important; margin: 0 auto !important; box-sizing: border-box !important; } @media (max-width: 764px) { .notion-header__content.max-width { padding-left: var(--padding-left-mobile) !important; padding-right: var(--padding-right-mobile) !important; } } /* --- Sidebar (Super-Navigation) kompakter --- Schrift so groß wie das TOC rechts (15px), Sidebar etwas schmaler und die Menüzeilen rechts straffer, damit die Pfeile näher am Rand sitzen. --sidebar-width wird von Super-Core gesetzt; hier überschrieben, damit Sidebar UND Content-Versatz konsistent schmaler werden. */ :root { --sidebar-width: 280px !important; /* vorher 299px */ --layout-max-width: 1232px !important; /* vorher 900px — Artikel + Titel breiter, ohne dass jede Seite auf Full-Width muss */ } .super-navigation-menu__item-title { font-size: 14px !important; } .super-search-input { font-size: 13px !important; } .super-navigation-menu__list-header, .super-navigation-menu__item { padding-right: 6px !important; } /* --- Navbar komplett ausblenden --- Super rendert die Navbar mit der Klasse .hidden, sobald sie in den Einstellungen deaktiviert ist (-> .super-navbar.hidden{display:none}). Der THEME-Block weiter oben erzwingt sie aber per .super-navbar{display:flex !important} wieder sichtbar. Diese spezifischere Regel (.super-navbar.hidden) gewinnt und blendet die Navbar endgültig aus — damit verschwindet auch das Navbar-Logo. */ .super-navbar.hidden { display: none !important; } /* --- Sidebar-Logo / Seitentitel ausblenden --- Entfernt nur den Logo-Text-Link. Der Theme-Umschalter (Sonne) bleibt erhalten und rückt nach rechts oben. So ist die Such-Leiste das erste prominente Element der Sidebar. >>> Soll auch der Umschalter weg, .super-sidebar__logo-wrapper komplett auf display:none setzen. */ .super-sidebar__logo { display: none !important; } .super-sidebar__logo-wrapper { justify-content: flex-end !important; } /* --- TOC-Spalte: Navbar-Höhe nicht mehr abziehen --- Die rechte Spalte klebte per top:var(--navbar-height) unter der (jetzt entfernten) Navbar und hatte dadurch einen 56px-Phantomversatz. Ohne Navbar nur noch ein kleiner fester Abstand nach oben. */ .notion-root > .notion-column-list > .notion-column:nth-child(2) { top: 24px !important; height: calc(100vh - 24px) !important; } /* --- Sidebar-Menü: Pillen mit dezenter Grund-Fläche --- Bisher hatten die Einträge nur beim Hover eine graue Pille. Jetzt eine hellere Standard-Fläche, damit jedes Modul auch ohne Hover sichtbar ist; Hover wird etwas dunkler für klares Feedback. Grau als rgba- Overlay, damit es in Light- UND Dark-Mode funktioniert. Die Pillenform (border-radius:12px) kommt aus der Sidebar-Regel weiter oben. */ .super-sidebar .super-navigation-menu__list-header { background: rgba(127, 127, 127, 0.07) !important; /* list title pill */ } .super-sidebar .super-navigation-menu__item { background: rgba(127, 127, 127, 0.05) !important; /* item pill */ } .super-sidebar .super-navigation-menu__list-header:hover, .super-sidebar .super-navigation-menu__item:hover, .super-sidebar .super-navigation-menu__item.active { background: rgba(127, 127, 127, 0.15) !important; } #block-36743843e4d080c7a5b0dc0a7aa312e1, #block-36743843e4d08006938fee779dde8885, #block-36743843e4d080a5858ac7d9946708fa { font-family: 'Caveat', cursive; font-size: 2rem !important;; } h2.notion-heading { font-family: 'Lora'; font-size: 2.5rem !important;; }