]>
Commit | Line | Data |
---|---|---|
1 | .unrealircd_overview { | |
2 | font-family: arial, sans-serif; | |
3 | border-collapse: collapse; | |
4 | border-radius: 15px; | |
5 | width: 25%; | |
6 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
7 | } | |
8 | ||
9 | .users_overview { | |
10 | font-family: arial, sans-serif; | |
11 | border-collapse: collapse; | |
12 | border-radius: 15px; | |
13 | width: 100%; | |
14 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
15 | } | |
16 | ||
17 | a { | |
18 | color: white; | |
19 | text-decoration: none; | |
20 | } | |
21 | ||
22 | table { | |
23 | border-collapse: collapse; | |
24 | margin: 25px 0; | |
25 | font-size: 0.9em; | |
26 | font-family: sans-serif; | |
27 | min-width: 400px; | |
28 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
29 | } | |
30 | ||
31 | td { | |
32 | text-align: left; | |
33 | padding: 8px; | |
34 | } | |
35 | ||
36 | th { | |
37 | text-align: left; | |
38 | padding: 8px; | |
39 | background-color: #4B86EE; | |
40 | color: white; | |
41 | } | |
42 | ||
43 | th:first-of-type { | |
44 | border-top-left-radius: 10px; | |
45 | color: white; | |
46 | } | |
47 | ||
48 | th:last-of-type { | |
49 | border-top-right-radius: 10px; | |
50 | color: white; | |
51 | } | |
52 | ||
53 | tr:last-of-type td:first-of-type { | |
54 | border-bottom-left-radius: 10px; | |
55 | ||
56 | } | |
57 | ||
58 | tr:last-of-type td:last-of-type { | |
59 | border-bottom-right-radius: 10px; | |
60 | } | |
61 | ||
62 | tr:nth-child(even) { | |
63 | background-color: #bec8d3; | |
64 | } | |
65 | ||
66 | tr:nth-child(odd) { | |
67 | background-color: whitesmoke; | |
68 | } | |
69 | ||
70 | html { | |
71 | height: 100%; | |
72 | /* for the page to take full window height */ | |
73 | box-sizing: border-box; | |
74 | ||
75 | /* to have the footer displayed at the bottom of the page without scrolling */ | |
76 | font-family: arial, sans-serif; | |
77 | ||
78 | } | |
79 | ||
80 | *, | |
81 | *:before, | |
82 | *:after { | |
83 | box-sizing: inherit; | |
84 | /* enable the "border-box effect" everywhere */ | |
85 | } | |
86 | ||
87 | .body-for-sticky { | |
88 | position: relative; | |
89 | /* for the footer to move with the page size */ | |
90 | min-height: 100%; | |
91 | /* for the footer to be at the bottom */ | |
92 | } | |
93 | ||
94 | .footer { | |
95 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
96 | position: fixed; | |
97 | left: 0; | |
98 | bottom: 0; | |
99 | width: 100%; | |
100 | background-color: #333; | |
101 | color: white; | |
102 | text-align: center; | |
103 | } | |
104 | ||
105 | ||
106 | .footer a { | |
107 | color: #4B86EE; | |
108 | } | |
109 | ||
110 | .row { | |
111 | display: flex; | |
112 | } | |
113 | ||
114 | .column { | |
115 | flex: 50%; | |
116 | padding: 5px; | |
117 | } | |
118 | ||
119 | .topnav { | |
120 | background-color: #333; | |
121 | overflow: hidden; | |
122 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
123 | ||
124 | } | |
125 | ||
126 | /* Style the links inside the navigation bar */ | |
127 | .topnav a { | |
128 | float: left; | |
129 | color: #f2f2f2; | |
130 | text-align: center; | |
131 | padding: 14px 16px; | |
132 | text-decoration: none; | |
133 | font-size: 17px; | |
134 | } | |
135 | ||
136 | /* Change the color of links on hover */ | |
137 | .topnav a:hover { | |
138 | background-color: #ddd; | |
139 | color: black; | |
140 | } | |
141 | ||
142 | /* Add a color to the active/current link */ | |
143 | .topnav a.active { | |
144 | background-color: #4B86EE; | |
145 | color: white; | |
146 | } | |
147 | ||
148 | ||
149 | [data-tab-content] { | |
150 | display: none; | |
151 | } | |
152 | ||
153 | .active[data-tab-content] { | |
154 | display: block; | |
155 | } | |
156 | ||
157 | .tab.active { | |
158 | background-color: #AAA; | |
159 | } | |
160 | ||
161 | .tab:hover { | |
162 | background-color: #AAA; | |
163 | } | |
164 | ||
165 | #headerContainer, | |
166 | #headerTitle { | |
167 | background-color: #4B86EE; | |
168 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
169 | height: 62px; | |
170 | margin-top: -10px; | |
171 | padding: 10px 25px; | |
172 | position: relative; | |
173 | } | |
174 | ||
175 | #headerContainer { | |
176 | margin-left: -15px; | |
177 | z-index: 10; | |
178 | ||
179 | -webkit-box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2); | |
180 | box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2); | |
181 | } | |
182 | ||
183 | #headerContainer:before { | |
184 | border-color: #034FD5 transparent; | |
185 | border-style: solid; | |
186 | border-width: 1em 0 0 1em; | |
187 | bottom: -1em; | |
188 | content: ''; | |
189 | display: block; | |
190 | left: 0; | |
191 | position: absolute; | |
192 | } | |
193 | ||
194 | #headerContainer h2, | |
195 | #headerContainer h2 small { | |
196 | color: white !important; | |
197 | margin-bottom: 0px; | |
198 | ||
199 | } | |
200 | ||
201 | #headerContainer h2 small { | |
202 | font-weight: lighter; | |
203 | } | |
204 | ||
205 | #headerTitle { | |
206 | background-color: white; | |
207 | margin-right: 15px; | |
208 | z-index: 9; | |
209 | } | |
210 | ||
211 | #headerTitle h2 { | |
212 | line-height: 1.5; | |
213 | margin-bottom: 0px; | |
214 | } | |
215 | ||
216 | #headerTitle h2 i { | |
217 | color: #f2f2f2; | |
218 | font-size: 80px; | |
219 | position: absolute; | |
220 | right: 0; | |
221 | top: -30px; | |
222 | z-index: -1; | |
223 | } | |
224 | ||
225 | #headerTitle h2 small { | |
226 | color: #bbb; | |
227 | } | |
228 | ||
229 | ||
230 | body { | |
231 | background-image: url("/img/linen.png"); | |
232 | display: flex; | |
233 | flex-direction: column; | |
234 | } | |
235 | ||
236 | /* CSS */ | |
237 | .cute_button { | |
238 | align-items: center; | |
239 | appearance: none; | |
240 | background-color: #4B86EE; | |
241 | background-size: calc(100% + 20px) calc(100% + 20px); | |
242 | border-radius: 100px; | |
243 | border-width: 0; | |
244 | box-shadow: none; | |
245 | box-sizing: border-box; | |
246 | color: #FFFFFF; | |
247 | cursor: pointer; | |
248 | display: inline-flex; | |
249 | font-family: CircularStd, sans-serif; | |
250 | font-size: 1rem; | |
251 | height: auto; | |
252 | justify-content: center; | |
253 | line-height: 1.5; | |
254 | padding: 6px 20px; | |
255 | position: relative; | |
256 | text-align: center; | |
257 | text-decoration: none; | |
258 | transition: background-color .2s, background-position .2s; | |
259 | user-select: none; | |
260 | -webkit-user-select: none; | |
261 | touch-action: manipulation; | |
262 | vertical-align: top; | |
263 | white-space: nowrap; | |
264 | } | |
265 | ||
266 | .cute_button:active, | |
267 | .cute_button:focus { | |
268 | outline: none; | |
269 | } | |
270 | ||
271 | .cute_button:hover { | |
272 | background-position: -20px -20px; | |
273 | background-color: #034FD5; | |
274 | } | |
275 | ||
276 | .cute_button:focus:not(:active) { | |
277 | box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em; | |
278 | } | |
279 | ||
280 | .alert { | |
281 | padding: 10px; | |
282 | background-color: #b62c22; | |
283 | /* Red */ | |
284 | color: white; | |
285 | margin-bottom: 15px; | |
286 | margin-top: 15px; | |
287 | border-radius: 7px; | |
288 | width: 100%; | |
289 | } | |
290 | ||
291 | .success { | |
292 | padding: 10px; | |
293 | background-color: #208120; | |
294 | /* Red */ | |
295 | color: white; | |
296 | margin-bottom: 15px; | |
297 | margin-top: 15px; | |
298 | border-radius: 7px; | |
299 | width: 100%; | |
300 | } | |
301 | ||
302 | .information-bar { | |
303 | padding: 10px; | |
304 | background-color: #245788; | |
305 | /* Red */ | |
306 | color: white; | |
307 | margin-bottom: 15px; | |
308 | margin-top: 15px; | |
309 | border-radius: 7px; | |
310 | width: 100%; | |
311 | } | |
312 | ||
313 | /* The close button */ | |
314 | .closebtn { | |
315 | margin-left: 15px; | |
316 | color: white; | |
317 | font-weight: bold; | |
318 | float: right; | |
319 | font-size: 22px; | |
320 | line-height: 20px; | |
321 | cursor: pointer; | |
322 | transition: 0.3s; | |
323 | } |