96 lines
1.9 KiB
Text
96 lines
1.9 KiB
Text
/*
|
|
* Singe 3
|
|
* Copyright (C) 2006-2026 Scott Duensing <scott@kangaroopunch.com>
|
|
*
|
|
* The score panel's look: an arcade scoreboard's seven segment readouts, each a row of dim
|
|
* "all segments lit" digits with the live value glowing over them, so an unused digit still
|
|
* shows its ghost the way a real display does. A game or a theme may replace this file.
|
|
* Licensed under the GNU General Public License, version 3 or later.
|
|
*/
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: FreeSans;
|
|
font-weight: bold;
|
|
color: #ff3018;
|
|
}
|
|
|
|
/* The cabinet the readouts are set into. */
|
|
#board {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12dp 24dp;
|
|
background-color: #060606;
|
|
decorator: linear-gradient(180deg, #1a1a1c, #050505);
|
|
border: 3dp #3a3a40;
|
|
border-radius: 10dp;
|
|
}
|
|
|
|
.cell {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0 10dp;
|
|
}
|
|
|
|
/* An empty second player cell leaves the row to the other two. */
|
|
.cell:empty {
|
|
padding: 0;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 20dp;
|
|
letter-spacing: 3dp;
|
|
color: #c8b070;
|
|
margin: 0 0 4dp 0;
|
|
}
|
|
|
|
/* A readout stacks the live digits exactly over the dim ones, so both are the same size and
|
|
the same shape whatever the value is. The slant is the LED look. */
|
|
.readout {
|
|
display: block;
|
|
position: relative;
|
|
font-size: 54dp;
|
|
letter-spacing: 6dp;
|
|
transform: skewX(-7deg);
|
|
}
|
|
|
|
.readout.small {
|
|
font-size: 34dp;
|
|
letter-spacing: 3dp;
|
|
}
|
|
|
|
.ghost {
|
|
display: block;
|
|
color: #4d1108;
|
|
}
|
|
|
|
.value {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
color: #ff3018;
|
|
font-effect: glow(2dp 5dp #ff6a3cc0);
|
|
}
|
|
|
|
/* The life count sits under the score, smaller, with its own label beside it. */
|
|
.lives {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 6dp 0 0 0;
|
|
}
|
|
|
|
.lives .label {
|
|
font-size: 16dp;
|
|
margin: 0 8dp 0 0;
|
|
}
|