mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-04 09:39:23 +00:00
0c1151b123
instead compile in with the css. index.coffee directives are run against static pages too, which overwrites our bootstrap responsive (which we need) with the app's custom responsive styles. We may change this, but for now this commit allows us to keep the marketing site and main site styles separate
212 lines
No EOL
4.9 KiB
Stylus
212 lines
No EOL
4.9 KiB
Stylus
@import "nib/vendor";
|
|
@import "../../public/vendor/bootstrap/docs/assets/css/bootstrap.css";
|
|
@import "./female_sprites.styl";
|
|
@import "./male_sprites.styl";
|
|
@import "./shop_sprites.styl";
|
|
@import "./tasks.styl";
|
|
@import "./avatar.styl";
|
|
@import "./customizer.styl";
|
|
@import "./items.styl";
|
|
@import "./alerts.styl";
|
|
@import "./helpers.styl";
|
|
@import "./responsive.styl";
|
|
|
|
@import "./scrollbars.styl";
|
|
|
|
|
|
@import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
|
|
|
|
// fix exploding to very wide for some reason
|
|
.datepicker
|
|
width: 210px
|
|
|
|
html,body,p,h1,ul,li,table,tr,th,td
|
|
margin: 0
|
|
padding: 0
|
|
|
|
*
|
|
-webkit-box-sizing: border-box
|
|
-moz-box-sizing: border-box
|
|
box-sizing: border-box
|
|
|
|
hr
|
|
border-top: 0
|
|
border-bottom: 1px solid #ddd
|
|
border-color: rgba(0,0,0,0.1)
|
|
|
|
|
|
/* Header
|
|
-------------------------------------------------- */
|
|
|
|
#head
|
|
background: #ddd
|
|
background: -webkit-gradient(linear,0 0,0 100%,from(#e7e7e7),to(#d0d0d0))
|
|
background: -moz-linear-gradient(#e7e7e7, #d0d0d0)
|
|
background: -ms-linear-gradient(#e7e7e7, #d0d0d0)
|
|
background: -o-linear-gradient(#e7e7e7, #d0d0d0)
|
|
background: linear-gradient(#e7e7e7, #d0d0d0)
|
|
-webkit-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
|
|
-moz-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
|
|
box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
|
|
padding: 12px 16px
|
|
white-space: nowrap
|
|
position:fixed
|
|
width: 100%
|
|
box-sizing: border-box
|
|
z-index: 1000
|
|
|
|
@media (max-width: 600px) {
|
|
#head {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
#head .pull-right
|
|
margin-right: 0
|
|
margin-left: 1%
|
|
|
|
.modal
|
|
whitespace:normal
|
|
|
|
.dropdown-menu
|
|
right: 0
|
|
left: auto
|
|
|
|
.char-status
|
|
// border: 1px dotted grey
|
|
|
|
.main-avatar-wrap
|
|
margin: 0 5px 0 0
|
|
float: left
|
|
|
|
.party-avatar-wrap
|
|
margin: 0
|
|
float: right
|
|
|
|
.progress-bars
|
|
padding-top: 15px
|
|
|
|
.progress
|
|
position: relative
|
|
height: 25px
|
|
.bar
|
|
height: 25px
|
|
border: 1px solid black
|
|
.progress-text
|
|
position: absolute
|
|
right: 5px
|
|
top: 3px
|
|
color: black
|
|
|
|
@media (max-width: 600px) {
|
|
.char-status {
|
|
padding-top: 30px
|
|
}
|
|
.main-avatar-wrap {
|
|
border-right: 1px solid grey;
|
|
padding-right: 20px
|
|
}
|
|
.party-avatar-wrap {
|
|
float: left;
|
|
}
|
|
.progress-bars {
|
|
clear: both
|
|
}
|
|
}
|
|
|
|
/* Footer
|
|
-------------------------------------------------- */
|
|
|
|
/* Bootstrap website boilerplate */
|
|
.footer {
|
|
padding: 70px 0;
|
|
border-top: 1px solid #e5e5e5;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.footer p {
|
|
margin-bottom: 0;
|
|
color: #777;
|
|
}
|
|
.footer-links {
|
|
margin: 10px 0;
|
|
}
|
|
.footer-links li {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Customizations to make footer sticky */
|
|
/*html, body {height: 100%;}*/
|
|
#wrap {min-height: 100%; margin-top:130px; z-index:-1}
|
|
#main
|
|
/*overflow:auto;*/
|
|
padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
|
|
|
|
@media (max-width: 600px) {
|
|
#wrap {
|
|
margin-top: 0
|
|
}
|
|
}
|
|
|
|
/* Tokens
|
|
-------------------------------------------------- */
|
|
/* Adaptation of GH's social-count for Tokens */
|
|
|
|
.token-cost
|
|
border: 1px solid #D4D4D4;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 6px 7px 5px;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
border-radius: 3px;
|
|
color: #333;
|
|
background-color: #FAFAFA;
|
|
position: relative;
|
|
|
|
.token-cost::before
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid #D4D4D4;
|
|
border-color: transparent #D4D4D4 transparent transparent;
|
|
position: absolute;
|
|
right: 100%;
|
|
margin-right: 0;
|
|
top: 50%;
|
|
margin-top: -6px;
|
|
|
|
.token-cost::after
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid #FAFAFA;
|
|
border-color: transparent #FAFAFA transparent transparent;
|
|
position: absolute;
|
|
right: 100%;
|
|
margin-right: -1px;
|
|
top: 50%;
|
|
margin-top: -6px;
|
|
|
|
/* Misc
|
|
-------------------------------------------------- */
|
|
|
|
.notification-character
|
|
float:left
|
|
|
|
.notification-message
|
|
display: inline-block;
|
|
padding-right: 1em
|
|
line-height: 3
|
|
|
|
.notification-action
|
|
vertical-align: baseline
|
|
#reset-modal
|
|
z-index:1500
|
|
#notification-area
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0px;
|
|
z-index: 1001; |