bijou.css

/* Bijou.css library. Copyright GPL 3.0 @Explosion-Scratch */
:root {
	--background: #fff;
	--text: #333;
	--box-shadow-spread: 5px;
	--box-shadow: #0002;
	--box-shadow-blur: 0px;
	--border-color: lightgrey;
	--success-color: rgb(21, 163, 16);
	--success-color-hover: rgb(16, 116, 16);
	--error-color: rgb(212, 72, 47);
	--error-color-hover: rgb(180, 52, 30);
	--hr-color: lightseagreen;
	--slow-transition: 3s;
	--medium-transition: 0.5s;
	--fast-transition: 0.3s;
	--monospace-font: "Courier New";
	--main-font: "Poppins", sans-serif;
	--padding: 10px;
	--large-padding: 20px;
	--margin-top: 10px;
	--margin-bottom: 10px;
	--margin-left: 10px;
	--margin-right: 10px;
}
/* Initial styles */
.initial-styles,
.initial-styles * {
	color: var(--text);
	background: var(--background);
	font-family: var(--main-font);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/* Box shadows and soon more general stylings */
.box-shadow-focus:focus {
	outline: none;
	box-shadow: 0 0 var(--box-shadow-blur) var(--box-shadow-spread)
		var(--box-shadow);
}
.box-shadow-hover:hover {
	box-shadow: 0 0 var(--box-shadow-blur) var(--box-shadow-spread)
		var(--box-shadow);
}
/* General elements */
.border-radius {
	border-radius: 10px;
}
.monospace {
	font-family: var(--monospace-font), Courier, monospace;
}
.full-height {
	min-height: 100vh;
}
.light-border {
	border: 1px solid var(--border-color);
}
.border {
	border: 2px solid var(--border-color);
}
.padding {
	padding: var(--padding);
}
.large-padding {
	padding: var(--large-padding);
}
.margin-top {
	margin-top: var(--margin-top);
}
.margin-bottom {
	margin-bottom: var(--margin-bottom);
}
.margin-left {
	margin-left: var(--margin-left);
}
.margin-right {
	margin-right: var(--margin-right);
}
.margin {
	margin: 5px;
}
.hr {
	display: block;
	width: 100%;
	height: 2px;
	border: none;
	outline: none;
	background: linear-gradient(
		to right,
		transparent,
		var(--hr-color),
		transparent
	);
}
/* Flex */
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}
.flex-column {
	flex-direction: column;
}
.absolute.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.fixed.center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block.center {
	margin: 0 auto;
	display: block;
}
.fit-content-height {
	height: fit-content;
}
.fit-content-width {
	width: fit-content;
}
.fill-viewport {
	width: 80vw;
	max-width: 600px;
	height: fit-content;
}
.header {
	text-align: center;
	font-weight: 900;
	font-size: 5vmin;
}
.float-right {
	float: right;
}
.float-left {
	float: left;
}
.inline-code {
	font-family: var(--monospace-font), Courier, monospace;
	padding: 4px;
	display: inline-block;
	max-width: 90%;
	overflow: scroll;
	white-space: pre;
	border-radius: 5px;
	background: #fff3;
}
/* Transition effects */
.transition-bg {
	transition-property: background-color;
}
.transition-shadow {
	transition-property: box-shadow;
}
.transition-bg.transition-shadow {
	transition-property: background-color, color, box-shadow;
}
.transition-bg.transition-shadow.transition-border {
	transition-property: background-color, color, box-shadow, border;
}
.transition-slow {
	transition-duration: var(--slow-transition);
}
.transition-medium {
	transition-duration: var(--medium-transition);
}
.transition-fast {
	transition-duration: var(--fast-transition);
}
.transition-ease {
	transition-property: ease;
}
.transition-linear {
	transition-property: linear;
}
.transition-bounce {
	transition-property: cubic-bezier(0.175, 0.885, 0.32, 1.675);
}
/* Button styling */
.border-button {
	padding: 10px 15px;
	text-decoration: none;
	color: var(--text);
	background: transparent;
	border-radius: 5px;
	border: 1px solid var(--border-color);
}
.border-button:hover {
	box-shadow: 0 0 var(--box-shadow-blur) var(--box-shadow-spread)
		var(--box-shadow);
}
.button {
	display: inline-block;
	padding: 10px 15px;
	text-decoration: none;
	color: var(--background);
	background: var(--text);
	border-radius: 5px;
	border-color: transparent;
}
.button:disabled,
.button.disabled {
	opacity: 0.5;
}
.button:hover {
	background: var(--background);
	color: var(--text);
	border-color: var(--border-color);
}
.button.error {
	background-color: var(--error-color);
}
.button.error:hover {
	background-color: var(--error-color-hover);
	color: var(--background);
}
.button.success {
	background-color: var(--success-color);
	border-color: var(--success-color-hover);
}
.button.success:hover {
	background-color: var(--success-color-hover);
	border-color: var(--success-color);
	color: var(--background);
}
/* Inputs */
.input {
	padding: 10px;
	background-color: var(--background-color);
	border-color: var(--border-color);
	border-radius: 5px;
}
.select {
	padding: 10px;
	border-radius: 5px;
	background: var(--background);
	border-color: var(--border-color);
}