ohif-viewer/Packages/ohif-design/styles/common/global.styl

357 lines
7.2 KiB
Stylus

@import '{ohif:design}/app'
html body
theme('background-color', '$primaryBackgroundColor')
font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
-webkit-backface-visibility: hidden // Prevent Chrome from shifting parent elements on transform
font-family: Roboto
html body.stretch
height: 100%
min-width: 0
overflow: hidden
position: fixed
width: 100%
html hr
theme('border-top', '1px solid $uiBorderColor')
body .table > thead > tr > th
theme('border-color', '$uiBorderColor')
body ol
margin: 0
padding-left: 1em
// This is needed for IE11 because svgxuse doesn't allow the browser to capture mouse events on SVG
svg, use
pointer-events: none
input::-ms-clear
display: none
label.form-group
width: 100%
&>span.select2
display: block
width: 100% !important
span.select2-selection
min-height: 34px
span.select2-selection__rendered
height: 34px
line-height: 34px
span.select2-selection__arrow
height: 34px
.select-small+span.select2.select2-container span.select2-selection
height: 20px
span.select2-selection__rendered
height: 20px
line-height: 20px
padding-left: 5px
padding-right: 17px
span.select2-selection__arrow
height: 20px
width: 12px
&:after
font-size: 12px
height: 20px
line-height: 20px
width: 12px
.select2-container-nowrap
.select2-dropdown
display: table
.select2-results__options li
white-space: nowrap
body .select2-container--default .select2-results>.select2-results__options
max-height: 320px
.center-table
display: table
margin-left: auto
margin-right: auto
.height-auto
height: auto !important
.caret-down
display: inline-block
width: 0
height: 0
margin-top: .5rem
border-top: 5px solid
border-right: 5px solid transparent
border-left: 5px solid transparent
.noselect
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
.btn
transition(background-color 0.3s ease)
.modal-dialog
.modal-content
theme('background-color', '$uiGrayDarker')
theme('border-color', '$uiBorderColor')
theme('color', '$textSecondaryColor')
border-radius(6px)
border: 0
.modal-header, .modal-footer
theme('border-color', '$uiBorderColor')
.dialog-separator,
.dialog-separator-before,
.dialog-separator-after
position: relative
.dialog-separator:before,
.dialog-separator:after,
.dialog-separator-before:before,
.dialog-separator-after:after
background-color: #000000
box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000)
content: ' '
display: block
height: 3px
left: 0
position: absolute
width: 100%
.dialog-separator:before,
.dialog-separator-before:before
top: -3px
.dialog-separator:after,
.dialog-separator-after:after
bottom: -3px
.modal-body
theme('color', '$textPrimaryColor')
padding: 16px 22px 25px
position: relative
.modal-header
border-bottom-width: 3px
border-bottom-style: solid
border-bottom-color: #000000
padding: 19px 22px 17px
position: relative
h4
theme('color', '$textSecondaryColor')
font-size: 20px
font-weight: 500
line-height: 24px
padding-right: 24px
.modal-footer
border-top: 0
.card-round
theme('background-color', '$uiGrayDark')
border-radius(5px)
padding: 10px
.modal-header
position: relative
button.close
position: absolute
right: 21px
top: 50%
transform(translateY(-50%))
transition(color 0.3s ease)
.button-close, .modal-dialog button.close
theme('color', '$textSecondaryColor')
height: 20px
opacity: 1
overflow: hidden
padding: 2px
text-align: center
text-shadow: none
width: 20px
&:hover span
&:before, &:after
theme('background-color', '$textPrimaryColor')
&:active span
&:before, &:after
theme('background-color', '$activeColor')
span
color: transparent
display: block
font-size: 0
height: 100%
line-height: 0
overflow: hidden
position: relative
width: 100%
&:before, &:after
theme('background-color', '$textSecondaryColor')
content: ' '
display: block
height: 2px
transition(background-color 0.3s ease)
width: 19px
&:before
left: 1px
position: absolute
top: 1px
transform(rotate(45deg))
transform-origin(1px 50%)
&:after
right: 1px
position: absolute
top: 1px
transform(rotate(-45deg))
transform-origin(calc(100% - 1px) 50%)
.full-width
width: 100%
.full-height
height: 100%
.flex-h
display: flex
flex-direction: row
.flex-v
display: flex
flex-direction: column
.flex-grow
flex-grow: 1
.nowrap
white-space: nowrap
.themed
table
theme('color', '$textPrimaryColor')
th, td
font-size: 15px
font-weight: normal
th
line-height: 60px
td
line-height: 18px
.btn
border: 0
border-radius(4px)
font-size: 15px
font-weight: normal
height: 37px
line-height: 37px
padding: 0 12px
&.btn-primary, &.btn-secondary
color: #000000
&:hover, &:active, &:focus, &:focus:active
color: #000000
&.btn-primary, &.btn-secondary, &.btn-danger
transition(background-color 0.3s ease)
&.btn-primary
theme('background-color', '$activeColor')
&:hover, &:active, &:focus, &:focus:active
theme('background-color', '$activeColor', 0.8)
&.btn-secondary
theme('background-color', '$textSecondaryColor')
&:hover, &:active, &:focus, &:focus:active
theme('background-color', '$textSecondaryColor', 0.8)
&.btn-danger
theme('background-color', '$destructiveColor')
theme('color', '$textPrimaryColor')
&:hover, &:active, &:focus, &:focus:active
theme('color', '$textPrimaryColor')
theme('background-color', '$destructiveColor', 0.8)
&.active
box-shadow(inset 1px 1px 2px rgba(0, 0, 0, 0.5))
.wrapperLabel .wrapperText
theme('color', '$textPrimaryColor')
font-size: 14px
font-weight: bold
line-height: 16px
&:not(:empty)
margin-bottom: 13px
.nav-tabs
border-bottom: 0
margin-bottom: 3px
position: relative
z-index: 1
&>li
font-size: 14px
font-weight: normal
height: 40px
line-height: 40px
margin-bottom: 0
&>a
display: block
width: 100%
line-height: inherit
margin: 0
height: inherit
padding: 0 10px 0 10px
&:after
background-color: transparent
bottom: -3px
content: ' '
display: block
height: 3px
transition(background-color 0.3s ease)
width: 100%
&>a, &.active>a
&, &:hover, &:active, &:focus
theme('color', '$activeColor')
background-color: transparent
border: 0
&.active>a
font-weight: bold
&:after
theme('background-color', '$activeColor')