zer0bin/frontend/style/style.scss

$love: #eb6f92;
$gold: #f6c177;
$rose: #ebbcba;
$pine: #31748f;
$foam: #9ccfd8;
$iris: #c4a7e7;
$text: #e0def4;
$subtle: #908caa;
$muted: #6e6a86;
$highlight: #403d52;
$bg_base: #191724;
$bg_surface: #1f1d2e;
$bg_trans: rgba(31, 29, 46, 0.8);
$font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
	Consolas, "Liberation Mono", "Courier New", monospace;

@import "./font.scss";

@keyframes rainbow {
	0%,
	100% {
		background-position: 0 0;
	}
	50% {
		background-position: 100% 0;
	}
}
.fadeOut {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 3s, opacity 2s linear;
}
body {
	height: 100%;
	background-color: $bg_base;
	margin: 0;
}
html {
	height: 100%;
}
pre {
	margin: 0;
}
@mixin selection {
	::-moz-selection {
		@content;
	}
	::selection {
		@content;
	}
}
@include selection {
	color: $text;
	background: $highlight;
}
.noselect {
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.wrapper .scroll-content {
	display: flex;
}
.scrollbar-container {
	height: 100%;
}
.wrapper {
	display: flex;
	padding: 1rem 0.5rem;
	font-size: 1rem;
}
.text-area-proper {
	height: calc(100% - 2rem);
}
.line-numbers {
	color: $subtle;
	font-family: $font-mono;
	text-align: end;
	user-select: none;
	font-size: 15px;
	padding-right: 11px;
	line-height: 1.5em;
}
#code-view-pre {
	font-family: $font-mono;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 15px;
	-webkit-text-size-adjust: none;
	line-height: 1.5em;
}
#code-view {
	font-family: $font-mono;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.5em;
}
.viewcounter {
	font-size: 12px;
	font-family: $font-mono;
	margin-top: 0px;
	margin-bottom: 0px;
}
#viewcounter-label {
	color: $subtle;
}
#viewcounter-count {
	color: $rose;
}
code {
	color: $text;
}
textarea {
	background-color: transparent;
	resize: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: 0;
	color: $text;
	font-family: $font-mono;
	font-size: 15px;
}
.button-wrapper {
	position: fixed !important;
	top: 0;
	right: 0;
	padding: 0.7rem 0.7rem 0.5rem 0.7rem;
	background-color: $bg_surface;
	border-bottom-left-radius: 10px;
	z-index: 10;
	transition: opacity 0.2s, visibility 0.2s;
}
.buttons {
	display: flex;
	> * {
		+ {
			* {
				padding: 0.1rem 0.1rem 0.1rem 0.1rem;
			}
		}
	}
}
a {
	color: $pine;
	&:visited {
		color: $iris;
	}
	&:hover {
		&:not(.logo) {
			color: $foam;
		}
	}
}
.btn {
	cursor: pointer;
	background: 0 0;
	color: $foam;
	padding: 5px 5px 5px 5px;
	font-size: 1rem;
	border: none;
	transition: background-color 0.2s ease-in-out;
	display: inline-block;
	text-decoration: none;
	&:hover {
		color: $text;
	}
	&:disabled {
		color: $muted;
	}
	transition: all 0.2s ease-in;
}
.btn[disabled] {
	color: $muted;
	cursor: auto;
}
.bottom-button-wrapper {
	position: fixed !important;
	bottom: 0;
	right: 0;
	padding: 1rem 1rem 0.5rem 1rem;
	z-index: 10;

	.btn {
		color: $muted;
		&:hover {
			color: $gold;
		}
	}
}
.keybind {
	color: $subtle;
	font-size: 11px;
	font-family: $font-mono;
}
.logo {
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	width: 100%;
	font-family: $font-mono;
	display: inline-block;
	background: linear-gradient(
		to right,
		$love,
		$gold,
		$rose,
		$pine,
		$foam,
		$iris
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: rainbow 120s linear infinite;
	background-size: 400% 100%;
	&:hover {
		animation: rainbow 3s ease infinite !important;
	}
}
.markdown {
	color: $iris;
}
.fire {
	color: $love;
}
// $dur: 1s;
// $blur: 0.02em;
// $fireRad: 3em;
// $parts: 20;
// $partSize: 5em;
// .fireBody {
// 	font-size: 3px;
// 	filter: blur($blur);
// 	-webkit-filter: blur($blur);
// 	margin: 2em auto 0 auto;
// 	position: absolute;
// 	width: 6em;
// 	height: 5em;
// 	z-index: 0;
// 	opacity: 0.5;
// }
// .particle {
// 	animation: rise $dur ease-in infinite;
// 	background-image: radial-gradient($love 100%, $love 100%);
// 	border-radius: 50%;
// 	mix-blend-mode: screen;
// 	opacity: 0;
// 	position: absolute;
// 	bottom: 0;
// 	width: $partSize;
// 	height: $partSize;
// 	@for $p from 1 through $parts {
// 		&:nth-of-type(#{$p}) {
// 			animation-delay: $dur * random();
// 			left: calc((100% - #{$partSize}) * calc(($p - 1) / $parts));
// 		}
// 	}
// }
// @keyframes rise {
// 	from {
// 		opacity: 0;
// 		transform: translateY(0) scale(1);
// 	}
// 	25% {
// 		opacity: 1;
// 	}
// 	to {
// 		opacity: 0;
// 		transform: translateY(-10em) scale(0);
// 	}
// }
#messages {
	position: absolute;
	top: 0;
	right: 168px;
	z-index: 1000;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 400px;
	li {
		background-color: $bg_trans;
		font-size: 13px;
		font-family: $font-mono;
		color: $text;
		padding: 7px;
	}
}
@media only screen and (hover: none) and (pointer: coarse) {
	.button-wrapper {
		opacity: 0.8;
	}
}