addpage complete

This commit is contained in:
cast1e
2024-10-13 15:35:18 +08:00
parent cd10769d5d
commit c9df5b2317
14 changed files with 976 additions and 91 deletions
+131 -56
View File
@@ -1,67 +1,142 @@
.colbox{
display: flex;
flex-direction: row;
.colbox {
display: flex;
flex-direction: row;
}
.rowbox{
display: flex;
flex-direction: column;
.rowbox {
display: flex;
flex-direction: column;
}
html {
--text-shadow-color: #b3b3b3ae;
--bg-color-solid: #fcfcfc;
--bg-color-alter: #ffffff;
--bg-color: #ffffffae;
--text-color: #1c1c1c;
--bd-color: #bbbbbbce;
--login-button-bg: #9acdff;
--login-button-bd: #c8c8c8;
--login-button-hover: #7db7f0;
--branch-viewing-color: rgb(122, 212, 215);
--branch-viewing-hover-color: rgb(102, 177, 180);
--delete-box-left-border: #f56c6c;
--delete-box-bg: #f56c6c42;
--delete-box-title: #511f1f;
--delete-box-text: black;
--text-shadow-color: #b3b3b3ae;
--bg-color-solid: #fcfcfc;
--bg-color-alter: #ffffff;
--bg-color: #ffffffae;
--text-color: #1c1c1c;
--bd-color: #bbbbbbce;
--text-active: #7cbeff;
--login-button-bg: #9acdff;
--login-button-bd: #c8c8c8;
--login-button-hover: #7db7f0;
--branch-viewing-color: rgb(122, 212, 215);
--branch-viewing-hover-color: rgb(102, 177, 180);
--delete-box-left-border: #f56c6c;
--delete-box-bg: #f56c6c42;
--delete-box-title: #511f1f;
--delete-box-text: black;
}
html.dark {
--text-shadow-color: #686868af;
--bg-color-solid: #191919;
--bg-color-alter: #2d2d2d;
--bg-color: #2a2a2ace;
--text-color: #c0c0c0;
--bd-color: #7f7f7f7c;
--titlebar-height: 40px;
--shadow-edge-glow: inset 1px 1px 1px -.5px rgba(255, 255, 255, .12), inset -1px -1px 1px -.5px rgba(255, 255, 255, .04), inset 0 0 4px rgba(255, 255, 255, .06);
--shadow: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .16);
--bg-color-alpha: hsl(230 12% 14% / .68);
--bg-color-alpha-darker: hsl(230 12% 14% / .93);
--bg-hover-fill: rgb(131 131 145 / 24%);
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
--text-shadow-color: #686868af;
--bg-color-solid: #191919;
--bg-color-alter: #2d2d2d;
--bg-color: #2a2a2ace;
--text-color: #c0c0c0;
--bd-color: #7f7f7f7c;
--titlebar-height: 40px;
--shadow-edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
--shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
--bg-color-alpha: hsl(230 12% 14% / 0.68);
--bg-color-alpha-darker: hsl(230 12% 14% / 0.93);
--bg-hover-fill: rgb(131 131 145 / 24%);
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
}
html {
background: transparent;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
background: transparent;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
}
#app {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
input[type='text'] {
border: none;
outline: none;
background-color: var(--bg-color-alter);
border-bottom: 2px solid var(--bd-color);
border-radius: 3px;
color: var(--text-color);
font-size: 15px;
padding: 6px;
transition: 0.3s;
}
input[type='text']:focus {
background-color: var(--bg-color-solid);
border-bottom: 2px solid var(--text-active);
}
textarea {
outline: none;
border: 1px solid var(--bd-color);
border-radius: 3px;
color: var(--text-color);
font-size: 15px;
padding: 5px;
transition: 0.3s;
background-color: var(--bg-color-alter);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
}
textarea:focus {
background-color: var(--bg-color-solid);
border: 1px solid var(--text-active);
}
.apply-button {
align-self: flex-end;
outline: none;
border: solid 1px var(--bd-color);
border-radius: 2px;
width: 75px;
height: 30px;
background-color: var(--bg-color-alpha-darker);
color: var(--text-color);
cursor: pointer;
transition: 0.3s;
}
.apply-button:hover {
background-color: var(--bg-color-alter);
}
.apply-button:active {
background-color: var(--bg-color-solid);
transform: scale(0.95);
}