Style modal dialog and status-debug classes

This commit is contained in:
2016-10-13 19:24:53 +02:00
parent 7b5b3d432e
commit b63faacdcf

View File

@@ -27,20 +27,36 @@ nav.sidebar
width: $sidebar-width width: $sidebar-width
height: 100% height: 100%
background-color: $color-background-nav background-color: $color-background-nav
display: flex
flex-direction: column
dl ul
dd width: 100%
margin: 0 margin: 0
a padding: 0
&.bottom
margin-top: auto
li
display: block
padding: 0
margin: 0
a, button
display: flex display: flex
color: $color-text-light-hint color: $color-text-light-hint
font-size: 1.5em font-size: 1.5em
align-items: center align-items: center
justify-content: center justify-content: center
padding: 10px 0 padding: 10px 0
background: transparent
border: none
width: 100%
&:hover &:hover
color: $color-text-light-primary color: $color-text-light-primary
&:active
outline: none
#col_sidebar #col_sidebar
width: $sidebar-width width: $sidebar-width
@@ -204,3 +220,69 @@ select.input-transparent
.fg-status .fg-status
@include status-color-property(color, '', 'dark') @include status-color-property(color, '', 'dark')
.modal-content
border: none
border-radius: 3px
box-shadow: 0 0 25px rgba(black, .25)
background-color: $color-background-light
.modal-header
border-top-left-radius: 3px
border-top-right-radius: 3px
background-color: white
padding: 10px 10px 10px 15px
.title
font-size: 1.2em
.close
float: right
background: transparent
border: none
color: $color-text-dark-hint
&:hover
color: $color-primary
.modal-backdrop
background-color: $color-background-nav
.modal-help-panel
overflow: hidden
border-radius: 3px
width: 30%
background-color: white
box-shadow: 1px 2px 10px rgba(black, .1)
.title
display: block
padding: 10px
color: $color-text-dark-primary
.status-debug-item
width: 100%
.status-debug-item-statuses
display: flex
align-items: center
justify-content: center
color: $color-text
text-shadow: 1px 1px 0 rgba(white, .3)
.light, .regular, .dark
flex: 1
min-height: 25px
display: flex
align-items: center
justify-content: center
.light
@include status-color-property(background-color, '', 'light')
.regular
flex: 3
@include status-color-property(background-color, '', '')
.dark
@include status-color-property(background-color, '', 'dark')