codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-25 00:28:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
codecombat/app/styles/play/modal/play-items-modal.sass

397 lines
6.9 KiB
Sass
Raw Normal View History

Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
@import "app/styles/mixins"
Starting new front view (at /front for now) and play view (at /play-hero for now).
2014-09-17 21:56:08 -04:00
#play-items-modal
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
.big-font
text-transform: uppercase
font-family: "Open Sans Condensed"
font-weight: bold
.one-line
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
//- Clear modal defaults
.modal-dialog
padding: 0
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
width: 1230px
height: 660px
background: none
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
//- Background
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
#play-items-modal-bg, #play-items-modal-narrow-bg
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
position: absolute
top: -69px
left: -8px
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
#play-items-modal-narrow-bg
display: none
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
//- Header
h1
position: absolute
left: 200px
top: 25px
color: rgb(254,195,70)
font-size: 38px
text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0
margin: 0
//- Gems count
#gems-count-container
position: absolute
left: 425px
top: 10px
width: 160px
height: 66px
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
@include rotate(5deg)
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
#gems-count
position: absolute
left: 75px
top: 17px
font-size: 25px
color: rgb(1,64,91)
//- Close modal button
#close-modal
position: absolute
left: 602px
top: 23px
width: 60px
height: 60px
color: white
text-align: center
font-size: 30px
padding-top: 7px
cursor: pointer
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
@include rotate(-3deg)
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
&:hover
color: yellow
//- Nav bar
.nav
position: absolute
top: 125px
left: -31px
width: 178px
li
background: url(/images/pages/play/modal/play-items-modal-tab.png)
padding: 5px
margin: -5px 0
height: 80px
padding: 0
a
font-size: 18px
line-height: 50px
background: none
color: rgb(195,153,124)
font-weight: bold
padding: 10px 7px
//img
li.active
background: url(/images/pages/play/modal/play-items-modal-selected-tab.png)
width: 197px
a
color: white
//- Item List
.tab-content
position: absolute
top: 116px
left: 148px
width: 669px
height: 507px
overflow: hidden
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
.tab-pane
height: 100%
.nano-content
padding: 26px 51px 26px 26px
//- Item box
.item
cursor: pointer
width: 187px
padding: 10px
height: 195px
Starting new front view (at /front for now) and play view (at /play-hero for now).
2014-09-17 21:56:08 -04:00
float: left
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
background: url(/images/pages/play/modal/play-items-modal-item-background.png)
margin: 4px
text-align: center
position: relative
strong
position: absolute
top: 7px
padding: 2px
left: 0
right: 0
font-size: 18px
z-index: 2
line-height: 18px
color: rgb(22,16,5)
img
width: 90px
height: 90px
&.item-img
top: 45px
&.item-shadow
top: 55px
&.item-silhouette
top: 25px
width: 110px
height: 110px
.glyphicon-lock
font-size: 60px
position: absolute
top: 50px
color: rgb(149,141,123)
z-index: 1
left: 0
right: 0
margin-left: auto
margin-right: auto
&.bolder
font-weight: bolder
color: rgb(211,200,175)
Temporarily making Wizard/Ranger gear unpurchasable while we have no Wizards or Rangers.
2014-11-04 10:19:30 -05:00
.unlock-button, .unequippable
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
right: 1px
bottom: 0
width: 93px
height: 41px
font-size: 16px
Temporarily making Wizard/Ranger gear unpurchasable while we have no Wizards or Rangers.
2014-11-04 10:19:30 -05:00
.unequippable
position: absolute
line-height: 41px
display: inline-block
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
.cost
position: absolute
height: 41px
left: 0
bottom: 0
width: 95px
line-height: 38px
font-size: 16px
color: rgb(22,61,73)
font-weight: bold
img
width: 22px
height: 22px
margin-right: 8px
position: relative
top: -2px
.owned, .locked
position: absolute
left: 0
right: 0
bottom: 0
height: 41px
color: rgb(22,61,73)
line-height: 38px
font-size: 16px
&.selected
background: url(/images/pages/play/modal/play-items-modal-selected-item-background.png)
//- Item list scrollbar
Starting new front view (at /front for now) and play view (at /play-hero for now).
2014-09-17 21:56:08 -04:00
Implementation of Heald's design of the PlayItemsModal. Added purchasing logic to the server to support it. Refactored header font from Bangers to Open Sans Condensed.
2014-11-01 17:15:57 -04:00
.nano-pane
width: 16px
background: black
border: 3px solid rgb(97,76,58)
.nano-slider
background: rgb(244,170,66)
border: 3px solid black
border-radius: 10px
margin-left: -3px
margin-right: -3px
// color: red
//- Item details
#item-title
position: absolute
width: 228px
height: 50px
left: 910px
top: 60px
z-index: 2
h2
font-size: 20px
margin: 12px 20px
text-align: center
color: rgb(53,40,25)
#item-details-body
position: absolute
left: 860px
top: 126px
width: 330px
height: 453px
//background: rgba(100,100,100,0.5)
overflow: scroll
#item-container
height: 163px
width: 100%
.item-img, .item-shadow
width: 130px
height: 130px
.item-img
top: 15px
.item-shadow
top: 25px
img.hr
width: 80%
margin: 0 10% -3px
&.faded
opacity: 0.4
.stat-row
height: 24px
position: relative
font-size: 20px
font-weight: bold
.stat-label
position: absolute
left: 54px
color: rgb(93,73,52)
.stat
position: absolute
left: 150px
color: rgb(42,38,28)
#skills
margin: 25px
h3
color: rgb(41,35,25)
strong
color: rgb(50,50,30)
#selected-item-unlock-button
left: 856px
top: 594px
width: 337px
height: 41px
font-size: 16px
//- Item icons w/shadows (both in list and details areas)
.item-img, .item-shadow, .item-silhouette
position: absolute
margin-left: auto
margin-right: auto
left: 0
right: 0
bottom: 0
.item-img
z-index: 1
.item-shadow
left: 5px
@include filter(contrast(0%) brightness(0%))
opacity: 0.2
.item-silhouette
@include filter(contrast(0%) brightness(0%))
opacity: 0.3
//- Unlock buttons (both in list and details areas)
.unlock-button
position: absolute
border: 3px solid rgb(7,65,83)
background: rgb(0,119,168)
color: white
font-size: 16px
border-radius: 0
&:disabled
background: rgb(72, 106, 113)
opacity: 1
color: rgba(255,255,255, 0.4)
Made item shop fit on iPad and small screens.
2014-11-04 11:39:36 -05:00
@media only screen and (max-width: 1300px)
#play-items-modal
overflow-x: hidden
.tab-content
width: 469px
#play-items-modal-bg
display: none
#play-items-modal-narrow-bg
display: block
.modal-dialog
width: 1024px
left: 25px
h1
display: none
#gems-count-container
left: 213px
#close-modal
left: 390px
.nano-content
padding-left: 20px
#item-title
left: 698px
#item-details-body
left: 648px
#selected-item-unlock-button
left: 645px
Reference in a new issue Copy permalink