stonetop.css

/* Custom CSS */
:root {
	--font-primary: Signika, sans-serif;
	--stonetop-bg: hsl(30deg 20% 94%);
	--color-border-highlight-alt: slategrey;
	--color-shadow-highlight: slategrey;
	--color-shadow-primary: slategrey;
	--color-border-highlight: slategrey;
	--color-ownership-none: slategrey;
	--color-text-hyperlink: slategrey;

	/* Playbook colors */
	/* Todo: Darken to contrast with white */
	--color-the-would-be-hero: hsl(350, 43%, 45%);
	--color-the-fox: hsl(19, 95%, 64%);
	--color-the-blessed: hsl(132, 34%, 56%);
	--color-the-marshal: hsl(334, 29%, 37%);
	--color-the-seeker: hsl(265, 33%, 25%);
	--color-the-heavy: hsl(2, 83%, 24%);
	--color-the-ranger: hsl(49, 51%, 34%);
	--color-the-lightbearer: hsl(40, 94%, 49%);
	--color-the-judge: hsl(244, 93%, 18%);

	scrollbar-color: slategrey hsl(30deg 20% 94%);
}

/* Use default font  */
body,
.vtt .window-header,
.vtt .window-app button,
.vtt .window-app .button {
	font-family: var(--font-primary);
}

/* Strange Scene navigation bug fix */
#navigation {
	overflow: visible;
}

/* Fix Pause Spinner Shadow */
#pause {
	background: none;
}

#pause img {
	--fa-animation-duration: 15s
}

#pause figcaption {
	text-shadow: 3px 3px 4px var(--color-shadow-dark);
}

.vtt .sidebar-tab,
.pbta.sheet .cell__title,
.pbta {
	font-family: Signika, sans-serif;
}

#navigation #scene-list .scene.gm {
	border-color: slategrey;
	background-color: hsl(308deg 6.5% 13%);
}

.vtt .window-header,
.pbta.sheet .sheet-attributes .cell--stats .stat {
	background-color: slategrey;
}

.vtt :not(.application,.image-popout,.journal-sheet,.sidebar-popout) .window-content {
	background: var(--stonetop-bg) url(/modules/stonetop/assets/graphics/sheet-bg.png);
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	scrollbar-width: none;
}

.app,
.window-app,
#controls ol.control-tools>li {
	border-radius: 5px;
	box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.4);
}

.vtt .dialog .window-content:has(.roll-dialog) .dialog-buttons {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
}

.vtt .dialog .window-content:has(.roll-dialog) .dialog-buttons .submit {
	grid-column: span 3;
}

.pbta.sheet .sheet-tab {
	margin-top: 0px;
}

/* .pbta.sheet .sheet-resources {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
	margin-bottom: 8px;
} */

.pbta.sheet .sheet-resources .cell--roll-formula {
	display: none;
}

.pbta.sheet .cell__clock {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		column-gap: 10px;
}

.pbta.sheet .cell--Xp .cell__clock {
	justify-self: unset;
}

.pbta.sheet input[type=radio].attr-xp {
	width: 20px;
	height: 20px;
	margin: 2px 6px;
	flex: none;
}


.pbta.sheet .sheet-wrapper .sheet-top .sheet-attributes-top .cell--attributes-top .cell.cell--attr-level {
	flex: 0 1 auto;
}

.pbta.sheet .sheet-header__fields .view-playbook {
	display: grid;
	place-content: center;
}

.pbta.sheet .cell__counter>span {
	font-weight: unset;
}

.pbta.sheet .sheet-attributes .cell--stats .stats-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-left: 8px;
}

/* Playbook colors */

.pbta.sheet.actor .window-content {
	padding: 0px
}

.pbta.sheet.actor .window-content form {
	padding: 8px
}

.pbta.sheet.playbook-the-would-be-hero form {
	background-color: color-mix(in hsl, var(--color-the-would-be-hero) 10%, transparent);
}

.pbta.sheet.playbook-the-fox form {
	background-color: color-mix(in hsl, var(--color-the-fox) 10%, transparent);
}

.pbta.sheet.playbook-the-blessed form {
	background-color: color-mix(in hsl, var(--color-the-blessed) 10%, transparent);
}

.pbta.sheet.playbook-the-marshal form {
	background-color: color-mix(in hsl, var(--color-the-marshal) 10%, transparent);
}

.pbta.sheet.playbook-the-seeker form {
	background-color: color-mix(in hsl, var(--color-the-seeker) 10%, transparent);
}

.pbta.sheet.playbook-the-heavy form {
	background-color: color-mix(in hsl, var(--color-the-heavy) 10%, transparent);
}

.pbta.sheet.playbook-the-ranger form {
	background-color: color-mix(in hsl, var(--color-the-ranger) 10%, transparent);
}

.pbta.sheet.playbook-the-lightbearer form {
	background-color: color-mix(in hsl, var(--color-the-lightbearer) 10%, transparent);
}

.pbta.sheet.playbook-the-judge form {
	background-color: color-mix(in hsl, var(--color-the-judge) 10%, transparent);
}

/* ~ Playbook colors */