690 lines
12 KiB
CSS
690 lines
12 KiB
CSS
/* 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);
|
|
}
|
|
|