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