mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 17:45:22 +08:00
b502a40b36
The button container sticks out farther than necessary because of the left margin, causing unnecessary horizontal scrolling at supported resolutions
470 lines
8.0 KiB
SCSS
470 lines
8.0 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: 40px !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;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
button {
|
|
margin: 8px 0;
|
|
vertical-align: top;
|
|
}
|
|
.btn-primary {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
// Page header
|
|
|
|
#topic-title {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
#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: 2px 9px 5px 9px;
|
|
text-decoration: none;
|
|
border: 5px solid rgba(0, 0, 0, 0.75);
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 99999;
|
|
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;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
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: 1;
|
|
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;
|
|
}
|
|
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;
|
|
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;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|