Cleanup and center custom css modal (#1111)

1 files changed, 20 insertions, 32 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 */