Mercurial > hg > orthanc-stone
view Applications/StoneWebViewer/WebApplication/app.css @ 1753:f19f69476d9d
todo
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Fri, 16 Apr 2021 17:28:49 +0200 |
parents | 092af2150f67 |
children | b8f54ab47b3b |
line wrap: on
line source
.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } .wv-html, .wv-body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .wv-body { background-color: black; color: white; position: relative; overflow: hidden; font-family: "Open Sans", Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 13px; font-weight: 400; line-height: 1.49; font-size-adjust: 100%; -moz-osx-font-smoothing: grayscale !important; font-smoothing: antialiased !important; -webkit-font-smoothing: antialiased !important; } .wvLoadingScreen { width: 100%; height: 100%; background-color: black; position: fixed; top: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .wvLoadingSpinner { margin: 100px auto 0; width: 70px; text-align: center; } .wvLoadingSpinner > div { width: 18px; height: 18px; background-color: #FFF; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .wvLoadingSpinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .wvLoadingSpinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* wvp-ui stuffs */ wv-webviewer { display: block; height: 100%; overflow: hidden; } .wvButton, .wvButton--rotate, .wvButton--vflip, .wvButton--underline, .fa.wvButton--underline, .wvButton--border, .wvButton--borderAndWhite { outline: none; background-color: transparent; border: none; border-radius: 0; position: relative; display: inline-block; cursor: pointer; font-variant: small-caps; text-transform: lowercase; text-align: center; font-size: 1.3rem; font-weight: 400; color: #d9d9d9; transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease; margin: 0; min-width: 3rem; padding: 0 10px; line-height: 3.6rem; } .wvButton:hover, .wvButton--rotate:hover, .wvButton--vflip:hover, .wvButton--underline:hover, .wvButton--border:hover, .wvButton--borderAndWhite:hover { text-decoration: none; color: white; } .wvButton.wvLargeButton, .wvLargeButton.wvButton--rotate, .wvLargeButton.wvButton--vflip, .wvLargeButton.wvButton--underline, .wvLargeButton.wvButton--border, .wvLargeButton.wvButton--borderAndWhite { font-size: 2rem; line-height: 6.2rem; padding: 0 20px; } .wvButton--rotate:before, .wvButton--rotate:after { transform: rotate(90deg); display: inline-block; } .wvButton--vflip:before, .wvButton--vflip:after { transform: scaleX(-1); display: inline-block; } .wvButton--underline, .fa.wvButton--underline { position: relative; background-color: inherit; text-decoration: none; text-align: left; font-size: 1.2rem; width: 3.2rem; vertical-align: middle; color: white; opacity: 0.75; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.1); top: 0px; } .wvButton--underline.wvLargeButton, .fa.wvButton--underline.wvLargeButton { font-size: 2rem; width: 6.4rem; } .wvButton--underline *, .fa.wvButton--underline * { pointer-events: none; } .wvButton--underline:hover, .wvButton--underline:active, .wvButton--underline:focus, .fa.wvButton--underline:hover, .fa.wvButton--underline:active, .fa.wvButton--underline:focus { outline: 0; } .wvButton--underline:hover, .wvButton--underline:focus, .fa.wvButton--underline:hover, .fa.wvButton--underline:focus { border-color: white; opacity: 1; } .wvButton--underline:hover .wvButton__bottomTriangle, .wvButton--underline:focus .wvButton__bottomTriangle, .fa.wvButton--underline:hover .wvButton__bottomTriangle, .fa.wvButton--underline:focus .wvButton__bottomTriangle { border-left-color: white; } .wvButton--underline.active, .fa.wvButton--underline.active { opacity: 1; border-color: #3498db; } .wvButton--underline::before, .fa.wvButton--underline::before { position: relative; top: -1px; } .wvButton--underline.fa, .fa.wvButton--underline.fa { top: 0px; font-weight: 800; } .wvButton__bottomTriangle { transition: 0.3s border ease, 0.3s opacity ease; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.1); } .wvButton__bottomTriangle.active { border-color: transparent transparent transparent #3498db !important; } .wvButton__bottomTriangle.active.toggled { border-left-color: #3498db !important; } .wvButton--border, .wvButton--borderAndWhite { max-height: calc(2.8rem - 3px); max-width: 100%; overflow: hidden; margin: 0.6rem; margin-left: 0rem; margin-right: 0rem; line-height: 2rem; padding-top: 0.1rem; padding-bottom: 0.5rem; font-size: 1.4rem; border: 1px solid #454545; font-family: Arial; background-color: black; } .wvButton--border + .wvButton--border, .wvButton--borderAndWhite + .wvButton--border, .wvButton--border + .wvButton--borderAndWhite, .wvButton--borderAndWhite + .wvButton--borderAndWhite { margin-left: 0.7rem; } .wvButton--border:hover, .wvButton--borderAndWhite:hover { background-color: #1a1a1a; } .wvButton--border > .glyphicon, .wvButton--borderAndWhite > .glyphicon { position: relative; display: inline-block; top: 3px; margin-right: 4px; } .wvButton--borderAndWhite { color: #1a1a1a; border: 1px solid #bababa; background-color: white; } .wvButton--borderAndWhite:hover { color: #1a1a1a; background-color: #e6e6e6; } .wvExitButton { margin-left: 1rem; margin-top: .25rem; font-size: 1.25em; color: white; opacity: .66; transition: .3s opacity ease; background-color: inherit; border: none; text-decoration: none; text-align: left; padding: 0; cursor: pointer; font-family: inherit; line-height: inherit; } .wvExitButton:hover, .wvExitButton:focus { opacity: 1; outline: 0; } .wvExitButton__text { position: relative; top: -1px; } .wvStudyIsland--blue, .wvStudyIsland--red, .wvStudyIsland--green, .wvStudyIsland--yellow, .wvStudyIsland--violet { margin: 1rem 1rem 1rem 1rem; border: 0.3rem solid gray; } .wvStudyIsland__header--blue, .wvStudyIsland__header--red, .wvStudyIsland__header--green, .wvStudyIsland__header--yellow, .wvStudyIsland__header--violet { background-color: gray; padding: 0.5rem 0.5rem 0.8rem 0.5rem; line-height: 1.35rem; width: 100%; } .wvStudyIsland__actions { float: right; margin-top: -0.8rem; margin-right: -0.8rem; } .wvStudyIsland__actions--oneCol { float: none; text-align: center; } .wvStudyIsland__main { padding: 0.4rem; color: white; width: 100%; } .wvStudyIsland--blue { border-color: rgba(51, 152, 219, 0.7); } .wvStudyIsland__header--blue { background-color: rgba(51, 152, 219, 0.7); } .wvStudyIsland--red { border-color: rgba(206, 0, 0, 0.7); } .wvStudyIsland__header--red { background-color: rgba(206, 0, 0, 0.7); } .wvStudyIsland--green { border-color: rgba(0, 160, 27, 0.7); } .wvStudyIsland__header--green { background-color: rgba(0, 160, 27, 0.7); } .wvStudyIsland--yellow { border-color: rgba(220, 200, 0, 0.9); } .wvStudyIsland__header--yellow { background-color: rgba(220, 200, 0, 0.9); } .wvStudyIsland--violet { border-color: rgba(255, 31, 255, 0.7); } .wvStudyIsland__header--violet { background-color: rgba(255, 31, 255, 0.7); } /* * Source code taken from private Osimis' frontend toolbox 3.2.1. */ /** _overlay.scss */ .overlay__transparent { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /** _transition.scss **/ .transition { transition: 0.3s all ease; } .transition--long { transition: 0.6s all ease; } /** _list.scss **/ dd + dt { clear: both; } .listDefinition { width: 100%; line-height: 1.3; } .listDefinition__term { clear: both; float: left; text-align: right; padding-right: 10px; width: 50%; } .listDefinition__data { text-align: left; padding-left: 10px; float: right; width: 50%; } /** _animation.scss **/ @keyframes blink__primary { 0% { color: #3498db; } 100% { color: #666666; } } .blink__primary { animation: blink__primary 0.8s linear infinite; } [translate-cloak] { transition: 0.3s all ease; opacity: 1; } [translate-cloak].translate-cloak { opacity: 0; } /** _button.scss **/ .button__unstyled, .button__base, .button__state--active, .button__state--inactive, .button__iconed, .button__switch--base, .button__switch, .button__switch--first, .button__switch--last, .button__lightgrey--hover, .button__text-danger--hover, .button__text-primary--hover, .button__danger--hover, .button__text, .button__text--underlined, .button__bordered, .button__bordered--inverted, .button__close { background-color: inherit; border: none; text-decoration: none; text-align: left; padding: 0; cursor: pointer; } .button__unstyled *, .button__base *, .button__state--active *, .button__state--inactive *, .button__iconed *, .button__switch--base *, .button__switch *, .button__switch--first *, .button__switch--last *, .button__lightgrey--hover *, .button__text-danger--hover *, .button__text-primary--hover *, .button__danger--hover *, .button__text *, .button__text--underlined *, .button__bordered *, .button__bordered--inverted *, .button__close * { pointer-events: none; } .button__unstyled:hover, .button__base:hover, .button__state--active:hover, .button__state--inactive:hover, .button__iconed:hover, .button__switch--base:hover, .button__switch:hover, .button__switch--first:hover, .button__switch--last:hover, .button__lightgrey--hover:hover, .button__text-danger--hover:hover, .button__text-primary--hover:hover, .button__danger--hover:hover, .button__text:hover, .button__text--underlined:hover, .button__bordered:hover, .button__bordered--inverted:hover, .button__close:hover, .button__unstyled:active, .button__base:active, .button__state--active:active, .button__state--inactive:active, .button__iconed:active, .button__switch--base:active, .button__switch:active, .button__switch--first:active, .button__switch--last:active, .button__lightgrey--hover:active, .button__text-danger--hover:active, .button__text-primary--hover:active, .button__danger--hover:active, .button__text:active, .button__text--underlined:active, .button__bordered:active, .button__bordered--inverted:active, .button__close:active, .button__unstyled:focus, .button__base:focus, .button__state--active:focus, .button__state--inactive:focus, .button__iconed:focus, .button__switch--base:focus, .button__switch:focus, .button__switch--first:focus, .button__switch--last:focus, .button__lightgrey--hover:focus, .button__text-danger--hover:focus, .button__text-primary--hover:focus, .button__danger--hover:focus, .button__text:focus, .button__text--underlined:focus, .button__bordered:focus, .button__bordered--inverted:focus, .button__close:focus { outline: 0; } .button__base, .button__state--active, .button__state--inactive, .button__iconed, .button__switch--base, .button__switch, .button__switch--first, .button__switch--last, .button__lightgrey--hover, .button__text-danger--hover, .button__text-primary--hover, .button__danger--hover, .button__text, .button__text--underlined, .button__bordered, .button__bordered--inverted, .button__close { transition: 0.3s all ease; } .button__state--active { opacity: 1; } .button__state--active:hover { opacity: 0.9; color: #3498db; } .button__state--inactive { opacity: 0.333; } .button__state--inactive:hover { opacity: 0.4333; color: #3498db; } .button__iconed { opacity: 1; } .button__iconed:hover, .button__iconed:focus, .button__iconed.active { opacity: 0.75; color: #3498db; } .button__switch--base, .button__switch, .button__switch--first, .button__switch--last { padding: 5px 0px; display: inline-block; text-align: center; border-top: 1px solid; border-bottom: 1px solid; border-color: #3498db; background-color: white; overflow: hidden; } .button__switch--base:hover, .button__switch:hover, .button__switch--first:hover, .button__switch--last:hover, .button__switch--base:focus, .button__switch:focus, .button__switch--first:focus, .button__switch--last:focus { background-color: #5faee3; color: white; } .button__switch--base.active, .active.button__switch, .active.button__switch--first, .active.button__switch--last { background-color: #3498db; color: white; } .button__switch--first { border-left: 1px solid #3498db; border-radius: 5px 0 0 5px; } .button__switch--last { border-right: 1px solid #3498db; border-radius: 0 5px 5px 0; } .button__lightgrey--hover:hover, .button__lightgrey--hover:focus, .button__lightgrey--hover.active { background-color: #cccccc; } .button__text-danger--hover:hover, .button__text-danger--hover:focus, .button__text-danger--hover.active { color: #E63F24; } .button__text-primary--hover:hover, .button__text-primary--hover:focus, .button__text-primary--hover.active { color: #3498db; } .button__danger--hover:hover, .button__danger--hover:focus, .button__danger--hover.active { background-color: #E63F24; color: white; } .button__text { opacity: 0.66; } .button__text:hover, .button__text.active, .button__text:focus { opacity: 1; } .button__text--underlined { text-decoration: underline; } .button__text--underlined:hover, .button__text--underlined.active, .button__text--underlined:focus { text-decoration: none; } .button__bordered { border-bottom: 2px solid #666666; } .button__bordered:hover, .button__bordered:focus, .button__bordered.active { border-color: #3498db; } .button__bordered--inverted { border-bottom: 2px solid white; } .button__close { position: absolute; top: 0; right: 0; opacity: 0.6; z-index: 10; } .button__close:hover, .button__close:focus { opacity: 1; } /** _block.scss **/ .block { display: block !important; } /** _boxsizing.scss **/ .boxsizing__borderbox { box-sizing: border-box; } .boxsizing__contentbox { box-sizing: content-box; } /** _scrollable.scss **/ .scrollable { overflow-y: auto; } .scrollable--x { overflow-x: auto; } .no-scroll { overflow: hidden; } /** _float.scss **/ .float__right { float: right; } .float__left { float: left; } /** _fonts.scss **/ .font__bold { font-weight: 600; } .font__normal, .listDefinition__data { font-weight: 400; } .font__light, .listDefinition__term { font-weight: 200; } .fontColor__primary { color: #3498db; } .fontColor__lightGrey { color: #cccccc; } .fontColor__normal { color: #666666; } .fontColor__darker { color: #333333; } .fontColor__white { color: white; } /** _forms.scss **/ .textarea__unstyled { border: none; outline: none; background-color: transparent; color: inherit; resize: none; padding: 0; margin: 0; width: 100%; } /** _position.scss **/ .position__relative { position: relative; } /** _margin.scss **/ .margin__auto { margin: auto; } /** _helpers.scss **/ /*************HELPERS**************/ /**********************************/ /*** identical width and height ***/ .wh__0 { width: 0px !important; height: 0px !important; } .lh__0 { line-height: 0px !important; } .wh__5 { width: 5px !important; height: 5px !important; } .lh__5 { line-height: 5px !important; } .wh__8 { width: 8px !important; height: 8px !important; } .lh__8 { line-height: 8px !important; } .wh__10 { width: 10px !important; height: 10px !important; } .lh__10 { line-height: 10px !important; } .wh__11 { width: 11px !important; height: 11px !important; } .lh__11 { line-height: 11px !important; } .wh__12 { width: 12px !important; height: 12px !important; } .lh__12 { line-height: 12px !important; } .wh__13 { width: 13px !important; height: 13px !important; } .lh__13 { line-height: 13px !important; } .wh__14 { width: 14px !important; height: 14px !important; } .lh__14 { line-height: 14px !important; } .wh__15 { width: 15px !important; height: 15px !important; } .lh__15 { line-height: 15px !important; } .wh__16 { width: 16px !important; height: 16px !important; } .lh__16 { line-height: 16px !important; } .wh__17 { width: 17px !important; height: 17px !important; } .lh__17 { line-height: 17px !important; } .wh__18 { width: 18px !important; height: 18px !important; } .lh__18 { line-height: 18px !important; } .wh__19 { width: 19px !important; height: 19px !important; } .lh__19 { line-height: 19px !important; } .wh__20 { width: 20px !important; height: 20px !important; } .lh__20 { line-height: 20px !important; } .wh__21 { width: 21px !important; height: 21px !important; } .lh__21 { line-height: 21px !important; } .wh__22 { width: 22px !important; height: 22px !important; } .lh__22 { line-height: 22px !important; } .wh__23 { width: 23px !important; height: 23px !important; } .lh__23 { line-height: 23px !important; } .wh__24 { width: 24px !important; height: 24px !important; } .lh__24 { line-height: 24px !important; } .wh__25 { width: 25px !important; height: 25px !important; } .lh__25 { line-height: 25px !important; } .wh__26 { width: 26px !important; height: 26px !important; } .lh__26 { line-height: 26px !important; } .wh__27 { width: 27px !important; height: 27px !important; } .lh__27 { line-height: 27px !important; } .wh__28 { width: 28px !important; height: 28px !important; } .lh__28 { line-height: 28px !important; } .wh__29 { width: 29px !important; height: 29px !important; } .lh__29 { line-height: 29px !important; } .wh__30 { width: 30px !important; height: 30px !important; } .lh__30 { line-height: 30px !important; } .wh__31 { width: 31px !important; height: 31px !important; } .lh__31 { line-height: 31px !important; } .wh__32 { width: 32px !important; height: 32px !important; } .lh__32 { line-height: 32px !important; } .wh__33 { width: 33px !important; height: 33px !important; } .lh__33 { line-height: 33px !important; } .wh__34 { width: 34px !important; height: 34px !important; } .lh__34 { line-height: 34px !important; } .wh__35 { width: 35px !important; height: 35px !important; } .lh__35 { line-height: 35px !important; } .wh__36 { width: 36px !important; height: 36px !important; } .lh__36 { line-height: 36px !important; } .wh__37 { width: 37px !important; height: 37px !important; } .lh__37 { line-height: 37px !important; } .wh__38 { width: 38px !important; height: 38px !important; } .lh__38 { line-height: 38px !important; } .wh__39 { width: 39px !important; height: 39px !important; } .lh__39 { line-height: 39px !important; } .wh__40 { width: 40px !important; height: 40px !important; } .lh__40 { line-height: 40px !important; } .wh__41 { width: 41px !important; height: 41px !important; } .lh__41 { line-height: 41px !important; } .wh__42 { width: 42px !important; height: 42px !important; } .lh__42 { line-height: 42px !important; } .wh__43 { width: 43px !important; height: 43px !important; } .lh__43 { line-height: 43px !important; } .wh__44 { width: 44px !important; height: 44px !important; } .lh__44 { line-height: 44px !important; } .wh__45 { width: 45px !important; height: 45px !important; } .lh__45 { line-height: 45px !important; } .wh__46 { width: 46px !important; height: 46px !important; } .lh__46 { line-height: 46px !important; } .wh__47 { width: 47px !important; height: 47px !important; } .lh__47 { line-height: 47px !important; } .wh__48 { width: 48px !important; height: 48px !important; } .lh__48 { line-height: 48px !important; } .wh__49 { width: 49px !important; height: 49px !important; } .lh__49 { line-height: 49px !important; } .wh__50 { width: 50px !important; height: 50px !important; } .lh__50 { line-height: 50px !important; } .wh__55 { width: 55px !important; height: 55px !important; } .lh__55 { line-height: 55px !important; } .wh__60 { width: 60px !important; height: 60px !important; } .lh__60 { line-height: 60px !important; } .wh__64 { width: 64px !important; height: 64px !important; } .lh__64 { line-height: 64px !important; } .wh__65 { width: 65px !important; height: 65px !important; } .lh__65 { line-height: 65px !important; } .wh__70 { width: 70px !important; height: 70px !important; } .lh__70 { line-height: 70px !important; } .wh__72 { width: 72px !important; height: 72px !important; } .lh__72 { line-height: 72px !important; } .wh__75 { width: 75px !important; height: 75px !important; } .lh__75 { line-height: 75px !important; } .wh__80 { width: 80px !important; height: 80px !important; } .lh__80 { line-height: 80px !important; } .wh__85 { width: 85px !important; height: 85px !important; } .lh__85 { line-height: 85px !important; } .wh__90 { width: 90px !important; height: 90px !important; } .lh__90 { line-height: 90px !important; } .wh__95 { width: 95px !important; height: 95px !important; } .lh__95 { line-height: 95px !important; } .wh__96 { width: 96px !important; height: 96px !important; } .lh__96 { line-height: 96px !important; } .wh__100 { width: 100px !important; height: 100px !important; } .lh__100 { line-height: 100px !important; } .wh__110 { width: 110px !important; height: 110px !important; } .lh__110 { line-height: 110px !important; } .wh__120 { width: 120px !important; height: 120px !important; } .lh__120 { line-height: 120px !important; } .wh__130 { width: 130px !important; height: 130px !important; } .lh__130 { line-height: 130px !important; } .wh__140 { width: 140px !important; height: 140px !important; } .lh__140 { line-height: 140px !important; } .wh__150 { width: 150px !important; height: 150px !important; } .lh__150 { line-height: 150px !important; } .wh__160 { width: 160px !important; height: 160px !important; } .lh__160 { line-height: 160px !important; } .wh__170 { width: 170px !important; height: 170px !important; } .lh__170 { line-height: 170px !important; } .wh__180 { width: 180px !important; height: 180px !important; } .lh__180 { line-height: 180px !important; } .wh__190 { width: 190px !important; height: 190px !important; } .lh__190 { line-height: 190px !important; } .wh__200 { width: 200px !important; height: 200px !important; } .lh__200 { line-height: 200px !important; } .wh__210 { width: 210px !important; height: 210px !important; } .lh__210 { line-height: 210px !important; } .wh__220 { width: 220px !important; height: 220px !important; } .lh__220 { line-height: 220px !important; } .wh__230 { width: 230px !important; height: 230px !important; } .lh__230 { line-height: 230px !important; } .wh__240 { width: 240px !important; height: 240px !important; } .lh__240 { line-height: 240px !important; } .wh__250 { width: 250px !important; height: 250px !important; } .lh__250 { line-height: 250px !important; } .wh__260 { width: 260px !important; height: 260px !important; } .lh__260 { line-height: 260px !important; } .wh__270 { width: 270px !important; height: 270px !important; } .lh__270 { line-height: 270px !important; } .wh__280 { width: 280px !important; height: 280px !important; } .lh__280 { line-height: 280px !important; } .wh__290 { width: 290px !important; height: 290px !important; } .lh__290 { line-height: 290px !important; } .wh__300 { width: 300px !important; height: 300px !important; } .lh__300 { line-height: 300px !important; } .wh__310 { width: 310px !important; height: 310px !important; } .lh__310 { line-height: 310px !important; } .wh__320 { width: 320px !important; height: 320px !important; } .lh__320 { line-height: 320px !important; } .wh__330 { width: 330px !important; height: 330px !important; } .lh__330 { line-height: 330px !important; } .wh__340 { width: 340px !important; height: 340px !important; } .lh__340 { line-height: 340px !important; } .wh__350 { width: 350px !important; height: 350px !important; } .lh__350 { line-height: 350px !important; } .wh__360 { width: 360px !important; height: 360px !important; } .lh__360 { line-height: 360px !important; } .wh__370 { width: 370px !important; height: 370px !important; } .lh__370 { line-height: 370px !important; } .wh__380 { width: 380px !important; height: 380px !important; } .lh__380 { line-height: 380px !important; } .wh__390 { width: 390px !important; height: 390px !important; } .lh__390 { line-height: 390px !important; } .wh__400 { width: 400px !important; height: 400px !important; } .lh__400 { line-height: 400px !important; } .wh__410 { width: 410px !important; height: 410px !important; } .lh__410 { line-height: 410px !important; } .wh__420 { width: 420px !important; height: 420px !important; } .lh__420 { line-height: 420px !important; } .wh__430 { width: 430px !important; height: 430px !important; } .lh__430 { line-height: 430px !important; } .wh__440 { width: 440px !important; height: 440px !important; } .lh__440 { line-height: 440px !important; } .wh__450 { width: 450px !important; height: 450px !important; } .lh__450 { line-height: 450px !important; } .wh__460 { width: 460px !important; height: 460px !important; } .lh__460 { line-height: 460px !important; } .wh__470 { width: 470px !important; height: 470px !important; } .lh__470 { line-height: 470px !important; } .wh__480 { width: 480px !important; height: 480px !important; } .lh__480 { line-height: 480px !important; } .wh__490 { width: 490px !important; height: 490px !important; } .lh__490 { line-height: 490px !important; } .wh__500 { width: 500px !important; height: 500px !important; } .lh__500 { line-height: 500px !important; } .lh__1 { line-height: 1 !important; } .no-wrap { white-space: nowrap; } .ov-h { overflow: hidden; } .va-m { vertical-align: middle; } .bg-inherit { background-color: inherit; } .bg-black { background-color: black; } .v-center:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-top: -0.25em; /* Adjusts for spacing */ } .fluid-height { height: 100%; } .visibility__hidden { visibility: hidden; } .pointerEvents__none { pointer-events: none; } /* Padding Helpers */ .pn { padding: 0 !important; } .p1 { padding: 1px !important; } .p2 { padding: 2px !important; } .p3 { padding: 3px !important; } .p4 { padding: 4px !important; } .p5 { padding: 5px !important; } .p6 { padding: 6px !important; } .p7 { padding: 7px !important; } .p8 { padding: 8px !important; } .p10 { padding: 10px !important; } .p12 { padding: 12px !important; } .p15 { padding: 15px !important; } .p20 { padding: 20px !important; } .p25 { padding: 25px !important; } .p30 { padding: 30px !important; } .p35 { padding: 35px !important; } .p40 { padding: 40px !important; } .p50 { padding: 50px !important; } .ptn { padding-top: 0 !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .prn { padding-right: 0 !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr50 { padding-right: 50px !important; } .pbn { padding-bottom: 0 !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } .pln { padding-left: 0 !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl50 { padding-left: 50px !important; } /* Axis Padding (both top/bottom or left/right) */ .pv5 { padding-top: 5px !important; padding-bottom: 5px !important; } .pv8 { padding-top: 8px !important; padding-bottom: 8px !important; } .pv10 { padding-top: 10px !important; padding-bottom: 10px !important; } .pv15 { padding-top: 15px !important; padding-bottom: 15px !important; } .pv20 { padding-top: 20px !important; padding-bottom: 20px !important; } .pv25 { padding-top: 25px !important; padding-bottom: 25px !important; } .pv30 { padding-top: 30px !important; padding-bottom: 30px !important; } .pv40 { padding-top: 40px !important; padding-bottom: 40px !important; } .pv50 { padding-top: 50px !important; padding-bottom: 50px !important; } .ph5 { padding-left: 5px !important; padding-right: 5px !important; } .ph8 { padding-left: 8px !important; padding-right: 8px !important; } .ph10 { padding-left: 10px !important; padding-right: 10px !important; } .ph15 { padding-left: 15px !important; padding-right: 15px !important; } .ph20 { padding-left: 20px !important; padding-right: 20px !important; } .ph25 { padding-left: 25px !important; padding-right: 25px !important; } .ph30 { padding-left: 30px !important; padding-right: 30px !important; } .ph40 { padding-left: 40px !important; padding-right: 40px !important; } .ph50 { padding-left: 50px !important; padding-right: 50px !important; } /* margin center helper */ .mauto { margin-left: auto; margin-right: auto; } .mn { margin: 0 !important; } .m1 { margin: 1px !important; } .m2 { margin: 2px !important; } .m3 { margin: 3px !important; } .m4 { margin: 4px !important; } .m5 { margin: 5px !important; } .m8 { margin: 8px !important; } .m10 { margin: 10px !important; } .m15 { margin: 15px !important; } .m20 { margin: 20px !important; } .m25 { margin: 25px !important; } .m30 { margin: 30px !important; } .m35 { margin: 35px !important; } .m40 { margin: 40px !important; } .m50 { margin: 50px !important; } .mtn { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt70 { margin-top: 70px !important; } .mrn { margin-right: 0 !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr50 { margin-right: 50px !important; } .mbn { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb70 { margin-bottom: 70px !important; } .mln { margin-left: 0 !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml50 { margin-left: 50px !important; } /* Axis Margins (both top/bottom or left/right) */ .mv5 { margin-top: 5px !important; margin-bottom: 5px !important; } .mv10 { margin-top: 10px !important; margin-bottom: 10px !important; } .mv15 { margin-top: 15px !important; margin-bottom: 15px !important; } .mv20 { margin-top: 20px !important; margin-bottom: 20px !important; } .mv25 { margin-top: 25px !important; margin-bottom: 25px !important; } .mv30 { margin-top: 30px !important; margin-bottom: 30px !important; } .mv40 { margin-top: 40px !important; margin-bottom: 40px !important; } .mv50 { margin-top: 50px !important; margin-bottom: 50px !important; } .mv70 { margin-top: 70px !important; margin-bottom: 70px !important; } .mh5 { margin-left: 5px !important; margin-right: 5px !important; } .mh10 { margin-left: 10px !important; margin-right: 10px !important; } .mh15 { margin-left: 15px !important; margin-right: 15px !important; } .mh20 { margin-left: 20px !important; margin-right: 20px !important; } .mh25 { margin-left: 25px !important; margin-right: 25px !important; } .mh30 { margin-left: 30px !important; margin-right: 30px !important; } .mh40 { margin-left: 40px !important; margin-right: 40px !important; } .mh50 { margin-left: 50px !important; margin-right: 50px !important; } .mh70 { margin-left: 70px !important; margin-right: 70px !important; } /* Negative Margin Helpers */ .mtn5 { margin-top: -5px !important; } .mtn10 { margin-top: -10px !important; } .mtn15 { margin-top: -15px !important; } .mtn20 { margin-top: -20px !important; } .mtn30 { margin-top: -30px !important; } .mrn5 { margin-right: -5px !important; } .mrn10 { margin-right: -10px !important; } .mrn15 { margin-right: -15px !important; } .mrn20 { margin-right: -20px !important; } .mrn30 { margin-right: -30px !important; } .mbn5 { margin-bottom: -5px !important; } .mbn10 { margin-bottom: -10px !important; } .mbn15 { margin-bottom: -15px !important; } .mbn20 { margin-bottom: -20px !important; } .mbn30 { margin-bottom: -30px !important; } .mln5 { margin-left: -5px !important; } .mln10 { margin-left: -10px !important; } .mln15 { margin-left: -15px !important; } .mln20 { margin-left: -20px !important; } .mln30 { margin-left: -30px !important; } /* Vertical Negative Margin "mv" + "n" + "x" */ .mvn5 { margin-top: -5px !important; margin-bottom: -5px !important; } .mvn10 { margin-top: -10px !important; margin-bottom: -10px !important; } .mvn15 { margin-top: -15px !important; margin-bottom: -15px !important; } .mvn20 { margin-top: -20px !important; margin-bottom: -20px !important; } .mvn30 { margin-top: -30px !important; margin-bottom: -30px !important; } /* Horizontal Negative Margin "mh" + "n" + "x" */ .mhn5 { margin-left: -5px !important; margin-right: -5px !important; } .mhn10 { margin-left: -10px !important; margin-right: -10px !important; } .mhn15 { margin-left: -15px !important; margin-right: -15px !important; } .mhn20 { margin-left: -20px !important; margin-right: -20px !important; } .mhn30 { margin-left: -30px !important; margin-right: -30px !important; } /* Vertical Align Helpers */ .va-t { vertical-align: top !important; } .va-m { vertical-align: middle !important; } .va-b { vertical-align: bottom !important; } .va-s { vertical-align: super !important; } /* Text Helpers */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .text-nowrap { white-space: nowrap !important; } /* Inline Block Helper */ .ib, .inline-object { display: inline-block !important; } .clear { clear: both; } .wvWarning { position: relative; width: 320px; min-height: 130px; z-index: 999; left: calc(50% - 160px); border: #000 solid 1px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; color: #FF5722; box-shadow: 0px 3px 23px #ff980078; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 2s; animation-fill-mode: both; animation-timing-function: ease-out; } @-webkit-keyframes example { from { top: 0vh; opacity: 0; background: #868686; } to { top: 10vh; opacity: 1; background: #ffffff; } } @keyframes example { from { top: 0vh; opacity: 0; background: #868686; } to { top: 10vh; opacity: 1; background: #ffffff; } } .wvWarning-content { position: relative; width: 190px; min-height: 88px; max-height: 80vh; margin: auto; } .wvWarning-icon { font-size: 32px; } .wvWarning-text { position: relative; } .wvWarning-button { background-color: #f1ededcc; color: #607D8B; width: 50px; font-weight: 600; margin-top: 2px; margin-right: 30px; } .wvScreenToSmallWarning { position: fixed; display: block; top: 0; left: 0; background-color: white; color: #333; width: 100%; height: 100%; z-index: 1000; } .wvScreenToSmallWarning-content { padding: 10px; text-align: center; } /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ @media only screen and (min-width: 550px) and (min-height: 280px) { .wvScreenToSmallWarning { display: none; } } /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ @media only screen and (min-width: 280px) and (min-height: 550px) { .wvScreenToSmallWarning { display: none; } } wv-notice { display: block; height: 100%; width: 100%; } .wvNotice { padding: 0.5rem 0.25rem; height: 100%; } .wvNotice__text { position: relative; top: 50%; transform: translateY(-50%); text-align: center; margin-left: 1rem; font-weight: 400; color: #b3b3b3; float: left; width: calc(100% - 7rem); } .wvNotice__closeButton { float: right; margin-right: 0.5em; position: relative; top: 50%; transform: translateY(-50%); width: 3.5rem; height: 2.5rem; text-align: center; font-size: 1em; font-weight: 100; line-height: 2.2rem; cursor: pointer; border: 1px solid #454545; } /* layout: left section */ .wvLayoutLeft { position: absolute; z-index: 2; background-color: black; width: 32rem; left: 0; } .wvLayoutLeft.wvLayoutLeft--toppadding { top: 42px; } .wvLayoutLeft:not(.wvLayoutLeft--toppadding) { top: 0; } @media screen and (max-device-width: 374px) { .wvLayoutLeft.wvLayoutLeft--bottompadding { bottom: 7rem; } } @media screen and (min-device-width: 375px) { .wvLayoutLeft.wvLayoutLeft--bottompadding { bottom: 5rem; } } .wvLayoutLeft:not(.wvLayoutLeft--bottompadding) { bottom: 0; } .wvLayoutLeft.wvLayoutLeft--closed { transform: translateX(-32rem); } .wvLayoutLeft.wvLayoutLeft--closed.wvLayoutLeft--small { transform: translateX(-12rem); } .wvLayoutLeft.wvLayoutLeft--small { width: 12rem; } .wvLayoutLeft.wvLayoutLeft--small .wvLayoutLeft__contentTop, .wvLayoutLeft.wvLayoutLeft--small .wvLayoutLeft__contentMiddle, .wvLayoutLeft.wvLayoutLeft--small .wvLayoutLeft__contentBottom { width: 100%; } .wvLayoutLeft__content { border-right: 1px solid #AAA; flex: 1; display: flex; flex-direction: column; overflow-y: auto; height: 100%; } .wvLayoutLeft__contentTop { padding: 0rem 1rem 0rem 1rem; width: 31.9rem; } .wvLayoutLeft__contentTop:after { content: ""; display: block; height: 0; width: 0; clear: both; } .wvLayoutLeft__contentMiddle { flex: 1 0 auto; width: 31.9rem; } .wvLayoutLeft__contentBottom { width: 31.9rem; } .wvLayout__leftBottom.wvLayout__leftBottom--enabled { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 1rem; padding: 1rem; } .wvLayoutLeft__actions, .wvLayoutLeft__actions--outside { display: block; position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 25px; } .wvLayoutLeft__actions--outside { right: -25px; } .wvLayoutLeft__action { background-color: #3498db; opacity: 0.5; color: white; transition: none; } .wvLayoutLeft__action:hover, .wvLayoutLeft__action:focus { opacity: 1; } /* layout: right section */ .wvLayout__right { display: block; position: absolute; z-index: 2; background-color: black; width: 85px; right: 0; } .wvLayout__right.wvLayout__right--toppadding { top: 42px; } .wvLayout__right:not(.wvLayout__right--toppadding) { top: 0; } @media screen and (max-device-width: 374px) { .wvLayout__right.wvLayout__right--bottompadding { bottom: 7rem; } } @media screen and (min-device-width: 375px) { .wvLayout__right.wvLayout__right--bottompadding { bottom: 5rem; } } .wvLayout__right:not(.wvLayout__right--bottompadding) { bottom: 0; } .wvLayout__right.wvLayout__right--closed { transform: translateX(85px); } .wvLayout__right > wv-layout-right, .wvLayout__right > wv-layout-right > .wvViewer__asideRight { display: block; height: 100%; width: 100%; } .wvAsideRight__content { height: 100%; float: left; border-left: 1px solid #AAA; padding: 0 5px; width: 32rem; } .wvAsideRight__actions, .wvAsideRight__actions--outside { display: block; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 25px; z-index: 3; } .wvAsideRight__actions--outside { left: -25px; } .wvAsideRight__action { background-color: #3498db; opacity: 0.5; color: white; transition: none; } .wvAsideRight__action:hover, .wvAsideRight__action:focus { opacity: 1; } .wvAsideRight__fixOpenFullyTooltip + .tooltip { left: -6.633em !important; top: 1px !important; } /* layout: bottom section */ .wvLayout__bottom { position: absolute; left: 0; bottom: 0; right: 0; background-color: #1a1a1a; } @media screen and (max-device-width: 374px) { .wvLayout__bottom { height: 7rem; } } @media screen and (min-device-width: 375px) { .wvLayout__bottom { height: 5rem; } } /* layout: main section */ .wvLayout__main { position: absolute; text-align: center; right: 0; left: 0; } .wvLayout__main .wvLayout__splitpane--toolbarAtTop { display: block; height: calc(100% - 42px); width: 100%; position: relative; top: 42px; } .wvLayout__main .wvLayout__splitpane--toolbarAtRight { display: block; height: 100%; width: calc(100% - 42px); } .wvLayout__main .wvLayout__splitpane--bigToolbarAtTop { display: block; height: calc(100% - 68px); width: 100%; position: relative; top: 68px; } .wvLayout__main .wvLayout__splitpane--bigToolbarAtRight { display: block; height: 100%; width: calc(100% - 68px); } .wvLayout__main.wvLayout__main--toppadding { top: 42px; } .wvLayout__main:not(.wvLayout__main--toppadding) { top: 0; } .wvLayout__main.wvLayout__main--bottompadding { bottom: 440px; } @media screen and (max-device-width: 374px) { .wvLayout__main.wvLayout__main--bottompadding { bottom: 7rem; } } @media screen and (min-device-width: 375px) { .wvLayout__main.wvLayout__main--bottompadding { bottom: 5rem; } } .wvLayout__main:not(.wvLayout__main--bottompadding) { bottom: 0; } .wvLayout__main.wvLayout__main--leftpadding { left: 32rem; } .wvLayout__main { left: 0px; } .wvLayout__main.wvLayout__main--smallleftpadding { left: 12rem; } .wvLayout__main.wvLayout__main--rightpadding { right: 85px; } .wvLayout__main:not(.wvLayout__main--rightpadding) { right: 0px; } /* global */ .popover { color: black; } .wvViewer__editor--full { position: absolute; top: 0; right: 0; z-index: 10; opacity: 0; transform: translateX(100%); width: 100%; height: 100%; background-color: white; color: #666666; } .wvViewer__editor--full.opened { opacity: 1; transform: translateX(0); } .wvViewer__topBar { width: 100%; overflow-y: auto; white-space: nowrap; max-width: 100%; } .wvViewer__buttonGroup { display: inline-block; } .wvViewer__buttonGroup--asideWidth { width: 32rem; padding-right: 1rem; } .wvViewer__buttonGroup--contentWidth { width: calc(100% - 32rem); padding-left: 1rem; max-height: 4.2rem; } .wvViewer__iframe { position: absolute; left: 0; top: 0; } /* bottom bar */ .wvViewer__bottomBar, .wvViewer__bottomBar--expanded, .wvViewer__bottomBar--minimized { position: absolute; left: 0; bottom: 0; width: 100%; background-color: #111111; } .wvViewer__bottomBar--expanded { height: 80px; color: white; } .wvViewer__bottomBar--expanded .wvViewer__timeline { width: calc(100% - 80px); } .wvViewer__bottomBar--expanded .wvTimeline__hotspots { bottom: -40px; } .wvViewer__bottomBar--minimized { color: white; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 2.5rem; } .wvViewer__bottomBar--minimized .wvTimeline__hotspot { top: -40px; opacity: 0; visibility: hidden; z-index: -1; } .wvViewer__bottomBar--minimized:hover .wvTimeline__hotspot { opacity: 1; visibility: visible; z-index: 5; transition-delay: 0s; } .wvViewer__timeline { height: 24px; line-height: 24px; vertical-align: middle; width: 100%; } .wvViewer__trademark { display: inline-block; float: right; width: 80px; height: 80px; float: right; line-height: 80px; vertical-align: middle; text-align: center; } .wvTimeline__input { border-radius: 3px; margin-top: 2px; border: 1px solid #e7e7e7; } .wvTimeline__input:focus { outline: none; } .wvTimeline__actions { display: inline-block; border-right: 1px solid #e7e7e7; } .wvSerieslist { margin: 0; padding: 0; list-style: none; } .wvSerieslist__seriesItem--selectable { cursor: pointer !important; } .wvSerieslist__seriesItem--selectable:hover { color: white; } .wvSerieslist__placeholderIcon, .wvSerieslist__placeholderIcon.fa { position: absolute; width: 100%; height: 100%; font-size: 3.25rem; line-height: 6.5rem; text-align: center; } .wvSerieslist__placeholderIcon--strikeout, .wvSerieslist__placeholderIcon--strikeout.fa { color: #c3c3c3; } .wvSerieslist__placeholderIcon--strikeout::after, .wvSerieslist__placeholderIcon--strikeout.fa::after { position: absolute; left: 0; top: 50%; right: 0; transform: rotate(-45deg) scaleX(0.9); border-top: 5px solid; border-color: inherit; content: ""; } .wvSerieslist__picture { display: inline-block; font-size: 14px; width: 6.5rem; height: 6.5rem; position: relative; z-index: -1; } .wvSerieslist__badge, .wvSerieslist__badge--blue, .wvSerieslist__badge--red, .wvSerieslist__badge--green, .wvSerieslist__badge--yellow, .wvSerieslist__badge--violet { position: absolute; bottom: 5px; right: 5px; font-size: 10px; line-height: 15px; width: 15px; height: 15px; border-radius: 100%; background-color: gray; vertical-align: middle; text-align: center; font-weight: bold; } .wvSerieslist__information { font-size: 14px; float: right; padding-left: 1rem; width: calc(100% - 6.5rem); height: 6.5rem; } .wvSerieslist__label { white-space: nowrap; width: calc(100% - 10px); overflow: hidden; height: 3.25rem; line-height: 3.25rem; vertical-align: middle; } .wvSerieslist__timeline { height: 3.25rem; line-height: 3.25rem; vertical-align: middle; } .wvSerieslist__seriesItem { position: relative; padding-left: 0; list-style: none; font-size: 0; border-right: 0.2rem solid transparent; border-left: 0.2rem solid transparent; border-top: 0.2rem solid transparent; border-bottom: 0.2rem solid transparent; border-corner-shape: notch; line-height: 0px; margin: 0.1rem; } .wvSerieslist__seriesItem.active { border-color: rgba(255, 255, 255, 0.6); border-style: solid; } .wvSerieslist__seriesItem.highlighted { border-color: white; border-style: solid; } .wvSerieslist__seriesItem:hover, .wvSerieslist__seriesItem:focus, .wvSerieslist__seriesItem.focused { border-style: dashed; border-color: rgba(255, 255, 255, 0.8); } .wvSerieslist__seriesItem--list { display: block; } .wvSerieslist__seriesItem--grid { display: inline-block; } .wvSerieslist__seriesItem--oneCol { text-align: center; } .wvSerieslist__seriesItem--activated, .wvSerieslist__videoItem--activated, .wvSerieslist__pdfItem--activated { border: 0.2rem solid #3398db !important; } .wvSerieslist__badge--blue { background-color: rgba(51, 152, 219, 0.7); } .wvSerieslist__badge--red { background-color: rgba(206, 0, 0, 0.7); } .wvSerieslist__badge--green { background-color: rgba(0, 160, 27, 0.7); } .wvSerieslist__badge--yellow { background-color: rgba(220, 200, 0, 0.9); } .wvSerieslist__badge--violet { background-color: rgba(255, 31, 255, 0.7); } .wvToolbar { position: absolute; } .wvToolbar--top { top: 0; height: 42px; right: 0; text-align: right; white-space: nowrap; max-width: 100%; } .wvToolbar--right { right: 0; width: 42px; height: 100%; z-index: 2; } .wvToolbar--right.wvToolbar--big { width: 68px; } /* Splitpane Grid Configuration */ .wvToolbar__splitpaneConfigPopover { font-size: 0; } .wvToolbar__splitpaneConfigNotice { font-size: 1.25rem; font-style: italic; text-align: center; color: #333; } input[type="radio"].wvToolbar__splitpaneConfigButtonInput { position: absolute; width: 0; height: 0; left: 0; top: 0; bottom: 2px; right: 0; opacity: 0; } /* Windowing Preset */ .wvToolbar__windowingPresetConfigNotice { font-size: 1.25rem; font-style: italic; text-align: center; color: #333; } .wvToolbar__windowingPresetList { list-style: none; margin: 0; padding: 0; font-size: 1.5rem; } .wvToolbar__windowingPresetListItem { outline: none; background-color: transparent; border: none; position: relative; display: inline-block; cursor: pointer; font-variant: small-caps; text-transform: lowercase; text-align: center; font-size: 1.3rem; font-weight: 400; line-height: 2.2rem; color: #d9d9d9; transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease; margin: 0; min-width: 3rem; padding: 0 10px; line-height: 3.6rem; max-height: 2.8rem; max-width: 100%; overflow: hidden; margin: 0.6rem; margin-left: 0rem; margin-right: 0rem; line-height: 2rem; padding-top: 0.1rem; padding-bottom: 0.5rem; font-size: 1.4rem; border: 1px solid #454545; font-family: Arial; background-color: black; color: #1a1a1a; border: 1px solid #bababa; background-color: white; width: 100%; margin: 0; margin-left: 0 !important; border-top: none; border-bottom: none; } .wvToolbar__windowingPresetListItem:hover { text-decoration: none; color: white; } .wvToolbar__windowingPresetListItem + .wvToolbar__windowingPresetListItem { margin-left: 0.7rem; } .wvToolbar__windowingPresetListItem:hover { background-color: #1a1a1a; } .wvToolbar__windowingPresetListItem > .glyphicon { position: relative; display: inline-block; top: 3px; margin-right: 4px; } .wvToolbar__windowingPresetListItem:hover { color: #1a1a1a; background-color: #e6e6e6; } .wvVideo { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); } .wvStudyInformationBreadcrumb__patient { display: inline-block; background-color: rgba(255, 255, 255, 0.15); padding: 0.2rem 1rem 0.3rem 1rem; text-align: center; font-size: 1em; margin: 0.6rem; font-weight: 400; line-height: 2.3rem; margin-right: 0; } .wvStudyInformationBreadcrumb__study { display: inline-block; background-color: rgba(255, 255, 255, 0.15); padding: 0.2rem 1rem 0.3rem 1rem; text-align: center; font-size: 1em; margin: 0.6rem; font-weight: 400; line-height: 2.3rem; } .wvSelectionActionlist { display: block; text-align: center; } /* wvb-ui stuffs */ .wv-overlay { color: orange; } .wv-overlay-icon { width: 64px; } .wvOverlay__studyBadge, .wvOverlay__studyBadge--blue, .wvOverlay__studyBadge--red, .wvOverlay__studyBadge--green, .wvOverlay__studyBadge--yellow, .wvOverlay__studyBadge--violet { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; background-color: gray; z-index: 1; } .wv-overlay-topleft { position: absolute; top: 0rem; left: 0rem; text-align: left; } .wv-overlay-topright { position: absolute; top: 0rem; right: 0rem; text-align: right; } .wv-overlay-bottomright { position: absolute; bottom: 2em; right: 0rem; text-align: right; } .wv-overlay-bottomleft { position: absolute; bottom: 2em; left: 0rem; text-align: left; } .wv-overlay-timeline-wrapper { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; } .wv-overlay-topleft, .wv-overlay-topright, .wv-overlay-bottomright, .wv-overlay-bottomleft { padding: 2rem; transition: color 500ms, background-color 500ms; background-color: rgba(0, 0, 0, 0.66); } .wv-overlay-topleft:hover, .wv-overlay-topright:hover, .wv-overlay-bottomright:hover, .wv-overlay-bottomleft:hover { background-color: rgba(0, 0, 0, 0.9); } .wvPaneOverlay { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); font-weight: 100; text-align: center; color: white; font-size: 2rem; } .wv-overlay-scrollbar-loaded { position: absolute; bottom: 0; left: 0; height: 5px; background-color: red; will-change: right; transform-origin: 0% 50%; } .wv-overlay-scrollbar-loading { position: absolute; bottom: 0; left: 0; height: 5px; background-color: #660000; will-change: right; transform-origin: 0% 50%; } .wv-overlay-scrollbar-text { position: absolute; bottom: calc(1em + 5px); left: 5px; height: 1em; color: red; font-size: 0.8em; font-family: helvetica; } .wvOverlay__studyBadge--blue { background-color: rgba(51, 152, 219, 0.7); } .wvOverlay__studyBadge--red { background-color: rgba(206, 0, 0, 0.7); } .wvOverlay__studyBadge--green { background-color: rgba(0, 160, 27, 0.7); } .wvOverlay__studyBadge--yellow { background-color: rgba(220, 200, 0, 0.9); } .wvOverlay__studyBadge--violet { background-color: rgba(255, 31, 255, 0.7); } /*@import "wv-pdf-viewer.scss";*/ @page { margin: 0; } .wvSplitpane { height: 100%; padding: 7px 2px 2px 2px; position: relative; } .wvSplitpane__cell { display: inline-block; float: left; height: 100%; width: 100%; position: relative; } .wvSplitpane__cellBorder, .wvSplitpane__cellBorder--selected, .wvSplitpane__cellBorder--blue, .wvSplitpane__cellBorder--red, .wvSplitpane__cellBorder--green, .wvSplitpane__cellBorder--yellow, .wvSplitpane__cellBorder--violet { display: inline-block; float: left; height: calc(100% - 2px); width: calc(100% - 2px); border: 2px dashed transparent; padding: 2px; margin: 1px; } .wvSplitpane__cellBorder--selected { border: 2px solid rgba(51, 152, 219, 0.7); } .wvSplitpane__cellBorder--blue { border-color: rgba(51, 152, 219, 0.7); } .wvSplitpane__cellBorder--red { border-color: rgba(206, 0, 0, 0.7); } .wvSplitpane__cellBorder--green { border-color: rgba(0, 160, 27, 0.7); } .wvSplitpane__cellBorder--yellow { border-color: rgba(220, 200, 0, 0.9); } .wvSplitpane__cellBorder--violet { border-color: rgba(255, 31, 255, 0.7); } wv-pane-policy { display: block; width: 100%; height: 100%; } wv-pane-policy > div[ng-transclude] { display: block; width: 100%; height: 100%; } .wv-timeline { position: relative; height: 2em; } .wv-timeline.reduced { height: 5px; } .wv-timeline.reduced .wv-timeline-loading-bar-wrapper { width: 100%; height: 100%; } .wv-timeline-controls-wrapper { position: absolute; left: 0; bottom: 0; width: 16em; height: 100%; color: white; } .wv-timeline-loading-bar-wrapper { position: absolute; right: 0; bottom: 0; width: calc(100% - 16em); height: calc(100% + 2px); } .wv-timeline-loading-bar-wrapper svg { position: absolute; left: 0; top: 0; } /* wv-timeline-controls directive */ .wv-timeline-controls { padding: 0.5em 0.5em 0.5em 0.5em; line-height: 1em; background-color: rgba(0, 0, 0, 0.66); text-align: center; transition: color 500ms, background-color 500ms; } .wv-timeline-controls:hover { background-color: rgba(0, 0, 0, 0.9); } .wv-timeline-controls-vertical-sizing { display: inline-block; line-height: 1em; font-size: 1em; } .wv-timeline-controls-vflip:before, .wv-timeline-controls-vflip:after { transform: scaleX(-1); display: inline-block; } .wv-timeline-controls-button { display: inline-block; height: 1em; width: 1em; line-height: 1em; font-size: 1em; margin: 0; user-select: none; cursor: pointer; } .wv-timeline-controls-input { height: 1em; width: 3em; padding: 0; padding-bottom: 1px; box-sizing: content-box; border: none; border-bottom: 1px solid rgba(255, 202, 128, 0.24); background-color: transparent; text-align: right; } .wv-timeline-controls-play-button-wrapper { float: right; } /* wv-play-button directive */ .wv-play-button { display: inline-block; position: relative; line-height: 1em; height: 3em; width: 6em; padding-bottom: 1em; padding-left: 0.25em; padding-right: 0.25em; } .wv-play-button:hover .wv-play-button-config-position-handler { visibility: visible; } .wv-play-button-config-position-handler { visibility: hidden; position: absolute; bottom: 3em; left: 1em; right: 0.5em; } .wv-play-button-config { position: absolute; bottom: 0; left: -6em; width: 12em; padding: 1em; background-color: rgba(0, 0, 0, 0.5); } /* Style range input (see http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html) */ .wv-play-button-config-framerate-wrapper { display: inline-block; margin: 0.25em 0 0.5em 0; } input[type="range"].wv-play-button-config-framerate { /*removes default webkit styles*/ -webkit-appearance: none; /*fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/ width: 10em; } input[type="range"].wv-play-button-config-framerate::-webkit-slider-runnable-track { width: 10em; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type="range"].wv-play-button-config-framerate::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; margin-top: -4px; } input[type="range"].wv-play-button-config-framerate:focus { outline: none; } input[type="range"].wv-play-button-config-framerate:focus::-webkit-slider-runnable-track { background: #ccc; } input[type="range"].wv-play-button-config-framerate::-moz-range-track { width: 10em; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type="range"].wv-play-button-config-framerate::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; } /*hide the outline behind the border*/ input[type="range"].wv-play-button-config-framerate:-moz-focusring { outline: 1px solid white; outline-offset: -1px; } input[type="range"].wv-play-button-config-framerate::-ms-track { width: 10em; height: 5px; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: transparent; /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 6px 0; /*remove default tick marks*/ color: transparent; } input[type="range"].wv-play-button-config-framerate::-ms-fill-lower { background: #777; border-radius: 10px; } input[type="range"].wv-play-button-config-framerate::-ms-fill-upper { background: #ddd; border-radius: 10px; } input[type="range"].wv-play-button-config-framerate::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; } input[type="range"].wv-play-button-config-framerate:focus::-ms-fill-lower { background: #888; } input[type="range"].wv-play-button-config-framerate:focus::-ms-fill-upper { background: #ccc; } .wv-loadingbar-image-bar { cursor: pointer; } .wv-loadingbar-not-loaded { fill: rgba(255, 255, 255, 0.1); } .wv-loadingbar-not-loaded, .wv-loadingbar-LOW-quality { transition: none; } .wv-loadingbar-not-loaded:hover { fill: rgba(255, 255, 255, 0.2); } .wv-loadingbar-LOSSLESS-quality, .wv-loadingbar-PIXELDATA-quality { fill: rgba(0, 255, 0, 0.7); } .wv-loadingbar-LOSSLESS-quality:hover, .wv-loadingbar-LOSSLESS-quality.wv-loadingbar-active, .wv-loadingbar-PIXELDATA-quality:hover, .wv-loadingbar-PIXELDATA-quality.wv-loadingbar-active { fill: lime; } .wv-loadingbar-LOW-quality { fill: rgba(255, 0, 0, 0.7); } .wv-loadingbar-LOW-quality:hover, .wv-loadingbar-LOW-quality.wv-loadingbar-active { fill: red; } .wv-loadingbar-MEDIUM-quality { fill: rgba(255, 95, 0, 0.7); } .wv-loadingbar-MEDIUM-quality:hover, .wv-loadingbar-MEDIUM-quality.wv-loadingbar-active { fill: #ff5f00; } .disclaimer { color: #E63F24; background-color: #303030; padding: 5px; text-align: center; font-weight: bold; } .tbGroup { position: relative; } .tbGroup__buttons--base, .tbGroup__buttons--bottom, .tbGroup__buttons--left { z-index: 5; background-color: black; position: absolute; } .tbGroup__buttons--bottom { right: 0; display: block; } .tbGroup__buttons--left { right: 100%; top: 0; display: block; } .tbGroup__icon { display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.1); } .tbGroup__icon.active { border-color: transparent transparent transparent #3498db; } wv-viewport { display: inline-block; width: 100%; height: 100%; } wv-viewport > div { position: relative; width: 100%; height: 100%; } wv-viewport > div > .wv-cornerstone-enabled-image { width: 100%; height: 100%; text-align: center; } .wv-draggable-clone { width: 150px; height: 150px; background-color: rgba(255, 255, 255, 0.25); } @media print { .wvPrintExclude { display: none; } .wvPrintFullPage { width: 100% !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; } .wvLayout__main { top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; } .wvPrintViewer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .wvPrintViewer canvas { max-width: 100% !important; max-height: 100% !important; margin: auto; } .wv-overlay-topleft, .wv-overlay-topleft *, .wv-overlay-topright, .wv-overlay-topright *, .wv-overlay-bottomright, .wv-overlay-bottomright *, .wv-overlay-bottomleft, .wv-overlay-bottomleft * { background-color: black !important; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; color: orange !important; } .tooltip { display: none !important; } body { margin: 0; padding: 0; position: relative; width: 8.5in; height: 11in; } body, body * { background-color: black !important; -webkit-print-color-adjust: exact !important; } } .closePrintButton { display: none; } body.print .wvPrintExclude { display: none; } body.print .wvPrintFullPage { width: 100% !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; } body.print .wvLayout__main { top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; } body.print .wvPrintViewer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } body.print .wvPrintViewer canvas { max-width: 100% !important; max-height: 100% !important; margin: auto; } body.print .wv-overlay-topleft, body.print .wv-overlay-topleft *, body.print .wv-overlay-topright, body.print .wv-overlay-topright *, body.print .wv-overlay-bottomright, body.print .wv-overlay-bottomright *, body.print .wv-overlay-bottomleft, body.print .wv-overlay-bottomleft * { background-color: black !important; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; color: orange !important; } body.print .tooltip { display: none !important; } body.print body { margin: 0; padding: 0; position: relative; width: 8.5in; height: 11in; } body.print body, body.print body * { background-color: black !important; -webkit-print-color-adjust: exact !important; } @media screen { body.print .closePrintButton { display: block; position: fixed; top: 0; right: 0; padding: 10px; font-size: 24px; background-color: black; color: white; border: none; } }