othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-281: Replacing variables for theme calls

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-08-23 14:24:51 -03:00 committed by Erik Ziegler
parent 52770dc79c
commit e9ec386e72
55 changed files with 341 additions and 446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
View File

@ -27,11 +27,11 @@ $lesionsSidebarMenuWidth = 450px
transform(translateX(0%))
.sidebar-left
max-width: $studiesSidebarMenuWidth
order: 1
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
flex: 1
margin-left: - $studiesSidebarMenuWidth
border-right: $uiBorderThickness $uiBorderColor solid
max-width: $studiesSidebarMenuWidth
order: 1
&.sidebar-open
margin-left: 0
@ -62,7 +62,7 @@ $lesionsSidebarMenuWidth = 450px
max-width: $lesionsSidebarMenuWidth + 270px
&:before
background-color: $uiBorderColor
theme('background-color', '$uiBorderColor')
content: ''
display: block
height: 100%
@ -75,6 +75,6 @@ $lesionsSidebarMenuWidth = 450px
margin-right: 0
.studiesListedChanger
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
padding: 20px 10px
text-align: center
border-bottom: $uiBorderThickness $uiBorderColor solid

20
OHIFViewer/client/components/ohifViewer/ohifViewer.styl
View File

@ -9,8 +9,8 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
color: $textPrimaryColor
background-color: $primaryBackgroundColor
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
.brandSection
@ -26,14 +26,14 @@ $expandedHeight = 160px
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
line-height: 30px
.studyListLinkSection
border-left: $uiBorderThickness solid $uiBorderColor;
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
.btn
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
cursor: pointer
font-size: 13px
font-weight: 500
@ -41,10 +41,10 @@ $expandedHeight = 160px
margin-top: 3px
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
&.studyList
background-color: rgba(21, 25, 30, 0.7)
@ -75,5 +75,5 @@ $expandedHeight = 160px
.tab-pane
.viewerContainer
.loadingTextDiv
color: $textSecondaryColor
font-size: 30px
theme('color', '$textSecondaryColor')
font-size: 30px

4
OHIFViewer/client/components/toolbarSection/toolbarSection.styl
View File

@ -1,7 +1,7 @@
@import "{design}/app"
.toolbarSection
border-bottom: $uiBorderColor $uiBorderThickness solid
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
flex: 0 0 auto
height: $toolbarHeight
overflow: hidden
@ -11,4 +11,4 @@
width: 100%
&.expanded
height: $toolbarHeight + $toolbarDrawerHeight
height: $toolbarHeight + $toolbarDrawerHeight

2
OHIFViewer/client/components/viewer/viewer.styl
View File

@ -6,5 +6,5 @@
width: 100%
.loadingTextDiv
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 30px

30
Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
View File

@ -1,7 +1,7 @@
@import "{design}/app"
$height = 25px
$textColorActive = #2D2D2D
$textColorButtonActive = #2D2D2D
.roundedButtonGroup
@ -15,9 +15,9 @@ $textColorActive = #2D2D2D
.roundedButton
align-items: center
background-color: $uiGrayDark
border: 2px $uiBorderColorDark solid
color: $textSecondaryColor
theme('background-color', '$uiGrayDark')
theme('border', '2px solid $uiBorderColorDark')
theme('color', '$textSecondaryColor')
display: flex
font-size: 11px
font-weight: 500
@ -29,19 +29,19 @@ $textColorActive = #2D2D2D
transition: transition($sidebarTransition)
svg
fill: $defaultColor
stroke: $defaultColor
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
svg
span
margin: 0 2px
i
line-height: 15px
font-size: 15px
.bottomLabel
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 12px
font-weight: 500
line-height: 12px
@ -58,16 +58,16 @@ $textColorActive = #2D2D2D
border-top-right-radius: $height
&:hover .roundedButton
background-color: $boxBackgroundColor
color: $uiGrayDark
theme('color', '$uiGrayDark')
theme('background-color', '$boxBackgroundColor')
&.active .roundedButton
background-color: $activeColor
border-color: $uiBorderColorActive
color: $textColorActive
theme('background-color', '$activeColor')
theme('border-color', '$uiBorderColorActive')
color: $textColorButtonActive
&:hover .roundedButton
&.active .roundedButton
svg
fill: $uiGrayDark
stroke: $uiGrayDark
theme('fill', '$uiGrayDark')
theme('stroke', '$uiGrayDark')

12
Packages/design/styles/common/global.styl
View File

@ -2,11 +2,9 @@
html body
font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
// Try to fix LT-273, need a monitor to test on though.
//text-rendering: optimizeLegibility
html hr
border-top: 1px solid $uiBorderColor
theme('border-top', '1px solid $uiBorderColor')
label.form-group
width: 100%
@ -49,9 +47,9 @@ label.form-group
.modal-dialog
.modal-content
background: $primaryBackgroundColor
border-color: $uiBorderColor
color: $textSecondaryColor
theme('background', '$primaryBackgroundColor')
theme('border-color', '$uiBorderColor')
theme('color', '$textSecondaryColor')
.modal-header, .modal-footer
border-color: $uiBorderColor
theme('border-color', '$uiBorderColor')

12
Packages/design/styles/components/radio.styl
View File

@ -3,12 +3,12 @@
.group-radio
label
cursor: pointer
input
height: 0
width: 0
visibility: hidden
span
padding-left: 23px
position: relative
@ -23,14 +23,14 @@
top: 50%
transform(translateY(-50%))
width: 16px
input:focus + span:before
// TODO: [design] define a outline for the design
theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
outline: none
box-shadow: 0 0 2px 2px $textSecondaryColor
input:checked + span:after
background: $uiBorderColorDark
theme('background', '$uiBorderColorDark')
border-radius: 5px
content: ''
height: 10px

4
Packages/design/styles/components/select2.styl
View File

@ -22,8 +22,8 @@ span.select2.select2-container
padding-left: 11px
span.select2-selection__arrow
theme('border-left', '1px solid $primaryBackgroundColor')
background-color: $gray1
border-left: 1px solid $primaryBackgroundColor
border-top-right-radius: $borderRadius
border-bottom-right-radius: $borderRadius
right: 0
@ -42,8 +42,8 @@ span.select2.select2-container
placeholder-color($gray4)
li.select2-selection__choice
theme('border-color', '$uiGray')
background-color: #FFF
border-color: $uiGray
border-radius: $borderRadius
color: $gray4
font-size: 12px

82
Packages/design/styles/imports/theme-tide.styl
View File

@ -18,7 +18,6 @@ $themes['tide'] = {
$uiBorderColorActive: #00a4d9
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
$boxBackgroundColorDark: #22374D
// Text Colors
$textColorActive: black //#89bae5
@ -26,86 +25,5 @@ $themes['tide'] = {
$textSecondaryColor: #6a8fb1
// Other Colors
$menuBackgroundColor: #F2F2F2
$imageSliderColor: #163239
// Viewport Settings
$viewportBorderThickness: 1px
$viewportBorderColor: $uiBorderColorDark
$viewportBorderColorHover: $uiBorderColor
$viewportBorderColorActive: $uiBorderColorActive
// Sizes
$topBarHeight: 40px
$toolbarHeight: 78px
$toolbarDrawerHeight: 62px
// Thicknesses
$uiBorderThickness: 1px
// Fonts
$logoFontFamily: "Sanchez"
$logoFontWeight: 300
// Transitions
$transitionDuration: 0.3s
$transitionEffect: ease
$sidebarTransition: all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth: 307px
$lesionsSidebarMenuWidth: 323px
}
// Common pallete
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2
$uiLightGray = #516873
$uiGray = #263340
$uiGrayDark = #16202B
$uiGrayDarker = #151A1F
$uiGrayDarkest = #14191E
// Interface UI Colors
$defaultColor = #9cd0fe
$hoverColor = #ffffff
$activeColor = #00a4d9
$uiBorderColor = #436270
$uiBorderColorDark = #3C5D80
$uiBorderColorActive = #00a4d9
$primaryBackgroundColor = #000000
$boxBackgroundColor = #344a61
$boxBackgroundColorDark = #22374D
// Text Colors
$textColorActive = black //#89bae5
$textPrimaryColor = #ffffff
$textSecondaryColor = #6a8fb1
// Other Colors
$menuBackgroundColor = #F2F2F2
$imageSliderColor = #163239
// Viewport Settings
$viewportBorderThickness = 1px
$viewportBorderColor = $uiBorderColorDark
$viewportBorderColorHover = $uiBorderColor
$viewportBorderColorActive = $uiBorderColorActive
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
$toolbarDrawerHeight = 62px
// Thicknesses
$uiBorderThickness = 1px
// Fonts
$logoFontFamily = "Sanchez"
$logoFontWeight = 300
// Transitions
$transitionDuration = 0.3s
$transitionEffect = ease
$sidebarTransition = all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth = 307px
$lesionsSidebarMenuWidth = 323px

27
Packages/design/styles/imports/theme-tigerlilly.styl
View File

@ -18,7 +18,6 @@ $themes['tigerlilly'] = {
$uiBorderColorActive: #ff8a3d
$primaryBackgroundColor: #000000
$boxBackgroundColor: #5b3a59
$boxBackgroundColorDark: #4b2f40
// Text Colors
$textColorActive: black
@ -26,31 +25,5 @@ $themes['tigerlilly'] = {
$textSecondaryColor: #6a8fb1
// Other Colors
$menuBackgroundColor: #F2F2F2
$imageSliderColor: #4b2c3c //#163239
// Viewport Settings
$viewportBorderThickness: 1px
$viewportBorderColor: $uiBorderColorDark
$viewportBorderColorHover: $uiBorderColor
$viewportBorderColorActive: $uiBorderColorActive
// Sizes
$topBarHeight: 40px
$toolbarHeight: 78px
$toolbarDrawerHeight: 62px
// Thicknesses
$uiBorderThickness: 1px
// Fonts
$logoFontFamily: "Sanchez"
$logoFontWeight: 300
// Transitions
$transitionDuration: 0.3s
$transitionEffect: ease
$sidebarTransition: all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth: 307px
$lesionsSidebarMenuWidth: 323px
}

11
Packages/design/styles/imports/theming.styl
View File

@ -1,3 +1,9 @@
$themes = {}
$defaultTheme = 'tide'
@import "./theme-tide.styl"
@import "./theme-tigerlilly.styl"
parseSpaceVars($theme, $value)
$valueSplit = split(' ', $value)
$list = ''
@ -21,5 +27,6 @@ theme($property, $value)
/ {selector()}
{$property}: parseCommaVars($themes[$defaultTheme], $value)
for $themeName, $theme in $themes
/ body.theme-{$themeName} {selector()}
{$property}: parseCommaVars($theme, $value)
for $selectorPiece in split(',', selector())
/ body.theme-{$themeName} {$selectorPiece}
{$property}: parseCommaVars($theme, $value)

25
Packages/design/styles/imports/variables.styl
View File

@ -1,7 +1,22 @@
$themes = {}
$defaultTheme = 'tide'
@import "./theming.styl"
@import "./theme-tide.styl"
@import "./theme-tigerlilly.styl"
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
$toolbarDrawerHeight = 62px
$studiesSidebarMenuWidth = 307px
$lesionsSidebarMenuWidth = 323px
// Fonts
$logoFontFamily = "Sanchez"
$logoFontWeight = 300
// Transitions
$transitionDuration = 0.3s
$transitionEffect = ease
$sidebarTransition = all $transitionDuration $transitionEffect
// Thicknesses
$viewportBorderThickness = 1px
$uiBorderThickness = 1px

32
Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
View File

@ -3,12 +3,12 @@
$height = 20px
#protocolEditor
theme('background', '$primaryBackgroundColor')
height: 100%
width: 450px
padding: 10px 0
position: absolute
top: 0
background: $primaryBackgroundColor
.navigationButtons
ul
@ -35,27 +35,27 @@ $height = 20px
cursor: pointer
text-decoration: none
outline: none
background-color: $uiGrayDark
border: 2px $uiBorderColorDark solid
color: $textSecondaryColor
theme('background-color', '$uiGrayDark')
theme('border', '2px solid $uiBorderColorDark')
theme('color', '$textSecondaryColor')
transition: transition($sidebarTransition)
border-radius: $height
&.active a
background-color: $activeColor
border-color: $uiBorderColorActive
color: $textColorActive
theme('background-color', '$activeColor')
theme('border-color', '$uiBorderColorActive')
theme('color', '$textColorActive')
transition: transition($sidebarTransition)
p
h2
h3
h4
color: $defaultColor
theme('color', '$defaultColor')
label
ul
color: $defaultColor
theme('color', '$defaultColor')
font-weight: 400
label
@ -68,7 +68,7 @@ $height = 20px
width: 40%
border: none
background: #212121
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
button.btn
@ -85,11 +85,11 @@ $height = 20px
bottom: 0
width: 100%
margin-bottom: 0
background: $uiGrayDarker
theme('background', '$uiGrayDarker')
p
font-size: 8pt
color: $defaultColor
theme('color', '$defaultColor')
margin: 0 10px
display: inline-block
@ -107,11 +107,11 @@ $height = 20px
#selectProtocol
text-align: center
.btn-file
.btn-file
position: relative
overflow: hidden
.btn-file input[type=file]
.btn-file input[type=file]
position: absolute
top: 0
right: 0
@ -141,4 +141,4 @@ $height = 20px
padding: 40px
h3
color: $defaultColor
theme('color', '$defaultColor')

9
Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl
View File

@ -1,6 +1,9 @@
@import "{design}/app.styl"
.ruleEntryDialog
theme('background', '$uiGrayDarkest')
theme('border', '1px solid $uiBorderColor')
theme('color', '$textSecondaryColor')
display: none
position: absolute
top: 0
@ -14,12 +17,8 @@
padding: 10px
background-color: rgba(255,255,255,1)
outline: none
opacity: 0.95
border-radius: 8px
border: 1px solid $uiBorderColor
background: $uiGrayDarkest
color: $textSecondaryColor
.dialogContent
text-align: center
@ -44,4 +43,4 @@
color: black
height: 30px
border-radius: 2px
border: 0
border: 0

14
Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl
View File

@ -4,7 +4,7 @@ table.ruleTable
thead
tr
th
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
th:first-child
@ -13,7 +13,7 @@ table.ruleTable
tbody
tr
td
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
.failWarning
@ -26,10 +26,10 @@ table.ruleTable
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
td:first-child
text-align: left
@ -37,14 +37,14 @@ table.ruleTable
.addRuleContainer
margin: 10px 0
text-align: center
color: $defaultColor
theme('color', '$defaultColor')
.addRule
cursor: pointer
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')

9
Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl
View File

@ -1,6 +1,9 @@
@import "{design}/app.styl"
.settingEntryDialog
theme('border', '1px solid $uiBorderColor')
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
display: none
position: absolute
top: 0
@ -13,12 +16,8 @@
margin: auto
padding: 10px
outline: none
opacity: 0.95
border-radius: 8px
border: 1px solid $uiBorderColor
background: $uiGrayDarkest
color: $textSecondaryColor
.dialogContent
text-align: center
@ -43,4 +42,4 @@
color: black
height: 30px
border-radius: 2px
border: 0
border: 0

14
Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl
View File

@ -4,7 +4,7 @@ table.settingsTable
thead
tr
th
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
th:first-child
@ -15,7 +15,7 @@ table.settingsTable
tr
td
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
.editSetting
@ -24,10 +24,10 @@ table.settingsTable
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
td:first-child
text-align: left
@ -35,14 +35,14 @@ table.settingsTable
.addSettingContainer
margin: 10px 0
text-align: center
color: $defaultColor
theme('color', '$defaultColor')
.addSetting
cursor: pointer
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')

8
Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl
View File

@ -14,19 +14,19 @@
h3
label
color: $defaultColor
theme('color', '$defaultColor')
label
margin-right: 10px
width: 25%
input
theme('background-color', '$boxBackgroundColor')Dark
min-width: 50px
width: 40%
border: none
background: $boxBackgroundColorDark
color: $defaultColor
theme('color', '$defaultColor')
text-align: center
.stageEditorSection
margin: 30px 0
margin: 30px 0

24
Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
View File

@ -8,14 +8,14 @@
padding: 3px
span
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&.active
color: $activeColor
theme('color', '$activeColor')
.sortable-handle
cursor: move
@ -36,44 +36,44 @@
.deleteStage
cursor: pointer
color: $defaultColor
theme('color', '$defaultColor')
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
.addStage
margin: 10px 0
text-align: center
color: $defaultColor
theme('color', '$defaultColor')
#addStage
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
.moveStageButtons
margin: 10px 0
text-align: center
a
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
text-decoration: none
transition(all 0.1s ease)
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
&[disabled="true"]
opacity: 0.7

9
Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl
View File

@ -1,6 +1,9 @@
@import "{design}/app.styl"
.textEntryDialog
theme('border', '1px solid $uiBorderColor')
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
display: none
position: absolute
top: 0
@ -13,12 +16,8 @@
margin: auto
padding: 10px
outline: none
opacity: 0.95
border-radius: 8px
border: 1px solid $uiBorderColor
background: $uiGrayDarkest
color: $textSecondaryColor
.dialogContent
margin-bottom: 10px
@ -36,4 +35,4 @@
color: black
height: 30px
border-radius: 2px
border: 0
border: 0

20
Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
View File

@ -22,22 +22,22 @@
display: none
.header
theme('background-color', '$uiGray')
theme('color', '$textPrimaryColor')
height: 33px
line-height: 33px
font-weight: bold
font-size: 14px
padding: 1px 13px 0
color: $textPrimaryColor
background-color: $uiGray
.form-group
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
margin-bottom: 0
padding: 7px 27px 7px 11px
width: 100%
&:not(:last-child)
border-bottom: $uiBorderThickness solid $uiBorderColorDark
theme('border-bottom', '%s solid $uiBorderColorDark' % $uiBorderThickness)
& > .wrapperText
display: block
@ -81,21 +81,21 @@
.buttonSection
cursor: pointer
height: 90px
color: $defaultColor
theme('color', '$defaultColor')
&:hover
color: $hoverColor
theme('color', '$hoverColor')
.svgContainer
svg
fill: $hoverColor
theme('fill', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
.svgContainer
svg
fill: $activeColor
theme('fill', '$activeColor')
div
float: left
@ -112,4 +112,4 @@
svg
width: 36px
height: 36px
fill: $textPrimaryColor
theme('fill', '$textPrimaryColor')

6
Packages/lesiontracker/client/components/caseProgress/caseProgress.styl
View File

@ -13,15 +13,15 @@
margin-left: 22px
h5
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
line-height: 46px
margin: 0
font-size: 15px
font-weight: bold
button.btn
background-color: $activeColor
border: 1px solid $uiBorderColorActive
theme('background-color', '$activeColor')
theme('border', '1px solid $uiBorderColorActive')
color: #000
cursor: pointer
font-size: 15px

6
Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
View File

@ -25,11 +25,11 @@
transform(translateX(0%))
.sidebar-left
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
max-width: $studiesSidebarMenuWidth
order: 1
flex: 1
margin-left: - $studiesSidebarMenuWidth
border-right: $uiBorderThickness $uiBorderColor solid
&.sidebar-open
margin-left: 0
@ -60,7 +60,7 @@
max-width: $lesionsSidebarMenuWidth + 270px
&:before
background-color: $uiBorderColor
theme('background-color', '$uiBorderColor')
content: ''
display: block
height: 100%
@ -73,6 +73,6 @@
margin-right: 0
.studiesListedChanger
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
padding: 20px 10px
text-align: center
border-bottom: $uiBorderThickness $uiBorderColor solid

2
Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
View File

@ -1,7 +1,7 @@
@import "{design}/app"
#lesionTableContainer
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
height: 100%
width: 100%

30
Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl
View File

@ -22,9 +22,9 @@ $borderColor = rgba(77, 99, 110, 0.81)
padding-left: 0
.header
background: $uiGrayDarkest
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
border-bottom: $uiBorderThickness solid $borderColor
color: $textSecondaryColor
font-weight: 300
font-size: 20px
height: 55px
@ -34,12 +34,12 @@ $borderColor = rgba(77, 99, 110, 0.81)
width: 100%
svg.buttonClose
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
height: 14px
position: absolute
right: 14px
stroke: $defaultColor
theme('stroke', '$defaultColor')
top: 20px
width: 14px
@ -48,19 +48,19 @@ $borderColor = rgba(77, 99, 110, 0.81)
padding-bottom: 20px
.footer
theme('background', '$uiGrayDarkest')
border-top: $uiBorderThickness solid $borderColor
width: 100%
height: 70px
position: absolute
bottom: 0
background: $uiGrayDarkest
border-top: $uiBorderThickness solid $borderColor
padding: 10px
.toolbarSectionButton
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
theme('color', '$defaultColor')
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
padding: 0 10px
height: $toolbarHeight
min-width: 30px
@ -85,15 +85,15 @@ $borderColor = rgba(77, 99, 110, 0.81)
height: 21px
&:active, &.active
color: $activeColor
theme('color', '$activeColor')
svg
fill: $activeColor
stroke: $activeColor
theme('fill', '$activeColor')
theme('stroke', '$activeColor')
&:hover
color: $hoverColor
theme('color', '$hoverColor')
svg
fill: $hoverColor
stroke: $hoverColor
theme('fill', '$hoverColor')
theme('stroke', '$hoverColor')

20
Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
View File

@ -3,10 +3,10 @@
$headerRowHeight = 63px
.lesionTableHeaderRow
background-color: $uiGrayDarker
color: $textSecondaryColor
theme('background-color', '$uiGrayDarker')
theme('color', '$textSecondaryColor')
display: flex
fill: $textSecondaryColor
theme('fill', '$textSecondaryColor')
height: $headerRowHeight
line-height: $headerRowHeight
margin-top: 2px
@ -35,13 +35,13 @@ $headerRowHeight = 63px
max-width: 11px
&:hover
fill: $hoverColor
theme('fill', '$hoverColor')
&:active
fill: $activeColor
theme('fill', '$activeColor')
.type
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 22px
font-weight: 300
line-height: $headerRowHeight
@ -49,8 +49,8 @@ $headerRowHeight = 63px
text-align: left
.numberOfLesions
theme('color', '$uiSkyBlue')
float: right
color: $uiSkyBlue
font-weight: 300
font-size: 40px
max-width: 54px
@ -63,7 +63,7 @@ $headerRowHeight = 63px
text-align: right
.maxNumLesions
background-color: $textSecondaryColor
theme('background-color', '$textSecondaryColor')
border-radius: 3px
color: black
display: table
@ -79,5 +79,5 @@ $headerRowHeight = 63px
&.warning
.maxNumLesions
color: $textPrimaryColor
background-color: $uiYellow
theme('background-color', '$uiYellow')
theme('color', '$textPrimaryColor')

34
Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
View File

@ -10,7 +10,7 @@
width: calc(100% + 6px)
&:before
background-color: $activeColor
theme('background-color', '$activeColor')
border-top-left-radius: 7px
border-bottom-left-radius: 7px
content: ''
@ -30,16 +30,16 @@
opacity: 1
.lesionRowSidebar
color: $activeColor
theme('color', '$activeColor')
.rowOptions
height: 35px
visibility: visible
&.response-status .lesionRowSidebar .response-status-icon
background-color: $defaultColor
theme('background-color', '$defaultColor')
theme('color', '$uiGray')
border-radius: 11px
color: $uiGray
font-size: 12px
font-weight: 700
height: 21px
@ -49,8 +49,8 @@
width: 21px
&.warning .lesionRowSidebar
color: $textPrimaryColor
background-color: $uiYellow
theme('background-color', '$uiYellow')
theme('color', '$textPrimaryColor')
.warning-icon, svg
width: 22px
@ -60,31 +60,31 @@
margin: 7px auto 0
svg
fill: $textPrimaryColor
theme('fill', '$textPrimaryColor')
.rowOptions
background-color: $uiGrayDarker
theme('background-color', '$uiGrayDarker')
height: 0
overflow: hidden
transition(all 0.3s ease)
visibility: hidden
.rowAction
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
line-height: 35px
transition(all 0.3s ease)
&:hover, &:active
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
svg
fill: $textPrimaryColor
stroke: $textPrimaryColor
theme('fill', '$textPrimaryColor')
theme('stroke', '$textPrimaryColor')
svg
fill: $defaultColor
stroke: $defaultColor
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
transition(all 0.3s ease)
&.edit-icon
@ -96,8 +96,8 @@
height: 11px
.lesionRowSidebar
background: $uiGray
color: $textSecondaryColor
theme('background', '$uiGray')
theme('color', '$textSecondaryColor')
cursor: pointer
flex: 1
max-width: 30px
@ -120,7 +120,7 @@
.location
font-weight: 400
font-size: 14px
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
height: 30px
line-height: 30px
margin-left: -2px

4
Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl
View File

@ -1,6 +1,6 @@
@import "{design}/app"
.lesionTableTimepointCell
border-left: $uiBorderThickness $uiBorderColor solid
color: $textPrimaryColor
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
theme('color', '$textPrimaryColor')
padding: 0 10px

6
Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
View File

@ -5,18 +5,18 @@
justify-content: space-around
div
border-left: $uiBorderColor $uiBorderThickness solid
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
font-weight: 400
padding-left: 12px
text-align: left
.timepointName
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 12px
line-height: 12px
.timepointDate
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
font-size: 14px
line-height: 20px
padding-bottom: 6px

18
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
View File

@ -9,8 +9,8 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
color: $textPrimaryColor
background-color: $primaryBackgroundColor
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
.brandSection
@ -26,14 +26,14 @@ $expandedHeight = 160px
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
line-height: 30px
.studyListLinkSection
border-left: $uiBorderThickness solid $uiBorderColor;
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
.btn
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
cursor: pointer
font-size: 13px
font-weight: 500
@ -41,10 +41,10 @@ $expandedHeight = 160px
margin-top: 3px
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
&.studyList
background-color: rgba(21, 25, 30, 0.7)
@ -75,5 +75,5 @@ $expandedHeight = 160px
.tab-pane
.viewerContainer
.loadingTextDiv
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 30px

9
Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
View File

@ -10,9 +10,6 @@
opacity: 0
.btn-add
// color: $textColorActive
// background-color: $activeColor
// border: 2px solid $uiBorderColor
theme('color', '$textColorActive')
theme('background-color', '$activeColor')
theme('border', '2px solid $uiBorderColor')
@ -46,7 +43,7 @@
position: relative
.icon-check
background-color: $activeColor
theme('background-color', '$activeColor')
left: -46px
position: absolute
top: 3px
@ -73,10 +70,10 @@
animateFadeOut()
button
theme('border', '1px solid $uiBorderColor')
theme('color', '$textPrimaryColor')
background-color: transparent
border-radius: 16px
border: 1px solid $uiBorderColor
color: $textPrimaryColor
font-weight: normal
height: 31px
line-height: 31px

10
Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
View File

@ -11,12 +11,12 @@ $circleSize = 46px
#svg circle
stroke-dashoffset: 0
stroke: $uiBorderColorDark
theme('stroke', '$uiBorderColorDark')
stroke-width: 3px
vendorize(transition, stroke-dashoffset 1s linear)
#svg #bar
stroke: $activeColor
theme('stroke', '$activeColor')
vendorize(transform, rotate(270deg))
vendorize(transform-origin, center center)
@ -28,14 +28,14 @@ $circleSize = 46px
font-weight: 700
font-size: 17px
text-align: center
color: $activeColor
theme('color', '$activeColor')
top: 0
svg
fill: $activeColor
theme('fill', '$activeColor')
left: 50%
position: absolute
stroke: $activeColor
theme('stroke', '$activeColor')
top: 50%
transform(translateX(-50%) translateY(-50%))

18
Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
View File

@ -15,7 +15,7 @@ $seriesSpacing = 2px
transform(translateX(-50%))
&.left
border-right: 1px solid $uiBorderColor
theme('border-right', '1px solid $uiBorderColor')
right: 50%
&.right
@ -26,7 +26,7 @@ $seriesSpacing = 2px
z-index: 3
&:before
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
bottom: 0
content: ''
left: 0
@ -98,10 +98,10 @@ $seriesSpacing = 2px
.studyTimepointBrowser
background-color: transparent
.studyTimepointStudy.active .studyModality
box-shadow: inset 0 0 0 3px $activeColor
theme('box-shadow', 'inset 0 0 0 3px $activeColor')
.studyBox
background-color: $uiGrayDark
border: solid 1px $activeColor
theme('background-color', '$uiGrayDark')
theme('border', 'solid 1px $activeColor')
border-radius: 11px
display: block
height: $switchSize
@ -113,7 +113,7 @@ $seriesSpacing = 2px
width: $switchSize + $seriesSpacing
.seriesItem
background-color: $boxBackgroundColorDark
theme('background-color', '$boxBackgroundColor')Dark
border-radius: 3px
height: 15px
margin: $seriesSpacing
@ -121,17 +121,17 @@ $seriesSpacing = 2px
&.count
background-color: transparent
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
font-size: 12px
font-weight: 500
line-height: 17px
text-align: center
&.active
background-color: $activeColor
theme('background-color', '$activeColor')
.label
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
display: block
font-size: 12px
font-weight: 300

18
Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
View File

@ -3,15 +3,15 @@
$timepointButtonHeight = 55px
.studyTimepointBrowser
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
float: left
height: 100%
position: relative
width: 100%
.timepointButtonContainer
background-color: $primaryBackgroundColor
border-bottom: 1px solid $uiBorderColor
theme('background-color', '$primaryBackgroundColor')
theme('border-bottom', '1px solid $uiBorderColor')
display: none
height: $timepointButtonHeight
left: 10px
@ -38,7 +38,7 @@ $timepointButtonHeight = 55px
transform: rotateX(180deg)
.timepointFollowupTitle
font-size: 14px
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
text-transform: uppercase
.timepointHeader
@ -50,7 +50,7 @@ $timepointButtonHeight = 55px
.timepointFollowupTitle
.timepointDate
.timepointModalities
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
transition($sidebarTransition)
&:hover
@ -59,7 +59,7 @@ $timepointButtonHeight = 55px
.expandIcon i
.timepointDate
.timepointModalities
color: $textPrimaryColor !important
theme('color', '$textPrimaryColor') !important
.timepointDetails
.timepointModalities
@ -70,10 +70,10 @@ $timepointButtonHeight = 55px
overflow: hidden
.expandIcon i
color: $defaultColor
theme('color', '$defaultColor')
.timepointFollowupTitle
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
padding-top: 2px
.studyTimepointScrollArea
@ -91,7 +91,7 @@ $timepointButtonHeight = 55px
margin-right: 16px
.studySidebarTimepoint .thumbnailEntry.active:before
background-color: $activeColor
theme('background-color', '$activeColor')
border-top-right-radius: 7px
border-bottom-right-radius: 7px
content: ''

20
Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
View File

@ -3,8 +3,6 @@
$boxBorderColor = transparent
$boxHoverBackgroundColor = #14191E
$boxHoverBorderColor = #2d4660
$boxActiveBackgroundColor = $activeColor
$boxActiveTextColor = $primaryBackgroundColor
$boxActiveBorderColor = #131D29
$boxWidth = 50px
$borderThickness = 2px
@ -41,11 +39,11 @@ $spacerY = 12px
&.active
.studyModality
.studyModalityBox
color: $boxActiveTextColor
theme('color', '$primaryBackgroundColor')
&
&:before
&:after
background-color: $boxActiveBackgroundColor
theme('background-color', '$activeColor')
border-color: $boxActiveBorderColor
&:not(.active) .studyTimepointThumbnails
@ -69,10 +67,10 @@ $spacerY = 12px
border-color: $boxHoverBorderColor
&.additional
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
&.additional
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
font-size: 16px
font-weight: normal
height: 91px
@ -89,13 +87,13 @@ $spacerY = 12px
top: $spacerY
.studyDate
margin-top: 8px
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
.studyDescription
margin-top: 8px
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
.studyModalityBox
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
line-height: $boxWidth
margin-left: $nestingMargin * 2
margin-top: $nestingMargin * 2
@ -109,8 +107,8 @@ $spacerY = 12px
&
&:before
&:after
background-color: $boxBackgroundColor
border: $borderThickness solid $primaryBackgroundColor
theme('border', '$borderThickness solid $primaryBackgroundColor')
theme('background-color', '$boxBackgroundColor')
border-radius: $boxBorderRadius
height: $boxWidth + ($borderThickness * 2)
transition($sidebarTransition)

10
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
View File

@ -1,7 +1,7 @@
@import "{design}/app"
.toolbarSection
border-bottom: $uiBorderColor $uiBorderThickness solid
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
flex: 0 0 auto
height: $toolbarHeight
overflow: hidden
@ -14,11 +14,11 @@
height: $toolbarHeight + $toolbarDrawerHeight
.toolbarSectionEntry
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
display: inline-block
fill: $defaultColor
theme('fill', '$defaultColor')
margin-top: 3px
min-width: 30px
stroke: $defaultColor
text-align: center
theme('stroke', '$defaultColor')
text-align: center

8
Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
View File

@ -5,7 +5,7 @@
height: 100%
.dropdown-toggle
color: $defaultColor
theme('color', '$defaultColor')
cursor: pointer
font-size: 13px
font-weight: 400
@ -13,19 +13,19 @@
text-decoration: none
.menuButton
border-left: solid 1px $defaultColor
theme('border-left', 'solid 1px $defaultColor')
display: inline-block
height: 18px
padding: 0 8px
.fa
color: $defaultColor
theme('color', '$defaultColor')
font-size: 17px
line-height: 18px
.caret-down
theme('color', '$uiLightGray')
margin: 0 4px 4px 2px
color: $uiLightGray
ul.dropdown-menu
li

2
Packages/lesiontracker/client/components/viewer/viewer.styl
View File

@ -19,4 +19,4 @@
&:not(:last-child)
.removable
.imageViewerViewport
border-right: $uiBorderThickness solid $uiBorderColor
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)

2
Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl
View File

@ -6,7 +6,7 @@
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
font-size: 20pt
line-height: 45px
text-decoration: none

10
Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
View File

@ -1,15 +1,15 @@
@import "{design}/app"
.thumbnailEntry.active .imageThumbnail
border-color: $activeColor
theme('border-color', '$activeColor')
box-shadow: none
transition($sidebarTransition)
.imageThumbnail
background-color: $primaryBackgroundColor
theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
theme('background-color', '$primaryBackgroundColor')
border: 5px solid transparent
border-radius: 12px
box-shadow: inset 0 0 0 1px $uiBorderColorDark
height: 135px
margin: 0 auto
padding 1px 7px
@ -18,7 +18,7 @@
width: 217px
&:hover
border-color: $hoverColor
theme('border-color', '$hoverColor')
box-shadow: none
.imageThumbnailCanvas
@ -28,7 +28,7 @@
.thumbnailLoadingIndicator
display: none
pointer-events: none
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
height: 20px
width: 100%
top: 0

10
Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
View File

@ -13,7 +13,7 @@ $seriesCountBackgroundColor = #678696
cursor: -moz-grab
.seriesDetails
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
font-size: 14px
line-height: 1.3em
min-height: 36px
@ -33,7 +33,7 @@ $seriesCountBackgroundColor = #678696
margin-right: 4px
.seriesInformationNumbers
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
float: left
font-size: 12px
@ -42,7 +42,7 @@ $seriesCountBackgroundColor = #678696
text-align: right
strong
color: $activeColor
theme('color', '$activeColor')
font-size: 10px
font-weight: 900
@ -52,7 +52,7 @@ $seriesCountBackgroundColor = #678696
position: relative
&:after
background-color: $activeColor
theme('background-color', '$activeColor')
box-shadow: 1px 1px rgba(0, 0, 0, .115)
left: -5px
position: absolute
@ -60,7 +60,7 @@ $seriesCountBackgroundColor = #678696
&
&:after
border: 1px solid $primaryBackgroundColor
theme('border', '1px solid $primaryBackgroundColor')
content: ''
display: block
height: 11px

10
Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl
View File

@ -1,6 +1,9 @@
@import "{design}/app.styl"
.annotationDialog
theme('border', '1px solid $uiBorderColor')
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
display: none
z-index: 1000
position: absolute
@ -9,17 +12,12 @@
left: 0
right: 0
margin: auto
overflow: hidden
padding: 10px
width: 300px
height: 140px
opacity: 0.95
border-radius: 8px
border: 1px solid $uiBorderColor
background: $uiGrayDarkest
color: $textSecondaryColor
h5, label
font-weight: 400
@ -31,4 +29,4 @@
margin-left: 5px
.annotationDialogConfirm
float: right
float: right

18
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
View File

@ -1,6 +1,9 @@
@import "{design}/app.styl"
#cineDialog
theme('border', '1px solid $uiBorderColor')
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
display: none
z-index: 1000
position: absolute
@ -8,17 +11,12 @@
left: auto
bottom: 3px
right: 3px
overflow: hidden
padding: 10px
width: 300px
height: 175px
opacity: 0.95
border-radius: 8px
border: 1px solid $uiBorderColor
background: $uiGrayDarkest
color: $textSecondaryColor
h5, label
font-weight: 400
@ -26,18 +24,18 @@
box-sizing: border-box
.btn
background: $uiGrayDarkest
color: $textSecondaryColor
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active, &.active
color: $activeColor
theme('color', '$activeColor')
#cineOptions
padding: 5px 0
overflow: auto
#loopSection
padding-right: 12px
padding-right: 12px

12
Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
View File

@ -75,7 +75,7 @@ $imageSliderCursor = grab
// --- Style the range thumb --- //
&::-webkit-slider-thumb
-webkit-appearance: none !important
background-color: $imageSliderColor
theme('background-color', '$imageSliderColor')
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
@ -84,10 +84,10 @@ $imageSliderCursor = grab
margin-top: -7px
&:active
background-color: $activeColor
theme('background-color', '$activeColor')
&::-moz-range-thumb
background-color: $imageSliderColor
theme('background-color', '$imageSliderColor')
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
@ -96,10 +96,10 @@ $imageSliderCursor = grab
z-index: 7
&:active
background-color: $activeColor
theme('background-color', '$activeColor')
&::-ms-thumb
background-color: $imageSliderColor
theme('background-color', '$imageSliderColor')
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
@ -107,7 +107,7 @@ $imageSliderCursor = grab
cursor: $imageSliderCursor
&:active
background-color: $activeColor
theme('background-color', '$activeColor')
// Set left position in IE, border-width attribute breaks left position of imageSlider
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

2
Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl
View File

@ -15,7 +15,7 @@
.viewportInstructions
display: none
font-size: 13px
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
line-height: 18px
pointer-events: none // Necessary for drag/drop through to cornerstone element below
text-align: center

15
Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl
View File

@ -3,29 +3,28 @@
$borderColor = rgba(77, 99, 110, 0.81)
.layoutChooser
theme('background', '$uiGrayDarkest')
width: 92px
height: 92px
min-width: 92px // to override bootstrap's dropdown-menu class
min-height: 92px
//background-color: $primaryBackgroundColor
// theme('background-color', '$primaryBackgroundColor')
opacity: 0.95
border-radius: 8px
border: 1px solid $borderColor;
background: $uiGrayDarkest
&.open
display: block
table
margin: 0 auto
td
theme('border', '1px solid $uiBorderColorDark')
cursor: pointer
border: 1px solid $uiBorderColorDark
width: 20px
height: 20px
transition(background-color 0.1s ease)
width: 20px
&:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
background-color: $activeColor
theme('background-color', '$activeColor')

14
Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
View File

@ -1,21 +1,21 @@
@import "{design}/app.styl"
.imageViewerLoadingIndicator
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
.faded
opacity: 0.5
.imageViewerErrorLoadingIndicator
color: $uiYellow
theme('color', '$uiYellow')
p, h4
text-align: center
padding: 4px 0
p
font-size: 11pt
.loadingIndicator
display: none
pointer-events: none // Necessary for click-through to cornerstone element below
@ -26,11 +26,11 @@
font-size: 18px
z-index: 100
background-color: rgba(0,0,0,0.75)
.indicatorContents
position: absolute
top: 40%
width: 100%
font-size: 30px
font-weight: 300
text-align: center
text-align: center

24
Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
View File

@ -2,9 +2,9 @@
.toolbarSectionButton
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
theme('color', '$defaultColor')
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
min-width: 30px
cursor: pointer
text-align: center
@ -14,7 +14,7 @@
cursor: not-allowed
.buttonLabel
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 12px
font-weight: 500
@ -34,22 +34,22 @@
&:hover
.buttonLabel
color: $hoverColor
theme('color', '$hoverColor')
svg
fill: $hoverColor
stroke: $hoverColor
theme('fill', '$hoverColor')
theme('stroke', '$hoverColor')
i
color: $hoverColor
theme('color', '$hoverColor')
&:active, &.active
.buttonLabel
color: $activeColor
theme('color', '$activeColor')
svg
fill: $activeColor
stroke: $activeColor
theme('fill', '$activeColor')
theme('stroke', '$activeColor')
i
color: $activeColor
theme('color', '$activeColor')

4
Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
View File

@ -14,9 +14,9 @@ $distance = 12px
white-space: nowrap
.toolbarSectionDrawer
background-color: $uiGrayDarker
theme('background-color', '$uiGrayDarker')
border-radius: 7px
color: $textPrimaryColor
theme('color', '$textPrimaryColor')
content: ''
display: block
font-size: 18px

10
Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl
View File

@ -11,8 +11,8 @@
#imageViewerViewports
.viewportContainer
theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
float: left
border: $viewportBorderThickness solid $viewportBorderColor
outline: 0 // Prevent blue outline in Chrome
@ -22,12 +22,12 @@
outline: 0 // Prevent blue outline in Chrome
&:hover
border: $viewportBorderThickness solid $viewportBorderColorHover
theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
&.active, &:hover.active
border: $viewportBorderThickness solid $viewportBorderColorActive
theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
.removable
width: 100%
height: 100%
position: relative // Necessary so that the viewportOverlay is on top of the viewports
position: relative // Necessary so that the viewportOverlay is on top of the viewports

2
Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
View File

@ -3,7 +3,7 @@
$viewportTagPadding = 20px
.imageViewerViewportOverlay
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
.dicomTag
position: absolute

2
Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
View File

@ -50,7 +50,7 @@
color: black
&:not(.disabled):hover
color: $activeColor
theme('color', '$activeColor')
text-decoration: none
&.disabled

8
Packages/worklist/client/components/worklist.styl
View File

@ -1,17 +1,17 @@
@import "{design}/app"
body
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
#tblStudyList
tr
height: 20px
#worklistTab
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
.worklistContainer
background-color: $primaryBackgroundColor
theme('background-color', '$primaryBackgroundColor')
margin: 0 auto
color: white
float: left;
@ -22,7 +22,7 @@ body
height: calc(100% - 91px)
.loadingTextDiv
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 30px
.tab-pane

39
Packages/worklist/client/components/worklistResult/worklistResult.styl
View File

@ -1,20 +1,19 @@
@import "{design}/app"
$hoverColor = #2c363f
$textPrimaryColor = white
$textSecondaryColor = #91b9cd
$tableHoverColor = #2c363f
$tableTextPrimaryColor = white
$tableTextSecondaryColor = #91b9cd
$inputBackgroundColor = #2c363f
$inputPlaceholderColor = lightgray
$studyListToolbarHeight = 75px
$theadBackgroundColor = $uiGrayDarker
$tablePadding = 8%
$bodyCellHeight = 40px
.studyListToolbar
theme('background', '$uiGrayDarker')
height: $studyListToolbarHeight
background: $uiGrayDarker
border-bottom: 2px solid black
padding: 0 30px
@ -24,7 +23,7 @@ $bodyCellHeight = 40px
.header
font-size: 22px
font-weight: 300
color: $textSecondaryColor
color: $tableTextSecondaryColor
padding: 0 10px
line-height: $studyListToolbarHeight
@ -33,14 +32,14 @@ $bodyCellHeight = 40px
line-height: $studyListToolbarHeight
.studyCount
theme('color', '$uiSkyBlue')
font-size: 40px
font-weight: 100
color: $uiSkyBlue
padding: 0 10px
line-height: $studyListToolbarHeight
.theadBackground
background-color: $theadBackgroundColor
theme('background-color', '$uiGrayDarker')
width: 100%
height: 122px
position: absolute
@ -54,18 +53,18 @@ $bodyCellHeight = 40px
z-index: 2
.loadingTextDiv
color: $textSecondaryColor
color: $tableTextSecondaryColor
font-size: 30px
.notFound
color: $textSecondaryColor
color: $tableTextSecondaryColor
font-size: 30px
font-weight: 200
text-align: center
table#tblStudyList
thead
background-color: $theadBackgroundColor
theme('background-color', '$uiGrayDarker')
white-space: nowrap
tr
@ -85,7 +84,7 @@ $bodyCellHeight = 40px
width: 100%
min-width: 95px
margin: 0 auto
color: $textPrimaryColor
color: $tableTextPrimaryColor
font-weight: 400
padding: 20px
@ -97,10 +96,10 @@ $bodyCellHeight = 40px
margin: 0 5px
&:hover
color: $activeColor
theme('color', '$activeColor')
&.active, &:active
color: $activeColor
theme('color', '$activeColor')
input.worklist-search
height: 34px
@ -136,16 +135,15 @@ $bodyCellHeight = 40px
background-color: black
&:nth-child(even)
background-color: $uiGrayDarker
theme('background-color', '$uiGrayDarker')
td
height: $bodyCellHeight
line-height: $bodyCellHeight
color: $textPrimaryColor
color: $tableTextPrimaryColor
font-weight: 300
border-top: 1px solid #436270
white-space: nowrap
transition(all 0.1s ease)
&:first-child
@ -155,15 +153,14 @@ $bodyCellHeight = 40px
padding-right: $tablePadding
&:hover, &:active, &.active
background-color: $hoverColor
background-color: $tableHoverColor
color: white
td
// This selector is necessary to override bootstrap's 'table' class
border-top: 1px solid #436270
border-bottom: 1px solid #436270
background-color: $hoverColor
background-color: $tableHoverColor
@media only screen and (max-width: 1000px)
$tablePaddingMediumScreen = 10px
@ -188,4 +185,4 @@ $bodyCellHeight = 40px
th.accessionNumber, td.accessionNumber,
th.modalities, td.modalities,
th.numberOfStudyRelatedInstances, td.numberOfStudyRelatedInstances
display: none
display: none

6
Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
View File

@ -5,7 +5,7 @@
margin: 0 10px
label
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-weight: 400
cursor: pointer
@ -13,10 +13,10 @@
pointer-events: none
&:hover
color: $hoverColor
theme('color', '$hoverColor')
&:active
color: $activeColor
theme('color', '$activeColor')
input
width: 0.1px;