104 lines
1.9 KiB
Stylus
104 lines
1.9 KiB
Stylus
@import "{design}/app"
|
|
|
|
$switchSize = 50px
|
|
$switchTop = 5px
|
|
$switchHeight = 70px
|
|
$switchWrapperWidth = 140px
|
|
|
|
.quickSwitch
|
|
height: 80px
|
|
position: absolute
|
|
top: $switchTop
|
|
width: $switchWrapperWidth
|
|
|
|
&.middle
|
|
left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
|
|
|
|
&.left
|
|
left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
|
|
&.right
|
|
left: calc(50% + 20px)
|
|
|
|
div.switchSection
|
|
display: inline-block
|
|
float: left
|
|
margin: 0 5px
|
|
|
|
.label
|
|
color: $textSecondaryColor
|
|
display: block
|
|
font-size: 12px
|
|
font-weight: 300
|
|
text-align: center
|
|
text-transform: uppercase
|
|
|
|
.studySwitch
|
|
display: block
|
|
margin: 0 auto
|
|
width: $switchSize
|
|
height: $switchSize
|
|
border-radius: 11px
|
|
background-color: $darkUiColor
|
|
border: solid 1px $activeColor
|
|
|
|
.seriesSwitch
|
|
display: block
|
|
width: $switchSize
|
|
height: $switchSize
|
|
|
|
svg
|
|
width: $switchSize
|
|
height: $switchSize
|
|
|
|
.mirror-x
|
|
transform(scaleX(-1));
|
|
|
|
.studyHover, .seriesHover
|
|
position: absolute
|
|
z-index: 10000
|
|
top: $switchHeight
|
|
width: 400px
|
|
height: 500px
|
|
background: black
|
|
opacity: 0.8
|
|
border-radius: 5px
|
|
transition(all 0.3s ease)
|
|
|
|
.studyHover
|
|
left: -350px
|
|
width: 400px
|
|
|
|
.seriesHover
|
|
left: 50px
|
|
width: 700px
|
|
|
|
&.tiny
|
|
width: 0
|
|
height: 0
|
|
opacity: 0
|
|
|
|
.thumbnailEntry
|
|
margin: 0
|
|
width: 33%
|
|
display: inline-block
|
|
|
|
$switchSizeSmall = 35px
|
|
@media screen and (max-width: 1600px)
|
|
.quickSwitch
|
|
&.left
|
|
left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
|
|
&.right
|
|
left: calc(50% + 8px)
|
|
height: 45px
|
|
div.switchSection
|
|
.label
|
|
font-size: 8px
|
|
font-weight: 400
|
|
padding: 0
|
|
.studySwitch
|
|
border-radius: 7px
|
|
.studySwitch, .seriesSwitch
|
|
&, svg
|
|
width: $switchSizeSmall
|
|
height: $switchSizeSmall
|