.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; /* kleiner Abstand zwischen Select und Button */ margin-bottom: 1.5rem; } /* Sprach-Wrapper links fixieren (kommt aus language.inc.php) */ #language-wrapper { flex: 0 0 auto; } /* Button rechts „kleben lassen“ */ .new-db-button-wrapper { flex: 0 0 auto; margin-left: auto; /* schiebt den Button ganz nach rechts */ } /* === Language Select (Select2) – Darkmode & compact === */ /* Base container in top bar */ #language-wrapper .select2-container { font-size: 0.85rem; max-width: 150px; width: 150px !important; } /* Closed box (selection) */ #language-wrapper .select2-container--default .select2-selection--single { /* same look & feel as .feature-block */ background: rgba(255,255,255,0.03); border: 1px solid #2f3441; color: #f5f5f5; border-radius: 8px; height: 32px; display: flex; align-items: center; padding: 0 6px; } /* Text inside the closed box */ #language-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f5f5f5; padding-left: 0; line-height: 1.2; } /* Arrow on the right */ #language-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } #language-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #f5f5f5 transparent transparent transparent; } /* === Dropdown (open state) === */ /* no #language-wrapper here – dropdown is appended to */ .select2-container--default .select2-dropdown { background: #006277; border: 1px solid #2f3441; color: #f5f5f5; border-radius: 8px; overflow: hidden; } /* Options list */ .select2-container--default .select2-results__options { max-height: 240px; background: transparent; } /* Individual options */ .select2-container--default .select2-results__option { color: #f5f5f5; font-size: 0.85rem; padding: 4px 8px; } /* Hover / keyboard highlight */ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: rgba(255,255,255,0.08); /* slightly brighter than base */ color: #ffffff; } /* Selected language in dropdown */ .select2-container--default .select2-results__option--selected { background: rgba(255,255,255,0.06); color: #f5f5f5; } /* Scrollbar styling (optional, WebKit only) */ .select2-container--default .select2-results__options::-webkit-scrollbar { width: 6px; } .select2-container--default .select2-results__options::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); } .select2-container--default .select2-results__options::-webkit-scrollbar-thumb { background: #2f3441; border-radius: 3px; } .select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover { background: #3a3f4c; } /* Flags in list and in selection */ .select2-container--default .select2-results__option img, .select2-container--default .select2-selection__rendered img { width: 18px; height: auto; margin-right: 6px; vertical-align: middle; } /* Wrapper alignment in the top bar */ #language-wrapper { flex: 0 0 auto; display: flex; align-items: center; } /* Small padding on mobile so it doesn't stick to the edge */ @media (max-width: 600px) { #language-wrapper { padding-left: 0.25rem; } }