discourse/app/assets/stylesheets/mobile/discourse.scss

279 lines
5.1 KiB
SCSS
Raw Normal View History

2013-09-06 03:37:07 +08:00
// global styles that apply to the Discourse application specifically
// BEWARE: changing these styles implies they take effect anywhere they are seen
// throughout the Discourse application
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
@import "../common/foundation/helpers";
body {
background-color: $secondary;
2013-09-06 03:37:07 +08:00
}
.container {
@extend .clearfix;
margin-right: auto;
margin-left: auto;
}
.full-width {
margin-left: 12px;
}
a.no-href {
cursor: pointer;
}
header {
}
body {
button.ok {
@include linear-gradient(lighten($success, 5%), $success);
color: $secondary;
2013-09-06 03:37:07 +08:00
@include hover {
@include linear-gradient(lighten($success, 10%), $success);
color: $secondary;
2013-09-06 03:37:07 +08:00
}
}
button.cancel {
@include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger);
color: $secondary;
2013-09-06 03:37:07 +08:00
@include hover {
@include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger);
color: $secondary;
2013-09-06 03:37:07 +08:00
}
}
.coldmap-high {
color: lighten($tertiary, 20%) !important;
2013-09-06 03:37:07 +08:00
}
.coldmap-med {
color: lighten($tertiary, 10%) !important;
2013-09-06 03:37:07 +08:00
}
.coldmap-low {
color: $tertiary !important;
2013-09-06 03:37:07 +08:00
}
.heatmap-high {
color: lighten($highlight_danger, 50%) !important;
2013-09-06 03:37:07 +08:00
}
.heatmap-med {
color: lighten($highlight_danger, 10%) !important;
2013-09-06 03:37:07 +08:00
}
.heatmap-low {
color: $highlight_danger !important;
2013-09-06 03:37:07 +08:00
}
#loading-message {
position: absolute;
font-size: 30px;
text-align: center;
top: 120px;
left: 500px;
color: $primary_medium;
2013-09-06 03:37:07 +08:00
}
.top-space {
margin-top: 10px;
}
ul.breadcrumb {
margin: 0 10px 0px 10px;
}
.boxed {
height: 100%;
@include border-radius-all(5px);
.contents {
2013-09-11 11:56:55 +08:00
padding: 10px 10px 10px 10px;
2013-09-06 03:37:07 +08:00
}
&.white {
background-color: $secondary;
2013-09-06 03:37:07 +08:00
}
}
#main {
2013-12-10 05:27:49 +08:00
.fa-star.starred {
color: $highlight;
2013-09-06 03:37:07 +08:00
}
a.star {
display: inline-block;
font-size: 15px;
line-height: 1;
color: $primary_light;
2013-09-06 03:37:07 +08:00
&:before {
font-family: "FontAwesome";
content: "\f005";
}
&.starred {
color: #fe1;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
@include hover {
opacity: 1;
&:before {
content: "\f005";
}
}
}
@include hover {
opacity: 0.6;
}
&:active {
opacity: 1;
}
}
img.avatar {
&.header {
width: 45px;
height: 45px;
}
&.medium {
width: 32px;
height: 32px;
}
&.small {
width: 25px;
height: 25px;
}
&.tiny {
width: 20px;
height: 20px;
}
}
.user-list {
.user {
padding-bottom: 5px;
}
}
}
.message {
@include border-radius-all(8px);
background-color: $secondary;
2013-09-06 03:37:07 +08:00
padding: 14px;
h2 {
margin-bottom: 20px;
}
p {
font-size: 20px;
}
}
#footer {
.container {
height: 50px;
.contents {
padding-top: 10px;
a[href] {
color: $secondary;
2013-09-06 03:37:07 +08:00
}
}
}
}
.clear-transitions {
@include transition(none !important);
}
.grippie {
width: 100%;
border: 1px solid $primary_lighter;
2013-09-06 03:37:07 +08:00
border-width: 1px 0px;
cursor: row-resize;
height: 11px;
overflow: hidden;
background-color: $primary_lightest;
2013-09-06 03:37:07 +08:00
display:block {}
background: image-url("grippie.png") $primary_lightest no-repeat center 3px;
2013-09-06 03:37:07 +08:00
}
}
form {
.tip {
display: inline-block;
&.good {
color: $success;
2013-09-06 03:37:07 +08:00
}
&.bad {
color: $highlight_danger;
2013-09-06 03:37:07 +08:00
}
}
}
blockquote {
/* 13px left is intentional here to properly align with post quotes */
padding: 10px 8px 10px 13px;
background-color: $quote-background;
border-left: 5px solid darken($quote-background, 20%);
p {
margin: 0 0 10px 0;
}
}
.topic-statuses {
display: inline-block;
margin: 0;
padding: 0;
.topic-status {
padding: 5px 2px 0 0;
margin: 0;
display: inline-block;
i {
font-size: 15px;
color: darken($secondary, 60%);
2013-09-06 03:37:07 +08:00
}
}
}
#wmd-input {
resize: none;
}
#pagedown-editor {
width: 540px;
background-color: $secondary;
2013-09-06 03:37:07 +08:00
padding: 0 10px 13px 10px;
border: 1px solid $primary_light;
2013-09-06 03:37:07 +08:00
.preview {
margin-top: 8px;
border: 1px dashed $primary_light;
2013-09-06 03:37:07 +08:00
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
}
}
.preview.hidden {
display: none;
}
}
.spinner {
width: 100px;
margin: 0 auto 30px auto;
background-color: $primary;
2013-09-06 03:37:07 +08:00
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $secondary;
2013-09-06 03:37:07 +08:00
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 8px;
size: 25px;
};
}
.avatar {
@include border-radius-all(2px);
}
.avatar-wrapper {
background-color: $secondary;
2013-09-06 03:37:07 +08:00
display: inline-block;
border: 1px solid $primary_light;
2013-09-06 03:37:07 +08:00
@include border-radius-all(5px);
img {
@include border-radius-all(4px);
}
}
.profiler-results.profiler-left {
top: 60px !important;
}