singe/assets/menu.rcss

/*
 *  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 opaque page over everything, the same for all of them.  The audio delay
   tool alone turns the page white for the frame of its flash, so the colours are named twice. */
.tool {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: 25dp;
	box-sizing: border-box;
	background-color: #000000;
	color: #ffffff;
	overflow-y: auto;
}

.tool.flash {
	background-color: #ffffff;
	color: #000000;
}

.tool h1 {
	font-size: 24dp;
	color: #ffffff;
	margin-bottom: 20dp;
}

.tool.flash h1 {
	color: #000000;
}

.tool p {
	margin-bottom: 20dp;
}

.tool p.value {
	margin-bottom: 4dp;
}

/* The key hints stand away from whatever the tool put above them, and close together among
   themselves when a tool needs more than one line of them. */
.tool p.keys {
	margin-top: 20dp;
	margin-bottom: 4dp;
	color: #8fa2c4;
}

.tool p.keys + p.keys {
	margin-top: 0;
}

/* 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: 2dp;
	word-break: break-word;
}

.tool .sub {
	margin-left: 20dp;
	margin-bottom: 2dp;
	font-size: 12dp;
	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: 2dp;
}

.tool .pair .label {
	flex: 0 0 110dp;
	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 in the game list's gold -- the same
   way the game list itself shows a selection, since RCSS has no generated content to mark it with. */
.tool .item {
	margin-bottom: 2dp;
}

.tool .item.selected {
	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 gather their text
   into a strip along the bottom, between the two lower targets, so nothing worth aiming at is
   covered. */
.tool.clear {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.tool.clear h1 {
	font-size: 16dp;
	margin-bottom: 4dp;
}

.tool.clear h1,
.tool.clear .row,
.tool.clear .pair,
.tool.clear .sub,
.tool.clear .item,
.tool.clear p {
	background-color: #000000c0;
	padding: 1dp 8dp;
	margin-bottom: 4dp;
}

/* The help under the list of tools, away from the list itself. */
#toolHelp {
	margin-top: 12dp;
}