/** * Global styling for native on a regular page background. Light + dark. * 2. Special — — applies everywhere except login and the action bar * ───────────────────────────────────────────────────────────────────── */ body:not(.login) select:not(#changelist-actions select):not([multiple]) { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.25rem 1.25rem; background-color: rgb(255 255 255); color: rgb(17 24 39); border: 1px solid rgb(209 213 219); border-radius: 0.375rem; padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; min-height: 2.25rem; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } body:not(.login) select:not(#changelist-actions select):not([multiple]):hover { border-color: rgb(156 163 175); } body:not(.login) select:not(#changelist-actions select):not([multiple]):focus { outline: none; border-color: rgb(59 130 246); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } /* Multi-select — keep native list look but readable in dark mode */ body:not(.login) select[multiple] { background-color: rgb(255 255 255); color: rgb(17 24 39); border: 1px solid rgb(209 213 219); border-radius: 0.375rem; font-size: 0.875rem; } /* Dark mode (Unfold toggles `.dark` on ) */ .dark body:not(.login) select:not(#changelist-actions select):not([multiple]), html.dark body:not(.login) select:not(#changelist-actions select):not([multiple]) { background-color: rgb(55 65 81); border-color: rgb(75 85 99); color: rgb(243 244 246); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); } .dark body:not(.login) select:not(#changelist-actions select):not([multiple]):hover, html.dark body:not(.login) select:not(#changelist-actions select):not([multiple]):hover { border-color: rgb(107 114 128); } .dark body:not(.login) select:not(#changelist-actions select):not([multiple]):focus, html.dark body:not(.login) select:not(#changelist-actions select):not([multiple]):focus { border-color: rgb(96 165 250); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25); } .dark body:not(.login) select[multiple], html.dark body:not(.login) select[multiple] { background-color: rgb(55 65 81); border-color: rgb(75 85 99); color: rgb(243 244 246); } /* Native dropdown popup options — readable bg/text in both themes. * Browsers ignore custom option styling on Linux/GTK, but on macOS/Win * this gives consistent contrast. */ body:not(.login) select option { background-color: rgb(255 255 255); color: rgb(17 24 39); } .dark body:not(.login) select option, html.dark body:not(.login) select option { background-color: rgb(31 41 55); color: rgb(243 244 246); } /* ───────────────────────────────────────────────────────────────────── * 2. Changelist action bar (#changelist-actions) — primary-coloured strip * ───────────────────────────────────────────────────────────────────── */ #changelist-actions select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.1rem 1.1rem; background-color: rgba(255, 255, 255, 0.15); color: rgb(255 255 255); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.375rem; padding: 0.4rem 1.9rem 0.4rem 0.6rem; font-size: 0.875rem; line-height: 1.25rem; min-height: 2rem; cursor: pointer; } #changelist-actions select:hover { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); } #changelist-actions select:focus { outline: none; background-color: rgba(255, 255, 255, 0.25); border-color: rgb(255 255 255); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } #changelist-actions select option { background-color: rgb(31 41 55); color: rgb(243 244 246); }