From 7d58d84d48b773b3bca512f47886e1c6e77f27f0 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Wed, 3 Aug 2016 16:22:37 +0200 Subject: [PATCH] Added tide and tigerlilly themes (OHIF-49) --- Packages/design/package.js | 3 +- Packages/design/styles/imports/mixins.styl | 12 ++ .../design/styles/imports/theme-tide.styl | 54 +++++++++ .../styles/imports/theme-tigerlilly.styl | 54 +++++++++ Packages/design/styles/imports/variables.styl | 54 +-------- .../radialProgressBar/radialProgressBar.styl | 22 ++-- .../userAccountMenu/userAccountMenu.styl | 8 +- .../client/components/viewer/viewer.styl | 2 +- .../viewer/imageControls/imageControls.styl | 107 +++++++++--------- .../viewer/viewerMain/viewerMain.styl | 11 +- .../viewportOverlay/viewportOverlay.styl | 77 +------------ 11 files changed, 201 insertions(+), 203 deletions(-) create mode 100644 Packages/design/styles/imports/theme-tide.styl create mode 100644 Packages/design/styles/imports/theme-tigerlilly.styl diff --git a/Packages/design/package.js b/Packages/design/package.js index 153cb0298..b253d019c 100644 --- a/Packages/design/package.js +++ b/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 }); diff --git a/Packages/design/styles/imports/mixins.styl b/Packages/design/styles/imports/mixins.styl index 69da48647..0a9dbc7a8 100644 --- a/Packages/design/styles/imports/mixins.styl +++ b/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 diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl new file mode 100644 index 000000000..4433bcffd --- /dev/null +++ b/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 diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl new file mode 100644 index 000000000..e305a9878 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl index 8af1920d4..f657e4bc9 100644 --- a/Packages/design/styles/imports/variables.styl +++ b/Packages/design/styles/imports/variables.styl @@ -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" \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl index e9ca3cf85..c1fab4bb1 100644 --- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl +++ b/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: #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%)) diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl index 84dc6fe41..d1c8fb15c 100644 --- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl +++ b/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 diff --git a/Packages/lesiontracker/client/components/viewer/viewer.styl b/Packages/lesiontracker/client/components/viewer/viewer.styl index 15559ac18..6c4777070 100644 --- a/Packages/lesiontracker/client/components/viewer/viewer.styl +++ b/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 diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl index 52e82a429..a96cd96eb 100644 --- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl +++ b/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 - - 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 - } - } \ No newline at end of file +// 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 \ No newline at end of file diff --git a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl index 2144bd399..0defc7727 100644 --- a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl +++ b/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 \ No newline at end of file diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl index d14451d3e..26c44d80c 100644 --- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl +++ b/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 - - .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 \ No newline at end of file + color: yellow \ No newline at end of file