Updated CHANGELOG and version.

.github/workflows/test-package.yml

@@ -6,12 +6,40 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
+  create_matrix:
+    
+    runs-on: ubuntu-latest  
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      
+      - name: Create matrix
+        uses: fabiocaccamo/create-matrix-action@v1
+        with:
+          matrix: |
+            python-version {2.7}, django-version {1.8,1.9,1.10,1.11}, database {sqlite,postgres}
+            python-version {3.6}, django-version {1.8,1.9,1.10,1.11,2.0,2.1,2.2,3.0,3.1,3.2}, database {sqlite,postgres}
+            python-version {3.7}, django-version {2.0,2.1,2.2,3.0,3.1,3.2}, database {sqlite,postgres}
+            python-version {3.8}, django-version {2.2,3.0,3.1,3.2}, database {sqlite,postgres}
+            python-version {3.9}, django-version {2.2,3.0,3.1,3.2}, database {sqlite,postgres}
+            python-version {3.10}, django-version {3.2,4.0}, database {sqlite,postgres}
+
+      - name: Set matrix output variable 
+        id: set_matrix
+        run: |
+          echo "::set-output name=matrix::$(cat ./matrix.json)" 
+     
+    outputs:
+      matrix: ${{ steps.set_matrix.outputs.matrix }}
+        
+  run_tests:
+  
+    needs: create_matrix
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix: 
-        python-version: ['2.7', '3.6', '3.7', '3.8', '3.9', '3.10']
+        include: ${{fromJson(needs.create_matrix.outputs.matrix)}}
 
     services:
       postgres:
@@ -38,12 +66,37 @@ jobs:
     - name: Install psycopg2 prerequisites
       run: sudo apt-get install libpq-dev
 
-    - name: Install dependencies
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v2
+      with:
+        python-version: ${{ matrix.python-version }}
+        cache: 'pip'
+      
+    - name: Upgrade pip version
+      run: |
+        pip install pip --upgrade
+    
+    - name: Install django
+      run: |
+        pip install "Django ~= ${{ matrix.django-version }}"
+    
+    - name: Install requirements
       run: |
-        python -m pip install --upgrade pip
         pip install -r requirements.txt
         pip install -r requirements-test.txt
-        pip install tox tox-gh-actions
         
-    - name: Test with tox
-      run: tox
+    - name: Run tests
+      env: 
+        DATABASE_ENGINE: ${{ matrix.database }}
+      run: |
+        coverage run --append --source=admin_interface setup.py test
+        coverage xml -o ./coverage.xml
+    
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v2
+      with:
+        fail_ci_if_error: false
+        files: ./coverage.xml
+        flags: unittests
+        verbose: true
+        

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.19.0](https://github.com/fabiocaccamo/django-admin-interface/releases/tag/0.19.0) - 2022-03-08
+-  Converted dynamic inline CSS to external static CSS using CSS variables. #157 #93 (thanks to [@Mustafa-Abu-Ghazy](https://github.com/Mustafa-Abu-Ghazy))
+
 ## [0.18.7](https://github.com/fabiocaccamo/django-admin-interface/releases/tag/0.18.7) - 2022-02-24
 -  Removed public disclosures of the lib's version. #154 (thanks to [@mintyPT](https://github.com/mintyPT))
 -  Reformatted code with **Black**.

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);
+}

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;
 }
 

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;
 }

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;
+}

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,

admin_interface/templates/admin_interface/css/recent-actions.css

@@ -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 %}

admin_interface/version.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-__version__ = "0.18.7"
+__version__ = "0.19.0"