#312 [Bug] Fix the issue where the pop-up window cannot be fully displayed on low-resolution screens

修复弹窗无法再低分辨率屏幕下完整展示
This commit is contained in:
physton
2024-03-27 17:47:19 +08:00
parent e1869b207a
commit a52c5dfbda
2 changed files with 20 additions and 2 deletions

View File

@@ -62,6 +62,11 @@
--commonPopupClose-iconSvgClose-height: 20px; --commonPopupClose-iconSvgClose-height: 20px;
--commonPopupClose-iconSvgClose-color: #000; --commonPopupClose-iconSvgClose-color: #000;
// .common-popup-height
--commonPopup-max-height: 90vh;
--commonPopup-overflow: hidden;
--commonPopup-overflow-y: auto;
// .common-colourful-background // .common-colourful-background
--commonColourfulBackground-background: @common-blue linear-gradient(315deg, #6772FF 0, #00F9E5 100%) center center; --commonColourfulBackground-background: @common-blue linear-gradient(315deg, #6772FF 0, #00F9E5 100%) center center;
--commonColourfulBackground-background-size: 104% 104%; --commonColourfulBackground-background-size: 104% 104%;
@@ -2373,6 +2378,12 @@
background-size: var(--commonColourfulBackground-background-size); background-size: var(--commonColourfulBackground-background-size);
} }
.common-popup-height() {
max-height: var(--commonPopup-max-height);
overflow: var(--commonPopup-overflow);
overflow-y: var(--commonPopup-overflow-y);
}
.vue-number-input { .vue-number-input {
display: block; display: block;
font-size: 0; font-size: 0;
@@ -4093,6 +4104,7 @@
background-color: var(--ppf-fm-formatList-background-color); background-color: var(--ppf-fm-formatList-background-color);
transition: var(--ppf-fm-formatList-transition); transition: var(--ppf-fm-formatList-transition);
padding: var(--ppf-fm-formatList-padding); padding: var(--ppf-fm-formatList-padding);
.common-popup-height();
.format-item { .format-item {
display: var(--ppf-fm-fl-formatItem-display); display: var(--ppf-fm-fl-formatItem-display);
@@ -4149,6 +4161,7 @@
transition: var(--ppb-bm-blacklistBody-transition); transition: var(--ppb-bm-blacklistBody-transition);
padding: var(--ppb-bm-blacklistBody-padding); padding: var(--ppb-bm-blacklistBody-padding);
box-sizing: var(--ppb-bm-blacklistBody-box-sizing); box-sizing: var(--ppb-bm-blacklistBody-box-sizing);
.common-popup-height();
.blacklist-wrap { .blacklist-wrap {
flex-basis: var(--ppb-bm-bb-blacklistWrap-flex-basis); flex-basis: var(--ppb-bm-bb-blacklistWrap-flex-basis);
@@ -4231,6 +4244,7 @@
transition: var(--pph-hm-hotkeyBody-transition); transition: var(--pph-hm-hotkeyBody-transition);
padding: var(--pph-hm-hotkeyBody-padding); padding: var(--pph-hm-hotkeyBody-padding);
box-sizing: var(--pph-hm-hotkeyBody-box-sizing); box-sizing: var(--pph-hm-hotkeyBody-box-sizing);
.common-popup-height();
.hotkey-list { .hotkey-list {
width: var(--pph-hm-hb-hotkeyList-width); width: var(--pph-hm-hb-hotkeyList-width);
@@ -4447,6 +4461,7 @@
.translate-setting-main { .translate-setting-main {
.common-popup-main(); .common-popup-main();
.common-popup-height();
.translate-setting-content { .translate-setting-content {
max-height: var(--ppts-tsm-translateSettingContent-max-height); max-height: var(--ppts-tsm-translateSettingContent-max-height);
@@ -4663,7 +4678,7 @@
background: var(--ppec-background); background: var(--ppec-background);
.extension-main { .extension-main {
height: var(--ppec-extensionMain-height); // height: var(--ppec-extensionMain-height);
position: var(--ppec-extensionMain-position); position: var(--ppec-extensionMain-position);
margin-right: var(--ppec-extensionMain-margin-right); margin-right: var(--ppec-extensionMain-margin-right);
margin-bottom: var(--ppec-extensionMain-margin-bottom); margin-bottom: var(--ppec-extensionMain-margin-bottom);
@@ -4682,6 +4697,7 @@
border-radius: var(--ppec-em-extensionList-border-radius); border-radius: var(--ppec-em-extensionList-border-radius);
background-color: var(--ppec-em-extensionList-background-color); background-color: var(--ppec-em-extensionList-background-color);
transition: var(--ppec-em-extensionList-transition); transition: var(--ppec-em-extensionList-transition);
.common-popup-height();
.extension-table { .extension-table {
border: var(--ppec-em-el-extensionTable-border); border: var(--ppec-em-el-extensionTable-border);
@@ -4761,6 +4777,7 @@
padding: var(--pcp-cm-chatgptBody-padding); padding: var(--pcp-cm-chatgptBody-padding);
font-size: var(--pcp-cm-chatgptBody-font-size); font-size: var(--pcp-cm-chatgptBody-font-size);
color: var(--pcp-cm-chatgptBody-color); color: var(--pcp-cm-chatgptBody-color);
.common-popup-height();
.body-panel { .body-panel {
border: var(--pcp-cm-cb-bodyPanel-border); border: var(--pcp-cm-cb-bodyPanel-border);
@@ -4935,6 +4952,7 @@
padding: var(--pap-cm-aboutBody-padding); padding: var(--pap-cm-aboutBody-padding);
font-size: var(--pap-cm-aboutBody-font-size); font-size: var(--pap-cm-aboutBody-font-size);
color: var(--pap-cm-aboutBody-color); color: var(--pap-cm-aboutBody-color);
.common-popup-height();
a { a {
color: var(--pap-cm-ab-a-color); color: var(--pap-cm-ab-a-color);

2
styles/main.min.css vendored

File diff suppressed because one or more lines are too long