codecombat/app/styles/clans/clan-details.sass
David Liu 3bf3321411 Fix weird styling on clans details page
- add `display: table-cell` on hero portrait cell
- middle align more things
- `Name` should be a table header
2015-07-26 12:39:43 -07:00

187 lines
3.6 KiB
Sass

#clan-details-view
th
font-size: 16px
.join-clan-link
width: 390px
.join-link-prompt
font-weight: bold
.stats-table
width: 400px
background: rgba(0, 0, 0, 0.0)
#editDescriptionModal .modal-dialog
background-color: white
#editNameModal .modal-dialog
background-color: white
max-width: 400px
.edit-description-input
width: 100%
.edit-name-input
width: 100%
$spriteSheetSize: 30px
.remove-hero-cell
width: 100px
.hero-icon-cell
display: inline-block
width: 30px
height: 50px
margin: 0px 2px
vertical-align: middle
td.hero-icon-cell
display: table-cell
.level-cell
width: 50px
text-align: center
vertical-align: middle
.name-cell
width: 100px
vertical-align: middle
.achievements-cell
text-align: center
vertical-align: middle
.latest-achievement-cell
vertical-align: middle
.member-header
cursor: pointer
.progress-header
cursor: pointer
.progress-key
cursor: default
display: inline-block
white-space: nowrap
font-size: 9pt
font-weight: normal
border: 1px solid gray
border-radius: 5px
margin: 0px
padding: 2px
.progress-key-started
background-color: lightgreen
.progress-key-complete
background-color: lightgray
margin-left: 14px
.expand-progress-checkbox
margin-left: 14px
.expand-progress-label
font-weight: normal
font-size: 14px
.progress-cell
padding: 2px
padding-bottom: 10px
.level-popup-container
display: none
position: absolute
padding: 10px
border: 1px solid black
z-index: 3
background-color: blanchedalmond
font-size: 10pt
.level-progression-concepts
color: #317EAC
font-size: 12pt
font-weight: bold
margin-top: 8px
margin-bottom: 4px
.level-progression-levels
color: #317EAC
font-size: 12pt
font-weight: bold
margin-top: 8px
.level-progression-campaign
font-size: 10pt
font-weight: bold
margin-bottom: 4px
margin-top: 4px
.progress-level-cell
display: inline-block
white-space: nowrap
font-size: 9pt
border: 1px solid gray
border-radius: 5px
margin: 0px
padding: 2px
.progress-level-cell-started
cursor: pointer
background-color: lightgreen
.progress-level-cell-complete
cursor: pointer
background-color: lightgray
.player-hero-icon
background: transparent url(/images/pages/play/play-spritesheet.png)
background-size: cover
background-position: (-2 * $spriteSheetSize) 0
display: inline-block
width: 30px
height: 30px
margin: 0px 2px
vertical-align: middle
.player-hero-icon
background-position: (-4 * $spriteSheetSize) 0
&.knight
background-position: (-5 * $spriteSheetSize) 0
&.librarian
background-position: (-6 * $spriteSheetSize) 0
&.ninja
background-position: (-7 * $spriteSheetSize) 0
&.potion-master
background-position: (-8 * $spriteSheetSize) 0
&.samurai
background-position: (-9 * $spriteSheetSize) 0
&.trapper
background-position: (-10 * $spriteSheetSize) 0
&.forest-archer
background-position: (-11 * $spriteSheetSize) 0
&.sorcerer
background-position: (-12 * $spriteSheetSize) 0
td.code-language-cell
width: 30px
vertical-align: middle
.code-language-cell
vertical-align: middle
span.code-language-cell
background: transparent url(/images/common/code_languages/javascript_small.png)
background-size: cover
display: inline-block
width: 30px
height: 30px
margin: 0px 2px
.remove-member-cell
vertical-align: middle