325 lines
7 KiB
Text
325 lines
7 KiB
Text
/*
|
|
* Singe 3
|
|
* Copyright (C) 2006-2026 Scott Duensing <scott@kangaroopunch.com>
|
|
*
|
|
* The bundled menu's look on top of the shipped theme. Nothing here has a position or a size:
|
|
* Singe/Menu.singe places every region from the overlay size, so the attract video it draws
|
|
* underneath fills the #video hole exactly.
|
|
* Licensed under the GNU General Public License, version 3 or later.
|
|
*/
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 14dp;
|
|
}
|
|
|
|
/* Every region the script places; the border sits inside the rectangle it is given. */
|
|
.placed {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* The game list: the panel look (the theme's gradient and shadow), one row per game, the
|
|
selected one gold on a gradient. */
|
|
#list {
|
|
background-color: #0a1220d0;
|
|
decorator: linear-gradient(180deg, #182640d0, #0c1424d0);
|
|
box-shadow: 0 6dp 14dp #00000090;
|
|
padding: 4dp 0;
|
|
font-size: 13dp;
|
|
}
|
|
|
|
#list div {
|
|
padding: 3dp 8dp;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#list div:hover {
|
|
background-color: #24344e;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
#list div:focus {
|
|
background-color: transparent;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
#list div.selected,
|
|
#list div.selected:hover,
|
|
#list div.selected:focus {
|
|
background-color: #33507a;
|
|
decorator: linear-gradient(90deg, #4a6ea8, #33507a);
|
|
color: #ffd35a;
|
|
}
|
|
|
|
/* Poster and marquee: the script sets an image decorator that fits the picture inside. No border:
|
|
cabinet art and a marquee are pictures in their own right and a frame round them fights with
|
|
whatever frame the artwork already has. */
|
|
.art {
|
|
background-color: #0a122080;
|
|
}
|
|
|
|
/* The attract video shows through here; nothing is drawn over it. */
|
|
#video {
|
|
}
|
|
|
|
#info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6dp 10dp;
|
|
background-color: #101828d0;
|
|
border-color: #6a86b8;
|
|
}
|
|
|
|
#title {
|
|
font-size: 18dp;
|
|
color: #ffd35a;
|
|
margin-bottom: 2dp;
|
|
}
|
|
|
|
.line {
|
|
font-size: 11dp;
|
|
color: #c8d2e6;
|
|
}
|
|
|
|
.line .label {
|
|
color: #8fa2c4;
|
|
}
|
|
|
|
#description {
|
|
flex: 1;
|
|
margin-top: 4dp;
|
|
font-size: 13dp;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: #101828d0;
|
|
border: 2dp #6a86b8;
|
|
border-radius: 4dp;
|
|
padding: 0 8dp;
|
|
}
|
|
|
|
#hints {
|
|
font-size: 12dp;
|
|
color: #8fa2c4;
|
|
}
|
|
|
|
|
|
/* .hidden and .tool are one class each, and the pages that let the overlay through wear two, so a
|
|
page taken out of view has to be said again here or its display wins. */
|
|
.tool.hidden,
|
|
.tool.clear.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* The service tools: one page over everything, the backdrop still moving behind it, and on it
|
|
a card in the game page's own dress -- the panel gradient, the blue-grey border, a title bar in
|
|
the selection's gradient with the title in the game list's gold, and the key hints in a footer
|
|
strip like the game page's. Nothing on it says black. */
|
|
.tool {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
padding: 10dp;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #f0f0f0;
|
|
font-size: 15dp;
|
|
}
|
|
|
|
.tool .card {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #0a1220d8;
|
|
decorator: linear-gradient(180deg, #182640d8, #0c1424d8);
|
|
border: 2dp #6a86b8;
|
|
border-radius: 6dp;
|
|
box-shadow: 0 6dp 14dp #00000090;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The audio delay tool alone turns the whole screen white for the frame of its flash; the card
|
|
steps out of the way so the flash is the flash and nothing else. */
|
|
.tool.flash {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.tool.flash .card {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tool h1 {
|
|
font-size: 20dp;
|
|
color: #ffd35a;
|
|
margin: 0;
|
|
padding: 8dp 14dp;
|
|
background-color: #33507a;
|
|
decorator: linear-gradient(90deg, #4a6ea8, #33507a);
|
|
border-bottom: 2dp #6a86b8;
|
|
}
|
|
|
|
.tool .columns {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The style sheet can scroll this box, but nothing drives a scroll bar from a joystick: the
|
|
windowing in Singe/Tools.singe is what keeps the chosen row on screen. */
|
|
.tool #toolBody {
|
|
flex: 1 1 0;
|
|
padding: 12dp 14dp;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* The list of tools has a second column: what the chosen tool is for, beside the list. */
|
|
.tool #toolNote {
|
|
flex: 0 0 42%;
|
|
padding: 12dp 16dp;
|
|
border-left: 2dp #6a86b8;
|
|
color: #c8d2e6;
|
|
font-size: 14dp;
|
|
}
|
|
|
|
.tool #toolNote.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tool #toolKeys {
|
|
padding: 6dp 14dp;
|
|
border-top: 2dp #6a86b8;
|
|
background-color: #101828d0;
|
|
color: #8fa2c4;
|
|
font-size: 13dp;
|
|
}
|
|
|
|
.tool p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* The key hints, close together when a tool needs more than one line of them. */
|
|
.tool p.keys {
|
|
margin: 0;
|
|
}
|
|
|
|
.tool p.keys + p.keys {
|
|
margin-top: 2dp;
|
|
}
|
|
|
|
/* The rows a tool fills in for itself: a heading row and an indented detail row under it. Text
|
|
with nowhere to break -- a long path -- wraps mid-word rather than running off the edge, but an
|
|
ordinary word is left whole. */
|
|
.tool .row {
|
|
margin-bottom: 4dp;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.tool .sub {
|
|
margin-left: 20dp;
|
|
margin-bottom: 3dp;
|
|
font-size: 13dp;
|
|
color: #c8d2e6;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* A label beside its value. The two are columns rather than one run of text, so a value too long
|
|
for the line wraps under itself instead of under the label. */
|
|
.tool .pair {
|
|
display: flex;
|
|
margin-bottom: 4dp;
|
|
}
|
|
|
|
.tool .pair .label {
|
|
flex: 0 0 130dp;
|
|
color: #8fa2c4;
|
|
}
|
|
|
|
.tool .pair .detail {
|
|
flex: 1 1 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* A line a tool offers to choose between, and the chosen one the way the game list shows its
|
|
selection: gold on the gradient bar. A detail the row carries -- a size, a state, a value --
|
|
sits against the right edge, so a column of them lines up whatever the text beside it. */
|
|
.tool .item {
|
|
display: flex;
|
|
padding: 3dp 8dp;
|
|
margin: 0 0 1dp -8dp;
|
|
border-radius: 3dp;
|
|
}
|
|
|
|
.tool .item .text {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.tool .item .detail {
|
|
flex: 0 0 auto;
|
|
margin-left: 16dp;
|
|
text-align: right;
|
|
}
|
|
|
|
.tool .item.selected {
|
|
background-color: #33507a;
|
|
decorator: linear-gradient(90deg, #4a6ea8, #33507a);
|
|
color: #ffd35a;
|
|
}
|
|
|
|
/* A gap a tool asked for. */
|
|
.tool .blank {
|
|
height: 12dp;
|
|
}
|
|
|
|
/* Two tools draw their own picture into the overlay, which is underneath the document: the light
|
|
gun's targets and the display's test pattern. Those pages let it through, and the card becomes
|
|
a strip along the bottom between the two lower targets, so nothing worth aiming at is covered.
|
|
Its width is fixed: left to fit its content, the value column of a pair had no room and broke
|
|
its words one letter to a line. */
|
|
.tool.clear .card {
|
|
flex: 0 0 auto;
|
|
margin-top: auto;
|
|
align-self: center;
|
|
width: 70%;
|
|
}
|
|
|
|
.tool.clear h1 {
|
|
font-size: 16dp;
|
|
padding: 4dp 12dp;
|
|
}
|
|
|
|
/* The strip is as tall as its rows: the columns, which fill the page otherwise, take what they
|
|
need here. The body inside them keeps its flex, which in their row is its width; without it
|
|
a pair's value column had no room. */
|
|
.tool.clear .columns {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.tool.clear #toolBody {
|
|
padding: 6dp 12dp;
|
|
}
|
|
|
|
.tool.clear #toolKeys {
|
|
padding: 4dp 12dp;
|
|
}
|
|
|
|
/* The help under the list of tools, away from the list itself. */
|
|
#toolHelp {
|
|
margin-top: 12dp;
|
|
}
|