@import "common/foundation/variables"; @import "common/foundation/mixins"; .container { @extend .clearfix; max-width: $large-width; margin-right: auto; margin-left: auto; } .full-width { margin-left: 0px; } h1 .topic-statuses .topic-status i {margin-right: 5px;} .logo-small {margin-right: 8px;} .topic-post { padding: 0; &:first-of-type { border-top: none; } &:last-of-type { border-bottom: 1px solid #ddd; } .reply-to-tab { display: block; position: absolute; left: 120px; z-index: 400; padding: 5px 12px; border: 1px solid #ddd; font-size: 12px; margin-left: -8px; background: #fff; } .avoid-tab { padding-top: 25px; .topic-meta-data-inside {margin-top: -30px;} } .gutter { .reply-new { .discourse-no-touch & { opacity:0; transition: linear 0.15s; -webkit-transition: linear 0.15s; } .discourse-touch & {opacity: 1;} } } section.post-menu-area, .post-actions { .discourse-no-touch & { opacity: 0.2; transition: linear 0.15s; -webkit-transition: linear 0.15s; } .discourse-touch & {opacity: 1;} } &:hover section.post-menu-area, &:hover .post-actions { opacity: 1; } &:hover .gutter { .reply-new, .track-link { opacity:1; } } } nav.post-controls { padding: 0; button {color: #aaa; margin-right: 2px; } span.badge-posts { margin-right: 5px; color: #aaa; } .show-replies { i { margin-left: 5px; } } button.show-replies { padding: 8px 15px; margin-left: 0px; } button.create { margin-right: 0; color: darken(#e4f2f8, 35%); background: #e4f2f8; padding: 8px 20px; margin-left: 10px; &:hover { color: darken(#e4f2f8, 45%); background: darken(#e4f2f8, 10%); } &:active { @include linear-gradient(darken(#e4f2f8, 15%), darken(#e4f2f8, 10%)); @include box-shadow(inset 0 1px 3px rgba($black, 0.2)); } } .create i { margin-right: 5px; } button { font-size: 16px; padding: 8px 10px; vertical-align: top; background: transparent; border: none; margin-left: 3px; transition: all linear 0.15s; outline: none; &:hover { background: #eee; color: #888; } &:active { @include box-shadow(inset 0 1px 3px rgba($black, 0.2)); } &.hidden { display: none; } &.like, &.edit, &.flag, &.delete, &.share, &.bookmark, &.create { float: right; } &.delete:hover { background: #E53B2E; color: #fff; } &.like:hover {color: #fa6c8d; background: #fae9ed; } &.bookmark {padding: 8px 11px; } .read-icon { &:before { font-family: "FontAwesome"; content: "\f02e"; } &.unseen { &:before { content: "\f097"; } } &.last-read { color: #e45735; } &.bookmarked { &:before { color: $bookmarkColor; } } } } } .embedded-posts { background: #eee; .quote .title {background: #ddd;} blockquote {background: #ddd;} &.bottom { margin-top: -11px;} .topic-meta-data h5 {margin: 5px;} .topic-meta-data-inside { margin: -3px 0 0 0; color: #aaa; } .topic-meta-data {padding-top: 20px;} } .post-action { .relative-date { margin-left: 5px; } .avatar { margin-right: 2px; } } a.star { display: inline-block; float: left; } #main a.star.starred { text-shadow: none !important; } .topic-summary { margin: 20px 0 0 0; border: 1px solid #ddd; button {border-radius: 0;} .topic-links li { word-wrap: break-word; } h3 { margin-bottom: 4px; color: #323232; line-height: 23px; } h4 { margin: 0 0 3px 0; color: #6c7376; font-weight: normal; font-size: 12px; line-height: 15px; } p, .participants { margin: 0 0 7px; } ul { margin: 0; list-style: none; } .avatars { > div { float: left; position: relative; margin: 3px 0; } .post-count { position: absolute; top: 2px; right: 6px; padding: 0 4px; font-weight: normal; font-size: 11px; line-height: 14px; } } .avatar { float: left; margin-right: 4px; } .summary { &.collapsed { } li { float: left; padding: 7px 11px; &:last-of-type { border-right: 0; } } a, .number { font-weight: bold; line-height: 20px; } .number { color: #445a62; } .avatar + a { float: left; } } .avatars, .links, .information { padding: 7px 14px; color: #000; } .information { border-top: 1px solid #d1d1d2; } .participants { // PMs // .user {float: left; margin: 7px 20px 7px 0;} } .topic-links { li > a { margin-left: 5px; } .badge-notification { margin: 0 0 4px; } } .buttons { float: right; .btn { border: 0; border-bottom: 1px solid #ddd; border-left: 1px solid #e6e6e6; padding: 0 23px; color: #444; background: #eee; &:hover { background: #ccc; color: #444; border-bottom: 1px solid #ccc; } &:active { @include box-shadow(inset 0 1px 3px rgba($black, 0.2)); } &.collapsed { border-bottom: 0; padding-bottom: 1px; } .icon { margin: 0; font-size: 18px; line-height: 52px; } } } } #topic-footer-buttons { padding: 10px 10px 0 10px; p { line-height: 32px; color: #888; } } #suggested-topics { clear: left; padding: 20px 10px 15px 10px; .topics table tbody tr {background: #fff;} table { box-shadow: none; border-radius: 0; border-color: #ddd; margin-top: 10px; } .title { font-size: 14px; line-height: 8px; } } span.post-count { background: #000; color: #fff; opacity: .8; } #topic-footer-buttons { .btn { margin-bottom: 5px; margin-right: 10px; .icon-star {margin-right: 5px;} } } article.boxed { img, svg { max-width: 100%; } } .quote-button { display: none; position: absolute; background-color: #666; color: #fff; padding: 10px; z-index: 401; &:hover { background-color: #999; cursor: pointer; } } .quote-button.visible { display: block; } iframe { max-width: 100%; } .extra-info-wrapper { float: left; width: 78%; .topic-statuses {margin-right: 5px;} } .extra-info { h1 { margin: 5px 0 0 0; font-size: 2em; line-height: 1.2em; overflow: hidden; } a.star { margin-right: 8px; font-size: 20px; margin-top: 8px; } .topic-statuses {margin-top: -2px;} .badge-category { vertical-align: top; } } .topic-meta-data { margin-bottom: 10px; width: 92px; border-top: 1px solid #ddd; padding-top: 30px; img { text-align: center; } .contents { text-align: center;} h3 { display: block; } } .open>.dropdown-menu { display: block; } .dropdown-menu li { margin: 5px 0; } .btn-group { margin-top: 25px; position: relative; } .dropdown-toggle { float: left; position: relative; } .contents .cooked a { word-wrap: break-word; } .contents .cooked { margin-right: 50px; word-wrap: break-word; h1, h2, h3 {margin: 10px 0;} ul, ol {margin: 15px 0 0 20px;} li p {margin: 3px 0;} } a.mention { padding: 2px 4px; color: #666; background: #eee; } .modal-body { input[type=text] { font-size: 16px; } } .deleted { .topic-body { background-color: lighten(red, 45%); } } .moderator { .topic-body { background-color: lighten(yellow, 45%); } } #share-link { width: 265px; margin-left: -4px; h3 { margin: 5px 0; } input[type=text] { font-size: 16px; width: 92%; margin-bottom: 10px; } } #selected-posts { padding-left: 20px; .btn { margin-bottom: 10px; } } .post-select { float: right; margin-right: 20px; margin-top: -20px; } #show-topic-admin { right: 20px; padding: 5px 8px; margin-top: 5px; } .topic-admin-menu { h3 {margin-top: 0px;} } .deleted-user-avatar { font-size: 36px; } .staff a { padding: 4px; margin: -4px 0 0 0; background-color: lighten(yellow, 35%); } .topic-meta-data { float: left; position: relative; h3 { font-size: 13px; margin-top: 5px; word-wrap: break-word; line-height: 1.2em; } } .user-title { margin-top: 8px; color: #aaa; overflow: hidden; font-size: 80%; line-height: 13px; } .info-line { margin: 10px 0; color: #666; } blockquote { /* solo quotes */ margin: 14px 0; padding: 12px; p:first-of-type {margin-top: 0;} p:last-of-type {margin-bottom: 0;} } .quote { /* quotes with attribution */ margin-top: 14px; blockquote {margin-top: 0; padding-top: 0; .onebox-result {background-color: #ddd;} } .title { border-left: 5px solid #bebebe; background-color: #f1f1f1; padding: 12px; .avatar { margin-right: 7px; } img {margin-top: -4px;} } } .quote-controls { float: right; color: #aaa; a { margin: 0; } .back:before, .quote-other-topic:before { display: inline-block; margin-left: 8px; color: #aaa; font-family: "FontAwesome"; position: relative; z-index: 20; } .back:before { content: "\f062"; } .quote-other-topic:before { content: "\f061"; } } .gutter { float: left; max-width: 250px; width: 15%; ul {margin: 0;} padding-left: 10px; i {font-size: 12px;} .post-links { margin-top: 3px; list-style-type: none; padding-left: 19px; position: relative; margin-left: 5px; a i { position: absolute; left: 0; margin-right: 15px; margin-bottom: 20px; } a {color: #aaa;} li {margin-bottom: 7px;} } } .topic-body { border-top: 1px solid #ddd; float: left; position: relative; width: 720px; padding: 10px 10px 15px 20px; .highlighted { background-color: lighten(yellow, 45%) !important; } } .bottom-round.contents.regular { -webkit-transition: background-color .25s linear; transition: background-color .25s linear; } .posts-wrapper { position: relative; } //columns .span14 { width: 70%; max-width: 720px; } //main content .span2 {max-width: 92px;} .span11 {width: 80%; max-width: 580px;} .span5 {max-width: 250px;} @media screen and (max-width: 966px) { .gutter {display: none;} .span14 { width: 80%; max-width: 720px; } //main content } .row:before, .row:after {display: table; content: "";} .row:after {clear: both;} .embedded-posts { h1, h2, h3 {margin: 10px 0;} &.bottom { &.hidden {display: block; opacity: 0; } } &.bottom .arrow {float: right; margin: 0 0 0 0;} &.top {margin-left: 112px;} .topic-body img {max-width: 100%; height: auto;} .topic-body, .topic-meta-data {border: none;} .row {border-top: 1px solid #ddd; padding-top: 7px;} .reply:first-of-type .row {border-top: none;} } .contents.regular { button.show-replies { background: #eee; padding-bottom: 20px; &:hover {background: #ddd; .badge-posts {color: #888;} } } &.bottom-round button.show-replies { background: #eee; margin-bottom: 0; padding-bottom: 8px; &:hover {background: #ddd; .badge-posts {color: #888;} } } } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .dropdown { position: relative; } .dropdown-toggle { *margin-bottom: -3px; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } .caret { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; margin-left: 5px; } .dropdown-menu { position: absolute; bottom: 115%; left: 0; z-index: 1000; display: none; float: left; width: 550px; padding: 4px 0; margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ddd; box-shadow: 0 1px 5px rgba(70, 70, 70, .4); background-clip: padding-box; span {font-size: 12px;} .title {font-weight: bold; display: block; font-size: 14px;} } .dropdown-menu a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #333333; } .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #ffffff; text-decoration: none; background-color: #0088cc; } .open { *z-index: 1000; } .open > .dropdown-menu { display: block; clear: both; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } #selected-posts { margin-left: 330px; width: 12%; position: fixed; z-index: 1000; left: 50%; background-color: lighten($blue, 52%); border: 1px solid lighten($blue, 40%); padding: 5px; margin-bottom: 5px; button { width: 160px; margin: 4px auto; display: inline-block; text-align: left; } &.hidden { display: none; } .controls { margin-top: 10px; } p { font-size: 13px; margin: 0 0 10px 0; } p.cancel { margin: 10px 0 0 0; } h3 { font-size: 25px; color: $black; margin-bottom: 5px; i { margin-right: 7px; } } .btn { border: none; color: $white; font-weight: normal; color: #fff; background: $btn-primary-background-color; &[href] { color: $white; } &:hover { color: #fff; background: darken($btn-primary-background-color, 12%); } &:active { @include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%)); @include box-shadow(inset 0 1px 3px rgba($black, 0.2)); color: #fff; } &[disabled] { text-shadow: 0 1px 0 rgba($black, 0.2); @include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark); @include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2))); } } } .topic-post { &.selected { article.boxed { .select-posts { button.select-post { background-color: $blue; color: $white; } } .topic-body { .contents { } .contents:after { display: none; } } } } article.boxed { position: relative; line-height: 21px; .select-posts { position: absolute; right: 5px; z-index: 490; top: 4px; button { background-color: #ddd; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; color: #999; } } } } a.attachment:before { display: inline-block; margin-right: 4px; font-family: "FontAwesome"; content: "\f019"; } .private_message .gutter, .deleted-topic .gutter,.read_restricted .gutter { position: relative; } .private_message .gutter:before, .deleted-topic .gutter:before, .read_restricted .gutter:before { display: block; position: absolute; top: 0; left: 10px; color: rgba(0,0,0,0.05); font: 90px/1 FontAwesome; content: "\f05c"; } .read_restricted .gutter:before { content: "\f0c0"; } .private_message .gutter:before { content: "\f0e0"; }