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