curatenie si fix target
This commit is contained in:
@@ -1,446 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SF Pro Rounded";
|
||||
src: url(./assets/fonts/SF-Pro-Rounded-Regular.otf);
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
right: 3rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 80.9375rem;
|
||||
height: 48.625rem;
|
||||
border-radius: 1.25rem 0rem 0rem 0rem;
|
||||
background: rgba(9, 18, 29, 0.76);
|
||||
border-radius: 1.6544rem;
|
||||
box-shadow: 0rem 0.3309rem 0.3309rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.container.admin {
|
||||
background: rgba(30, 9, 10, 0.76);
|
||||
background: color(display-p3 0.1083 0.0411 0.0411 / 0.76);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0rem 1.75rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: rgba(255, 255, 255, 0.69);
|
||||
leading-trim: both;
|
||||
text-edge: cap;
|
||||
font-family: SF Pro Rounded;
|
||||
font-size: 0.8272rem;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header p {
|
||||
flex: 1;
|
||||
color: rgba(255, 255, 255, 0.69);
|
||||
text-align: center;
|
||||
leading-trim: both;
|
||||
text-edge: cap;
|
||||
font-family: SF Pro Rounded;
|
||||
font-size: 0.8272rem;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.header span {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header div {
|
||||
width: 1.228rem;
|
||||
height: 1.2279rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ff2d2d;
|
||||
font-family: SF Pro Rounded;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 0.8897rem;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header div:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.seperator {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgba(217, 217, 217, 0.06);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
column-gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0.25rem;
|
||||
padding-left: 1rem;
|
||||
padding-top: 2.5em;
|
||||
row-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
background-color: rgba(0, 0, 0, 0.278);
|
||||
border-radius: 0.9375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0.0625rem solid rgba(0, 0, 0, 0.278);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-item:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #548de8;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #548de8);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #548de85e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.admin .nav-item.active {
|
||||
background-color: #E85454;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #E85454);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #e8545453;
|
||||
}
|
||||
|
||||
.nav-item.active.red {
|
||||
background-color: #FB444D;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #FB444D);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #FB444D53;
|
||||
}
|
||||
|
||||
.nav-item.active.yellow {
|
||||
background-color: #F68D45;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #F68D45);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #F68D4553;
|
||||
}
|
||||
|
||||
.nav-item.active.purple {
|
||||
background-color: #9F50F0;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #9F50F0);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #9F50F053;
|
||||
}
|
||||
|
||||
.nav-item.active.black {
|
||||
background-color: #000;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #000);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #00000053;
|
||||
}
|
||||
|
||||
.nav-item.active.green {
|
||||
|
||||
background-color: #026E00;
|
||||
filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #026E00);
|
||||
position: relative;
|
||||
border: 0.0625rem solid #026E0053;
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1.25rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 0.6875rem;
|
||||
background: #74b4ff;
|
||||
}
|
||||
|
||||
.nav-item.active.red::before {
|
||||
background-color: #FB444D;
|
||||
|
||||
}
|
||||
|
||||
.nav-item.active.yellow::before {
|
||||
background-color: #F68D45;
|
||||
|
||||
}
|
||||
|
||||
.nav-item.active.purple::before {
|
||||
background-color: #9F50F0;
|
||||
}
|
||||
.nav-item.active.green::before {
|
||||
background-color: #026E00;
|
||||
}
|
||||
|
||||
.nav-item.active.black::before {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.admin .nav-item.active::before {
|
||||
|
||||
background: #E85454;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hidden-overlay {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.black-overlay {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.actions-page {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem 0rem 0rem 0rem;
|
||||
background: rgba(9, 18, 29, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin .actions-page {
|
||||
background: rgba(30, 9, 10, 0.76);
|
||||
|
||||
}
|
||||
|
||||
.job-logo {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.container-overlay {
|
||||
position: absolute;
|
||||
border-radius: 1.25rem 0rem 0rem 0rem;
|
||||
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: .5rem;
|
||||
border-radius: 0.7445rem;
|
||||
border: 0.1654rem solid rgba(0, 0, 0, 0.2);
|
||||
background: #429dff;
|
||||
width: 11rem;
|
||||
height: 3.0625rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #fff;
|
||||
color: color(display-p3 1 1 1);
|
||||
leading-trim: both;
|
||||
text-edge: cap;
|
||||
font-family: SF Pro Rounded;
|
||||
font-size: 1.0754rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 50%;
|
||||
}
|
||||
|
||||
.header-button.red {
|
||||
background: #FB444D;
|
||||
}
|
||||
|
||||
.header-button.black {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
.header-button.green {
|
||||
background: #026E00;
|
||||
|
||||
}
|
||||
|
||||
.header-button.purple {
|
||||
background: #9F50F0;
|
||||
}
|
||||
|
||||
.header-button.yellow {
|
||||
background: #F68D45;
|
||||
}
|
||||
|
||||
.admin .header-button {
|
||||
|
||||
background: #FF4953;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.header-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#app .notification-container {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#app .notification-container div {
|
||||
max-width: 17.5rem;
|
||||
min-width: 10rem;
|
||||
min-height: 3rem;
|
||||
background: #429dff;
|
||||
border-radius: 0.875rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: SF Pro Rounded;
|
||||
padding: 1rem;
|
||||
font-style: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 0.9375rem;
|
||||
leading-trim: both;
|
||||
text-edge: cap;
|
||||
letter-spacing: 0.03em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#app .notification-container div.red {
|
||||
background-color: #FB444D;
|
||||
|
||||
}
|
||||
|
||||
#app .notification-container div.yellow {
|
||||
background-color: #F68D45;
|
||||
|
||||
}
|
||||
|
||||
#app .notification-container div.purple {
|
||||
background-color: #9F50F0;
|
||||
|
||||
}
|
||||
#app .notification-container div.green {
|
||||
background-color: #026E00;
|
||||
|
||||
}
|
||||
|
||||
#app .notification-container div.black {
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.notify-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app .admin .notification-container div {
|
||||
background: rgba(30, 9, 10, 1);
|
||||
}
|
||||
|
||||
#app .notification-container .fade {
|
||||
animation: fade 0.5s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user