Added tide and tigerlilly themes (OHIF-49)

Packages/design/package.js

@@ -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
     });

Packages/design/styles/imports/mixins.styl

@@ -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

Packages/design/styles/imports/theme-tide.styl

@@ -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

Packages/design/styles/imports/theme-tigerlilly.styl

@@ -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

Packages/design/styles/imports/variables.styl

@@ -1,52 +1,2 @@
-// Common pallete
+@import "./theme-tigerlilly.styl"
-$uiYellow = #E29E4A
+//@import "./theme-tide.styl"
-$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

Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl

@@ -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: $uiBorderColorDark
-    stroke: #203244
     stroke-width: 3px
+    vendorize(transition, stroke-dashoffset 1s linear)
 
   #svg #bar
     stroke: $activeColor
-    -ms-transform: rotate(270deg) /* IE 9 */
+    vendorize(transform, rotate(270deg))
-    -ms-transform-origin: center center /* IE 9 */
+    vendorize(transform-origin, center center)
-    -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
-    -webkit-transform-origin: center center /* Chrome, Safari, Opera */
-    transform: rotate(270deg)
-    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%))
 

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl

@@ -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

Packages/lesiontracker/client/components/viewer/viewer.styl

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

Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl

@@ -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
-
+      background-color: $imageSliderTrackColor
-      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
 
       // Remove focus highlights on range input
       &:focus
         outline: none
-        -moz-box-shadow: none
+        vendorize(box-shadow, none)
-        -webkit-box-shadow: none
-        box-shadow: none
 
       // Remove focus border in Firefox
       &::-moz-focus-outer
         border: none
-        
+
       // --- Style the range track --- //
       &::-webkit-slider-runnable-track
-        height: 2px
+        height: 5px
-        border: 2px solid #bdc3c7
+        border: none
-        background-color: darkgrey
+        cursor: pointer
+        background-color: $imageSliderTrackColor
         z-index: 6
 
       &::-moz-range-track
-        height: 1px
+        height: 2px
-        border: 1px solid #bdc3c7
+        border: none
-        background-color: darkgrey
+        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)
+        background-color: $imageSliderColor
-        border: 2px solid rgb(169, 169, 169)
+        border-radius: $imageSliderBorderRadius
-        border-radius: 2px
+        border: $imageSliderBorder
-        height: 15px
+        height: $imageSliderWidth
-        width: 25px
+        width: $imageSliderHeight
-        cursor: pointer
+        cursor: $imageSliderCursor
         margin-top: -7px
 
         &:active
-          background-color: rgb(34, 126, 163)
+          background-color: $activeColor
 
       &::-moz-range-thumb
-        background-color: rgb(169, 169, 169)
+        background-color: $imageSliderColor
-        border: 2px solid rgb(169, 169, 169)
+        border-radius: $imageSliderBorderRadius
-        border-radius: 2px
+        border: $imageSliderBorder
-        height: 11px
+        height: $imageSliderWidth
-        width: 20px
+        width: $imageSliderHeight
-        cursor: pointer
+        cursor: $imageSliderCursor
         z-index: 7
 
         &:active
-          background-color: rgb(34, 126, 163)
+          background-color: $activeColor
 
       &::-ms-thumb
-        background-color: rgb(169, 169, 169)
+        background-color: $imageSliderColor
-        border: 2px solid rgb(169, 169, 169)
+        border-radius: $imageSliderBorderRadius
-        border-radius: 2px
+        border: $imageSliderBorder
-        height: 11px
+        height: $imageSliderWidth
-        width: 20px
+        width: $imageSliderHeight
-        cursor: pointer
+        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
+// Set left position in IE, border-width attribute breaks left position of imageSlider
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
-      #imageSlider {
+  #imageSlider
-        left: 50px
+    left: 50px
-      }
-    }

Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl

@@ -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
-
-

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl

@@ -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
+    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