favycon/styles/main.scss

@import 'reset';
@import 'font';
@import 'variables';
@import 'nprogress';
@import 'prism';

html,
body {
	padding: 0;
	margin: 0;

	/* Disables pull-to-refresh but allows overscroll glow effects. */
	overscroll-behavior-y: contain;
	font-family: Manrope, Arial, 'Helvetica Neue', Helvetica, sans-serif;

	/* https://gist.github.com/hsleonis/55712b0eafc9b25f1944 */
	font-size: 100%;
	font-variant-ligatures: none;
	text-shadow: rgba($black, 0.01) 0 0 1px;
	transition: background 0.2s ease;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;

	&.light {
		background: $off-white;
	}

	&.dark {
		background: $darker-black;
	}
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba($black, 0);
}

hr {
	height: 1px;
	margin: 16px 0;
	background: $light-grey;
	border: none;
	transition: background 0.2s ease;
}

.dark {
	hr {
		background: $darker-grey;
	}
}

/* stylelint-disable-next-line */
.ReactModal__Overlay {
	opacity: 0;
	transition: all 0.2s ease;
	transform: translate3d(0, 24px, 0);
}

/* stylelint-disable-next-line */
.ReactModal__Overlay--after-open {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* stylelint-disable-next-line */
.ReactModal__Overlay--before-close {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.preload,
.preload * {
	transition: none !important;
}

.collapse-enter {
	max-width: 0;
	opacity: 0;
}

.collapse-enter-active {
	max-width: 50px;
	opacity: 1;
	transition: all 0.2s linear;
}

.collapse-exit {
	max-width: 50px;
	opacity: 1;
}

.collapse-exit-active {
	max-width: 0;
	opacity: 0;
	transition: all 0.2s linear;
}

.fade-enter {
	opacity: 0;
}

.fade-enter-active {
	opacity: 1;
	transition: opacity 0.2s linear;
}

.fade-exit {
	opacity: 1;
}

.fade-exit-active {
	opacity: 0;
	transition: opacity 0.2s linear;
}

.error-enter {
	opacity: 0;
	transform: translate3d(0, -8px, 0);
}

.error-enter-active {
	opacity: 1;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	transform: translate3d(0, 0, 0);
}

.error-exit {
	opacity: 1;
}

.error-exit-active {
	opacity: 0;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	transform: translate3d(0, 4px, 0);
}