141 lines
2.9 KiB
SCSS
141 lines
2.9 KiB
SCSS
$bg: #3F3F3F;
|
|
$btn: #313131;
|
|
$btn-hov: #e39827;
|
|
$btn-act: #DB7900;
|
|
$inp: #818181;
|
|
$inp-act: #F0DAB2;
|
|
$inp-dis: #303030;
|
|
$inp-dis-col: #818181;
|
|
$item-shadow-color: #000;
|
|
$grid-bg: #242324;
|
|
$shadow-offset: 2px;
|
|
$shadow-blur: 2px;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
/* margin: 0;*/
|
|
background: $bg;
|
|
font-family: "Titillium Web", sans-serif;
|
|
color: #ffffffee;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
|
|
button {
|
|
all: unset;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding: 2px;
|
|
background-image: url("assets/item-button-9pr.png");
|
|
background-repeat: no-repeat;
|
|
background-origin: padding-box;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
//border-image-
|
|
//background: $btn;
|
|
//box-shadow:
|
|
// 0 ( $shadow-offset) $shadow-blur #454545 inset,
|
|
// 0 (-$shadow-offset) $shadow-blur #191919 inset,
|
|
// ( $shadow-offset) 0 $shadow-blur #212121 inset,
|
|
// (-$shadow-offset) 0 $shadow-blur #212121 inset;
|
|
//border-radius: 4px;
|
|
|
|
&:hover {
|
|
background-image: url("assets/item-button-hover.png");
|
|
// box-shadow:
|
|
// 0 ( $shadow-offset) $shadow-blur #454545 inset,
|
|
// 0 (-$shadow-offset) $shadow-blur #191919 inset,
|
|
// ( $shadow-offset) 0 $shadow-blur #212121 inset,
|
|
// (-$shadow-offset) 0 $shadow-blur #212121 inset,
|
|
// 0 0 5px #888 inset;
|
|
// background: $btn-hov;
|
|
}
|
|
|
|
&:active {
|
|
background-image: url("assets/item-button-pressed.png");
|
|
// background: $btn-act;
|
|
// box-shadow:
|
|
// 0 (-$shadow-offset+1) $shadow-blur #454545 inset,
|
|
// 0 ( $shadow-offset+1) $shadow-blur #191919 inset,
|
|
// ( $shadow-offset) 0 $shadow-blur #212121 inset,
|
|
// (-$shadow-offset) 0 $shadow-blur #212121 inset,
|
|
// 0 0 5px #111 inset;
|
|
}
|
|
|
|
//&:focus-visible {
|
|
// outline: 2px solid white;
|
|
//}
|
|
|
|
f-item & {
|
|
padding: 3px;
|
|
margin: 1px;
|
|
}
|
|
}
|
|
|
|
f-item img {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-position: 0 0;
|
|
filter: drop-shadow(0 0 4px $item-shadow-color);
|
|
|
|
object-fit: cover;
|
|
display: block;
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
f-grid {
|
|
display: block;
|
|
max-width: 400px;
|
|
//background: $grid-bg;
|
|
background-image: url("assets/empty-square-76x76.png");
|
|
background-repeat: repeat;
|
|
background-size: 40px 40px;
|
|
f-row {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
input {
|
|
all: unset;
|
|
display: inline-block;
|
|
background: $inp;
|
|
padding: 2px;
|
|
height: 32px;
|
|
width: 64px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
color: black;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
box-shadow:
|
|
0 (-$shadow-offset) $shadow-blur #454545 inset,
|
|
0 ( $shadow-offset) $shadow-blur #191919 inset,
|
|
( $shadow-offset) 0 $shadow-blur #212121 inset,
|
|
(-$shadow-offset) 0 $shadow-blur #212121 inset;
|
|
border-radius: 4px;
|
|
|
|
&::selection {
|
|
background: $btn-hov;
|
|
}
|
|
|
|
&:focus {
|
|
background: $inp-act;
|
|
}
|
|
|
|
&:disabled {
|
|
background: $inp-dis;
|
|
color: $inp-dis-col;
|
|
}
|
|
}
|
|
|
|
.spacer {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 32px;
|
|
}
|