diff --git a/app/styles/play/modal/play-items-modal.sass b/app/styles/play/modal/play-items-modal.sass
index 20289d19a..8a214b203 100644
--- a/app/styles/play/modal/play-items-modal.sass
+++ b/app/styles/play/modal/play-items-modal.sass
@@ -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
-