codecombat/app/styles/play/level/tome/spell_toolbar.sass

86 lines
2 KiB
Sass
Raw Normal View History

@import "../../../bootstrap/mixins"
.spell-toolbar-view
2014-01-25 18:11:29 -05:00
position: relative
box-sizing: border-box
2014-01-25 18:11:29 -05:00
margin: 4px 1%
height: 45px
width: 97%
//background-color: rgba(100, 45, 210, 0.15)
2014-01-25 18:11:29 -05:00
.flow
&:hover .spell-progress
opacity: 1
2014-01-25 18:11:29 -05:00
.spell-progress
position: absolute
2014-01-25 18:11:29 -05:00
height: 100%
width: 40%
left: 45%
display: inline-block
cursor: pointer
2014-01-25 18:11:29 -05:00
box-sizing: border-box
opacity: 0.25
.progress
position: absolute
left: 0px
top: 17.5px
2014-01-25 18:11:29 -05:00
bottom: 0px
width: 100%
height: 4px
overflow: visible
pointer-events: none
2014-01-25 18:11:29 -05:00
.progress-bar
2014-01-25 18:11:29 -05:00
@include transition(width .0s linear)
position: relative
pointer-events: none
2014-01-25 18:11:29 -05:00
background: linear-gradient(#2c3e5f, #2c3e5f 16%, #3a537f 16%, #3a537f 83%, #2c3e5f 84%, #2c3e5f)
width: 50%
pointer-events: none
.scrubber-handle
position: absolute
pointer-events: none
right: -5px
top: -17.5px
2014-01-25 18:11:29 -05:00
background: linear-gradient(#2c3e5f, #2c3e5f 16%, #3a537f 16%, #3a537f 83%, #2c3e5f 84%, #2c3e5f)
width: 14px
height: 40px
2014-01-25 18:11:29 -05:00
border-radius: 3px
box-sizing: border-box
border: 1px solid black
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5)
&:hover .steppers
opacity: 1
2014-01-25 18:11:29 -05:00
.steppers
position: absolute
z-index: 2
width: 60px
2014-01-25 18:11:29 -05:00
right: 2%
box-sizing: border-box
opacity: 0.25
button
box-sizing: border-box
height: 40px
width: 30px
padding: 2px
2014-01-25 18:11:29 -05:00
.metrics
display: none
top: 30px
position: absolute
z-index: 10
pointer-events: none
padding: 10px
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
font-variant: small-caps
text-overflow: ellipsis
font-size: 13px
white-space: nowrap