108 lines
2.4 KiB
SCSS
108 lines
2.4 KiB
SCSS
|
.inventories {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
align-items: stretch;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
> hr {
|
||
|
|
width: 2px;
|
||
|
|
height: 100%;
|
||
|
|
background: crimson;
|
||
|
|
opacity: 0.448;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
section.inventory {
|
||
|
|
width: 45%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
&:first-of-type {
|
||
|
|
h3 {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:last-of-type {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
text-transform: lowercase;
|
||
|
|
font-size: 1.3em;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-weight: 900;
|
||
|
|
&::first-letter {
|
||
|
|
text-decoration: underline crimson;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
|
||
|
|
> div {
|
||
|
|
width: 28%;
|
||
|
|
height: 35px;
|
||
|
|
font-weight: 300;
|
||
|
|
display: flex;
|
||
|
|
gap: 7px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.platinum, .gold, .electrum, .silver, .copper {
|
||
|
|
position: relative;
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2;
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
background-position: center center;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.platinum::before {
|
||
|
|
background-image: url("/assets/platinum.webp");
|
||
|
|
}
|
||
|
|
.gold::before {
|
||
|
|
background-image: url("/assets/gold.webp");
|
||
|
|
}
|
||
|
|
.electrum::before {
|
||
|
|
background-image: url("/assets/electrum.webp");
|
||
|
|
}
|
||
|
|
.silver::before {
|
||
|
|
background-image: url("/assets/silver.webp");
|
||
|
|
}
|
||
|
|
.copper::before {
|
||
|
|
background-image: url("/assets/copper.webp");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
color: white;
|
||
|
|
width: 100%;
|
||
|
|
text-align: right;
|
||
|
|
background-color: #131313;
|
||
|
|
padding: 2px 12px 0px 6px;
|
||
|
|
font-size: 18px;
|
||
|
|
vertical-align: bottom;
|
||
|
|
line-height: 20px;
|
||
|
|
border-bottom: 2px solid;
|
||
|
|
border-bottom-color: hsla(from crimson h s l / 0.5);
|
||
|
|
mask: linear-gradient(135deg,#0000 5px,#000 0);
|
||
|
|
|
||
|
|
&:focus, &:hover, &:active {
|
||
|
|
cursor: crosshair;
|
||
|
|
border-bottom-color: crimson;
|
||
|
|
transition: border-bottom-color .2s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|