aubade/styles/code.css

filesystem-based content processor

:root {
	--font-default: 'Karla Variable', 'Karla', system-ui, sans-serif;
	--font-monospace: 'Fira Code Variable', 'Fira Code', 'Inconsolata', monospace;

	--aubade-tab-size: 2;
	--aubade-rounding: 0.3rem;

	--aubade-primary: #0070bb;
	--aubade-background: #2d2d2d;
	--aubade-overlay: #f7f7f7;
	--aubade-text: #dadada;
}

[data-aubade='block'],
[data-aubade='header'],
[data-aubade='pre'] {
	width: 100%;
	position: relative;
	tab-size: var(--aubade-tab-size);

	--aubade-header: #525252;
	--aubade-bounce: 4rem;
	--aubade-transition: 150ms;
	--aubade-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
[data-aubade='block'] {
	white-space: normal;
	margin-top: 1rem;
}
[data-aubade='pre'] {
	white-space: pre;
}
code {
	position: relative;
	top: -0.075rem;
	padding: 0.15rem 0.3rem;
	margin: 0 0.1rem;
	border-radius: var(--aubade-rounding);
	background: var(--aubade-background);
	color: var(--aubade-text);
	line-height: 1.5;
	font-size: 0.8em; /* em - relative to wrapper */
	white-space: nowrap;
}

/* ---- <div data-aubade="pre"> ---- */

[data-aubade='pre'] {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1.8rem 1rem 1rem 1.6rem;
	border-bottom-left-radius: var(--aubade-rounding);
	border-bottom-right-radius: var(--aubade-rounding);
	background: var(--aubade-background);
	color: var(--aubade-text);
	font-family: var(--font-monospace);
}
[data-aubade='pre'] code {
	top: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
	white-space: pre;
}
[data-aubade='pre'],
[data-aubade='pre'] code {
	line-height: 1.5;
	font-size: 0.85rem;
}

[data-aubade='pre'].numbered {
	padding-left: 0.6rem;
}
[data-aubade='pre'].numbered code::before {
	content: attr(data-line);
	max-width: 2rem;
	width: 100%;
	display: inline-flex;
	justify-content: flex-end;
	margin-right: 0.6rem;
	color: gray;
	letter-spacing: normal;
}

/* header check */
[data-aubade='header'].empty + [data-aubade='pre'] {
	padding-top: 2rem;
}
[data-aubade='header'][data-language='']:not(.empty) + [data-aubade='pre'] {
	padding-top: 1rem;
}
[data-aubade='header'].empty + [data-aubade='pre'] {
	border-top-right-radius: var(--aubade-rounding);
	border-top-left-radius: var(--aubade-rounding);
}

/* ---- <header data-aubade="header"> ---- */

[data-aubade='header'] {
	padding: 0.5rem 1rem;
	margin: 0;
	border-top-right-radius: var(--aubade-rounding);
	border-top-left-radius: var(--aubade-rounding);
	background-color: var(--aubade-header);
	color: #fff;
	font-weight: 300;
	font-family: var(--font-monospace);
	font-size: clamp(0.8rem, 2vw, 0.95rem);
}
[data-aubade='header'].empty {
	padding: 0;
	background: transparent;
}
[data-aubade='header'].empty::after {
	top: 0;
	border-top-right-radius: var(--aubade-rounding);
}
[data-aubade='header']::after,
[data-aubade='header']::before {
	font-family: var(--font-default);
	font-size: 0.75rem;
}
[data-aubade='header'] > span {
	overflow: hidden;
	width: 100%;
	display: inline-flex;
}
/* language coloured line */
[data-aubade='header']::before {
	content: '';
	z-index: 1;
	height: 0.4rem;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;

	transition: var(--aubade-transition);
	transition-timing-function: var(--aubade-function);
}
[data-aubade='header'].empty::before {
	height: 0.6rem;
	top: 0;
	border-top-left-radius: var(--aubade-rounding);
	border-top-right-radius: var(--aubade-rounding);
}

[data-aubade='block']:focus-within > [data-aubade='header']::before,
[data-aubade='block']:hover > [data-aubade='header']::before {
	right: var(--aubade-bounce);
	transition: var(--aubade-transition);
}
[data-aubade='block']:focus-within > [data-aubade='header'].empty[data-language='']::before,
[data-aubade='block']:hover > [data-aubade='header'].empty[data-language='']::before {
	right: 0;
}

/* ---- data-language ---- */

[data-aubade='header'] {
	--aubade-header-dark: #323330;
	--aubade-header-light: #feefe8;
}

[data-aubade='header']::after {
	z-index: 1;
	position: absolute;
	top: 100%;
	right: 0;
	padding: 0.5rem 0.7rem 0.4rem;
	font-weight: 500;
	text-indent: 0.2rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	border-bottom-left-radius: 2px;
	transition: var(--aubade-transition);
	transition-timing-function: var(--aubade-function);
}
[data-aubade='header'][data-language]::after {
	content: attr(data-language);
}
[data-aubade='block']:focus-within > [data-aubade='header']::after,
[data-aubade='block']:hover > [data-aubade='header']::after {
	right: var(--aubade-bounce);
	border-bottom-right-radius: var(--aubade-rounding);
	border-bottom-left-radius: var(--aubade-rounding);
	transition: var(--aubade-transition);
}
[data-aubade='header'][data-language='']:not(.empty)::after,
[data-aubade='header'][data-language='']:not(.empty)::before {
	content: none;
}
[data-aubade='header'][data-language='']::before {
	background: var(--aubade-header);
}

/* Language Styles */
[data-aubade='header'][data-language='bash']::after,
[data-aubade='header'][data-language='bash']::before {
	background: #363377;
	color: #a2a0d6;
}
[data-aubade='header'][data-language='css']::after,
[data-aubade='header'][data-language='css']::before {
	background: #264de4;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='htaccess']::after,
[data-aubade='header'][data-language='htaccess']::before {
	background: #8bc34a;
	color: var(--aubade-header-dark);
}
[data-aubade='header'][data-language='html']::after,
[data-aubade='header'][data-language='html']::before {
	background: #e34f26;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='java']::after,
[data-aubade='header'][data-language='java']::before {
	background: #f89820;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='javascript']::after,
[data-aubade='header'][data-language='javascript']::before,
[data-aubade='header'][data-language='json']::after,
[data-aubade='header'][data-language='json']::before,
[data-aubade='header'][data-language='js']::after,
[data-aubade='header'][data-language='js']::before {
	background: #f0db4f;
	color: var(--aubade-header-dark);
}
[data-aubade='header'][data-language='markdown']::after,
[data-aubade='header'][data-language='markdown']::before,
[data-aubade='header'][data-language='md']::after,
[data-aubade='header'][data-language='md']::before {
	background: #083fa1;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='python']::after,
[data-aubade='header'][data-language='python']::before {
	background: #dddddd;
	color: var(--aubade-header-dark);
}
[data-aubade='header'][data-language='shell']::after,
[data-aubade='header'][data-language='shell']::before {
	background: #f3e2bb;
	color: #c09022;
}
[data-aubade='header'][data-language='svelte']::after,
[data-aubade='header'][data-language='svelte']::before {
	background: #ff3e00;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='terminal']::after,
[data-aubade='header'][data-language='terminal']::before {
	background: #dddddd;
	color: var(--aubade-header-dark);
}
[data-aubade='header'][data-language='typescript']::after,
[data-aubade='header'][data-language='typescript']::before,
[data-aubade='header'][data-language='ts']::after,
[data-aubade='header'][data-language='ts']::before {
	background: #3178c6;
	color: var(--aubade-header-light);
}
[data-aubade='header'][data-language='yaml']::after,
[data-aubade='header'][data-language='yaml']::before {
	background: #000000;
	color: var(--aubade-header-light);
}

/* ---- <div data-aubade="toolbar"> ---- */

[data-aubade='toolbar'] {
	z-index: 2;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0.25rem;
	display: grid;
	gap: 0.25rem;
	grid-auto-flow: column;
	transition: var(--aubade-transition);
	transform: translateY(-50%);
}

[data-aubade='header'].empty [data-aubade='toolbar'] {
	transform: translateY(50%);
}
[data-aubade='header'].empty:not([data-language='']) [data-aubade='toolbar'] {
	transform: translateY(10%);
}
[data-aubade='header']:not([data-language='']):not(.empty) [data-aubade='toolbar'] {
	top: 100%;
	transform: translateY(10%);
}

[data-aubade='block']:focus-within [data-aubade='toolbar'],
[data-aubade='block']:hover [data-aubade='toolbar'] {
	opacity: 1;
}

[data-aubade='toolbar'] > [data-aubade-toolbar] {
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	border-radius: 50%;
	color: var(--aubade-primary);
	text-align: center;
	font-size: 0.7rem;
	background-color: var(--aubade-overlay);
	background-size: contain;
	background-repeat: no-repeat;
	background-origin: content-box;
}

[data-aubade-toolbar]:focus {
	outline: 1px solid rgba(255, 255, 255, 0.4);
}
[data-aubade-toolbar] > [data-aubade='tooltip'] {
	user-select: none;
	position: absolute;
	bottom: 2rem;
	display: none;
	padding: 0.3rem 0.6rem;
	border-radius: calc(var(--aubade-rounding) * 2);
	background-color: #7c7c7c;
	color: #ffffff;
	transition: var(--aubade-transition);
}
[data-aubade-toolbar] > [data-aubade='tooltip']::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #7c7c7c transparent transparent transparent;
	transform: translateY(99%);
}
[data-aubade-toolbar]:focus > [data-aubade='tooltip'],
[data-aubade-toolbar]:hover > [data-aubade='tooltip'] {
	display: inline-flex;
}

/* toolbar icons */
[data-aubade-toolbar='clipboard'] {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230070bb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
}
[data-aubade-toolbar='list'] {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230070bb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E");
}