all repos — stealth-developers @ 821130068a659e3a8560a5cd3de37da9136c3210

pkgs/frontend/src/css/index.css (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 
@import url("./evergarden.css");
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wdth,wght@6..144,25..151,1..1000&display=swap");

::-webkit-scrollbar {
	width: 0.5rem;
	height: 6px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: hsla(var(--overlay1) / 1);
	border-radius: 3px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

:root {
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--ease-springier: cubic-bezier(0.25, 2.2, 0.5, 1);
	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

	--transition-properties:
		margin, grid-template-rows, grid-template-columns, stroke-dasharray, stroke-dashoffset,
		outline-color, outline-offset, color, background-color, box-shadow, outline, border-color,
		border-radius, font-weight, opacity, transform, backdrop-filter, text-decoration-color, filter,
		scale, height, left;
	--transition-duration: 0.2s;
	--transition: var(--transition-duration) var(--ease);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

body {
	color: hsl(var(--text));

	font-family: "Google Sans Flex", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"wdth" 100,
		"GRAD" 0,
		"ROND" 100;

	background-color: hsl(var(--crust));

	font-size: 15px;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	#app {
		height: 100dvh;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	scrollbar-width: thin;
	scrollbar-color: hsla(var(--overlay1) / 1) transparent;

	-webkit-tap-highlight-color: transparent;
	outline: 2px solid;
	outline-offset: 2px;
	outline-color: hsla(var(--blue) / 0);

	transition-property: var(--transition-properties);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--ease);
}

*:focus-visible {
	outline-color: hsl(var(--blue));
	z-index: 5;
}

::selection {
	background-color: hsla(var(--crust) / 1);
	color: hsl(var(--accent));
}

h1,
h2,
h3,
h4 {
	font-variation-settings: "ROND" 0;
}

.main {
	padding: 1rem;
	border-radius: 2rem;

	h1 {
		font-size: 3.5rem;
		font-weight: 950;
	}
}

.login-prompt {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding: 0.5rem;
	padding-right: 1.5rem;
	border-radius: 5rem;
	margin-bottom: 0.5rem;

	background-color: hsla(var(--surface0) / 1);
}

a.login-button, .button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: hsla(var(--accent) / 0.9);
	color: hsl(var(--on-accent));
	text-decoration: none;
	border-radius: 5rem;
	&:hover {
		background-color: hsla(var(--accent) / 1);
	}
	&:active {
		background-color: hsla(var(--accent) / 0.75);
		scale: 0.975;
	}
}