snikket-web-portal/snikket_web/scss/app.scss

@import "_theme.scss";
@import "_baseline.scss";

$_top-h-size: nth($h-sizes, 1);
$_top-h-small-size: nth($h-small-sizes, 1);

/* headings */

@for $n from 1 through 6 {
	h#{$n} {
		color: $primary-100;
	}
}

/* block quotes */

blockquote {
	margin-left: $w-l2 / 2 - $w-s4 / 2;
	padding-left: $w-l2 / 2 - $w-s4 / 2;
	border-left: $w-s4 solid $primary-500;
}

/* coarse layout */

body {
	margin: 0;
	padding: 0;
	background-color: $gray-900;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	padding: $w-l1;
}

#mwrap {
	flex: 1;
	display: flex;
	flex-direction: row-reverse;

	> .filler, > .flashbox {
		flex: 1 1 1rem;
	}

	> main {
		flex: 0 1 60rem;
	}
}

@media screen and (max-width: $large-screen-threshold) {
	#mwrap {
		display: block;

		> main {
			margin-left: auto;
			margin-right: auto;
		}
	}
}

.flashbox > div.box > :first-child {
	margin-top: 0;
}

/* top bar */

@mixin snikket-logo {
	background-image: url('../img/snikket-logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: $w-s2 0em;
	padding-left: 2em;
}

div#topbar {
	background-color: white;
	@extend .el-1;
	color: $primary-200;
	margin: 0;
	padding: $w-s1;
	display: flex;
	align-items: center;

	& > header {
		flex: 0 1 auto;
		color: black;
		font-size: $_top-h-size;
		line-height: 1.5;

		body.debug & {
			color: red;
		}

		@media screen and (max-width: $small-screen-threshold) {
			font-size: $_top-h-small-size;
		}

		& > a {
			color: inherit;
			text-decoration: none;

			span {
				@include snikket-logo;
			}
		}

		& > a:visited, & > a:hover, & > a:focus, & > a:active {
			color: inherit;
			text-decoration: none;
		}
	}

	& > div.filler {
		flex: 1 1 0px;
	}

	& > nav.usermenu {
		flex: 0 1 auto;
	}
}

/* standard elevations */

.el-1, .box.el-1, div.form.el-1 {
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.12),
		0 1px 2px rgba(0, 0, 0, 0.24);
}

.el-2, .box.el-2, div.form.el-2 {
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.15),
		0 2px 4px rgba(0, 0, 0, 0.12);
}

.el-3, .box.el-3, div.form.el-3 {
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.15),
		0 3px 6px rgba(0, 0, 0, 0.10);
}

.el-4, .box.el-4, div.form.el-4 {
	box-shadow:
		0 15px 25px rgba(0, 0, 0, 0.15),
		0 5px 10px rgba(0, 0, 0, 0.05);
}

.el-5, .box.el-5, div.form.el-5 {
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.2);
}


/* footer */

body > footer {
	display: block;
	background-color: $gray-100;
	color: $gray-800;
	padding: 0 $w-l1;
	font-size: 92.21079115%;

	ul {
		display: block;
		padding: 0;
		margin: 0;
		list-style-type: none;
		text-align: center;
		line-height: 1.6267076567643135;
	}

	li {
		display: block;
		margin: $w-s1 0;
	}

	a, a:visited, a:hover, a:active, a:focus {
		color: $gray-900;
		font-weight: bold;
		text-decoration-line: underline;
		text-decoration-color: $gray-500;
		text-decoration-width: $w-s4;
		text-decoration-thickness: $w-s4;
		text-underline-offset: 0;
	}

	a:hover {
		text-decoration-color: $gray-700;
	}
}

/* form support */

@for $n from 1 through 6 {
	div.form h#{$n}.form-title {
		font-size: nth($h-sizes, 4);
		/* font-weight: bold; */
		line-height: 1.5 / (nth($h-sizes, 4) / 100%);
		margin: 1.5em / (nth($h-sizes, 4) / 100%) 0;
	}
}

label.required:after {
	content: '*';
	color: $alert-400;
	padding: $w-s4;
}

p.form-desc.weak, p.field-desc.weak {
	color: $gray-300;
}

$text-entry-inputs: "text" "password" "email" "tel";

div.f-errbox {
	background-color: $alert-800;
	border: $w-s4 solid $alert-200;
	color: $alert-100;
	border-radius: $w-s4;
	padding: 0 $w-0;
	margin: 1em 0;

	p {
		line-height: 1;
		margin: 1em 0;
	}

	ul {
		margin: 1em 0;
		padding: 0;
		padding-left: $w-0;
	}

	li {
	}
}

div.form {
	@extend .el-2;

	margin: $w-l1;
	padding: $w-l1;
	background-color: white;
}

div.form.layout-expanded {
	label, legend {
		display: block;
		font-weight: bold;
		color: $gray-200;
	}

	fieldset {
		display: block;
		border: 0;
		padding: 0;
		margin: 0;
	}

	fieldset.descriptive-radio-selection {
		p {
			margin-top: 0;
			margin-bottom: $w-s2;
		}
	}

	input[type="radio"] + label, input[type="checkbox"] + label {
		font-weight: inherit;
		color: inherit;
	}

	div.f-ebox {
		margin: 1.5em 0;
		line-height: 1.5;
	}

	div.f-bbox {
		text-align: right;
		padding: $w-s2 0;
	}

	@each $type in $text-entry-inputs {
		input[type=#{$type}] {
			width: 100%;
			border: none;
			border-bottom: $w-s4 solid $primary-500;
			margin-bottom: -$w-s4;
		}

		input[type=#{$type}].has-error {
			border-right: $w-s4 solid $alert-500;
		}

		input[type=#{$type}]:hover {
			border-bottom-color: $primary-700;
		}

		input[type=#{$type}]:focus {
			border-bottom-color: $primary-800;
		}
	}

	input[type="checkbox"], input[type="radio"] {
		position: absolute;
		z-index: -1;
	}

	input[type="checkbox"] + label:before {
		background-color: transparent;
		color: transparent;
		content: "✔";
		display: inline-block;
		width: $w-0;
		height: $w-0;
		border-radius: $w-s4;
		border: $w-s4 solid $primary-500;
		text-align: center;
		font-size: $w-0;
		margin-right: $w-s2;
		line-height: 1;
	}

	input[type="radio"] + label:before {
		background-color: transparent;
		color: transparent;
		content: "✔";
		display: inline-block;
		width: $w-0;
		height: $w-0;
		border-radius: $w-s1;
		border: $w-s4 solid $primary-500;
		text-align: center;
		font-size: $w-0;
		margin-right: $w-s2;
		line-height: 1;
	}

	input[type="checkbox"] + label:hover:before,
	input[type="radio"] + label:hover:before {
		border-color: $primary-700;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: $primary-800;
	}

	input[type="checkbox"]:checked + label:before {
		background-color: $primary-500;
		color: white;
	}

	input[type="radio"]:checked + label:before {
		background-color: $primary-500;
		box-shadow: inset 0 0 0 $w-s3 white;
	}

	input[type="checkbox"] + label, input[type="radio"] + label {
		display: block;
	}

	.radio-button-ext > label > p {
		margin-left: 1.75rem;
		margin-top: 0;
	}

	.radio-button-ext > label .icon {
		margin-left: 0.25em;
	}

	.radio-button-ext {
		margin-left: 0.5rem;
	}

	div.select-wrap {
		display: block;
		border-bottom: $w-s4 solid $primary-500;
		margin-bottom: -$w-s4;
		position: relative;

		& > select {
			width: 100%;
			background-color: transparent;
			border: none;
			outline: none;
			padding: 0 $w-s3;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			padding-right: $w-l1 + $w-s3;
			margin-top: -1px;
			margin-bottom: -1px;
		}

		&:after {
			content: "\25bc";
			position: absolute;
			right: 0;
			width: $w-l1;
			text-align: center;
			top: 0;
			bottom: 0;
			pointer-events: none;
			color: $primary-500;
			font-size: 80%;
			// now we can build a padding which eats the remaining 20%
			// em is now 0.8 parent-em
			// we want to eat 20% of 1 parent-em -> 0.2 parent-em
			// 1 parent-em = 1.25 em
			// 0.2 parent-em = 0.25 em
			padding-top: 0.25em;
			padding-bottom: 0.25em;
		}

		&:hover {
			border-bottom-color: $primary-700;

			&:after {
				color: $primary-700;
			}
		}

		&:focus-within {
			border-bottom-color: $primary-800;

			&:after {
				color: $primary-800;
			}
		}
	}

	div.avatar-wrap {
		> .avatar {
			margin: 0;
			margin-right: $w-0;
		}
	}

	textarea {
		width: 100%;
		border: none;
		border-bottom: $w-s4 solid $primary-500;
		line-height: 1.5;
	}

	textarea:hover {
		border-bottom-color: $primary-700;
	}

	textarea:focus {
		border-bottom-color: $primary-800;
	}
}

fieldset > ul {
	/* radio group */
	list-style-type: none;
	margin: 0;
	padding: $w-s1 0;
	padding-left: $w-l1;

	> li {
		margin: 0;
		padding: 0;
	}
}


/* icon support */

svg.icon {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}


/* form buttons */

input[type="submit"], button, .button {
	margin: 0 $w-s2;
	padding: $w-s3 $w-s1;
	line-height: 1.5;
	display: inline-block;

	td & {
		margin: 0 $w-s4;
		padding: $w-s4 $w-s2;
	}

	& > svg.icon:first-child {
		margin-right: $w-s2;

		td & {
			margin-right: $w-s3;
		}
	}

	& > svg.icon:last-child {
		margin-right: 0;
		margin-top: -$w-s4;

		td & {
			margin-right: 0;
		}
	}
}

a.button {
	text-decoration: none;
	cursor: default;
}

input[type="submit"], button, .button {
	&.primary {
		background: linear-gradient(0deg, $primary-500, $primary-600);
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
		color: white;
		border: none;
		/* TODO: fix vertical rhyhtm ... */
		border-radius: $w-s4;
		// border: $w-s4 solid transparent;

		&:hover, &:focus {
			background: linear-gradient(0deg, $primary-600, $primary-700);
			color: white;
		}

		&:active {
			background: $primary-500;
			box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
			color: white;
		}

		&.accent {
			background: linear-gradient(0deg, $accent-500, $accent-600);
			color: $accent-900;

			&:hover, &:focus {
				background: linear-gradient(0deg, $accent-600, $accent-700);
			}

			&:active {
				background: $accent-500;
			}
		}

		&.danger {
			background: linear-gradient(0deg, $alert-500, $alert-600);
			color: $alert-900;

			&:hover, &:focus {
				background: linear-gradient(0deg, $alert-600, $alert-700);
			}

			&:active {
				background: $alert-500;
			}
		}
	}

	&.secondary {
		background: linear-gradient(0deg, $gray-600, $gray-700);
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
		color: $gray-200;
		border: none;
		/* TODO: fix vertical rhyhtm ... */
		border-radius: $w-s4;
		// border: $w-s4 solid transparent;

		&:hover, &:focus {
			background: linear-gradient(0deg, $gray-700, $gray-800);
			color: black;
		}

		&:active {
			background: $gray-600;
			box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
			color: black;
		}

		&.accent {
			background: linear-gradient(0deg, $accent-600, $accent-700);
			color: $accent-200;

			&:hover, &:focus {
				background: linear-gradient(0deg, $accent-700, $accent-800);
			}

			&:active {
				background: $accent-600;
			}
		}

		&.danger {
			background: linear-gradient(0deg, $alert-600, $alert-700);
			color: $alert-200;

			&:hover, &:focus {
				background: linear-gradient(0deg, $alert-700, $alert-800);
			}

			&:active {
				background: $alert-600;
			}
		}
	}

	&.tertiary, .tertiary {
		background-color: transparent;
		color: $gray-100;
		border: none;
		text-decoration: underline;
		/* TODO: fix vertical rhyhtm ... */
		border-radius: $w-s4;

		&:hover {
			background-color: $gray-900;
			border-color: $gray-800;
			color: black;
		}

		&.accent {
			text-decoration-color: $accent-500;

			&:hover {
				background-color: $accent-900;
				border-color: $accent-800;
				color: black;
			}
		}

		&.danger {
			text-decoration-color: $alert-500;

			&:hover {
				background-color: $alert-900;
				border-color: $alert-800;
				color: black;
			}
		}
	}

	&.fullwidth {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}



/* boxes */

.box {
	display: block;
	/* border-width: $w-s4 / 2;
	border-style: solid; */
	padding: $w-l1 /* - $w-s4 / 2; */;
	margin: $w-l1;
	border-radius: $w-s4;

	border-color: $gray-200;
	background-color: white;
	color: $gray-100;

	@extend .el-1;

	@each $type, $colour in $box-types {
		&.#{$type} {
			border-color: nth(map-get($colours, $colour), 2);
			background-color: nth(map-get($colours, $colour), 9);
			color: nth(map-get($colours, $colour), 1);
		}
	}
}

.box > header {
	font-weight: bold;
	display: block;
	margin-bottom: $w-l1;
	line-height: 1.5;
	color: black;
}

.box > p:last-child {
	margin-bottom: 0;
}

.box.slim {
	& > header {
		display: inline;
		margin: 0;
	}

	& > header:after {
		content: ':';
	}

	& > p {
		display: inline;
		margin: 0;
	}
}

/* avatar */

.avatar {
	display: inline-block;
	font-size: $_top-h-size;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-size: cover;
	border-radius: 10%;

	margin: 0 0.25em;

	@media screen and (max-width: $small-screen-threshold) {
		font-size: $_top-h-small-size;
	}

	text-align: center;

	& > span:before {
		color: $gray-900;
		content: attr(data-avatar-char);
	}
}

nav.usermenu > .avatar {
	/* we can increase the size to the size of the h1 here */

}

/* login page specials */

body#login {
	.form {
		font-size: nth($h-sizes, 5);
	}

	.form-title {
		color: $primary-200;
		font-size: nth($h-sizes, 5);
	}

	h1 {
		@include snikket-logo;
		padding-left: 2em;
		background-position: 0 0em;
	}
}


/* admin area specials */

#topbar > div.admin-note {
	color: $alert-400;
	font-size: nth($h-sizes, 5);
	margin-left: $w-l1;
}

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

td, th {
	padding: $w-s1;
}

th {
	text-align: left;
}

div.elevated {
	margin: $w-l1;
	padding: $w-l1;
	background-color: white;
}

div.elevated > *:first-child {
	margin-top: 0;
}

div.elevated > *:last-child {
	margin-bottom: 0;
}

.long-url-link {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.link-col {
	width: $w-l6;
}

#clipboard-result + span {
	display: none;
}

ul.inline {
	display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;

	> li {
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	> li:before {
		content: ', ';
	}

	> li:first-child:before {
		content: '';
	}
}

.nowrap {
	white-space: nowrap;
}


/* welcome screen specials */

#home main {
	> h1, > p {
		text-align: center;
	}
}

nav.welcome {
	> ul {
		display: flex;
		flex-wrap: wrap;
		list-style-type: none;
		padding: 0;
		justify-content: center;

		> li {
			@extend .el-3;
			background-color: white;

			flex: 1 0 $w-l7;
			margin: $w-s1;
			padding: $w-s1 $w-l1;
			text-align: center;
			max-width: $w-l8;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&.wide {
				flex: 1 0 auto;
				/* display: block; */
			}

			.button {
				display: block;
				margin: $w-l1 0;
			}

			img {
				display: block;
				margin: $w-l1 $w-0;
				--margin: $w-0 * 2;
				width: calc(100% - var(--margin));
			}

			p {
				margin-left: $w-0;
				margin-right: $w-0;
			}
		}
	}
}

div.profile-card {
	display: flex;
	flex-direction: row;
	margin: $w-l1 0;
	text-align: left;

	> div.picture {
		flex: 0 0 auto;
	}

	> div.details {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;

		> .display-name {
			font-size: nth($h-small-sizes, 5);
			line-height: 1.5 / (nth($h-small-sizes, 5) / 100%);
		}

		> .address {
			display: flex;
			flex-direction: row;

			> input {
				flex: 1 1 auto;
				background-color: transparent;
				border: none;
				padding: 0;
				margin: 0;
				min-width: 0;
				width: 0;
			}

			> .button {
				flex: 0 0 auto;
				margin: 0;
			}
		}
	}
}


/* linearisation / responsive stuff */

@media screen and (max-width: $medium-screen-threshold) {
	.form.layout-expanded {
		margin-left: 0;
		margin-right: 0;
	}

	div.elevated, main > div.box {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (max-width: $small-screen-threshold) {
	.form.layout-expanded .box {
		margin-left: 0;
		margin-right: 0;
	}

	.box > ul  {
		padding-left: $w-0;
	}


	th.collapsible, td.collapsible {
		display: none;
	}

	#topbar.admin {
		> header {
			text-decoration: underline;
			text-decoration-color: $alert-500;
		}

		> div.admin-note {
			display: none;
		}
	}


	input[type="submit"], button, .button {
		&.slimmify {
			> svg.icon {
				margin-right: 0;
			}

			> span {
				position: absolute;
				width: 1px;
				height: 1px;
				overflow: hidden;
				top: -100px;
			}
		}
	}
}

/* clipboard button */

.copy-to-clipboard {
	cursor: pointer;
	font-style: normal;
	text-decoration: none;
}

body.no-copy .copy-to-clipboard {
	display: none !important;
}


/* magic */

pre.guru-meditation {
	width: 100%;
	overflow-x: scroll;
}


/* dark mode */

@media (prefers-color-scheme: dark) {
	a {
		color: $primary-600;
	}
	a:visited {
		color: $primary-800;
	}

	body {
		color: $gray-900;
		background-color: $gray-100;
	}

	@for $n from 1 through 6 {
		h#{$n} {
			color: $primary-900;
		}
	}

	div#topbar {
		background-color: black;
		color: $primary-900;

		> header {
			color: white;
		}
	}

	body#login {
		.form-title {
			color: $primary-800;
		}
	}

	body > footer {
		background-color: $gray-200;
		color: $gray-800;
	}

	div.form {
		background-color: black;
	}

	div.form.layout-expanded {
		label {
			color: $gray-900;
		}

		textarea {
			background-color: black;
		}

		@each $type in $text-entry-inputs {
			input[type=#{$type}] {
				background-color: black;
			}

			input[type="radio"]:checked + label:before {
				box-shadow: inset 0 0 0 $w-s3 black;
			}
		}
	}

	label, legend {
		color: $gray-800 !important;
	}

	.box {
		background-color: black;
		border-color: $gray-800;
		color: $gray-900;

		@each $type, $colour in $box-types {
			&.#{$type} {
				border-color: nth(map-get($colours, $colour), 9);
				background-color: nth(map-get($colours, $colour), 2);
				color: nth(map-get($colours, $colour), 9);
			}
		}

		> header {
			color: white;
		}
	}

	nav.welcome {
		> ul {
			> li {
				background-color: black;
			}
		}
	}

	div.elevated {
		background-color: black;
	}

	input[type="submit"], button, .button {
		&.primary {
			background: linear-gradient(0deg, $primary-300, $primary-400);

			&:hover, &:focus {
				background: linear-gradient(0deg, $primary-400, $primary-500);
			}

			&:active {
				background: $primary-300;
			}

			&.accent {
				background: linear-gradient(0deg, $accent-300, $accent-400);

				&:hover, &:focus {
					background: linear-gradient(0deg, $accent-400, $accent-500);
				}

				&:active {
					background: $accent-300;
				}
			}

			&.danger {
				background: linear-gradient(0deg, $alert-300, $alert-400);

				&:hover, &:focus {
					background: linear-gradient(0deg, $alert-400, $alert-500);
				}

				&:active {
					background: $alert-300;
				}
			}
		}

		&.secondary {
			background: linear-gradient(0deg, $gray-200, $gray-300);
			color: $gray-900;

			&:hover, &:focus {
				background: linear-gradient(0deg, $gray-300, $gray-400);
				color: white;
			}

			&:active {
				background: $gray-400;
				color: $gray-900;
			}

			&.accent {
				background: linear-gradient(0deg, $accent-200, $accent-300);
				color: $accent-800;

				&:hover, &:focus {
					background: linear-gradient(0deg, $accent-300, $accent-400);
				}

				&:active {
					background: $accent-200;
				}
			}

			&.danger {
				background: linear-gradient(0deg, $alert-200, $alert-300);
				color: $alert-800;

				&:hover, &:focus {
					background: linear-gradient(0deg, $alert-300, $alert-400);
				}

				&:active {
					background: $alert-200;
				}
			}
		}

		&.tertiary, .tertiary {
			color: $gray-800;

			&:hover {
				background-color: $gray-200;
				border-color: $gray-100;
				color: white;
			}

			&.accent:hover {
				background-color: $accent-200;
				border-color: $accent-100;
				color: white;
			}

			&.danger:hover {
				background-color: $alert-200;
				border-color: $alert-100;
				color: white;
			}
		}
	}

	p.form-desc.weak, p.field-desc.weak {
		color: $gray-700;
	}

	.user-badge-icon {
		color: $gray-900 !important;
		background-color: $gray-100 !important;
		border-color: $gray-300 !important;
		box-shadow: black 0 0 2px !important;
	}
}

/* tooltip magic */

.with-tooltip {
	position: relative;
	text-decoration: underline;
	text-decoration-style: dotted;
}

.with-tooltip:before {
	content: attr(data-tooltip); /* here's the magic */
	position: absolute;
	font-size: 87.05505633%;

	/* vertically center */
	bottom: 100%;
	transform: translateX(-50%);
	left: 50%;
	margin-bottom: $w-s2;

	/* basic styles */
	width:$w-l7;
	padding: $w-s1;
	background: black;
	color: $gray-900;
	text-align: center;

	display: none;
}

.with-tooltip:after {
	content: "";
	position: absolute;

	bottom: 100%;
	transform: translateX(-50%);
	left: 50%;
	margin-bottom: -$w-s1;

	/* the arrow */
	border: 10px solid black;
	border-color: black transparent transparent transparent;

	display: none;
}

.with-tooltip:hover:before, .with-tooltip:hover:after {
	display: block;
}

.username-with-avatar {
	display: flex;
	align-items: center;

	.avatar-container {
		position: relative;

		.avatar {
			margin-left: 0;
		}
	}

	.user-badge-icon {
		position: absolute;
		bottom: -10px;
		right: 0px;
		background: white;
		border-radius: 50%;
		width: 1.2em;
		height: 1.2em;
		border-color: $gray-500;
		border-width: 1px;
		border-style: solid;
		text-align: center;
		margin: 0;
		padding: 0;
		margin: 0;
		padding: 0;
		box-shadow: $gray-500 0px 0px 2px;

		line-height: 1;
		.icon {
			/* vertical-align: text-bottom; */
			padding: 0.1em;
		}
	}

	.user-info-container {
		margin-left: 0.5em;
	}

	.user-display-name {
		font-size: 110%;
	}

	.user-jid {
		font-size: 90%;
	}
}