innov
/
django1
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Fixed #32018 -- Extracted admin colors into CSS variables. 

Defined all colors used in the admin CSS as variables. Implemented the
following standardizations and accessibility improvements while at it:

- Improved the contrast of text to not use ratios of less than 3:1 anymore.
- Most hover states already used desaturated and darkened colors.
  Changed object tools to follow the same rule instead of showing the
  primary color on hover.

Various places used similar colors; those have been merged with the goal
of reducing the count of CSS variables. Contrasts have been improved in
a few places.

- Many borders used slightly different colors (e.g. #eaeaea vs. #eee)
- Help texts used #999, this has been changed to --body-quiet-color
  (#666) which has a better contrast.

Introduced fast color transitions on links and buttons.
This commit is contained in:
Matthias Kestenholz 2021-01-07 10:07:19 +01:00 committed by GitHub
parent 102d92fc09
commit 0a802233ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 321 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
django/contrib/admin/static/admin/css/autocomplete.css
View File

@ -14,7 +14,7 @@ select.admin-autocomplete {
.select2-container--admin-autocomplete.select2-container--focus .select2-selection, .select2-container--admin-autocomplete.select2-container--focus .select2-selection,
.select2-container--admin-autocomplete.select2-container--open .select2-selection { .select2-container--admin-autocomplete.select2-container--open .select2-selection {
border-color: #999; border-color: var(--body-quiet-color);
min-height: 30px; min-height: 30px;
} }
@ -29,13 +29,13 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-selection--single { .select2-container--admin-autocomplete .select2-selection--single {
background-color: #fff; background-color: var(--body-bg);
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
} }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered { .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
color: #444; color: var(--body-fg);
line-height: 30px; line-height: 30px;
} }
@ -46,7 +46,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder { .select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
color: #999; color: var(--body-quiet-color);
} }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow { .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
@ -95,7 +95,7 @@ select.admin-autocomplete {
.select2-container--admin-autocomplete .select2-selection--multiple { .select2-container--admin-autocomplete .select2-selection--multiple {
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
cursor: text; cursor: text;
} }
@ -115,7 +115,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder { .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder {
color: #999; color: var(--body-quiet-color);
margin-top: 5px; margin-top: 5px;
float: left; float: left;
} }
@ -131,7 +131,7 @@ select.admin-autocomplete {
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice { .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4; background-color: #e4e4e4;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
cursor: default; cursor: default;
float: left; float: left;
@ -141,7 +141,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove { .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove {
color: #999; color: var(--body-quiet-color);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -149,7 +149,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover { .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333; color: var(--body-fg);
} }
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline { .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline {
@ -167,7 +167,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple { .select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple {
border: solid #999 1px; border: solid var(--body-quiet-color) 1px;
outline: 0; outline: 0;
} }
@ -191,7 +191,7 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field { .select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
border: 1px solid #ccc; border: 1px solid var(--border-color);
} }
.select2-container--admin-autocomplete .select2-search--inline .select2-search__field { .select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
@ -205,6 +205,8 @@ select.admin-autocomplete {
.select2-container--admin-autocomplete .select2-results > .select2-results__options { .select2-container--admin-autocomplete .select2-results > .select2-results__options {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
color: var(--body-fg);
background: var(--body-bg);
} }
.select2-container--admin-autocomplete .select2-results__option[role=group] { .select2-container--admin-autocomplete .select2-results__option[role=group] {
@ -212,11 +214,12 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] { .select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] {
color: #999; color: var(--body-quiet-color);
} }
.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] { .select2-container--admin-autocomplete .select2-results__option[aria-selected=true] {
background-color: #ddd; background-color: var(--selected-bg);
color: var(--body-fg);
} }
.select2-container--admin-autocomplete .select2-results__option .select2-results__option { .select2-container--admin-autocomplete .select2-results__option .select2-results__option {
@ -253,8 +256,8 @@ select.admin-autocomplete {
} }
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
background-color: #79aec8; background-color: var(--primary);
color: white; color: var(--body-bg);
} }
.select2-container--admin-autocomplete .select2-results__group { .select2-container--admin-autocomplete .select2-results__group {

214
django/contrib/admin/static/admin/css/base.css
View File

@ -4,6 +4,58 @@
@import url(fonts.css); @import url(fonts.css);
/* VARIABLE DEFINITIONS */
:root {
--primary: #79aec8;
--secondary: #417690;
--accent: #f5dd5d;
--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: #fff;
--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; /* A bit darker than --body-bg */
--selected-bg: #e4e4e4; /* E.g. selected table cells */
--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; /* Previously #bbb, contrast 1.92 */
--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);
}
html, body { html, body {
height: 100%; height: 100%;
} }
@ -13,19 +65,20 @@ body {
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333; color: var(--body-fg);
background: #fff; background: var(--body-bg);
} }
/* LINKS */ /* LINKS */
a:link, a:visited { a:link, a:visited {
color: #447e9b; color: var(--link-fg);
text-decoration: none; text-decoration: none;
transition: color 0.15s, background 0.15s;
} }
a:focus, a:hover { a:focus, a:hover {
color: #036; color: var(--link-hover-color);
} }
a:focus { a:focus {
@ -37,7 +90,7 @@ a img {
} }
a.section:link, a.section:visited { a.section:link, a.section:visited {
color: #fff; color: var(--body-bg);
text-decoration: none; text-decoration: none;
} }
@ -64,7 +117,7 @@ h1 {
margin: 0 0 20px; margin: 0 0 20px;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
color: #666; color: var(--body-quiet-color);
} }
h2 { h2 {
@ -80,7 +133,7 @@ h2.subhead {
h3 { h3 {
font-size: 14px; font-size: 14px;
margin: .8em 0 .3em 0; margin: .8em 0 .3em 0;
color: #666; color: var(--body-quiet-color);
font-weight: bold; font-weight: bold;
} }
@ -93,7 +146,7 @@ h4 {
h5 { h5 {
font-size: 10px; font-size: 10px;
margin: 1.5em 0 .5em 0; margin: 1.5em 0 .5em 0;
color: #666; color: var(--body-quiet-color);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -131,7 +184,7 @@ fieldset {
min-width: 0; min-width: 0;
padding: 0; padding: 0;
border: none; border: none;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
} }
blockquote { blockquote {
@ -144,7 +197,7 @@ blockquote {
code, pre { code, pre {
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: #666; color: var(--body-quiet-color);
font-size: 12px; font-size: 12px;
overflow-x: auto; overflow-x: auto;
} }
@ -161,8 +214,8 @@ code strong {
hr { hr {
clear: both; clear: both;
color: #eee; color: var(--hairline-color);
background-color: #eee; background-color: var(--hairline-color);
height: 1px; height: 1px;
border: none; border: none;
margin: 0; margin: 0;
@ -183,7 +236,7 @@ hr {
.help, p.help, form p.help, div.help, form div.help, div.help li { .help, p.help, form p.help, div.help, form div.help, div.help li {
font-size: 11px; font-size: 11px;
color: #999; color: var(--body-quiet-color);
} }
div.help ul { div.help ul {
@ -199,7 +252,7 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
} }
.quiet, a.quiet:link, a.quiet:visited { .quiet, a.quiet:link, a.quiet:visited {
color: #999; color: var(--body-quiet-color);
font-weight: normal; font-weight: normal;
} }
@ -219,13 +272,13 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
table { table {
border-collapse: collapse; border-collapse: collapse;
border-color: #ccc; border-color: var(--border-color);
} }
td, th { td, th {
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
vertical-align: top; vertical-align: top;
padding: 8px; padding: 8px;
} }
@ -237,37 +290,37 @@ th {
thead th, thead th,
tfoot td { tfoot td {
color: #666; color: var(--body-quiet-color);
padding: 5px 10px; padding: 5px 10px;
font-size: 11px; font-size: 11px;
background: #fff; background: var(--body-bg);
border: none; border: none;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
} }
tfoot td { tfoot td {
border-bottom: none; border-bottom: none;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
} }
thead th.required { thead th.required {
color: #000; color: var(--body-loud-color);
} }
tr.alt { tr.alt {
background: #f6f6f6; background: var(--darkened-bg);
} }
tr:nth-child(odd), .row-form-errors { tr:nth-child(odd), .row-form-errors {
background: #fff; background: var(--body-bg);
} }
tr:nth-child(even), tr:nth-child(even),
tr:nth-child(even) .errorlist, tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors, tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist { tr:nth-child(odd) + .row-form-errors .errorlist {
background: #f9f9f9; background: var(--darkened-bg);
} }
/* SORTABLE TABLES */ /* SORTABLE TABLES */
@ -276,15 +329,15 @@ thead th {
padding: 5px 10px; padding: 5px 10px;
line-height: normal; line-height: normal;
text-transform: uppercase; text-transform: uppercase;
background: #f6f6f6; background: var(--darkened-bg);
} }
thead th a:link, thead th a:visited { thead th a:link, thead th a:visited {
color: #666; color: var(--body-quiet-color);
} }
thead th.sorted { thead th.sorted {
background: #eee; background: var(--selected-bg);
} }
thead th.sorted .text { thead th.sorted .text {
@ -303,7 +356,7 @@ table thead th .text a {
} }
table thead th .text a:focus, table thead th .text a:hover { table thead th .text a:focus, table thead th .text a:hover {
background: #eee; background: var(--selected-bg);
} }
thead th.sorted a.sortremove { thead th.sorted a.sortremove {
@ -350,12 +403,12 @@ table thead th.sorted .sortoptions a.sortremove:after {
left: 3px; left: 3px;
font-weight: 200; font-weight: 200;
font-size: 18px; font-size: 18px;
color: #999; color: var(--body-quiet-color);
} }
table thead th.sorted .sortoptions a.sortremove:focus:after, table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after { table thead th.sorted .sortoptions a.sortremove:hover:after {
color: #447e9b; color: var(--link-fg);
} }
table thead th.sorted .sortoptions a.sortremove:focus, table thead th.sorted .sortoptions a.sortremove:focus,
@ -402,16 +455,18 @@ textarea {
input[type=text], input[type=password], input[type=email], input[type=url], input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField { input[type=number], input[type=tel], textarea, select, .vTextField {
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
padding: 5px 6px; padding: 5px 6px;
margin-top: 0; margin-top: 0;
color: var(--body-fg);
background-color: var(--body-bg);
} }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus,
textarea:focus, select:focus, .vTextField:focus { textarea:focus, select:focus, .vTextField:focus {
border-color: #999; border-color: var(--body-quiet-color);
} }
select { select {
@ -427,12 +482,13 @@ select[multiple] {
/* FORM BUTTONS */ /* FORM BUTTONS */
.button, input[type=submit], input[type=button], .submit-row input, a.button { .button, input[type=submit], input[type=button], .submit-row input, a.button {
background: #79aec8; background: var(--button-bg);
padding: 10px 15px; padding: 10px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
color: #fff; color: var(--button-fg);
cursor: pointer; cursor: pointer;
transition: background 0.15s;
} }
a.button { a.button {
@ -442,7 +498,7 @@ a.button {
.button:active, input[type=submit]:active, input[type=button]:active, .button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus, .button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover { .button:hover, input[type=submit]:hover, input[type=button]:hover {
background: #609ab6; background: var(--button-hover-bg);
} }
.button[disabled], input[type=submit][disabled], input[type=button][disabled] { .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
@ -453,13 +509,13 @@ a.button {
float: right; float: right;
border: none; border: none;
font-weight: 400; font-weight: 400;
background: #417690; background: var(--default-button-bg);
} }
.button.default:active, input[type=submit].default:active, .button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus, .button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover { .button.default:hover, input[type=submit].default:hover {
background: #205067; background: var(--default-button-hover-bg);
} }
.button[disabled].default, .button[disabled].default,
@ -474,7 +530,7 @@ input[type=button][disabled].default {
.module { .module {
border: none; border: none;
margin-bottom: 30px; margin-bottom: 30px;
background: #fff; background: var(--body-bg);
} }
.module p, .module ul, .module h3, .module h4, .module dl, .module pre { .module p, .module ul, .module h3, .module h4, .module dl, .module pre {
@ -500,8 +556,8 @@ input[type=button][disabled].default {
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
background: #79aec8; background: var(--primary);
color: #fff; color: var(--body-bg);
} }
.module caption, .module caption,
@ -528,18 +584,18 @@ ul.messagelist li {
font-size: 13px; font-size: 13px;
padding: 10px 10px 10px 65px; padding: 10px 10px 10px 65px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat; background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
background-size: 16px auto; background-size: 16px auto;
color: #333; color: var(--body-fg);
} }
ul.messagelist li.warning { ul.messagelist li.warning {
background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat; background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
background-size: 14px auto; background-size: 14px auto;
} }
ul.messagelist li.error { ul.messagelist li.error {
background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat; background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
background-size: 16px auto; background-size: 16px auto;
} }
@ -549,10 +605,10 @@ ul.messagelist li.error {
display: block; display: block;
padding: 10px 12px; padding: 10px 12px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: #ba2121; color: var(--error-fg);
border: 1px solid #ba2121; border: 1px solid var(--error-fg);
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: var(--body-bg);
background-position: 5px 12px; background-position: 5px 12px;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -560,8 +616,8 @@ ul.messagelist li.error {
ul.errorlist { ul.errorlist {
margin: 0 0 4px; margin: 0 0 4px;
padding: 0; padding: 0;
color: #ba2121; color: var(--error-fg);
background: #fff; background: var(--body-bg);
} }
ul.errorlist li { ul.errorlist li {
@ -592,7 +648,7 @@ td ul.errorlist li {
.form-row.errors { .form-row.errors {
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
background: none; background: none;
} }
@ -602,7 +658,7 @@ td ul.errorlist li {
.errors input, .errors select, .errors textarea, .errors input, .errors select, .errors textarea,
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea { td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
border: 1px solid #ba2121; border: 1px solid var(--error-fg);
} }
.description { .description {
@ -613,19 +669,19 @@ td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
/* BREADCRUMBS */ /* BREADCRUMBS */
div.breadcrumbs { div.breadcrumbs {
background: #79aec8; background: var(--breadcrumbs-bg);
padding: 10px 40px; padding: 10px 40px;
border: none; border: none;
color: #c4dce8; color: var(--breadcrumbs-fg);
text-align: left; text-align: left;
} }
div.breadcrumbs a { div.breadcrumbs a {
color: #fff; color: var(--breadcrumbs-link-fg);
} }
div.breadcrumbs a:focus, div.breadcrumbs a:hover { div.breadcrumbs a:focus, div.breadcrumbs a:hover {
color: #c4dce8; color: var(--breadcrumbs-fg);
} }
/* ACTION ICONS */ /* ACTION ICONS */
@ -651,11 +707,11 @@ div.breadcrumbs a:focus, div.breadcrumbs a:hover {
} }
a.deletelink:link, a.deletelink:visited { a.deletelink:link, a.deletelink:visited {
color: #CC3434; color: #CC3434; /* XXX Probably unused? */
} }
a.deletelink:focus, a.deletelink:hover { a.deletelink:focus, a.deletelink:hover {
color: #993333; color: #993333; /* XXX Probably unused? */
text-decoration: none; text-decoration: none;
} }
@ -685,16 +741,16 @@ a.deletelink:focus, a.deletelink:hover {
display: block; display: block;
float: left; float: left;
padding: 3px 12px; padding: 3px 12px;
background: #999; background: var(--object-tools-bg);
color: var(--object-tools-fg);
font-weight: 400; font-weight: 400;
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: #fff;
} }
.object-tools a:focus, .object-tools a:hover { .object-tools a:focus, .object-tools a:hover {
background-color: #417690; background-color: var(--object-tools-hover-bg);
} }
.object-tools a:focus{ .object-tools a:focus{
@ -809,13 +865,13 @@ table#change-history tbody th {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 40px; padding: 10px 40px;
background: #417690; background: var(--header-bg);
color: #ffc; color: var(--header-color);
overflow: hidden; overflow: hidden;
} }
#header a:link, #header a:visited { #header a:link, #header a:visited {
color: #fff; color: var(--header-link-color);
} }
#header a:focus , #header a:hover { #header a:focus , #header a:hover {
@ -831,11 +887,11 @@ table#change-history tbody th {
margin: 0 20px 0 0; margin: 0 20px 0 0;
font-weight: 300; font-weight: 300;
font-size: 24px; font-size: 24px;
color: #f5dd5d; color: var(--accent);
} }
#branding h1, #branding h1 a:link, #branding h1 a:visited { #branding h1, #branding h1 a:link, #branding h1 a:visited {
color: #f5dd5d; color: var(--accent);
} }
#branding h2 { #branding h2 {
@ -843,7 +899,7 @@ table#change-history tbody th {
font-size: 14px; font-size: 14px;
margin: -8px 0 8px 0; margin: -8px 0 8px 0;
font-weight: normal; font-weight: normal;
color: #ffc; color: var(--header-color);
} }
#branding a:hover { #branding a:hover {
@ -867,14 +923,14 @@ table#change-history tbody th {
#user-tools a:focus, #user-tools a:hover { #user-tools a:focus, #user-tools a:hover {
text-decoration: none; text-decoration: none;
border-bottom-color: #79aec8; border-bottom-color: var(--primary);
color: #79aec8; color: var(--primary);
} }
/* SIDEBAR */ /* SIDEBAR */
#content-related { #content-related {
background: #f8f8f8; background: var(--darkened-bg);
} }
#content-related .module { #content-related .module {
@ -882,7 +938,7 @@ table#change-history tbody th {
} }
#content-related h3 { #content-related h3 {
color: #666; color: var(--body-quiet-color);
padding: 0 16px; padding: 0 16px;
margin: 0 0 16px; margin: 0 0 16px;
} }
@ -911,22 +967,22 @@ table#change-history tbody th {
background: none; background: none;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid var(--hairline-color);
font-size: 18px; font-size: 18px;
color: #333; color: var(--body-fg);
} }
.delete-confirmation form input[type="submit"] { .delete-confirmation form input[type="submit"] {
background: #ba2121; background: var(--delete-button-bg);
border-radius: 4px; border-radius: 4px;
padding: 10px 15px; padding: 10px 15px;
color: #fff; color: var(--button-fg);
} }
.delete-confirmation form input[type="submit"]:active, .delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus, .delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover { .delete-confirmation form input[type="submit"]:hover {
background: #a41515; background: var(--delete-button-hover-bg);
} }
.delete-confirmation form .cancel-link { .delete-confirmation form .cancel-link {
@ -934,17 +990,17 @@ table#change-history tbody th {
vertical-align: middle; vertical-align: middle;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
background: #ddd;
border-radius: 4px; border-radius: 4px;
padding: 10px 15px; padding: 10px 15px;
color: #333; color: var(--button-fg);
background: var(--close-button-bg);
margin: 0 0 0 10px; margin: 0 0 0 10px;
} }
.delete-confirmation form .cancel-link:active, .delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus, .delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover { .delete-confirmation form .cancel-link:hover {
background: #ccc; background: var(--close-button-hover-bg);
} }
/* POPUP */ /* POPUP */

88
django/contrib/admin/static/admin/css/changelists.css
View File

@ -40,13 +40,13 @@
} }
#changelist .toplinks { #changelist .toplinks {
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--hairline-color);
} }
#changelist .paginator { #changelist .paginator {
color: #666; color: var(--body-quiet-color);
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
background: #fff; background: var(--body-bg);
overflow: hidden; overflow: hidden;
} }
@ -68,7 +68,7 @@
} }
#changelist table tfoot { #changelist table tfoot {
color: #666; color: var(--body-quiet-color);
} }
/* TOOLBAR */ /* TOOLBAR */
@ -76,22 +76,22 @@
#toolbar { #toolbar {
padding: 8px 10px; padding: 8px 10px;
margin-bottom: 15px; margin-bottom: 15px;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
background: #f8f8f8; background: var(--darkened-bg);
color: #666; color: var(--body-quiet-color);
} }
#toolbar form input { #toolbar form input {
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
color: #333; color: var(--body-fg);
} }
#toolbar #searchbar { #toolbar #searchbar {
height: 19px; height: 19px;
border: 1px solid #ccc; border: 1px solid var(--border-color);
padding: 2px 5px; padding: 2px 5px;
margin: 0; margin: 0;
vertical-align: top; vertical-align: top;
@ -100,24 +100,24 @@
} }
#toolbar #searchbar:focus { #toolbar #searchbar:focus {
border-color: #999; border-color: var(--body-quiet-color);
} }
#toolbar form input[type="submit"] { #toolbar form input[type="submit"] {
border: 1px solid #ccc; border: 1px solid var(--border-color);
font-size: 13px; font-size: 13px;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
background: #fff; background: var(--body-bg);
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
cursor: pointer; cursor: pointer;
color: #333; color: var(--body-fg);
} }
#toolbar form input[type="submit"]:focus, #toolbar form input[type="submit"]:focus,
#toolbar form input[type="submit"]:hover { #toolbar form input[type="submit"]:hover {
border-color: #999; border-color: var(--body-quiet-color);
} }
#changelist-search img { #changelist-search img {
@ -130,7 +130,7 @@
#changelist-filter { #changelist-filter {
order: 1; order: 1;
width: 240px; width: 240px;
background: #f8f8f8; background: var(--darkened-bg);
border-left: none; border-left: none;
margin: 0 0 0 30px; margin: 0 0 0 30px;
} }
@ -153,7 +153,7 @@
#changelist-filter ul { #changelist-filter ul {
margin: 5px 0; margin: 5px 0;
padding: 0 15px 15px; padding: 0 15px 15px;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid var(--hairline-color);
} }
#changelist-filter ul:last-child { #changelist-filter ul:last-child {
@ -168,31 +168,31 @@
#changelist-filter a { #changelist-filter a {
display: block; display: block;
color: #999; color: var(--body-quiet-color);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
} }
#changelist-filter li.selected { #changelist-filter li.selected {
border-left: 5px solid #eaeaea; border-left: 5px solid var(--hairline-color);
padding-left: 10px; padding-left: 10px;
margin-left: -15px; margin-left: -15px;
} }
#changelist-filter li.selected a { #changelist-filter li.selected a {
color: #5b80b2; color: var(--link-selected-fg);
} }
#changelist-filter a:focus, #changelist-filter a:hover, #changelist-filter a:focus, #changelist-filter a:hover,
#changelist-filter li.selected a:focus, #changelist-filter li.selected a:focus,
#changelist-filter li.selected a:hover { #changelist-filter li.selected a:hover {
color: #036; color: var(--link-hover-color);
} }
#changelist-filter #changelist-filter-clear a { #changelist-filter #changelist-filter-clear a {
font-size: 13px; font-size: 13px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid var(--hairline-color);
} }
/* DATE DRILLDOWN */ /* DATE DRILLDOWN */
@ -213,12 +213,12 @@
} }
.change-list ul.toplinks .date-back a { .change-list ul.toplinks .date-back a {
color: #999; color: var(--body-quiet-color);
} }
.change-list ul.toplinks .date-back a:focus, .change-list ul.toplinks .date-back a:focus,
.change-list ul.toplinks .date-back a:hover { .change-list ul.toplinks .date-back a:hover {
color: #036; color: var(--link-hover-color);
} }
/* PAGINATOR */ /* PAGINATOR */
@ -229,26 +229,26 @@
padding-bottom: 10px; padding-bottom: 10px;
line-height: 22px; line-height: 22px;
margin: 0; margin: 0;
border-top: 1px solid #ddd; border-top: 1px solid var(--hairline-color);
width: 100%; width: 100%;
} }
.paginator a:link, .paginator a:visited { .paginator a:link, .paginator a:visited {
padding: 2px 6px; padding: 2px 6px;
background: #79aec8; background: var(--primary);
text-decoration: none; text-decoration: none;
color: #fff; color: var(--body-bg);
} }
.paginator a.showall { .paginator a.showall {
border: none; border: none;
background: none; background: none;
color: #5b80b2; color: var(--link-fg);
} }
.paginator a.showall:focus, .paginator a.showall:hover { .paginator a.showall:focus, .paginator a.showall:hover {
background: none; background: none;
color: #036; color: var(--link-hover-color);
} }
.paginator .end { .paginator .end {
@ -264,7 +264,7 @@
.paginator a:focus, .paginator a:hover { .paginator a:focus, .paginator a:hover {
color: white; color: white;
background: #036; background: var(--link-hover-color);
} }
/* ACTIONS */ /* ACTIONS */
@ -279,22 +279,22 @@
} }
#changelist table tbody tr.selected { #changelist table tbody tr.selected {
background-color: #FFFFCC; background-color: var(--selected-row);
} }
#changelist .actions { #changelist .actions {
padding: 10px; padding: 10px;
background: #fff; background: var(--body-bg);
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
line-height: 24px; line-height: 24px;
color: #999; color: var(--body-quiet-color);
width: 100%; width: 100%;
} }
#changelist .actions.selected { #changelist .actions.selected { /* XXX Probably unused? */
background: #fffccf; background: var(--body-bg);
border-top: 1px solid #fffee8; border-top: 1px solid var(--body-bg);
border-bottom: 1px solid #edecd6; border-bottom: 1px solid #edecd6;
} }
@ -314,8 +314,8 @@
vertical-align: top; vertical-align: top;
height: 24px; height: 24px;
background: none; background: none;
color: #000; color: var(--body-fg);
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
padding: 0 0 0 4px; padding: 0 0 0 4px;
@ -324,7 +324,7 @@
} }
#changelist .actions select:focus { #changelist .actions select:focus {
border-color: #999; border-color: var(--body-quiet-color);
} }
#changelist .actions label { #changelist .actions label {
@ -335,18 +335,18 @@
#changelist .actions .button { #changelist .actions .button {
font-size: 13px; font-size: 13px;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background: #fff; background: var(--body-bg);
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
cursor: pointer; cursor: pointer;
height: 24px; height: 24px;
line-height: 1; line-height: 1;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
color: #333; color: var(--body-fg);
} }
#changelist .actions .button:focus, #changelist .actions .button:hover { #changelist .actions .button:focus, #changelist .actions .button:hover {
border-color: #999; border-color: var(--body-quiet-color);
} }

54
django/contrib/admin/static/admin/css/forms.css
View File

@ -6,7 +6,7 @@
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
} }
.form-row img, .form-row input { .form-row img, .form-row input {
@ -26,13 +26,13 @@ form .form-row p {
label { label {
font-weight: normal; font-weight: normal;
color: #666; color: var(--body-quiet-color);
font-size: 13px; font-size: 13px;
} }
.required label, label.required { .required label, label.required {
font-weight: bold; font-weight: bold;
color: #333; color: var(--body-fg);
} }
/* RADIO BUTTONS */ /* RADIO BUTTONS */
@ -215,24 +215,24 @@ fieldset.collapsed h2, fieldset.collapsed {
} }
fieldset.collapsed { fieldset.collapsed {
border: 1px solid #eee; border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
fieldset.collapsed h2 { fieldset.collapsed h2 {
background: #f8f8f8; background: var(--darkened-bg);
color: #666; color: var(--body-quiet-color);
} }
fieldset .collapse-toggle { fieldset .collapse-toggle {
color: #fff; color: var(--body-bg);
} }
fieldset.collapsed .collapse-toggle { fieldset.collapsed .collapse-toggle {
background: transparent; background: transparent;
display: inline; display: inline;
color: #447e9b; color: var(--link-fg);
} }
/* MONOSPACE TEXTAREAS */ /* MONOSPACE TEXTAREAS */
@ -246,8 +246,8 @@ fieldset.monospace textarea {
.submit-row { .submit-row {
padding: 12px 14px; padding: 12px 14px;
margin: 0 0 20px; margin: 0 0 20px;
background: #f8f8f8; background: var(--darkened-bg);
border: 1px solid #eee; border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
@ -279,35 +279,35 @@ body.popup .submit-row {
.submit-row a.deletelink { .submit-row a.deletelink {
display: block; display: block;
background: #ba2121; background: var(--delete-button-bg);
border-radius: 4px; border-radius: 4px;
padding: 10px 15px; padding: 10px 15px;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
color: #fff; color: var(--button-fg);
} }
.submit-row a.closelink { .submit-row a.closelink {
display: inline-block; display: inline-block;
background: #bbbbbb; background: var(--close-button-bg);
border-radius: 4px; border-radius: 4px;
padding: 10px 15px; padding: 10px 15px;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin: 0 0 0 5px; margin: 0 0 0 5px;
color: #fff; color: var(--button-fg);
} }
.submit-row a.deletelink:focus, .submit-row a.deletelink:focus,
.submit-row a.deletelink:hover, .submit-row a.deletelink:hover,
.submit-row a.deletelink:active { .submit-row a.deletelink:active {
background: #a41515; background: var(--delete-button-hover-bg);
} }
.submit-row a.closelink:focus, .submit-row a.closelink:focus,
.submit-row a.closelink:hover, .submit-row a.closelink:hover,
.submit-row a.closelink:active { .submit-row a.closelink:active {
background: #aaaaaa; background: var(--close-button-hover-bg);
} }
/* CUSTOM FORM FIELDS */ /* CUSTOM FORM FIELDS */
@ -386,12 +386,12 @@ body.popup .submit-row {
.inline-related h3 { .inline-related h3 {
margin: 0; margin: 0;
color: #666; color: var(--body-quiet-color);
padding: 5px; padding: 5px;
font-size: 13px; font-size: 13px;
background: #f8f8f8; background: var(--darkened-bg);
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
} }
.inline-related h3 span.delete { .inline-related h3 span.delete {
@ -405,7 +405,7 @@ body.popup .submit-row {
.inline-related fieldset { .inline-related fieldset {
margin: 0; margin: 0;
background: #fff; background: var(--body-bg);
border: none; border: none;
width: 100%; width: 100%;
} }
@ -417,7 +417,7 @@ body.popup .submit-row {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
background: #bcd; background: #bcd;
color: #fff; color: var(--body-bg);
} }
.inline-group .tabular fieldset.module { .inline-group .tabular fieldset.module {
@ -456,7 +456,7 @@ body.popup .submit-row {
overflow: hidden; overflow: hidden;
font-size: 9px; font-size: 9px;
font-weight: bold; font-weight: bold;
color: #666; color: var(--body-quiet-color);
_width: 700px; _width: 700px;
} }
@ -473,15 +473,15 @@ body.popup .submit-row {
.inline-group div.add-row, .inline-group div.add-row,
.inline-group .tabular tr.add-row td { .inline-group .tabular tr.add-row td {
color: #666; color: var(--body-quiet-color);
background: #f8f8f8; background: var(--darkened-bg);
padding: 8px 10px; padding: 8px 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
} }
.inline-group .tabular tr.add-row td { .inline-group .tabular tr.add-row td {
padding: 8px 10px; padding: 8px 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--hairline-color);
} }
.inline-group ul.tools a.add, .inline-group ul.tools a.add,

8
django/contrib/admin/static/admin/css/login.css
View File

@ -1,7 +1,7 @@
/* LOGIN FORM */ /* LOGIN FORM */
.login { .login {
background: #f8f8f8; background: var(--darkened-bg);
height: auto; height: auto;
} }
@ -16,7 +16,7 @@
} }
.login #header h1 a { .login #header h1 a {
color: #fff; color: var(--body-bg);
} }
.login #content { .login #content {
@ -24,8 +24,8 @@
} }
.login #container { .login #container {
background: #fff; background: var(--body-bg);
border: 1px solid #eaeaea; border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
width: 28em; width: 28em;

20
django/contrib/admin/static/admin/css/nav_sidebar.css
View File

@ -12,22 +12,22 @@
justify-content: center; justify-content: center;
flex: 0 0 23px; flex: 0 0 23px;
width: 23px; width: 23px;
border-right: 1px solid #eaeaea; border-right: 1px solid var(--hairline-color);
background-color: #ffffff; background-color: var(--body-bg);
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
color: #447e9b; color: var(--link-fg);
padding: 0; padding: 0;
} }
[dir="rtl"] .toggle-nav-sidebar { [dir="rtl"] .toggle-nav-sidebar {
border-left: 1px solid #eaeaea; border-left: 1px solid var(--hairline-color);
border-right: 0; border-right: 0;
} }
.toggle-nav-sidebar:hover, .toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus { .toggle-nav-sidebar:focus {
background-color: #f6f6f6; background-color: var(--darkened-bg);
} }
#nav-sidebar { #nav-sidebar {
@ -36,13 +36,13 @@
left: -276px; left: -276px;
margin-left: -276px; margin-left: -276px;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-right: 1px solid #eaeaea; border-right: 1px solid var(--hairline-color);
background-color: #ffffff; background-color: var(--body-bg);
overflow: auto; overflow: auto;
} }
[dir="rtl"] #nav-sidebar { [dir="rtl"] #nav-sidebar {
border-left: 1px solid #eaeaea; border-left: 1px solid var(--hairline-color);
border-right: 0; border-right: 0;
left: 0; left: 0;
margin-left: 0; margin-left: 0;
@ -91,12 +91,12 @@
#nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { #nav-sidebar .current-app .section:visited {
color: #ffc; color: var(--selected-row);
font-weight: bold; font-weight: bold;
} }
#nav-sidebar .current-model { #nav-sidebar .current-model {
background: #ffc; background: var(--selected-row);
} }
.main > #nav-sidebar + .content { .main > #nav-sidebar + .content {

27
django/contrib/admin/static/admin/css/responsive.css
View File

@ -140,7 +140,7 @@ input[type="submit"], button {
} }
#changelist .actions select { #changelist .actions select {
background: #fff; background: var(--body-bg);
} }
#changelist .actions .button { #changelist .actions .button {
@ -166,7 +166,7 @@ input[type="submit"], button {
.filtered .actions, .filtered .actions,
#changelist .paginator { #changelist .paginator {
border-top-color: #eee; border-top-color: var(--hairline-color); /* XXX Is this used at all? */
} }
#changelist .results + .paginator { #changelist .results + .paginator {
@ -213,7 +213,7 @@ input[type="submit"], button {
fieldset .fieldBox + .fieldBox { fieldset .fieldBox + .fieldBox {
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding-top: 10px;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
} }
textarea { textarea {
@ -399,11 +399,11 @@ input[type="submit"], button {
.datetime .timezonewarning { .datetime .timezonewarning {
display: block; display: block;
font-size: 11px; font-size: 11px;
color: #999; color: var(--body-quiet-color);
} }
.datetimeshortcuts { .datetimeshortcuts {
color: #ccc; color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
} }
.form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
@ -740,7 +740,7 @@ input[type="submit"], button {
/* Inlines */ /* Inlines */
.inline-group[data-inline-type="stacked"] .inline-related { .inline-group[data-inline-type="stacked"] .inline-related {
border: 2px solid #eee; border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
margin-top: 15px; margin-top: 15px;
overflow: auto; overflow: auto;
@ -750,18 +750,19 @@ input[type="submit"], button {
box-sizing: border-box; box-sizing: border-box;
} }
.inline-group[data-inline-type="stacked"] .inline-related + .inline-related {
margin-top: 30px;
}
.inline-group[data-inline-type="stacked"] .inline-related .module { .inline-group[data-inline-type="stacked"] .inline-related .module {
padding: 0 10px; padding: 0 10px;
} }
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row:last-child { .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
border-top: 1px solid var(--hairline-color);
border-bottom: none; border-bottom: none;
} }
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
border-top: none;
}
.inline-group[data-inline-type="stacked"] .inline-related h3 { .inline-group[data-inline-type="stacked"] .inline-related h3 {
padding: 10px; padding: 10px;
border-top-width: 0; border-top-width: 0;
@ -791,7 +792,7 @@ input[type="submit"], button {
.inline-group[data-inline-type="stacked"] div.add-row { .inline-group[data-inline-type="stacked"] div.add-row {
margin-top: 15px; margin-top: 15px;
border: 1px solid #eee; border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
} }
@ -961,7 +962,7 @@ input[type="submit"], button {
} }
.timelist a { .timelist a {
background: #fff; background: var(--body-bg);
padding: 4px; padding: 4px;
} }

2
django/contrib/admin/static/admin/css/rtl.css
View File

@ -97,7 +97,7 @@ thead th.sorted .text {
border-left: none; border-left: none;
padding-left: 10px; padding-left: 10px;
margin-left: 0; margin-left: 0;
border-right: 5px solid #eaeaea; border-right: 5px solid var(--hairline-color);
padding-right: 10px; padding-right: 10px;
margin-right: -15px; margin-right: -15px;
} }

72
django/contrib/admin/static/admin/css/widgets.css
View File

@ -22,26 +22,25 @@
} }
.selector-available h2, .selector-chosen h2 { .selector-available h2, .selector-chosen h2 {
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
.selector-chosen h2 { .selector-chosen h2 {
background: #79aec8; background: var(--primary);
color: #fff; color: var(--body-bg);
} }
.selector .selector-available h2 { .selector .selector-available h2 {
background: #f8f8f8; background: var(--darkened-bg);
color: #666; color: var(--body-quiet-color);
} }
.selector .selector-filter { .selector .selector-filter {
background: white; border: 1px solid var(--border-color);
border: 1px solid #ccc;
border-width: 0 1px; border-width: 0 1px;
padding: 8px; padding: 8px;
color: #999; color: var(--body-quiet-color);
font-size: 10px; font-size: 10px;
margin: 0; margin: 0;
text-align: left; text-align: left;
@ -66,7 +65,7 @@
.selector ul.selector-chooser { .selector ul.selector-chooser {
float: left; float: left;
width: 22px; width: 22px;
background-color: #eee; background-color: var(--selected-bg);
border-radius: 10px; border-radius: 10px;
margin: 10em 5px 0 5px; margin: 10em 5px 0 5px;
padding: 0; padding: 0;
@ -126,14 +125,14 @@ a.selector-chooseall, a.selector-clearall {
overflow: hidden; overflow: hidden;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
color: #666; color: var(--body-quiet-color);
text-decoration: none; text-decoration: none;
opacity: 0.3; opacity: 0.3;
} }
a.active.selector-chooseall:focus, a.active.selector-clearall:focus, a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
a.active.selector-chooseall:hover, a.active.selector-clearall:hover { a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
color: #447e9b; color: var(--link-fg);
} }
a.active.selector-chooseall, a.active.selector-clearall { a.active.selector-chooseall, a.active.selector-clearall {
@ -261,7 +260,7 @@ p.datetime {
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #666; color: var(--body-quiet-color);
font-weight: bold; font-weight: bold;
} }
@ -269,7 +268,7 @@ p.datetime {
white-space: nowrap; white-space: nowrap;
font-weight: normal; font-weight: normal;
font-size: 11px; font-size: 11px;
color: #ccc; color: var(--border-color);
} }
.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
@ -313,7 +312,7 @@ table p.datetime {
.timezonewarning { .timezonewarning {
font-size: 11px; font-size: 11px;
color: #999; color: var(--body-quiet-color);
} }
/* URL */ /* URL */
@ -322,7 +321,7 @@ p.url {
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #666; color: var(--body-quiet-color);
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
@ -337,7 +336,7 @@ p.file-upload {
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #666; color: var(--body-quiet-color);
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
@ -355,7 +354,7 @@ p.file-upload {
} }
span.clearable-file-input label { span.clearable-file-input label {
color: #333; color: var(--body-fg);
font-size: 11px; font-size: 11px;
display: inline; display: inline;
float: none; float: none;
@ -368,8 +367,9 @@ span.clearable-file-input label {
font-size: 12px; font-size: 12px;
width: 19em; width: 19em;
text-align: center; text-align: center;
background: white; background: var(--body-bg);
border: 1px solid #ddd; color: var(--body-fg);
border: 1px solid var(--hairline-color);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
overflow: hidden; overflow: hidden;
@ -397,20 +397,20 @@ span.clearable-file-input label {
margin: 0; margin: 0;
text-align: center; text-align: center;
border-top: none; border-top: none;
background: #f5dd5d;
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
background: var(--accent);
} }
.calendar th { .calendar th {
padding: 8px 5px; padding: 8px 5px;
background: #f8f8f8; background: var(--darkened-bg);
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--border-color);
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
color: #666; color: var(--body-quiet-color);
} }
.calendar td { .calendar td {
@ -418,17 +418,17 @@ span.clearable-file-input label {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
padding: 0; padding: 0;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
border-bottom: none; border-bottom: none;
} }
.calendar td.selected a { .calendar td.selected a {
background: #79aec8; background: var(--primary);
color: #fff; color: var(--button-fg);
} }
.calendar td.nonday { .calendar td.nonday {
background: #f8f8f8; background: var(--darkened-bg);
} }
.calendar td.today a { .calendar td.today a {
@ -440,17 +440,17 @@ span.clearable-file-input label {
font-weight: 400; font-weight: 400;
padding: 6px; padding: 6px;
text-decoration: none; text-decoration: none;
color: #444; color: var(--body-quiet-color);
} }
.calendar td a:focus, .timelist a:focus, .calendar td a:focus, .timelist a:focus,
.calendar td a:hover, .timelist a:hover { .calendar td a:hover, .timelist a:hover {
background: #79aec8; background: var(--primary);
color: white; color: white;
} }
.calendar td a:active, .timelist a:active { .calendar td a:active, .timelist a:active {
background: #417690; background: var(--header-bg);
color: white; color: white;
} }
@ -464,16 +464,16 @@ span.clearable-file-input label {
.calendarnav a:link, #calendarnav a:visited, .calendarnav a:link, #calendarnav a:visited,
#calendarnav a:focus, #calendarnav a:hover { #calendarnav a:focus, #calendarnav a:hover {
color: #999; color: var(--body-quiet-color);
} }
.calendar-shortcuts { .calendar-shortcuts {
background: white; background: var(--body-bg);
color: var(--body-quiet-color);
font-size: 11px; font-size: 11px;
line-height: 11px; line-height: 11px;
border-top: 1px solid #eee; border-top: 1px solid var(--hairline-color);
padding: 8px 0; padding: 8px 0;
color: #ccc;
} }
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
@ -511,8 +511,8 @@ span.clearable-file-input label {
padding: 4px 0; padding: 4px 0;
font-size: 12px; font-size: 12px;
background: #eee; background: #eee;
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
color: #333; color: var(--body-fg);
} }
.calendar-cancel:focus, .calendar-cancel:hover { .calendar-cancel:focus, .calendar-cancel:hover {

28
docs/ref/contrib/admin/index.txt
View File

@ -2802,6 +2802,34 @@ creating your own ``AdminSite`` instance (see below), and changing the
:attr:`AdminSite.index_template` , :attr:`AdminSite.login_template` or :attr:`AdminSite.index_template` , :attr:`AdminSite.login_template` or
:attr:`AdminSite.logout_template` properties. :attr:`AdminSite.logout_template` properties.
.. _admin-theming:
Theming support
===============
The admin uses CSS variables to define colors. This allows changing colors
without having to override many individual CSS rules. For example, if you
preferred purple instead of blue you could add a ``admin/base.html`` template
override to your project:
.. code-block:: html+django
{% extends 'admin/base.html' %}
{% block extrahead %}{{ block.super }}
<style>
:root {
--primary: #9774d5;
--secondary: #785cab;
--link-fg: #7c449b;
--link-selected-fg: #8f5bb2;
}
</style>
{% endblock %}
An up-to-date list of CSS variables is at
:file:`django/contrib/admin/static/admin/css/base.css`.
``AdminSite`` objects ``AdminSite`` objects
===================== =====================

2
docs/releases/3.2.txt
View File

@ -117,6 +117,8 @@ Minor features
* Read-only related fields are now rendered as navigable links if target models * Read-only related fields are now rendered as navigable links if target models
are registered in the admin. are registered in the admin.
* The admin now supports theming. See :ref:`admin-theming` for more details.
:mod:`django.contrib.admindocs` :mod:`django.contrib.admindocs`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1
docs/spelling_wordlist
View File

@ -676,6 +676,7 @@ textarea
th th
that'll that'll
Thejaswi Thejaswi
theming
This'll This'll
threadlocals threadlocals
threadpool threadpool