367 lines
6.7 KiB
CSS
367 lines
6.7 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
user-select: none;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.notifications {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 2.5rem;
|
|
transform: translateX(-50%);
|
|
z-index: 65;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.notification {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: .65rem;
|
|
height: 3rem;
|
|
padding: 0 1rem;
|
|
border-radius: 1rem;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.notification p {
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: Gilroy-Medium;
|
|
font-size: 1.25rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
/* 1.24375rem */
|
|
letter-spacing: 0.025rem;
|
|
}
|
|
|
|
.notification.success p {
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
|
.notification.success {
|
|
background: #9DFF82;
|
|
}
|
|
|
|
.notification.error {
|
|
background: #FF2E53;
|
|
|
|
}
|
|
|
|
.notification.error p {
|
|
color: #FFF;
|
|
}
|
|
|
|
.job-offer-request {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
width: 35rem;
|
|
height: 11rem;
|
|
}
|
|
|
|
.job-offer-request img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.job-offer-request h1 {
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 0.995rem;
|
|
color: rgba(0, 0, 0, 0.62);
|
|
|
|
}
|
|
|
|
.job-offer-request-button {
|
|
min-width: 6.5625rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
padding: 0 1rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.8125rem;
|
|
background: rgba(0, 0, 0, 0.17);
|
|
column-gap: .5rem;
|
|
|
|
}
|
|
|
|
.job-offer-request-button div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: rgba(0, 0, 0, 0.26);
|
|
border-radius: 0.5rem;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 0.8706rem;
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
}
|
|
|
|
.job-offer-request-button p {
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 0.8706rem;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.job-offer-modal {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
|
|
.job-offer-modal-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.job-offer-text {
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
line-height: 1.99rem;
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
}
|
|
|
|
.job-offer-modal-container {
|
|
box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);
|
|
background: rgba(255, 255, 255, 0.4);
|
|
width: 20rem;
|
|
height: 27rem;
|
|
border-radius: 1.125rem;
|
|
|
|
}
|
|
|
|
.offer-modal-header {
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
line-height: 1.4925rem;
|
|
color: rgba(0, 0, 0, 0.51);
|
|
|
|
}
|
|
|
|
.offer-modal-info {
|
|
width: 100%;
|
|
height: 3rem;
|
|
border-radius: 1.125rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
line-height: 1.2437rem;
|
|
color: rgba(0, 0, 0, 0.51);
|
|
|
|
}
|
|
|
|
.offer-line {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 100%;
|
|
height: 0.4375rem;
|
|
border-radius: 1.125rem;
|
|
box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);
|
|
|
|
}
|
|
|
|
.accept-offer-button {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background: rgba(146, 140, 255, 1);
|
|
box-shadow: 0px 0px 21.5px 0px rgba(0, 0, 0, 0.17);
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 19.9px;
|
|
color: rgba(255, 255, 255, 1);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.accept-offer-button:hover {
|
|
transform: scale(1.07);
|
|
}
|
|
|
|
.decline-offer-button {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background: rgba(235, 91, 91, 1);
|
|
box-shadow: 0px 0px 21.5px 0px rgba(0, 0, 0, 0.17);
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 19.9px;
|
|
color: rgba(255, 255, 255, 1);
|
|
transition: all .2s ease;
|
|
|
|
}
|
|
|
|
|
|
.decline-offer-button:hover {
|
|
transform: scale(1.07);
|
|
}
|
|
|
|
.vehicleshop-wrapper-without-overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.75rem 4rem;
|
|
position: relative;
|
|
}
|
|
|
|
.vehicleshop-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.75rem 4rem;
|
|
position: relative;
|
|
background-image: url(./assets/images/vehicleshop-overlay.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.bottom-button {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.bottom-button:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
|
|
.bottom-button p {
|
|
color: #FFF;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: Gilroy-BlackItalic;
|
|
font-size: 2.75rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
/* 2.73625rem */
|
|
color: #FFF;
|
|
position: relative;
|
|
width: max-content;
|
|
}
|
|
|
|
.bottom-button-big-text p {
|
|
font-size: 3.25rem;
|
|
}
|
|
|
|
.bottom-button p:nth-child(1) {
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.bottom-button p:nth-child(2) {
|
|
left: -.15rem;
|
|
top: 0;
|
|
color: #FE4040;
|
|
position: absolute;
|
|
}
|
|
|
|
.bottom-button p:nth-child(3) {
|
|
left: .15rem;
|
|
color: #463DFF;
|
|
top: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.bottom-left-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.bottom-right-overlay {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.top-left-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.top-right-overlay {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.view-mode {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 7.5rem;
|
|
transform: translateX(-50%);
|
|
width: 73.625rem;
|
|
height: 7.75rem;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-image: url(./assets/images/view-mode.png);
|
|
z-index: 44;
|
|
} |