singe/assets/gui.rcss

/*
 *  Singe 3
 *  Copyright (C) 2006-2026 Scott Duensing <scott@kangaroopunch.com>
 *
 *  The shipped GUI theme:  what a document looks like before a game styles it.  Link it from a
 *  document with  <link type="text/rcss" href="Singe/gui.rcss"/>  and override what you like.
 *  Licensed under the GNU General Public License, version 3 or later.
 */

body {
	font-family: FreeSans;
	font-weight: bold;
	font-size: 22dp;
	color: #f0f0f0;
}

h1 {
	display: block;
	font-size: 40dp;
	margin: 0 0 12dp 0;
	color: #ffd35a;
}

h2 {
	display: block;
	font-size: 28dp;
	margin: 0 0 8dp 0;
	color: #ffd35a;
}

p {
	display: block;
	margin: 0 0 8dp 0;
}

div {
	display: block;
}

.panel {
	display: block;
	background-color: #101828e0;
	decorator: linear-gradient(180deg, #182640e0, #0c1424e0);
	box-shadow: 0 6dp 14dp #00000090;
	border: 2dp #ffd35a;
	border-radius: 8dp;
	padding: 16dp;
}

button,
input.submit {
	display: inline-block;
	padding: 8dp 20dp;
	margin: 4dp;
	background-color: #24344e;
	decorator: linear-gradient(180deg, #2e4260, #1c2a42);
	border: 2dp #6a86b8;
	border-radius: 6dp;
	color: #f0f0f0;
	text-align: center;
	cursor: pointer;
	tab-index: auto;
	transition: background-color border-color 0.12s;
}

button:hover,
input.submit:hover {
	background-color: #33507a;
	decorator: linear-gradient(180deg, #3f5f8e, #2a4470);
	border-color: #ffd35a;
}

button:focus,
input.submit:focus {
	border-color: #ffd35a;
}

button:active,
input.submit:active {
	background-color: #ffd35a;
	decorator: linear-gradient(180deg, #ffe08a, #f0c040);
	color: #101828;
}

input.text,
input.password,
textarea {
	display: inline-block;
	padding: 6dp 10dp;
	margin: 4dp;
	background-color: #0a1220;
	border: 2dp #6a86b8;
	border-radius: 4dp;
	color: #f0f0f0;
	cursor: text;
	tab-index: auto;
}

input.text:focus,
input.password:focus,
textarea:focus {
	border-color: #ffd35a;
}

input.checkbox,
input.radio {
	display: inline-block;
	width: 22dp;
	height: 22dp;
	margin: 0 8dp 0 0;
	background-color: #0a1220;
	border: 2dp #6a86b8;
	vertical-align: middle;
	tab-index: auto;
}

input.radio {
	border-radius: 11dp;
}

input.checkbox:checked,
input.radio:checked {
	background-color: #ffd35a;
}

input.range {
	display: inline-block;
	height: 24dp;
	width: 240dp;
	margin: 4dp;
	tab-index: auto;
}

input.range slidertrack {
	height: 6dp;
	margin: 9dp 0;
	background-color: #24344e;
	border-radius: 3dp;
}

input.range sliderbar {
	width: 22dp;
	height: 22dp;
	margin: -8dp 0;
	background-color: #ffd35a;
	border-radius: 11dp;
}

select {
	display: inline-block;
	width: 240dp;
	padding: 6dp 10dp;
	margin: 4dp;
	background-color: #0a1220;
	border: 2dp #6a86b8;
	border-radius: 4dp;
	tab-index: auto;
}

select selectvalue {
	width: auto;
	margin-right: 30dp;
}

select selectarrow {
	width: 24dp;
	height: 24dp;
	background-color: #6a86b8;
}

select selectbox {
	background-color: #101828;
	border: 2dp #6a86b8;
}

select selectbox option {
	padding: 4dp 10dp;
}

select selectbox option:hover,
select selectbox option:checked {
	background-color: #33507a;
}

progress {
	display: block;
	height: 18dp;
	margin: 4dp 0;
	background-color: #0a1220;
	border: 2dp #6a86b8;
	border-radius: 9dp;
}

progress fill {
	background-color: #ffd35a;
	decorator: linear-gradient(180deg, #ffe08a, #e6b830);
	border-radius: 7dp;
}

scrollbarvertical {
	width: 14dp;
	background-color: #0a1220;
}

scrollbarvertical sliderbar {
	background-color: #6a86b8;
	border-radius: 7dp;
	min-height: 24dp;
}

scrollbarvertical sliderbar:hover,
scrollbarvertical sliderbar:active {
	background-color: #ffd35a;
}

scrollbarvertical sliderarrowdec,
scrollbarvertical sliderarrowinc {
	height: 0;
}

.list {
	display: block;
	overflow-y: auto;
	background-color: #0a1220;
	border: 2dp #6a86b8;
	border-radius: 4dp;
}

.list div {
	padding: 6dp 10dp;
	tab-index: auto;
}

.list div:hover,
.list div:focus,
.list div.selected {
	background-color: #33507a;
	color: #ffd35a;
}

.muted {
	color: #8fa2c4;
}