factorio-recipes/public/style.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;
}