codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-24 08:08:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
codecombat/app/styles/play/level/hud.sass

273 lines
5.7 KiB
Sass
Raw Normal View History

Ready for action, sir!
2014-01-03 13:32:13 -05:00
@import "app/styles/bootstrap/mixins"
#thang-hud.no-selection
.center
> *
display: none
.no-selection-message
//display: block // we fade this in
margin: auto
width: 100%
height: 100%
text-align: center
background: transparent url(/images/level/no_selection_pointer.png) no-repeat 50% 40%
background-size: 40px 37px
@include opacity(75)
&:hover
@include opacity(100)
div
padding-top: 70px
font-size: 14px
#thang-hud
width: 55%
height: 120px
position: relative
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.left-wing
position: absolute
width: 50%
height: 100%
left: 0
top: 0
z-index: -1
background-image: url(/images/level/hud_left_wing.png)
background-position: right
.right-wing
position: absolute
width: 50%
height: 100%
right: 0
top: 0
z-index: -1
background-image: url(/images/level/hud_right_wing.png)
background-position: left
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.center
width: 520px
height: 116px
padding: 4px 20px 0 20px
margin: auto
background-image: url(/images/level/hud_center.png)
color: #BEBEBE
font-size: 12px
overflow: hidden
.no-selection-message
display: none
Set up talking portraits in the hud.
2014-01-09 14:04:22 -05:00
.thang-canvas-wrapper, .speaker-image-wrapper
Ready for action, sir!
2014-01-03 13:32:13 -05:00
width: 100px
height: 100px
border: 1px solid darkred
margin: 7px 7px 7px 22px
float: left
border-radius: 4px
overflow: hidden
&.team-humans
border-color: darkred
Set up talking portraits in the hud.
2014-01-09 14:04:22 -05:00
background-color: rgba(255,100,100,0.5)
Ready for action, sir!
2014-01-03 13:32:13 -05:00
&.team-ogres
border-color: darkblue
Set up talking portraits in the hud.
2014-01-09 14:04:22 -05:00
background-color: rgba(100,100,255,0.5)
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.thang-props
width: 144px
height: 100px
margin: 8px 8px 0 0
overflow-y: scroll
float: left
.prop
img
margin-right: 5px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.text-prop
width: 50%
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.prop-value.bar-prop
width: 100px
display: inline-block
height: 6px
background: #ddd
border: 1px solid black
border-radius: 6px
overflow: hidden
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.bar
background: black
width: 100%
height: 100%
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.prop[name="health"] .bar
background: #C5362B
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.message
text-align: center
display: table
height: 100%
width: 100%
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
p
display: table-cell
vertical-align: middle
font-size: 20px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.thang-actions
width: 212px
height: 100px
margin: 8px 24px 8px 0
float: left
overflow-y: scroll
overflow-x: hidden
.table-container
position: relative
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.progress-indicator
position: absolute
right: 45px
background-color: #fce
z-index: 1
.progress-arrow
width: 14px
height: 6px
top: -6px
// Could put top: 0 to make the arrow go inside, but it doesn't have enough contrast over the bar
right: 39px
background: transparent url(/images/level/action_timeline_indicator.png) no-repeat center
.progress-line
width: 1px
height: 100%
top: 0
background-color: #A4A198
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
table
border: 1px solid #5B5855
border-radius: 2px
line-height: 17px
width: 100%
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
tr
border: 1px solid #5b5855
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.action-indicator
width: 10px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.action-label
width: 75px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.action-timeline
padding: 0
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.timeline-wrapper
position: relative
width: 100%
height: 19px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
div
@include box-sizing(border-box)
background-color: #6BA1C8
height: 100%
border-bottom: 2px groove #201B15
border-right: 1px solid #201B15
position: absolute
top: 0
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.current-action
font-weight: bold
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.action-indicator
background: #4B4133 url(/images/level/current_action_indicator.png) no-repeat center
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
td
background-color: #4B4133
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.dialogue-area
opacity: 0.0
position: relative
height: 100%
width: 100%
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.bubble
position: absolute
left: 140px
right: 8px
top: 8px
bottom: 0px
padding: 10px
color: black
font-weight: bold
background: #FFFFFF
border: black solid 1px
border-radius: 10px
font-size: 14px
line-height: 18px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
strong
color: #09B057
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
.hud-hint
font-weight: normal
color: #888888
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.enter
position: absolute
right: 7px
bottom: 7px
div.dot
background: #337
width: 8px
height: 8px
position: absolute
right: 8px
top: 9px
border-radius: 5px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
button, .alert
padding: 2px 5px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.enter button.with-dot
padding-right: 20px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
h3
margin: 0 0 5px
font-size: 16px
line-height: 16px
color: #338
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
button
margin-left: 10px
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.bubble:after
content: ""
position: absolute
top: 55px
left: -27px
border-style: solid
border-width: 11px 27px 11px 0
border-color: transparent #FFFFFF
display: block
width: 0
z-index: 1
Create notification that esc can skip dialogs If you use the shift-space combination at least 5 times per page load, a message will pop up next to the continue button stating that you can press esc to skip dialog.
2014-01-08 17:23:36 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
.bubble:before
content: ""
position: absolute
top: 55px
left: -28px
border-style: solid
border-width: 11px 27px 11px 0
border-color: transparent black
display: block
width: 0
z-index: 0
Reference in a new issue Copy permalink