diff --git a/assets/static/css/color.css b/assets/static/css/color.css
index 42ca296..dd8c18c 100644
--- a/assets/static/css/color.css
+++ b/assets/static/css/color.css
@@ -1,3 +1,7 @@
+::-webkit-scrollbar-thumb {
+ background: rgba(199, 199, 199, 0.8);
+}
+
.layui-bg-blue {
background-color: #58b7ff !important;
}
@@ -132,6 +136,10 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
}
@media (prefers-color-scheme: dark) {
+ ::-webkit-scrollbar-thumb {
+ background: rgba(107, 107, 107, 0.8);
+ }
+
.login-title,
.login-title a {
color: #99a9bf !important;
diff --git a/assets/static/css/index.css b/assets/static/css/index.css
index 59591ce..d77dbb4 100644
--- a/assets/static/css/index.css
+++ b/assets/static/css/index.css
@@ -1,3 +1,13 @@
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 4px;
+ transition: 0.3s ease-in-out;
+}
+
html, body {
padding: 0;
word-break: break-all;
@@ -70,31 +80,6 @@ section {
left: 225px;
}
-#searchForm input {
- height: 30px;
- line-height: 28px;
-}
-
-#searchForm .layui-input-suffix,
-#searchForm .layui-input-prefix {
- line-height: 30px;
- padding: 0;
-}
-
-#addUserForm {
- padding: 15px 15px 0 15px;
-}
-
-#addUserForm .layui-form-item:last-child {
- margin-bottom: 0;
-}
-
-#addUserForm .layui-textarea {
- min-height: 80px;
- padding: 9px 10px;
- resize: none;
-}
-
.layui-form-label {
width: 140px;
}
@@ -155,25 +140,80 @@ section.common-info .text-row .text-col {
flex: 1;
}
-#addProxyForm {
+.layui-layer-btn > a[class^=layui-layer-btn] {
+ margin: 0 5px !important;
+}
+
+.add-popup .layui-layer-setwin {
+ top: 0;
+ right: 0;
+}
+
+.add-popup .layui-layer-close2 {
padding: 0;
+ border: none;
+ right: 0;
+ top: 0;
+ background: none;
+ border-radius: 0;
+ color: #787878;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
}
-#addProxyForm .layui-tab {
- margin: 15px 15px 0 15px;
+.add-popup .layui-layer-close2:hover {
+ background: none;
}
-#addProxyForm .layui-tab .layui-tab-content {
- padding-bottom: 0;
+.add-popup form {
+ padding: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
}
-#addProxyForm .layui-textarea {
+.add-popup .layui-tab {
+ flex: 1;
+ margin: 0;
+}
+
+.add-popup .layui-tab .layui-tab-content {
+ padding: 15px 8px 0 8px;
+ position: absolute;
+ top: 41px;
+ bottom: 0;
+ left: 8px;
+ right: 8px;
+ overflow: auto;
+}
+
+.add-popup .layui-textarea {
min-height: 80px;
padding: 9px 10px;
resize: none;
}
-#addProxyForm .layui-row .layui-form-item {
+.add-popup .layui-form-select dl {
+ max-height: 156px;
+}
+
+.add-popup .layui-row .layui-form-item {
margin-bottom: 0;
}
+#searchForm input {
+ height: 30px;
+ line-height: 28px;
+}
+
+#searchForm .layui-input-suffix,
+#searchForm .layui-input-prefix {
+ line-height: 30px;
+ padding: 0;
+}
diff --git a/assets/static/js/index-proxy-list.js b/assets/static/js/index-proxy-list.js
index f560e45..fbc1e9d 100644
--- a/assets/static/js/index-proxy-list.js
+++ b/assets/static/js/index-proxy-list.js
@@ -70,13 +70,15 @@ var loadProxyInfo = (function ($) {
proxyListTable.resize();
}
- bindFormEvent();
+ bindFormEvent(proxyType);
}
/**
* bind event of {{@link layui.form}}
+ *
+ * @param type proxy type
*/
- function bindFormEvent() {
+ function bindFormEvent(type) {
layui.table.on('toolbar(proxyListTable)', function (obj) {
var id = obj.config.id;
var checkStatus = layui.table.checkStatus(id);
@@ -84,7 +86,7 @@ var loadProxyInfo = (function ($) {
switch (obj.event) {
case 'add':
- addPopup();
+ addPopup(type);
break
case 'remove':
// batchRemovePopup(data);
@@ -108,13 +110,17 @@ var loadProxyInfo = (function ($) {
/**
* add proxy popup
+ * @param type proxy type
*/
- function addPopup() {
+ function addPopup(type) {
layui.layer.open({
type: 1,
- title: 'NewProxy',
- area: ['500px'],
- content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render(),
+ title: false,
+ skin: 'add-popup',
+ area: ['500px', '400px'],
+ content: layui.laytpl(document.getElementById('addProxyTemplate').innerHTML).render({
+ type: type
+ }),
btn: ['Confirm', 'Cancel'],
btn1: function (index) {
if (layui.form.validate('#addProxyTemplate')) {
@@ -126,7 +132,6 @@ var loadProxyInfo = (function ($) {
layui.layer.close(index);
},
success: function (layero, index, that) {
- layero.find('.layui-layer-content').css('overflow', 'visible');
layui.form.render(null, 'addProxyForm');
}
});
diff --git a/assets/templates/index.html b/assets/templates/index.html
index 385d1ca..62c6fa4 100644
--- a/assets/templates/index.html
+++ b/assets/templates/index.html
@@ -156,14 +156,8 @@
@@ -180,27 +174,31 @@
autocomplete="off" class="layui-input"/>
-