style.scss 7.26 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;
}
28
29
30
a {
  color: $has-text-link;
}
31
32
33
a:hover,
a:active,
a:focus {
34
  color: $dark-grey;
35
}
ransome1's avatar
ransome1 committed
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

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

.is-hidden {
  display: none;
}

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

ransome1's avatar
ransome1 committed
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.card {
  box-shadow: 0 0 1em $mid-grey;
}

.card-footer {
  clear: both;
  .card-footer-item,
  .card-footer-item:focus {
    border-radius: 0;
    border-right: 1px solid $light-grey;
  }
  .card-footer-item:first-child {
    border-bottom-left-radius: $radius;
  }
  .card-footer-item:last-child {
    border-right: none;
    border-bottom-right-radius: $radius;
  }
  .card-footer-item:focus-visible {
72
    color: $dark-grey!important;
ransome1's avatar
ransome1 committed
73
74
75
76
    background-color: $almost-white!important;
  }
}

ransome1's avatar
ransome1 committed
77
78
79
80
//  ####################################
//  BUTTONS
//  ####################################

ransome1's avatar
ransome1 committed
81
82
button {
  font-size: 1em;
ransome1's avatar
ransome1 committed
83
  color: $has-text-link;
ransome1's avatar
ransome1 committed
84
85
86
87
88
89
90
  background: white;
  border: none;
  border-radius: $radius;
  outline: none;
  box-shadow: 0;
  padding: 0.55em 0.75em;
  cursor: pointer;
ransome1's avatar
ransome1 committed
91
}
ransome1's avatar
ransome1 committed
92
93
94
95
96
97
98
button:hover,
button:focus-visible {
  color: $dark-grey;
  background: white;
  i {
    color: inherit;
  }
ransome1's avatar
ransome1 committed
99
}
ransome1's avatar
ransome1 committed
100
button i {
ransome1's avatar
ransome1 committed
101
102
  color: $has-text-link;
}
ransome1's avatar
ransome1 committed
103
104
button:disabled,
button.is-greyed-out {
ransome1's avatar
ransome1 committed
105
  cursor: not-allowed;
ransome1's avatar
ransome1 committed
106
  filter: grayscale(100%);
107
  opacity: 0.6;
ransome1's avatar
ransome1 committed
108
109
110
111
112
113
114
115
116
117
118
119
}

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

input,
select,
textarea {
  border: none!important;
  box-shadow: none!important;
  outline: none!important;
ransome1's avatar
ransome1 committed
120
}
ransome1's avatar
ransome1 committed
121
input::placeholder {
ransome1's avatar
ransome1 committed
122
123
  color: $dark-grey;
}
ransome1's avatar
ransome1 committed
124
125
126
127
128
input[type="text"],
input[type="search"],
textarea {
  border-radius: 1.5em;
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
129
}
ransome1's avatar
ransome1 committed
130
131
132
133
134
135
136

.inputWrapper {
  position: relative;
  padding-top: 0.5em;
  input[type="search"],
  input[type="text"],
  textarea {
ransome1's avatar
ransome1 committed
137
138
139
140
    padding: 2em 1em 1.2em 1.5em;
  }
  textarea {
    padding-bottom: 0.75em
ransome1's avatar
ransome1 committed
141
142
143
144
145
146
147
148
149
150
151
  }
  input::placeholder,
  textarea::placeholder {
    color: $mid-grey;
  }
  label {
    cursor: pointer;
    font-size: 0.75em;
    position: absolute;
    top: 1.3em;
    left: 2.5em;
152
153
154
155
    z-index: 65;
  }
  .todoTableSearchQuestionmark {
    display: none;
ransome1's avatar
ransome1 committed
156
  }
ransome1's avatar
ransome1 committed
157
}
ransome1's avatar
ransome1 committed
158
159
160
.is-focused .inputWrapper,
.inputWrapper.is-focused {
  label,
161
  i {
ransome1's avatar
ransome1 committed
162
163
    color: $has-text-link;
  }
164
165
166
167
168
169
  .fa-search {
    display: none;
  }
  .todoTableSearchQuestionmark {
    display: block;
  }
ransome1's avatar
ransome1 committed
170
}
ransome1's avatar
ransome1 committed
171
172
173
174
175
176
177
178

input[type="number"] {
  text-align: center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
ransome1's avatar
ransome1 committed
179
180
181
182
input[type="range"],
input[type="range"]:focus {
  height: 0.7em;
  padding: 0.1em;
ransome1's avatar
ransome1 committed
183
  -webkit-appearance: none;
ransome1's avatar
ransome1 committed
184
185
186
187
188
189
190
191
192
193
194
  border-radius: $radius;
  background: $lighter-grey!important;
}

input[type="range"]::-webkit-slider-thumb {
  cursor: ew-resize;
  width: 0.75em;
  height: 1.5em;
  -webkit-appearance: none;
  background: $dark-grey;
  border-radius: $radius;
ransome1's avatar
ransome1 committed
195
}
ransome1's avatar
ransome1 committed
196
197
198
199
200

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

ransome1's avatar
ransome1 committed
201
202
table {
  width: 100%;
ransome1's avatar
ransome1 committed
203
  border-collapse: separate;
ransome1's avatar
ransome1 committed
204
205
  tr {
    th {
206
      padding: .1em 0 !important;
ransome1's avatar
ransome1 committed
207
      font-size: 1.2em;
ransome1's avatar
ransome1 committed
208
      font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
209
210
211
    }
    td {
      border: none;
212
      padding: .5em 2em .5em 0 !important;
ransome1's avatar
ransome1 committed
213
214
215
216
217
218
219
220
221
222
223
    }
  }
}
table.files {
  margin: 0;
  tr {
    td {
      vertical-align: middle;
    }
    td:first-child {
      width: 3em;
ransome1's avatar
ransome1 committed
224
      text-align: center;
ransome1's avatar
ransome1 committed
225
226
    }
    td:last-child {
ransome1's avatar
ransome1 committed
227
      a {
228
        font-size: 1.2em;
ransome1's avatar
ransome1 committed
229
        padding: 0.5em;
230
        color: $has-text-link;
ransome1's avatar
ransome1 committed
231
232
233
234
        cursor: pointer;
      }
      a:focus-visible {
        color: $dark-grey;
235
      }
ransome1's avatar
ransome1 committed
236
237
    }
  }
ransome1's avatar
ransome1 committed
238
239
240
241
242
  button {
    color: white;
    background: $has-text-link;
  }
  button:disabled {
243
    color: $dark-grey;
ransome1's avatar
ransome1 committed
244
245
    background: $almost-white;
  }
ransome1's avatar
ransome1 committed
246
}
ransome1's avatar
ransome1 committed
247
248
249
250
251

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

ransome1's avatar
ransome1 committed
252
253
254
:focus,
:focus-visible {
  box-shadow: none;
ransome1's avatar
ransome1 committed
255
  outline: none;
ransome1's avatar
ransome1 committed
256
}
ransome1's avatar
ransome1 committed
257

ransome1's avatar
ransome1 committed
258
259
260
input:focus,
select:focus {
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
261
262
}

ransome1's avatar
ransome1 committed
263
264
265
button:focus-visible {
  color: $almost-white!important;
  background: $dark-grey!important;
266
}
ransome1's avatar
ransome1 committed
267
268
269
270
271

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

ransome1's avatar
ransome1 committed
272
273
.title,
strong {
ransome1's avatar
ransome1 committed
274
  font-family: "FreeSansBold";
275
  font-weight: normal !important;
ransome1's avatar
ransome1 committed
276
}
277
code, pre {
278
279
280
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
  background-color: $light-grey !important;
  color: inherit !important;
ransome1's avatar
ransome1 committed
281
}
ransome1's avatar
ransome1 committed
282
283
284
285
286

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

ransome1's avatar
ransome1 committed
287
#noResultContainer {
ransome1's avatar
ransome1 committed
288
  height: 80%;
ransome1's avatar
ransome1 committed
289
290
291
292
}

.contentContainer {
  height: 100%;
ransome1's avatar
ransome1 committed
293
294
295
  p {
    padding: 0 10%;
  }
ransome1's avatar
ransome1 committed
296
}
ransome1's avatar
ransome1 committed
297
298
.contentContainer.is-active {
  display: flex!important;
ransome1's avatar
ransome1 committed
299
}
ransome1's avatar
ransome1 committed
300

ransome1's avatar
ransome1 committed
301
302
303
304
305
#errorContainer {
  display: none;
  p {
    margin: .1em 0;
  }
306
307
308
  i {
    color: white!important;
  }
ransome1's avatar
ransome1 committed
309
}
ransome1's avatar
ransome1 committed
310

ransome1's avatar
ransome1 committed
311
#datePickerInput {
ransome1's avatar
ransome1 committed
312
313
  cursor: pointer;
}
314

ransome1's avatar
ransome1 committed
315
316
317
318
//  ####################################
//  MAIN CONTAINERS
//  ####################################

ransome1's avatar
ransome1 committed
319
320
321
322
323
324
325
326
327
328
329
330
.contentContainer {
  width: 100%;
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content:center;
  p {
    margin: .5em;
  }
  .fa-file-alt {
    font-size: 6em;
  }
ransome1's avatar
ransome1 committed
331
  .title.is-3 {
ransome1's avatar
ransome1 committed
332
    font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
333
334
335
336
337
338
339
340
341
342
343
    margin: .5em 0;
  }
  .subtitle {
    margin: .5em 0;
  }
  .btnOnboarding {
    font-size: 1em;
    margin: 0 1em;
    padding: .25em;
    text-decoration: none;
  }
ransome1's avatar
ransome1 committed
344
  .btnOnboarding i {
ransome1's avatar
ransome1 committed
345
346
347
    font-size: 5em;
    margin: .25em 0;
  }
ransome1's avatar
ransome1 committed
348
349
350
  .btnOnboarding:focus-visible {
    color: $almost-black;
  }
ransome1's avatar
ransome1 committed
351
352
353
354
}
.contentContainer.is-active {
  display: flex;
}
ransome1's avatar
ransome1 committed
355
356
357
358
359

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

ransome1's avatar
ransome1 committed
360
361
.columns {
  height: 100%;
362
  margin: 0 !important;
ransome1's avatar
ransome1 committed
363
364
365
366
367
368
369
370
371
372
373
  .column {
    position: relative;
    .is-right {
      float: right;
    }
  }
  .column.content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
ransome1's avatar
ransome1 committed
374
375
376
377
378

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

379
#messages {
ransome1's avatar
ransome1 committed
380
381
  width: 25em;
  position: fixed;
382
  right: 2em;
ransome1's avatar
ransome1 committed
383
  bottom: 1em;
384
  z-index: 45!important;
ransome1's avatar
ransome1 committed
385
386
387
  i {
    color: $has-text-link;
  }
ransome1's avatar
ransome1 committed
388
389
  .message {
    display: none;
ransome1's avatar
ransome1 committed
390
    .message-body .brands i {
ransome1's avatar
ransome1 committed
391
392
      font-size: 2.25em;
      margin-right: .2em;
ransome1's avatar
ransome1 committed
393
      color: $has-text-link;
ransome1's avatar
ransome1 committed
394
395
    }
  }
ransome1's avatar
ransome1 committed
396
  button {
ransome1's avatar
ransome1 committed
397
398
399
400
401
    margin-top: .5em;
  }
  .message-body p {
    margin-bottom: .5em;
  }
402
403
404
  .notification.is-danger {
    background-color: $has-text-danger;
  }
ransome1's avatar
ransome1 committed
405
}
ransome1's avatar
ransome1 committed
406

ransome1's avatar
ransome1 committed
407
408
409
410
//  ####################################
//  IMPORT MODULES
//  ####################################

ransome1's avatar
ransome1 committed
411
@import "navigation.scss";
ransome1's avatar
ransome1 committed
412
@import "search.scss";
ransome1's avatar
ransome1 committed
413
@import "compact.scss";
ransome1's avatar
ransome1 committed
414
415
416
417
418
419
@import "filterButtons.scss";
@import "drawer.scss";
@import "modal.scss";
@import "recurrencePicker.scss";
@import "todoTable.scss";
@import "toggle.scss";
ransome1's avatar
ransome1 committed
420
421
@import "datepicker.scss";
@import "../../node_modules/bulma/bulma.sass";