sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-05-18 19:58:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve toolbar styles

Browse source
This commit is contained in:
benmanley 2014-04-08 16:48:52 +01:00
parent 3485722be8
commit a8b6dffee6
3 changed files with 62 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
public/css/global-modules.styl
View file

@ -3,7 +3,7 @@
hrpg-button-color-mixin($hrpg-button-color)
> a, button
background-color: $hrpg-button-color !important
color: darken($hrpg-button-color, 61.8%) !important
color: darken($hrpg-button-color, 80%) !important
border-color: darken($hrpg-button-color, 16.18%) !important
&:active
background-color: darken($hrpg-button-color, 10%) !important
@ -12,6 +12,22 @@ hrpg-button-color-mixin($hrpg-button-color)
background-color: darken($hrpg-button-color, 3.82%) !important
> a:nth-of-type(2)
border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
> div
border:1px solid darken($hrpg-button-color, 16.18%)
h4
color: darken($hrpg-button-color, 61.8%)
background-color: $hrpg-button-color
border-color: darken($hrpg-button-color, 16.18%)
> ul:first-child:after
background-color: #fff
border-color: darken($hrpg-button-color, 16.18%)
h4:after
background-color: $hrpg-button-color
border-color: darken($hrpg-button-color, 16.18%)
a, a:link, a:visited
color: darken($hrpg-button-color, 80%) !important
.glyphicon
color:darken($hrpg-button-color, 70%)
$hrpg-button-master
list-style: none
> a, button
@ -47,12 +63,11 @@ $hrpg-modal
position: relative
$hrpg-modal-dropdown
@extend $hrpg-modal
div
> div
position: absolute
top: 3em
min-width:110px
min-height: 68px
border:1px solid #b5b5b5
border-radius:4px
background-color:#fff
@media screen and (max-width:768px)
@ -69,16 +84,12 @@ $hrpg-modal-dropdown
h4
font-size: 1.2em
margin:0px
background-color: #f7f7f7
border-top:1px solid #ccc
border-bottom:1px solid #ccc
h4:first-of-type
border-top: none
border-radius:0.382em 0.382em 0em 0px
h4
border-bottom-width: 1px
border-bottom-style: solid
border-radius:0.2em 0.2em 0em 0em
padding: 0.618em 0.8333em
ul
padding: 0.618em 1em
padding: 1em 1em 0em 1em
ul:last-child
padding-bottom:0px
ul
@ -86,47 +97,46 @@ $hrpg-modal-dropdown
overflow: auto
li
margin-bottom: 1em
&:after
> ul:first-child:after, h4:after
content:''
position:absolute
top:-9px
z-index:2
width:16px
height:16px
border-top:1px solid #b5b5b5
border-left:1px solid #b5b5b5
background-color: #fff
border-top-width: 1px
border-top-style: solid
border-left-width: 1px
border-left-style: solid
transform: rotate(45deg)
h4:after
font-size: 0.8333em
z-index:3
$hrpg-modal-dropdown-left
@extend $hrpg-modal-dropdown
@media screen and (min-width:768px)
div
right: 0px
&:after
> ul:first-child:after, h4:after
right: 1em
$hrpg-modal-dropdown-left-heading
@extend $hrpg-modal-dropdown-left
div
&:after
background-color: #f7f7f7
$hrpg-modal-dropdown-right
@extend $hrpg-modal-dropdown
@media screen and (min-width:768px)
div
left: 0px
&:after
> ul:first-child:after, h4:after
left: 1em
$hrpg-modal-controls
text-align: right
border-top:1px solid #eee
border-radius:0px 0px 0.382em 0.382em
li
margin-left: 10px
margin-left: 0.618em
display: inline-block
background-color: #fff
@media screen and (max-width:768px)
width: 100%
position: fixed
bottom:2%
right:0
border: none
right: 2%
border: none
@media screen and (min-width:768px)
display: none

36
public/css/menu.styl
View file

@ -18,6 +18,16 @@
.toolbar-mobile
@extend $hrpg-button
@extend $hrpg-modal-dropdown-right
hrpg-button-color-mixin($color-toolbar)
div.glyphicon
display:block
width: 2.618em
height: 1.618em
padding: 1.1em 1em 0em 1em
float:left
.toolbar-submenu
padding-left: 0.382em
display: block
// Top level menu items: Tasks – User – Social – Inventory
.toolbar-nav
float:left;
@ -36,20 +46,10 @@
> a
display:inline-block
height:100%
&:link,&:visited
color: #222
&:hover
background-color: #eee
&:active
color:#000
.toolbar-submenu
li
margin-right: 1em
> li > ul > li
display:inline-block
.glyphicon
margin-right: 0.618em
color:#ccc
// Information bar: Bailey – notifs – currency – subscribe button
.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
float:right
@ -77,8 +77,17 @@
.toolbar-options, .toolbar-wallet
> li
margin-left: 0.618em
@media screen and (max-width:768px)
.toolbar-options
> li
padding-left:0em
margin-left:0em
margin-right: 0.618em
.toolbar-subscribe
padding-right: 0.618em
.toolbar-sync, .toolbar-settings
@extend $hrpg-button
hrpg-button-color-mixin($color-toolbar)
.toolbar-subscribe li
@extend $hrpg-button-call-to-action
@media screen and (min-width:768px)
@ -87,7 +96,8 @@
// Notifications icon and dropdown
.toolbar-notifs
@extend $hrpg-button
@extend $hrpg-modal-dropdown-left-heading
@extend $hrpg-modal-dropdown-left
hrpg-button-color-mixin($color-toolbar)
> a span.inactive
opacity: 0.236 !important
div
@ -111,14 +121,14 @@
right:0px
.glyphicon-remove-circle
margin-right: 0px
color:#9d9d9d
// Settings dropdown
.toolbar-settings
@extend $hrpg-modal-dropdown-left-heading
@extend $hrpg-modal-dropdown-left
.toolbar-controls
@extend $hrpg-modal-controls
li
@extend $hrpg-button
hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
.toolbar-settings .toolbar-controls
@media screen and (min-width:768px)
display:none

4
public/css/npcs.styl
View file

@ -14,8 +14,8 @@
float:left
.npc_bailey_head
position: absolute
top: -23px
height:45px !important
top: -17px
height:39px !important
cursor: pointer
// Tour (Justin)
.npc_justin.float-left