Revert "Converted dynamic inline CSS to external static CSS using CSS variables. #157 #93"

This reverts commit 8fe7178a13.

admin_interface/static/admin_interface/css/admin-interface.css

@@ -1,440 +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);
-    }
-}
-
-.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/recent-actions.css

@@ -1,13 +0,0 @@
-.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/templates/admin_interface/css/jquery.ui.tabs.css

@@ -13,127 +13,27 @@ backward compatibility:
 
 /* Layout helpers
 ----------------------------------*/
-.ui-helper-hidden {
+.ui-helper-hidden { display: none; }
-    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-hidden-accessible {
+.ui-helper-clearfix { display: inline-block; }
-    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 {
+* html .ui-helper-clearfix { height:1%; }
-    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-helper-clearfix {
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
-    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 {
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-    position: absolute;
+.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") */
-    top: 0;
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
-    left: 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; }
-    width: 100%;
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
-    height: 100%;
+.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 .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
-    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;
@@ -155,15 +55,12 @@ 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;
@@ -189,7 +86,7 @@ backward compatibility:
     margin-bottom: -1px;
     font-weight: bold;
     background-color: #FFFFFF;
-    color: var(--admin-interface-module-background-color);
+    color: {{ theme.css_module_background_color }};
     border-bottom: 1px solid #FFFFFF;
 }
 

admin_interface/templates/admin_interface/css/json-widget.css

@@ -4,24 +4,26 @@ https://github.com/jmrivas86/django-json-widget
 */
 
 .admin-interface div.jsoneditor {
-    border: 1px solid var(--admin-interface-module-background-color);
+    border: 1px solid {{ theme.css_module_background_color }};
-    border-radius: var(--admin-interface-jsoneditor-border-radius);
+    {% if theme.css_module_rounded_corners %}
-    overflow: var(--admin-interface-jsoneditor-overflow);
+    border-radius: 4px;
+    overflow: hidden;
+    {% endif %}
 }
 
 .admin-interface div.jsoneditor-menu {
-    background-color: var(--admin-interface-module-background-color);
+    background-color: {{ theme.css_module_background_color }};
-    border-bottom: 1px solid var(--admin-interface-module-background-color);
+    border-bottom: 1px solid {{ theme.css_module_background_color }};
 }
 
 .admin-interface div.jsoneditor-menu a.jsoneditor-poweredBy {
-    color: var(--admin-interface-module-link-color);
+    color: {{ theme.css_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: var(--admin-interface-module-background-selected-color);
+    background-color: {{ theme.css_module_background_selected_color }};
     color: #000000;
     font-weight: bold;
 }

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

@@ -0,0 +1,9 @@
+{% 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/templates/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: var(--admin-interface-related-modal-background-color);
+    background-color: {{ theme.related_modal_background_color }};
-    opacity: var(--admin-interface-related-modal-background-opacity);
+    opacity: {{ theme.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);
+    -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);
+    -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);
+    box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
 }
 
 .admin-interface .related-modal .mfp-container {
@@ -22,22 +22,20 @@ 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;
     }
@@ -50,7 +48,9 @@ https://github.com/dimsemenov/Magnific-Popup
     position: relative;
     z-index: 100;
     overflow: hidden;
-    border-radius: var(--admin-interface-related-modal-border-radius);
+    {% if theme.related_modal_rounded_corners %}
+    border-radius: 4px;
+    {% endif %}
 }
 
 .admin-interface .related-modal #related-modal-iframe {
@@ -72,7 +72,9 @@ https://github.com/dimsemenov/Magnific-Popup
     height: 40px;
     opacity: 1.0;
     color: rgba(0, 0, 0, 0.4);
-    display: var(--admin-interface-related-modal-close-button-display);
+    {% if not theme.related_modal_close_button_visible %}
+    display: none;
+    {% endif %}
 }
 
 .admin-interface .related-modal .mfp-close:hover,