From 1d8f2f499a71bf528aedb9b0eeeb036340ed85ac Mon Sep 17 00:00:00 2001
From: Kuuuube <61125188+Kuuuube@users.noreply.github.com>
Date: Sat, 22 Jun 2024 00:39:40 -0400
Subject: Cleanup and center custom css modal (#1111)
---
ext/css/settings.css | 52 ++++++++++++++++++++--------------------------------
ext/settings.html | 43 +++++++++++++++++++++++--------------------
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 -->
--
cgit v1.2.3