mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 05:53:39 -04:00
Merge pull request #2509 from Imperadeiro98/master
Some cleanup to play-items-modal.sass file
This commit is contained in:
Nick Winter
commit
8c28247906
1 changed files with 38 additions and 63 deletions
|
|
@ -2,25 +2,24 @@
|
|||
@import "app/styles/mixins"
|
||||
|
||||
#play-items-modal
|
||||
|
||||
|
||||
.big-font
|
||||
text-transform: uppercase
|
||||
font-family: $headings-font-family
|
||||
font-weight: bold
|
||||
|
||||
|
||||
.one-line
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
|
||||
//- Clear modal defaults
|
||||
.modal-dialog
|
||||
padding: 0
|
||||
width: 1230px
|
||||
height: 660px
|
||||
background: none
|
||||
|
||||
|
||||
//- Background
|
||||
#play-items-modal-bg, #play-items-modal-narrow-bg
|
||||
position: absolute
|
||||
|
|
@ -29,9 +28,8 @@
|
|||
|
||||
#play-items-modal-narrow-bg
|
||||
display: none
|
||||
|
||||
|
||||
//- Header
|
||||
|
||||
h1
|
||||
position: absolute
|
||||
left: 200px
|
||||
|
|
@ -40,10 +38,8 @@
|
|||
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
|
||||
#gems-count-container
|
||||
position: absolute
|
||||
left: 425px
|
||||
|
|
@ -51,17 +47,15 @@
|
|||
width: 160px
|
||||
height: 66px
|
||||
@include rotate(5deg)
|
||||
|
||||
|
||||
#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
|
||||
|
|
@ -70,30 +64,28 @@
|
|||
height: 60px
|
||||
color: white
|
||||
text-align: center
|
||||
font-size: 30px
|
||||
font-size: 30px
|
||||
padding-top: 7px
|
||||
cursor: pointer
|
||||
@include rotate(-3deg)
|
||||
|
||||
&:hover
|
||||
color: yellow
|
||||
|
||||
|
||||
|
||||
//- Nav bar
|
||||
|
||||
.nav
|
||||
position: absolute
|
||||
top: 125px
|
||||
left: -31px
|
||||
width: 178px
|
||||
|
||||
|
||||
li
|
||||
background: url(/images/pages/play/modal/menu-tab.png)
|
||||
padding: 5px
|
||||
margin: -5px 0
|
||||
height: 80px
|
||||
padding: 0
|
||||
|
||||
|
||||
a
|
||||
font-size: 18px
|
||||
line-height: 50px
|
||||
|
|
@ -101,18 +93,15 @@
|
|||
color: rgb(195,153,124)
|
||||
font-weight: bold
|
||||
padding: 10px 7px
|
||||
|
||||
|
||||
|
||||
li.active
|
||||
background: url(/images/pages/play/modal/menu-tab-selected.png)
|
||||
width: 197px
|
||||
|
||||
|
||||
a
|
||||
color: white
|
||||
|
||||
|
||||
|
||||
//- Hero Type Select
|
||||
|
||||
#hero-type-select
|
||||
position: absolute
|
||||
top: 102px
|
||||
|
|
@ -121,21 +110,19 @@
|
|||
padding: 2px 0
|
||||
z-index: 3
|
||||
border-radius: 2px
|
||||
|
||||
|
||||
label
|
||||
background: rgb(58,47,38)
|
||||
color: rgb(195,153,124)
|
||||
border: 2px solid rgb(85,70,57)
|
||||
margin: 0 2px
|
||||
|
||||
|
||||
&.active
|
||||
background: rgb(33,28,21)
|
||||
border: 2px solid rgb(64,53,41)
|
||||
color: white
|
||||
|
||||
|
||||
//- Item List
|
||||
|
||||
//- Item List
|
||||
.tab-content
|
||||
position: absolute
|
||||
top: 116px
|
||||
|
|
@ -143,7 +130,7 @@
|
|||
width: 669px
|
||||
height: 507px
|
||||
overflow: hidden
|
||||
|
||||
|
||||
&.filter-warrior
|
||||
.item.Ranger, .item.Wizard
|
||||
display: none
|
||||
|
|
@ -151,20 +138,18 @@
|
|||
&.filter-ranger
|
||||
.item.Warrior, .item.Wizard
|
||||
display: none
|
||||
|
||||
|
||||
&.filter-wizard
|
||||
.item.Ranger, .item.Warrior
|
||||
display: none
|
||||
|
||||
|
||||
.tab-pane
|
||||
height: 100%
|
||||
|
||||
|
||||
.nano-content
|
||||
padding: 26px 51px 26px 26px
|
||||
|
||||
|
||||
//- Item box
|
||||
|
||||
.item
|
||||
cursor: pointer
|
||||
width: 187px
|
||||
|
|
@ -178,7 +163,7 @@
|
|||
|
||||
&.silhouetted
|
||||
cursor: default
|
||||
|
||||
|
||||
strong
|
||||
position: absolute
|
||||
top: 7px
|
||||
|
|
@ -201,7 +186,7 @@
|
|||
top: 25px
|
||||
width: 110px
|
||||
height: 110px
|
||||
|
||||
|
||||
.glyphicon-lock
|
||||
font-size: 60px
|
||||
position: absolute
|
||||
|
|
@ -212,11 +197,11 @@
|
|||
right: 0
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
|
||||
&.bolder
|
||||
font-weight: bolder
|
||||
color: rgb(211,200,175)
|
||||
|
||||
|
||||
.unlock-button, .unequippable
|
||||
right: 1px
|
||||
bottom: 0
|
||||
|
|
@ -228,7 +213,7 @@
|
|||
position: absolute
|
||||
line-height: 41px
|
||||
display: inline-block
|
||||
|
||||
|
||||
.cost
|
||||
position: absolute
|
||||
height: 41px
|
||||
|
|
@ -239,14 +224,14 @@
|
|||
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
|
||||
|
|
@ -260,41 +245,35 @@
|
|||
&.selected
|
||||
background: url(/images/pages/play/modal/item-box-background-selected.png)
|
||||
|
||||
|
||||
//- Item details. Non-specific item-details-view styling is in item-details-view.sass.
|
||||
|
||||
#item-details-view
|
||||
|
||||
|
||||
#item-title
|
||||
left: 910px
|
||||
top: 60px
|
||||
|
||||
|
||||
#item-details-body
|
||||
left: 860px
|
||||
|
||||
|
||||
#selected-item-unlock-button
|
||||
left: 856px
|
||||
|
||||
|
||||
#play-items-modal, #inventory-modal
|
||||
|
||||
//- Item list scrollbar
|
||||
|
||||
.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
|
||||
|
||||
|
||||
//- Item icons w/shadows (both in list and details areas)
|
||||
|
||||
.item-img, .item-shadow, .item-silhouette
|
||||
position: absolute
|
||||
margin-left: auto
|
||||
|
|
@ -311,7 +290,7 @@
|
|||
// left: 5px
|
||||
// @include filter(contrast(0%) brightness(0%))
|
||||
// opacity: 0.2
|
||||
|
||||
|
||||
.item-silhouette
|
||||
opacity: 0.2
|
||||
//@include filter(contrast(0%) brightness(0%))
|
||||
|
|
@ -328,9 +307,7 @@
|
|||
font-weight: bold
|
||||
z-index: 2
|
||||
|
||||
|
||||
//- Unlock buttons (both in list and details areas)
|
||||
|
||||
.unlock-button
|
||||
position: absolute
|
||||
border: 3px solid rgb(7,65,83)
|
||||
|
|
@ -338,7 +315,7 @@
|
|||
color: white
|
||||
font-size: 16px
|
||||
border-radius: 0
|
||||
|
||||
|
||||
&:disabled
|
||||
background: rgb(72, 106, 113)
|
||||
opacity: 1
|
||||
|
|
@ -353,7 +330,6 @@
|
|||
margin-top: 20px
|
||||
|
||||
//- Use the two-column layout and background image if we are on a narrow screen.
|
||||
|
||||
@media only screen and (max-width: 1300px)
|
||||
#play-items-modal
|
||||
overflow-x: hidden
|
||||
|
|
@ -384,13 +360,13 @@
|
|||
padding-left: 20px
|
||||
|
||||
#item-details-view
|
||||
|
||||
|
||||
#item-title
|
||||
left: 698px
|
||||
|
||||
|
||||
#item-details-body
|
||||
left: 648px
|
||||
|
||||
left: 648px
|
||||
|
||||
#selected-item-unlock-button, .unequippable
|
||||
left: 645px
|
||||
|
||||
|
|
@ -401,4 +377,3 @@ body[lang='pt-PT'], body[lang^='pt-BR']
|
|||
body[lang='ru']
|
||||
#play-items-modal .unlock-button
|
||||
font-size: 10px
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue