done agents page
This commit is contained in:
181
frontend/src/app/agents/[agentsId]/styles.module.css
Normal file
181
frontend/src/app/agents/[agentsId]/styles.module.css
Normal file
@@ -0,0 +1,181 @@
|
||||
.createAgentContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.inputMainContainer {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
border-radius: 8px;
|
||||
height: calc(100vh - 260px);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 17px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.headerContainer > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.headerTxt > p {
|
||||
width: 163px;
|
||||
color: #d2d3e1;
|
||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||
font-family: Inter;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.inputContainer {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.labelContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.labelContainer > p {
|
||||
color: #d2d3e1;
|
||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.labelContainer > .required {
|
||||
color: #cfb000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.checkboxMainContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.checkboxContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.checkbox {
|
||||
display: flex;
|
||||
padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
|
||||
var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
|
||||
align-items: flex-start;
|
||||
gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
|
||||
flex: 1 0 0;
|
||||
border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
|
||||
background: #1d1e2a;
|
||||
background: color(display-p3 0.1137 0.1176 0.1608);
|
||||
}
|
||||
.check {
|
||||
display: flex;
|
||||
padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
|
||||
align-items: flex-start;
|
||||
gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
|
||||
}
|
||||
.hiddenCheckbox {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
|
||||
border: 1px solid
|
||||
var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
|
||||
border: 1px solid
|
||||
var(
|
||||
--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
|
||||
color(display-p3 0.1451 0.3882 0.9216)
|
||||
);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.hiddenCheckbox:checked {
|
||||
border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
|
||||
border: 1px solid
|
||||
var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
|
||||
border: 1px solid
|
||||
var(
|
||||
--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
|
||||
color(display-p3 0.1451 0.3882 0.9216)
|
||||
);
|
||||
background: var(
|
||||
--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
|
||||
#0067fd
|
||||
);
|
||||
background: var(
|
||||
--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
|
||||
color(display-p3 0.1451 0.3882 0.9216)
|
||||
);
|
||||
}
|
||||
.hiddenCheckbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0;
|
||||
}
|
||||
.hiddenCheckbox:checked::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.placeholderTxt {
|
||||
align-self: stretch;
|
||||
color: #d2d3e1;
|
||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 150% */
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
.secondaryTxt {
|
||||
align-self: stretch;
|
||||
color: #697281;
|
||||
color: color(display-p3 0.4196 0.4471 0.502);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 142.857% */
|
||||
letter-spacing: 0.07px;
|
||||
}
|
||||
Reference in New Issue
Block a user