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

Added tide and tigerlilly themes (OHIF-49)

Browse Source
This commit is contained in:
Erik Ziegler 2016-08-03 16:22:37 +02:00
parent bbb7dad905
commit 7d58d84d48
11 changed files with 201 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Packages/design/package.js
View File

@ -17,7 +17,8 @@ Package.onUse(function(api) {
'app.styl',
'styles/imports/mixins.styl',
'styles/imports/spacings.styl',
'styles/imports/variables.styl'
'styles/imports/variables.styl',
'styles/imports/theme-tide.styl',
], 'client', {
isImport: true
});

12
Packages/design/styles/imports/mixins.styl
View File

@ -1,3 +1,15 @@
/*
Basic mixin which vendorizes a propery. Usage:
vendorize(box-sizing, border-box)
*/
vendorize(property, value)
-webkit-{property} value
-moz-{property} value
-ms-{property} value
-o-{property} value
{property} value
animation(a)
-webkit-animation: a
-moz-animation: a

54
Packages/design/styles/imports/theme-tide.styl Normal file
View File

@ -0,0 +1,54 @@
// 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 = #3C8074
$primaryBackgroundColor = #000000
$boxBackgroundColor = #344a61
$boxBackgroundColorDark = #22374D
// Text Colors
$textColorActive = #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

54
Packages/design/styles/imports/theme-tigerlilly.styl Normal file
View File

@ -0,0 +1,54 @@
// Common pallete
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2
$uiLightGray = #516873
$uiGray = #263340
$uiGrayDark = #16202B
$uiGrayDarker = #151A1F
$uiGrayDarkest = #14191E
// Interface UI Colors
$defaultColor = #98ceff
$hoverColor = #ffffff
$activeColor = #ff8a3d
$uiBorderColor = #744b71
$uiBorderColorDark = #744b71
$uiBorderColorActive = #ff8a3d
$primaryBackgroundColor = #000000
$boxBackgroundColor = #5b3a59
$boxBackgroundColorDark = #4b2f40
// Text Colors
$textColorActive = #ff8a3d
$textPrimaryColor = #ffffff
$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

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

@ -1,52 +1,2 @@
// Common pallete
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2
$uiGray = #263340
$uiGrayDark = #16202B
$uiGrayDarker = #151A1F
$uiGrayDarkest = #14191E
// Interface UI Colors
$defaultColor = #94A8B3
$hoverColor = #ffffff
$activeColor = #40D9B8
$uiBorderColor = #436270
$uiBorderColorDark = #3C5D80
$uiBorderColorActive = #3C8074
$primaryBackgroundColor = #000000
$boxBackgroundColor = #3E5975
$boxBackgroundColorDark = #22374D
// Text Colors
$textColorActive = #2D2D2D
$textPrimaryColor = #ffffff
$textSecondaryColor = #91B9CD
// Other Colors
$menuBackgroundColor = #F2F2F2
// 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
@import "./theme-tigerlilly.styl"
//@import "./theme-tide.styl"

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

@ -3,26 +3,22 @@
$circleSize = 46px
.radialProgress
position: relative
height: $circleSize
width: $circleSize
box-shadow: 0 0 1em black
vendorize(box-shadow, 0 0 1em black)
border-radius: 100%
position: relative
#svg circle
stroke-dashoffset: 0
transition: stroke-dashoffset 1s linear
stroke: #203244
stroke: $uiBorderColorDark
stroke-width: 3px
vendorize(transition, stroke-dashoffset 1s linear)
#svg #bar
stroke: $activeColor
-ms-transform: rotate(270deg) /* IE 9 */
-ms-transform-origin: center center /* IE 9 */
-webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
-webkit-transform-origin: center center /* Chrome, Safari, Opera */
transform: rotate(270deg)
transform-origin(center center)
vendorize(transform, rotate(270deg))
vendorize(transform-origin, center center)
.progressText
position: absolute
@ -32,14 +28,14 @@ $circleSize = 46px
font-weight: 700
font-size: 17px
text-align: center
color: $uiSkyBlue
color: $textColorActive
top: 0
svg
fill: $uiSkyBlue
fill: $activeColor
left: 50%
position: absolute
stroke: $uiSkyBlue
stroke: $activeColor
top: 50%
transform(translateX(-50%) translateY(-50%))

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

@ -6,7 +6,7 @@
.dropdown-toggle
background-color: $primaryBackgroundColor
color: $textSecondaryColor
color: $defaultColor
cursor: pointer
font-size: 13px
font-weight: 400
@ -14,19 +14,19 @@
text-decoration: none
.menuButton
border-left: solid 1px #516873
border-left: solid 1px $defaultColor
display: inline-block
height: 18px
padding: 0 8px
.fa
color: #94a8b3
color: $defaultColor
font-size: 17px
line-height: 18px
.caret-down
margin: 0 4px 4px 2px
color: #516873
color: $uiLightGray
ul.dropdown-menu
li

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

@ -25,4 +25,4 @@
&:not(:last-child)
.removable
.imageViewerViewport
border-right: $uiBorderThickness solid #436270
border-right: $uiBorderThickness solid $uiBorderColor

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

@ -1,3 +1,14 @@
@import "{design}/app"
$imageSliderBorderRadius = 57px
$imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
$imageSliderWidth = 12px
$imageSliderHeight = 39px
$imageSliderCursor = grab
.imageControls
position: absolute
top: 0
@ -13,101 +24,91 @@
position: absolute
left: 20px
vendorize(transform, rotate(90deg))
vendorize(transform-origin, top left)
-webkit-appearance: none
transform: rotate(90deg)
-webkit-transform: rotate(90deg)
-moz-transform :rotate(90deg)
-o-transform: rotate(90deg)
-ms-transform: rotate(90deg)
transform-origin: top left
-webkit-transform-origin: top left
-moz-transform-origin: top left
-o-transform-origin: top left
-ms-transform-origin: top left
background-color: $imageSliderTrackColor
// Remove focus highlights on range input
&:focus
outline: none
-moz-box-shadow: none
-webkit-box-shadow: none
box-shadow: none
vendorize(box-shadow, none)
// Remove focus border in Firefox
&::-moz-focus-outer
border: none
// --- Style the range track --- //
&::-webkit-slider-runnable-track
height: 2px
border: 2px solid #bdc3c7
background-color: darkgrey
height: 5px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-moz-range-track
height: 1px
border: 1px solid #bdc3c7
background-color: darkgrey
height: 2px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-ms-track
width: 100%
height: 2px
border: none
cursor: pointer
animate: 0.2s
background: transparent
border-color: transparent
border-width: 15px 0
color: transparent
color: $imageSliderTrackColor
// Hide any fill IE tries to add
&::-ms-fill-lower
background: darkgrey
background: $imageSliderTrackColor
&::-ms-fill-upper
background: darkgrey
background: $imageSliderTrackColor
// --- Style the range thumb --- //
&::-webkit-slider-thumb
-webkit-appearance: none !important
background-color: rgb(169, 169, 169)
border: 2px solid rgb(169, 169, 169)
border-radius: 2px
height: 15px
width: 25px
cursor: pointer
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
margin-top: -7px
&:active
background-color: rgb(34, 126, 163)
background-color: $activeColor
&::-moz-range-thumb
background-color: rgb(169, 169, 169)
border: 2px solid rgb(169, 169, 169)
border-radius: 2px
height: 11px
width: 20px
cursor: pointer
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
z-index: 7
&:active
background-color: rgb(34, 126, 163)
background-color: $activeColor
&::-ms-thumb
background-color: rgb(169, 169, 169)
border: 2px solid rgb(169, 169, 169)
border-radius: 2px
height: 11px
width: 20px
cursor: pointer
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
&:active
background-color: rgb(34, 126, 163)
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) {
#imageSlider {
left: 50px
}
}
// Set left position in IE, border-width attribute breaks left position of imageSlider
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
#imageSlider
left: 50px

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

@ -14,6 +14,13 @@
float: left
border: $viewportBorderThickness solid $viewportBorderColor
outline: 0 // Prevent blue outline in Chrome
&:hover
&.active
&:hover.active
outline: 0 // Prevent blue outline in Chrome
&:hover
border: $viewportBorderThickness solid $viewportBorderColorHover
@ -23,6 +30,4 @@
.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

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

@ -1,15 +1,6 @@
@import "{design}/app"
$viewportTagPadding = 20px
$imageSliderBorderRadius = 57px
$imageSliderColor = $boxBackgroundColorDark
$imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
$imageSliderWidth = 12px
$imageSliderHeight = 39px
$imageSliderCursor = grab
.imageViewerViewportOverlay
color: $textSecondaryColor
@ -38,70 +29,4 @@ $imageSliderCursor = grab
.priorIndicator
font-weight: bold
color: yellow
.imageControls
#scrollbar
#imageSlider
-webkit-appearance: none
background-color: $imageSliderTrackColor
// --- Style the range track --- //
&::-webkit-slider-runnable-track
height: 5px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-moz-range-track
height: 2px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-ms-track
width: 100%
height: 2px
border: none
cursor: pointer
animate: 0.2s
background: transparent
border-width: 15px 0
color: $imageSliderTrackColor
// Hide any fill IE tries to add
&::-ms-fill-lower
background: $imageSliderTrackColor
&::-ms-fill-upper
background: $imageSliderTrackColor
// --- Style the range thumb --- //
&::-webkit-slider-thumb
-webkit-appearance: none !important
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
margin-top: -7px
&::-moz-range-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
z-index: 7
&::-ms-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
color: yellow