mirror of
https://github.com/yhl452493373/frpc-panel.git
synced 2026-04-04 14:27:01 +08:00
first commit:add basic layout
This commit is contained in:
242
assets/static/css/color.css
Normal file
242
assets/static/css/color.css
Normal file
@@ -0,0 +1,242 @@
|
||||
.layui-bg-blue {
|
||||
background-color: #58b7ff !important;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layui-layer-btn .layui-layer-btn0 {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layui-btn-primary {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layui-btn-primary:hover {
|
||||
border-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-input:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: #79bbff !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layui-form-danger + .layui-form-select .layui-input,
|
||||
.layui-form-danger:focus {
|
||||
border-color: #ff5722 !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layui-laypage input:focus, .layui-laypage select:focus {
|
||||
border-color: #79bbff !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td[data-edit]:hover:after {
|
||||
border-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary]:hover > i {
|
||||
border-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary] > .layui-icon-indeterminate:before {
|
||||
background-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary] > .layui-icon-indeterminate {
|
||||
border-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin=primary] > i {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
|
||||
.layui-table-checked {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.layui-table-checked:hover {
|
||||
background-color: #d9ecff;
|
||||
}
|
||||
|
||||
.layui-table-cell-c:hover {
|
||||
border-color: #79bbff;
|
||||
}
|
||||
|
||||
.layui-table-checked.layui-table-click,
|
||||
.layui-table-checked.layui-table-hover {
|
||||
background-color: #d9ecff;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layui-nav-tree .layui-this,
|
||||
.layui-nav-tree .layui-this > a,
|
||||
.layui-nav-tree .layui-this > a:hover {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-bar {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.proxy-expand .layui-row .layui-row > div:first-child {
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
section.server-info .text-row .text-col:first-child {
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.online,
|
||||
.offline {
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: #67c23a;
|
||||
background-color: #f0f9eb;
|
||||
border-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: #f56c6c;
|
||||
background-color: #fef0f0;
|
||||
border-color: #fde2e2;
|
||||
}
|
||||
|
||||
.version a,
|
||||
.version span {
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.login-title,
|
||||
.login-title a {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.login-title,
|
||||
.login-title a {
|
||||
color: #99a9bf !important;
|
||||
}
|
||||
|
||||
.layui-bg-blue {
|
||||
background-color: #395c74 !important;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
background-color: #4f80a1;
|
||||
}
|
||||
|
||||
.layui-layer-btn .layui-layer-btn0 {
|
||||
background-color: #4f80a1;
|
||||
}
|
||||
|
||||
.layui-btn-primary {
|
||||
background-color: transparent;
|
||||
border-color: #484849;
|
||||
}
|
||||
|
||||
.layui-btn-primary:hover {
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-input:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: #5f5f60 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #4f80a1;
|
||||
}
|
||||
|
||||
.layui-laypage input:focus, .layui-laypage select:focus {
|
||||
border-color: #5f5f60 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td[data-edit]:hover:after {
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-form-danger + .layui-form-select .layui-input,
|
||||
.layui-form-danger:focus {
|
||||
border-color: #ff5722 !important;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary]:hover > i {
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary] > .layui-icon-indeterminate:before {
|
||||
background-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin=primary] > .layui-icon-indeterminate {
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin=primary] > i {
|
||||
background-color: #484849;
|
||||
border-color: #484849 !important;
|
||||
}
|
||||
|
||||
.layui-table-checked {
|
||||
background-color: rgba(255, 255, 255, .04);
|
||||
}
|
||||
|
||||
.layui-table-checked:hover {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.layui-table-cell-c:hover {
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-table-checked.layui-table-click,
|
||||
.layui-table-checked.layui-table-hover {
|
||||
background-color: #5f5f60;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layui-nav-tree .layui-this,
|
||||
.layui-nav-tree .layui-this > a,
|
||||
.layui-nav-tree .layui-this > a:hover {
|
||||
background-color: #4f80a1;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-bar {
|
||||
background-color: #4f80a1;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: #67c23a;
|
||||
background-color: #1c2518;
|
||||
border-color: #25371c;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: #f56c6c;
|
||||
background-color: #2b1d1d;
|
||||
border-color: #412626;
|
||||
}
|
||||
}
|
||||
134
assets/static/css/index.css
Normal file
134
assets/static/css/index.css
Normal file
@@ -0,0 +1,134 @@
|
||||
html, body {
|
||||
padding: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-header {
|
||||
line-height: 60px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-side {
|
||||
width: 225px !important;
|
||||
}
|
||||
|
||||
.layui-side-scroll {
|
||||
width: 245px !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
bottom: 24px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.layui-logo {
|
||||
width: 225px !important;
|
||||
}
|
||||
|
||||
.layui-title {
|
||||
position: absolute;
|
||||
left: 225px !important;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layui-title #title {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-title #logout{
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-nav.layui-nav-tree {
|
||||
width: 225px !important;
|
||||
}
|
||||
|
||||
.layui-body {
|
||||
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;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 170px;
|
||||
}
|
||||
|
||||
.layui-btn-sm {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.layui-btn-xs {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.layui-btn-container {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.layui-layer-btn > a[class^=layui-layer-btn] {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.layui-table-page {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
2223
assets/static/css/layui-theme-dark.css
Normal file
2223
assets/static/css/layui-theme-dark.css
Normal file
File diff suppressed because it is too large
Load Diff
30
assets/static/css/login.css
Normal file
30
assets/static/css/login.css
Normal file
@@ -0,0 +1,30 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.login-title .title-text {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-title .title-version {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Reference in New Issue
Block a user