Cleanup and center custom css modal (#1111)

2 files changed, 43 insertions, 52 deletions

diff --git a/ext/css/settings.css b/ext/css/settings.css
index 7a94595f..e59122f3 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -85,6 +85,10 @@
     --dictionary-import-border-color: #cccccc;
     --dictionary-import-border-color-hover: #bfd1ff;
     --dictionary-import-hover-background-color: rgba(28, 116, 233, 0.05);
+
+    --custom-css-dim-size: 73.5%;
+    --custom-css-dim-fade-length: 3.5%;
+    --custom-css-modal-background: linear-gradient(90deg, var(--dim-background-color) calc(100% - var(--custom-css-dim-fade-length)), rgba(0, 0, 0, 0));
 }
 :root:not([data-loaded=true]) {
     --animation-duration: 0s;
@@ -912,26 +916,8 @@ select.short-height {
     background-color: transparent;
     pointer-events: none;
 }
-.modal.modal-left::after {
-    content: '';
-    display: block;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    visibility: hidden;
-}
-.modal-content-container1 {
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr minmax(auto, var(--content-width)) 1fr;
-    grid-template-rows: auto;
-    align-items: stretch;
-}
-.modal-content-container2 {
-    grid-area: 1/1/2/3;
-    background-color: var(--dim-background-color);
-    pointer-events: auto;
+.modal-content-container {
+    pointer-events: none;
     width: 100%;
     height: 100%;
     display: flex;
@@ -939,20 +925,18 @@ select.short-height {
     justify-content: center;
     align-items: center;
 }
-.modal-content-container1-fade {
-    display: block;
-    position: relative;
-    grid-area: 1/3/2/4;
+
+.modal-content-container>.modal-content,
+.modal-content-container>.modal-content-dimmer {
+    pointer-events: auto;
 }
-.modal-content-container1-fade::after {
-    content: '';
-    display: block;
+
+.modal-content-container>.modal-content-dimmer {
+    background: var(--custom-css-modal-background);
+    width: var(--custom-css-dim-size);
+    height: 100%;
+    margin-right: calc(100% - var(--custom-css-dim-size));
     position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 64px;
-    background: transparent linear-gradient(to right, var(--dim-background-color), transparent) repeat-y;
 }
 
 .modal-header-button-container {
@@ -2644,6 +2628,10 @@ input[type=number].dictionary-priority {
     .sidebar-inner {
         box-shadow: var(--shadow-right);
     }
+    :root {
+        --custom-css-dim-size: 100%;
+        --custom-css-modal-background: var(--dim-background-color);
+    }
 }
 
 /* Mobile overrides */
diff --git a/ext/settings.html b/ext/settings.html
index 94f87148..dfd562a9 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -2702,29 +2702,32 @@
 
 
 <!-- Custom CSS modal -->
-<div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
-    <div class="modal-content-container2 modal-content-dimmer"><div class="modal-content">
-        <div class="modal-header">
-            <div class="modal-title">Custom CSS</div>
-            <div class="modal-header-button-container">
-                <div class="modal-header-button-group">
-                    <button type="button" class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
-                    <button type="button" class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
+<div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden>
+    <div class="modal-content-container">
+        <div class="modal-content-dimmer"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Custom CSS</div>
+                <div class="modal-header-button-container">
+                    <div class="modal-header-button-group">
+                        <button type="button" class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
+                        <button type="button" class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
+                    </div>
                 </div>
             </div>
+
+            <div class="modal-body custom-popup-css-container">
+                <div class="custom-popup-css-header">Popup CSS</div>
+                <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
+                <div class="custom-popup-css-header margin-above">Popup outer CSS</div>
+                <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button type="button" data-modal-action="hide">Close</button>
+            </div>
         </div>
-        <div class="modal-body custom-popup-css-container">
-            <div class="custom-popup-css-header">Popup CSS</div>
-            <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
-            <div class="custom-popup-css-header margin-above">Popup outer CSS</div>
-            <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
-        </div>
-        <div class="modal-footer">
-            <button type="button" data-modal-action="hide">Close</button>
-        </div>
-    </div></div>
-    <div class="modal-content-container1-fade"></div>
-</div></div>
+    </div>
+</div>
 
 
 <!-- Audio sources modal -->