root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-29 08:45:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Upgrade to the new UI (#521)

Browse Source 
Co-authored-by: MystiPanda <mystipanda@proton.me>
This commit is contained in:
Amnesiash
2024-03-09 21:37:21 +08:00
committed by GitHub
parent ab539081fa
commit 3a0429d049
39 changed files with 533 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/assets/styles/layout.scss
View File

@@ -5,33 +5,44 @@
overflow: hidden;
&__left {
flex: 1 0 15%;
flex: 1 0 228px;
display: flex;
height: 100%;
max-width: 225px;
min-width: 125px;
width: 100%;
// max-width: 225px;
// min-width: 225px;
padding: 16px 0 8px;
position: relative;
// position: relative;
flex-direction: column;
align-self: stretch;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
overflow: hidden;
background-color: var(--background-color-alpha);
border-right: 1px solid var(--divider-color);
// background-color: var(--background-color-alpha);
$maxLogo: 100px;
// $maxLogo: 100px;
.the-logo {
position: relative;
flex: 0 1 $maxLogo;
width: 100%;
max-width: $maxLogo + 32px;
max-height: $maxLogo;
margin: 0 auto;
padding: 0 16px;
text-align: center;
// position: relative;
flex: 1 0 58px;
// width: 100%;
display: flex;
height: 100%;
padding: 0px 20px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
border-bottom: 1px solid var(--divider-color);
// max-width: $maxLogo + 32px;
// max-height: $maxLogo;
// margin: 0 auto;
// padding: 0 auto;
// text-align: center;
box-sizing: border-box;
img,
@@ -39,11 +50,11 @@
width: 100%;
height: 100%;
pointer-events: none;
fill: var(--primary-main);
// fill: var(--primary-main);
#bg {
fill: var(--background-color);
}
// #bg {
// fill: var(--background-color);
// }
}
.the-newbtn {
@@ -65,21 +76,22 @@
> div {
margin: 0 auto;
// padding: 0 20px;
}
}
}
&__right {
position: relative;
flex: 1 1 75%;
flex: 1 1 100%;
height: 100%;
background-color: var(--background-color-alpha);
// background-color: var(--background-color-alpha);
.the-bar {
position: absolute;
top: 0px;
right: 0px;
height: 36px;
height: 24px;
display: flex;
align-items: center;
box-sizing: border-box;
@@ -100,15 +112,16 @@
.windows,
.unknown {
&.layout {
$maxLogo: 115px;
.layout__left {
padding-top: 24px;
}
.layout__left .the-logo {
flex: 0 1 $maxLogo;
max-width: $maxLogo + 32px;
max-height: $maxLogo;
flex: 1 0 58px;
}
.layout__right .the-content {
top: 30px;
top: 24px;
}
}
}
@@ -119,7 +132,7 @@
padding-top: 24px;
}
.layout__right .the-content {
top: 20px;
top: 24px;
}
}
}