frontend-zackeneule/source/style/style.css

/*
Espe | Ein schlichtes Werkzeug zur Mitglieder-Verwaltung | Frontend
Copyright (C) 2024 Christian Fraß

This program is free software: you can redistribute it and/or modify it under the terms of the GNU 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 General Public License for more details.

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


:root
{
	--hue: 0;
}

html
{
	font-family: sans-serif;
	/*
	font-size: 1.5em;
	 */
	
	background-color: hsl(var(--hue), 0%, 0%);
	color: hsl(var(--hue), 0%, 100%);
}


body
{
	max-width: 960px;
	margin: auto;
	padding: 24px;
	
	background-color: hsl(var(--hue), 0%, 12.5%);
	color: hsl(var(--hue), 0%, 87.5%);
}

body:not([rel="logged_out"]) nav .logged_out {display: none;}
body:not([rel="logged_in"]) nav .logged_in {display: none;}

a
{
	background-color: hsl(var(--hue), 0%, 12.5%);
	
	text-decoration: none;
}

a:not(:hover)
{
	/*
	color: hsl(var(--hue), 75%, 50%);
	 */
	color: hsl(var(--hue), 72.3%, 54.7%);
}

a:hover
{
	/*
	color: hsl(var(--hue), 75%, 75%);
	 */
	color: hsl(var(--hue), 72.8%, 79.8%)
}

input[type="text"]
,
input[type="number"]
,
input[type="search"]
,
input[type="password"]
{
	padding: 8px;
	
	border: 1px solid hsl(var(--hue), 0%, 50%);
	
	min-width: 300px;
	
	font-size: 1.125em;
}

input[type="text"]:not([disabled="disabled"])
,
input[type="number"]:not([disabled="disabled"])
,
input[type="search"]:not([disabled="disabled"])
,
input[type="password"]:not([disabled="disabled"])
{
	/*
	background-color: hsl(var(--hue), 0%, 87.5%);
	color: hsl(var(--hue), 0%, 12.5%);
	 */
	background-color: hsl(var(--hue), 0%, 6.125%);
	color: hsl(var(--hue), 0%, 87.5%);
}

input[type="text"][disabled="disabled"]
,
input[type="number"][disabled="disabled"]
,
input[type="search"][disabled="disabled"]
,
input[type="password"][disabled="disabled"]
{
	background-color: hsl(var(--hue), 0%, 12.5%);
	color: hsl(var(--hue), 0%, 87.5%);
}

nav
{
	/*
	border-bottom: 1px solid hsl(var(--hue), 0%, 100%);
	margin-bottom: 16px;
	 */
}

nav > ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav > ul > li
{
	display: inline-block;
	margin-right: 16px;
	padding: 8px;
	
	/*
	text-transform: uppercase;
	 */
}

input[type="submit"]
,
button
{
	font-size: 1.25em;
	cursor: pointer;
}

/*
nav > ul > li:hover::before
{
	content: "[";
}

nav > ul > li:hover::after
{
	content: "]";
}
 */

.plankton_form_field
{
	margin-bottom: 16px;
}

.plankton_form_label
{
	display: block;
	
	font-size: 0.75em;
	font-weight: bold;
}

.plankton_search_item
{
	cursor: pointer;
}

.plankton_input_group_field
{
	margin-bottom: 16px;
}

.plankton_input_group_field_label
{
	font-size: 0.75em;
	font-weight: bold;
	/*
	text-transform: capitalize;
	 */
}

.plankton_input_group_field_label + :not(.plankton_input_group_field_help)
{
	display: block;
}

.plankton_input_group_field_help
{
	margin-left: 8px;
	
	font-size: 0.75em;
	font-weight: bold;
	
	cursor: help;
}

.plankton_input_group_field_help + *
{
	display: block;
}


.plankton_input_enumeration > *
{
	display: block;
}

.plankton_editor_actions
{
	margin-top: 16px;
}

.plankton_editor_action
{
	text-transform: uppercase;
	margin: 8px;
}

.plankton_search_submit
{
	margin-left: 16px;
}

.plankton_search_item
{
	margin-bottom: 8px;
}