mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 01:32:23 +08:00
40f86829f7
* We now use a new custom view, {{cloaked-collection}} to display posts in a topic.
* Posts are removed and inserted (cloaked/uncloaked) into the DOM dynamically based on whether they
are visible in the current browser viewport.
* There's been a lot of refactoring to ensure the relationship between the post views and the topic
controller is sane.
* Lots of fixes involving jumping to a post, including a new LockOn component to that tries to stay
focused on an element even if stuff is loading before it in the DOM that would normally push it
down.
791 lines
16 KiB
SCSS
791 lines
16 KiB
SCSS
// 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";
|
|
|
|
|
|
html {font-size: 14px/19px;}
|
|
|
|
body {
|
|
min-width: $large-width;
|
|
}
|
|
|
|
.container {
|
|
@extend .clearfix;
|
|
max-width: $large-width;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.full-width {
|
|
width: $large-width;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
@include medium-width {
|
|
body {
|
|
min-width: $medium-width;
|
|
}
|
|
.container,
|
|
.full-width {
|
|
width: $medium-width;
|
|
}
|
|
}
|
|
|
|
/**/
|
|
|
|
|
|
@include small-width {
|
|
body {
|
|
min-width: $small-width;
|
|
}
|
|
.container,
|
|
.full-width {
|
|
width: $small-width;
|
|
}
|
|
}
|
|
|
|
a.no-href {
|
|
cursor: pointer;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
body {
|
|
|
|
button.ok {
|
|
@include linear-gradient(lighten($green, 5%), $green);
|
|
color: $white;
|
|
@include hover {
|
|
@include linear-gradient(lighten($green, 10%), $green);
|
|
color: $white;
|
|
}
|
|
}
|
|
button.cancel {
|
|
@include linear-gradient(lighten($red, 5%), $red);
|
|
color: $white;
|
|
@include hover {
|
|
@include linear-gradient(lighten($red, 10%), $red);
|
|
color: $white;
|
|
}
|
|
}
|
|
.coldmap-high {
|
|
color: lighten($blue, 20%) !important;
|
|
}
|
|
.coldmap-med {
|
|
color: lighten($blue, 10%) !important;
|
|
}
|
|
.coldmap-low {
|
|
color: $blue !important;
|
|
}
|
|
.heatmap-high {
|
|
color: lighten($red, 50%) !important;
|
|
}
|
|
.heatmap-med {
|
|
color: lighten($red, 10%) !important;
|
|
}
|
|
.heatmap-low {
|
|
color: $red !important;
|
|
}
|
|
#loading-message {
|
|
position: absolute;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
top: 120px;
|
|
left: 500px;
|
|
color: $darkish_gray;
|
|
}
|
|
.top-space {
|
|
margin-top: 10px;
|
|
}
|
|
ul.breadcrumb {
|
|
margin: 0 10px 0px 10px;
|
|
}
|
|
.boxed {
|
|
height: 100%;
|
|
@include border-radius-all(5px);
|
|
.contents {
|
|
}
|
|
&.white {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
#main {
|
|
.icon-star.starred {
|
|
color: #e45735;
|
|
}
|
|
a.star {
|
|
color: #cacaca;
|
|
&:before {
|
|
font-family: "FontAwesome";
|
|
content: "\f005";
|
|
}
|
|
&.starred {
|
|
color: #e45735;
|
|
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: $white;
|
|
padding: 14px;
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
p {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
#footer {
|
|
background-color: $eggplant;
|
|
.container {
|
|
height: 50px;
|
|
.contents {
|
|
padding-top: 10px;
|
|
a[href] {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.clear-transitions {
|
|
@include transition(none !important);
|
|
}
|
|
.grippie {
|
|
width: 100%;
|
|
border: 1px solid #dddddd;
|
|
border-width: 1px 0px;
|
|
cursor: row-resize;
|
|
height: 11px;
|
|
overflow: hidden;
|
|
background-color: #eeeeee;
|
|
display:block {}
|
|
background: image-url("grippie.png") #eeeeee no-repeat center 3px;
|
|
}
|
|
}
|
|
|
|
form {
|
|
.tip {
|
|
display: inline-block;
|
|
&.good {
|
|
color: $green;
|
|
}
|
|
&.bad {
|
|
color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
/* 13px left is intentional here to properly align with post quotes */
|
|
padding: 10px 4px 4px 13px;
|
|
background-color: $quote-background;
|
|
border-left: 5px solid darken($quote-background, 20%);
|
|
p {
|
|
}
|
|
}
|
|
|
|
.topic-statuses {
|
|
float: left;
|
|
margin: 1px 3px 0 0;
|
|
padding: 0;
|
|
.topic-status {
|
|
padding: 0 2px 0 0;
|
|
margin: 0;
|
|
i {
|
|
font-size: 15px;
|
|
color: darken($white, 60%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#wmd-input {
|
|
resize: none;
|
|
}
|
|
|
|
#pagedown-editor {
|
|
width: 540px;
|
|
background-color: $white;
|
|
padding: 0 10px 13px 10px;
|
|
border: 1px solid $gray;
|
|
.preview {
|
|
margin-top: 8px;
|
|
border: 1px dashed $gray;
|
|
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: $black;
|
|
@include border-radius-all(10px);
|
|
padding: 10px 10px 10px 30px;
|
|
font-size: 15px;
|
|
line-height: 23px;
|
|
text-align: center;
|
|
color: $white;
|
|
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: white;
|
|
display: inline-block;
|
|
border: 1px solid #82786b;
|
|
@include border-radius-all(5px);
|
|
img {
|
|
@include border-radius-all(4px);
|
|
}
|
|
}
|
|
|
|
.profiler-results.profiler-left {
|
|
top: 60px !important;
|
|
}
|
|
|
|
|
|
/* bootstrap carryover */
|
|
|
|
|
|
body {
|
|
|
|
input, textarea, select {
|
|
color: #222222;
|
|
}
|
|
|
|
code, pre {
|
|
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
color: inherit;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
|
|
|
|
// this removes the unwanted top margin on a paragraph under a heading
|
|
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
|
|
margin-top:0px;
|
|
}
|
|
|
|
|
|
form {
|
|
margin: 0 0 18px;
|
|
}
|
|
label, input, button, select, textarea {
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
line-height: 18px;
|
|
}
|
|
input, button, select, textarea {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
select, textarea {
|
|
display: inline-block;
|
|
padding: 4px;
|
|
margin-bottom: 9px;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #555555;
|
|
}
|
|
input {
|
|
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
|
|
display: inline-block;
|
|
height: 18px;
|
|
padding: 4px;
|
|
margin-bottom: 9px;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #555555;
|
|
}
|
|
}
|
|
input {
|
|
width: 210px;
|
|
}
|
|
textarea {
|
|
width: 210px;
|
|
height: auto;
|
|
background-color: white;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
}
|
|
input {
|
|
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
|
|
background-color: white;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
}
|
|
}
|
|
textarea:focus {
|
|
border-color: rgba(82, 168, 236, 0.8);
|
|
outline: 0;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
}
|
|
input {
|
|
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
|
|
border-color: rgba(82, 168, 236, 0.8);
|
|
outline: 0;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="radio"], &[type="checkbox"] {
|
|
margin: 3px 0;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
}
|
|
&[type="submit"], &[type="reset"], &[type="button"], &[type="radio"], &[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
select, input[type="file"] {
|
|
line-height: 28px;
|
|
}
|
|
|
|
select {
|
|
width: 220px;
|
|
border: 1px solid #bbbbbb;
|
|
&[multiple], &[size] {
|
|
height: auto;
|
|
}
|
|
&:focus {
|
|
outline: thin dotted #333333;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
input {
|
|
&[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus {
|
|
outline: thin dotted #333333;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
.radio, .checkbox {
|
|
min-height: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
.radio input[type="radio"], .checkbox input[type="checkbox"] {
|
|
float: left;
|
|
margin-left: -18px;
|
|
}
|
|
.controls > {
|
|
.radio:first-child, .checkbox:first-child {
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.radio.inline, .checkbox.inline {
|
|
display: inline-block;
|
|
padding-top: 5px;
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
}
|
|
.radio.inline .radio.inline, .checkbox.inline .checkbox.inline {
|
|
margin-left: 10px;
|
|
}
|
|
.input-xxlarge {
|
|
width: 530px;
|
|
}
|
|
input[class*="span"], select[class*="span"], textarea[class*="span"] {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
.input-append {
|
|
input[class*="span"] {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.input-prepend {
|
|
input[class*="span"] {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
input, textarea {
|
|
margin-left: 0;
|
|
}
|
|
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
|
|
cursor: not-allowed;
|
|
background-color: #eeeeee;
|
|
border-color: #dddddd;
|
|
}
|
|
input {
|
|
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.control-group {
|
|
&.warning {
|
|
> label {
|
|
color: #c09853;
|
|
}
|
|
.checkbox, .radio, input, select, textarea {
|
|
color: #c09853;
|
|
border-color: #c09853;
|
|
}
|
|
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
|
border-color: #a47e3c;
|
|
box-shadow: 0 0 6px #dbc59e;
|
|
}
|
|
.input-prepend .add-on, .input-append .add-on {
|
|
color: #c09853;
|
|
background-color: #fcf8e3;
|
|
border-color: #c09853;
|
|
}
|
|
}
|
|
&.error {
|
|
> label {
|
|
color: #b94a48;
|
|
}
|
|
.checkbox, .radio, input, select, textarea {
|
|
color: #b94a48;
|
|
border-color: #b94a48;
|
|
}
|
|
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
|
border-color: #953b39;
|
|
box-shadow: 0 0 6px #d59392;
|
|
}
|
|
.input-prepend .add-on, .input-append .add-on {
|
|
color: #b94a48;
|
|
background-color: #f2dede;
|
|
border-color: #b94a48;
|
|
}
|
|
}
|
|
&.success {
|
|
> label {
|
|
color: #468847;
|
|
}
|
|
.checkbox, .radio, input, select, textarea {
|
|
color: #468847;
|
|
border-color: #468847;
|
|
}
|
|
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
|
border-color: #356635;
|
|
box-shadow: 0 0 6px #7aba7b;
|
|
}
|
|
.input-prepend .add-on, .input-append .add-on {
|
|
color: #468847;
|
|
background-color: #dff0d8;
|
|
border-color: #468847;
|
|
}
|
|
}
|
|
}
|
|
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
|
|
color: #b94a48;
|
|
border-color: #ee5f5b;
|
|
}
|
|
input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
|
|
border-color: #e9322d;
|
|
box-shadow: 0 0 6px #f8b9b7;
|
|
}
|
|
|
|
.input-prepend, .input-append {
|
|
margin-bottom: 5px;
|
|
}
|
|
.input-prepend input, .input-append input, .input-prepend select, .input-append select {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
*margin-left: 0;
|
|
vertical-align: middle;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
.input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus {
|
|
z-index: 2;
|
|
}
|
|
.input-prepend .add-on, .input-append .add-on {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: 18px;
|
|
min-width: 16px;
|
|
padding: 4px 5px;
|
|
font-weight: normal;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 white;
|
|
vertical-align: middle;
|
|
background-color: #eeeeee;
|
|
border: 1px solid #cccccc;
|
|
}
|
|
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
|
|
margin-left: -1px;
|
|
border-radius: 0;
|
|
}
|
|
.input-prepend .active, .input-append .active {
|
|
background-color: #a9dba9;
|
|
border-color: #46a546;
|
|
}
|
|
.input-prepend {
|
|
.add-on, .btn {
|
|
margin-right: -1px;
|
|
}
|
|
.add-on:first-child, .btn:first-child {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
}
|
|
.input-append {
|
|
input, select {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
.add-on:last-child, .btn:last-child {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
}
|
|
.input-prepend.input-append {
|
|
input, select {
|
|
border-radius: 0;
|
|
}
|
|
.add-on:first-child, .btn:first-child {
|
|
margin-right: -1px;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
.add-on:last-child, .btn:last-child {
|
|
margin-left: -1px;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
}
|
|
|
|
.form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .input-prepend, .form-horizontal .input-append {
|
|
display: inline-block;
|
|
*display: inline;
|
|
margin-bottom: 0;
|
|
}
|
|
.form-horizontal .hide {
|
|
display: none;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 9px;
|
|
}
|
|
.form-horizontal {
|
|
.control-group {
|
|
margin-bottom: 18px;
|
|
*zoom: 1;
|
|
&:before {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
&:after {
|
|
display: table;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
}
|
|
.control-indent {
|
|
margin-left: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.control-label {
|
|
float: left;
|
|
width: 140px;
|
|
padding-top: 5px;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
.controls {
|
|
*display: inline-block;
|
|
*padding-left: 20px;
|
|
margin-left: 160px;
|
|
*margin-left: 0;
|
|
&:first-child {
|
|
*padding-left: 160px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
padding: 8px 35px 8px 14px;
|
|
margin-bottom: 18px;
|
|
background-color: #fcf8e3;
|
|
border: 1px solid #fbeed5;
|
|
color: #c09853;
|
|
}
|
|
.alert .close {
|
|
position: relative;
|
|
top: -2px;
|
|
right: -21px;
|
|
line-height: 18px;
|
|
}
|
|
.alert-success {
|
|
background-color: #dff0d8;
|
|
border-color: #d6e9c6;
|
|
color: #468847;
|
|
}
|
|
.alert-error {
|
|
background-color: #f2dede;
|
|
border-color: #eed3d7;
|
|
color: #b94a48;
|
|
}
|
|
.alert-info {
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
color: #3a87ad;
|
|
}
|
|
.alert {
|
|
.close {
|
|
float: right;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 18px;
|
|
color: black;
|
|
text-shadow: 0 1px 0 white;
|
|
opacity: 0.2;
|
|
filter: alpha(opacity = 20);
|
|
@include hover {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
opacity: 0.4;
|
|
filter: alpha(opacity = 40);
|
|
}
|
|
}
|
|
button.close {
|
|
padding: 0;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
.bootbox.modal {
|
|
.modal-footer {
|
|
a.btn-primary {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* bootstrap colums */
|
|
|
|
.row {
|
|
*zoom: 1;
|
|
}
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
[class*="span"] {
|
|
float: left;
|
|
}
|
|
.span24 {
|
|
width: 1236px;
|
|
}
|
|
.span15 {
|
|
width: 768px;
|
|
margin-left: 12px;
|
|
}
|
|
.span14 {
|
|
width: 716px;
|
|
}
|
|
.span13 {
|
|
width: 664px;
|
|
}
|
|
.span11 {
|
|
width: 560px;
|
|
}
|
|
.span10 {
|
|
width: 508px;
|
|
}
|
|
.span8 {
|
|
width: 404px;
|
|
}
|
|
.span6 {
|
|
width: 300px;
|
|
}
|
|
.span5 {
|
|
width: 248px;
|
|
}
|
|
.span4 {
|
|
width: 196px;
|
|
margin-right: 12px;
|
|
}
|
|
.span3 {
|
|
width: 144px;
|
|
}
|
|
.span2 {
|
|
width: 92px;
|
|
}
|
|
.offset2 {
|
|
margin-left: 116px;
|
|
}
|
|
.offset1 {
|
|
margin-left: 64px;
|
|
}
|
|
|