diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css index c5e9f39c29e..decc1c6d8bd 100644 --- a/django/contrib/admin/static/admin/css/base.css +++ b/django/contrib/admin/static/admin/css/base.css @@ -192,7 +192,7 @@ p.mini { color: #999; } -img.help-tooltip { +.help-tooltip { cursor: help; } @@ -352,7 +352,7 @@ table thead th.sorted:hover a.sortremove { table thead th.sorted .sortoptions { display: block; - padding: 10px 5px 0 5px; + padding: 9px 5px 0 5px; float: right; text-align: right; } @@ -361,37 +361,57 @@ table thead th.sorted .sortpriority { font-size: .8em; min-width: 12px; text-align: center; - vertical-align: top; + vertical-align: 3px; + margin-left: 2px; + margin-right: 2px; } table thead th.sorted .sortoptions a { + position: relative; width: 14px; - height: 12px; + height: 14px; display: inline-block; + background: url(../img/svg/sorting-icons.svg) 0 0 no-repeat; + background-size: 14px auto; } table thead th.sorted .sortoptions a.sortremove { - background: url(../img/sorting-icons.gif) -4px -5px no-repeat; + background-position: 0 0; +} + +table thead th.sorted .sortoptions a.sortremove:after { + content: '\\'; + position: absolute; + top: -6px; + left: 3px; + font-weight: 200; + font-size: 18px; + color: #999; +} + +table thead th.sorted .sortoptions a.sortremove:hover:after { + color: #447e9b; } table thead th.sorted .sortoptions a.sortremove:hover { - background: url(../img/sorting-icons.gif) -4px -27px no-repeat; + background-position: 0 -14px; } table thead th.sorted .sortoptions a.ascending { - background: url(../img/sorting-icons.gif) -5px -50px no-repeat; + background-position: 0 -28px; } table thead th.sorted .sortoptions a.ascending:hover { - background: url(../img/sorting-icons.gif) -5px -72px no-repeat; + background-position: 0 -42px; } table thead th.sorted .sortoptions a.descending { - background: url(../img/sorting-icons.gif) -5px -94px no-repeat; + top: 1px; + background-position: 0 -56px; } table thead th.sorted .sortoptions a.descending:hover { - background: url(../img/sorting-icons.gif) -5px -115px no-repeat; + background-position: 0 -70px; } /* ORDERABLE TABLES */ @@ -551,16 +571,19 @@ ul.messagelist li { font-size: 13px; padding: 10px 10px 10px 65px; margin: 0 0 10px 0; - background: #dfd url(../img/icon_success.gif) 40px 12px no-repeat; + background: #dfd url(../img/svg/icon-yes.svg) 40px 12px no-repeat; + background-size: 16px auto; color: #333; } ul.messagelist li.warning { - background: #ffc url(../img/icon_alert.gif) 40px 10px no-repeat; + background: #ffc url(../img/svg/icon-alert.svg) 40px 14px no-repeat; + background-size: 14px auto; } ul.messagelist li.error { - background: #ffefef url(../img/icon_error.gif) 40px 11px no-repeat; + background: #ffefef url(../img/svg/icon-no.svg) 40px 12px no-repeat; + background-size: 16px auto; } .errornote { @@ -633,7 +656,7 @@ div.system-message p.system-message-title { padding: 4px 5px 4px 25px; margin: 0; color: #c11; - background: #ffefef url(../img/icon_error.gif) 5px .3em no-repeat; + background: #ffefef url(../img/svg/icon-no.svg) 5px 5px no-repeat; } .description { @@ -663,18 +686,18 @@ div.breadcrumbs a:hover { /* ACTION ICONS */ .addlink { - padding-left: 14px; - background: url(../img/icon_addlink.gif) 0 .2em no-repeat; + padding-left: 16px; + background: url(../img/svg/icon-addlink.svg) 0 1px no-repeat; } .changelink, .inlinechangelink { - padding-left: 14px; - background: url(../img/icon_changelink.gif) 0 .2em no-repeat; + padding-left: 16px; + background: url(../img/svg/icon-changelink.svg) 0 1px no-repeat; } .deletelink { - padding-left: 14px; - background: url(../img/icon_deletelink.gif) 0 .25em no-repeat; + padding-left: 16px; + background: url(../img/svg/icon-deletelink.svg) 0 1px no-repeat; } a.deletelink:link, a.deletelink:visited { @@ -732,12 +755,12 @@ a.deletelink:hover { } .object-tools a.viewsitelink, .object-tools a.golink { - background: #999 url(../img/tooltag-arrowright.png) 95% center no-repeat; + background: #999 url(../img/svg/tooltag-arrowright.svg) 93% center no-repeat; padding-right: 26px; } .object-tools a.addlink { - background: #999 url(../img/tooltag-add.png) 95% center no-repeat; + background: #999 url(../img/svg/tooltag-add.svg) 93% center no-repeat; padding-right: 26px; } diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css index 06b7f0dcf21..4df480d9c04 100644 --- a/django/contrib/admin/static/admin/css/changelists.css +++ b/django/contrib/admin/static/admin/css/changelists.css @@ -105,8 +105,9 @@ border: 1px solid #ccc; padding: 2px 10px; margin: 0; - vertical-align: -1px; - background: #fff url(../img/nav-bg.gif) bottom repeat-x; + vertical-align: middle; + background: #fff; + box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; cursor: pointer; color: #333; } @@ -189,8 +190,6 @@ .change-list ul.toplinks { display: block; - background: white url(../img/nav-bg-reverse.gif) 0 -10px repeat-x; - border-top: 1px solid white; float: left; padding: 0 !important; margin: 0 !important; @@ -325,7 +324,8 @@ font-size: 13px; border: 1px solid #ccc; border-radius: 4px; - background: #fff url(../img/nav-bg.gif) bottom repeat-x; + background: #fff; + box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; cursor: pointer; height: 24px; line-height: 1; diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css index 9f75c30ba72..7121b2432f4 100644 --- a/django/contrib/admin/static/admin/css/forms.css +++ b/django/contrib/admin/static/admin/css/forms.css @@ -463,8 +463,8 @@ body.popup .submit-row { .inline-group ul.tools a.add, .inline-group div.add-row a, .inline-group .tabular tr.add-row td a { - background: url(../img/icon_addlink.gif) 0 50% no-repeat; - padding-left: 14px; + background: url(../img/svg/icon-addlink.svg) 0 1px no-repeat; + padding-left: 16px; font-size: 12px; outline: 0; /* Remove dotted border around link */ } @@ -478,22 +478,21 @@ body.popup .submit-row { .add-another, .related-lookup { margin-left: 5px; display: inline-block; + vertical-align: middle; + background-repeat: no-repeat; + background-size: 14px; } .add-another { - width: 10px; - height: 10px; - background-image: url(../img/icon_addlink.gif); + width: 16px; + height: 16px; + background-image: url(../img/svg/icon-addlink.svg); } .related-lookup { width: 16px; height: 16px; - background-image: url(../img/selector-search.gif); - background-repeat: no-repeat; - background-position: 0 3px; - vertical-align: middle; - margin-top: -4px; + background-image: url(../img/svg/search.svg); } form .related-widget-wrapper ul { diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css index a2c9b1d0f12..3af780ca169 100644 --- a/django/contrib/admin/static/admin/css/rtl.css +++ b/django/contrib/admin/static/admin/css/rtl.css @@ -31,15 +31,15 @@ th { } .addlink, .changelink { - padding-left: 0px; - padding-right: 12px; - background-position: 100% 0.2em; + padding-left: 0; + padding-right: 16px; + background-position: 100% 1px; } .deletelink { - padding-left: 0px; - padding-right: 12px; - background-position: 100% 0.25em; + padding-left: 0; + padding-right: 16px; + background-position: 100% 1px; } .object-tools { @@ -69,7 +69,7 @@ div.breadcrumbs { #content-related { float: left; - margin-left: -19em; + margin-left: -300px; margin-right: auto; } @@ -93,7 +93,7 @@ thead th.sorted .text { .dashboard .module table td a { padding-left: .6em; - padding-right: 12px; + padding-right: 16px; } /* changelists styles */ @@ -155,11 +155,6 @@ thead th.sorted .text { float: right; } -.submit-row .deletelink { - background: url(../img/icon_deletelink.gif) 0 50% no-repeat; - padding-right: 14px; -} - .submit-row input.default { margin-left: 0; } diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index 245fe57607f..1e694f6b02a 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/django/contrib/admin/static/admin/css/widgets.css @@ -50,9 +50,11 @@ .selector .selector-filter label, .inline-group .aligned .selector .selector-filter label { float: left; - margin: 0; - width: 16px; - padding: 0 2px; + margin: 7px 0 0; + width: 18px; + height: 18px; + padding: 0; + overflow: hidden; line-height: 1; } @@ -91,64 +93,65 @@ } .selector-add { - background: url(../img/selector-icons.gif) 0 -161px no-repeat; + background: url(../img/svg/selector-icons.svg) 0 -96px no-repeat; cursor: default; - margin-bottom: 2px; } .active.selector-add { - background: url(../img/selector-icons.gif) 0 -187px no-repeat; + background-position: 0 -112px; cursor: pointer; } .selector-remove { - background: url(../img/selector-icons.gif) 0 -109px no-repeat; + background: url(../img/svg/selector-icons.svg) 0 -64px no-repeat; cursor: default; } .active.selector-remove { - background: url(../img/selector-icons.gif) 0 -135px no-repeat; + background-position: 0 -80px; cursor: pointer; } a.selector-chooseall, a.selector-clearall { display: inline-block; + height: 16px; text-align: left; - margin-left: auto; - margin-right: auto; + margin: 1px auto 3px; + overflow: hidden; font-weight: bold; + line-height: 16px; color: #666; } a.selector-chooseall { - padding: 1px 18px 3px 0; + padding: 0 18px 0 0; } a.selector-clearall { - padding: 1px 0 3px 18px; + padding: 0 0 0 18px; } a.active.selector-chooseall:hover, a.active.selector-clearall:hover { - color: #036; + color: #447e9b; } a.selector-chooseall { - background: url(../img/selector-icons.gif) right -263px no-repeat; + background: url(../img/svg/selector-icons.svg) right -160px no-repeat; cursor: default; } a.active.selector-chooseall { - background: url(../img/selector-icons.gif) right -289px no-repeat; + background-position: 100% -176px; cursor: pointer; } a.selector-clearall { - background: url(../img/selector-icons.gif) left -211px no-repeat; + background: url(../img/svg/selector-icons.svg) 0 -128px no-repeat; cursor: default; } a.active.selector-clearall { - background: url(../img/selector-icons.gif) left -237px no-repeat; + background-position: 0 -144px; cursor: pointer; } @@ -194,35 +197,40 @@ a.active.selector-clearall { } .stacked .selector-add { - background: url(../img/selector-icons.gif) 0 -57px no-repeat; + background: url(../img/svg/selector-icons.svg) 0 0 no-repeat; cursor: default; } .stacked .active.selector-add { - background: url(../img/selector-icons.gif) 0 -83px no-repeat; + background-position: 0 -16px; cursor: pointer; } .stacked .selector-remove { - background: url(../img/selector-icons.gif) 0 -5px no-repeat; + background: url(../img/svg/selector-icons.svg) 0 -32px no-repeat; cursor: default; } .stacked .active.selector-remove { - background: url(../img/selector-icons.gif) 0 -31px no-repeat; + background-position: 0 -48px; cursor: pointer; } .selector .help-icon { - background: url(../img/icon-unknown.gif) no-repeat; + background: url(../img/svg/icon-unknown.svg) 0 0 no-repeat; display: inline-block; - height: 10px; - width: 10px; vertical-align: middle; + margin: -2px 0 0 2px; + width: 13px; + height: 13px; +} + +.selector .selector-chosen .help-icon { + background: url(../img/svg/icon-unknown-alt.svg) 0 0 no-repeat; } .selector .search-label-icon { - background: url(../img/selector-search.gif) 0 2px no-repeat; + background: url(../img/svg/search.svg) 0 0 no-repeat; display: inline-block; height: 18px; width: 18px; @@ -265,19 +273,34 @@ table p.datetime { } .datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon { - background: none no-repeat; + position: relative; display: inline-block; + vertical-align: middle; height: 16px; width: 16px; - vertical-align: middle; + overflow: hidden; } .datetimeshortcuts .clock-icon { - background-image: url(../img/icon_clock.gif); + background: url(../img/svg/icon-clock.svg) 0 0 no-repeat; +} + +.datetimeshortcuts a:hover .clock-icon { + background-position: 0 -16px; } .datetimeshortcuts .date-icon { - background-image: url(../img/icon_calendar.gif); + background: url(../img/svg/icon-calendar.svg) 0 0 no-repeat; + top: -1px; +} + +.datetimeshortcuts a:hover .date-icon { + background-position: 0 -16px; +} + +.timezonewarning { + font-size: 11px; + color: #999; } /* URL */ @@ -402,7 +425,7 @@ span.clearable-file-input label { .calendar td a, .timelist a { display: block; font-weight: 400; - padding: 8px; + padding: 6px; text-decoration: none; color: #444; } @@ -441,29 +464,29 @@ span.clearable-file-input label { .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { display: block; position: absolute; - top: 7px; - border: 1px solid #333; - border-radius: 50%; - background: #fff; - width: 18px; - height: 18px; + top: 8px; + width: 15px; + height: 15px; + text-indent: -9999px; padding: 0; - line-height: 16px; - font-size: 12px; - color: #333; -} - -.calendarnav-previous:hover, .calendarnav-next:hover { - background: #333; - color: #fff; } .calendarnav-previous { left: 10px; + background: url(../img/svg/calendar-icons.svg) 0 0 no-repeat; +} + +.calendarbox .calendarnav-previous:hover { + background-position: 0 -15px; } .calendarnav-next { right: 10px; + background: url(../img/svg/calendar-icons.svg) 0 -30px no-repeat; +} + +.calendarbox .calendarnav-next:hover { + background-position: 0 -45px; } .calendar-cancel { @@ -564,15 +587,14 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover { .inline-deletelink { float: right; text-indent: -9999px; - background: transparent url(../img/inline-delete.png) no-repeat; - width: 15px; - height: 15px; + background: url(../img/svg/inline-delete.svg) 0 0 no-repeat; + width: 16px; + height: 16px; border: 0px none; outline: 0; /* Remove dotted border around link */ } .inline-deletelink:hover { - background-position: -15px 0; cursor: pointer; } diff --git a/django/contrib/admin/static/admin/img/svg/LICENSE b/django/contrib/admin/static/admin/img/svg/LICENSE new file mode 100644 index 00000000000..a4faaa1dfa2 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2014 Code Charm Ltd + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/django/contrib/admin/static/admin/img/svg/README.txt b/django/contrib/admin/static/admin/img/svg/README.txt new file mode 100644 index 00000000000..43373ad1c25 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/README.txt @@ -0,0 +1,7 @@ +All icons are taken from Font Awesome (http://fontawesome.io/) project. +The Font Awesome font is licensed under the SIL OFL 1.1: +- http://scripts.sil.org/OFL + +SVG icons source: https://github.com/encharm/Font-Awesome-SVG-PNG +Font-Awesome-SVG-PNG is licensed under the MIT license (see file license +in current folder). diff --git a/django/contrib/admin/static/admin/img/svg/calendar-icons.svg b/django/contrib/admin/static/admin/img/svg/calendar-icons.svg new file mode 100644 index 00000000000..dbf21c39d23 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/calendar-icons.svg @@ -0,0 +1,14 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-addlink.svg b/django/contrib/admin/static/admin/img/svg/icon-addlink.svg new file mode 100644 index 00000000000..e004fb16263 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-addlink.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-alert.svg b/django/contrib/admin/static/admin/img/svg/icon-alert.svg new file mode 100644 index 00000000000..e51ea83f5bb --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-alert.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-calendar.svg b/django/contrib/admin/static/admin/img/svg/icon-calendar.svg new file mode 100644 index 00000000000..97910a99491 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-calendar.svg @@ -0,0 +1,9 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-changelink.svg b/django/contrib/admin/static/admin/img/svg/icon-changelink.svg new file mode 100644 index 00000000000..bbb137aa086 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-changelink.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-clock.svg b/django/contrib/admin/static/admin/img/svg/icon-clock.svg new file mode 100644 index 00000000000..bf9985d3f44 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-clock.svg @@ -0,0 +1,9 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg b/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg new file mode 100644 index 00000000000..4059b155449 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-deletelink.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-no.svg b/django/contrib/admin/static/admin/img/svg/icon-no.svg new file mode 100644 index 00000000000..2e0d3832c92 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-no.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg b/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg new file mode 100644 index 00000000000..1c6b99fc094 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-unknown-alt.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-unknown.svg b/django/contrib/admin/static/admin/img/svg/icon-unknown.svg new file mode 100644 index 00000000000..50b4f97276b --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-unknown.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/icon-yes.svg b/django/contrib/admin/static/admin/img/svg/icon-yes.svg new file mode 100644 index 00000000000..5883d877e89 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/icon-yes.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/inline-delete.svg b/django/contrib/admin/static/admin/img/svg/inline-delete.svg new file mode 100644 index 00000000000..17d1ad67cdc --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/inline-delete.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/search.svg b/django/contrib/admin/static/admin/img/svg/search.svg new file mode 100644 index 00000000000..c8c69b2acc1 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/search.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/selector-icons.svg b/django/contrib/admin/static/admin/img/svg/selector-icons.svg new file mode 100644 index 00000000000..926b8e21b52 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/selector-icons.svg @@ -0,0 +1,34 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/sorting-icons.svg b/django/contrib/admin/static/admin/img/svg/sorting-icons.svg new file mode 100644 index 00000000000..7c31ec91145 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/sorting-icons.svg @@ -0,0 +1,19 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/tooltag-add.svg b/django/contrib/admin/static/admin/img/svg/tooltag-add.svg new file mode 100644 index 00000000000..1ca64ae5b08 --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/tooltag-add.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg b/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg new file mode 100644 index 00000000000..b664d61937b --- /dev/null +++ b/django/contrib/admin/static/admin/img/svg/tooltag-arrowright.svg @@ -0,0 +1,3 @@ + diff --git a/django/contrib/admin/templates/admin/edit_inline/tabular.html b/django/contrib/admin/templates/admin/edit_inline/tabular.html index a890cc334d3..4d83c259396 100644 --- a/django/contrib/admin/templates/admin/edit_inline/tabular.html +++ b/django/contrib/admin/templates/admin/edit_inline/tabular.html @@ -10,7 +10,7 @@ {% for field in inline_admin_formset.fields %} {% if not field.widget.is_hidden %}