Dragon-Knight/assets/dk.css

/*
	In general, we don't want to stray too far from the original appearance.
	We'll optimize the layout for modern CSS and use better styles and fonts
	for legibility and design, but keep the soul of the original project.
*/

@font-face {
  font-family: 'Seagram';
  src: url('/assets/fonts/seagram.ttf') format('truetype');
  font-display: swap;
}

:root {
	color: #222;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: 16px;
}

.seagram {
	font-family: 'Seagram', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
}

body {
	padding: 1rem;
	background-image: url("/assets/images/backgrounds/snowstorm.jpg");
}

i { font-style: italic; }
b { font-weight: bold; }

h1, h2, h3, h4, h5 {
	font-family: 'Seagram', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

div#container {
	max-width: 1024px;
	display: flex;
	flex-direction: column;
	margin: 0px auto;
}

header {
	width: 100%;
	display: flex;
	justify-content: space-between;

	nav {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

section#game {
	display: grid;
	grid-template-columns: 180px 1fr 180px;
	margin: 1rem 0;
	border-top: 2px solid #000;

	& > aside > section:not(:last-of-type) {
		margin-bottom: 0.5rem;
		padding-bottom: 1rem;
		border-bottom: 2px solid black;
	}

	& > aside > section {
		display: flex;
		flex-direction: column;
		padding: 0.5rem;

		h5 {
			margin-bottom: 0.25rem;
		}
	}

	& > aside#left {
		grid-column: 1;
		border-right: 2px solid #000;
	}

	& > main {
		grid-column: 2;
		padding: 0.5rem;
	}

	& > aside#right {
		grid-column: 3;
		border-left: 2px solid #000;
	}
}

a {
	color: #663300;
	text-decoration: none;
	font-weight: bold;

	&:hover {
		color: #330000;
	}
}

.small {
	font-size: 0.75rem;
}

.highlight {
	color: red;
}

.light {
	color: rgba(0, 0, 0, 0.35);
}

div.title {
	background-color: #eeeeee;
	background-image: url("/assets/images/overlay.png");
	background-repeat: repeat;
	border: 1px solid #aaa;
	font-weight: bold;
	padding: 5px;
	margin-bottom: 0.1rem;
}

footer {
	display: flex;
	justify-content: center;
	font-size: 0.75rem;
	padding: 0.5rem 0;

	& > div {
		flex: 0 0 25%;
		text-align: center;
	}
}

ul.unstyled {
	list-style: none;
}

form#move-compass {
	width: 128px;
	height: 128px;
	display: flex;
	flex-direction: column;
	background-image: url('/assets/images/compass.webp');
	margin: 0.5rem auto;

	& > div.mid {
		display: flex;
	}

	button {
		background-color: transparent;
		border: none;
		color: transparent; /* Hide the text */
		background-size: cover; /* Ensure the background image fills the button */
		cursor: pointer;

		&:hover {
			background-color: rgba(225, 16, 16, 0.5);
		}

		&#north {
			width: 128px;
			height: 40px;
		}

		&#west {
			width: 63px;
			height: 50px;
		}

		&#east {
			width: 63px;
			height: 50px;
		}

		&#south {
			width: 128px;
			height: 38px;
		}
	}
}

button.btn {
	font-family: inherit;
	font-size: 1rem;
	appearance: none;
	outline: none;
	background-color: #808080;
	background-image: url("/assets/images/overlay.png");
	border: 1px solid #808080;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	color: white;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

	&:hover {
		background-color: #909090;
	}

	&.btn-primary {
		color: rgba(0, 0, 0, 0.75);
		background-color: #F2994A;
		background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #F2C94C, #F2994A);
		border-color: #F2994A;

		&:hover {
			background-color: #ffb574;
			background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #ffd965, #ffb574);
		}
	}

	&.btn-blue {
		background-color: #00c6ff;
		background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #00c6ff, #0072ff);
		border-color: #0072ff;

		&:hover {
			background-color: #49d6fd;
			background-image: url("/assets/images/overlay.png"), linear-gradient(to bottom, #49d6fd, #2987fa);
		}
	}
}

form.standard {
	& > div.row {
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;

		label {
			font-weight: bold;
		}
	}

	span.help {
		font-size: 0.8em;
		color: #555;
	}

	& > div.actions {
		margin-top: 1rem;
	}

	input.text {
		appearance: none;
		outline: none;
		border: 1px solid transparent;
		padding: 0.25rem 0.25rem;
		background-color: rgba(0, 0, 0, 0.4);
		color: white;

		&:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&:focus {
			background-color: rgba(0, 0, 0, 0.6);
			border-color: black;
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.6);
		}
	}

	textarea.forum-text {
		appearance: none;
		outline: none;
		border: 1px solid transparent;
		padding: 0.25rem 0.25rem;
		background-color: rgba(0, 0, 0, 0.4);
		color: white;
		min-height: 200px;

		&:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&:focus {
			background-color: rgba(0, 0, 0, 0.6);
			border-color: black;
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.6);
		}
	}
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-05 {
	margin-bottom: 0.5rem;
}

.mb-025 {
	margin-bottom: 0.25rem;
}

.w-full {
	width: 100%;
}

div.town {
	& > section:not(:last-child) {
		margin-bottom: 2rem;
	}

	& > section.split {
		width: 100%;
		display: flex;
		gap: 1rem;

		& > section {
			width: 100%;
		}
	}
}

button.img-button {
	appearance: none;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
}

div#statbars {
	display: flex;
	justify-content: space-around;
	margin-top: 1rem;

	& > div.stat {
		display: flex;
		flex-direction: column;
		align-items: center;

		& > div.container {
			display: flex;
			align-items: flex-end;
			background-color: rgba(0, 0, 0, 0.6);
			width: 16px;
			height: 160px;
			border: 1px solid rgba(0, 0, 0, 0.6);

			& > div.bar {
				width: 100%;
				height: 100%;
				background-color: white;
			}

			&#hp {
				& > div.bar {
					background: #56ab2f;
					background: linear-gradient(to left, #a8e063, #56ab2f);
				}

				&.warning > div.bar {
					background: #F2994A;
					background: linear-gradient(to left, #F2C94C, #F2994A);
				}

				&.danger > div.bar {
					background: #cb2d3e;
					background: linear-gradient(to left, #ef473a, #cb2d3e);
				}
			}

			&#mp > div.bar {
				background: #00c6ff;
				background: linear-gradient(to right, #0072ff, #00c6ff);
			}

			&#tp > div.bar {
				background: #757f9a;
				background: linear-gradient(to right, #757f9a, #d7dde8);
			}
		}
	}
}

.inline-block {
	display: inline-block;
}

table {
	border-collapse: collapse;
	width: 100%;

	th, td {
		padding: 0.5rem;
		text-align: left;
		border: 1px solid rgba(0, 0, 0, 0.2);
	}

	th {
		background-color: rgba(0, 0, 0, 0.1);
	}

	tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.05);
	}
}

table.shop {
	width: 80%;
	margin: 0px auto;
}

div.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;

	& > div.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		padding: 1.25rem;
		min-width: 300px;
		text-align: center;
		background-image: url("/assets/images/backgrounds/snowstorm.jpg");
	}

	div.buttons {
		margin-top: 20px;
		gap: 10px;
		display: flex;
		justify-content: center;
	}
}

.mt-1 {
	margin-top: 1rem;
}

img#move-compass-disabled {
	margin: 0px auto;
	cursor: not-allowed;
	filter: grayscale();
	margin-top: 0.5rem;
}

img#monster-image {
	display: block;
	max-width: 80%;
	margin: 1rem auto;
}

div#monster-health {
	display: flex;
	background-color: rgba(0, 0, 0, 0.6);
	height: 16px;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.6);

	& > div.bar {
		width: 100%;
		height: 100%;
		background: #56ab2f;
		background: linear-gradient(to bottom, #a8e063, #56ab2f);

		&.warning {
			background: #F2994A;
			background: linear-gradient(to bottom, #F2C94C, #F2994A);
		}

		&.danger {
			background: #cb2d3e;
			background: linear-gradient(to bottom, #ef473a, #cb2d3e);
		}
	}
}

select.styled-select {
	font-family: inherit;
	font-size: 1rem;
	appearance: none;
	outline: none;
	background-color: #808080;
	background-image: url("/assets/images/overlay.png");
	border: 1px solid #808080;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	color: white;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	height: 29px;

	&:hover {
		background-color: #909090;
	}
}

div#battle-window {
	background: url("/assets/images/backgrounds/forest1.jpg");
	background-size: cover;
	padding: 0.5rem;

	h2, h3 {
		color: white;
	}
}

div.thread-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}