static/styles.css 2.3 K raw
1
* {
2
	padding: 0;
3
	margin: 0;
4
	box-sizing: border-box;
5
	font-family: "Commit Mono", monospace, sans-serif;
6
	scrollbar-width: none;
7
	-ms-overflow-style: none;
8
}
9
10
html {
11
	background: #121113;
12
	color: #ffffff;
13
}
14
15
html::-webkit-scrollbar {
16
	display: none;
17
}
18
19
body {
20
	display: flex;
21
	flex-direction: column;
22
	justify-content: start;
23
	align-items: start;
24
	gap: 1.5rem;
25
	min-height: 100vh;
26
	max-width: 700px;
27
	margin: auto;
28
}
29
30
.header {
31
	display: flex;
32
	text-decoration: none;
33
}
34
35
.nav {
36
	display: flex;
37
	align-items: center;
38
	justify-content: space-between;
39
	width: 100%;
40
	margin-top: 2rem;
41
}
42
43
.icon {
44
	display: flex;
45
	align-items: center;
46
	justify-content: center;
47
	color: #878787;
48
	width: 24px;
49
	height: 24px;
50
}
51
52
.icon svg {
53
	width: 24px;
54
	height: 24px;
55
}
56
57
.icon svg path {
58
	fill: #878787;
59
}
60
61
.icon:hover svg path {
62
	fill: white;
63
}
64
65
#snippetForm {
66
	display: flex;
67
	flex-direction: column;
68
	gap: 1rem;
69
	width: 100%;
70
}
71
72
#snippetForm input {
73
	background: #121113;
74
	color: #ffffff;
75
	border: 1px solid white;
76
	padding: 4px;
77
}
78
79
#authForm input {
80
	background: #121113;
81
	color: #ffffff;
82
	border: 1px solid white;
83
	padding: 4px;
84
}
85
86
textarea {
87
	background: #121113;
88
	color: #ffffff;
89
	width: 100%;
90
	min-height: 400px;
91
	padding: 6px;
92
	border: 1px solid white;
93
}
94
95
.code-container {
96
	border: 1px solid white;
97
	height: 400px;
98
	overflow: auto;
99
}
100
101
.code-container pre {
102
	background-color: #121113 !important;
103
	padding: 6px;
104
	margin: 0;
105
	min-height: 100%;
106
	font-size: 13px;
107
	line-height: 1.4;
108
}
109
110
button {
111
	background: #121113;
112
	color: #ffffff;
113
	padding: 6px;
114
	border: 1px solid white;
115
	cursor: pointer;
116
	width: fit-content;
117
}
118
119
a {
120
	background: #121113;
121
	color: #ffffff;
122
}
123
124
@media (max-width: 480px) {
125
	body {
126
		padding: 1rem;
127
		gap: 1rem;
128
	}
129
}
130
131
#snippetList {
132
	flex-direction: column;
133
	gap: 0;
134
}
135
136
.snippet-item {
137
	display: flex;
138
	justify-content: space-between;
139
	align-items: center;
140
	padding: 8px;
141
	border: 1px solid white;
142
	margin-top: -1px;
143
	text-decoration: none;
144
}
145
146
.snippet-item:hover {
147
	background: #1e1d1f;
148
}
149
150
.snippet-id {
151
	color: #878787;
152
	font-size: 13px;
153
}
154
155
@font-face {
156
	font-family: "Commit Mono";
157
	src: url("/assets/fonts/CommitMono-400-Regular.otf") format("opentype");
158
	font-weight: 400;
159
	font-style: normal;
160
}
161
162
@font-face {
163
	font-family: "Commit Mono";
164
	src: url("/assets/fonts/CommitMono-700-Regular.otf") format("opentype");
165
	font-weight: 700;
166
	font-style: normal;
167
}