132 lines
2.2 KiB
Sass
132 lines
2.2 KiB
Sass
@import "_mixins/all"
|
|
|
|
body > div
|
|
display: table
|
|
table-layout: fixed
|
|
width: 100%
|
|
height: 100%
|
|
overflow: hidden
|
|
|
|
#left, #main, #right
|
|
display: table-cell
|
|
position: relative
|
|
height: 100%
|
|
|
|
#left
|
|
width: 350px
|
|
min-width: 350px
|
|
min-height: 800px
|
|
padding-right: 10px
|
|
background: inline-image('ui/background-left.png') repeat-y right top
|
|
|
|
#main
|
|
width: 100%
|
|
min-width: 650px
|
|
padding: 20px 48px 40px 32px
|
|
&.maximized
|
|
padding: 60px 100px 30px 440px
|
|
|
|
#right
|
|
width: 205px
|
|
min-width: 205px
|
|
padding: 20px 20px 20px 10px
|
|
background-color: $color-bg-sidebar
|
|
border-bottom: 1px solid $color-border-light
|
|
// @include transition(width .1s ease-out)
|
|
|
|
|
|
.duration_label
|
|
display: inline-block
|
|
width: 12px
|
|
height: 11px
|
|
text-indent: -200px
|
|
overflow: hidden
|
|
background: inline-image('icons/clock.png') no-repeat 1px 2px
|
|
|
|
@media screen
|
|
#left
|
|
min-width: 300px
|
|
#main
|
|
padding:
|
|
left: 22px
|
|
right: 38px
|
|
|
|
@media screen and (min-width: 1340px)
|
|
#left
|
|
min-width: 305px
|
|
|
|
@media screen and (min-width: 1350px)
|
|
#left
|
|
min-width: 310px
|
|
|
|
@media screen and (min-width: 1360px)
|
|
#left
|
|
min-width: 315px
|
|
|
|
@media screen and (min-width: 1370px)
|
|
#left
|
|
min-width: 320px
|
|
|
|
@media screen and (min-width: 1380px)
|
|
#left
|
|
min-width: 325px
|
|
|
|
@media screen and (min-width: 1390px)
|
|
#left
|
|
min-width: 330px
|
|
|
|
@media screen and (min-width: 1400px)
|
|
#left
|
|
min-width: 345px
|
|
|
|
@media screen and (min-width: 1410px)
|
|
#left
|
|
min-width: 350px
|
|
|
|
@media screen and (min-width: 1420px)
|
|
#left
|
|
min-width: 355px
|
|
|
|
@media screen and (min-width: 1430px)
|
|
#left
|
|
min-width: 360px
|
|
|
|
@media screen and (min-width: 1440px)
|
|
.duration_label
|
|
display: inline
|
|
background: none
|
|
#left
|
|
min-width: 365px
|
|
#main
|
|
padding:
|
|
left: 32px
|
|
right: 48px
|
|
|
|
@media screen and (min-width: 1450px)
|
|
#left
|
|
min-width: 370px
|
|
|
|
@media screen and (min-width: 1455px)
|
|
#left
|
|
min-width: 375px
|
|
|
|
@media screen and (min-width: 1460px)
|
|
#left
|
|
min-width: 380px
|
|
|
|
@media screen and (min-width: 1465px)
|
|
#left
|
|
min-width: 385px
|
|
|
|
@media screen and (min-width: 1470px)
|
|
#left
|
|
min-width: 390px
|
|
|
|
@media screen and (min-width: 1475px)
|
|
#left
|
|
min-width: 395px
|
|
|
|
@media screen and (min-width: 1480px)
|
|
#left
|
|
min-width: 400px
|