style.scss 7.87 KB
Newer Older
ransome1's avatar
ransome1 committed
1
2
3
@charset "utf-8";
@import "variables.scss";
@import "dark.scss";
ransome1's avatar
ransome1 committed
4
@font-face {
ransome1's avatar
ransome1 committed
5
6
7
  font-family: "FreeSans";
  src: url("../fonts/FreeSans.otf") format("opentype");
  src: url("../fonts/FreeSans.ttf") format("truetype");
ransome1's avatar
ransome1 committed
8
9
}
@font-face {
ransome1's avatar
ransome1 committed
10
11
12
  font-family: "FreeSansBold";
  src: url("../fonts/FreeSansBold.otf") format("opentype");
  src: url("../fonts/FreeSansBold.ttf") format("truetype");
ransome1's avatar
ransome1 committed
13
14
15
16
17
}
html {
  height: 100%;
}
body {
18
  font-size: 16px;
ransome1's avatar
ransome1 committed
19
20
21
22
23
24
  height: 100%;
  margin: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
ransome1's avatar
ransome1 committed
25
26
27
body::-webkit-scrollbar {
  display: none;
}
ransome1's avatar
ransome1 committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//  ####################################
//  GENERIC
//  ####################################

.is-active {
  display: block!important;
}

.is-hidden {
  display: none;
}

.is-greyed-out {
  filter: opacity(75%) grayscale(100%);
}

ransome1's avatar
ransome1 committed
45
46
47
48
//  ####################################
//  BUTTONS
//  ####################################

ransome1's avatar
ransome1 committed
49
50
51
52
53
54
55
56
57
button,
.button,
.button:focus,
.button:active,
.button:active,
.button:after,
.button::before,
.button:active:after {
  color: $has-text-link;
58
59
  border: none !important;
  box-shadow: none !important;
ransome1's avatar
ransome1 committed
60
}
ransome1's avatar
ransome1 committed
61
62
63
64
.button:hover,
button:hover {
  color: $darker-grey;
}
ransome1's avatar
ransome1 committed
65
66
67
.button i {
  color: $has-text-link;
}
ransome1's avatar
ransome1 committed
68
69
.button.is-greyed-out {
  cursor: not-allowed;
ransome1's avatar
ransome1 committed
70
}
ransome1's avatar
ransome1 committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

.button.is-link:hover {
  color: $almost-white;
}

//  ####################################
//  INPUT
//  ####################################

input,
select,
textarea {
  border: none!important;
  box-shadow: none!important;
  outline: none!important;
ransome1's avatar
ransome1 committed
86
}
ransome1's avatar
ransome1 committed
87
input::placeholder {
ransome1's avatar
ransome1 committed
88
89
  color: $dark-grey;
}
ransome1's avatar
ransome1 committed
90
91
92
93
94
input[type="text"],
input[type="search"],
textarea {
  border-radius: 1.5em;
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
95
}
ransome1's avatar
ransome1 committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

.inputWrapper {
  position: relative;
  padding-top: 0.5em;
  input[type="search"],
  input[type="text"],
  textarea {
    padding: 2.2em 1em 1.3em 1.5em;
  }
  input::placeholder,
  textarea::placeholder {
    color: $mid-grey;
  }
  label {
    cursor: pointer;
    //font-family: FreeSansBold;
    font-size: 0.75em;
    position: absolute;
    top: 1.3em;
    left: 2.5em;
    z-index: 70;
  }
ransome1's avatar
ransome1 committed
118
}
ransome1's avatar
ransome1 committed
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

input[type="number"] {
  text-align: center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type="range"] {
  padding: 0;
  -webkit-appearance: none;
  height: .25em;
  background: $dark-grey!important;
  border-radius: 10px;
  outline: none;
  border-bottom: none!important;
ransome1's avatar
ransome1 committed
135
}
ransome1's avatar
ransome1 committed
136
137
138
139
140

//  ####################################
//  TABLE
//  ####################################

ransome1's avatar
ransome1 committed
141
142
table {
  width: 100%;
ransome1's avatar
ransome1 committed
143
  border-collapse: separate;
ransome1's avatar
ransome1 committed
144
145
  tr {
    th {
146
      padding: .1em 0 !important;
ransome1's avatar
ransome1 committed
147
      font-size: 1.2em;
ransome1's avatar
ransome1 committed
148
      font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
149
150
151
    }
    td {
      border: none;
152
      padding: .5em 2em .5em 0 !important;
ransome1's avatar
ransome1 committed
153
154
155
156
157
158
159
160
161
162
163
164
165
166
    }
  }
}
table.files {
  margin: 0;
  tr {
    td {
      vertical-align: middle;
    }
    td:first-child {
      width: 3em;
    }
    td:last-child {
      cursor: pointer;
167
168
169
      i {
        color: $has-text-link;
      }
ransome1's avatar
ransome1 committed
170
171
172
    }
  }
}
ransome1's avatar
ransome1 committed
173
174
175
176
177

//  ####################################
//  FOCUS OUTLINES
//  ####################################

ransome1's avatar
ransome1 committed
178
179
180
:focus,
:focus-visible {
  box-shadow: none;
ransome1's avatar
ransome1 committed
181
  outline: none;
ransome1's avatar
ransome1 committed
182
}
ransome1's avatar
ransome1 committed
183

ransome1's avatar
ransome1 committed
184
185
186
input:focus,
select:focus {
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
187
188
}

ransome1's avatar
ransome1 committed
189
.card-footer-item:focus-visible {
ransome1's avatar
ransome1 committed
190
  color: $darker-grey!important;
ransome1's avatar
ransome1 committed
191
  background: $almost-white!important;
ransome1's avatar
ransome1 committed
192
193
}

ransome1's avatar
ransome1 committed
194
195
.cell.checkbox a:focus-visible i {
  color: $almost-black;
ransome1's avatar
ransome1 committed
196
197
}

ransome1's avatar
ransome1 committed
198
199
a.cell.text:focus-visible {
  background: $almost-white;
ransome1's avatar
ransome1 committed
200
}
ransome1's avatar
ransome1 committed
201

ransome1's avatar
ransome1 committed
202
203
// input[type="text"]:focus,
// input[type="search"]:focus {
ransome1's avatar
ransome1 committed
204
//   box-shadow: none;
ransome1's avatar
ransome1 committed
205
206
//   border: none;
//   background: transparent!important;
ransome1's avatar
ransome1 committed
207
// }
ransome1's avatar
ransome1 committed
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

.is-focused {
  // input[type="search"],
  // input[type="text"],
  // textarea {
  //   border-bottom: 2px solid $dark-grey!important;
  // }
  // input[type="search"]::-webkit-search-cancel-button {
  //   -webkit-appearance: none;
  //   height: 1.15em;
  //   width: 1.15em;
  //   display: inline-block;
  //   border-radius: 25em;
  //   background-color: $dark-grey;
  //   -webkit-mask-image: url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg");
  //   mask-image: url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg");
  //   opacity: 1;
  //   cursor: pointer;
  // }
//   label {
//     color: $dark-grey;
//   }
//   i.icon.is-left,
//   i.icon.is-right {
//     color: $dark-grey!important;
//   }
234
}
ransome1's avatar
ransome1 committed
235
236
237
238
239

//  ####################################
//  TEXT
//  ####################################

ransome1's avatar
ransome1 committed
240
241
.title,
strong {
ransome1's avatar
ransome1 committed
242
  font-family: "FreeSansBold";
243
  font-weight: normal !important;
ransome1's avatar
ransome1 committed
244
}
245
code, pre {
246
247
248
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
  background-color: $light-grey !important;
  color: inherit !important;
ransome1's avatar
ransome1 committed
249
}
ransome1's avatar
ransome1 committed
250
251
252
253
254

//  ####################################
//  NAVIGATION
//  ####################################

ransome1's avatar
ransome1 committed
255
256
257
258
259
260
261
262
263
264
265
nav {
  width: auto;
  height: 100%;
  float: left;
  position: relative;
  background: $almost-white;
  ul {
    float: left;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
ransome1's avatar
ransome1 committed
266
267
    li a,
    li.logo {
ransome1's avatar
ransome1 committed
268
269
270
271
272
273
274
275
276
      width: 5em;
      height: 5em;
      display: block;
      color: $dark-grey;
    	cursor: pointer;
    	line-height: 5em;
    	text-align: center;
    	border-bottom: 1px solid rgba(0,0,0,0.05);
    }
ransome1's avatar
ransome1 committed
277
    li a:focus {
ransome1's avatar
ransome1 committed
278
279
280
      background: $light-grey;
      outline-style: none;
    }
ransome1's avatar
ransome1 committed
281
282
    li a:hover,
    li a.is-highlighted {
ransome1's avatar
ransome1 committed
283
284
      background: $light-grey;
    }
ransome1's avatar
ransome1 committed
285
    li a#navBtnFilter.is-hidden {
ransome1's avatar
ransome1 committed
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
      display: none;
    }
    li.logo {
      background: $dark-grey;
      color: white;
      font-family: FreeSansBold;
      cursor: default;
    }
  }
  ul:nth-child(2) {
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
ransome1's avatar
ransome1 committed
302
303
304
305
306

//  ####################################
//TODO
//  ####################################

ransome1's avatar
ransome1 committed
307
#noResultContainer {
ransome1's avatar
ransome1 committed
308
  height: 80%;
ransome1's avatar
ransome1 committed
309
310
311
312
}

.contentContainer {
  height: 100%;
ransome1's avatar
ransome1 committed
313
314
315
  p {
    padding: 0 10%;
  }
ransome1's avatar
ransome1 committed
316
}
ransome1's avatar
ransome1 committed
317
318
.contentContainer.is-active {
  display: flex!important;
ransome1's avatar
ransome1 committed
319
}
ransome1's avatar
ransome1 committed
320

ransome1's avatar
ransome1 committed
321
322
323
324
325
#errorContainer {
  display: none;
  p {
    margin: .1em 0;
  }
326
327
328
  i {
    color: white!important;
  }
ransome1's avatar
ransome1 committed
329
  .button {
ransome1's avatar
ransome1 committed
330
331
332
    color: white;
  }
}
ransome1's avatar
ransome1 committed
333

ransome1's avatar
ransome1 committed
334
#datePickerInput {
ransome1's avatar
ransome1 committed
335
336
  cursor: pointer;
}
337

ransome1's avatar
ransome1 committed
338
339
340
341
//  ####################################
//  MAIN CONTAINERS
//  ####################################

ransome1's avatar
ransome1 committed
342
343
344
345
346
347
348
349
350
351
352
353
354
.contentContainer {
  width: 100%;
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content:center;
  p {
    margin: .5em;
  }
  .fa-file-alt {
    font-size: 6em;
  }
  .title.is-1 {
ransome1's avatar
ransome1 committed
355
    font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
356
357
358
359
360
361
362
363
364
365
366
    margin: .5em 0;
  }
  .subtitle {
    margin: .5em 0;
  }
  .btnOnboarding {
    font-size: 1em;
    margin: 0 1em;
    padding: .25em;
    text-decoration: none;
  }
ransome1's avatar
ransome1 committed
367
  .btnOnboarding i {
ransome1's avatar
ransome1 committed
368
369
370
371
372
373
374
    font-size: 5em;
    margin: .25em 0;
  }
}
.contentContainer.is-active {
  display: flex;
}
ransome1's avatar
ransome1 committed
375
376
377
378
379

//  ####################################
//  BASIC FRAME
//  ####################################

ransome1's avatar
ransome1 committed
380
381
.columns {
  height: 100%;
382
  margin: 0 !important;
ransome1's avatar
ransome1 committed
383
384
385
386
387
388
389
390
391
392
393
  .column {
    position: relative;
    .is-right {
      float: right;
    }
  }
  .column.content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
ransome1's avatar
ransome1 committed
394
395
396
397
398

//  ####################################
//  MESSAGES
//  ####################################

399
#messages {
ransome1's avatar
ransome1 committed
400
401
  width: 25em;
  position: fixed;
402
  right: 2em;
ransome1's avatar
ransome1 committed
403
  bottom: 1em;
404
  z-index: 45!important;
ransome1's avatar
ransome1 committed
405
406
407
  i {
    color: $has-text-link;
  }
ransome1's avatar
ransome1 committed
408
409
  .message {
    display: none;
ransome1's avatar
ransome1 committed
410
    .message-body .brands i {
ransome1's avatar
ransome1 committed
411
412
      font-size: 2.25em;
      margin-right: .2em;
ransome1's avatar
ransome1 committed
413
      color: $has-text-link;
ransome1's avatar
ransome1 committed
414
415
416
417
418
419
420
421
    }
  }
  .button {
    margin-top: .5em;
  }
  .message-body p {
    margin-bottom: .5em;
  }
422
423
424
  .notification.is-danger {
    background-color: $has-text-danger;
  }
ransome1's avatar
ransome1 committed
425
}
ransome1's avatar
ransome1 committed
426

ransome1's avatar
ransome1 committed
427
428
429
430
431
//  ####################################
//  IMPORT MODULES
//  ####################################

@import "search.scss";
ransome1's avatar
ransome1 committed
432
@import "compact.scss";
ransome1's avatar
ransome1 committed
433
434
435
436
437
438
@import "filterButtons.scss";
@import "drawer.scss";
@import "modal.scss";
@import "recurrencePicker.scss";
@import "todoTable.scss";
@import "toggle.scss";
ransome1's avatar
ransome1 committed
439
440
@import "datepicker.scss";
@import "../../node_modules/bulma/bulma.sass";