/*
 * measuree_pages.css - Anmeldeseite und Passwortseite
 *
 * WOFUER
 * index.php und new_password.php. Beide zeigen dieselbe Sache: einen Rahmen
 * mit Kopfleiste, Logo und einem schmalen Formular darin.
 *
 * WARUM EIGENSTAENDIG
 * Vorher holten sich beide Seiten vier Stylesheets aus include/measuree/
 * (measuree_master.css, jo_typicons.css, jo_table_sorter.css, jo_popover.css)
 * und legten measuree_ui.css darueber - zusammen rund 1,4 MB, von denen sie
 * einen Bruchteil brauchten. Drei der vier Dateien tragen ausserdem Sachen,
 * die es hier gar nicht gibt: Tabellensortierung, Popover-Dialoge, eine
 * Icon-Schrift mit 151 Symbolen fuer drei benoetigte.
 *
 * Vor allem aber werden sie von versions/update_js_css.php beim
 * Versionsupdate ueberschrieben. Diese Datei liegt in include/ selbst und
 * bleibt davon unberuehrt.
 *
 * Die Farben, Schriften und Radien kommen aus theme.css, das ueber
 * include/theme_head.php geladen wird und als erstes stehen muss. Die
 * Dialoge, .hidden, .btn-quiet, .btn-block und die Passwortpruefung stehen
 * ebenfalls dort - hier steht nur, was diese beiden Seiten zusaetzlich
 * brauchen.
 */

/* ============================================================ Grundlagen */

body, html
{
	margin: 0;
	padding: 0;
}

/*
 * Das Hintergrundfoto stand frueher als base64 in measuree_master.css - eine
 * Zeile mit 1,2 Millionen Zeichen. Als Datei ist es ein Drittel kleiner,
 * wird vom Browser zwischengespeichert und blockiert das Stylesheet nicht.
 */
body
{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg);
	background-image: url('measuree_bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	font-family: var(--fb);
	font-size: 14px;
}

/* CI-Faustregel: PT Sans Narrow fuer alles, was gelesen oder bedient wird,
   die Display-Schrift nur fuer Ueberschriften. */
td, th, textarea, button, input, label, select
{
	font-family: var(--fb);
	font-size: 14px;
}

h1, h2, h3
{
	font-family: var(--fd);
}

h1
{
	margin-top: 20px;
	padding-left: 2px;
	font-weight: 700;
	letter-spacing: -.02em;
}

a
{
	color: var(--cyan);
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* Die Bildlaufleisten stehen in theme.css. Diese Seite laedt kein
   measuree_master.css, das sie ueberschreiben wuerde - eine Wiederholung
   wie in measuree_ui.css ist hier also nicht noetig. */

/* ====================================================== Schaltflaechen */

/* Orange ist laut Handbuch die Primaerfarbe fuer Schaltflaechen; der Hover
   geht auf die hellere Variante (.docs/ci/11-btn-primary-hover.png). */
button,
.button,
label,
input[type='checkbox'],
input[type='radio']
{
	cursor: pointer;
}

button
{
	border-width: 0;
	padding: 1px 3px;
	border-radius: var(--r-pill);
	background-color: var(--orange);
	color: var(--on-accent);
	transition: background-color .2s linear, transform .4s var(--ease);
}

button:hover
{
	background-color: var(--orange-l);
	transform: translateY(-1px);
}

/* Das Kreuz in der Kopfleiste eines Dialogs ist keine Flaeche - die Regeln
   dafuer stehen in theme.css, nur der Radius und der Uebergang muessen die
   allgemeine button-Regel hier ueberstimmen. */
.dialog_close
{
	border-radius: 0;
	transition: color .2s linear;
}

select
{
	cursor: pointer;
}

/* ============================================================== Rahmen */

#container
{
	display: inline-block;
	padding: 30px;
	border-radius: 6px;
	background-color: var(--bg);
	box-shadow: 4px 5px 10px -7px var(--shadow);
	min-width: 360px;
}

#header
{
	height: 30px;
}

#user
{
	position: relative;
	float: left;
}

#logo
{
	position: relative;
	float: right;
}

#logo img
{
	width: 200px;
}

#content
{
	margin-top: 40px;
	clear: both;
}

/* Bedienelemente im Kopfbereich - Vorlage ist der Sprachumschalter von
   measuree.net (.docs/ci/71-sprachumschalter.png): nur Kontur, gedaempfte
   Farben, kleiner Radius. Ohne Flex sitzt das SVG als Inline-Element auf der
   Schriftlinie und haengt sichtbar zu tief. */
#user button
{
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	margin-right: 4px;
	padding: 0;
	background: none;
	border: 1px solid var(--text-3);
	border-radius: 5px;
	/* Symbol und Rahmen im selben Ton: --text-2 liegt heller als --text-3
	   (#a0a0a0 gegen #999999 im Hellen, #8a827a gegen #5a534c im Dunklen).
	   Das Symbol stand dadurch blasser da als der Rahmen um es herum. */
	color: var(--text-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#user button:hover
{
	background: none;
	color: var(--orange);
	border-color: var(--orange);
	transform: none;
}

/* margin: auto zusaetzlich zum Flex-Container: Setzt ein Browser das
   display: inline-flex am <button> nicht um, greift beim SVG weder die
   Flex-Zentrierung noch das text-align des Buttons. */
#user button svg
{
	display: block;
	margin: auto;
	width: 15px;
	height: 15px;
}

/* ========================================================== Formular */

form.login
{
	margin-top: 10px;
}

.form_field_label
{
	margin: 12px 0 4px 16px;
}

/*
 * Das Eingabefeld sitzt in einer runden Pille mit einem Symbol davor.
 *
 * Die Masse sind auf border-box umgestellt (siehe theme.css): Vorher stand
 * hier width: calc(100% - 26px) und height: 20px - beides Innenmasse, zu
 * denen der Browser 24px Polsterung und 2px Rahmen addierte. Ergebnis waren
 * 100% Breite und 38px Hoehe. Genau die stehen jetzt direkt da.
 */
.form_field_container
{
	width: 100%;
	height: 38px;
	padding: 8px 12px;
	border: var(--line) 1px solid;
	border-radius: 20px;
	background-color: var(--surface);
	white-space: nowrap;
}

.form_field_container > *
{
	vertical-align: middle;
}

/*
 * SYMBOLE IN DEN FELDERN
 *
 * Frueher kamen sie aus jo_typicons - einer Icon-Schrift mit 151 gefuellten
 * Symbolen und 148 KB, von denen diese Seiten drei brauchten. Gefuellte Icons
 * brechen laut Handbuch ohnehin den Look; verlangt sind Strichsymbole im
 * Feather-Stil.
 *
 * Die Form kommt jetzt als Maske. Ueber die Maske und nicht als
 * Hintergrundbild, damit das Symbol die Textfarbe annimmt.
 */
.form_field_container::before
{
	content: "";
	display: inline-block;
	width: 20px;
	height: 18px;
	vertical-align: middle;
	background-color: var(--text-mute);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 18px 18px;
	        mask-size: 18px 18px;
}

.form_field_container.icon_user::before
{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.form_field_container.icon_key::before
{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2'/%3E%3Cpath d='M11.39 11.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.778-7.778z'/%3E%3Cpath d='M11.39 11.61L15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2'/%3E%3Cpath d='M11.39 11.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.778-7.778z'/%3E%3Cpath d='M11.39 11.61L15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E");
}

.form_field_container.icon_globe::before
{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* Die Versionsauswahl traegt das Katzen-Signet. Frueher ein absolut
   gesetztes Hintergrundbild ohne positionierten Vorfahren, dessen Platz das
   Auswahlfeld mit margin-left ausgleichen musste - jetzt liegt es wie die
   uebrigen Symbole im Textfluss. */
.form_field_container.measuree_version::before
{
	-webkit-mask-image: url('measuree/measuree_cat_only_silhouette.svg');
	        mask-image: url('measuree/measuree_cat_only_silhouette.svg');
	-webkit-mask-size: 20px 20px;
	        mask-size: 20px 20px;
}

/* Die Pille traegt Rahmen und Flaeche - das Feld darin nicht. */
.form_field_container .form_field
{
	width: calc(100% - 30px);
	border: 0;
	outline: none;
	background-color: transparent;
	color: var(--text);
	font-family: var(--fb);
	font-size: 14px;
}

/*
 * DIE AUFGEKLAPPTE AUSWAHLLISTE BRAUCHT EINE EIGENE FLAECHE
 *
 * Das Feld selbst ist durchsichtig, damit die Pille darunter durchscheint.
 * Die Liste, die beim Aufklappen erscheint, zeichnet der Browser aber aus der
 * Flaeche des Auswahlfelds - und "durchsichtig" heisst dort nicht "wie die
 * Pille", sondern faellt auf die Vorgabe des Systems zurueck. Im Dark Mode
 * stand die Liste deshalb hell da, waehrend jedes andere Auswahlfeld im
 * Portal dunkel bleibt.
 *
 * Die Farben stehen an den Eintraegen, nicht am Feld: Am Feld wuerden sie die
 * Durchsichtigkeit aufheben und einen Kasten in die Pille zeichnen.
 */
.form_field_container .form_field option
{
	background-color: var(--surface);
	color: var(--text);
}

/* ================================================== Schaltflaechenzeile */

.form_buttons
{
	margin-top: 30px;
	text-align: right;
}

.form_buttons > *
{
	vertical-align: middle;
}

.form_buttons button
{
	margin-right: 0;
	margin-left: 8px;
	padding: 10px 16px;
	border-radius: 5px;
}

/* Der Verweis "Passwort vergessen" steht neben dem Anmelden-Knopf und
   gehoert zur selben Handlungsebene - orange waere hier aber genau die Farbe
   der Schaltflaeche daneben. Im hellen Modus laeuft er deshalb in der
   Textfarbe, im dunklen bleibt er orange; beide Werte stehen als
   --quiet-link in theme.css. */
.form_buttons .forgot_password
{
	display: inline-block;
	margin-right: 8px;
	color: var(--quiet-link);
}

.form_buttons .forgot_password:hover
{
	color: var(--orange-l);
	text-decoration: underline;
}