Main/resources/[housing]/brutal_keys/html/style.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%;
    }
}