From 121ebe438f7a03a2fec90e77a7c3226420754a36 Mon Sep 17 00:00:00 2001 From: Fabian Braun Date: Tue, 16 Jan 2024 13:58:47 +0100 Subject: [PATCH] feat: Improved font and button sizes, fixes for Django 5 (#5) * Introduces nested css * Fix: Action button icon size Fix: wrong separator * Compress * Fix: Hover default buttons * Fix link color in tables * Update READEME * Bump version * Fix typo * Fix readme --- CHANGELOG.rst | 8 +- README.rst | 60 +-- djangocms_simple_admin_style/__init__.py | 2 +- .../css/djangocms-simple-admin.min.css | 2 +- .../templates/admin/base_site.html | 2 +- private/djangocms-simple-admin.css | 414 ++++++++++-------- 6 files changed, 274 insertions(+), 214 deletions(-) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 828ec90..d10c4b8 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -2,9 +2,11 @@ Changelog ========= -unreleased -========== - +Version 1.0.0 +============= +* Refactor CSS using nesting +* Optimize text and icon sizes +* Improve compatibility for with Django 5 admin * Fix select2 styling for 4 admin action buttons Version 0.4.9 diff --git a/README.rst b/README.rst index ef2d030..90f9e9c 100644 --- a/README.rst +++ b/README.rst @@ -1,56 +1,42 @@ -============================= -django CMS Simple Admin Style -============================= +===================================== +Django CMS Simple Admin Style +===================================== |pypi| |django| |djangocms| |djangocms4| -This is a simple alternative for the `django CMS Admin Style `_. While django CMS admin style reorganizes Django's admin to offer a unified user experience, this package has a much simpler objective: +Overview +-------- +The **Django CMS Simple Admin Style** is a lightweight alternative to the comprehensive `Django CMS Admin Style `_. Its goal is to refine the Django CMS interface with minimalistic changes: -* Adjust colors to be consistent with django CMS. -* Minimally adapt the css (e.g., add button borders) to keep the user interface consistent. -* Except this, avoid interfering with Django's admin styling: no `!important` statements, for example. -* Remove headers in django CMS' sidebar -* Remove headers, navigation and breadcrumbs in django CMS' modal +- Standardizing color schemes with Django CMS. +- Making minimal CSS adjustments like adding button borders for interface consistency. +- Restraining from interfering with Django's admin styling. +- Removing headers from Django CMS' sidebar and modal. -Also, no javascript is needed and all CSS is contained in a simple CSS file with less than 10kB in size. +All stylesheets are combined into a single CSS file under 10kB. -Documentation -============= - -See ``requires`` in the `pyproject.toml `_ -file for additional dependencies. +Browser Support +--------------- +The **Django CMS Simple Admin Style** uses CSS nesting to maintain a small stylesheet size, which makes it incompatible with Internet Explorer. It does work with all current versions of modern browsers. Visit `CanIUse `_ for more information on CSS features compatibility. Installation ------------ +For a manual installation: -For a manual install: - -* run ``pip install djangocms-simple-admin-style`` -* add ``djangocms_simple_admin_style`` to your ``INSTALLED_APPS`` just before ``'django.contrib.admin'`` - +- Run ``pip install djangocms-simple-admin-style`` +- Add ``djangocms_simple_admin_style`` to your ``INSTALLED_APPS`` just before ``'django.contrib.admin'`` -Configuration +Customization ------------- - -The django CMS Admin Style overrides django admin's ``base_site.html``, -but you can still partially customize this page. Look at the source of -``templates/admin/base_site.html`` and override the templates that are included in various blocks. For example, you can add your own CSS in -``templates/admin/inc/extrastyle.html``. +While the Django CMS Simple Admin Style overrides Django admin's ``base_site.html``, you can still customize this page using the source of ``templates/admin/base_site.html`` and override the templates included in various blocks. For instance, you can insert your own CSS in ``templates/admin/inc/extrastyle.html``. Contributing ------------ +To contribute: -Contributions are highly welcome! Install the development environment by typing - -.. code-block:: - - nvm use - npm install - -Changes are made in the ``private/djangocms-simple-admin.css`` file. - -Minify the file using ``. ./minify-css`` command. - +- Set up the development environment with ``nvm use`` and ``npm install``. +- Changes should be made in ``private/djangocms-simple-admin.css``. +- Use ``. ./minify-css`` to minify the updated CSS file. .. |pypi| image:: https://badge.fury.io/py/djangocms-simple-admin-style.svg :target: http://badge.fury.io/py/djangocms-simple-admin-style diff --git a/djangocms_simple_admin_style/__init__.py b/djangocms_simple_admin_style/__init__.py index 574c066..5becc17 100644 --- a/djangocms_simple_admin_style/__init__.py +++ b/djangocms_simple_admin_style/__init__.py @@ -1 +1 @@ -__version__ = "0.4.9" +__version__ = "1.0.0" diff --git a/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css b/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css index 009441c..4df50e6 100644 --- a/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css +++ b/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css @@ -1 +1 @@ -:root,body{--font-family-primary:Helvetica,Arial,sans-serif;--button-radius:4px;--primary:var(--dca-primary);--secondary:var(--dca-white);--accent:var(--primary);--primary-fg:var(--dca-white);--body-fg:var(--dca-gray-darkest);--body-bg:var(--dca-white);--header-color:var(--dca-black);--header-branding-color:var(--accent);--header-bg:var(--secondary);--header-link-color:var(--dca-gray-darkest);--breadcrumbs-fg:var(--dca-gray);--breadcrumbs-link-fg:var(--dca-primary);--breadcrumbs-bg:var(--dca-gray-lightest);--link-fg:var(--dca-primary);--hairline-color:var(--dca-gray-lightest);--border-color:var(--dca-gray-lighter);--error-fg:red;--darkened-bg:var(--dca-gray-lightest);--button-fg:var(--dca-gray-darker);--button-bg:var(--dca-white);--button-hover-bg:var(--dca-gray-lighter);--default-button-fg:var(--dca-white);--default-button-bg:var(--dca-primary);--object-tools-fg:var(--body-fg);--object-tools-bg:vaR(--dca-white);--object-tools-hover-bg:var(--dca-gray-lighter)}:root[data-color-scheme=light],:root[data-theme=light],html,html[data-color-scheme=light],html[data-theme=light],root{--dca-light-mode:1;--dca-dark-mode:0;--dca-white:#fff;--dca-black:#000;--dca-primary:#0bf;--dca-gray:#666;--dca-gray-lightest:#f2f2f2;--dca-gray-lighter:#ddd;--dca-gray-light:#999;--dca-gray-darker:#454545;--dca-gray-darkest:#333;--dca-gray-super-lightest:#f7f7f7;color-scheme:light}@media (prefers-color-scheme:dark){:root{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#999;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#aaa;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}}:root[data-theme=dark],html[data-color-scheme=dark],html[data-theme=dark],root[data-color-scheme=dark]{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#999;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#aaa;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}.dashboard #content{width:calc(100% - 340px)}h1{font-size:1.4rem}h2{font-size:1.25rem}h3{font-size:1rem}.inline-group h2,.module caption,h4,td,th{font-size:.875rem}.help,.small,div.help,div.help li,form div.help,form p.help,h5,p.help{font-size:.75rem}.mini{font-size:.6815rem}dd,dt,li{font-size:.875rem;line-height:1.4rem}.inline-group h2,.module caption,.module h2{background:var(--body-bg);color:var(--body-fg)}#nav-sidebar .module caption{background:var(--primary)}#nav-sidebar .current-app .section:link,#nav-sidebar .current-app .section:visited,#nav-sidebar .section:link,#nav-sidebar .section:visited{color:var(--dca-white)}#nav-sidebar a{color:var(--body-fg)}.submit-row{background:var(--dca-white,#fff)}.button.default,.submit-row a.deletelink,.submit-row input.default,input[type=submit].default{color:var(--dca-white,#fff)}.delete-confirmation a.cancel-link,.submit-row a.closelink{background:var(--dca-white,#fff);color:var(--dca-black,#000)}.button,.submit-row input,a.button,input[type=button],input[type=submit]{border:1px solid var(--dca-gray-lighter,#ddd)}.delete-confirmation a.cancel-link:hover,.submit-row a.closelink:hover{background:var(--dca-gray-lightest,#fff)}.object-tools a{border:1px solid var(--dca-gray-lighter);border-radius:var(--button-radius)}.object-tools a.addlink{background-color:var(--default-button-bg);border-color:var(--default-button-fg);color:var(--default-button-fg)}.object-tools a.addlink:focus,.object-tools a.addlink:hover{background-color:var(--default-button-hover-bg)}th{font-weight:400}.inline-group h2,.module caption,.module h2{font-weight:600}.aligned label:not(.btn){color:var(--body-fg);float:unset;font-weight:600;width:unset}#user-tools #logout-form button,#user-tools a:link,#user-tools a:visited{color:var(--primary)}#logout-form button:active,#logout-form button:hover{margin-bottom:2px;padding-bottom:1px}.aligned .fieldBox>label:first-child,.flex-container,.form-row>div>label{display:block}.required label:not(.vCheckboxLabel):after,label.required:not(.vCheckboxLabel):after{color:var(--delete-button-bg);content:"*"}form .aligned div.help,form .aligned p.help,form .wide input+div.help,form .wide input+p.help,form .wide p,form .wide ul.errorlist{margin-left:0;padding-left:0}form button{background-color:var(--default-button-bg);border:1px solid var(--default-button-bg);border-radius:var(--button-radius);color:var(--default-button-fg);font-family:var(--font-family-primary);font-size:.8125rem;font-weight:400;margin:2px 0;padding:5px 6px;vertical-align:middle}.aligned label+div.help,.aligned label+div.readonly,.aligned label+p,form .aligned input+div.help,form .aligned input+p.help,form .aligned select+div.help,form .aligned select+p.help,form .aligned textarea+div.help,form .aligned textarea+p.help,form .aligned ul{margin-left:0;padding-left:0}.button,.submit-row input,a.button,input[type=button],input[type=submit]{font-size:14px}aa.button{outline:1px solid var(--dca-gray-lighter,#ddd);padding:9px 14px}.colM .aligned .vLargeTextField,.colM .aligned .vXMLLargeTextField,.vLargeTextField,.vTextField,.vURLField,.vUUIDField,.vXMLLargeTextField,input[type=email],input[type=text],input[type=url],textarea{width:calc(100% - 10px)}.datetime input,.form-row .datetime input.vDateField,.form-row .datetime input.vTimeField{margin-left:0}#changelist-search input[type=text]{width:unset}.form-row p,form .button,input,select,textarea{font-family:unset}div.form-row:not([hidden]){display:flex;flex-wrap:wrap;overflow:unset;padding-left:0;padding-right:0}.auth-user.change-form div.form-row:not([hidden]){display:block}div.form-row>div:not(.help){flex:1 0 0;margin-right:10px;width:100%}.form-row>ul.errorlist{width:100%}fieldset.collapse.collapsed .form-row{display:none}.change-form .select2-container,.change-form select,.related-widget-wrapper{width:100%}.change-form .related-widget-wrapper>select,.related-widget-wrapper>.select2-container{width:calc(100% - 108px)}.related-widget-wrapper>.select2-container .select2{width:calc(100% - 108px)!important}select[multiple]{min-width:200px}.colMS .aligned .vLargeTextField,.colMS .aligned .vXMLLargeTextField{width:unset}@media (max-width:1024px){.djangocms-simple-admin-style fieldset .fieldBox+.fieldBox{border-top:unset;margin-top:0;padding-top:0}}body.cms-admin a.skip-to-content-link,body.cms-admin-modal #header,body.cms-admin-sideframe #header{display:none}body.cms-admin-sideframe #container{padding-top:46px}body.cms-admin-modal #changelist{margin-top:20px}body.cms-admin-modal .object-tools{padding-top:20px}body.cms-admin-sideframe #content>h1{display:none}body.cms-admin-sideframe .object-tools{margin-right:92px}body.cms-admin-modal #content>h2,body.cms-admin-modal #nav-sidebar,body.cms-admin-modal #toggle-nav-sidebar,body.cms-admin-modal .breadcrumbs,body.cms-admin-modal .hide-in-modal,body.cms-admin-modal .object-tools{display:none}body.cms-admin-modal .main.shifted>#nav-sidebar+.content,body.cms-admin-modal .main>#nav-sidebar+.content{max-width:100%}.main.shifted>#nav-sidebar+.content{max-width:calc(100% - 299px)}body.cms-admin-sideframe.djangocms-simple-admin-style{margin-top:0}fieldset .collapse-toggle{color:var(--dca-primary)}.djangocms-simple-admin-style .parler-language-tabs span.current{background-color:var(--primary);border-color:var(--primary);color:var(--dca-white)}.djangocms-simple-admin-style .parler-language-tabs span.available,.djangocms-simple-admin-style .parler-language-tabs span.current,.djangocms-simple-admin-style .parler-language-tabs span.empty{border-radius:var(--button-radius) var(--button-radius) 0 0}.djangocms-simple-admin-style .parler-language-tabs{border-bottom-color:var(--primary)}.parler-language-tabs a:link,.parler-language-tabs a:visited{color:var(--body-fg)}#page_form_lang_tabs{border-bottom:2px solid var(--primary)}#page_form_lang_tabs input[type=button]{border-bottom:none;border-radius:var(--button-radius) var(--button-radius) 0 0;margin-bottom:0;padding:5px 15px}.djangocms-simple-admin-style #page_form_lang_tabs input[type=button].language_button.selected{background-color:var(--default-button-bg);border-color:var(--default-button-bg);color:var(--default-button-fg)}.insertlinkButton{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230bf'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");display:inline-block;height:16px;width:16px}.cms-btn-group{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:0;line-height:15px;margin-left:-5px;margin-right:0;padding:10px 15px}.cms-btn,.cms-btn-group{background:var(--button-bg);color:var(--button-fg);display:inline-block}.cms-btn{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:var(--button-radius);margin-left:5px}a.cms-btn-group,a.cms-btn-group:hover,a.cms-btn-group:link{color:var(--button-fg)}.cms-btn-group:first-child{border-bottom-left-radius:4px;border-top-left-radius:4px;margin-left:5px}.cms-btn-group:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px}.cms-btn-active{background-color:var(--dca-gray-lighter)}.djangocms-simple-admin-style a.btn.cms-action-btn{bottom:-3px;height:28px;width:28px}.djangocms-simple-admin-style a.btn.cms-action-btn span{font-size:100%}.delete-confirmation form input[type=submit]{color:var(--dca-white)}.cms-admin-modal.delete-confirmation .cancel-link,.cms_modal-window.delete-confirmation .cancel-link,.popup.delete-confirmation .cancel-link{display:none} \ No newline at end of file +:root,body{--font-family-primary:Helvetica,Arial,sans-serif;--button-radius:4px;--primary:var(--dca-primary);--secondary:var(--dca-white);--accent:var(--primary);--primary-fg:var(--dca-white);--body-fg:var(--dca-gray-darkest);--body-bg:var(--dca-white);--header-color:var(--dca-black);--header-branding-color:var(--accent);--header-bg:var(--secondary);--header-link-color:var(--dca-gray-darkest);--breadcrumbs-fg:var(--dca-gray);--breadcrumbs-link-fg:var(--dca-primary);--breadcrumbs-bg:var(--dca-gray-lightest);--link-fg:var(--dca-primary);--link-selected-fg:var(--dca-primary);--hairline-color:var(--dca-gray-lightest);--border-color:var(--dca-gray-lighter);--error-fg:red;--darkened-bg:var(--dca-gray-lightest);--button-fg:var(--dca-gray-darker);--button-bg:var(--dca-white);--button-hover-bg:var(--dca-gray-lighter);--default-button-fg:var(--dca-white);--default-button-bg:var(--dca-primary);--default-button-hover-bg:var(--dca-primary);--object-tools-fg:var(--body-fg);--object-tools-bg:vaR(--dca-white);--object-tools-hover-bg:var(--dca-gray-lighter)}:root[data-color-scheme=light],:root[data-theme=light],html,html[data-color-scheme=light],html[data-theme=light],root{--dca-light-mode:1;--dca-dark-mode:0;--dca-white:#fff;--dca-black:#000;--dca-primary:#0bf;--dca-gray:#666;--dca-gray-lightest:#f2f2f2;--dca-gray-lighter:#ddd;--dca-gray-light:#999;--dca-gray-darker:#454545;--dca-gray-darkest:#333;--dca-gray-super-lightest:#f7f7f7;color-scheme:light}@media (prefers-color-scheme:dark){:root{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#999;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#aaa;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}}:root[data-theme=dark],html[data-color-scheme=dark],html[data-theme=dark],root[data-color-scheme=dark]{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#999;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#aaa;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}.dashboard #content{width:calc(100% - 340px)}h1{font-size:1.6rem}h2{font-size:1.4rem}h3{font-size:1.2rem}#changelist .actions label,.inline-group h2,.module caption,.module h2,h4,label{font-size:1rem}.help,.small,div.help,div.help li,form div.help,form p.help,h5,p.help,td,th,thead th{font-size:.875rem}.mini{font-size:.75rem}dd,dt,li{font-size:1rem;line-height:1.6rem}table thead th .text span{padding:12px}a:link,a:visited{color:var(--dca-primary)}.inline-group h2,.module caption,.module h2{background:var(--body-bg);color:var(--body-fg);font-size:revert}.module>h2{padding-left:0}#nav-sidebar{& .module caption{background:var(--primary)};& .current-app .section:link,& .current-app .section:visited,& .section:link,& .section:visited{color:var(--dca-white)};a{color:var(--body-fg)};}a.addlink{min-height:16px;min-width:16px}.button.default,.submit-row input.default,input[type=submit].default{color:var(--dca-white,#fff);transition:filter .15s}.button.default:active,.button.default:focus,.button.default:hover,input[type=submit].default:active,input[type=submit].default:focus,input[type=submit].default:hover{filter:brightness(.8)}.submit-row{background:var(--dca-white,#fff);& a.deletelink{color:var(--dca-white,#fff)}& a.closelink{background:var(--dca-white,#fff);color:var(--dca-black,#000)}}.delete-confirmation a.cancel-link{background:var(--dca-white,#fff);color:var(--dca-black,#000)}.button,.submit-row input,a.button,input[type=button],input[type=submit]{border:1px solid var(--dca-gray-lighter,#ddd)}.delete-confirmation a.cancel-link:hover,.submit-row a.closelink:hover{background:var(--dca-gray-lightest,#fff)}.object-tools{& a{border:1px solid var(--dca-gray-lighter);border-radius:var(--button-radius)}& a.addlink{background-color:var(--default-button-bg);border-color:var(--default-button-fg);color:var(--default-button-fg);&:focus,&:hover{background-color:var(--default-button-hover-bg)}}}.module{& tr{height:2.3rem}& td,& th{border-bottom:1px solid var(--dca-gray-lighter)}& th{font-weight:400;vertical-align:middle}& caption,& h2{font-weight:600}}.inline-group h2{font-weight:600}.aligned label:not(.btn){color:var(--body-fg);font-weight:600;margin-bottom:2px;width:inherit}.aligned .checkbox-row label{width:auto}#user-tools #logout-form button,#user-tools a:link,#user-tools a:visited{color:var(--primary)}#logout-form button:active,#logout-form button:hover{margin-bottom:2px;padding-bottom:1px}.aligned .fieldBox>label:first-child,.form-row>div>label{dispxlay:block}.required label:not(.vCheckboxLabel):after,label.required:not(.vCheckboxLabel):after{color:var(--delete-button-bg);content:"*"}form{.aligned div.help,.aligned p.help,.wide input+div.help,.wide input+p.help,.wide p,.wide ul.errorlist{margin-left:0;padding-left:0};button{background-color:var(--default-button-bg);border:1px solid var(--default-button-bg);border-radius:var(--button-radius);color:var(--default-button-fg);font-family:var(--font-family-primary);font-size:.8125rem;font-weight:400;margin:2px 0;padding:5px 6px;vertical-align:middle};.aligned input+div.help,.aligned input+p.help,.aligned label+div.help,.aligned label+div.readonly,.aligned label+p,.aligned select+div.help,.aligned select+p.help,.aligned textarea+div.help,.aligned textarea+p.help,.aligned ul{margin-left:0;padding-left:0};.button,.form-row,input,select,textarea{font-size:inherit};.selector h2{font-size:1rem};.selector input[type=text]{padding:5px 6px};.selector label{float:left}}.button,.submit-row input,a.button,input[type=button],input[type=submit]{font-size:14px}aa.button{outline:1px solid var(--dca-gray-lighter,#ddd);padding:9px 14px}.colM .aligned .vLargeTextField,.colM .aligned .vXMLLargeTextField,.vLargeTextField,.vTextField,.vURLField,.vUUIDField,.vXMLLargeTextField,input[type=email],input[type=text],input[type=url],textarea{width:calc(100% - 10px)}.vTextField,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],select,textarea{padding:10px}.datetime input,.form-row .datetime input.vDateField,.form-row .datetime input.vTimeField{margin-left:0}#changelist-search input[type=text]{width:unset}.form-row p,form .button,input,select,textarea{font-family:unset}div.form-row:not([hidden]){display:flex;flex-wrap:wrap;overflow:unset;padding-left:0;padding-right:0}.auth-user.change-form div.form-row:not([hidden]){display:block}div.form-row>div:not(.help){flex:1 0 0;margin-right:10px;width:100%}.form-row>ul.errorlist{width:100%}fieldset.collapse.collapsed .form-row{display:none}.change-form .select2-container,.change-form select,.related-widget-wrapper{width:100%}.change-form .related-widget-wrapper>select,.related-widget-wrapper>.select2-container{width:calc(100% - 108px)}.related-widget-wrapper>.select2-container .select2{width:calc(100% - 108px)!important}select[multiple]{min-width:200px}.colMS .aligned .vLargeTextField,.colMS .aligned .vXMLLargeTextField{width:unset}@media (max-width:1024px){form fieldset .fieldBox+.fieldBox{border-top:unset;margin-top:0;padding-top:0}}.cms-admin a.skip-to-content-link{display:none}.cms-admin-modal{#content>h2,#header,#nav-sidebar,#toggle-nav-sidebar,.breadcrumbs,.hide-in-modal,.object-tools{display:none};#changelist{margin-top:20px};.object-tools{padding-top:20px};.main.shifted>#nav-sidebar+.content,.main>#nav-sidebar+.content{max-width:100%}}.cms-admin-sideframe{margin-top:0;#content>h1,#header{display:none};#container{padding-top:46px};.object-tools{margin-right:92px}}.main.shifted>#nav-sidebar+.content{max-width:calc(100% - 299px)}fieldset .collapse-toggle{color:var(--dca-primary)}.parler-language-tabs{border-bottom-color:var(--primary);a:link,a:visited{color:var(--body-fg)};span.available,span.current,span.empty{border-radius:var(--button-radius) var(--button-radius) 0 0};span.current{background-color:var(--primary);border-color:var(--primary);color:var(--dca-white)}}#page_form_lang_tabs{border-bottom:2px solid var(--primary);input[type=button]{border-bottom:none;border-radius:var(--button-radius) var(--button-radius) 0 0;margin-bottom:0;padding:5px 15px;&.language_button.selected{background-color:var(--default-button-bg);border-color:var(--default-button-bg);color:var(--default-button-fg)}}}.insertlinkButton{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230bf'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");display:inline-block;height:16px;width:16px}.cms-btn-group{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:0;line-height:15px;margin-left:-5px;margin-right:0;padding:10px 15px}.cms-btn,.cms-btn-group{background:var(--button-bg);color:var(--button-fg);display:inline-block}.cms-btn{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:var(--button-radius);margin-left:5px}a.cms-btn-group,a.cms-btn-group:hover,a.cms-btn-group:link{color:var(--button-fg)}.cms-btn-group:first-child{border-bottom-left-radius:4px;border-top-left-radius:4px;margin-left:5px}.cms-btn-group:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px}.cms-btn-active{background-color:var(--dca-gray-lighter)}a.btn.cms-action-btn{bottom:-3px;height:28px;width:28px;span{font-size:94%}}.delete-confirmation form input[type=submit]{color:var(--dca-white)}.cms-admin-modal.delete-confirmation .cancel-link,.cms_modal-window.delete-confirmation .cancel-link,.popup.delete-confirmation .cancel-link{display:none} \ No newline at end of file diff --git a/djangocms_simple_admin_style/templates/admin/base_site.html b/djangocms_simple_admin_style/templates/admin/base_site.html index 375477e..e864cbc 100644 --- a/djangocms_simple_admin_style/templates/admin/base_site.html +++ b/djangocms_simple_admin_style/templates/admin/base_site.html @@ -13,4 +13,4 @@ {% endblock extrahead %} {% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %} -{% block bodyclass %}{{ block.super }} djangocms-simple-admin-style{% endblock %} +{% block bodyclass %}djangocms-simple-admin-style{% if block.super %} {{ block.super }}{% endif %}{% endblock %} diff --git a/private/djangocms-simple-admin.css b/private/djangocms-simple-admin.css index 594e30a..76c9da7 100644 --- a/private/djangocms-simple-admin.css +++ b/private/djangocms-simple-admin.css @@ -25,7 +25,7 @@ --link-fg: var(--dca-primary); /*--link-hover-color: #036;*/ - /*--link-selected-fg: #5b80b2;*/ + --link-selected-fg: var(--dca-primary); --hairline-color: var(--dca-gray-lightest); --border-color: var(--dca-gray-lighter); @@ -46,6 +46,7 @@ --button-hover-bg: var(--dca-gray-lighter); --default-button-fg: var(--dca-white); --default-button-bg: var(--dca-primary); + --default-button-hover-bg: var(--dca-primary); /*--close-button-bg: #747474;*/ /*--close-button-hover-bg: #333;*/ /*--delete-button-bg: #ba2121;*/ @@ -120,172 +121,247 @@ html[data-color-scheme="dark"], html[data-theme="dark"] { } /* Font sizes */ - h1 { - font-size: 1.4rem; + font-size: 1.6rem; } - h2 { - font-size: 1.25rem; + font-size: 1.4rem; } - h3 { + font-size: 1.2rem; +} +h4, .module h2, .module caption, .inline-group h2, +#changelist .actions label, label { font-size: 1rem; } - -h4, td, th, .module caption, .inline-group h2 { +h5, .small, td, th, thead th, .help, p.help, form p.help, div.help, form div.help, div.help li { font-size: 0.875rem; } - -h5, .small, .help, p.help, form p.help, div.help, form div.help, div.help li { +.mini { font-size: 0.75rem; } +li, dt, dd { + font-size: 1rem; + line-height: 1.6rem; +} -.mini { - font-size: 0.6815rem; +table thead th .text span { + padding: 12px; } -li, dt, dd { - font-size: 0.875rem; - line-height: 1.4rem; +a:link, a:visited { + color: var(--dca-primary); } /* Colors */ - .module h2, .module caption, .inline-group h2 { background: var(--body-bg); - color: var(--body-fg) + color: var(--body-fg); + font-size: revert; } -#nav-sidebar .module caption { - background: var(--primary); -} -#nav-sidebar .section:link, -#nav-sidebar .section:visited, -#nav-sidebar .current-app .section:link, -#nav-sidebar .current-app .section:visited { - color: var(--dca-white); +.module > h2 { + padding-left: 0; } -#nav-sidebar a { - color: var(--body-fg); +#nav-sidebar { + & .module caption { + background: var(--primary); + }; + + & .section:link, + & .section:visited, + & .current-app .section:link, + & .current-app .section:visited { + color: var(--dca-white); + }; + + a { + color: var(--body-fg); + }; } -.submit-row { - background: var(--dca-white, #fff); +a.addlink { + min-width: 16px; + min-height: 16px; } +/* Buttons */ .button.default, input[type=submit].default, .submit-row input.default { color: var(--dca-white, #fff); + transition: filter 0.15s; +} +.button.default:active, +input[type=submit].default:active, +.button.default:focus, +input[type=submit].default:focus, +.button.default:hover, +input[type=submit].default:hover { + filter: brightness(0.8); } -.submit-row a.deletelink { - color: var(--dca-white, #fff); +/* Form submit buttons */ +.submit-row { + background: var(--dca-white, #fff); + & a.deletelink { + color: var(--dca-white, #fff); + } + & a.closelink { + color: var(--dca-black, #000); + background: var(--dca-white, #fff); + } } -.submit-row a.closelink, .delete-confirmation a.cancel-link { +.delete-confirmation a.cancel-link { color: var(--dca-black, #000); background: var(--dca-white, #fff); } -.button, input[type=submit], input[type=button], .submit-row input, a.button { +.button, input[type=submit], +input[type=button], +.submit-row input, +a.button { border: 1px solid var(--dca-gray-lighter, #ddd); } -.submit-row a.closelink:hover, .delete-confirmation a.cancel-link:hover { +.submit-row a.closelink:hover, +.delete-confirmation a.cancel-link:hover { background: var(--dca-gray-lightest, #fff); } -.object-tools a { - border-radius: var(--button-radius); - border: 1px solid var(--dca-gray-lighter); +.object-tools { + & a { + border-radius: var(--button-radius); + border: 1px solid var(--dca-gray-lighter); + } + & a.addlink { + color: var(--default-button-fg); + border-color: var(--default-button-fg); + background-color: var(--default-button-bg); + &:focus,&:hover { + background-color: var(--default-button-hover-bg); + } + } } -.object-tools a.addlink { - color: var(--default-button-fg); - border-color: var(--default-button-fg); - background-color: var(--default-button-bg); -} +/* Tables */ +.module { + & tr { + height: 2.3rem; + } -.object-tools a.addlink:focus, .object-tools a.addlink:hover{ - background-color: var(--default-button-hover-bg); -} + & th, & td { + border-bottom: 1px solid var(--dca-gray-lighter); + } -/* Tables */ -th { - font-weight: 400; + & th { + font-weight: 400; + vertical-align: middle; + } + & h2, & caption { + font-weight: 600; + } } -.module h2, .module caption, .inline-group h2 { + +/* Form labels */ + +.inline-group h2 { font-weight: 600; } .aligned label:not(.btn) { - float: unset; - width: unset; + width: inherit; color: var(--body-fg); font-weight: 600; + margin-bottom: 2px; } +.aligned .checkbox-row label { + width: auto; +} /* User tools */ #user-tools #logout-form button, -#user-tools a:link, #user-tools a:visited { +#user-tools a:link, +#user-tools a:visited { color: var(--primary); } -#logout-form button:active, #logout-form button:hover { +#logout-form button:active, +#logout-form button:hover { margin-bottom: 2px; padding-bottom: 1px; } /* Forms */ -.flex-container { - display: block; -} -.aligned .fieldBox > label:first-child, .form-row > div > label { - display: block; +.aligned .fieldBox > label:first-child, +.form-row > div > label { + dispxlay: block; } -.required label:not(.vCheckboxLabel):after, label.required:not(.vCheckboxLabel):after { +.required label:not(.vCheckboxLabel):after, +label.required:not(.vCheckboxLabel):after { color: var(--delete-button-bg); content: "*"; } -form .aligned p.help, form .aligned div.help, -form .wide p, form .wide ul.errorlist, form .wide input + p.help, -form .wide input + div.help { - margin-left: 0; - padding-left: 0; -} - - -form button { - margin: 2px 0; - padding: 5px 6px; - vertical-align: middle; - font-family: var(--font-family-primary); - font-weight: normal; - font-size: 0.8125rem; - background-color: var(--default-button-bg); - color: var(--default-button-fg); - border: 1px solid var(--default-button-bg); - border-radius: var(--button-radius); -} - -.aligned label + p, .aligned label + div.help, .aligned label + div.readonly, -form .aligned input + p.help, form .aligned textarea + p.help, form .aligned select + p.help, -form .aligned input + div.help, form .aligned textarea + div.help, form .aligned select + div.help, -form .aligned input + p.help, -form .aligned textarea + p.help, -form .aligned select + p.help, -form .aligned input + div.help, -form .aligned textarea + div.help, -form .aligned select + div.help, -form .aligned ul { - margin-left: 0; - padding-left: 0; +form { + .aligned p.help, + .aligned div.help, + .wide p, + .wide ul.errorlist, + .wide input + p.help, + .wide input + div.help { + margin-left: 0; + padding-left: 0; + }; + button { + margin: 2px 0; + padding: 5px 6px; + vertical-align: middle; + font-family: var(--font-family-primary); + font-weight: normal; + font-size: 0.8125rem; + background-color: var(--default-button-bg); + color: var(--default-button-fg); + border: 1px solid var(--default-button-bg); + border-radius: var(--button-radius); + }; + + .aligned label + p, + .aligned label + div.help, + .aligned label + div.readonly, + .aligned input + p.help, + .aligned textarea + p.help, + .aligned select + p.help, + .aligned input + div.help, + .aligned textarea + div.help, + .aligned select + div.help, + .aligned input + p.help, + .aligned textarea + p.help, + .aligned select + p.help, + .aligned input + div.help, + .aligned textarea + div.help, + .aligned select + div.help, + .aligned ul { + margin-left: 0; + padding-left: 0; + }; + + input, textarea, select, .form-row, .button { + font-size: inherit; + }; + .selector h2 { + font-size: 1rem; + }; + .selector input[type="text"] { + padding: 5px 6px; + }; + .selector label { + float: left; + } } .button, input[type=submit], input[type=button], .submit-row input, a.button { @@ -303,6 +379,10 @@ textarea { width: calc(100% - 10px); } +input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], textarea, select, .vTextField { + padding: 10px; +} + .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { margin-left: 0; } @@ -324,6 +404,7 @@ div.form-row:not([hidden]) { } /* Except user-auth change form */ + .auth-user.change-form div.form-row:not([hidden]) { display: block; } @@ -350,12 +431,13 @@ fieldset.collapse.collapsed .form-row { width: 100%; } -.change-form .related-widget-wrapper > select, .related-widget-wrapper > .select2-container { +.change-form .related-widget-wrapper > select, +.related-widget-wrapper > .select2-container { width: calc(100% - 108px); } .related-widget-wrapper > .select2-container .select2 { - width: calc(100% - 108px) !important; /* Overwrite inline style */ + width: calc(100% - 108px) !important; /* Overwrite inline style */ } select[multiple] { @@ -369,7 +451,7 @@ select[multiple] { /* Remove wrong additional separator line for responsive display */ @media (max-width: 1024px) { - .djangocms-simple-admin-style fieldset .fieldBox + .fieldBox { + form fieldset .fieldBox + .fieldBox { border-top: unset; margin-top: 0; padding-top: 0; @@ -377,59 +459,54 @@ select[multiple] { } /* Hide components not needed in sidebar or modal */ - -body.cms-admin a.skip-to-content-link { +.cms-admin a.skip-to-content-link { display: none; } -body.cms-admin-sideframe #header, body.cms-admin-modal #header { - display: none; -} - -body.cms-admin-sideframe #container { - padding-top: 46px; -} - -body.cms-admin-modal #changelist { - margin-top: 20px; -} - -body.cms-admin-modal .object-tools { - padding-top: 20px; -} - -body.cms-admin-sideframe #content > h1 { - display: none; -} - -body.cms-admin-sideframe .object-tools { - margin-right: 92px; /* Space for cms navigation butons */ +.cms-admin-modal { + #header, + #content > h2, + #nav-sidebar, + #toggle-nav-sidebar, + .breadcrumbs, + .hide-in-modal, + .object-tools { + display: none; + }; + #changelist { + margin-top: 20px; + }; + .object-tools { + padding-top: 20px; + }; + /* Remove space reserved for (hidden) sidebar */ + .main > #nav-sidebar + .content, + .main.shifted > #nav-sidebar + .content { + max-width: 100%; + } } -body.cms-admin-modal .breadcrumbs, -body.cms-admin-modal .object-tools, -body.cms-admin-modal #toggle-nav-sidebar, -body.cms-admin-modal #nav-sidebar, -body.cms-admin-modal .hide-in-modal, -body.cms-admin-modal #content > h2 { - display: none; +.cms-admin-sideframe { + margin-top: 0; + #header { + display: none; + }; + #content > h1 { + display: none; + }; + #container { + padding-top: 46px; + }; + .object-tools { + margin-right: 92px; /* Space for cms navigation butons */ + } } -/* Remove space reserved for (hidden) sidebar */ -body.cms-admin-modal .main > #nav-sidebar + .content, -body.cms-admin-modal .main.shifted > #nav-sidebar + .content { - max-width: 100%; -} .main.shifted > #nav-sidebar + .content { max-width: calc(100% - 299px); } - -body.cms-admin-sideframe.djangocms-simple-admin-style { - margin-top: 0; -} - /* Collapse link */ fieldset .collapse-toggle { @@ -438,43 +515,38 @@ fieldset .collapse-toggle { /* Parler styles */ -.djangocms-simple-admin-style .parler-language-tabs span.current { - color: var(--dca-white); - background-color: var(--primary); - border-color: var(--primary); -} - -.djangocms-simple-admin-style .parler-language-tabs span.available, -.djangocms-simple-admin-style .parler-language-tabs span.current, -.djangocms-simple-admin-style .parler-language-tabs span.empty { - border-radius: var(--button-radius) var(--button-radius) 0 0; -} - -.djangocms-simple-admin-style .parler-language-tabs { +.parler-language-tabs { border-bottom-color: var(--primary); -} - -.parler-language-tabs a:link, .parler-language-tabs a:visited { - color: var(--body-fg); + a:link, a:visited { + color: var(--body-fg); + }; + span.available, + span.current, + span.empty { + border-radius: var(--button-radius) var(--button-radius) 0 0; + }; + span.current { + color: var(--dca-white); + background-color: var(--primary); + border-color: var(--primary); + } } /* Language tabs */ #page_form_lang_tabs { border-bottom: 2px solid var(--primary); -} - -#page_form_lang_tabs input[type="button"] { - border-radius: var(--button-radius) var(--button-radius) 0 0; - border-bottom: none; - margin-bottom: 0; - padding: 5px 15px 5px 15px; -} - -.djangocms-simple-admin-style #page_form_lang_tabs input[type=button].language_button.selected { - color: var(--default-button-fg); - background-color: var(--default-button-bg); - border-color: var(--default-button-bg); + input[type="button"] { + border-radius: var(--button-radius) var(--button-radius) 0 0; + border-bottom: none; + margin-bottom: 0; + padding: 5px 15px 5px 15px; + &.language_button.selected { + color: var(--default-button-fg); + background-color: var(--default-button-bg); + border-color: var(--default-button-bg); + } + } } /* Filer styles */ @@ -487,6 +559,7 @@ fieldset .collapse-toggle { } /* CMS buttons */ + .cms-btn-group { border: 1px solid var(--dca-gray-lighter, #ddd); display: inline-block; @@ -527,14 +600,13 @@ a.cms-btn-group:link, a.cms-btn-group, a.cms-btn-group:hover { background-color: var(--dca-gray-lighter); } -.djangocms-simple-admin-style a.btn.cms-action-btn { +a.btn.cms-action-btn { width: 28px; height: 28px; bottom: -3px; -} - -.djangocms-simple-admin-style a.btn.cms-action-btn span { - font-size: 100%; + span { + font-size: 94%; + } } /* Django button */