app.styl 5.24 KB
Newer Older
1
// app global css
2
3
4
5
6
7
8
9
10
11
12
@import '~variables'

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * base styling
 */

a
  color $primary
  text-decoration none

body
christianrhansen's avatar
christianrhansen committed
13
14
  //background: $dark
  background: $grey-10
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * annotation colors
 */

.annotation-type-TextualBody
  fill: $annotation-text
  background: $annotation-text

.annotation-type-Video
  fill: $annotation-video
  background: $annotation-video

.annotation-type-VocabularyEntry
  fill: $annotation-vocabulary
  background: $annotation-vocabulary


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * quasar overrides
 */

38
39
40
.q-item
  min-height auto!important

41
42
43
44
45
46
47
48
49
50
.q-layout-drawer
  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none
  border: 1px solid $darker

.q-popover
  background: $dark
  border: 1px solid $darker

51
52
53
//.q-toolbar
//  padding: 0

54
55
.q-list
  border: 0
56
57
58
59
60
61
62
  .q-list-header
    font-size: 1rem
    > *:not(:last-child)
      margin-bottom: 12px

.q-item-separator-component:last-child
  display: block
63
64

.q-btn
65
66
  text-transform: none
  font-size: 1rem
67
68
69
  //&.q-btn-flat
  //  &:hover
  //    background: $medium
70
71
72
73
74
75
76
77

// TODO: do we need to use -dark quasar modifiers or just style the default option?
.q-table-container
.q-card
  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none

78
79
80
.q-table-horizontal-separator tbody tr:last-of-type td
  border none!important

81
82
.q-table-container.q-table-dark
  .q-table-top
83
    //border-top: 1px solid $darker
84
85
86
87
88
89
90
91
92
  td
  table
  thead
    border-color: $darker
  tbody
    tr
      &:hover
        background: $darker

93
94
95
96
97
.q-table-top,
.q-table-control
  padding 0!important
  min-height auto

christianrhansen's avatar
christianrhansen committed
98
99
.border-darker
  border 1px solid $darker
100

christianrhansen's avatar
christianrhansen committed
101
102
103
.bg-darker
  background-color $darker

104
105
106
107
108
109
.q-field-bottom
  display none

.q-field-content > div
  margin-top 0
  margin-bottom 0
110
111
112
113
114
115

.q-table-dark .q-table-top
  border-top 0

.q-table-top .q-table-control
  min-height 0
116
117
118
119
120
121
122
123

.q-collapsible-inner > .q-item
  padding-left 0!important
  padding-right 0!important

.q-collapsible-sub-item
  padding-left 0
  padding-right 0
124

125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
.q-if-standard.q-if-has-label
  padding-top: 1.25rem

.q-select
  &.q-if-standard.q-if-has-label
    padding: 26px 8px 6px 12px

.q-option-group
  &.group
    > *
      margin-left: 0

.q-field-floating
  .q-field-margin
    margin-top: 1.25rem

141
142
143
144
.q-tab
  text-transform none
  font-size 1rem
  &.active
145
146
147
    color: $primary
    background: $primary15
  .q-tabs-bar
148
    background: $primary
149
150
.q-tabs-global-bar
  border-color: $primary
151
152
153
@media screen and (max-width: 767px)
  h5
    font-size 20px
154

155
156
157
158
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * custom ui classes
 */

159
160
161
162
163
164
165
166
167
168
169
170
171
172
.router-button {
  vertical-align: middle
  cursor: pointer
  padding: 4px 16px
  font-size: 14px
  text-decoration: none
  color: white
  border-radius: 3px
  background: $faded
  -webkit-transition: .3s cubic-bezier(.25,.8,.5,1)
  transition: .3s cubic-bezier(.25,.8,.5,1)
  min-height: 2.572em
}

173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
.flex-fit-column
  flex-grow: 1

.ui-border
  border: 1px solid $darker

.ui-border-left
  border-left: 1px solid $darker

.ui-border-right
  border-right: 1px solid $darker

.ui-border-bottom
  border-bottom: 1px solid $darker

.ui-border-top
  border-top: 1px solid $darker

191
192
193
194
195
196
197
198
199
200
201
202
203
204
.ui-directory-link
  width: 100%
  display: inline-block
  .q-btn
    width: 100%
  i
    position: absolute
    top: 0
    right: 8px
    height: 100%

.ui-button-list
  .q-list-header
  .q-item
205
206
207
    //padding-right: 0
    //padding-left: 0
    padding: 4px 0
208
209
  .q-list-header
    padding-top: 0
210
211
212
213
214
215
216
217
218
219
  .q-item-separator-component
    margin: 4px 0

.ui-tab-pane-inner-button
  position: absolute
  top: 28px
  right: 28px

.q-item.button-item
    padding: 0
220

221
222
223
.icon-color-inactive
  color: $light

224
225
226
227
228
229
230
.popup-shadow
  background: $medium
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.5)
  -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.5)
  box-shadow: 0 10px 30px rgba(0,0,0,0.5)
  border: 1px solid $darker

231
232
233
234
235
236
237
.data-list-compact
  &.q-list
  .q-list
  .q-list-header
  .q-item
    padding 0

238

christianrhansen's avatar
christianrhansen committed
239
240
241
.bg-frosted-glass
  backdrop-filter blur(6px)
  background-color rgba(255, 255, 255, .3)
242
  //border-radius .5rem
243
244
245
246
247
248
249
250
251
252
253
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* color modifier classes
*/

.background-black
  background-color: $darker

.background-primary-20
  background-color: $primary15


254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* svg color classes
*/

.fill-black
  fill: $darker

.fill-dark
  fill: $dark

.fill-grey
  fill: $grey

.fill-faded
  fill: $faded

.fill-medium
  fill: $medium

.fill-fadedlight
  fill: #757173

.fill-light
  fill: $light

.fill-neutral
  fill: $neutral

.fill-white
  fill: white

.fill-primary
  fill: $primary


.stroke-highlight
  stroke-width: 1px
  stroke: $sl-highlight

.stroke-primary
  stroke-width: 1px
  stroke: $primary

.stroke-secondary
  stroke-width: 1px
  stroke: $secondary

.stroke-neutral
  stroke-width: 1px
  stroke: $neutral

.stroke-black
  stroke-width: 1px
  stroke: $darker

.stroke-dark
  stroke-width: 1px
  stroke: $dark

.stroke-medium
  stroke-width: 1px
  stroke: $medium

.stroke-grey
  stroke-width: 1px
  stroke: $grey

.stroke-faded
  stroke-width: 1px
  stroke: $faded

.stroke-light
  stroke-width: 1px
  stroke: $light

.stroke-white
  stroke-width: 1px
  stroke: white