juggl/src/style/theme.sass
2021-01-05 02:00:10 +01:00

146 lines
No EOL
3.7 KiB
Sass

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap')
// Color scheme
$grey: #BBB
$black: #000
$white: #fff
$primary: #F00
$secondary: $grey
$red: $primary
$background-primary: #222
$background-secondary: #191919
// $background-gradient: linear-gradient(165deg, $background-primary 65%, $background-secondary 100%)
$font-primary: $white
$font-inactive: $grey
$font-secondary: $primary
$font-inverted: $black
$font-link: $secondary
// Default text
*
font-family: "Karla", sans-serif
color: $font-primary
transition-duration: 0.1s
::selection
background: $primary
color: $black
// Components
$navbar-height: 4rem
body
background: $background-primary !important
margin: 0
// background: $background-primary !important
// background: -moz-linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
// background: -webkit-linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
// background: linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
// background-attachment: fixed !important
.hidden
display: none
.form-group
label
color: $font-secondary
margin-bottom: -0.1em
margin-left: 0.1em
input
background-color: $background-primary !important
color: $font-primary !important
a
color: $font-link !important
&:hover
color: $background-primary !important
.b-dropdown, .dropdown
border-radius: 0
background: #0000
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after
border-bottom-color: $white !important
.dropdown-menu, .b-popover
background-color: $background-secondary !important
border: 1px solid $white !important
color: $primary
.b-time *,
background-color: $background-primary !important
#dropdown .dropdown-menu
*:hover
color: $white !important
background: darken($primary, 20) !important
*:active
color: $white !important
background: $primary !important
.custom-checkbox
label
color: $font-primary !important
a.btn-secondary, a.btn-primary
color: $font-primary !important
#title
font-weight: bold
.breadcrumb
background-color: #FFF0 !important
.breadcrumb-item + .breadcrumb-item::before
content: ">" !important
.breadcrumb-item.active
span
color: $font-secondary !important
// .modal-content
// background-color: $background-primary
// .modal-header button.close
// color: $font-primary !important
header.b-calendar-grid-caption, .b-calendar-grid-weekdays *, header.b-calendar-header *
color: $font-inverted !important
.b-form-datepicker, .b-form-timepicker
background-color: $background-primary !important
.b-form-datepicker label:not(.text-muted), .b-form-timepicker label:not(.text-muted)
color: $font-primary !important
input:disabled, .b-form-timepicker[aria-disabled=true], .b-form-datepicker[aria-disabled=true], .input-group-prepend.disabled *
color: $font-inactive !important
border-color: $background-primary !important
input, .input-group-prepend *
color: $font-primary !important
border-color: $grey !important
background-color: $background-primary !important
select
background-color: $background-primary !important
color: $font-primary !important
div.card
background-color: $background-secondary
border-color: $white
pre
color: $font-primary !important
hr
border-color: $white !important
// Import Bootstrap and BootstrapVue source SCSS files
@import '~bootstrap/scss/bootstrap.scss'
@import '~bootstrap-vue/src/index.scss'