src/popup.css
/**

    Copyright 2019 Google LLC

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

*/

:root {
	/* typography */
	font-size: 18px;
	--t1: 1rem;
	--t2: 0.75rem;
	--t3: 0.625rem;
	/* sizing */
	--extension-width: 19rem;
	--unit-height: 3rem;
	--footer-height: 1.5rem;
	--item-padding: 0.5rem 1rem;
	--item-padding-tall: 0.75rem 1rem;
	--item-padding-taller: 1rem 1rem;
	--spacing-unit: 1rem;
	--spacing-unit-half: 0.5rem;
	/* colors */
	--bg-main: #2f3137;
	--bg-alt: #1c1d23;
	--bg-input: hsla(240, 9%, 16%, 1);
	--separator: #1a1a1a;
	--shadow: #000000;
	--accent-shadow: #4c00ff;
	--text-p1: #ffffff;
	--text-p2: #efefef;
	--text-p3: hsla(212, 5%, 80%, 1);
	--gray-0: hsla(230, 4%, 68%, 1);
	--gray-1: #6d7278;
	--gray-2: #4b4e5b;
	--accent: #44d7b6;
	--code: #f0d6b4;
	--destructive: #e57880;
	--magic: linear-gradient(
			135deg,
			rgba(16, 205, 103, 1),
			rgba(16, 205, 103, 0) 55%
		),
		linear-gradient(225deg, rgba(251, 208, 0, 1), rgba(251, 208, 0, 0) 70%),
		linear-gradient(
			315deg,
			rgba(210, 46, 237, 1),
			rgba(210, 46, 237, 0) 55%
		),
		linear-gradient(45deg, rgba(83, 59, 230, 1), rgba(83, 59, 230, 0) 95%),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 1),
			rgba(255, 255, 255, 1) 100%
		);
	/* transitions */
	--speed-1: 0.25s;
	--speed-2: 0.4s;

	/* default font axis values */
	--mono: 0;
	--casl: 0;
	--wght: 400;
	--slnt: 0;
	--ital: 0.5;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-main: hsl(230, 3%, 98%);
		--bg-alt: hsl(230, 3%, 93%);
		--bg-input: hsl(230, 3%, 94%);
		--separator: hsl(0, 0%, 80%);
		--shadow: #000000;
		--accent-shadow: #0050ff;
		--text-p1: #333;
		--text-p2: #444;
		--text-p3: #555;
		--gray-0: hsla(230, 3%, 55%, 1);
		--gray-1: hsla(230, 3%, 76%, 1);
		--gray-2: hsla(230, 3%, 91%, 1);
		--accent: #0050ff;
		--code: #2f5bbb;
		--destructive: hsla(0, 80%, 50%, 1);
	}
}

@font-face {
	/* TODO: load this from JavaScript through FontFaceSet
    so we can re-use recursive-fonts.js */
	font-family: "Recursive";
	src: url("./fonts/Recursive_VF_1.066.woff2");
}

* {
	font-family: "Recursive";
	box-sizing: border-box;
	font-variation-settings: "MONO" var(--mono), "CASL" var(--casl),
		"wght" var(--wght), "slnt" var(--slnt), "ital" var(--ital);
}

body {
	background: var(--bg-alt);
	color: var(--text-p1);
	width: var(--extension-width);
	margin: 0;
	min-height: var(--unit-height);
}

.select-font-button,
button {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	background: none;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	cursor: pointer;
	color: inherit;
}

.button {
	border-radius: 1rem;
}

.button-flex span {
	display: flex;
	align-items: center;
}

/* Global styles */

.all-caps {
	--casl: 1;
	--wght: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--t3);
}

/* General extension styles (MAIN) */

.main-fonts {
	background: var(--bg-main);
	width: 100%;
	flex: auto;
	margin-top: var(--unit-height);
	margin-bottom: var(--footer-height);
}

svg {
	stroke: var(--gray-0);
}

/* Activate button (HEADER) */

header {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	height: var(--unit-height);
	background: var(--bg-alt);
	box-shadow: 0 1px 0 var(--separator);
}

.activate-fonts {
	text-align: left;
	flex: none;
	font-size: var(--t2);
	padding: 0 var(--spacing-unit);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.toggle-switch-container {
	--casl: 1;
	--wght: 400;
	--slnt: 0;
	color: var(--text-p2);
	transition: color var(--speed-1), font-variation-settings var(--speed-1);
}

.activate-fonts:hover .toggle-switch-container,
.activate-fonts.active .toggle-switch-container {
	--casl: 1;
	--wght: 800;
	--slnt: -15;
	color: var(--text-p1);
}

.activate-fonts > span {
	display: flex;
	align-items: center;
	font-size: 1rem;
}

.toggle-switch {
	position: relative;
	flex: none;
	width: 2rem;
	height: 1rem;
	border-radius: 999px;
	margin-right: 0.5rem;
	background: var(--gray-1);
	transition: background 100ms ease-in-out;
}

.toggle-switch::after,
.toggle-switch::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--text-p1);
	box-shadow: 0 1px 2px var(--shadow);
	transition: left 100ms ease-in-out, opacity 100ms ease-in-out;
}

.activate-fonts.active .toggle-switch {
	background: var(--gray-1);
}

.activate-fonts.active .toggle-switch::before,
.activate-fonts.active .toggle-switch::after {
	opacity: 1;
	left: calc(100% - 1.25em);
}

.toggle-switch::after {
	opacity: 0;
	box-shadow: 0 1px 3px #4c00ff, 0 0 2px #4c00ff;
	background: var(--magic);
}

/* Form stuff */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background: var(--bg-main);
	border-bottom: 1px solid var(--separator);
}

fieldset:not(.show-font-details) {
	height: 3rem;
}

input[type="text"],
textarea,
.variable-slider {
	--mono: 1;
	border: 0;
	outline: 0;
	width: calc(100% + 1rem);
	margin-left: -0.5rem;
	padding: 0.25rem 0.75em;
	line-height: 1.5em;
	border-radius: 0.25rem;
	font-size: var(--t2);
	background: var(--bg-input);
	color: var(--text-p2);
	border: 1px transparent solid;
	margin-bottom: 0.25rem;
}

textarea:last-of-type {
	margin-bottom: 0;
}

input[type="text"] {
	width: calc(100% + 0.5rem);
	background: var(--gray-2);
}

label.all-caps {
	--casl: 0;
	font-size: var(--t3);
	color: var(--text-p3);
	margin-bottom: 0.125rem;
}

textarea {
	resize: vertical;
	color: var(--code);
	margin-top: 0.125rem;
}

input:focus,
textarea:focus {
	outline: none;
}

textarea:focus {
	border: 1px var(--separator) solid;
	background: var(--bg-alt);
}

.variable-sliders-container {
	display: none;
}

.variable-sliders-container.show {
	display: block;
}

.variable-sliders-container.mute {
	opacity: 0.5;
}

.variable-sliders-container.mute input {
	accent-color: var(--gray-2);
	opacity: 0.5;
}

.variable-slider {
	display: flex;
	margin-top: 0.125rem;
}

.variable-slider label {
	min-width: 30%;
	padding-right: var(--spacing-unit-half);
}

.slider-value {
	min-width: 20%;
	padding-left: var(--spacing-unit-half);
	text-align: right;
}

.variable-slider input {
	flex: auto;
}

/* UI contols */
.controls {
	height: calc(var(--unit-height) * 2 / 3);
	background: var(--bg-main);
	padding: 0 var(--spacing-unit);
	display: flex;
	justify-content: space-between;
}

.add-font,
.delete-font,
.controls button {
	flex: none;
	align-self: center;
	text-transform: uppercase;
	padding: 0 var(--spacing-unit-half);
	border-radius: 1rem;
	color: var(--text-p3);
	transition: background var(--speed-2), color var(--speed-2);
	font-size: var(--t2);
	font-weight: 600;
	min-height: 26px;
}

.add-font svg,
.controls button svg {
	stroke: currentColor;
	width: 1em;
	height: 1em;
	margin-right: var(--spacing-unit-half);
}

.add-font:hover,
.delete-font:hover,
.controls button:hover {
	background: var(--bg-alt);
	color: var(--accent);
}

.add-font:hover svg,
.delete-font:hover svg,
.controls button:hover svg {
	stroke: currentColor;
}

.show-blacklist {
	margin-left: calc(var(--spacing-unit-half) * -1);
}

.delete-font,
.full-reset {
	margin-right: calc(var(--spacing-unit-half) * -1);
}

.add-font {
	margin-right: var(--spacing-unit-half);
}

.add-font:hover {
	background: var(--bg-main);
}

.controls .full-reset:hover,
.delete-font:hover {
	background: var(--destructive);
	color: var(--text-p1);
}

@media (prefers-color-scheme: light) {
	.controls .full-reset:hover,
	.delete-font:hover {
		color: var(--bg-main);
	}
}

/* Font */

.font.highlight {
	opacity: 0.5;
}

.select-font {
	display: flex;
	align-items: stretch;
	width: calc(100% + 0.75rem);
	margin-left: -0.5rem;
	margin-bottom: var(--spacing-unit-half);
}

.select-font select {
	flex: auto;
	font-size: inherit;
	border: 0;
	outline: 0;
	border-radius: 0.25rem;
	height: 1.75rem;
	line-height: 1.75rem; /* Prevent cut-off descenders */
	width: 100%;
	-webkit-appearance: none;
	padding: 0 1.5rem 0 0.6rem;
	background: var(--gray-2);
	color: var(--text-p1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l5-5M3 6l5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: calc(100% - 0.5rem) 50%;
	background-repeat: no-repeat;
	background-size: 0.75rem;
}

@media (prefers-color-scheme: light) {
	.select-font select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l5-5M3 6l5 5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

.select-instance {
	margin-top: 0.25rem;
}

.select-font-dropdowns {
	flex: auto;
}

.select-font-button {
	flex: none;
	margin-left: var(--spacing-unit-half);
	padding-left: var(--spacing-unit-half);
	padding-right: var(--spacing-unit-half);
	white-space: nowrap;
	overflow: hidden;
	background: transparent;
	transition: background 0.35s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--gray-0);
	border-radius: 0.25rem;
	text-transform: uppercase;
	font-size: var(--t3);
}

.select-font-button:hover {
	background: var(--bg-alt);
}

.select-font-button svg {
	width: 1.5em;
	height: 1.5em;
	stroke: var(--text-p3);
	transition: stroke var(--speed-2);
}

.select-font-button:hover svg {
	stroke: var(--accent);
}

.select-font-button input {
	opacity: 0;
	height: 0;
	padding: 0;
	display: none;
}

.font-name-title-container {
	display: flex;
	align-items: center;
}

.font-name-title {
	--casl: 1;
	--wght: 500;
	font-size: var(--t1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: var(--spacing-unit-half);
}

.font-name-instance {
	transform: translateY(0.075em);
}

.font-title {
	width: calc(var(--extension-width) - 2 * var(--spacing-unit));
	height: var(--unit-height);
}

.font-title button {
	height: 100%;
	width: 100%;
	text-align: left;
	width: calc(100% + 2 * var(--spacing-unit));
	text-align: left;
	padding: 0 var(--spacing-unit);
}

.font-title svg {
	width: 1em;
	height: 1em;
	margin-left: auto;
	stroke: currentColor;
	flex: none;
	margin-right: -0.25em; /* Nicer optical alignment */
}

.font-title:hover path {
	stroke: var(--accent);
}

.show-font-details .font-title svg {
	transform: rotate(90deg);
}

.show-font-details .font-title path {
	stroke: var(--accent);
}

.font-details {
	display: none;
}

.show-font-details .font-details {
	display: block;
	padding: var(--spacing-unit);
	padding-top: 0;
	padding-bottom: var(--spacing-unit-half);
}

.additional-button-container {
	display: flex;
	justify-content: space-between;
}

/* Spacing is a little off on this particular icon,
   so tweak this with some magic numbers */
.delete-font svg {
	stroke: currentColor;
	width: 1.25em;
	height: 1.25em;
	margin-right: calc(var(--spacing-unit-half) * 0.75);
}

.delete-font g.lid {
	transition: transform var(--speed-2);
}

.delete-font:hover g.lid {
	transform: rotate(-15deg) translate(-15%, 5%);
}

/* Blacklist */

.blacklist {
	background: var(--bg-main);
	padding: var(--item-padding-tall);
	border-top: 1px solid var(--separator);
	color: var(--text-p3);
	font-size: var(--t2);
	display: none;
}

.blacklist.show {
	display: block;
}

.blacklist.show .show-blacklist svg {
	color: var(--text-p2);
	stroke: var(--accent);
}

.fallback-fonts {
	display: none;
}

.show-font-fallbacks .show-fallbacks {
	color: var(--accent);
}

.show-font-fallbacks .fallback-fonts {
	display: block;
}

/* Footer */

footer {
	position: fixed;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	font-size: var(--t3);
	padding: 0.5rem 1rem 0.6rem;
	color: var(--gray-0);
	background: var(--bg-alt);
	height: var(--footer-height);
	border-top: 1px solid var(--separator);
}

footer a,
footer button {
	color: var(--text-p3);
	text-decoration: none;
	transition: color var(--speed-1);
}

footer a:hover,
footer button:hover {
	color: var(--accent);
}

footer a:first-of-type {
	margin-right: auto;
}
