/*
Endless Sky Community Directory
Copyright (c) 2025 mOctave

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/


/*
MARK: Global
*/
html {
	font-family: Ubuntu, Verdana, sans-serif;
	background-color: #111;
	color: #ccc;
}

hr {
	margin: 4px;
}

h1 {
	color: #888;
	font-weight: lighter;
	text-align: center;
}

h2 {
	color: #fff;
}

h3 {
	color: #eee;
}

a {
	color: #48f;
	text-decoration: none;
}

a:hover {
	color: #4ad;
}

.nodisplay {
	display: none;
}

.footnote {
	font-size: smaller;
	font-style: italic;
}



/*
MARK: Cards
*/
.card-container {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto;
}

/* Single-Column View */
@media only screen and (max-width: 899px) {
	.card-container {
		grid-template-columns: auto;
	}
}

.card {
	background-color: #444;
	padding: 10px;
	margin: 10px;
	border: 4px solid #666;
	border-radius: 20px;
	overflow: hidden;
	height: 180px;
	min-width: 400px;
	max-width: 900px;
}

.card:hover {
	background-color: #333;
}

.left-panel {
	float: left;
	height: 100%;
	margin-right: 10px;
	margin-bottom: 10px;
}

.left-panel * {
	text-align: center;
}

.avatar {
	width: 100px;
	height: 100px;
	border-radius: 20px;
}


.active {
	color: rgb(30, 220, 40);
}

.hiatus {
	color: rgb(160, 110, 0);
}

.old-member {
	color: rgb(180, 40, 0);
}

.centre-panel {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.name-label {
	font-weight: bold;
	font-size: larger;
	margin: 2px;
	flex: 0 0 content;
}

.aka-labels {
	font-style: italic;
	white-space: nowrap;
	overflow-x: scroll;
	scrollbar-width: thin;
	flex: 0 0 content;
}

.aka-label {
	margin-right: 20px;
}

.roles {
	flex: 0 0 content;
}

.card-body {
	flex: 1 1 auto;
	overflow-y: scroll;
	scrollbar-width: thin;
}

.projects {
	border: 2px solid #666;
	float: right;
	padding: 5px;
	margin-left: 5px;
	border-radius: 5px;
	height: calc(100% - 14px);
	width: 150px;
	overflow: scroll;
	scrollbar-width: 2px;
}

.projects-lower {
	display: none;
}

.project-header {
	text-align: center;
	margin: 2px;
	margin-top: 6px;
}

.project {
	margin: 3px;
}

.quote {
	margin-top: 12px;
	font-style: italic;
	display: none;
}

/* Small Screens */
@media only screen and (max-width: 599px) {
	.projects {
		display: none;
	}

	.projects-lower {
		display: block;
	}
}

@media only screen and (min-width: 900px) and (max-width: 1199px) {
	.projects {
		display: none;
	}

	.projects-lower {
		display: block;
	}
}

@media only screen and (min-width: 1299px) {
	.quote {
		display: block;
	}
}

#template {
	display: none;
}



/*
MARK: Search and Filtering
*/
#searchbar {
	margin: 10px;
	width: calc(100% - 20px);
	border-radius: 10px;
}

#searchbar * {
	margin: 0px;
	height: 30px;
	padding: 5px;
	font-size: large;
	border-radius: 10px;
}

#search-field {
	background-color: #777;
	border: none;
	width: calc(100% - 74px);
}

#search-button {
	background-color: #48f;
	border: none;
	box-sizing: content-box;
	width: 50px;
	cursor: pointer;
}

#search-button:hover {
	background-color: #4ad;
}

#search-option-toggle {
	background: none;
	border: none;
	color: #48f;
	width: 100%;
	text-align: center;
	cursor: pointer;
}

#search-option-toggle:hover {
	color: #4ad;
}

#advanced-search-options {
	margin: 30px;
}

#search-mode {
	height: 30px;
	padding: 5px;
	background-color: #ccc;
	border: none;
	border-radius: 10px;
	margin-left: 10px;
	margin-right: 30px;
}

.searchcheckbox {
	height: 24px;
	width: 24px;
	vertical-align: middle;
	margin: 0px;
	margin-left: 10px;
	margin-right: 30px;
}

.filter-button {
	height: 30px;
	padding: 5px;
	background-color: #ccc;
}



/* 
MARK: Role Colours
*/
.developer {
	color: rgb(230, 126, 35);
}

.community-organizer {
	color: rgb(235, 161, 24);
}

.moderator {
	color: rgb(238, 194, 14);
}

.reviewer {
	color: rgb(233, 30, 99);
}

.core-member {
	color: rgb(181, 81, 254);
}

.privateer-potato {
	color: rgb(201, 168, 126);
}

.privateer {
	color: rgb(120, 167, 202);
}

.merchant {
	color: rgb(52, 152, 219);
}


.maintainer {
	color: #999;
}

.oathkeeper {
	color: rgb(203, 74, 23);
}

.code-patrol {
	color: rgb(255, 153, 59);
}

.art-patrol {
	color: rgb(56, 139, 18);
}

.writing-patrol {
	color: rgb(73, 150, 232);
}

.theme-patrol {
	color: rgb(181, 149, 21);
}

.balance-patrol {
	color: rgb(203, 23, 200);
}

.mission-patrol {
	color: rgb(21, 181, 138);
}

.other-role {
	color: #eee;
}