mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-25 00:29:30 -05:00
5280b3a01b
changed it so notify moderators goes to the moderators group allow admins to grant self moderation and revoke self moderation
487 lines
8.3 KiB
SCSS
487 lines
8.3 KiB
SCSS
/* styles that apply when viewing a topic/topic */
|
|
|
|
@import "foundation/variables";
|
|
@import "foundation/mixins";
|
|
|
|
// Topic title
|
|
// --------------------------------------------------
|
|
|
|
#topic-title,
|
|
.extra-info-wrapper {
|
|
h1 {
|
|
display: inline-block;
|
|
max-width: 850px;
|
|
margin-top: 5px;
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
}
|
|
@include medium-width {
|
|
h1 {
|
|
max-width: 735px;
|
|
}
|
|
}
|
|
@include small-width {
|
|
h1 {
|
|
max-width: 690px;
|
|
}
|
|
}
|
|
.star {
|
|
height: 40px;
|
|
font-size: 20px !important;
|
|
line-height: 36px !important;
|
|
vertical-align: top;
|
|
}
|
|
.topic-statuses {
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
.topic-status {
|
|
margin: 0 4px 0 0;
|
|
padding: 0;
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
> .icon {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
h1 > .badge-category {
|
|
margin-top: 5px;
|
|
vertical-align: top;
|
|
}
|
|
.edit-topic {
|
|
i {
|
|
font-size: 12px;
|
|
line-height: 28px;
|
|
vertical-align: top;
|
|
}
|
|
.discourse-no-touch & {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
@include hover {
|
|
.edit-topic {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
#edit-title,
|
|
.chzn-container {
|
|
margin: 6px 0;
|
|
}
|
|
.category-combobox {
|
|
width: 330px;
|
|
.chzn-drop {
|
|
left: -9000px;
|
|
width: 328px;
|
|
}
|
|
.chzn-search input {
|
|
width: 278px;
|
|
}
|
|
}
|
|
button {
|
|
margin: 8px 0;
|
|
vertical-align: top;
|
|
}
|
|
.btn-primary {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
// Page header
|
|
|
|
#topic-title {
|
|
margin-bottom: 14px;
|
|
#edit-title {
|
|
width: 350px;
|
|
}
|
|
}
|
|
|
|
// App header
|
|
|
|
.extra-info-wrapper {
|
|
display: none;
|
|
float: left;
|
|
margin-left: 10px;
|
|
&.show-extra-info {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#multi-select-options {
|
|
button {
|
|
margin-bottom: 5px;
|
|
width: 150px;
|
|
}
|
|
}
|
|
|
|
#topic-filter {
|
|
background-color: $highlight_light;
|
|
padding: 8px;
|
|
bottom: 0;
|
|
position: fixed;
|
|
width: 100%;
|
|
font-size: 15px;
|
|
z-index: 495
|
|
}
|
|
|
|
#main {
|
|
// used in topic onebox
|
|
.topic-info {
|
|
margin-top: 20px;
|
|
.info-line {
|
|
float: left;
|
|
color: lighten($black, 40%);
|
|
}
|
|
.posters {
|
|
margin-right: 10px;
|
|
float: right;
|
|
}
|
|
}
|
|
section.divider {
|
|
background-color: $dark_gray;
|
|
height: 3px;
|
|
margin: 10px 0 20px 0;
|
|
opacity: 1;
|
|
@include transition(opacity 3s);
|
|
&.fade {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
a.mention, .ac-wrap .item span {
|
|
@include border-radius-all(5px);
|
|
@include linear-gradient(lighten($light_gray, 10%), $light_gray);
|
|
border: 1px solid $gray;
|
|
color: $darkish_gray;
|
|
padding: 1px 2px;
|
|
}
|
|
a.mention {
|
|
cursor: pointer;
|
|
.clicks {
|
|
display:none;
|
|
}
|
|
}
|
|
span.spoiler {
|
|
background-color: $black;
|
|
color: $black;
|
|
@include hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// When we are quoting something
|
|
aside.quote {
|
|
margin-top: 14px;
|
|
border: 1px solid #eee;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
overflow: hidden;
|
|
@include border-radius-all(4px);
|
|
&:nth-of-type(1) {
|
|
margin: 0;
|
|
}
|
|
.title {
|
|
padding: 8px;
|
|
background-color: #f1f1f1;
|
|
a,
|
|
.avatar {
|
|
margin-right: 4px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.quote-controls {
|
|
float: right;
|
|
color: #323232;
|
|
@include fades-in(0.25s);
|
|
a {
|
|
margin: 0;
|
|
}
|
|
.back:before,
|
|
.quote-other-topic:before {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
color: #323232;
|
|
font-family: "FontAwesome";
|
|
}
|
|
.back:before {
|
|
content: "\f062";
|
|
}
|
|
.quote-other-topic:before {
|
|
content: "\f061";
|
|
}
|
|
}
|
|
.discourse-touch & {
|
|
.quote-controls {
|
|
@include visible;
|
|
i,
|
|
a {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
@include hover {
|
|
.quote-controls {
|
|
@include visible;
|
|
}
|
|
}
|
|
blockquote {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 8px;
|
|
color: #333;
|
|
background-color: $white;
|
|
*:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.highlighted {
|
|
display: inline;
|
|
padding: 3px 5px 3px 8px;
|
|
background-color: $highlight;
|
|
}
|
|
}
|
|
}
|
|
.quote-button {
|
|
background-color: $blue;
|
|
z-index: 500;
|
|
color: $white;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
padding: 5px 9px 5px 9px;
|
|
text-decoration: none;
|
|
border: 5px solid rgba(0, 0, 0, 0.75);
|
|
top: 10px;
|
|
left: 10px;
|
|
position: absolute;
|
|
display: none;
|
|
@include border-radius-all(4px);
|
|
@include hover {
|
|
cursor: pointer;
|
|
background-color: lighten($blue, 10%);
|
|
}
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
}
|
|
#topic-bottom {
|
|
height: 20px;
|
|
}
|
|
|
|
|
|
#suggested-topics {
|
|
margin: 40px 0 40px 20px;
|
|
width: 1110px;
|
|
@include medium-width { width: 970px; }
|
|
@include small-width { width: 870px; }
|
|
h3 {
|
|
font-size: 15px;
|
|
margin-left: 6px;
|
|
color: darken($darkish_gray, 20%);
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
#topic-footer-buttons {
|
|
margin: 20px 0 0 103px;
|
|
|
|
width: 1027px;
|
|
@include medium-width { width: 887px; }
|
|
@include small-width { width: 787px; }
|
|
|
|
.btn-group {
|
|
margin-top: 20px;
|
|
p {
|
|
line-height: 32px;
|
|
float: left;
|
|
margin: 0 10px;
|
|
color: #7f7f7f;
|
|
}
|
|
h4.title {
|
|
line-height: 32px;
|
|
font-weight: normal;
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
}
|
|
ul.dropdown-menu {
|
|
top: auto;
|
|
bottom: 115%;
|
|
left: 0px;
|
|
}
|
|
ul li a {
|
|
span {
|
|
display: block;
|
|
font-size: 11px;
|
|
}
|
|
span.title {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
button {
|
|
margin-right: 5px;
|
|
span.caret {
|
|
margin-left: 10px;
|
|
}
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
kbd {
|
|
white-space: nowrap;
|
|
border-style: solid;
|
|
border-color: #cccccc #aaaaaa #888888 #bbbbbb;
|
|
padding: 0px 6px;
|
|
@include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2) 0 0 0 1px white inset);
|
|
border-radius: 4px;
|
|
background-color: #fafafa;
|
|
border-width: 1px 1px 2px;
|
|
color: #444444;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.post-text img {
|
|
max-width: 640px;
|
|
}
|
|
|
|
#topic-progress-wrapper {
|
|
position: fixed;
|
|
width: 0;
|
|
bottom: 0px;
|
|
right: 50%;
|
|
z-index: 500;
|
|
outline: 1px solid transparent;
|
|
}
|
|
|
|
.posts .spinner {
|
|
width: 100px;
|
|
margin: 0 auto 30px 375px;
|
|
}
|
|
|
|
.posts-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
#topic-progress-wrapper.docked {
|
|
#topic-progress {
|
|
border-bottom: 1px solid $gray;
|
|
margin-left: 6px;
|
|
}
|
|
position: absolute;
|
|
}
|
|
|
|
#topic-progress {
|
|
position: relative;
|
|
left: 275px;
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
border-left: 1px solid $gray;
|
|
border-right: 1px solid $gray;
|
|
border-top: 1px solid $gray;
|
|
background-color: $white;
|
|
color: $darkish_gray;
|
|
width: 130px;
|
|
height: 34px;
|
|
.nums {
|
|
position: relative;
|
|
top: 9px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
button {
|
|
padding: 0 1px;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 4px;
|
|
border: 0;
|
|
background: none;
|
|
color: $darkish_gray;
|
|
i {
|
|
font-size: 18px;
|
|
}
|
|
&:nth-of-type(2) {
|
|
right: 4px;
|
|
left: auto;
|
|
}
|
|
@include hover {
|
|
color: darken($darkish_gray, 10%);
|
|
&:disabled {
|
|
cursor: default;
|
|
color: lighten($darkish_gray, 30%);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
color: lighten($darkish_gray, 30%);
|
|
}
|
|
}
|
|
h4 {
|
|
display: inline;
|
|
font-size: 18px;
|
|
line-height: 15px;
|
|
}
|
|
.bg {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: 0px;
|
|
border-right: 1px solid $white;
|
|
background-color: #e6f7ef;
|
|
}
|
|
}
|
|
|
|
#edit-title {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.private_message .participants .user {
|
|
float: left;
|
|
display: block;
|
|
line-height: 35px;
|
|
margin-right: 15px;
|
|
margin-top: 8px;
|
|
&.group {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.posts-wrapper .spinner {
|
|
margin-left: 390px;
|
|
}
|
|
|
|
|
|
@include medium-width {
|
|
.posts-wrapper .spinner {
|
|
margin-left: 380px;
|
|
}
|
|
#topic-progress {
|
|
left: 325px;
|
|
}
|
|
}
|
|
|
|
|
|
@include small-width {
|
|
.posts-wrapper .spinner {
|
|
margin-left: 360px;
|
|
}
|
|
#topic-progress {
|
|
left: 0;
|
|
}
|
|
#topic-progress-wrapper {
|
|
right: 180px;
|
|
}
|
|
}
|