aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/assets/app.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets/app.scss')
-rw-r--r--src/assets/app.scss337
1 files changed, 337 insertions, 0 deletions
diff --git a/src/assets/app.scss b/src/assets/app.scss
new file mode 100644
index 0000000..001e3a4
--- /dev/null
+++ b/src/assets/app.scss
@@ -0,0 +1,337 @@
1@charset "utf-8";
2
3@import "./webfonts/webfonts.scss";
4
5@import "bulma";
6
7// Themes import
8@import "./themes/sui.scss";
9
10@mixin ellipsis() {
11 white-space: nowrap;
12 overflow: hidden;
13 text-overflow: ellipsis;
14}
15
16html {
17 height: 100%;
18}
19
20body {
21 font-family: "Raleway", sans-serif;
22 height: 100%;
23
24 #app {
25 min-height: 100%;
26 background-color: var(--background);
27 color: var(--text);
28 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
29
30 a {
31 &:hover {
32 color: var(--link-hover);
33 }
34 }
35
36 .title {
37 color: var(--text-title);
38 }
39 .subtitle {
40 color: var(--text-subtitle);
41 }
42
43 .card {
44 background-color: var(--card-background);
45 box-shadow: 0 2px 15px 0 var(--card-shadow);
46 &:hover {
47 background-color: var(--card-background);
48 }
49 }
50
51 .message {
52 background-color: var(--card-background);
53 .message-body {
54 color: var(--text);
55 }
56 }
57
58 .footer {
59 background-color: var(--card-background);
60 box-shadow: 0 2px 15px 0 var(--card-shadow);
61 }
62 }
63
64 h1,
65 h2,
66 h3,
67 h4,
68 h5,
69 h6 {
70 font-family: "Lato", sans-serif;
71 }
72
73 h1 {
74 font-size: 2rem;
75 }
76
77 h2 {
78 font-size: 1.7rem;
79 margin-top: 2rem;
80 margin-bottom: 1rem;
81
82 .fas,
83 .fab,
84 .far {
85 margin-right: 10px;
86 }
87
88 span {
89 font-weight: bold;
90 color: var(--highlight-secondary);
91 }
92 }
93
94 [v-cloak] {
95 display: none;
96 }
97
98 #bighead {
99 color: var(--text-header);
100
101 .dashboard-title {
102 padding: 6px 0 0 80px;
103 }
104
105 .first-line {
106 height: 100px;
107 vertical-align: center;
108 background-color: var(--highlight-primary);
109
110 h1 {
111 margin-top: -12px;
112 font-size: 2rem;
113 }
114
115 .headline {
116 margin-top: 5px;
117 font-size: 0.9rem;
118 }
119
120 .container {
121 height: 80px;
122 padding: 10px 0;
123 }
124
125 .logo {
126 float: left;
127 i {
128 vertical-align: top;
129 padding: 8px 15px;
130 font-size: 50px;
131 }
132
133 img {
134 padding: 10px;
135 max-height: 70px;
136 max-width: 70px;
137 }
138 }
139 }
140 .navbar,
141 .navbar-menu {
142 background-color: var(--highlight-secondary);
143
144 a {
145 color: var(--text-header);
146 padding: 8px 12px;
147 &:hover,
148 &:focus {
149 color: var(--text-header);
150 background-color: var(--highlight-hover);
151 }
152 }
153 }
154 .navbar-end {
155 text-align: right;
156 }
157 }
158
159 #main-section {
160 margin-bottom: 2rem;
161 padding: 0;
162
163 h2 {
164 padding-bottom: 0px;
165 @include ellipsis();
166 }
167
168 .title {
169 font-size: 1.1em;
170 @include ellipsis();
171 }
172
173 .subtitle {
174 font-size: 0.9em;
175 @include ellipsis();
176 }
177
178 .container {
179 padding: 1.2rem 0.75rem;
180 }
181
182 .message {
183 margin-top: 45px;
184 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
185
186 .message-header {
187 font-weight: bold;
188 }
189
190 .message-body {
191 border: none;
192 }
193 }
194 }
195
196 .media-content {
197 overflow: hidden;
198 text-overflow: inherit;
199 }
200
201 .tag {
202 color: var(--highlight-secondary);
203 background-color: var(--highlight-secondary);
204 position: absolute;
205 top: 1rem;
206 right: -0.2rem;
207 width: 3px;
208 overflow: hidden;
209 transition: all 0.2s ease-out;
210 padding: 0;
211
212 .tag-text {
213 display: none;
214 }
215 }
216
217 .card {
218 border-radius: 5px;
219 border: none;
220 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
221 transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
222
223 a {
224 outline: none;
225 }
226 }
227
228 .card:hover {
229 transform: translate(0, -3px);
230
231 .tag {
232 width: auto;
233 color: #ffffff;
234 padding: 0 0.75em;
235
236 .tag-text {
237 display: block;
238 }
239 }
240 }
241
242 .card-content {
243 height: 85px;
244 padding: 1.3rem;
245 }
246
247 .layout-vertical {
248 .card {
249 border-radius: 0;
250 }
251
252 .column div:first-of-type .card {
253 border-radius: 5px 5px 0 0;
254 }
255
256 .column div:last-child .card {
257 border-radius: 0 0 5px 5px;
258 }
259 }
260
261 .footer {
262 position: fixed;
263 left: 0;
264 right: 0;
265 bottom: 0;
266 padding: 0.5rem;
267 text-align: left;
268 color: #676767;
269 font-size: 0.85rem;
270 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
271 }
272
273 .no-footer {
274 #main-section {
275 margin-bottom: 0;
276 }
277
278 .footer {
279 display: none;
280 }
281 }
282
283 .search-bar {
284 position: relative;
285 display: inline-block;
286 input {
287 border: none;
288 background-color: var(--highlight-hover);
289 border-radius: 5px;
290 margin-top: 2px;
291 padding: 2px 12px 2px 30px;
292 transition: all 100ms linear;
293 color: #ffffff;
294 height: 30px;
295 width: 100px;
296
297 &:focus {
298 color: #000000;
299 width: 250px;
300 background-color: #ffffff;
301 }
302 }
303
304 .search-label::before {
305 font-family: "Font Awesome 5 Free";
306 position: absolute;
307 top: 14px;
308 left: 16px;
309 content: "\f002";
310 font-weight: 900;
311 width: 20px;
312 height: 20px;
313 color: #ffffff;
314 }
315
316 &:focus-within .search-label::before {
317 color: #6e6e6e;
318 }
319 }
320
321 .offline-message {
322 text-align: center;
323 margin: 35px 0;
324
325 svg {
326 font-size: 2rem;
327 }
328
329 svg.fa-redo-alt {
330 font-size: 1.3rem;
331 line-height: 1rem;
332 vertical-align: middle;
333 cursor: pointer;
334 color: #3273dc;
335 }
336 }
337}