housing und dj
This commit is contained in:
Nordi98
parent
112c7b1761
commit
10a5d168d4
731 changed files with 506993 additions and 0 deletions
135
resources/[housing]/qs-housing/html/assets/style/camera.css
Normal file
135
resources/[housing]/qs-housing/html/assets/style/camera.css
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/* Style for camera element */
|
||||
|
||||
/* Container */
|
||||
.camera {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.camera.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Edge */
|
||||
.camera .edge {
|
||||
position: absolute;
|
||||
|
||||
width: 13.6rem;
|
||||
height: 13.6rem;
|
||||
}
|
||||
|
||||
.camera .edge:nth-child(1) {
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
|
||||
border-top: 0.5rem var(--color-ffffff) solid;
|
||||
border-left: 0.5rem var(--color-ffffff) solid;
|
||||
}
|
||||
|
||||
.camera .edge:nth-child(2) {
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
|
||||
border-top: 0.5rem var(--color-ffffff) solid;
|
||||
border-right: 0.5rem var(--color-ffffff) solid;
|
||||
}
|
||||
|
||||
.camera .edge:nth-child(3) {
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
|
||||
border-bottom: 0.5rem var(--color-ffffff) solid;
|
||||
border-left: 0.5rem var(--color-ffffff) solid;
|
||||
}
|
||||
|
||||
.camera .edge:nth-child(4) {
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
|
||||
border-bottom: 0.5rem var(--color-ffffff) solid;
|
||||
border-right: 0.5rem var(--color-ffffff) solid;
|
||||
}
|
||||
|
||||
/* Center */
|
||||
.camera .center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 0.2rem;
|
||||
height: 2rem;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.camera .center:nth-child(5) {
|
||||
width: 2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
|
||||
/* Live */
|
||||
.camera .recording p {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 4rem;
|
||||
|
||||
font-size: 3rem;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ff0000);
|
||||
}
|
||||
|
||||
.camera .recording div {
|
||||
position: absolute;
|
||||
top: 5.25rem;
|
||||
left: 11.8rem;
|
||||
|
||||
animation: 0.6s ease-in-out 0s infinite alternate pulse;
|
||||
|
||||
border-radius: 100%;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
|
||||
background: var(--color-ff0000);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Informations */
|
||||
.camera .camera_name {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 50%;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
font-size: 4rem;
|
||||
font-family: monospace;
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.camera .camera_type {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
font-size: 2rem;
|
||||
font-family: monospace;
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
394
resources/[housing]/qs-housing/html/assets/style/categories.css
Normal file
394
resources/[housing]/qs-housing/html/assets/style/categories.css
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
/* Style for decorate subelement categories */
|
||||
/* Custom css for stash because its a very big element */
|
||||
@import url('./stash.css');
|
||||
|
||||
|
||||
/* Container */
|
||||
.categories {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
|
||||
width: 30vw;
|
||||
height: 14vw;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.categories .sidebar img {
|
||||
width: 3vw;
|
||||
object-fit: contain;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.categories .sidebar .active img {
|
||||
filter: grayscale(0%);
|
||||
filter: drop-shadow(0px 0px 15px var(--color-00a3ffb3));
|
||||
}
|
||||
|
||||
.categories .sidebar {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
|
||||
display: grid;
|
||||
|
||||
border-right: 0.01vw var(--color-0000000a) solid;
|
||||
width: 3.5vw;
|
||||
height: 100%;
|
||||
|
||||
background: var(--color-CFD2DB);
|
||||
}
|
||||
|
||||
.categories .sidebar a {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
z-index: 999;
|
||||
display: inline-grid;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
cursor: pointer;
|
||||
fill: #2fb2d9;
|
||||
}
|
||||
|
||||
/* Sidebar arrow */
|
||||
.categories .sidebar a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 110%;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
margin-right: 0;
|
||||
border: 1vw solid var(--color-ffffff-dark);
|
||||
border-color: transparent var(--color-ffffff-dark) transparent transparent;
|
||||
}
|
||||
|
||||
.categories .sidebar a.active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Sidebar tooltip */
|
||||
.categories .sidebar a::after {
|
||||
content: attr(help-text);
|
||||
|
||||
position: fixed;
|
||||
left: 5.625vw;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
|
||||
margin-left: 3.89vh;
|
||||
box-shadow: 0 0 1.33vh var(--color-00000033);
|
||||
border: 0.00133vh var(--color-0000000a) solid;
|
||||
border-top: 0.00133vh var(--color-0000001c) solid;
|
||||
border-radius: 1.33vh;
|
||||
width: 14.08vw;
|
||||
height: 2.5vh;
|
||||
/* padding-top: 0.98vh; 75% of 1.30vh */
|
||||
/* padding-top: 75%; */
|
||||
padding: 1.5vh 1.5vh 1vh 1.5vh;
|
||||
pointer-events: none;
|
||||
|
||||
background: var(--color-ffffffe8);
|
||||
|
||||
font-size: 1.94vh;
|
||||
font-family: 'Source Sans Pro';
|
||||
text-align: center;
|
||||
color: #002b53;
|
||||
}
|
||||
|
||||
.categories .sidebar #dynamic_objects::after {
|
||||
top: 9.21vw;
|
||||
}
|
||||
|
||||
.categories .sidebar #objects::after {
|
||||
top: 4.95vw;
|
||||
}
|
||||
|
||||
.categories .sidebar #stash::after {
|
||||
top: 0.54vw;
|
||||
}
|
||||
|
||||
.categories .sidebar a:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Topbar */
|
||||
.categories .topbar {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items:
|
||||
center;
|
||||
align-content:
|
||||
center;
|
||||
flex-direction:
|
||||
column;
|
||||
gap: 0.02vw;
|
||||
right:-3%;
|
||||
width: 3vw;
|
||||
height: 100%;
|
||||
background: var(--color-CFD2DB);
|
||||
|
||||
z-index:555;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Topbar Dynamic Objects */
|
||||
.categories .topbar .room-selector {
|
||||
position: relative;
|
||||
top: 0.vw;
|
||||
|
||||
transition: filter 0.2s ease-in-out;
|
||||
|
||||
width: 100%;
|
||||
height: calc(100% - 0.1vw);
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories .topbar .active {
|
||||
background-color: var(--color-00A3FF);
|
||||
box-shadow: 1px 1px 15px var(--color-00A3FF);
|
||||
filter: drop-shadow(0px 0px 4px var(--color-ffffffb3));
|
||||
}
|
||||
|
||||
.categories .topbar .room-selector:not(.active):not(:hover) {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/* Toopbar Room Selector Tooltip */
|
||||
.categories .topbar .room-selector::before {
|
||||
position: static;
|
||||
|
||||
z-index: 9;
|
||||
|
||||
/* bottom: 5.56vh; */
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
|
||||
box-shadow: 0 0 1.78vh var(--color-00000033);
|
||||
|
||||
border-radius: 1.78vh;
|
||||
|
||||
width: fit-content;
|
||||
/* padding: 0.37vh 1.30vh; */
|
||||
padding: .75vh;
|
||||
|
||||
background: #ffffff;
|
||||
|
||||
font-size: 1.78vh;
|
||||
font-family: 'Source Sans Pro';
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #002b53;
|
||||
|
||||
pointer-events: none;
|
||||
content: attr(help-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.categories .topbar .room-selector::after {
|
||||
position: relative;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
left: 50%;
|
||||
|
||||
display: block;
|
||||
opacity: 0;
|
||||
|
||||
transform: translateX(-50%) rotate(270deg);
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
|
||||
|
||||
border: 0.25vh solid var(--color-ffffff);
|
||||
border-color: transparent var(--color-ffffff) transparent transparent;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
.categories .topbar .room-selector:hover::after,
|
||||
.categories .topbar .room-selector:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Topbar Objects */
|
||||
.categories .topbar .searchbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.categories .topbar .searchbar input {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1vh;
|
||||
transform: translateY(-50%);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
padding: 0vw 0.5vw;
|
||||
font-size: 1vw;
|
||||
color: #002b53;
|
||||
}
|
||||
|
||||
.categories .topbar .searchbar input::placeholder {
|
||||
color: var(--color-00A3FF);
|
||||
text-shadow: 0 0 0.1vh var(--color-00A3FF);
|
||||
}
|
||||
|
||||
.categories .topbar .searchbar svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(70% + 1vh);
|
||||
transform: translateY(-50%) scale(1.5);
|
||||
filter: grayscale(50%);
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
cursor: pointer;
|
||||
fill: #ffffff;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.categories .topbar .alphabetic div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2vw;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.categories .topbar .alphabetic div.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.categories .content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 3.5vw;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
justify-content: left;
|
||||
|
||||
overflow-y: scroll;
|
||||
|
||||
height: 13.5vw;
|
||||
width: 24.5vw;
|
||||
padding: 0.25vw;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.categories .content::-webkit-scrollbar {
|
||||
width: 0.3vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.categories .content::-webkit-scrollbar-track {
|
||||
background: #ffffff0e;
|
||||
}
|
||||
|
||||
.categories .content::-webkit-scrollbar-thumb {
|
||||
background: var(--color-ffffff);
|
||||
height: 1vw;
|
||||
border-radius: 1vw;
|
||||
box-shadow: 0 0 1vw #00000048;
|
||||
}
|
||||
|
||||
/* Content Dynamic Objects */
|
||||
.categories .content .room-category {
|
||||
position: absolute;
|
||||
|
||||
transition: filter 0.2s ease-in-out;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories .content .room-category:not(.active):not(:hover) {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/* Content Objects */
|
||||
.categories .content .category {
|
||||
margin: 0.15vw;
|
||||
border-radius: 0.5vw;
|
||||
|
||||
height: 4.9vw;
|
||||
|
||||
background: linear-gradient(180deg, var(--color-EEEEEE) 0%, var(--color-B7D6E8) 100%);
|
||||
cursor: pointer;
|
||||
border: 0.2vw transparent solid;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.categories .content .category.active {
|
||||
background: var(--color-00A3FF);
|
||||
box-shadow: 0px 0px 5px 1px var(--color-00A3FF);
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.categories .content .category img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 100%;
|
||||
max-width: 4.8vw;
|
||||
height: 100%;
|
||||
max-height: 3.9vw;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.categories .activeSearchingBar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
background-color: var(--color-ffffff80);
|
||||
width: 35vh;
|
||||
height: 3.70vh;
|
||||
position: absolute;
|
||||
left: calc(100vw - 35vh);
|
||||
bottom: 100%;
|
||||
border-top-left-radius: 1.11vh;
|
||||
}
|
||||
261
resources/[housing]/qs-housing/html/assets/style/contract.css
Normal file
261
resources/[housing]/qs-housing/html/assets/style/contract.css
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
/* Style for contract element */
|
||||
|
||||
/* Container */
|
||||
.contract {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
right: 5vh;
|
||||
display: none;
|
||||
border-radius: 0.46vh; /* 5px to vh */
|
||||
width: 64vh;
|
||||
height: 80vh;
|
||||
/* background: var(--color-ffffff)smoke;
|
||||
box-shadow: 0 0 0.93vh 0.93vh #0000000d;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0px 2.04vh 6.48vh 0.37vh; */
|
||||
}
|
||||
|
||||
#contract_img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 115%;
|
||||
height: 115%;
|
||||
}
|
||||
|
||||
.contract::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 0.75vw;
|
||||
}
|
||||
|
||||
.contract::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.226);
|
||||
}
|
||||
|
||||
.contract::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 1vh var(--color-00000048); /* 10px to vh */
|
||||
border-radius: 0.93vh; /* 10px to vh */
|
||||
height: 0.93vh; /* 10px to vh */
|
||||
background: var(--color-000000);
|
||||
}
|
||||
|
||||
.contract::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.contract.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Container Items */
|
||||
.contract h1 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
font-size: 2.5vh; /* Adjusted from 1.5rem to 2.5vh */
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contract img {
|
||||
position: absolute;
|
||||
top: 3vh; /* 3% to vh */
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: 5.56vh; /* 10% to vh */
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.contract .content {
|
||||
position: absolute;
|
||||
top: 20%; /* 20% to vh */
|
||||
left: 5vh; /* 5% to vh */
|
||||
width: 50vh; /* 90% to vh */
|
||||
font-size: 1.48vh; /* 1rem to vh */
|
||||
line-height: 2.37vh; /* 1.6rem to vh */
|
||||
font-family: 'Hindi Light', sans-serif;
|
||||
font-weight: 100;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Custom Elements */
|
||||
.contract .content highlight {
|
||||
margin: 0 -0.19vh; /* -0.2em to vh */
|
||||
border-radius: 0.09vh; /* 0.1rem to vh */
|
||||
padding: 0em 0.19vh; /* 0.2em to vh */
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
background: transparent;
|
||||
background-color: var(--color-00A3FF);
|
||||
font-family: 'CabinetGrotesk-Bold';
|
||||
}
|
||||
|
||||
.contract .content .informations highlight {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.contract .content {
|
||||
font-family: 'CabinetGrotesk-Regular';
|
||||
}
|
||||
|
||||
/* Informations */
|
||||
.contract .informations {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contract .informations h2 {
|
||||
display: inline-block;
|
||||
border-radius: 0.19vh; /* 2px to vh */
|
||||
width: -webkit-fill-available;
|
||||
padding: 0.93vh; /* 1% to vh */
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: var(--color-000000);
|
||||
font-size: 2.22vh; /* 1.5rem to vh */
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Informations Boxes */
|
||||
.contract .informations div {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
margin-bottom: 0.46vh; /* 0.5rem to vh */
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contract .informations span {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
font-family: 'CabinetGrotesk-Light';
|
||||
}
|
||||
|
||||
.contract .informations highlight {
|
||||
height: max-content;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Credit */
|
||||
.contract .credit {
|
||||
margin-top: 5.56vh; /* 5% to vh */
|
||||
}
|
||||
|
||||
.contract .credit.active {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contract .credit possibility {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.contract .credit possibility.active {
|
||||
pointer-events: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.contract .buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8.33vh; /* 7.5% to vh */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.contract .buttons button {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 1.02vh; /* 11px to vh */
|
||||
width: 39%;
|
||||
|
||||
background: var(--color-9e1818);
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 1.48vh; /* 1rem to vh */
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
padding: 1.39vh 0.93vh; /* 15px 10px to vh */
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.contract .buttons button:hover {
|
||||
background: var(--color-589e18);
|
||||
}
|
||||
|
||||
#summary {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1vh 0 1vh 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#sign_label {
|
||||
position: relative;
|
||||
color: var(--color-000000);
|
||||
font-family: "CabinetGrotesk-Regular";
|
||||
font-size: 1.39vh;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#sign_value {
|
||||
position: relative;
|
||||
color: var(--color-000000);
|
||||
text-align: center;
|
||||
font-family: "Britania";
|
||||
font-size: 2.76vh;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#contract_total_label {
|
||||
position: relative;
|
||||
color: var(--color-000000);
|
||||
text-align: right;
|
||||
font-family: "CabinetGrotesk-Medium";
|
||||
font-size: 2.96vh;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#contract_total {
|
||||
position: relative;
|
||||
height: 3.52vh;
|
||||
border-radius: 3px;
|
||||
background: var(--color-00A3FF);
|
||||
color: var(--color-000000);
|
||||
text-align: center;
|
||||
font-family: "CabinetGrotesk-Bold";
|
||||
font-size: 2.96vh;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
line-height: normal;
|
||||
}
|
||||
#contract_credit {
|
||||
display: none;
|
||||
}
|
||||
154
resources/[housing]/qs-housing/html/assets/style/decorate.css
Normal file
154
resources/[housing]/qs-housing/html/assets/style/decorate.css
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
/* Style for decorate element */
|
||||
@import url('./categories.css');
|
||||
@import url('./items.css');
|
||||
@import url('./menu.css');
|
||||
|
||||
.decorate {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.decorate.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.introQuasar{
|
||||
/* display: none; */
|
||||
position:
|
||||
absolute;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
.intro {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .4s all;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
#intro {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
#intro-logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#intro-top {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
background-color: #090809;
|
||||
z-index: -1;
|
||||
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#intro-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
height: 50%;
|
||||
background-color: #090809;
|
||||
z-index: -1;
|
||||
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#intro-server-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
#intro-server-name {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
#intro button {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 3vh;
|
||||
width: fit-content;
|
||||
align-self: flex-end;
|
||||
place-self: flex-end;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-center {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.scale-down {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#intro-logo-container img {
|
||||
width: 32vh;
|
||||
}
|
||||
|
||||
#intro-logo-container {
|
||||
transition: cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
|
||||
}
|
||||
|
||||
.animate__animated.animate__fadeOutDown {
|
||||
animation-duration: 250ms;
|
||||
}
|
||||
|
||||
.animate__animated.animate__fadeInUp {
|
||||
animation-duration: 250ms;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1560px) {
|
||||
.attachmentItem-container {
|
||||
|
||||
height:93.4px;
|
||||
width: 93.4px;
|
||||
transform: translateX(-150px);
|
||||
|
||||
}
|
||||
|
||||
#attachment-canvas {
|
||||
transform: translate(-50%,-50%) scale(0.7)
|
||||
}
|
||||
}
|
||||
37
resources/[housing]/qs-housing/html/assets/style/fonts.css
Normal file
37
resources/[housing]/qs-housing/html/assets/style/fonts.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/* Imports fonts */
|
||||
|
||||
/* Crimson for contract */
|
||||
@font-face {
|
||||
font-family: 'Crimson';
|
||||
src: url("../fonts/CrimsonFont.ttf");
|
||||
}
|
||||
|
||||
/* Hindi for contract */
|
||||
@font-face {
|
||||
font-family: 'Hindi Light';
|
||||
src: url("../fonts/LightHindiFont.ttf");
|
||||
}
|
||||
|
||||
/* Hindi for contract */
|
||||
@font-face {
|
||||
font-family: 'Hindi';
|
||||
src: url("../fonts/MediumHindiFont.ttf");
|
||||
}
|
||||
|
||||
/* Source Sans for decorate */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url("../fonts/SourceSansFont.ttf");
|
||||
}
|
||||
|
||||
/* Sims for decorate */
|
||||
@font-face {
|
||||
font-family: 'Sims';
|
||||
src: url("../fonts/SimsFont.woff2");
|
||||
}
|
||||
|
||||
/* Britania */
|
||||
@font-face {
|
||||
font-family: 'Britania';
|
||||
src: url("../fonts/Britania-Sign.ttf");
|
||||
}
|
||||
141
resources/[housing]/qs-housing/html/assets/style/general.css
Normal file
141
resources/[housing]/qs-housing/html/assets/style/general.css
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/* Style with general rules */
|
||||
|
||||
:root {
|
||||
--container-900: rgb(24 24 27);
|
||||
--container-800: rgb(39 39 42);
|
||||
--container-700: rgb(63 63 70);
|
||||
--pink-800: rgb(157 23 77);
|
||||
--pink-700: rgb(190 24 93);
|
||||
--pink-600: rgb(219 39 119);
|
||||
--blue-800: rgb(23 77 157);
|
||||
--blue-700: rgb(24 93 190);
|
||||
--blue-600: rgb(39 119 219);
|
||||
--border: #363636;
|
||||
--color-ffffff: #ffffff;
|
||||
--color-ffffff-dark: #ffffff;
|
||||
--color-ff0000: #ff0000;
|
||||
--color-00a3ffb3: #00a3ffb3;
|
||||
--color-0000000a: #0000000a;
|
||||
--color-CFD2DB: #CFD2DB;
|
||||
--color-ffffffe8: #ffffffe8;
|
||||
--color-ffffffb3: #ffffffb3;
|
||||
--color-00A3FF: #00A3FF;
|
||||
--color-00000033: #00000033;
|
||||
--color-0000001c: #0000001c;
|
||||
--color-EEEEEE: #EEEEEE;
|
||||
--color-B7D6E8: #B7D6E8;
|
||||
--color-ffffff80: #ffffff80;
|
||||
--color-00000048: #00000048;
|
||||
--color-000000: #000000;
|
||||
--color-9e1818: #9e1818;
|
||||
--color-589e18: #589e18;
|
||||
--color-00000014: #00000014;
|
||||
--color-d3d0d04d: #d3d0d04d;
|
||||
--color-ffffff3a: #ffffff3a;
|
||||
--color-ABCBF6: #ABCBF6;
|
||||
--color-F4BFFF: #F4BFFF;
|
||||
--color-ABF6AB: #ABF6AB;
|
||||
--color-ff8c00: #ff8c00;
|
||||
--color-00ff00: #00ff00;
|
||||
--color-6c757d: #6c757d;
|
||||
--color-FF3737: #FF3737;
|
||||
--color-d9d9d9: #d9d9d9;
|
||||
--color-0000004d: #0000004d;
|
||||
--color-2FEE1F: #2FEE1F;
|
||||
--color-00000026: #00000026;
|
||||
--color-090809: #090809;
|
||||
--color-141414: #141414;
|
||||
--color-ffffff66: #ffffff66;
|
||||
--color-34445200: #34445200;
|
||||
--color-ff373700: #ff373700;
|
||||
--color-0E151B: #0E151B;
|
||||
--color-ff3737e6: #ff3737e6;
|
||||
--color-ff3737cc: #ff3737cc;
|
||||
--color-2fee1f00: #2fee1f00;
|
||||
--color-2fee1fe6: #2fee1fe6;
|
||||
--color-1f1f1f00: #1f1f1f00;
|
||||
--color-1F1F1F: #1F1F1F;
|
||||
--color-ff373733: #ff373733;
|
||||
--color-00a3ffe6: #00a3ffe6;
|
||||
--color-45648100: #45648100;
|
||||
--color-313131: #313131;
|
||||
--color-ffffff4d: #ffffff4d;
|
||||
--color-68686880: #68686880;
|
||||
--color-686868cc: #686868cc;
|
||||
--color-1B1B1B: #1B1B1B;
|
||||
--color-000000bf: #000000bf;
|
||||
--color-1b1b1b00: #1b1b1b00;
|
||||
--color-3b3b3b51: #3b3b3b51;
|
||||
--color-00a3ffcc: #00a3ffcc;
|
||||
--color-2fee1fcc: #2fee1fcc;
|
||||
--color-344452: #344452;
|
||||
--color-2fee1f1a: #2fee1f1a;
|
||||
--color-00000000: #00000000;
|
||||
--color-9c9c9c8c: #9c9c9c8c;
|
||||
--color-ffffff33: #ffffff33;
|
||||
--color-94949433: #94949433;
|
||||
--color-393939: #393939;
|
||||
--color-2fee1f: #2fee1f;
|
||||
--color-3d3d3d80: #3d3d3d80;
|
||||
--color-000000cc: #000000cc;
|
||||
--color-532739bf: #532739bf;
|
||||
--color-25c01a: #25c01a;
|
||||
--color-00ff5a: #00ff5a;
|
||||
--color-ffffff8a: #ffffff8a;
|
||||
--color-000000e6: #000000e6;
|
||||
--color-0000001a: #0000001a;
|
||||
--color-002b53: #002b53;
|
||||
--color-00000010: #00000010;
|
||||
--color-0000000f: #0000000f;
|
||||
--color-00000040: #00000040;
|
||||
--color-002b53ed: #002b53ed;
|
||||
--color-00000080: #00000080;
|
||||
--color-000000f0: #000000f0;
|
||||
--color-4CAF50: #4CAF50;
|
||||
--color-000000b3: #000000b3;
|
||||
--color-2fee1f80: #2fee1f80;
|
||||
--color-45a049: #45a049;
|
||||
--color-ffffff0e: #ffffff0e;
|
||||
--color-006299: #006299;
|
||||
--color-00a3ff59: #00a3ff59;
|
||||
--color-b9b9b9a6: #b9b9b9a6;
|
||||
--color-00000020: #00000020;
|
||||
--color-002b53-white: #002b53;
|
||||
}
|
||||
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
font-family: 'Source Sans Pro';
|
||||
}
|
||||
|
||||
/* No drag and drop */
|
||||
img {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
button.red {
|
||||
background-color: var(--pink-700) !important;
|
||||
}
|
||||
|
||||
button.blue {
|
||||
background-color: var(--blue-700) !important;
|
||||
}
|
||||
|
||||
button.red:hover {
|
||||
background-color: var(--pink-800) !important;
|
||||
}
|
||||
|
||||
button.blue:hover {
|
||||
background-color: var(--blue-800) !important;
|
||||
}
|
||||
141
resources/[housing]/qs-housing/html/assets/style/items.css
Normal file
141
resources/[housing]/qs-housing/html/assets/style/items.css
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/* Style for decorate subelement itemlist */
|
||||
/* :root {
|
||||
--decorate-box-width: 4.5vw;
|
||||
} */
|
||||
|
||||
/* Containers */
|
||||
.decorate .itemlist {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 30.8vw;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
border-left: 0.1vw var(--color-00000014) solid;
|
||||
width: calc(100% - 30vw);
|
||||
height: 14vw;
|
||||
padding-left: 0.45vw;
|
||||
|
||||
background: var(--color-d3d0d04d);
|
||||
}
|
||||
|
||||
.decorate .itemlist .itemcontainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3vw;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: calc(100% - 0.5vw);
|
||||
height: calc(100% - 0.9vw);
|
||||
|
||||
padding: 0.45vw 0;
|
||||
}
|
||||
|
||||
/* Container Scrollbar */
|
||||
.decorate .itemlist .itemcontainer::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
||||
width: 0.45vw;
|
||||
}
|
||||
|
||||
.decorate .itemlist .itemcontainer::-webkit-scrollbar-track {
|
||||
background: var(--color-ffffff3a);
|
||||
}
|
||||
|
||||
.decorate .itemlist .itemcontainer::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 1vw var(--color-00000048);
|
||||
border-radius: 1vw;
|
||||
height: 1vw;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.decorate .itemlist .itemcontainer::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
/* Item Boxes */
|
||||
.decorate .itemlist .itemcontainer .box {
|
||||
border: 0.36vh transparent solid; /* 0.2vw to vh */
|
||||
border-radius: 1rem; /* 0.5vw to vh */
|
||||
/* width: var(--decorate-box-width); */
|
||||
height: 8.02vh; /* 4.5vw to vh */
|
||||
aspect-ratio: 1/1;
|
||||
padding: 1.37vh; /* 0.765vw to vh */
|
||||
|
||||
background: linear-gradient(180deg, var(--color-EEEEEE) 0%, var(--color-B7D6E8) 100%);
|
||||
box-shadow: 0px 0.36vh 2.22vh 0px rgba(0, 0, 0, 0.68); /* 3.845px, 24.031px to vh */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.decorate .itemlist .itemcontainer .box.selected {
|
||||
background: var(--color-00A3FF);
|
||||
box-shadow: 0px 0px 5px 1px var(--color-00A3FF);
|
||||
}
|
||||
|
||||
/* Item Boxes Images */
|
||||
.decorate .itemlist .itemcontainer .box img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Item Boxes Details */
|
||||
.box-details {
|
||||
/* display: flex;
|
||||
z-index: 1;
|
||||
|
||||
position: relative;
|
||||
flex-direction: row-reverse;
|
||||
justify-items: right;
|
||||
|
||||
width: 100%;
|
||||
height: 0.85vh;
|
||||
|
||||
margin-top: -2vw;
|
||||
margin-left: -0.95vw;
|
||||
|
||||
padding: 0.25vw;
|
||||
gap: 0.25vw; */
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 0.25vw;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.box-details svg {
|
||||
background: var(--color-ABCBF6);
|
||||
fill: var(--color-ffffff);
|
||||
width: 0.75vw;
|
||||
height: 0.75vw;
|
||||
padding: 0.25vw;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.box-details-gardrobe {
|
||||
background-color: var(--color-F4BFFF) !important;
|
||||
}
|
||||
|
||||
.box-details-stash {
|
||||
background-color: var(--color-ABF6AB) !important;
|
||||
}
|
||||
389
resources/[housing]/qs-housing/html/assets/style/main.css
Normal file
389
resources/[housing]/qs-housing/html/assets/style/main.css
Normal file
|
|
@ -0,0 +1,389 @@
|
|||
|
||||
@import url('./general.css');
|
||||
@import url('./contract.css');
|
||||
@import url('./modal.css');
|
||||
@import url('./camera.css');
|
||||
@import url('./decorate.css');
|
||||
@import url('./realestate.css');
|
||||
@import url('./management.css');
|
||||
@import url('./fonts.css');
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Thin';
|
||||
src: url('../fonts/CabinetGrotesk-Thin.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Thin.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Thin.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Extralight';
|
||||
src: url('../fonts/CabinetGrotesk-Extralight.woff2') format('woff2'),
|
||||
url('../font/CabinetGrotesk-Extralight.woff') format('woff'),
|
||||
url('../font/CabinetGrotesk-Extralight.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Light';
|
||||
src: url('../fonts/CabinetGrotesk-Light.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Light.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Regular';
|
||||
src: url('../fonts/CabinetGrotesk-Regular.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Regular.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Medium';
|
||||
src: url('../fonts/CabinetGrotesk-Medium.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Medium.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Bold';
|
||||
src: url('../fonts/CabinetGrotesk-Bold.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Bold.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
src: url('../fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Extrabold.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Extrabold.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
src: url('../fonts/CabinetGrotesk-Black.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Black.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'CabinetGrotesk-Variable';
|
||||
src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2'),
|
||||
url('../fonts/CabinetGrotesk-Variable.woff') format('woff'),
|
||||
url('../fonts/CabinetGrotesk-Variable.ttf') format('truetype');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
align-content:center;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.orange-text {
|
||||
color: var(--color-ff8c00);
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: var(--color-00ff00);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-6c757d);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type='checkbox'].disabled+label,
|
||||
input[type='radio'].disabled+label {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch+label {
|
||||
position: relative;
|
||||
padding: 0 0 0 50px !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch+label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width:32px;
|
||||
/* x*5 */
|
||||
height: 15px;
|
||||
/* x*3 */
|
||||
border-radius: 16px;
|
||||
/* x*2 */
|
||||
background: var(--color-FF3737);
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch+label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0px;
|
||||
top: -2px;
|
||||
|
||||
width: 17px;
|
||||
/* x*3 */
|
||||
height: 17px;
|
||||
/* x*3 */
|
||||
border-radius: 16px;
|
||||
/* x*2 */
|
||||
background: var(--color-ffffff);
|
||||
border: 1px solid var(--color-d9d9d9);
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch+label:hover:after {
|
||||
box-shadow: 0 0 5px var(--color-0000004d);
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch:checked+label:after {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch:checked+label:before {
|
||||
background: var(--color-2FEE1F);
|
||||
}
|
||||
|
||||
/* SMALL */
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm+label {
|
||||
position: relative;
|
||||
padding: 0 0 0 32px !important;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm+label:before {
|
||||
width: 25px;
|
||||
/* x*5 */
|
||||
height: 15px;
|
||||
/* x*3 */
|
||||
border-radius: 10px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm+label:after {
|
||||
width: 15px;
|
||||
/* x*3 */
|
||||
height: 15px;
|
||||
/* x*3 */
|
||||
border-radius: 10px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm+label:hover:after {
|
||||
box-shadow: 0 0 3px var(--color-0000004d);
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-sm:checked+label:after {
|
||||
margin-left: 10px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
/* LARGE */
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg {
|
||||
margin: 10px 0 0 20px;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg+label {
|
||||
position: relative;
|
||||
padding: 7px 0 0 60px !important;
|
||||
line-height: 2.3em;
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg+label:before {
|
||||
width: 50px;
|
||||
/* x*5 */
|
||||
height: 30px;
|
||||
/* x*3 */
|
||||
border-radius: 20px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg+label:after {
|
||||
width: 30px;
|
||||
/* x*3 */
|
||||
height: 30px;
|
||||
/* x*3 */
|
||||
border-radius: 20px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg+label:hover:after {
|
||||
box-shadow: 0 0 8px var(--color-0000004d);
|
||||
}
|
||||
|
||||
input[type='checkbox'].ios8-switch-lg:checked+label:after {
|
||||
margin-left: 20px;
|
||||
/* x*2 */
|
||||
}
|
||||
|
||||
#intro {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background-color: var(--color-000000);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999999999;
|
||||
transition: cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
|
||||
|
||||
}
|
||||
|
||||
#intro button {
|
||||
background: var(--color-ffffff);
|
||||
color: var(--color-000000);
|
||||
height: 3vh;
|
||||
width: fit-content;
|
||||
align-self: flex-end;
|
||||
place-self: flex-end;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 0px 2px var(--color-00000026);
|
||||
}
|
||||
|
||||
#intro button::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#intro-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
height: 50%;
|
||||
background-color: var(--color-090809);
|
||||
z-index: -1;
|
||||
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
|
||||
}
|
||||
|
||||
/* #intro-logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#intro-logo-container {
|
||||
transition: cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
|
||||
}
|
||||
|
||||
#intro-logo-container img {
|
||||
width: 32vh;
|
||||
} */
|
||||
|
||||
/* .hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#intro,
|
||||
#intro * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#intro-server-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#intro-server-name {
|
||||
color: var(--color-ffffff);
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
#intro #intro-status {
|
||||
padding: 0.2rem 0.6rem 2rem 0.6rem;
|
||||
}
|
||||
|
||||
#intro-top {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
background-color: var(--color-090809);
|
||||
z-index: -1;
|
||||
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
|
||||
} */
|
||||
|
||||
.slide-center {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
|
||||
.listHouseMangLi {
|
||||
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.loadImgDiv {
|
||||
position: absolute;
|
||||
/* width: 1px;
|
||||
height: 1px; */
|
||||
}
|
||||
|
||||
.decorate .itemlist .itemcontainer {
|
||||
width: calc(98% - 0.5vw)!important;
|
||||
padding-left: 1.5em
|
||||
}
|
||||
1561
resources/[housing]/qs-housing/html/assets/style/management.css
Normal file
1561
resources/[housing]/qs-housing/html/assets/style/management.css
Normal file
File diff suppressed because it is too large
Load diff
690
resources/[housing]/qs-housing/html/assets/style/menu.css
Normal file
690
resources/[housing]/qs-housing/html/assets/style/menu.css
Normal file
|
|
@ -0,0 +1,690 @@
|
|||
/* Style for decorate subelement menu */
|
||||
|
||||
/* Container for menu */
|
||||
.decorate .menubar {
|
||||
position: fixed;
|
||||
bottom: 14vw;
|
||||
left: 0;
|
||||
|
||||
transition: height 0.211s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: 0 1vw 1vw 0;
|
||||
|
||||
width: 24.75vw;
|
||||
height: 3vw;
|
||||
|
||||
background:var(--color-ffffff8a);
|
||||
}
|
||||
|
||||
:has(.box:not(.selected):not(.stash):hover) .menubar,
|
||||
.decorate .menubar.active {
|
||||
height: min(27vw, 100vh - 17vw);
|
||||
}
|
||||
|
||||
/* CSS for mainbar */
|
||||
.menubar .mainbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.mainbar-searchbar {
|
||||
position: absolute;
|
||||
background-color: var(--color-ffffff);
|
||||
bottom: 0.5vw;
|
||||
left: 0.25vw;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 1.05vw;
|
||||
|
||||
width: 12.25vw;
|
||||
height: 1.5vw;
|
||||
|
||||
padding: 0.25vw 0.5vw;
|
||||
|
||||
font-size: 0.85vw;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 100;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.mainbar-searchbtn {
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
|
||||
top: 50%;
|
||||
left: 14.25vw;
|
||||
|
||||
transform: translateY(-50%);
|
||||
filter: drop-shadow(0px 0px 3px var(--color-000000e6));
|
||||
height: 1.5vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
stroke: var(--color-ffffff);
|
||||
stroke-width: 10%;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.mainbar-helpbtn {
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
|
||||
top: 50%;
|
||||
left: 16.5vw;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
height: 1.35vw;
|
||||
filter: drop-shadow(0px 0px 3px var(--color-000000e6));
|
||||
cursor: pointer;
|
||||
|
||||
stroke: var(--color-ffffff);
|
||||
stroke-width: 10%;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.mainbar-settingsbtn {
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
|
||||
top: 50%;
|
||||
left: 18.75vw;
|
||||
filter: drop-shadow(0px 0px 3px var(--color-000000e6));
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1.25vw;
|
||||
height: 1.25vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
fill: var(--color-ffffff);
|
||||
}
|
||||
.mainbar-darkmodebtn {
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
filter: drop-shadow(0px 0px 3px var(--color-0000001a));
|
||||
top: 50%;
|
||||
left: 20.65vw;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1.35vw;
|
||||
height: 1.35vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
fill: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.mainbar-closebtn {
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
|
||||
top: 50%;
|
||||
left: 22.25vw;
|
||||
filter: drop-shadow(0px 0px 3px var(--color-000000e6));
|
||||
transform: translateY(-50%);
|
||||
|
||||
height: 1.5vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
stroke: var(--color-ffffff);
|
||||
stroke-width: 10%;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Infobox */
|
||||
/* Container for infobox */
|
||||
.menubar .infobox {
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.211s ease-in-out;
|
||||
|
||||
|
||||
position: absolute;
|
||||
bottom: 3vw;
|
||||
left: 0;
|
||||
|
||||
width: 22.75vw;
|
||||
height: min(22vw, 100vh - 22vw);
|
||||
|
||||
padding: 1vw 0;
|
||||
|
||||
color: var(--color-002b53-white);
|
||||
}
|
||||
|
||||
:not(:has(.box:not(.selected):not(.stash):hover)) .menubar.active .infobox {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:has(.box:not(.selected):hover) .menubar:not(.active) .infobox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Infobox Title */
|
||||
.infobox-title {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
|
||||
height: 3.5vw;
|
||||
|
||||
font-size: 3vw;
|
||||
font-family: 'Sims';
|
||||
}
|
||||
|
||||
/* Infobox Content */
|
||||
.infobox-content {
|
||||
padding: 1vw;
|
||||
height: min(17.5vw, 100vh - 24.5vw);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.infobox-content::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
||||
width: 0.75vw;
|
||||
}
|
||||
|
||||
.infobox-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.infobox-content::-webkit-scrollbar-thumb {
|
||||
border-radius: 1vw;
|
||||
height: 1vw;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.infobox-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
/* Infobox Item */
|
||||
/* Help */
|
||||
.helpbox-description {
|
||||
margin: 0;
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
.helpbox-list {
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
padding: 0 1.25vw;
|
||||
}
|
||||
|
||||
.helpbox-list-item {
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
.settingsbox-description {
|
||||
margin: 0;
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
.settingsbox-container {
|
||||
margin: 0.5vw;
|
||||
}
|
||||
|
||||
.settingsbox-slider {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settingsbox-slider-label {
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
.settingsbox-slider-range {
|
||||
display: inline-flex;
|
||||
|
||||
margin: 0;
|
||||
border-radius: 1vw;
|
||||
|
||||
width: 10vw;
|
||||
height: 0.4vw;
|
||||
|
||||
background: ease-in-out-gradient(90deg, var(--color-002b53) 50%, var(--color-ffffff) 50%);
|
||||
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.settingsbox-slider-range::-webkit-slider-thumb {
|
||||
border-radius: 50%;
|
||||
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
|
||||
background-color:var(--color-002b53);
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Selected */
|
||||
.selectedbox-description {
|
||||
margin: 0;
|
||||
|
||||
font-size: 1.3vw;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Color */
|
||||
.selectedbox-color {
|
||||
margin: 0.75vw 0;
|
||||
padding: 0.5vw 0;
|
||||
}
|
||||
|
||||
.selectedbox-color-label {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.selectedbox-color-current {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
transition: border-radius 0.2s ease-in-out;
|
||||
|
||||
box-shadow: 0 0 0.5vw var(--color-00000010);
|
||||
|
||||
border-radius: 0.5vw;
|
||||
|
||||
height: 1vw;
|
||||
padding: 0.5vw 1vw;
|
||||
|
||||
cursor: pointer;
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.selectedbox-color-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectedbox-color:hover .selectedbox-color-current:has(.selectedbox-color-current-svg) {
|
||||
border-radius: 0.5vw 0.5vw 0 0;
|
||||
}
|
||||
|
||||
.selectedbox-color-current-label {
|
||||
font-size: 1vw;
|
||||
color: var(--color-000000);
|
||||
}
|
||||
|
||||
.selectedbox-color-current-svg {
|
||||
height: 1vw;
|
||||
fill: var(--color-000000);
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown {
|
||||
position: absolute;
|
||||
|
||||
display: grid;
|
||||
gap: 0.5vw;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
border-radius: 0 0 0.5vw 0.5vw;
|
||||
border-top: 0vw var(--color-0000000f) solid;
|
||||
|
||||
width: 20.75vw;
|
||||
max-height: 0;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
|
||||
.selectedbox-color:hover .selectedbox-color-dropdown {
|
||||
border-top-width: 0.1vw;
|
||||
max-height: 5.5vw;
|
||||
padding-bottom: 0.5vw;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown-color {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown:has(> :nth-child(4)) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown:has(> :nth-child(4)) .selectedbox-color-dropdown-color {
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown-color-label {
|
||||
font-size: 1vw;
|
||||
color: var(--color-000000);
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown-color-specifications {
|
||||
gap: 0.5vw;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown-color-price {
|
||||
font-size: 0.8vw;
|
||||
color: var(--color-000000);
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown-color-type {
|
||||
width: 0.8vw;
|
||||
}
|
||||
|
||||
/* Dropdown scroll */
|
||||
.selectedbox-color-dropdown::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
||||
width: 0.5vw;
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-bottom-right-radius: 0.5vw;
|
||||
border-left: 0.1vw solid var(--color-0000000f);
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 1vw var(--color-00000048);
|
||||
border-radius: 0.5vw;
|
||||
height: 1vw;
|
||||
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.selectedbox-color-dropdown::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-000000);
|
||||
}
|
||||
|
||||
|
||||
/* Editmode */
|
||||
.selectedbox-editmode {
|
||||
display: grid;
|
||||
gap: 0.5vw;
|
||||
|
||||
box-sizing: 0 0 1vw #00000030;
|
||||
|
||||
margin: 0.5vw 0;
|
||||
border-radius: 0.5vw;
|
||||
|
||||
padding: 0.5vw;
|
||||
|
||||
background: #2cb3d7;
|
||||
}
|
||||
|
||||
.selectedbox-editmode-label {
|
||||
font-size: 1vw;
|
||||
font-family: system-ui;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.selectedbox-editmode-container {
|
||||
display: flex;
|
||||
gap: 0.35vw;
|
||||
}
|
||||
|
||||
.selectedbox-editmode-button {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
outline: none;
|
||||
border: 0.1vw transparent solid;
|
||||
border-radius: 0.25vw;
|
||||
|
||||
width: 100%;
|
||||
height: 1.5vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 0.8vw;
|
||||
color: var(--color-002b53);
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.selectedbox-editmode-button:hover {
|
||||
border: 0.1vw #2cb3d7 solid;
|
||||
}
|
||||
|
||||
.selectedbox-editmode-button.active {
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
|
||||
/* Buy */
|
||||
.selectedbox-buybutton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
box-shadow: 0 0 1vw var(--color-00000040);
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5vw;
|
||||
|
||||
margin-bottom: 0.5vw;
|
||||
|
||||
width: 100%;
|
||||
height: 2vw;
|
||||
|
||||
background: var(--color-002b53ed);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 1vw;
|
||||
font-family: system-ui;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
color: var(--color-ffffff-dark);
|
||||
}
|
||||
|
||||
/* Type */
|
||||
.selectedbox-type {
|
||||
position: absolute;
|
||||
top: 1vw;
|
||||
right: 1vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 1vw;
|
||||
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
|
||||
padding: 0.25vw;
|
||||
|
||||
background: var(--color-002b53-white);
|
||||
fill: var(--color-ffffff-dark);
|
||||
}
|
||||
|
||||
.selectedbox-type-svg {
|
||||
fill: var(--color-ffffff-dark);
|
||||
}
|
||||
|
||||
.selectedbox-type-tooltip {
|
||||
position: absolute;
|
||||
top: 2vw;
|
||||
right: -0.5vw;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
border-radius: 0.5vw;
|
||||
|
||||
width: max-content;
|
||||
padding: 0.25vw 0.5vw;
|
||||
|
||||
background: var(--color-002b53-white);
|
||||
box-shadow: 0 0 1vw var(--color-00000040);
|
||||
|
||||
font-size: 1vw;
|
||||
font-family: monospace;
|
||||
font-weight: 100;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.selectedbox-type-tooltip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.4vw;
|
||||
right: 0.75vw;
|
||||
display: block;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
border: 0.5vw solid var(--color-002b53);
|
||||
border-color: transparent var(--color-002b53) transparent transparent;
|
||||
}
|
||||
|
||||
.selectedbox-type:hover .selectedbox-type-tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.itemhover {
|
||||
position: fixed;
|
||||
bottom: 17vw;
|
||||
left: 0;
|
||||
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
||||
transition: all 0.211s ease-in-out;
|
||||
|
||||
width: 22.75vw;
|
||||
height: min(24vw, 100vh - 20vw);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.itemhover-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
width: 22.75vw;
|
||||
height: min(22vw, 100vh - 22vw);
|
||||
|
||||
padding: 1vw 0;
|
||||
|
||||
color: var(--color-002b53-white);
|
||||
}
|
||||
|
||||
|
||||
:has(.menubar:not(.active)):not(:has(.box:not(.selected):hover)) .itemhover {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.box:not(.selected):hover .itemhover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover title */
|
||||
.itemhover-title {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
|
||||
height: 3.5vw;
|
||||
|
||||
font-size: 3vw;
|
||||
font-family: 'Sims';
|
||||
}
|
||||
|
||||
/* Hover colors */
|
||||
.itemhover-colors {
|
||||
position: absolute;
|
||||
left: 1vw;
|
||||
|
||||
display: grid;
|
||||
gap: 0.5vw;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
margin-top: 1vw;
|
||||
|
||||
border-top: 0vw var(--color-0000000f) solid;
|
||||
border-radius: 0.5vw;
|
||||
|
||||
width: 20.75vw;
|
||||
max-height: 11vw;
|
||||
|
||||
padding: 0.5vw 0;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.itemhover-colors:has(> :nth-child(7)) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.itemhover-colors:has(> :nth-child(7)) .selectedbox-color-dropdown-color {
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
/* Hover scroll */
|
||||
.itemhover-colors::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
||||
width: 0.5vw;
|
||||
}
|
||||
|
||||
.itemhover-colors::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-bottom-right-radius: 0.5vw;
|
||||
border-left: 0.1vw solid var(--color-0000000f);
|
||||
}
|
||||
|
||||
.itemhover-colors::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 1vw var(--color-00000048);
|
||||
border-radius: 0.5vw;
|
||||
height: 1vw;
|
||||
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.itemhover-colors::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-000000);
|
||||
}
|
||||
|
||||
125
resources/[housing]/qs-housing/html/assets/style/modal.css
Normal file
125
resources/[housing]/qs-housing/html/assets/style/modal.css
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
/* Style for modal element */
|
||||
|
||||
/* Container */
|
||||
.modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
border-radius: 12px;
|
||||
width: 25%;
|
||||
color:var(--color-ffffff);
|
||||
min-height: 15%;
|
||||
max-height: 50%;
|
||||
padding: 2rem;
|
||||
background-color:#141414;
|
||||
box-shadow: var(--color-00000080) 0px 22px 70px 4px;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
z-index: 100 !important;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Container Items */
|
||||
.modal span:first-child {
|
||||
font-size: 1.5vh;
|
||||
font-family: 'Hindi', sans-serif;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.modal #modal_title {
|
||||
letter-spacing:1.2px;
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
}
|
||||
|
||||
.modal #modal_text {
|
||||
display: inline-block;
|
||||
font-size: 1.3vh;
|
||||
letter-spacing:1.3px;
|
||||
font-family: 'CabinetGrotesk-Medium';
|
||||
font-weight: 200;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal svg {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
filter: invert(100%);
|
||||
width: 1.2rem;
|
||||
height: 10%;
|
||||
aspect-ratio: 1/1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Container Buttons */
|
||||
.modal div {
|
||||
display: flex;
|
||||
gap: 3%;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
align-content:center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal button {
|
||||
margin: 0.4px;
|
||||
margin-top: 2rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
width: 30%;
|
||||
padding:1.2% 5%;
|
||||
|
||||
background-color: var(--color-000000);
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 1.3vh;
|
||||
letter-spacing:0.9px;
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
|
||||
text-transform:uppercase;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.modal button:hover {
|
||||
background-color: var(--color-000000f0);
|
||||
}
|
||||
|
||||
.modal #modal_decline, #contract_decline{
|
||||
border: 1px solid var(--color-34445200);
|
||||
background:
|
||||
radial-gradient(120.05% 120.05% at 50.14% 25.24%, var(--color-ff373733) 0%, var(--color-0E151B) 100%) padding-box,
|
||||
linear-gradient(-180deg, var(--color-ff373700) 0%, var(--color-ff3737e6) 100%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-ff3737cc) 0%, var(--color-ffffff) 100%);
|
||||
}
|
||||
.modal #modal_accept, #contract_accept{
|
||||
border: 1px solid var(--color-34445200);
|
||||
background:
|
||||
radial-gradient(120.05% 120.05% at 50.14% 25.24%, rgba(47, 238, 31, 0.2) 0%, var(--color-0E151B) 100%) padding-box,
|
||||
linear-gradient(-180deg, var(--color-ff373700) 0%, var(--color-2FEE1F) 100%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-2FEE1F) 0%, var(--color-ffffff) 100%);
|
||||
}
|
||||
|
||||
.modal #modal_accept:hover, #contract_accept:hover {
|
||||
box-shadow: 1px 1px 15px var(--color-2FEE1F);
|
||||
background: var(--color-2FEE1F);
|
||||
border-image-source:unset;
|
||||
}
|
||||
.modal #modal_decline:hover, #contract_decline:hover{
|
||||
box-shadow: 1px 1px 15px var(--color-ff3737e6);
|
||||
background: var(--color-ff3737e6);
|
||||
border-image-source:unset;
|
||||
}
|
||||
550
resources/[housing]/qs-housing/html/assets/style/realestate.css
Normal file
550
resources/[housing]/qs-housing/html/assets/style/realestate.css
Normal file
|
|
@ -0,0 +1,550 @@
|
|||
#realestate-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* background-image: url(https://i.pinimg.com/originals/77/eb/85/77eb854815e6cfa0d6cb62c752a0a7eb.jpg); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
#realestate-container * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
#realestate-container label {
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
}
|
||||
#realestate-container .betterTextCheckbox {
|
||||
/* SHOW ON ISLAND */
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
font-size: 0.99vh; /* 10.7064px / 10.8 = 0.99vh */
|
||||
line-height: 1.20vh; /* 13px / 10.8 = 1.20vh */
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
#realestate {
|
||||
width: 135vh;
|
||||
height: 70vh;
|
||||
background-color: var(--color-141414);
|
||||
border-radius: 1.11vh; /* 12px / 10.8 = 1.11vh */
|
||||
padding: 1.85vh; /* 1rem = 16px, 16px / 10.8 = 1.48vh */
|
||||
}
|
||||
|
||||
#realestate-container button {
|
||||
border-radius: 0.37vh; /* 4px / 10.8 = 0.37vh */
|
||||
margin-left: 0.28vh; /* 0.3rem = 4.8px, 4.8px / 10.8 = 0.44vh */
|
||||
box-shadow: 0 0 0.93vh 0 var(--color-00000033); /* 10px / 10.8 = 0.93vh */
|
||||
background-color: var(--color-4CAF50);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0.93vh 1.85vh; /* 10px 20px, 10px / 10.8 = 0.93vh, 20px / 10.8 = 1.85vh */
|
||||
font-size: 1.85vh; /* 20px / 10.8 = 1.85vh */
|
||||
color: var(--color-ffffff);
|
||||
cursor: pointer;
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
transition: 0.3s;
|
||||
letter-spacing: 0.09vh; /* 1px / 10.8 = 0.09vh */
|
||||
line-height: 2.87vh; /* 31px / 10.8 = 2.87vh */
|
||||
text-shadow: 0px 0px 2.31vh var(--color-000000b3); /* 25px / 10.8 = 2.31vh */
|
||||
/* Rectangle 122 */
|
||||
background: linear-gradient(180deg, var(--color-00A3FF) 0.04%, var(--color-00A3FF) 96.99%);
|
||||
filter: drop-shadow(0px 0px 2.31vh var(--color-00A3FF)); /* 25px / 10.8 = 2.31vh */
|
||||
}
|
||||
|
||||
#realestate-container footer button:nth-child(1) {
|
||||
background: radial-gradient(224.81% 224.81% at 50.14% -163%, var(--color-45648100) 0%, var(--color-FF3737) 100%);
|
||||
filter: drop-shadow(0px 0px 3.24vh var(--color-FF3737)); /* 35px / 10.8 = 3.24vh */
|
||||
padding: 0.93vh 3.70vh; /* 10px 40px, 10px / 10.8 = 0.93vh, 40px / 10.8 = 3.70vh */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#realestate-container footer button:nth-child(2) {
|
||||
background: linear-gradient(180deg, var(--color-2fee1f80) 0.04%, var(--color-2FEE1F) 96.99%);
|
||||
filter: drop-shadow(0px 0px 2.31vh var(--color-2FEE1F)); /* 25px / 10.8 = 2.31vh */
|
||||
}
|
||||
|
||||
#realestate-container #delete-property {
|
||||
background: radial-gradient(224.81% 224.81% at 50.14% -163%, var(--color-45648100) 0%, var(--color-FF3737) 100%);
|
||||
filter: drop-shadow(0px 0px 3.24vh var(--color-FF3737)); /* 35px / 10.8 = 3.24vh */
|
||||
border-radius: 0.73vh; /* 7.89136px / 10.8 = 0.73vh */
|
||||
}
|
||||
|
||||
.create_conor_stylish {
|
||||
position:relative;
|
||||
}
|
||||
.create_conor_stylish:before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
opacity:0.4;
|
||||
background-image: url('../img/stylish/paper_createOffer.png');
|
||||
|
||||
background-size:100%;
|
||||
background-position:center;
|
||||
height:100%;
|
||||
width:40%;
|
||||
left:50%;
|
||||
top:50%;
|
||||
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
/* CREATE OFFER */
|
||||
|
||||
|
||||
|
||||
#realestate-container button:hover {
|
||||
background-color: var(--color-45a049);
|
||||
transform: perspective(18.52vh) rotateX(10deg); /* 200px / 10.8 = 18.52vh */
|
||||
}
|
||||
|
||||
#realestate input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
#realestate>header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#realestate>header h1 {
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
margin-left: 0.65vh; /* 7px / 10.8 = 0.65vh */
|
||||
line-height: -0.46vh; /* -5px / 10.8 = -0.46vh */
|
||||
font-size: 2.04vh; /* 22px / 10.8 = 2.04vh */
|
||||
letter-spacing: 0.14vh; /* 1.5px / 10.8 = 0.14vh */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* HOUSE MANAGEMENT */
|
||||
.headerText {
|
||||
width: 24%;
|
||||
position: relative;
|
||||
min-height: 5.56vh; /* 60px / 10.8 = 5.56vh */
|
||||
border-radius: 0.73vh; /* 7.89136px / 10.8 = 0.73vh */
|
||||
box-shadow: 0.09vh 0.09vh 1.39vh var(--color-00A3FF); /* 1px 1px 15px */
|
||||
background-color: var(--color-00A3FF);
|
||||
}
|
||||
|
||||
.stylishIcon {
|
||||
height: 2.04vh; /* 22px / 10.8 = 2.04vh */
|
||||
width: 2.22vh; /* 24px / 10.8 = 2.22vh */
|
||||
background-image: url('../img/stylish/stylishIconMang.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.houseEdit {
|
||||
background-image: url('../img/stylish/houseMangEdit.png');
|
||||
}
|
||||
|
||||
.houseMangHous {
|
||||
background-image: url('../img/stylish/houseMangHous.png');
|
||||
}
|
||||
|
||||
.houseMangDelete {
|
||||
height: 2.04vh; /* 22px / 10.8 = 2.04vh */
|
||||
width: 1.48vh; /* 16px / 10.8 = 1.48vh */
|
||||
background-image: url('../img/stylish/houseMangDelete.png');
|
||||
}
|
||||
|
||||
.headerText:before {
|
||||
content:'';
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
background-image: url('../img/stylish/houseBackManagmanet.png');
|
||||
background-size:100%;
|
||||
background-position:center;
|
||||
height:100%;
|
||||
width:70%;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
#realestate>header button {
|
||||
width: 15%;
|
||||
margin-right: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
}
|
||||
|
||||
#realestate-content {
|
||||
margin-top: 1.39vh; /* 1.5rem = 24px, 24px / 10.8 = 2.22vh */
|
||||
padding: 0.28vh; /* 0.3rem = 4.8px, 4.8px / 10.8 = 0.44vh */
|
||||
border-radius: 0.56vh; /* 6px / 10.8 = 0.56vh */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#realestate-content>header {
|
||||
display: flex;
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
padding: 0.56vh; /* 0.6rem = 9.6px, 9.6px / 10.8 = 0.89vh */
|
||||
width: 83%;
|
||||
border-radius: 0.73vh; /* 7.89136px / 10.8 = 0.73vh */
|
||||
background-color: var(--color-1F1F1F);
|
||||
border: 0.09vh solid var(--color-34445200); /* 1px / 10.8 = 0.09vh */
|
||||
background: radial-gradient(120.05% 120.05% at 50.14% -58.24%, var(--color-45648100) 0%, var(--color-1F1F1F) 100%) padding-box,
|
||||
linear-gradient(180deg, var(--color-34445200) 30%, var(--color-ffffff4d) 70%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-344452) 0%, var(--color-ffffff) 100%);
|
||||
}
|
||||
|
||||
#realestate-content-list-container {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#realestate-content-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#realestate-content-list-container::-webkit-scrollbar {
|
||||
width: 0.28vh; /* 0.3vw = 5.76px, 5.76px / 10.8 = 0.53vh */
|
||||
display: block;
|
||||
}
|
||||
|
||||
#realestate-content-list-container::-webkit-scrollbar-track {
|
||||
background: var(--color-ffffff0e);
|
||||
}
|
||||
|
||||
#realestate-content-list-container::-webkit-scrollbar-thumb {
|
||||
background: var(--color-ffffff);
|
||||
height: 0.93vh; /* 1vw = 19.2px, 19.2px / 10.8 = 1.78vh */
|
||||
border-radius: 0.93vh; /* 1vw = 19.2px, 19.2px / 10.8 = 1.78vh */
|
||||
box-shadow: 0 0 0.93vh var(--color-00000048); /* 1vw = 19.2px, 19.2px / 10.8 = 1.78vh */
|
||||
}
|
||||
|
||||
#realestate-content-list-container > header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
width: 83.3%;
|
||||
margin-top: 0.46vh;
|
||||
margin-bottom: 0.46vh;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
background: var(--color-141414);
|
||||
gap: 1.11vh;
|
||||
}
|
||||
|
||||
#realestate-content-list-container>header>span {
|
||||
padding: 0.65vh; /* 0.7rem = 11.2px, 11.2px / 10.8 = 1.04vh */
|
||||
border-radius: 0.37vh; /* 4px / 10.8 = 0.37vh */
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
text-align: center;
|
||||
border-radius: 0.73vh; /* 7.89136px / 10.8 = 0.73vh */
|
||||
background: linear-gradient(360deg, var(--color-00A3FF) 50%, var(--color-006299) 100%);
|
||||
box-shadow: 0px 0px 0.46vh 0.28vh var(--color-00a3ff59); /* 5px 3px */
|
||||
}
|
||||
|
||||
#realestate-content-list {
|
||||
display: grid;
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
margin-top: 0.93vh; /* 1rem = 16px, 16px / 10.8 = 1.48vh */
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.house_manage_list {
|
||||
display: grid;
|
||||
border-radius: 0.70vh; /* 7.6px / 10.8 = 0.70vh */
|
||||
width: 83%;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
border: 0.09vh solid var(--color-34445200); /* 1px / 10.8 = 0.09vh */
|
||||
background: radial-gradient(120.05% 120.05% at 50.14% -58.24%, var(--color-45648100) 0%, var(--color-1F1F1F) 100%) padding-box,
|
||||
linear-gradient(180deg, var(--color-34445200) 30%, var(--color-ffffff4d) 70%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-344452) 0%, var(--color-ffffff) 100%);
|
||||
}
|
||||
|
||||
.house_manage_abso {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#realestate-content-list>li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
gap: 2.04vh; /* 22px / 10.8 = 2.04vh */
|
||||
border-radius: 0.56vh; /* 6px / 10.8 = 0.56vh */
|
||||
padding: 0vh 0.46vh; /* 0rem 0.5rem = 0px 8px, 8px / 10.8 = 0.74vh */
|
||||
font-size: 1.11vh; /* 1.2rem = 19.2px, 19.2px / 10.8 = 1.78vh */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.house_manage_abso {
|
||||
opacity:0;
|
||||
transition: opacity .5s;
|
||||
}
|
||||
#realestate-content-list li:hover > .house_manage_abso{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
#realestate-content-list .upgrade_house_list li {
|
||||
width:83%;
|
||||
display: flex;
|
||||
}
|
||||
.listHouseMangLi{
|
||||
|
||||
}
|
||||
.upgrade_house_list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#realestate-content-list>li .miniBlue {
|
||||
font-size: 0.93vh; /* 10px / 10.8 = 0.93vh */
|
||||
color: var(--color-00A3FF);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#realestate-content-list>li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#realestate-content-list>li>span {
|
||||
padding: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
font-family: 'CabinetGrotesk-Bold';
|
||||
text-align: center;
|
||||
border-radius: 0.37vh; /* 4px / 10.8 = 0.37vh */
|
||||
font-size: 1.39vh; /* 15px / 10.8 = 1.39vh */
|
||||
line-height: 1.76vh; /* 19px / 10.8 = 1.76vh */
|
||||
}
|
||||
|
||||
#create-property {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-000000bf);
|
||||
}
|
||||
|
||||
#create-property form {
|
||||
width: 75vh;
|
||||
background-color: var(--color-141414);
|
||||
padding: 2.96vh 0.93vh; /* 2rem 1rem = 32px 16px, 32px / 10.8 = 2.96vh, 16px / 10.8 = 1.48vh */
|
||||
border-radius: 1.11vh; /* 12px / 10.8 = 1.11vh */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
}
|
||||
|
||||
#create-property form h1 {
|
||||
margin-bottom: 0.09vh; /* 0.1rem = 1.6px, 1.6px / 10.8 = 0.15vh */
|
||||
text-transform: uppercase;
|
||||
font-family: 'CabinetGrotesk-Black';
|
||||
font-size: 1.94vh; /* 2.1rem = 33.6px, 33.6px / 10.8 = 3.11vh */
|
||||
}
|
||||
|
||||
#create-property form span {
|
||||
font-family: 'CabinetGrotesk-Regular';
|
||||
font-size: 1.50vh; /* 16.1667px / 10.8 = 1.50vh */
|
||||
line-height: 1.85vh; /* 20px / 10.8 = 1.85vh */
|
||||
}
|
||||
|
||||
/* Write down details of your new property */
|
||||
#create-property form label span {
|
||||
font-family: 'CabinetGrotesk-Extrabold';
|
||||
font-weight: 800;
|
||||
z-index: 5;
|
||||
margin-left: 0.93vh; /* 1rem = 16px, 16px / 10.8 = 1.48vh */
|
||||
font-size: 2.59vh; /* 28px / 10.8 = 2.59vh */
|
||||
line-height: 3.89vh; /* 42px / 10.8 = 3.89vh */
|
||||
}
|
||||
|
||||
#create-property form footer {
|
||||
display: flex;
|
||||
gap: 0.65vh; /* 0.7rem = 11.2px, 11.2px / 10.8 = 1.04vh */
|
||||
}
|
||||
|
||||
#realestate-container footer button {
|
||||
padding: 0.93vh 3.70vh; /* 10px 40px, 10px / 10.8 = 0.93vh, 40px / 10.8 = 3.70vh */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#create-property input[type='text'],
|
||||
#create-property input[type='number'] {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
border-radius: 0.68vh; /* 7.32px / 10.8 = 0.68vh */
|
||||
background: var(--container-700);
|
||||
border: 0.09vh solid var(--color-34445200); /* 1px / 10.8 = 0.09vh */
|
||||
background: radial-gradient(120.05% 120.05% at 50.14% -58.24%, var(--color-45648100) 0%, var(--color-313131) 100%) padding-box,
|
||||
linear-gradient(180deg, var(--color-34445200) 30%, var(--color-ffffff4d) 70%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-344452) 0%, var(--color-ffffff) 100%);
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
#create-property-types {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
#create-property-sell-type {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
#create-property-form .description {
|
||||
padding: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
margin-bottom: 0.93vh; /* 1rem = 16px, 16px / 10.8 = 1.48vh */
|
||||
background: var(--color-313131);
|
||||
border-radius: 0.37vh; /* 4px / 10.8 = 0.37vh */
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1.20vh; /* 13px / 10.8 = 1.20vh */
|
||||
line-height: 1.48vh; /* 16px / 10.8 = 1.48vh */
|
||||
font-family: 'CabinetGrotesk-Medium';
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.creator-radio-container {
|
||||
display: grid;
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
padding: 0.46vh !important; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
border-radius: 0.56vh; /* 6px / 10.8 = 0.56vh */
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.creator-radio-container input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.creator-radio-container label {
|
||||
padding: 0.46vh !important; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
border-radius: 0.71vh; /* 7.63px / 10.8 = 0.71vh */
|
||||
background: var(--container-700);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
height: 6.48vh; /* 70px / 10.8 = 6.48vh */
|
||||
gap: 0.37vh; /* 4px / 10.8 = 0.37vh */
|
||||
border: 0.09vh solid var(--color-34445200); /* 1px / 10.8 = 0.09vh */
|
||||
background: radial-gradient(120.05% 120.05% at 50.14% -58.24%, var(--color-45648100) 0%, var(--color-313131) 100%) padding-box,
|
||||
linear-gradient(180deg, var(--color-34445200) 30%, var(--color-ffffff4d) 70%) border-box;
|
||||
border-image-source: linear-gradient(180deg, var(--color-344452) 0%, var(--color-ffffff) 100%);
|
||||
}
|
||||
|
||||
.creator-radio-container input:checked+label {
|
||||
background: var(--color-00A3FF);
|
||||
border-image-source: unset;
|
||||
box-shadow: 0.09vh 0.09vh 1.39vh var(--color-00A3FF); /* 1px 1px 15px */
|
||||
}
|
||||
|
||||
.backImgStylishCreator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backImgStylishCreator:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('../img/stylish/backShell.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position-x: 3.70vh; /* 40px / 10.8 = 3.70vh */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.iplImg:before {
|
||||
background-image: url('../img/stylish/backIpl.png');
|
||||
opacity: 0.3;
|
||||
background-size: 60%;
|
||||
background-position-x: 4.63vh; /* 50px / 10.8 = 4.63vh */
|
||||
}
|
||||
|
||||
.mloImg:before {
|
||||
background-image: url('../img/stylish/backMLO.png');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#form-edit-buttons {
|
||||
margin: 1.39vh 0; /* 1.5rem = 24px, 24px / 10.8 = 2.22vh */
|
||||
}
|
||||
|
||||
#form-edit-buttons div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.93vh; /* 1rem = 16px, 16px / 10.8 = 1.48vh */
|
||||
}
|
||||
|
||||
.grid-col-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.46vh; /* 0.5rem = 8px, 8px / 10.8 = 0.74vh */
|
||||
}
|
||||
|
||||
#create-property-checkboxes {
|
||||
display: flex;
|
||||
gap: 2.31vh; /* 25px / 10.8 = 2.31vh */
|
||||
}
|
||||
|
||||
#create-property-checkboxes .packageForCheckbox {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.39vh; /* 15px / 10.8 = 1.39vh */
|
||||
min-width: 18.52vh; /* 200px / 10.8 = 18.52vh */
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.priceDolar {
|
||||
color: var(--color-2FEE1F);
|
||||
}
|
||||
|
||||
.listHouseMangLi:nth-child(1) {
|
||||
padding-right: 1.85vh; /* 2rem = 32px, 32px / 10.8 = 2.96vh */
|
||||
}
|
||||
|
||||
#create-property form .smallerText span {
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 1.63vh; /* 17.5953px / 10.8 = 1.63vh */
|
||||
line-height: 2.04vh; /* 22px / 10.8 = 2.04vh */
|
||||
text-align: center;
|
||||
color: var(--color-ffffff);
|
||||
}
|
||||
|
||||
#create-property form .smallerText {
|
||||
height: 3.70vh; /* 40px / 10.8 = 3.70vh */
|
||||
}
|
||||
108
resources/[housing]/qs-housing/html/assets/style/stash.css
Normal file
108
resources/[housing]/qs-housing/html/assets/style/stash.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
/* CSS for Stash page */
|
||||
|
||||
/* Stash title */
|
||||
.stash-object-title,
|
||||
.stash-empty-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 1.5vw;
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-002b53);
|
||||
}
|
||||
|
||||
/* If no stash */
|
||||
.stash-empty-topbar,
|
||||
.stash-empty-title {
|
||||
cursor: url('../img/decorate/categories/stash/cursor.svg'), not-allowed;
|
||||
}
|
||||
|
||||
.stash-empty-content {
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--color-002b53),
|
||||
var(--color-002b53) 0.5vw,
|
||||
var(--color-b9b9b9a6) 0.5vw,
|
||||
var(--color-b9b9b9a6) 1.25vw
|
||||
);
|
||||
|
||||
cursor: url('../img/decorate/categories/stash/cursor.svg'), not-allowed;
|
||||
}
|
||||
|
||||
/* if has stash */
|
||||
.stash-content {
|
||||
background-color: var(--color-b9b9b9a6);
|
||||
}
|
||||
|
||||
.stash-object-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
margin: 0.5vw;
|
||||
|
||||
box-shadow: 0 0 1vw var(--color-00000020);
|
||||
|
||||
border-radius: 0.5vw;
|
||||
|
||||
width: 8.5vw;
|
||||
height: 9vw;
|
||||
|
||||
padding: 0.5vw;
|
||||
|
||||
background: white;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.stash-object-information {
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
margin: 0.5vw;
|
||||
width: 14.5vw;
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.stash-object-description {
|
||||
margin: 1.4vw 0vw;
|
||||
font-size: 1vw;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.stash-object-category {
|
||||
font-size: 0.85vw;
|
||||
padding-top: 0.5vw;
|
||||
border-top: 0.1vw var(--color-000000) solid;
|
||||
text-align: right;
|
||||
padding-right: 0.5vw;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.stash-object-information::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
||||
width: 0.75vw;
|
||||
}
|
||||
|
||||
.stash-object-information::-webkit-scrollbar-track {
|
||||
box-shadow: 0 0 1vw var(--color-00000020);
|
||||
|
||||
background: rgba(255, 255, 255, 0.226);
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.stash-object-information::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 1vw #00000048;
|
||||
border-radius: 1vw;
|
||||
height: 1vw;
|
||||
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
|
||||
.stash-object-information::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-ffffff);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue