546 lines
11 KiB
CSS
546 lines
11 KiB
CSS
.employees {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.employees-header {
|
|
padding: 0 1.75rem;
|
|
padding-top: 1.75rem;
|
|
padding-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.employees-header h2 {
|
|
color: rgba(255, 255, 255, 0.69);
|
|
color: color(display-p3 1 1 1 / 0.69);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 1.375rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.recruit-employee {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 24.875rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 1rem;
|
|
justify-content: center;
|
|
z-index: 3;
|
|
}
|
|
|
|
.recruit-employee h1 {
|
|
color: #fff;
|
|
color: color(display-p3 1 1 1);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 1.5rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.recruit-wrapper {
|
|
width: 100%;
|
|
height: 26.5rem;
|
|
border-radius: 0.9375rem;
|
|
background: rgba(117, 183, 255, 0.3);
|
|
background: color(display-p3 0.5167 0.71 1 / 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 2rem;
|
|
padding: 1.5rem 0;
|
|
align-items: center;
|
|
backdrop-filter: blur(0.3125rem);
|
|
|
|
}
|
|
|
|
.recruit-inputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 0.75rem;
|
|
}
|
|
|
|
.recruit-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.5rem;
|
|
}
|
|
|
|
select::-ms-expand {
|
|
/* for IE 11 */
|
|
display: none;
|
|
}
|
|
|
|
.recruit-input-container ul {
|
|
color: rgba(255, 255, 255, 1);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
border-radius: 0.625rem;
|
|
border: 0.125rem solid rgba(0, 0, 0, 0.22);
|
|
outline: none;
|
|
background-color: rgba(0, 0, 0, 0.53);
|
|
width: 13.8125rem;
|
|
height: 2.5rem;
|
|
padding: 0 0.5rem;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.admin .recruit-input-container ul {
|
|
border: 0.125rem solid rgba(0, 0, 0, 0.0);
|
|
background-color: rgba(0, 0, 0, 0.0);
|
|
}
|
|
|
|
.recruit-input-container ul div,
|
|
.employee-status-wrapper ul div {
|
|
z-index: 33;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -285%;
|
|
transform: translateX(-50%);
|
|
color: rgba(255, 255, 255, 0.47);
|
|
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
border-radius: 0.625rem;
|
|
border: 0.125rem solid rgba(0, 0, 0, 0.22);
|
|
outline: none;
|
|
background-color: rgba(0, 0, 0, 0.53);
|
|
backdrop-filter: blur(0.3125rem);
|
|
width: 13.8125rem;
|
|
height: 10.25rem;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
row-gap: .3rem;
|
|
padding: .6rem;
|
|
}
|
|
|
|
.selected-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.recruit-input-container ul div li,
|
|
.employee-status-wrapper ul div li {
|
|
list-style-type: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
padding: .35rem;
|
|
width: 100%;
|
|
border-bottom: 0.0625rem solid #101820;
|
|
transition: color .1s ease;
|
|
display: flex;
|
|
column-gap: .75rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.recruit-input-container ul div li.selected,
|
|
.employee-status-wrapper ul div li.selected {
|
|
opacity: 1;
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
}
|
|
|
|
|
|
.recruit-input-container ul div li:hover,
|
|
.employee-status-wrapper ul div li:hover {
|
|
color: white;
|
|
}
|
|
|
|
.recruit-input-container input {
|
|
color: rgba(255, 255, 255, 1);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
border-radius: 0.625rem;
|
|
border: 0.125rem solid rgba(0, 0, 0, 0.22);
|
|
outline: none;
|
|
background: rgba(0, 0, 0, 0.53);
|
|
width: 13.8125rem;
|
|
height: 2.5rem;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.recruit-input-container input::placeholder {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
color: color(display-p3 1 1 1 / 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.recruit-inputs span {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
text-align: center;
|
|
font-size: 0.625rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.recruit-input-wrapper div {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.6875rem;
|
|
border: 0.125rem solid rgba(0, 0, 0, 0.22);
|
|
background: rgba(0, 0, 0, 0.53);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recruit-wrapper .click-auto-text {
|
|
color: rgba(255, 255, 255, 0.59);
|
|
color: color(display-p3 1 1 1 / 0.59);
|
|
text-align: center;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
margin: 0 auto;
|
|
font-size: 0.8125rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.recruit-player-pp-holder {
|
|
padding: 0.15rem;
|
|
border: 0.125rem solid #75b7ff;
|
|
width: 4.024rem;
|
|
height: 4.024rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recruit-player-pp-holder img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.employees-input-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.employees-input-wrapper {
|
|
width: 38.0515rem;
|
|
height: 2.4816rem;
|
|
position: relative;
|
|
}
|
|
|
|
.employees-search-icon {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.employees-search-icon:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.employees-input-wrapper input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 1.9026rem;
|
|
outline: none;
|
|
border: none;
|
|
|
|
padding-left: 1rem;
|
|
padding-right: 3.25rem;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0rem 0.0827rem 0.3309rem 0rem rgba(0, 0, 0, 0.18) inset;
|
|
color: rgba(255, 255, 255, 1);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.9926rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.employees-input-wrapper input::placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.9926rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.employee-list-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 1rem;
|
|
padding: 0 1.75rem;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.employee-list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.employee-list-header h1 {
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 1.0754rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 143.836%;
|
|
/* 1.5468rem */
|
|
}
|
|
|
|
.employee-list-header p {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
text-align: right;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 1.0754rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 143.836%;
|
|
/* 1.5468rem */
|
|
}
|
|
|
|
.employees-list {
|
|
flex: 1 0 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 1.2rem;
|
|
row-gap: 1.5rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.employees-list .employee {
|
|
width: 18.65%;
|
|
height: 22.5rem;
|
|
border-radius: 0.9317rem;
|
|
position: relative;
|
|
border: 0.1433rem solid #8191ff;
|
|
background: rgba(129, 145, 255, 0.03);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.25rem;
|
|
align-items: center;
|
|
row-gap: 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.employees-list .employee.red {
|
|
border: 0.1433rem solid #FB444D;
|
|
}
|
|
|
|
.employees-list .employee.purple {
|
|
border: 0.1433rem solid #9F50F0;
|
|
|
|
}
|
|
|
|
.employees-list .employee.yellow {
|
|
|
|
border: 0.1433rem solid #F68D45;
|
|
}
|
|
.employees-list .employee.black {
|
|
border: 0.1433rem solid #000;
|
|
|
|
}
|
|
.employees-list .employee.green {
|
|
border: 0.1433rem solid #026E00;
|
|
|
|
}
|
|
|
|
.employees-list .employee:hover {
|
|
border: 0.1433rem solid #7da0ff;
|
|
background: rgba(62, 143, 239, 0.5);
|
|
}
|
|
|
|
|
|
.employees-list .employee.red:hover {
|
|
|
|
border: 0.1433rem solid #fb444d64;
|
|
background: #fb444d64;
|
|
}
|
|
|
|
.employees-list .employee.purple:hover {
|
|
border: 0.1433rem solid #a050f055;
|
|
background: #a050f055;
|
|
|
|
}
|
|
|
|
.employees-list .employee.yellow:hover {
|
|
border: 0.1433rem solid #f68c457a;
|
|
background: #f68c457a;
|
|
}
|
|
|
|
.employees-list .employee.black:hover {
|
|
border: 0.1433rem solid #00000055;
|
|
background: #00000055;
|
|
|
|
}
|
|
.employees-list .employee.green:hover {
|
|
border: 0.1433rem solid #026E0055;
|
|
background: #026E0055;
|
|
|
|
}
|
|
.admin .employees-list .employee {
|
|
border: 0.1433rem solid #FF7B80;
|
|
|
|
}
|
|
|
|
.admin .employees-list .employee:hover {
|
|
border: 0.1433rem solid #FF7B80;
|
|
background: #fa5d62;
|
|
|
|
}
|
|
|
|
.employees-activity-status-container {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.75rem;
|
|
position: absolute;
|
|
left: 2.5rem;
|
|
bottom: 2rem;
|
|
}
|
|
|
|
.online-employees {
|
|
color: #83ff87;
|
|
color: color(display-p3 0.6417 1 0.5833);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 143.836%;
|
|
/* 1.0788rem */
|
|
}
|
|
|
|
.offline-employees {
|
|
color: #ff989c;
|
|
color: color(display-p3 1 0.6208 0.6208);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 143.836%;
|
|
/* 1.0788rem */
|
|
}
|
|
|
|
.employee-activity-status {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 1.25rem;
|
|
top: 1.25rem;
|
|
}
|
|
|
|
.employee-online {
|
|
background-color: #0f0;
|
|
}
|
|
|
|
.employee-offline {
|
|
background-color: #f00;
|
|
}
|
|
|
|
.employee-name {
|
|
color: #fff;
|
|
color: color(display-p3 1 1 1);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 1.0751rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.employee-job {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
color: color(display-p3 1 1 1 / 0.47);
|
|
text-align: center;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.7884rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.employee-other-info {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
|
|
column-gap: 0.75rem;
|
|
}
|
|
|
|
.employee-other-info p {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
color: color(display-p3 1 1 1 / 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: SF Pro Rounded;
|
|
font-size: 0.7884rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
} |