leibowitz

/*************************************************************************
 * Theme */

/* @media(prefers-color-scheme: light) { */
html {
	--bg: white;
	--fg: black;
	--ui-bg: #f1f1f1;
	--visited-link: purple;
	--unvisited-link: blue;
	--hover-link: skyblue;
}
/* }  */

/* @media(prefers-color-scheme: dark) { */
/*     html { */
/*         --bg: black; */
/*         --fg: white; */
/*         --ui-bg: #010101; */
/*         --visited-link: purple; */
/*         --unvisited-link: blue; */
/*         --hover-link: skyblue; */
/*     } */
/* } */

/***********************************************************************
 * Layout */

/* Apply superficial styles */
body {
	background-color: var(--bg);
	color: var(--fg);
}
h2, h3, h4, h5, h6, h7, h8 {
	border-bottom: solid 0.1rem var(--fg);
}
.ui {
	background-color: var(--ui-bg);
}
.ui a {
	text-decoration: none;
}
a:hover {
	color: var(--hover-link);
}
a:visited {
	color: var(--visited-link);
}
a:not(visited) {
	color: var(--unvisited-link);
}
.ui a:visited {
	color: var(--unvisited-link);
}
.ui a:hover {
	color: var(--hover-link);
}

/* Children of #header-and-navbar-container */
#header {
	padding: 8px;
}
#header h1 {
	font-size: large;
}
#navbar {
	padding: 8px 8px 8px 0px;
}
#navbar a {
	padding: 5px;
}
#navbar a.here {
	font-weight: bold;
}

ul.path-breadcrumbs {
	font-size: small;
	list-style: none;
	padding-left: 0px;
}
ul.path-breadcrumbs li {
	display: inline;
}
ul.path-breadcrumbs li:before {
	color: var(--fg);
	content: "/";
}
ul.path-breadcrumbs a {
	text-decoration: none;
}
ul.path-breadcrumbs a:visited {
	color: var(--unvisited-link);
}

/* #sidebar-and-content-container and its children */
#sidebar-and-content-container {
	display: flex;
}
#sidebar {
	min-width: 240px;
	padding: 0px 5px 0px 5px;
	flex: 0;
}
#sidebar ul {
	list-style: none;
	padding-left: 0px;
}
#sidebar h2 {
	font-size: medium;
}
.tag-count {
	font-size: small;
	color: var(--fg);
}
#content {
	padding: 10px;
	flex: 1;
}
#content img {
	max-width: 100%;
}
.sidebar-metadata-key {
	font-size: small;
	font-weight: bold;
	color: var(--fg);
}
.sidebar-metadata-var {
	font-size: small;
	color: var(--fg);
}
#pagination {
	text-align: center;
	padding: 8px 8px 8px 0px;
}
#pagination a {
	text-decoration: none;
}
#pagination a.here {
	font-weight: bold;
}


/* Send the sidebar to the bottom on smaller screens */
@media(max-width: 660px) {
	#sidebar-and-content-container {
		flex-direction: column;
	}
	#content {
		order: 1;
	}
	#sidebar {
		order: 2;
	}
}

/* And finally, a small footer */
#footer {
	font-size: small;
	text-align: center;
}

/*************************************************************************
 * Content Tiles */

#sidebar-and-content-container #content #tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: left;
	align-content: space-around;
}

#sidebar-and-content-container .tile {
	width: 150px;
	height: 160px;
	padding: 10px;
	margin: 5px;
	text-align: center;
	border: 2px solid var(--fg);
	overflow-wrap: anywhere;
	overflow: hidden;
}

#sidebar-and-content-container .tile img {
	height: 100px;
}

/***********************************************************************
 * Content Cards */

#sidebar-and-content-container .card {
	width: 90%;
	padding: 10px;
	margin: 5px;
	border: 2px solid var(--fg);
	overflow-wrap: anywhere;
	overflow: hidden;
}

#sidebar-and-content-container .card .card-data {
	text-align: left;
}

#sidebar-and-content-container .card .card-data h2 {
	font-size: large;
}

/***********************************************************************
 * Content Forms */

#sidebar-and-content-container #content .form-row {
	display: table-row;
}

#sidebar-and-content-container #content label {
	display: table-cell;
	padding: 5px;
}

.checkbox-label-container {
	white-space: nowrap;
}

#sidebar-and-content-container #content #datum-listing-filter-form {
	display: inline;
}

#sidebar-and-content-container #sidebar .sidebar-form {
	display: block;
}

#sidebar-and-content-container #index-files-form input[type=text] {
	width: 95%;
	padding: 0.25em;
}

#sidebar-and-content-container #index-files-form .form-row {
	padding-top: 5px;
}

/***********************************************************************
 * Metadata Editor Widget */

#editor-widgets-container {
	display: flex;
}

#editor-widgets-container #editor-widget-left {
	flex: 40%;
	margin-right: 0.5em;
}

#editor-widgets-container #editor-widget-right {
	flex: 60%;
	margin-left: 0.5em;
}

#editor-widgets-container textarea {
	width: 98%;
	margin-bottom: 0.5em;
}

#editor-widgets-container #tag-editor-textarea {
	height: 14.3em;
	resize: vertical;
}

#editor-widgets-container input[type=text] {
	width: 98%;
	margin-bottom: 0.5em;
	padding: 0.25em;
}

@media(max-width: 660px) {
	#editor-widgets-container {
		flex-direction: column;
	}
	#editor-widgets-container #editor-widget-left {
		margin-right: 0em;
	}
	#editor-widgets-container #editor-widget-right {
		margin-left: 0em;
	}
	#editor-widgets-container textarea {
		height: 10em;
	}
}

/***********************************************************************
 * Upload Widget */

.upload-form input {
	padding: 0.25em 0.25em 0.25em 0.0em;
	margin-bottom: 0.5em;
	width: 99%;
}