92 lines
1.6 KiB
Stylus
92 lines
1.6 KiB
Stylus
@import "{design}/app"
|
|
|
|
$switchSize = 50px
|
|
|
|
.quickSwitch
|
|
height: 80px
|
|
position: absolute
|
|
top: 5px
|
|
width: 140px
|
|
|
|
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
|
|
position: absolute
|
|
z-index: 10000
|
|
top: 70px
|
|
left: -350px
|
|
width: 400px
|
|
height: 500px
|
|
background: black
|
|
opacity: 0.8
|
|
border-radius: 5px
|
|
transition(all 0.3s ease)
|
|
|
|
.seriesHover
|
|
position: absolute
|
|
z-index: 10000
|
|
top: 70px
|
|
left: 50px
|
|
width: 700px
|
|
height: 900px
|
|
background: black
|
|
opacity: 0.8
|
|
border-radius: 5px
|
|
transition(all 0.3s ease)
|
|
|
|
&.tiny
|
|
width: 0
|
|
height: 0
|
|
opacity: 0
|
|
|
|
.thumbnailEntry
|
|
margin: 0
|
|
width: 33%
|
|
display: inline-block
|
|
|
|
$switchSizeSmall = 30px
|
|
@media screen and (max-width: 1600px)
|
|
.quickSwitch div.switchSection
|
|
.label
|
|
font-size: 8px
|
|
font-weight: 400
|
|
padding: 0
|
|
.studySwitch
|
|
border-radius: 7px
|
|
.studySwitch, .seriesSwitch
|
|
&, svg
|
|
width: $switchSizeSmall
|
|
height: $switchSizeSmall
|