From 8fe7178a130d137dc985fc3ed6d046c13484a56f Mon Sep 17 00:00:00 2001 From: "Mustafa M. A. U. AbuGhazy" Date: Tue, 8 Mar 2022 20:09:41 +0200 Subject: [PATCH] Converted dynamic inline CSS to external static CSS using CSS variables. #157 #93 --- .../css/admin-interface-fix.css | 0 .../admin_interface/css/admin-interface.css | 440 ++++++++++++++++ .../admin_interface/css/ckeditor.css | 0 .../admin_interface/css/form-controls.css | 0 .../admin_interface/css/jquery.ui.tabs.css | 143 ++++- .../admin_interface/css/json-widget.css | 16 +- .../css/list-filter-dropdown.css | 0 .../admin_interface/css/modeltranslation.css | 0 .../admin_interface/css/recent-actions.css | 13 + .../admin_interface/css/related-modal.css | 24 +- .../admin_interface/css/rtl.css | 0 .../admin_interface/css/sorl-thumbnail.css | 0 .../admin_interface/css/tabbed-admin.css | 0 .../admin_interface/css/tinymce.css | 0 .../templates/admin/base_site.html | 114 +++- .../admin_interface/css/admin-interface.css | 487 ------------------ .../admin_interface/css/recent-actions.css | 9 - 17 files changed, 691 insertions(+), 555 deletions(-) rename admin_interface/{templates => static}/admin_interface/css/admin-interface-fix.css (100%) create mode 100644 admin_interface/static/admin_interface/css/admin-interface.css rename admin_interface/{templates => static}/admin_interface/css/ckeditor.css (100%) rename admin_interface/{templates => static}/admin_interface/css/form-controls.css (100%) rename admin_interface/{templates => static}/admin_interface/css/jquery.ui.tabs.css (62%) rename admin_interface/{templates => static}/admin_interface/css/json-widget.css (52%) rename admin_interface/{templates => static}/admin_interface/css/list-filter-dropdown.css (100%) rename admin_interface/{templates => static}/admin_interface/css/modeltranslation.css (100%) create mode 100644 admin_interface/static/admin_interface/css/recent-actions.css rename admin_interface/{templates => static}/admin_interface/css/related-modal.css (81%) rename admin_interface/{templates => static}/admin_interface/css/rtl.css (100%) rename admin_interface/{templates => static}/admin_interface/css/sorl-thumbnail.css (100%) rename admin_interface/{templates => static}/admin_interface/css/tabbed-admin.css (100%) rename admin_interface/{templates => static}/admin_interface/css/tinymce.css (100%) delete mode 100644 admin_interface/templates/admin_interface/css/admin-interface.css delete mode 100644 admin_interface/templates/admin_interface/css/recent-actions.css diff --git a/admin_interface/templates/admin_interface/css/admin-interface-fix.css b/admin_interface/static/admin_interface/css/admin-interface-fix.css similarity index 100% rename from admin_interface/templates/admin_interface/css/admin-interface-fix.css rename to admin_interface/static/admin_interface/css/admin-interface-fix.css diff --git a/admin_interface/static/admin_interface/css/admin-interface.css b/admin_interface/static/admin_interface/css/admin-interface.css new file mode 100644 index 00000000..7480c08e --- /dev/null +++ b/admin_interface/static/admin_interface/css/admin-interface.css @@ -0,0 +1,440 @@ +@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); + } +} + +.admin-interface #header { + background: var(--admin-interface-header-background-color); + color: var(--admin-interface-header-text-color); +} + +.admin-interface #header + #main { + border-top: var(--admin-interface-main-border-top); +} + +.admin-interface .environment-label { +} + +.admin-interface .environment-label::before { + content: ""; + display: inline-block; + width: 8px; + height: 8px; + background-color: var(--admin-interface-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: " - "; +} + +@media (max-width: 1024px) { + .admin-interface .environment-label::after { + content: ""; + } +} + +.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, +.admin-interface.login #header h1, +.admin-interface.login #header h1 a { + color: var(--admin-interface-title-color); +} + +.admin-interface #branding h1 a { + color: inherit; +} + +.admin-interface #branding h1 .logo.default { + background-color: transparent; + background-repeat: no-repeat; + background-position: center center; + background-size: 104px 36px; + background-image: var(--admin-interface-logo-default-background-image); +} + +.admin-interface #branding h1 img.logo, +.admin-interface.login #header #branding h1 img.logo { + max-width: var(--admin-interface-log-max-width); + max-height: var(--admin-interface-log-max-height); +} + +.admin-interface #header #user-tools a { + color: var(--admin-interface-header-link-color); +} + +.admin-interface #header #user-tools a:hover, +.admin-interface #header #user-tools a:active { + color: var(--admin-interface-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: var(--admin-interface-module-link-selected-color); + font-weight: normal; +} + +.admin-interface #nav-sidebar .current-app .section:focus, +.admin-interface #nav-sidebar .current-app .section:hover { + color: var(--admin-interface-module-link-hover-color); +} + +.admin-interface #nav-sidebar .current-model { + background: var(--admin-interface-module-background-selected-color); +} + +.admin-interface #changelist table tbody tr.selected { + background-color: var(--admin-interface-module-background-selected-color); +} + +.admin-interface .module h2, +.admin-interface .module caption, +.admin-interface .module.filtered h2 { + background: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-text-color); +} + +.admin-interface .module a.section:link, +.admin-interface .module a.section:visited { + color: var(--admin-interface-module-link-color); +} + +.admin-interface .module a.section:active, +.admin-interface .module a.section:hover { + color: var(--admin-interface-module-link-hover-color); +} + +.admin-interface div.breadcrumbs { + background: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-text-color); +} + +.admin-interface div.breadcrumbs a { + color: var(--admin-interface-module-link-color); +} + +.admin-interface div.breadcrumbs a:active, +.admin-interface div.breadcrumbs a:focus, +.admin-interface div.breadcrumbs a:hover { + color: var(--admin-interface-module-link-hover-color); +} + +.admin-interface fieldset.collapse.collapsed a.collapse-toggle { + color: var(--admin-interface-module-link-color); +} + +.admin-interface fieldset.collapse.collapsed a.collapse-toggle:hover, +.admin-interface fieldset.collapse.collapsed a.collapse-toggle:active { + color: var(--admin-interface-module-link-hover-color); +} + +.admin-interface fieldset.collapse a.collapse-toggle { + color: var(--admin-interface-module-link-color); +} + +.admin-interface fieldset.collapse a.collapse-toggle:hover, +.admin-interface fieldset.collapse a.collapse-toggle:active { + color: var(--admin-interface-module-link-hover-color); +} + +.admin-interface .inline-group h2 { + background: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-text-color); +} + +.admin-interface .selector .selector-chosen h2 { + border-color: var(--admin-interface-module-background-color); + background: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-text-color); +} + +.admin-interface .selector .selector-available h2, +.admin-interface .selector .selector-chosen h2 { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.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: var(--admin-interface-generic-link-hover-color); +} + +.admin-interface a:link, +.admin-interface a:visited { + color: var(--admin-interface-generic-link-color); +} + +.admin-interface a:hover { + color: var(--admin-interface-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: var(--admin-interface-save-button-background-color); + color: var(--admin-interface-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: var(--admin-interface-save-button-background-hover-color); + color: var(--admin-interface-save-button-text-color); + outline: none; +} + +.admin-interface .button.default, +.admin-interface input[type=submit].default, +.admin-interface .submit-row input.default { + background: var(--admin-interface-save-button-background-color); + color: var(--admin-interface-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: var(--admin-interface-save-button-background-hover-color); + color: var(--admin-interface-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: var(--admin-interface-delete-button-background-color); + color: var(--admin-interface-delete-button-text-color); +} + +.admin-interface .submit-row a.deletelink:hover, +.admin-interface.delete-confirmation form input[type="submit"]:hover { + background: var(--admin-interface-delete-button-background-hover-color); + color: var(--admin-interface-delete-button-text-color); +} + +.admin-interface .paginator a, +.admin-interface .paginator a:link, +.admin-interface .paginator a:visited, +.admin-interface .paginator .this-page { + border-radius: var(--admin-interface-module-border-radius); +} + +.admin-interface .paginator a, +.admin-interface .paginator a:link, +.admin-interface .paginator a:visited { + background-color: #FFFFFF; + color: var(--admin-interface-generic-link-color); +} + +.admin-interface .paginator a:hover, +.admin-interface .paginator a:active { + background-color: #F8F8F8; + color: var(--admin-interface-generic-link-hover-color); +} + +.admin-interface .paginator .this-page { + background-color: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-link-color); +} + +.admin-interface .paginator a.showall, +.admin-interface .paginator a.showall:link, +.admin-interface .paginator a.showall:visited { + color: var(--admin-interface-generic-link-color); +} + +.admin-interface .paginator a.showall:hover, +.admin-interface .paginator a.showall:active { + color: var(--admin-interface-generic-link-hover-color); +} + +/* list-filter sticky */ +@media (min-width: 768px) { + .admin-interface.list-filter-sticky .module.filtered #changelist-filter { + position: sticky; + top: 40px; + float: right; + z-index: 30; + } + + /* feature not available for django < 3.1.2 */ + .admin-interface.list-filter-sticky .module.filtered #toolbar + #changelist-filter { + position: absolute; + top: 0px; + z-index: 30; + } +} + +.admin-interface .module.filtered #changelist-filter { + border-bottom-left-radius: var(--admin-interface-module-border-radius); + border-bottom-right-radius: var(--admin-interface-module-border-radius); +} + +.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: var(--admin-interface-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 { + border-radius: var(--admin-interface-module-border-radius); +} + +.admin-interface .inline-group h2 { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.admin-interface .module.collapse.collapsed h2 { + /* fix collapsed inlines rounded bottom borders */ + border-bottom-left-radius: var(--admin-interface-module-border-radius); + border-bottom-right-radius: var(--admin-interface-module-border-radius); +} + +/* end fix */ + +.admin-interface #content-related { + border-radius: var(--admin-interface-module-border-radius); +} + +.admin-interface .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { + background-color: var(--admin-interface-module-background-color); + color: var(--admin-interface-module-text-color); +} + +.admin-interface #toggle-nav-sidebar { + border-top-right-radius: var(--admin-interface-module-border-radius); + border-bottom-right-radius: var(--admin-interface-module-border-radius); + color: var(--admin-interface-generic-link-color); +} + +.admin-interface #toggle-nav-sidebar:focus, +.admin-interface #toggle-nav-sidebar:hover, +.admin-interface #toggle-nav-sidebar:active { + color: var(--admin-interface-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: var(--admin-interface-module-background-color); +} diff --git a/admin_interface/templates/admin_interface/css/ckeditor.css b/admin_interface/static/admin_interface/css/ckeditor.css similarity index 100% rename from admin_interface/templates/admin_interface/css/ckeditor.css rename to admin_interface/static/admin_interface/css/ckeditor.css diff --git a/admin_interface/templates/admin_interface/css/form-controls.css b/admin_interface/static/admin_interface/css/form-controls.css similarity index 100% rename from admin_interface/templates/admin_interface/css/form-controls.css rename to admin_interface/static/admin_interface/css/form-controls.css diff --git a/admin_interface/templates/admin_interface/css/jquery.ui.tabs.css b/admin_interface/static/admin_interface/css/jquery.ui.tabs.css similarity index 62% rename from admin_interface/templates/admin_interface/css/jquery.ui.tabs.css rename to admin_interface/static/admin_interface/css/jquery.ui.tabs.css index d960db5e..3a9eb75d 100644 --- a/admin_interface/templates/admin_interface/css/jquery.ui.tabs.css +++ b/admin_interface/static/admin_interface/css/jquery.ui.tabs.css @@ -13,27 +13,127 @@ backward compatibility: /* Layout helpers ----------------------------------*/ -.ui-helper-hidden { display: none; } -.ui-helper-hidden-accessible { position: absolute; left: -99999999px; } -.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } -.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.ui-helper-clearfix { display: inline-block; } +.ui-helper-hidden { + display: none; +} + +.ui-helper-hidden-accessible { + position: absolute; + left: -99999999px; +} + +.ui-helper-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + line-height: 1.3; + text-decoration: none; + font-size: 100%; + list-style: none; +} + +.ui-helper-clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.ui-helper-clearfix { + display: inline-block; +} + /* required comment for clearfix to work in Opera \*/ -* html .ui-helper-clearfix { height:1%; } -.ui-helper-clearfix { display:block; } -.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } -.ui-state-disabled { cursor: default !important; } -.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } +* html .ui-helper-clearfix { + height: 1%; +} + +.ui-helper-clearfix { + display: block; +} + +.ui-helper-zfix { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + opacity: 0; + filter: Alpha(Opacity=0); +} + +.ui-state-disabled { + cursor: default !important; +} + +.ui-icon { + display: block; + text-indent: -99999px; + overflow: hidden; + background-repeat: no-repeat; +} + /* http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.tabs.css */ -.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ -.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } -.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } -.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } -.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } -.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } -.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ -.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } +.ui-widget-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.ui-tabs { + position: relative; + padding: .2em; + zoom: 1; +} + +/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ +.ui-tabs .ui-tabs-nav { + margin: 0; + padding: .2em .2em 0; +} + +.ui-tabs .ui-tabs-nav li { + list-style: none; + float: left; + position: relative; + top: 1px; + margin: 0 .2em 1px 0; + border-bottom: 0 !important; + padding: 0; + white-space: nowrap; +} + +.ui-tabs .ui-tabs-nav li a { + float: left; + padding: .5em 1em; + text-decoration: none; +} + +.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-selected { + margin-bottom: 0; + padding-bottom: 1px; +} + +.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { + cursor: text; +} + +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { + cursor: pointer; +} + +/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-panel { + display: block; + border-width: 0; + padding: 1em 1.4em; + background: none; +} + .ui-tabs .ui-tabs-hide { position: absolute; display: none; @@ -55,12 +155,15 @@ backward compatibility: padding: 10px 0 0 10px; border-bottom: none; } + .admin-interface .ui-tabs .ui-tabs-nav li { margin: 0 0 0 -1px; } + .admin-interface .ui-tabs .ui-tabs-nav li.required { font-weight: bold; } + .admin-interface .ui-tabs .ui-tabs-nav li a { border: 1px solid #eeeeee; background-color: #f8f8f8; @@ -86,7 +189,7 @@ backward compatibility: margin-bottom: -1px; font-weight: bold; background-color: #FFFFFF; - color: {{ theme.css_module_background_color }}; + color: var(--admin-interface-module-background-color); border-bottom: 1px solid #FFFFFF; } diff --git a/admin_interface/templates/admin_interface/css/json-widget.css b/admin_interface/static/admin_interface/css/json-widget.css similarity index 52% rename from admin_interface/templates/admin_interface/css/json-widget.css rename to admin_interface/static/admin_interface/css/json-widget.css index d51b9ff3..e0a999d1 100644 --- a/admin_interface/templates/admin_interface/css/json-widget.css +++ b/admin_interface/static/admin_interface/css/json-widget.css @@ -4,26 +4,24 @@ https://github.com/jmrivas86/django-json-widget */ .admin-interface div.jsoneditor { - border: 1px solid {{ theme.css_module_background_color }}; - {% if theme.css_module_rounded_corners %} - border-radius: 4px; - overflow: hidden; - {% endif %} + border: 1px solid var(--admin-interface-module-background-color); + border-radius: var(--admin-interface-jsoneditor-border-radius); + overflow: var(--admin-interface-jsoneditor-overflow); } .admin-interface div.jsoneditor-menu { - background-color: {{ theme.css_module_background_color }}; - border-bottom: 1px solid {{ theme.css_module_background_color }}; + background-color: var(--admin-interface-module-background-color); + border-bottom: 1px solid var(--admin-interface-module-background-color); } .admin-interface div.jsoneditor-menu a.jsoneditor-poweredBy { - color: {{ theme.css_module_link_color }}; + color: var(--admin-interface-module-link-color); } .admin-interface div.jsoneditor-contextmenu ul li button.jsoneditor-selected, .admin-interface div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus, .admin-interface div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover { - background-color: {{ theme.css_module_background_selected_color }}; + background-color: var(--admin-interface-module-background-selected-color); color: #000000; font-weight: bold; } diff --git a/admin_interface/templates/admin_interface/css/list-filter-dropdown.css b/admin_interface/static/admin_interface/css/list-filter-dropdown.css similarity index 100% rename from admin_interface/templates/admin_interface/css/list-filter-dropdown.css rename to admin_interface/static/admin_interface/css/list-filter-dropdown.css diff --git a/admin_interface/templates/admin_interface/css/modeltranslation.css b/admin_interface/static/admin_interface/css/modeltranslation.css similarity index 100% rename from admin_interface/templates/admin_interface/css/modeltranslation.css rename to admin_interface/static/admin_interface/css/modeltranslation.css diff --git a/admin_interface/static/admin_interface/css/recent-actions.css b/admin_interface/static/admin_interface/css/recent-actions.css new file mode 100644 index 00000000..b6095e5f --- /dev/null +++ b/admin_interface/static/admin_interface/css/recent-actions.css @@ -0,0 +1,13 @@ +.admin-interface.dashboard #content { + max-width: 600px; + margin-right: auto; + margin-left: auto; +} + +.admin-interface.dashboard #content #recent-actions-module { + display: none; +} + +.admin-interface.dashboard #content { + width: auto; +} \ No newline at end of file diff --git a/admin_interface/templates/admin_interface/css/related-modal.css b/admin_interface/static/admin_interface/css/related-modal.css similarity index 81% rename from admin_interface/templates/admin_interface/css/related-modal.css rename to admin_interface/static/admin_interface/css/related-modal.css index 7cae8bdf..015752f8 100644 --- a/admin_interface/templates/admin_interface/css/related-modal.css +++ b/admin_interface/static/admin_interface/css/related-modal.css @@ -3,15 +3,15 @@ related modal + magnific popup customization https://github.com/dimsemenov/Magnific-Popup */ .admin-interface .related-modal.mfp-bg { - background-color: {{ theme.related_modal_background_color }}; - opacity: {{ theme.related_modal_background_opacity }}; + background-color: var(--admin-interface-related-modal-background-color); + opacity: var(--admin-interface-related-modal-background-opacity); } .admin-interface .related-modal .mfp-content { height: 100%; - -webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); - -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); - box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); + -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2); } .admin-interface .related-modal .mfp-container { @@ -22,20 +22,22 @@ https://github.com/dimsemenov/Magnific-Popup padding: 40px 80px 40px 80px; } -@media (max-width:640px){ +@media (max-width: 640px) { .admin-interface .related-modal .mfp-container { padding: 80px 20px 80px 20px; } + .admin-interface .related-modal__nested .mfp-container { padding: 40px 40px 40px 40px; } } -@media (max-height:640px){ +@media (max-height: 640px) { .admin-interface .related-modal .mfp-container { padding-top: 20px; padding-bottom: 20px; } + .admin-interface .related-modal__nested .mfp-container { padding: 40px 40px 40px 40px; } @@ -48,9 +50,7 @@ https://github.com/dimsemenov/Magnific-Popup position: relative; z-index: 100; overflow: hidden; - {% if theme.related_modal_rounded_corners %} - border-radius: 4px; - {% endif %} + border-radius: var(--admin-interface-related-modal-border-radius); } .admin-interface .related-modal #related-modal-iframe { @@ -72,9 +72,7 @@ https://github.com/dimsemenov/Magnific-Popup height: 40px; opacity: 1.0; color: rgba(0, 0, 0, 0.4); - {% if not theme.related_modal_close_button_visible %} - display: none; - {% endif %} + display: var(--admin-interface-related-modal-close-button-display); } .admin-interface .related-modal .mfp-close:hover, diff --git a/admin_interface/templates/admin_interface/css/rtl.css b/admin_interface/static/admin_interface/css/rtl.css similarity index 100% rename from admin_interface/templates/admin_interface/css/rtl.css rename to admin_interface/static/admin_interface/css/rtl.css diff --git a/admin_interface/templates/admin_interface/css/sorl-thumbnail.css b/admin_interface/static/admin_interface/css/sorl-thumbnail.css similarity index 100% rename from admin_interface/templates/admin_interface/css/sorl-thumbnail.css rename to admin_interface/static/admin_interface/css/sorl-thumbnail.css diff --git a/admin_interface/templates/admin_interface/css/tabbed-admin.css b/admin_interface/static/admin_interface/css/tabbed-admin.css similarity index 100% rename from admin_interface/templates/admin_interface/css/tabbed-admin.css rename to admin_interface/static/admin_interface/css/tabbed-admin.css diff --git a/admin_interface/templates/admin_interface/css/tinymce.css b/admin_interface/static/admin_interface/css/tinymce.css similarity index 100% rename from admin_interface/templates/admin_interface/css/tinymce.css rename to admin_interface/static/admin_interface/css/tinymce.css diff --git a/admin_interface/templates/admin/base_site.html b/admin_interface/templates/admin/base_site.html index af980fe2..70515cc2 100644 --- a/admin_interface/templates/admin/base_site.html +++ b/admin_interface/templates/admin/base_site.html @@ -10,22 +10,101 @@ {% get_admin_interface_theme as theme %} {% get_admin_interface_nocache as version_md5_cache %} {% get_current_language as current_lang %} - + + + + + + {% if not theme.recent_actions_visible %} + + {% endif %} + + + + + + + + + {% if current_lang == 'fa' %} @@ -57,6 +136,7 @@ {% if theme.foldable_apps %} foldable-apps {% endif %} {% if theme.form_submit_sticky %} sticky-submit {% endif %} {% if theme.form_pagination_sticky %} sticky-pagination {% endif %} +{% if theme.list_filter_sticky %} list-filter-sticky {% endif %} {% endblock %} {% block branding %} @@ -83,5 +163,5 @@

{% get_admin_interface_languages as languages %} {% include "admin_interface/language_chooser.html" %} {% endif %} -{% if theme.env_visible_in_header %}
{% endif %}{{ block.super }}
+{% if theme.env_visible_in_header %}{{ theme.env_name }}
{% endif %}{{ block.super }}
{% endblock %} diff --git a/admin_interface/templates/admin_interface/css/admin-interface.css b/admin_interface/templates/admin_interface/css/admin-interface.css deleted file mode 100644 index 53a350fb..00000000 --- a/admin_interface/templates/admin_interface/css/admin-interface.css +++ /dev/null @@ -1,487 +0,0 @@ -@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, -.admin-interface.login #header h1, -.admin-interface.login #header h1 a { - color: {{ theme.title_color }}; -} - -.admin-interface #branding h1 a { - color: inherit; -} - -.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 #branding h1 img.logo, -.admin-interface.login #header #branding h1 img.logo { - {% if theme.logo_max_width > 0 %} - max-width: {{ theme.logo_max_width }}px; - max-width: min({{ theme.logo_max_width }}px, 100%); - {% else %} - max-width: 100%; - {% endif %} - {% if theme.logo_max_height > 0 %} - max-height: {{ theme.logo_max_height }}px; - {% endif %} -} - -.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 %} -} - -.admin-interface .module.collapse.collapsed h2 { - /* fix collapsed inlines rounded bottom borders */ - {% if theme.css_module_rounded_corners %} - border-bottom-left-radius:4px; - border-bottom-right-radius:4px; - {% 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 }}; -} diff --git a/admin_interface/templates/admin_interface/css/recent-actions.css b/admin_interface/templates/admin_interface/css/recent-actions.css deleted file mode 100644 index 2f437129..00000000 --- a/admin_interface/templates/admin_interface/css/recent-actions.css +++ /dev/null @@ -1,9 +0,0 @@ -{% if not theme.recent_actions_visible %} -.admin-interface.dashboard #content { - max-width:600px; - margin-right:0; -} -.admin-interface.dashboard #content #recent-actions-module { - display:none; -} -{% endif %} \ No newline at end of file