diff options
| -rw-r--r-- | ext/css/settings.css | 52 | ||||
| -rw-r--r-- | 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 --> |