@media (prefers-color-scheme: dark) { :root .admin-interface { --primary: #79aec8; --secondary: #417690; --accent: #f5dd5d; --primary-fg: #fff; --body-fg: #333; --body-bg: #fff; --body-quiet-color: #666; --body-loud-color: #000; --header-color: #ffc; --header-branding-color: var(--accent); --header-bg: var(--secondary); --header-link-color: var(--primary-fg); --breadcrumbs-fg: #c4dce8; --breadcrumbs-link-fg: var(--body-bg); --breadcrumbs-bg: var(--primary); --link-fg: #447e9b; --link-hover-color: #036; --link-selected-fg: #5b80b2; --hairline-color: #e8e8e8; --border-color: #ccc; --error-fg: #ba2121; --message-success-bg: #dfd; --message-warning-bg: #ffc; --message-error-bg: #ffefef; --darkened-bg: #f8f8f8; --selected-bg: #e4e4e4; --selected-row: #ffc; --button-fg: #fff; --button-bg: var(--primary); --button-hover-bg: #609ab6; --default-button-bg: var(--secondary); --default-button-hover-bg: #205067; --close-button-bg: #888; --close-button-hover-bg: #747474; --delete-button-bg: #ba2121; --delete-button-hover-bg: #a41515; --object-tools-fg: var(--button-fg); --object-tools-bg: var(--close-button-bg); --object-tools-hover-bg: var(--close-button-hover-bg); } } :root .admin-interface { --admin-interface-title-color: {{ theme.title_color }}; --admin-interface-logo-color: {{ theme.logo_color }}; --admin-interface-env-color: {{ theme.env_color }}; --admin-interface-header-background-color: {{ theme.css_header_background_color }}; --admin-interface-header-text-color: {{ theme.css_header_text_color }}; --admin-interface-header-link-color: {{ theme.css_header_link_color }}; --admin-interface-header-link_hover-color: {{ theme.css_header_link_hover_color }}; --admin-interface-module-background-color: {{ theme.css_module_background_color }}; --admin-interface-module-background-selected-color: {{ theme.css_module_background_selected_color }}; --admin-interface-module-text-color: {{ theme.css_module_text_color }}; --admin-interface-module-link-color: {{ theme.css_module_link_color }}; --admin-interface-module-link-selected-color: {{ theme.css_module_link_selected_color }}; --admin-interface-module-link-hover-color: {{ theme.css_module_link_hover_color }}; --admin-interface-generic-link-color: {{ theme.css_generic_link_color }}; --admin-interface-generic-link-hover-color: {{ theme.css_generic_link_hover_color }}; --admin-interface-save-button-background-color: {{ theme.css_save_button_background_color }}; --admin-interface-save-button-background-hover-color: {{ theme.css_save_button_background_hover_color }}; --admin-interface-save-button-text-color: {{ theme.css_save_button_text_color }}; --admin-interface-delete-button-background-color: {{ theme.css_delete_button_background_color }}; --admin-interface-delete-button-background-hover-color: {{ theme.css_delete_button_background_hover_color }}; --admin-interface-delete-button-text-color: {{ theme.css_delete_button_text_color }}; --admin-interface-related-modal-background-color: {{ theme.related_modal_background_color }}; --admin-interface-related-modal-background-opacity: {{ theme.related_modal_background_opacity }}; } .admin-interface #header { background: {{ theme.css_header_background_color }}; color: {{ theme.css_header_text_color }}; } .admin-interface #header + #main { {% if theme.css_header_background_color != theme.css_module_background_color %} border-top: 10px solid {{ theme.css_module_background_color }}; {% endif %} } .admin-interface .environment-label { } .admin-interface .environment-label::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: {{ theme.env_color }}; border-radius: 100%; margin-right: 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .admin-interface .environment-label::after { content: "{{ theme.env_name }} - "; } @media (max-width:1024px) { .admin-interface .environment-label::after { content: "{{ theme.env_name }}"; } } .admin-interface .language-chooser { display: inline-block; position: absolute; top: 15px; right: 15px; z-index: 10; } @media (min-width:768px) { .admin-interface .language-chooser { right: 30px; } } @media (min-width:1024px) { .admin-interface .language-chooser { position: static; float: right; margin-left: 20px; } } .admin-interface .language-chooser-hidden-form { display: none; } .admin-interface .language-chooser-select-form { display: inline-block; } .admin-interface #branding h1 { color: {{ theme.title_color }}; } .admin-interface #branding h1 .logo.default { background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 104px 36px; background-image: url("data:image/svg+xml;utf8,"); } .admin-interface #header #user-tools a { color:{{ theme.css_header_link_color }}; } .admin-interface #header #user-tools a:hover, .admin-interface #header #user-tools a:active { color:{{ theme.css_header_link_hover_color }}; border-bottom-color:rgba(255, 255, 255, 0.5); } .admin-interface #nav-sidebar .current-app .section:link, .admin-interface #nav-sidebar .current-app .section:visited { color: {{ theme.css_module_link_selected_color }}; font-weight: normal; } .admin-interface #nav-sidebar .current-app .section:focus, .admin-interface #nav-sidebar .current-app .section:hover { color: {{ theme.css_module_link_hover_color }}; } .admin-interface #nav-sidebar .current-model { background: {{ theme.css_module_background_selected_color }}; } .admin-interface #changelist table tbody tr.selected { background-color: {{ theme.css_module_background_selected_color }}; } .admin-interface .module h2, .admin-interface .module caption, .admin-interface .module.filtered h2 { background:{{ theme.css_module_background_color }}; color:{{ theme.css_module_text_color }}; } .admin-interface .module a.section:link, .admin-interface .module a.section:visited { color:{{ theme.css_module_link_color }}; } .admin-interface .module a.section:active, .admin-interface .module a.section:hover { color:{{ theme.css_module_link_hover_color }}; } .admin-interface div.breadcrumbs { background:{{ theme.css_module_background_color }}; color:{{ theme.css_module_text_color }}; } .admin-interface div.breadcrumbs a { color:{{ theme.css_module_link_color }}; } .admin-interface div.breadcrumbs a:active, .admin-interface div.breadcrumbs a:focus, .admin-interface div.breadcrumbs a:hover { color:{{ theme.css_module_link_hover_color }}; } .admin-interface fieldset.collapse.collapsed a.collapse-toggle { color:{{ theme.css_module_link_color }}; } .admin-interface fieldset.collapse.collapsed a.collapse-toggle:hover, .admin-interface fieldset.collapse.collapsed a.collapse-toggle:active { color:{{ theme.css_module_link_hover_color }}; } .admin-interface fieldset.collapse a.collapse-toggle { color:{{ theme.css_module_link_color }}; } .admin-interface fieldset.collapse a.collapse-toggle:hover, .admin-interface fieldset.collapse a.collapse-toggle:active { color:{{ theme.css_module_link_hover_color }}; } .admin-interface .inline-group h2 { background:{{ theme.css_module_background_color }}; color:{{ theme.css_module_text_color }}; } .admin-interface .selector .selector-chosen h2 { border-color:{{ theme.css_module_background_color }}; background:{{ theme.css_module_background_color }}; color:{{ theme.css_module_text_color }}; } .admin-interface .selector .selector-available h2, .admin-interface .selector .selector-chosen h2 { {% if theme.css_module_rounded_corners %} border-bottom-left-radius:0; border-bottom-right-radius:0; {% endif %} } .admin-interface .selector a.selector-chooseall:focus, .admin-interface .selector a.selector-chooseall:hover, .admin-interface .selector a.selector-clearall:focus, .admin-interface .selector a.selector-clearall:hover { color:{{ theme.css_generic_link_hover_color }}; } .admin-interface a:link, .admin-interface a:visited { color:{{ theme.css_generic_link_color }}; } .admin-interface a:hover { color:{{ theme.css_generic_link_hover_color }}; } .admin-interface thead th a, .admin-interface thead th a:link, .admin-interface thead th a:visited, .admin-interface thead th a:focus, .admin-interface thead th a:hover { color: #666666; } .admin-interface .button, .admin-interface input[type=submit], .admin-interface input[type=button], .admin-interface .submit-row input, .admin-interface a.button { background:{{ theme.css_save_button_background_color }}; color:{{ theme.css_save_button_text_color }}; } .admin-interface .button:active, .admin-interface .button:focus, .admin-interface .button:hover, .admin-interface input[type=submit]:active, .admin-interface input[type=submit]:focus, .admin-interface input[type=submit]:hover, .admin-interface input[type=button]:active, .admin-interface input[type=button]:focus, .admin-interface input[type=button]:hover { background:{{ theme.css_save_button_background_hover_color }}; color:{{ theme.css_save_button_text_color }}; outline: none; } .admin-interface .button.default, .admin-interface input[type=submit].default, .admin-interface .submit-row input.default { background:{{ theme.css_save_button_background_color }}; color:{{ theme.css_save_button_text_color }}; outline: none; } .admin-interface .button.default:active, .admin-interface .button.default:focus, .admin-interface .button.default:hover, .admin-interface input[type=submit].default:active, .admin-interface input[type=submit].default:focus, .admin-interface input[type=submit].default:hover, .admin-interface.delete-confirmation form .cancel-link:hover { background:{{ theme.css_save_button_background_hover_color }}; color:{{ theme.css_save_button_text_color }}; outline: none; } .admin-interface .submit-row a.deletelink:link, .admin-interface .submit-row a.deletelink:visited, .admin-interface.delete-confirmation form input[type="submit"] { background:{{ theme.css_delete_button_background_color }}; color:{{ theme.css_delete_button_text_color }}; } .admin-interface .submit-row a.deletelink:hover, .admin-interface.delete-confirmation form input[type="submit"]:hover { background:{{ theme.css_delete_button_background_hover_color }}; color:{{ theme.css_delete_button_text_color }}; } .admin-interface .paginator a, .admin-interface .paginator a:link, .admin-interface .paginator a:visited, .admin-interface .paginator .this-page { {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %} } .admin-interface .paginator a, .admin-interface .paginator a:link, .admin-interface .paginator a:visited { background-color:#FFFFFF; color:{{ theme.css_generic_link_color }}; } .admin-interface .paginator a:hover, .admin-interface .paginator a:active { background-color:#F8F8F8; color:{{ theme.css_generic_link_hover_color }}; } .admin-interface .paginator .this-page { background-color:{{ theme.css_module_background_color }}; color:{{ theme.css_module_link_color }}; } .admin-interface .paginator a.showall, .admin-interface .paginator a.showall:link, .admin-interface .paginator a.showall:visited { color:{{ theme.css_generic_link_color }}; } .admin-interface .paginator a.showall:hover, .admin-interface .paginator a.showall:active { color:{{ theme.css_generic_link_hover_color }}; } /* list-filter sticky */ {% if theme.list_filter_sticky %} @media (min-width: 768px) { .admin-interface .module.filtered #changelist-filter { position: sticky; top: 40px; float: right; z-index: 30; } /* feature not available for django < 3.1.2 */ .admin-interface .module.filtered #toolbar + #changelist-filter { position: absolute; top: 0px; z-index: 30; } } {% endif %} .admin-interface .module.filtered #changelist-filter { {% if theme.css_module_rounded_corners %} border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; {% endif %} } .admin-interface .module.filtered #changelist-filter #changelist-filter-clear a:focus, .admin-interface .module.filtered #changelist-filter #changelist-filter-clear a:hover { color: #666; text-decoration: none; } .admin-interface .module.filtered #changelist-filter li a:focus, .admin-interface .module.filtered #changelist-filter li a:hover { color: #666; text-decoration: none; } .admin-interface .module.filtered #changelist-filter li.selected a, .admin-interface .module.filtered #changelist-filter li.selected a:link, .admin-interface .module.filtered #changelist-filter li.selected a:visited, .admin-interface .module.filtered #changelist-filter li.selected a:focus, .admin-interface .module.filtered #changelist-filter li.selected a:hover { /* color: #666; */ color: {{ theme.css_generic_link_hover_color }}; } /* begin fix issue #11 - Inline border bottom should not be rounded */ .admin-interface .module h2, .admin-interface.dashboard .module caption, .admin-interface #nav-sidebar .module th, .admin-interface #nav-sidebar .module caption, .admin-interface .module.filtered h2 { {% if theme.css_module_rounded_corners %} border-radius:4px; {% endif %} } .admin-interface .inline-group h2 { {% if theme.css_module_rounded_corners %} border-bottom-left-radius:0; border-bottom-right-radius:0; {% endif %} } /* end fix */ .admin-interface #content-related { {% if theme.css_module_rounded_corners %} border-radius:4px; {% endif %} } .admin-interface .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { background-color: {{ theme.css_module_background_color }}; color: {{ theme.css_module_text_color }}; } .admin-interface #toggle-nav-sidebar { {% if theme.css_module_rounded_corners %} border-top-right-radius: 4px; border-bottom-right-radius: 4px; {% endif %} color: {{ theme.css_generic_link_color }}; } .admin-interface #toggle-nav-sidebar:focus, .admin-interface #toggle-nav-sidebar:hover, .admin-interface #toggle-nav-sidebar:active { color: {{ theme.css_generic_link_hover_color }}; } .admin-interface .calendar td.selected a, .admin-interface .calendar td a:active, .admin-interface .calendar td a:focus, .admin-interface .calendar td a:hover, .admin-interface .timelist a:active, .admin-interface .timelist a:focus, .admin-interface .timelist a:hover { background: {{ theme.css_module_background_color }}; }