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

100 lines
2.4 KiB
Sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
.spell-toolbar-view
position: relative
box-sizing: border-box
margin: 4px 1%
height: 45px
width: 97%
z-index: 4
//background-color: rgba(100, 45, 210, 0.15)
.flow
&:hover .spell-progress
opacity: 1
.spell-progress
position: absolute
height: 100%
top: -50px
width: 65%
width: -webkit-calc(85% - 60px)
width: calc(85% - 60px)
left: 10%
display: inline-block
cursor: pointer
box-sizing: border-box
opacity: 0.25
.progress
position: absolute
left: 0px
top: 17.5px
bottom: 0px
width: 100%
height: 4px
overflow: visible
pointer-events: none
.progress-bar
@include transition(width .0s linear)
position: relative
pointer-events: none
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
background: linear-gradient(#2c3e5f, #2c3e5f 16%, #3a537f 16%, #3a537f 83%, #2c3e5f 84%, #2c3e5f)
width: 14px
height: 40px
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
.steppers
position: absolute
z-index: 2
width: 60px
top: -50px
right: 2%
box-sizing: border-box
opacity: 0.25
button
box-sizing: border-box
height: 40px
width: 30px
padding: 2px
.metrics
display: none
top: 0px
position: absolute
z-index: 10
pointer-events: none
border-image: url(/images/level/popover_background.png) 29 39 fill stretch
padding: 0
border-width: 15px 20px
font-variant: small-caps
text-overflow: ellipsis
font-size: 13px
white-space: nowrap
html.no-borderimage
.spell-toolbar-view
.metrics
top: 30px
border: 0
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
padding: 10px 20px