1032 lines
No EOL
22 KiB
CSS
1032 lines
No EOL
22 KiB
CSS
@import url('https://fonts.cdnfonts.com/css/futura-pt');
|
|
|
|
body{
|
|
font-family: 'Oswald', sans-serif;
|
|
user-select: none;
|
|
background: none;
|
|
font-display: fallback;
|
|
}
|
|
|
|
:root{
|
|
--main_color: rgb(251, 133, 16);
|
|
--background_color: rgb(34, 34, 39);
|
|
--text_color: white;
|
|
}
|
|
|
|
button{
|
|
outline: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
button:disabled{
|
|
opacity: 0.6;
|
|
cursor: none;
|
|
}
|
|
|
|
button:hover{
|
|
cursor: pointer;
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
button:disabled:hover{
|
|
filter: none;
|
|
}
|
|
|
|
button:active{
|
|
transition: all 0.05s;
|
|
filter: brightness(70%);
|
|
scale: 0.9;
|
|
}
|
|
|
|
button:disabled:active{
|
|
filter: none;
|
|
scale: 1;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #2129326b;
|
|
border-radius: 3vh;
|
|
border: solid 1px rgba(255, 255, 255, 0.432);
|
|
}
|
|
|
|
hr{
|
|
height: 2px;
|
|
background-color: white;
|
|
}
|
|
|
|
.input-group input{
|
|
background-color: rgba(255, 255, 255, 0.137);
|
|
color: white;
|
|
border: solid 2px rgba(211, 211, 211, 0.705);
|
|
outline: none;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 22px !important;
|
|
padding-top: 10px !important;
|
|
}
|
|
|
|
.input-group input::placeholder{
|
|
color: #ffffff8e;
|
|
}
|
|
|
|
.input-group input:focus{
|
|
color: white;
|
|
background-color: rgba(255, 255, 255, 0.267);
|
|
border: solid 2px rgba(211, 211, 211, 0.959);
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.input-group input:disabled{
|
|
background-color: rgba(52, 63, 73, 0.295);
|
|
color: #b1b1b1;
|
|
border: none;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-checkbox .form-check-label{
|
|
color: white;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.custom-checkbox .form-check-input{
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: rgba(255, 255, 255, 0.205);
|
|
border: solid 2px #D3D3D3;
|
|
}
|
|
|
|
.custom-checkbox .form-check-input:checked{
|
|
border: solid 3px #ffffff;
|
|
background-color: #79cfe0b2;
|
|
background-image: none;
|
|
}
|
|
|
|
.range::-webkit-slider-thumb{
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 15px;
|
|
width: 15px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
transform: rotate(45deg);
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
border: solid 2px white;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.range::-webkit-slider-thumb:active{
|
|
background: #32EBBE;
|
|
}
|
|
|
|
.range{
|
|
-webkit-appearance: none;
|
|
width: 80%;
|
|
height: 3px;
|
|
border-radius: 10px;
|
|
outline: none;
|
|
background-color: #B7B7B7;
|
|
}
|
|
|
|
.custom-control.ios-switch {
|
|
scale: 1.6;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-input {
|
|
display: none;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-input:active~.ios-switch-control-indicator::after {
|
|
width: 20px;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator {
|
|
border: 10px solid #79cfe0;
|
|
background: #79cfe0;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator::after {
|
|
top: -8px;
|
|
left: 8px;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-input:checked:active~.ios-switch-control-indicator::after {
|
|
left: 4px;
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-indicator {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 0 10px;
|
|
top: 4px;
|
|
width: 36px;
|
|
height: 20px;
|
|
background: rgb(51, 49, 70);
|
|
border-radius: 16px;
|
|
transition: 0.3s;
|
|
border: 2px solid rgb(54, 72, 94);
|
|
}
|
|
|
|
.custom-control.ios-switch .ios-switch-control-indicator::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 16px;
|
|
transition: 0.3s;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: rgb(236, 236, 236);
|
|
}
|
|
|
|
.dropdown .dropdown-menu{
|
|
position: absolute !important;
|
|
background-color: rgba(61, 61, 61, 0.705);
|
|
backdrop-filter: blur(20px);
|
|
border: none;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border-radius: 0px;
|
|
padding: 10px;
|
|
z-index: 999999 !important;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.dropdown .dropdown-menu .dropdown-item{
|
|
color: white;
|
|
height: 40px;
|
|
transition: all 0.3s ease;
|
|
line-height: 30px;
|
|
font-size: 23px;
|
|
font-weight: 300;
|
|
border: solid 1px white;
|
|
text-align: center;
|
|
font-family: 'Futura PT', sans-serif;
|
|
text-shadow: 5px 1px 0px rgba(0, 0, 0, 0.479);
|
|
}
|
|
|
|
.dropdown .dropdown-menu .dropdown-item:hover{
|
|
background-color: rgba(192, 192, 192, 0.493);
|
|
}
|
|
|
|
.dropdown .dropdown-menu .dropdown-item img{
|
|
height: 35px;
|
|
width: 35px;
|
|
margin-top: -5px;
|
|
margin-left: -10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dropdown .dropdown-menu .time{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 10px;
|
|
font-size: 15px;
|
|
font-family: 'Futura PT', sans-serif;
|
|
color: white;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* //////////////////////////////////////////////////////// MAIN THINGS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
|
|
|
|
.key_menu{
|
|
display: none;
|
|
}
|
|
|
|
.key_menu .animation_element{
|
|
position: absolute;
|
|
top: 150%;
|
|
left: -50%;
|
|
height: 150%;
|
|
width: 140%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
background-color: white;
|
|
animation: animation_element 1.5s ease both;
|
|
z-index: 10000;
|
|
}
|
|
|
|
@keyframes animation_element {
|
|
99%{
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
transform: translate(150%, -200%) rotate(-45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes reverse_animation_element {
|
|
0%{
|
|
transform: translate(150%, -200%) rotate(-45deg);
|
|
}
|
|
99%{
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.key_menu .overflow_container{
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 40px;
|
|
transform: translate(0%, -50%);
|
|
height: 690px;
|
|
width: 420px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
z-index: 100;
|
|
animation: overflow_container 2.5s both;
|
|
}
|
|
|
|
@keyframes overflow_container {
|
|
99%{
|
|
overflow: hidden;
|
|
}
|
|
100%{
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
@keyframes reverse_overflow_container {
|
|
99%{
|
|
overflow: hidden;
|
|
}
|
|
100%{
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.key_menu .panel{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 670px;
|
|
width: 400px;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(61, 61, 61, 0.425);
|
|
backdrop-filter: blur(25px);
|
|
font-family: 'Futura PT', sans-serif;
|
|
animation: panel 1.5s ease both;
|
|
}
|
|
|
|
@keyframes panel {
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
20%{
|
|
opacity: 0;
|
|
}
|
|
40%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes reverse_panel {
|
|
0%{
|
|
opacity: 1;
|
|
}
|
|
22%{
|
|
opacity: 1;
|
|
}
|
|
50%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.panel .panel_border_top{
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
height: 25px;
|
|
width: 25px;
|
|
background-image: url('assets/panel_border.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.panel .panel_border_bottom{
|
|
position: absolute;
|
|
bottom: -10px;
|
|
right: -10px;
|
|
transform: rotate(180deg);
|
|
height: 25px;
|
|
width: 25px;
|
|
background-image: url('assets/panel_border.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.panel .top_line{
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 14px;
|
|
height: 1px;
|
|
width: 230px;
|
|
background-color: rgba(255, 255, 255, 0.37);
|
|
animation: top_line 4s ease;
|
|
}
|
|
|
|
@keyframes top_line {
|
|
0%{
|
|
transform: scaleX(70%) translateX(-20%);
|
|
}
|
|
100%{
|
|
transform: scaleX(100%);
|
|
}
|
|
}
|
|
|
|
.panel .top_box{
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
height: 4px;
|
|
width: 4px;
|
|
background-color: rgba(255, 255, 255, 0.616);
|
|
}
|
|
|
|
.panel .title{
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
font-weight: 400;
|
|
font-size: 43px;
|
|
line-height: 48px;
|
|
color: #FFFFFF;
|
|
text-shadow: 6px 1px 0px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
.panel .action_btn{
|
|
position: relative;
|
|
float: right;
|
|
height: 45px;
|
|
padding-inline: 15px;
|
|
font-weight: 300;
|
|
font-size: 22px;
|
|
line-height: 24px;
|
|
color: #FFFFFF;
|
|
text-shadow: 5px 1px 0px rgba(0, 0, 0, 0.40);
|
|
background-color: transparent;
|
|
filter: brightness(100%);
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel .action_btn:hover::before, .key_menu .panel .action_btn:hover::after{
|
|
filter: brightness(100%);
|
|
}
|
|
|
|
.action_btn::before, .action_btn::after{
|
|
content: "";
|
|
position: absolute;
|
|
height: 15px;
|
|
width: 15px;
|
|
background-image: url('assets/panel_border.svg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
filter: brightness(70%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.panel .action_btn::before{
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.panel .action_btn::after{
|
|
bottom: 0px;
|
|
right: 0px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.panel .action_btn .bg{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #21cc9a;
|
|
box-shadow: 0px 0px 10px 0px #21cc99a8;
|
|
z-index: -10;
|
|
transform: scaleX(0.01) rotate(-55deg);
|
|
transition: all 0.6s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.panel .action_btn.active .bg{
|
|
transform: scaleX(2) rotate(-55deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
.panel .action_btn .line{
|
|
position: absolute;
|
|
bottom: 7px;
|
|
left: 10px;
|
|
height: 1px;
|
|
width: 60%;
|
|
background-color: white;
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.panel .action_btn:hover .line{
|
|
transform: scaleX(1.17) translateX(5px);
|
|
}
|
|
|
|
.panel .page_selector_container{
|
|
position: absolute;
|
|
top: 70px;
|
|
left: 20px;
|
|
}
|
|
|
|
.panel .page_selector_container .page_element{
|
|
display: inline-block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
border-width: 20px 25px 0 0;
|
|
border-color: #32ebbd4d #32ebbd transparent transparent;
|
|
margin-inline: 3px;
|
|
transition: all 0.3s ease;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
outline: rgba(255, 255, 255, 0.747);
|
|
}
|
|
|
|
.panel .page_selector_container .page_element.choosed{
|
|
border-color: #32EBBE #32EBBE transparent transparent;
|
|
outline: solid 2px rgba(255, 255, 255, 0.747);
|
|
border-width: 20px 40px 0 0;
|
|
}
|
|
|
|
.page_element:hover{
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
.page_element:active{
|
|
transition: all 0.05s;
|
|
filter: brightness(70%);
|
|
scale: 0.9;
|
|
}
|
|
|
|
.key_menu .panel .keys_container{
|
|
position: relative;
|
|
margin-top: 85px;
|
|
height: 580px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-inline: 10px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element{
|
|
position: relative;
|
|
height: 78px;
|
|
width: 78px;
|
|
margin-top: 16px;
|
|
margin-inline: 8px;
|
|
transition: background-color 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element.hovered{
|
|
background-color: rgba(121, 215, 190, 0.349);
|
|
border: solid 1px rgba(255, 255, 255, 0.247);
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .key_border{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 80px;
|
|
width: 80px;
|
|
background-image: url('assets/basic_key.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element.hovered .key_border{
|
|
background-image: url('assets/selected_key.svg');
|
|
filter: brightness(0) saturate(100%) invert(73%) sepia(96%) saturate(177%) hue-rotate(109deg) brightness(92%) contrast(86%);
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .number{
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 5px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
text-shadow: 4px 1px 0px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element.hovered .number{
|
|
color: white;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .temporary{
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 10px 10px 0 0;
|
|
border-color: #32EBBE #32ebbd3d transparent transparent;
|
|
animation: temporary 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes temporary {
|
|
50%{
|
|
border-color: #32ebbd3d #32EBBE transparent transparent;
|
|
}
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .name{
|
|
position: absolute;
|
|
bottom: 5px;
|
|
width: 100%;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
text-shadow: 4px 1px 0px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .key_image{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 80%;
|
|
width: 80%;
|
|
background-image: url('assets/key.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .key_image.vehicle{
|
|
background-image: url('assets/vehicle_key.svg');
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .dropdown{
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.key_menu .panel .keys_container .key_element .dropdown .dropdown_btn{
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.actions_section{
|
|
display: none;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel{
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20px;
|
|
transform: translate(0%, -50%);
|
|
width: 110px;
|
|
background-color: rgba(61, 61, 61, 0.425);
|
|
backdrop-filter: blur(25px);
|
|
font-family: 'Futura PT', sans-serif;
|
|
z-index: 10;
|
|
overflow-y: auto;
|
|
border-top: solid white 3px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@keyframes actions_panel {
|
|
0%{
|
|
transform: translate(0px, -50%) scale(1, 0.0);
|
|
}
|
|
100%{
|
|
transform: translate(0px, -50%);
|
|
}
|
|
}
|
|
|
|
@keyframes reverse_actions_panel {
|
|
0%{
|
|
transform: translate(0px, -50%);
|
|
}
|
|
100%{
|
|
transform: translate(0px, -50%) scale(1, 0.0);
|
|
}
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .key_deleting{
|
|
position: relative;
|
|
margin: 16px;
|
|
height: 80px;
|
|
width: 80px;
|
|
background-image: url('assets/selected_key.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
filter: brightness(0) saturate(100%) invert(49%) sepia(41%) saturate(4609%) hue-rotate(329deg) brightness(99%) contrast(97%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .key_deleting.hovered{
|
|
background-color: #f9545485;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .key_deleting .bg{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 78px;
|
|
width: 78px;
|
|
background-image: repeating-linear-gradient(45deg, #f95454 0, #f95454 11px, transparent 0, transparent 50%);
|
|
background-size: 30px 30px;
|
|
background-color: rgba(0, 0, 0, 0.342);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .key_deleting .bin{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 40%;
|
|
width: 40%;
|
|
background-image: url('assets/bin.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel hr{
|
|
border: none;
|
|
height: 2px;
|
|
background-color: rgba(255, 255, 255, 0.671);
|
|
opacity: 1;
|
|
width: 70%;
|
|
margin-left: 15%;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container{
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element{
|
|
position: relative;
|
|
height: 78px;
|
|
width: 78px;
|
|
margin-bottom: 16px;
|
|
margin-inline: 16px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element.hovered{
|
|
background-color: rgba(255, 255, 255, 0.253);
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element .element_border{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 80px;
|
|
width: 80px;
|
|
background-image: url('assets/basic_key.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element.hovered .element_border{
|
|
background-image: url('assets/selected_key.svg');
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element .people_image{
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 70%;
|
|
width: 70%;
|
|
background-image: url('assets/people.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element .id{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
color: rgb(255, 255, 255);
|
|
text-shadow: 4px 1px 0px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.key_menu .actions_section #actions_panel .people_container .people_element .text{
|
|
position: absolute;
|
|
top: 45%;
|
|
transform: translate(0%, -50%);
|
|
width: 100%;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 65px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.404);
|
|
}
|
|
|
|
.key_purchase_menu{
|
|
display: none;
|
|
}
|
|
|
|
.key_purchase_menu .panel{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 400px;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(61, 61, 61, 0.425);
|
|
backdrop-filter: blur(25px);
|
|
font-family: 'Futura PT', sans-serif;
|
|
animation: panel 1.5s ease both;
|
|
}
|
|
|
|
.key_purchase_menu .panel .description{
|
|
position: absolute;
|
|
top: 65px;
|
|
left: 20px;
|
|
font-weight: 200;
|
|
font-size: 15px;
|
|
line-height: 17px;
|
|
color: #ffffffb6;
|
|
width: 300px;
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container{
|
|
position: relative;
|
|
margin-top: 40px;
|
|
max-height: 570px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-inline: 8px;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container .vehicle_element{
|
|
position: relative;
|
|
height: 60px;
|
|
width: 380px;
|
|
margin-top: 16px;
|
|
margin-inline: 8px;
|
|
background-color: rgba(255, 255, 255, 0.171);
|
|
backdrop-filter: blur(60px);
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container .vehicle_element .plate{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
transform: translate(0%, -50%);
|
|
color: white;
|
|
font-size: 23px;
|
|
text-shadow: 5px 1px 0px rgba(0, 0, 0, 0.397);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container .vehicle_element .price{
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 120px;
|
|
transform: translate(0%, -50%);
|
|
color: #79D7BE;
|
|
font-size: 23px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container .vehicle_element .action_btn{
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 15px;
|
|
transform: translate(0%, -50%);
|
|
}
|
|
|
|
.key_purchase_menu .panel .vehicles_container .vehicle_element .element_border{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 60px;
|
|
width: 370px;
|
|
background-image: url('assets/basic_vehicle.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
@keyframes showmenu {
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes hidemenu {
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.key_notify{
|
|
position: absolute;
|
|
bottom: 50px;
|
|
right: 200px;
|
|
height: 60px;
|
|
width: 220px;
|
|
font-family: 'Futura PT', sans-serif;
|
|
display: none;
|
|
}
|
|
|
|
.key_notify .container{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: #3d3d3dd8;
|
|
animation: container 1s ease both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes container {
|
|
0%{
|
|
width: 0%;
|
|
transform: translate(-50%, -50%) scaleX(0);
|
|
}
|
|
40%{
|
|
transform: translate(-50%, -50%) scaleX(1);
|
|
}
|
|
100%{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes reverse_container {
|
|
0%{
|
|
width: 100%;
|
|
}
|
|
60%{
|
|
transform: translate(-50%, -50%) scaleX(1);
|
|
}
|
|
100%{
|
|
width: 0%;
|
|
transform: translate(-50%, -50%) scaleX(0);
|
|
}
|
|
}
|
|
|
|
|
|
.key_notify .container::before, .key_notify .container::after{
|
|
content: "";
|
|
position: absolute;
|
|
height: 20px;
|
|
width: 20px;
|
|
background-image: url('assets/panel_border.svg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_notify .container::before{
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.key_notify .container::after{
|
|
bottom: 0px;
|
|
right: 0px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.key_notify .text{
|
|
position: absolute;
|
|
top: 35%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
text-shadow: 5px 1px 0px rgba(0, 0, 0, 0.397);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.key_notify .line{
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
height: 10px;
|
|
width: 200px;
|
|
background-image: url('assets/door_line.svg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.key_notify .line.red{
|
|
filter: brightness(0) saturate(100%) invert(52%) sepia(82%) saturate(3630%) hue-rotate(329deg) brightness(100%) contrast(97%);
|
|
}
|
|
|
|
.key_notify .line .prog_line{
|
|
position: absolute;
|
|
left: 7%;
|
|
width: 93%;
|
|
height: 100%;
|
|
background-color: #79D7BE;
|
|
animation: prog_line 2s ease both;
|
|
}
|
|
|
|
@keyframes prog_line {
|
|
0%{
|
|
width: 0;
|
|
}
|
|
100%{
|
|
width: 93%;
|
|
}
|
|
} |