|
|
@tailwind base; |
|
|
@tailwind components; |
|
|
@tailwind utilities; |
|
|
|
|
|
@import '~@vue/ui/dist/vue-ui.css' |
|
|
|
|
|
@import 'imports' |
|
|
@import 'transitions' |
|
|
|
|
|
@font-face |
|
|
font-family 'Roboto' |
|
|
font-style normal |
|
|
font-weight 400 |
|
|
src local('Roboto'), local('Roboto-Regular'), url(../Roboto-Regular.woff2) format('woff2') |
|
|
|
|
|
@font-face |
|
|
font-family 'Roboto Mono' |
|
|
font-style normal |
|
|
font-weight 400 |
|
|
src local('Roboto Mono'), local('Roboto-Mono'), url(../Roboto-Mono.ttf) format('truetype') |
|
|
|
|
|
html, body |
|
|
margin 0 |
|
|
padding 0 |
|
|
font-family Roboto |
|
|
font-size 16px |
|
|
color #444 |
|
|
height 100% |
|
|
|
|
|
body |
|
|
overflow hidden |
|
|
|
|
|
#app |
|
|
width: 100% |
|
|
height: 100% |
|
|
|
|
|
button:focus |
|
|
outline none |
|
|
|
|
|
.selectable-item |
|
|
background-color $background-color |
|
|
&:hover |
|
|
background-color $hover-color |
|
|
&.selected, |
|
|
&.active |
|
|
background-color $active-color |
|
|
color #fff |
|
|
.item-name, |
|
|
.arrow |
|
|
color #fff |
|
|
|
|
|
.vue-ui-dark-mode & |
|
|
background-color $dark-background-color |
|
|
&:hover |
|
|
background-color $dark-hover-color |
|
|
.arrow |
|
|
color theme('colors.gray.600') |
|
|
&.selected, |
|
|
&.active |
|
|
color #fff |
|
|
background-color $active-color |
|
|
|
|
|
.vue-ui-icon svg |
|
|
fill currentColor |
|
|
|
|
|
|
|
|
|
|
|
.keyboard |
|
|
display inline-block |
|
|
min-width 22px |
|
|
text-align center |
|
|
background rgba($grey, .3) |
|
|
padding 2px 4px 0 |
|
|
border-radius 3px |
|
|
margin-bottom 6px |
|
|
box-shadow 0 3px 0 rgba($grey, .2) |
|
|
.vue-ui-dark-mode & |
|
|
background rgba($grey, .9) |
|
|
box-shadow 0 3px 0 rgba($grey, .6) |
|
|
|
|
|
.mono |
|
|
font-family Menlo, Consolas, monospace |
|
|
|
|
|
.v-popper__popper.v-popper--theme-tooltip |
|
|
pointer-events none |
|
|
font-size 12px |
|
|
|
|
|
.vue-ui-icon |
|
|
width 16px |
|
|
height @width |
|
|
vertical-align middle |
|
|
|
|
|
.vue-ui-dark-mode .v-popper__popper.v-popper--theme-tooltip .vue-ui-icon svg |
|
|
fill #666 |
|
|
|
|
|
.v-popper__popper.v-popper--theme-dropdown .v-popper__inner |
|
|
max-height calc(100vh - 32px - 8px - 4px) |
|
|
overflow-y auto |
|
|
|
|
|
.scroll-smooth |
|
|
scroll-behavior smooth |
|
|
|
|
|
.grayscale |
|
|
filter grayscale(1) |
|
|
|
|
|
.right-icon-reveal:not(:hover) |
|
|
.vue-ui-icon.right |
|
|
opacity 0 |
|
|
|
|
|
.v-popper--theme-tooltip |
|
|
.vue-ui-dark-mode & |
|
|
.v-popper__arrow-inner, |
|
|
.v-popper__arrow-outer |
|
|
border-color $vue-ui-white |
|
|
|
