und ist "position: sticky" statt fixed, damit sie ohne Anpassungen an .main/.sidebar (main.css) direkt unterhalb des fixed Headers einrastet, sobald man scrollt. */ .open-tabs-bar { position: sticky; top: var(--header-height); z-index: 900; background: var(--header-bg); border-bottom: 1px solid var(--header-border); } .open-tabs-scroll { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px var(--spacing-md); scrollbar-width: thin; } /* Gleiches responsives Seiten-Padding wie .header (main.css) - sonst wandert der erste Tab ab 576px relativ zum Sidebar-Toggle/Logo nach links, da der Header dort auf --spacing-lg wechselt. */ @media (min-width: 576px) { .open-tabs-scroll { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } } .open-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 220px; padding: 6px 12px 6px 12px; border-radius: var(--radius-md); /* Gegen --header-bg gemischt statt gegen transparent: ergibt eine blickdichte Farbe, damit sich ueberlappende Tabs (.grouped-with- previous) nicht durchsichtig ineinander mischen. */ background: color-mix(in srgb, var(--default-color) 5%, var(--header-bg) 95%); white-space: nowrap; transition: background var(--transition-fast); /* Ring in Leisten-Hintergrundfarbe (statt border, damit sich die Tab-Groesse nicht aendert) - trennt bei den leicht ueberlappenden Tabs derselben App (.grouped-with-previous) die Kanten sauber voneinander, aehnlich gestapelten Avatar-Chips. */ box-shadow: 0 0 0 2px var(--header-bg); } .open-tab.active { z-index: 2; } /* Muss ueber .active liegen (nicht gleichauf) - sonst gewinnt bei gleichem z-index die DOM-Reihenfolge, und ein gehoverter Tab links vom aktiven (meist rechtesten) Tab derselben Familie kommt trotz Hover nie in den Vordergrund. */ .open-tab:hover { z-index: 3; } /* Tabs derselben App ruecken ab der zweiten Instanz leicht uebereinander (siehe grouped_with_previous im open_tabs-Context-Processor), statt mit dem normalen .open-tabs-scroll-Abstand (gap: 4px) nebeneinander zu stehen. Ueberlappen darf dabei aber nur die Tab-Flaeche selbst, nie den Text des linken Nachbarn: die effektive Ueberlappungstiefe (margin-left minus dem 4px-Gap) bleibt daher kleiner als dessen rechtes Padding (12px, siehe .open-tab) - der verbleibende Puffer sorgt fuer sichtbaren Abstand zwischen Textende und dem ueberlappenden Nachbarn. */ .open-tab.grouped-with-previous { margin-left: -10px; } /* Grenze zu einer anderen App-Familie (open_tabs.html) - zusaetzlich zum normalen .open-tabs-scroll-Abstand (gap: 4px), damit Familien optisch klarer voneinander getrennt sind als die ueberlappenden Tabs innerhalb einer Familie. */ .open-tab.new-family { margin-left: 12px; } .open-tab:hover { background: color-mix(in srgb, var(--default-color) 10%, var(--header-bg) 90%); } .open-tab.active { background: color-mix(in srgb, var(--accent-color) 15%, var(--header-bg) 85%); } .open-tab-link { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 0.8125rem; color: var(--default-color); } /* Feste Groesse, auch ohne Icon (leerer Span) - damit der Schliessen-Button beim Hovern (siehe unten) immer exakt an derselben Stelle einblendet, unabhaengig davon ob die App ein Icon hinterlegt hat. */ .open-tab-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 14px; height: 14px; font-size: 14px; line-height: 1; } .open-tab-icon svg { width: 14px; height: 14px; } .open-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .open-tab.active .open-tab-link { color: var(--accent-color); font-weight: 500; } /* Schliessen-Button: liegt (absolut positioniert, deckungsgleich mit dem linken Padding von .open-tab) genau auf der Position des Icons und wird erst beim Hovern des Tabs sichtbar - ersetzt dann optisch das Icon (siehe .open-tab:hover .open-tab-icon), statt permanent daneben zu stehen. */ .open-tab-close { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted-color); line-height: 1; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast); } .open-tab:hover .open-tab-close { opacity: 1; visibility: visible; } .open-tab:hover .open-tab-icon { visibility: hidden; } .open-tab-close:hover { background: color-mix(in srgb, var(--danger-color), transparent 85%); color: var(--danger-color); } /* "+"-Tab am Ende der Leiste: oeffnet das Dashboard als Ausgangspunkt fuer die naechste App (siehe open_tabs.html) - bewusst kein OpenAppTabModel- Eintrag, sondern ein fixer Button ausserhalb der Tab-Schleife. */ .open-tab-add { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; margin-left: 2px; border-radius: var(--radius-md); color: var(--muted-color); font-size: 0.875rem; } .open-tab-add:hover { background: color-mix(in srgb, var(--default-color), transparent 90%); color: var(--default-color); } /* new_tab.html: bewusst leere Seite hinter dem "+"-Tab */ .new-tab-empty-state { color: var(--muted-color); padding: var(--spacing-lg) 0; } /* Drag & Drop zum Umsortieren der Tabs (r2.js) */ .open-tab { cursor: grab; } .open-tab.dragging { opacity: 0.4; cursor: grabbing; } /* Seitentitel im Header rechts neben dem Sidebar-Toggle (header.html), ueber RnSoftware.context_processors.page_title fuer alle Nutzer befuellt */ .header-page-title { margin: 0; font-weight: 600; font-size: 1.5rem; line-height: 1.3; color: var(--heading-color); white-space: nowrap; } @media (max-width: 575.98px) { .header-page-title { display: none; } }