Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add components

Browse Source
This commit is contained in:
Laux Dev
2026-03-02 15:33:21 +08:00
parent f16b78834c
commit 1023990822
20 changed files with 1234 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
frontend/src/app/projects/view/[servicesId]/variableStyles.module.css Normal file
View File

@@ -0,0 +1,253 @@
.variables {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #161720;
}
.variablesHeader {
display: flex;
padding: 8px 14px 8px 8px;
align-items: center;
gap: 10px;
align-self: stretch;
background: #161720;
}
.variablesHeader > div {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.searchContainer > div {
display: flex;
width: 310px;
padding: 8px 12px;
align-items: center;
gap: 9px;
}
.searchInputGroup {
display: flex;
align-items: center;
gap: 9px;
}
.searchInputGroup input {
color: white;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.09px;
outline: none;
background-color: transparent;
border: none;
}
.searchInputGroup input::placeholder {
color: #85869b;
}
.variablesHeaderDropDown {
display: flex;
width: 40px;
height: 40px;
flex-direction: column;
align-items: flex-end;
position: relative;
gap: 6px;
}
.variableHeaderDropdownButton {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
cursor: pointer;
background: #5359f2;
border: 1px solid #5358f200;
}
.variableHeaderDropdownButton:hover {
border-radius: 6px;
border: 1px solid #5359f2;
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}
.dropDownContainer {
display: flex;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.dropDownContainer > div {
display: flex;
padding: 8px 12px;
align-items: center;
gap: 10px;
align-self: stretch;
text-wrap: nowrap;
width: 100%;
}
.dropDownContainer > div:hover {
background: #3c4159;
}
.dropDownContainer > div > div {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.variablesContentContainer {
display: flex;
padding: 8px;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.variablesContentContainer > div {
display: flex;
padding-bottom: 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
height: calc(100vh - 242px);
overflow: auto;
flex: 1 0 0;
}
.variablesContent {
display: flex;
padding-bottom: auto;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 4px;
background: #1d1e2a;
}
.variable {
display: flex;
padding: 8px 0;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
width: 100%;
}
.variable p {
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.15px;
}
.environmentVariablesContainer {
display: flex;
min-height: 200px;
padding-bottom: auto;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.environmentVariablesHeader {
display: flex;
padding: 12px 16px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.environmentVariablesHeader p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
color: #fff;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.envVariablesHeader {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.envVariablesHeader > div {
display: flex;
padding: 12px 16px;
align-items: flex-start;
align-self: stretch;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div p {
display: flex;
align-items: flex-start;
flex: 1 0 0;
color: #85869b;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.variableList {
display: flex;
padding: 0 16px 16px 16px;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.emptyVariableList {
display: flex;
padding: 24px 16px 0 16px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
}
.emptyVariableList > div {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
.emptyVariableList > div > div {
display: flex;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
color: #85869b;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}