style.scss 7.06 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.card {
  box-shadow: 0 0 1em $mid-grey;
  //box-shadow: none!important;
}

.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 {
    color: $almost-black!important;
    background-color: $almost-white!important;
  }
}

ransome1's avatar
ransome1 committed
70
71
72
73
//  ####################################
//  BUTTONS
//  ####################################

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

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

input,
select,
textarea {
  border: none!important;
  box-shadow: none!important;
  outline: none!important;
ransome1's avatar
ransome1 committed
112
}
ransome1's avatar
ransome1 committed
113
input::placeholder {
ransome1's avatar
ransome1 committed
114
115
  color: $dark-grey;
}
ransome1's avatar
ransome1 committed
116
117
118
119
120
input[type="text"],
input[type="search"],
textarea {
  border-radius: 1.5em;
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
121
}
ransome1's avatar
ransome1 committed
122
123
124
125
126
127
128

.inputWrapper {
  position: relative;
  padding-top: 0.5em;
  input[type="search"],
  input[type="text"],
  textarea {
ransome1's avatar
ransome1 committed
129
130
131
132
    padding: 2em 1em 1.2em 1.5em;
  }
  textarea {
    padding-bottom: 0.75em
ransome1's avatar
ransome1 committed
133
134
135
136
137
138
139
140
141
142
143
144
145
  }
  input::placeholder,
  textarea::placeholder {
    color: $mid-grey;
  }
  label {
    cursor: pointer;
    font-size: 0.75em;
    position: absolute;
    top: 1.3em;
    left: 2.5em;
    z-index: 70;
  }
ransome1's avatar
ransome1 committed
146
}
ransome1's avatar
ransome1 committed
147
148
149
150
151
152
153
.is-focused .inputWrapper,
.inputWrapper.is-focused {
  label,
  i.fa-search {
    color: $has-text-link;
  }
}
ransome1's avatar
ransome1 committed
154
155
156
157
158
159
160
161

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
162
163
164
165
input[type="range"],
input[type="range"]:focus {
  height: 0.7em;
  padding: 0.1em;
ransome1's avatar
ransome1 committed
166
  -webkit-appearance: none;
ransome1's avatar
ransome1 committed
167
168
169
170
171
172
173
174
175
176
177
178
  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;
  box-shadow: 0 0 1em white;
ransome1's avatar
ransome1 committed
179
}
ransome1's avatar
ransome1 committed
180
181
182
183
184

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

ransome1's avatar
ransome1 committed
185
186
table {
  width: 100%;
ransome1's avatar
ransome1 committed
187
  border-collapse: separate;
ransome1's avatar
ransome1 committed
188
189
  tr {
    th {
190
      padding: .1em 0 !important;
ransome1's avatar
ransome1 committed
191
      font-size: 1.2em;
ransome1's avatar
ransome1 committed
192
      font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
193
194
195
    }
    td {
      border: none;
196
      padding: .5em 2em .5em 0 !important;
ransome1's avatar
ransome1 committed
197
198
199
200
201
202
203
204
205
206
207
    }
  }
}
table.files {
  margin: 0;
  tr {
    td {
      vertical-align: middle;
    }
    td:first-child {
      width: 3em;
ransome1's avatar
ransome1 committed
208
      text-align: center;
ransome1's avatar
ransome1 committed
209
210
    }
    td:last-child {
ransome1's avatar
ransome1 committed
211
212
      a {
        padding: 0.5em;
213
        color: $has-text-link;
ransome1's avatar
ransome1 committed
214
215
216
217
        cursor: pointer;
      }
      a:focus-visible {
        color: $dark-grey;
218
      }
ransome1's avatar
ransome1 committed
219
220
    }
  }
ransome1's avatar
ransome1 committed
221
222
223
224
225
226
227
228
  button {
    color: white;
    background: $has-text-link;
  }
  button:disabled {
    color: $mid-grey;
    background: $almost-white;
  }
ransome1's avatar
ransome1 committed
229
}
ransome1's avatar
ransome1 committed
230
231
232
233
234

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

ransome1's avatar
ransome1 committed
235
236
237
:focus,
:focus-visible {
  box-shadow: none;
ransome1's avatar
ransome1 committed
238
  outline: none;
ransome1's avatar
ransome1 committed
239
}
ransome1's avatar
ransome1 committed
240

ransome1's avatar
ransome1 committed
241
242
243
input:focus,
select:focus {
  background-color: $almost-white!important;
ransome1's avatar
ransome1 committed
244
245
}

ransome1's avatar
ransome1 committed
246
247
248
button:focus-visible {
  color: $almost-white!important;
  background: $dark-grey!important;
249
}
ransome1's avatar
ransome1 committed
250
251
252
253
254

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

ransome1's avatar
ransome1 committed
255
256
.title,
strong {
ransome1's avatar
ransome1 committed
257
  font-family: "FreeSansBold";
258
  font-weight: normal !important;
ransome1's avatar
ransome1 committed
259
}
260
code, pre {
261
262
263
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
  background-color: $light-grey !important;
  color: inherit !important;
ransome1's avatar
ransome1 committed
264
}
ransome1's avatar
ransome1 committed
265
266
267
268
269

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

ransome1's avatar
ransome1 committed
270
#noResultContainer {
ransome1's avatar
ransome1 committed
271
  height: 80%;
ransome1's avatar
ransome1 committed
272
273
274
275
}

.contentContainer {
  height: 100%;
ransome1's avatar
ransome1 committed
276
277
278
  p {
    padding: 0 10%;
  }
ransome1's avatar
ransome1 committed
279
}
ransome1's avatar
ransome1 committed
280
281
.contentContainer.is-active {
  display: flex!important;
ransome1's avatar
ransome1 committed
282
}
ransome1's avatar
ransome1 committed
283

ransome1's avatar
ransome1 committed
284
285
286
287
288
#errorContainer {
  display: none;
  p {
    margin: .1em 0;
  }
289
290
291
  i {
    color: white!important;
  }
ransome1's avatar
ransome1 committed
292
}
ransome1's avatar
ransome1 committed
293

ransome1's avatar
ransome1 committed
294
#datePickerInput {
ransome1's avatar
ransome1 committed
295
296
  cursor: pointer;
}
297

ransome1's avatar
ransome1 committed
298
299
300
301
//  ####################################
//  MAIN CONTAINERS
//  ####################################

ransome1's avatar
ransome1 committed
302
303
304
305
306
307
308
309
310
311
312
313
.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
314
  .title.is-3 {
ransome1's avatar
ransome1 committed
315
    font-family: "FreeSansBold";
ransome1's avatar
ransome1 committed
316
317
318
319
320
321
322
323
324
325
326
    margin: .5em 0;
  }
  .subtitle {
    margin: .5em 0;
  }
  .btnOnboarding {
    font-size: 1em;
    margin: 0 1em;
    padding: .25em;
    text-decoration: none;
  }
ransome1's avatar
ransome1 committed
327
  .btnOnboarding i {
ransome1's avatar
ransome1 committed
328
329
330
    font-size: 5em;
    margin: .25em 0;
  }
ransome1's avatar
ransome1 committed
331
332
333
  .btnOnboarding:focus-visible {
    color: $almost-black;
  }
ransome1's avatar
ransome1 committed
334
335
336
337
}
.contentContainer.is-active {
  display: flex;
}
ransome1's avatar
ransome1 committed
338
339
340
341
342

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

ransome1's avatar
ransome1 committed
343
344
.columns {
  height: 100%;
345
  margin: 0 !important;
ransome1's avatar
ransome1 committed
346
347
348
349
350
351
352
353
354
355
356
  .column {
    position: relative;
    .is-right {
      float: right;
    }
  }
  .column.content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
ransome1's avatar
ransome1 committed
357
358
359
360
361

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

362
#messages {
ransome1's avatar
ransome1 committed
363
364
  width: 25em;
  position: fixed;
365
  right: 2em;
ransome1's avatar
ransome1 committed
366
  bottom: 1em;
367
  z-index: 45!important;
ransome1's avatar
ransome1 committed
368
369
370
  i {
    color: $has-text-link;
  }
ransome1's avatar
ransome1 committed
371
372
  .message {
    display: none;
ransome1's avatar
ransome1 committed
373
    .message-body .brands i {
ransome1's avatar
ransome1 committed
374
375
      font-size: 2.25em;
      margin-right: .2em;
ransome1's avatar
ransome1 committed
376
      color: $has-text-link;
ransome1's avatar
ransome1 committed
377
378
    }
  }
ransome1's avatar
ransome1 committed
379
  button {
ransome1's avatar
ransome1 committed
380
381
382
383
384
    margin-top: .5em;
  }
  .message-body p {
    margin-bottom: .5em;
  }
385
386
387
  .notification.is-danger {
    background-color: $has-text-danger;
  }
ransome1's avatar
ransome1 committed
388
}
ransome1's avatar
ransome1 committed
389

ransome1's avatar
ransome1 committed
390
391
392
393
//  ####################################
//  IMPORT MODULES
//  ####################################

ransome1's avatar
ransome1 committed
394
@import "navigation.scss";
ransome1's avatar
ransome1 committed
395
@import "search.scss";
ransome1's avatar
ransome1 committed
396
@import "compact.scss";
ransome1's avatar
ransome1 committed
397
398
399
400
401
402
@import "filterButtons.scss";
@import "drawer.scss";
@import "modal.scss";
@import "recurrencePicker.scss";
@import "todoTable.scss";
@import "toggle.scss";
ransome1's avatar
ransome1 committed
403
404
@import "datepicker.scss";
@import "../../node_modules/bulma/bulma.sass";