1/* LiteForum "terminal-amber" theme by confusionunknown
2Release Version 1
3based on the default_light theme by anna.
4parts of this theme use the mono-amber color pallete from https://gogh-co.github.io/Gogh/
5*/
6
7@import url('https://api.fonts.coollabs.io/css2?family=DotGothic16&display=swap');
8.container[page="settings"] h1:first-child::after{
9font-size:0.5em;
10content: "\A terminal-amber theme release 1";
11white-space: pre;
12}
13:root {
14--background-color: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px), radial-gradient(circle, rgba(89,52,0,1) 0%, rgba(43,25,0,1) 100%);
15--text-color: #FF9400;
16--button-background: #402500;
17--button-text-color: #FF9400;
18--button-hover-color: #402500;
19--link-color: #FF9400;
20--link-hover-color: #DD8000;
21--navbar-background: #2B1900;
22--navbar-text-color: #FF9400;
23--dropdown-background: #f8f9fa;
24--dropdown-link-color: #333;
25--dropdown-link-hover-background: #e2e6ea;
26--blockquote-background: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px), linear-gradient(180deg, rgba(43,25,0,1) 0%, rgba(66,39,0,1) 50%, rgba(43,25,0,1) 100%);
27--blockquote-text-color: #FF9400;
28--thread-reply-background: rgba(43,25,0,1);
29--thread-reply-border-color: #402500;
30}
31.reply-delete button {
32background-color: #dc3545;
33color: white;
34border: none;
35padding: 8px 15px;
36font-size: 14px;
37margin-bottom: 15px;
38cursor: pointer;
39border-radius: 3px;
40}
41
42.reply-delete button:hover {
43background-color: #c82333;
44}
45
46
47.reply-share a {
48background-color: var(--link-color);
49color: white;
50border: none;
51padding: 10px 16px;
52font-size: 14px;
53cursor: pointer;
54border-radius: 3px;
55}
56
57.reply-share a:hover {
58background-color: var(--link-hover-color);
59color: var(--text-color);
60}
61
62footer {
63position: fixed;
64left: 0;
65bottom: 0;
66width: 100%;
67text-align: center;
68}
69
70.navbar {
71display: flex;
72align-items: center;
73border-width: 2px;
74border-style: solid;
75border-color: #402500;
76}
77
78@media only screen and (max-width: 900px) {
79.search-container {
80margin-left: auto;
81max-width: 50%;
82}
83.search-container input[type="text"] {
84padding: 5%;
85margin: 0%;
86width: auto;
87}
88.search-container button {
89padding: 10px;
90margin: 0 5px;
91width: calc(35% - 20px);
92min-width: 65px;
93}
94}
95
96
97
98
99.search-container {
100margin-left: auto;
101max-width: 50%;
102}
103
104.search-container input[type="text"] {
105padding: 10px;
106margin: 0 5px;
107width: 300px;
108}
109
110
111.search-container button {
112padding: 10px;
113margin: 0 5px;
114width: calc(35% - 20px);
115min-width: 65px;
116}
117
118
119
120
121
122
123.search-container form {
124display: flex;
125align-items: center;
126}
127
128
129
130
131
132
133
134
135.container {
136max-width: 50vw;
137margin: 1% auto;
138}
139
140@media only screen and (max-width: 768px) {
141.container {
142max-width: 100vw;
143}
144}
145
146
147
148.userimg {
149max-width: 100%;
150height: auto;
151}
152
153
154.flex-container {
155display: flex;
156align-items: center;
157}
158
159.reply-info {
160display: inline-block;
161vertical-align: top;
162margin-left: 1%;
163}
164
165.reply-info h1,
166.reply-info h2,
167.reply-info h3,
168.reply-info h4,
169.reply-info h5,
170.reply-info h6 {
171margin-top: 0;
172margin-bottom: 0;
173}
174
175.reply-delete {
176margin-left: auto;
177}
178
179.reply-link {
180text-decoration: none;
181color: black;
182margin-left: 10px;
183}
184
185.reply-hr {
186border: none;
187height: 1px;
188background-color: #ccc;
189margin: 10px 0;
190}
191
192hr {
193display: none;
194margin-top: 0;
195margin-bottom: 0;
196margin-left: 0;
197margin-right: 0;
198}
199
200
201body {
202font-family: DotGothic16, Arial, sans-serif;
203background: var(--background-color);
204background-attachment: fixed;
205color: var(--text-color);
206margin: 0;
207padding: 0;
208text-shadow: 0px 0px 5px var(--text-color);
209}
210
211
212.btn,
213button,
214input[type="submit"],
215a.btn, .button {
216background-color: var(--button-background);
217color: var(--button-text-color);
218padding: 10px 20px;
219text-decoration: none;
220border: none;
221cursor: pointer;
222white-space: nowrap;
223overflow: hidden;
224text-overflow: ellipsis;
225display: inline-block;
226margin-right: 10px;
227}
228
229.btn:hover,
230button:hover,
231input[type="submit"]:hover,
232a.btn:hover {
233background-color: var(--button-hover-color);
234}
235
236.thread,
237.reply {
238background-color: var(--thread-reply-background);
239border: 1px solid var(--thread-reply-border-color);
240padding: 15px;
241margin-bottom: 20px;
242border-radius: 3px;
243}
244
245textarea,
246input {
247width: calc(100% - 20px);
248margin-bottom: 20px;
249background-color: var(--thread-reply-background);
250color: var(--text-color);
251border: 1px solid var(--thread-reply-border-color);
252padding: 10px;
253border-radius: 3px;
254}
255
256textarea[name="custom_css"] {
257height:50em;
258}
259
260blockquote {
261background: var(--blockquote-background);
262color: var(--blockquote-text-color);
263padding: 10px;
264margin: 0;
265border-left: 3px solid var(--thread-reply-border-color);
266font-style: italic;
267margin-bottom: 20px;
268box-shadow: inset 35px 0px 16px -36px var(--blockquote-text-color);
269}
270
271a {
272color: var(--link-color);
273text-decoration: none;
274}
275
276a:hover {
277color: var(--link-hover-color);
278}
279
280.navbar {
281overflow: hidden;
282background-color: var(--navbar-background);
283}
284
285.navbar a {
286float: left;
287font-size: 16px;
288color: var(--navbar-text-color);
289text-align: center;
290padding: 14px 16px;
291text-decoration: none;
292}
293
294.navbar a:hover {
295background-color: var(--button-hover-color);
296}
297
298.navbar a:hover::before {
299content: "> ";
300}
301
302@media (max-width: 1000px) {
303.navbar {
304overflow-x: auto;
305white-space: nowrap;
306}
307
308.navbar a {
309float: none;
310display: inline-block;
311}
312}
313
314.success {
315position: fixed;
316top: 70px;
317left: 50%;
318transform: translate(-50%,0);
319padding: 10px;
320background: var(--navbar-background);
321border-width: 5px;
322border-style: solid;
323border-color: var(--thread-reply-border-color);
324animation-name: flyout;
325animation-duration: 1s;
326animation-delay: 5s;
327animation-fill-mode: forwards;
328}
329@keyframes flyout {
3300% {
331transform: translate(-50%,0px);
332}
333100% {
334transform: translate(-50%,-200px);
335}
336}
337