habitica/public/css/alerts.styl

.new-stuff
  position: fixed
  text-align: center
  top: 0
  left: 0
  width: 100%
  height: 0
  z-index: 1010

.new-stuff> .alert
  border-top: 0
  border-radius: 0 0 4px 4px
  padding-right: 14px
  display: inline-block

.wide-popover
  max-width: 400px

#notification-area
  position: fixed
  top: 0
  right: 0px
  z-index: 1061

  .alert
    padding-top: 8px
    padding-bottom: 8px

// variables

gpColor = #FBEFC0
gpText = #786938
hpColor = #f2dede
hpText = #b94a48
lvlColor = #d9edf7
lvlText = #3a87ad
xpColor = #DCC0FB
xpText = #635673
deathColor = #4E4E4E
deathText = #ABABAB
mpColor = #c7d3e9
mpText = #003aa1
critColor = #fce5cd
critText = #dc5000
dropColor = #d9ead3
dropText = #415838
borderDarken = 20%

// alert styles

.alert-gp
  background-color: gpColor
  border-color: darken(gpColor,borderDarken)
  color: gpText

.alert-hp
  background-color: hpColor
  border-color: darken(hpColor,borderDarken)
  color: hpText

.alert-lvl
  background-color: lvlColor
  border-color: darken(lvlColor,borderDarken)
  color: lvlText

.alert-xp
  background-color: xpColor
  border-color: darken(xpColor,borderDarken)
  color: xpText

.alert-death
  background-color: deathColor
  border-color: deathColor
  color: deathText

.alert-mp
  background-color: mpColor
  border-color: darken(mpColor,borderDarken)
  color: mpText

.alert-crit
  background-color: critColor
  border-color: darken(critColor,borderDarken)
  color: critText

.alert-drop
  background-color: dropColor
  border-color: darken(dropColor,borderDarken)
  color: dropText

// alert icons

.icon-gold
  background: url("/bower_components/habitrpg-shared/img/coin_single_gold.png") no-repeat
  background-position: center center
  background-size: 18px
  width: 14px
  height: 14px
  display: inline-block
  vertical-align: middle

.icon-silver
  background: url("/bower_components/habitrpg-shared/img/coin_single_silver.png") no-repeat
  background-position: center center
  background-size: 18px
  width: 14px
  height: 14px
  display: inline-block
  vertical-align: middle

.icon-death
  background: url("/bower_components/habitrpg-shared/img/sprites/dead.png") no-repeat
  background-position: center center
  background-size: 14px
  width: 14px
  height: 14px
  display: inline-block
  vertical-align: middle

.undo-button
  z-index: 3000
  position:absolute
  left:5px
  top:5px
add general "new stuff" notification, linking to changelog 2013-03-21 16:31:23 +00:00			`.new-stuff`
fix up general bailey notifs 2013-09-02 21:31:44 +00:00			`position: fixed`
			`text-align: center`
			`top: 0`
			`left: 0`
			`width: 100%`
			`height: 0`
			`z-index: 1010`
add general "new stuff" notification, linking to changelog 2013-03-21 16:31:23 +00:00
			`.new-stuff> .alert`
fix up general bailey notifs 2013-09-02 21:31:44 +00:00			`border-top: 0`
			`border-radius: 0 0 4px 4px`
			`padding-right: 14px`
			`display: inline-block`

[#1489] add edit-gropu server route, basic editing of group info for now (with markdown!) 2013-09-09 21:09:45 +00:00			`.wide-popover`
fix up general bailey notifs 2013-09-02 21:31:44 +00:00			`max-width: 400px`
add general "new stuff" notification, linking to changelog 2013-03-21 16:31:23 +00:00
refactor(bs3): port notifications 2014-02-04 19:53:09 +00:00			`#notification-area`
			`position: fixed`
			`top: 0`
			`right: 0px`
			`z-index: 1061`

			`.alert`
			`padding-top: 8px`
			`padding-bottom: 8px`

Notification style sheets 2013-02-27 22:41:36 +00:00			`// variables`

			`gpColor = #FBEFC0`
			`gpText = #786938`
			`hpColor = #f2dede`
			`hpText = #b94a48`
			`lvlColor = #d9edf7`
			`lvlText = #3a87ad`
			`xpColor = #DCC0FB`
			`xpText = #635673`
Add death notification and algorithm fixes 2013-03-02 20:02:57 +00:00			`deathColor = #4E4E4E`
			`deathText = #ABABAB`
Fix #2072 (add Mana delta alerts) 2013-12-26 13:31:00 +00:00			`mpColor = #c7d3e9`
			`mpText = #003aa1`
Create drop notification Growl style 2014-01-15 04:02:22 +00:00			`critColor = #fce5cd`
Beef up critical hit notification with its own style and icon 2014-01-07 18:03:07 +00:00			`critText = #dc5000`
Create drop notification Growl style 2014-01-15 04:02:22 +00:00			`dropColor = #d9ead3`
			`dropText = #415838`
Notification style sheets 2013-02-27 22:41:36 +00:00			`borderDarken = 20%`

			`// alert styles`

			`.alert-gp`
			`background-color: gpColor`
			`border-color: darken(gpColor,borderDarken)`
			`color: gpText`

			`.alert-hp`
			`background-color: hpColor`
			`border-color: darken(hpColor,borderDarken)`
			`color: hpText`

			`.alert-lvl`
			`background-color: lvlColor`
			`border-color: darken(lvlColor,borderDarken)`
			`color: lvlText`

			`.alert-xp`
			`background-color: xpColor`
			`border-color: darken(xpColor,borderDarken)`
			`color: xpText`

Add death notification and algorithm fixes 2013-03-02 20:02:57 +00:00			`.alert-death`
			`background-color: deathColor`
			`border-color: deathColor`
			`color: deathText`

Fix #2072 (add Mana delta alerts) 2013-12-26 13:31:00 +00:00			`.alert-mp`
			`background-color: mpColor`
			`border-color: darken(mpColor,borderDarken)`
			`color: mpText`

Beef up critical hit notification with its own style and icon 2014-01-07 18:03:07 +00:00			`.alert-crit`
			`background-color: critColor`
			`border-color: darken(critColor,borderDarken)`
			`color: critText`

Create drop notification Growl style 2014-01-15 04:02:22 +00:00			`.alert-drop`
			`background-color: dropColor`
			`border-color: darken(dropColor,borderDarken)`
			`color: dropText`

Notification style sheets 2013-02-27 22:41:36 +00:00			`// alert icons`

Better notifications 2013-02-28 23:09:12 +00:00			`.icon-gold`
rewrite2 move css files up a directory. Move all images to habitrpg-shared. moved a lot of spritesheet css to habitrpg-shared. still more to be moved, but this is a start 2013-08-27 01:31:32 +00:00			`background: url("/bower_components/habitrpg-shared/img/coin_single_gold.png") no-repeat`
Better notifications 2013-02-28 23:09:12 +00:00			`background-position: center center`
			`background-size: 18px`
			`width: 14px`
			`height: 14px`
refactor(bs3): port notifications 2014-02-04 19:53:09 +00:00			`display: inline-block`
			`vertical-align: middle`
Better notifications 2013-02-28 23:09:12 +00:00
			`.icon-silver`
rewrite2 move css files up a directory. Move all images to habitrpg-shared. moved a lot of spritesheet css to habitrpg-shared. still more to be moved, but this is a start 2013-08-27 01:31:32 +00:00			`background: url("/bower_components/habitrpg-shared/img/coin_single_silver.png") no-repeat`
Better notifications 2013-02-28 23:09:12 +00:00			`background-position: center center`
			`background-size: 18px`
Notification style sheets 2013-02-27 22:41:36 +00:00			`width: 14px`
Add death notification and algorithm fixes 2013-03-02 20:02:57 +00:00			`height: 14px`
refactor(bs3): port notifications 2014-02-04 19:53:09 +00:00			`display: inline-block`
			`vertical-align: middle`
Add death notification and algorithm fixes 2013-03-02 20:02:57 +00:00
			`.icon-death`
rewrite2 move css files up a directory. Move all images to habitrpg-shared. moved a lot of spritesheet css to habitrpg-shared. still more to be moved, but this is a start 2013-08-27 01:31:32 +00:00			`background: url("/bower_components/habitrpg-shared/img/sprites/dead.png") no-repeat`
Add death notification and algorithm fixes 2013-03-02 20:02:57 +00:00			`background-position: center center`
			`background-size: 14px`
			`width: 14px`
start adding undo functionality 2013-03-18 00:30:54 +00:00			`height: 14px`
refactor(bs3): port notifications 2014-02-04 19:53:09 +00:00			`display: inline-block`
			`vertical-align: middle`
start adding undo functionality 2013-03-18 00:30:54 +00:00
			`.undo-button`
temp fix to undo being hidden 2013-03-23 14:22:05 +00:00			`z-index: 3000`
start adding undo functionality 2013-03-18 00:30:54 +00:00			`position:absolute`
			`left:5px`
Use @Shaners new NPCs sprites instead of images 2013-05-16 10:59:17 +00:00			`top:5px`