Merge pull request #1547 from awesomerobot/master
minimizing the desktop topic view, removes grey background
This commit is contained in:
Régis Hanol
commit
1cd3a461f6
|
|
@ -33,8 +33,6 @@
|
|||
color: $nav-pills-color;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-shadow: 0 1px 0 rgba($white, 0.6);
|
||||
@include border-radius-all(4px);
|
||||
&:hover {
|
||||
border-color: $nav-pills-border-color-hover;
|
||||
color: $nav-pills-color-hover;
|
||||
|
|
@ -42,11 +40,9 @@
|
|||
}
|
||||
}
|
||||
&.active > a, > a.active {
|
||||
border-color: $nav-pills-border-color-active;
|
||||
color: $nav-pills-color-active;
|
||||
text-shadow: 0 1px 0 rgba($black, 0.24);
|
||||
border-color: darken($nav-pills-background-color-active, 10%);
|
||||
color: #fff;
|
||||
background-color: $nav-pills-background-color-active;
|
||||
@include box-shadow((0 1px 3px rgba($black, 0.16), inset 0 1px 0 rgba($white, 0.22)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ $topic-list-th-background-color: #f6f6f6 !default;
|
|||
$topic-list-td-color: #808080 !default;
|
||||
$topic-list-td-border-color: #ededed !default;
|
||||
$topic-list-star-color: #eee !default;
|
||||
$topic-list-starred-color: #f7cb1d !default;
|
||||
$topic-list-starred-color: #e45735 !default;
|
||||
|
||||
// Generic
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Manifest
|
||||
//
|
||||
//= require common
|
||||
//= require ./vendor/bootstrap
|
||||
|
||||
//= require_tree ./desktop
|
||||
|
|
|
|||
|
|
@ -233,6 +233,7 @@
|
|||
|
||||
// When the post is new (new topic) the sizings are different
|
||||
&.edit-title {
|
||||
|
||||
&.open {
|
||||
height: 400px;
|
||||
}
|
||||
|
|
@ -240,6 +241,8 @@
|
|||
input#reply-title {
|
||||
padding: 7px 10px;
|
||||
margin: 6px 10px 3px 0;
|
||||
width: 400px;
|
||||
|
||||
}
|
||||
.wmd-controls {
|
||||
@include transition(top 0.3s ease);
|
||||
|
|
@ -337,10 +340,6 @@
|
|||
left: 432px;
|
||||
top: -19px;
|
||||
}
|
||||
button.btn.no-text {
|
||||
margin: 7px 0 0 5px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
|
|
@ -510,7 +509,6 @@ div.ac-wrap {
|
|||
}
|
||||
|
||||
.admin-options-form {
|
||||
margin-top: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -534,3 +532,9 @@ div.ac-wrap {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control button.btn.no-text {
|
||||
margin: 7px 0 0 5px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@
|
|||
@import "common/foundation/mixins";
|
||||
@import "common/foundation/helpers";
|
||||
|
||||
|
||||
body {
|
||||
min-width: $large-width;
|
||||
}
|
||||
|
||||
.container {
|
||||
@extend .clearfix;
|
||||
width: $large-width;
|
||||
max-width: $large-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -104,7 +105,6 @@ body {
|
|||
height: 100%;
|
||||
@include border-radius-all(5px);
|
||||
.contents {
|
||||
padding: 10px 20px 20px 20px;
|
||||
}
|
||||
&.white {
|
||||
background-color: $white;
|
||||
|
|
@ -112,7 +112,7 @@ body {
|
|||
}
|
||||
#main {
|
||||
.icon-star.starred {
|
||||
color: #fe1;
|
||||
color: #e45735;
|
||||
}
|
||||
a.star {
|
||||
display: inline-block;
|
||||
|
|
@ -124,7 +124,7 @@ body {
|
|||
content: "\f005";
|
||||
}
|
||||
&.starred {
|
||||
color: #fe1;
|
||||
color: #e45735;
|
||||
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
|
|
@ -298,3 +298,493 @@ blockquote {
|
|||
.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;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
background-color: #fcf8e3;
|
||||
border: 1px solid #fbeed5;
|
||||
border-radius: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
// List controls
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
|
||||
#list-controls {
|
||||
.nav {
|
||||
float: left;
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
}
|
||||
&.category-description {
|
||||
td {
|
||||
color: #000;
|
||||
color: $nav-pills-border-color-active;
|
||||
}
|
||||
}
|
||||
&.highlighted {
|
||||
|
|
@ -80,7 +82,7 @@
|
|||
color: $topic-list-th-color;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
@include box-shadow(inset 0 1px 0 $white);
|
||||
background: #f6f6f6;
|
||||
&:first-of-type {
|
||||
@include border-radius-all(4px 0 0 0);
|
||||
}
|
||||
|
|
@ -93,12 +95,16 @@
|
|||
color: $topic-list-td-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.star {
|
||||
width: 20px;
|
||||
padding-right: 0;
|
||||
.icon-star {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
top: -1px;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
+ .main-link {
|
||||
padding-left: 0;
|
||||
|
|
@ -192,38 +198,18 @@
|
|||
}
|
||||
|
||||
|
||||
#topic-list.categories {
|
||||
th.latest, td.latest {
|
||||
padding-left: 12px;
|
||||
}
|
||||
th.num {
|
||||
width: 45px;
|
||||
}
|
||||
.last-user-info {
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
tbody td {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.category{
|
||||
position: relative;
|
||||
width: 55%;
|
||||
.featured-users {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 3px;
|
||||
}
|
||||
.category-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.badge-category {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
#topic-list tbody tr.has-excerpt .star
|
||||
{
|
||||
|
||||
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Category list
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -339,6 +325,12 @@
|
|||
}
|
||||
#list-area {
|
||||
margin-bottom: 300px;
|
||||
|
||||
|
||||
.topic-statuses .topic-status i {font-size: 15px;}
|
||||
|
||||
|
||||
|
||||
.empty-topic-list {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,417 +1,94 @@
|
|||
/* styles that apply when viewing a topic/topic */
|
||||
|
||||
@import "common/foundation/variables";
|
||||
@import "common/foundation/mixins";
|
||||
.post-info a {color: #aaa;}
|
||||
|
||||
// Topic title
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// note that this CSS affects both the docked title and the in-page title
|
||||
#topic-title,
|
||||
.extra-info-wrapper {
|
||||
h1 {
|
||||
display: inline-block;
|
||||
max-width: 850px;
|
||||
margin-top: 5px;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.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: 2px;
|
||||
vertical-align: top;
|
||||
font-size: 23px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
.topic-meta-data-inside {
|
||||
float: right;
|
||||
margin-top: -30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
// when the H1 is docked at the top, there is less room
|
||||
// due to the username and search / notifications / etc controls
|
||||
.extra-info-wrapper {
|
||||
@include medium-width {
|
||||
h1 {
|
||||
max-width: 735px;
|
||||
}
|
||||
}
|
||||
@include small-width {
|
||||
h1 {
|
||||
max-width: 690px;
|
||||
}
|
||||
}
|
||||
.post-info {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.edits {margin-right: 5px;}
|
||||
|
||||
// Page header
|
||||
#topic-title {
|
||||
margin-bottom: 14px;
|
||||
#edit-title {
|
||||
width: 350px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
margin: -20px 0 0 0;
|
||||
line-height: 1.7em;
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
|
||||
|
||||
a.badge-category {vertical-align: top;}
|
||||
|
||||
a.edit-topic {font-size: 15px;}
|
||||
|
||||
}
|
||||
|
||||
// App header
|
||||
.extra-info-wrapper {
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
#topic-closing-info {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#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(6px);
|
||||
background-color: $quote-background;
|
||||
padding: 2px 5px;
|
||||
color: $darkish_gray;
|
||||
}
|
||||
a.mention {
|
||||
cursor: pointer;
|
||||
.clicks {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
span.spoiler {
|
||||
background-color: $black;
|
||||
color: $black;
|
||||
padding: 2px;
|
||||
@include hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
a.attachment:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f019";
|
||||
}
|
||||
.attachment + .size {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
// When we are quoting something
|
||||
aside.quote {
|
||||
border-left: 5px solid darken($quote-background, 20%);
|
||||
margin-top: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
background-color: $quote-background;
|
||||
overflow: hidden;
|
||||
&:nth-of-type(1) {
|
||||
margin: 0;
|
||||
}
|
||||
.title {
|
||||
padding: 8px 8px 0px;
|
||||
background-color: $quote-background;
|
||||
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;
|
||||
*: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;
|
||||
}
|
||||
|
||||
#topic-list {
|
||||
th {
|
||||
background-color: $topic-list-th-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-closing-info {
|
||||
margin-left: 103px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
.docked #topic-progress {
|
||||
box-shadow: 0 0 3px #aaa;
|
||||
}
|
||||
|
||||
#topic-progress-wrapper {
|
||||
position: fixed;
|
||||
width: 0;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
right: 50%;
|
||||
z-index: 500;
|
||||
margin-right: 140px;
|
||||
outline: 1px solid transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.posts .spinner {
|
||||
width: 100px;
|
||||
margin: 0 auto 30px 375px;
|
||||
|
||||
.reply-new {
|
||||
i {
|
||||
|
||||
margin-right: 5px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 3px 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.posts-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#topic-progress-wrapper.docked {
|
||||
#topic-progress {
|
||||
margin-left: 6px;
|
||||
}
|
||||
position: absolute;
|
||||
a.reply-new {color: #aaa;}
|
||||
a:hover.reply-new {color: #56aed3;
|
||||
|
||||
i {background: #e4f2f8;
|
||||
border: none;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#topic-progress {
|
||||
|
||||
box-shadow: 0 0 3px #000;
|
||||
|
||||
position: relative;
|
||||
left: 275px;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
border: none;
|
||||
background-color: $white;
|
||||
color: $darkish_gray;
|
||||
background-color: #ddd;
|
||||
color: #666;
|
||||
width: 130px;
|
||||
height: 34px;
|
||||
.nums {
|
||||
|
|
@ -430,28 +107,20 @@ kbd {
|
|||
left: 4px;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: $darkish_gray;
|
||||
width: 60px;
|
||||
text-align: left;
|
||||
color: #666;
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
right: 4px;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
@include hover {
|
||||
color: darken($darkish_gray, 10%);
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
color: lighten($darkish_gray, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:disabled {
|
||||
|
||||
cursor: default;
|
||||
color: lighten($darkish_gray, 30%);
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
|
|
@ -464,55 +133,36 @@ kbd {
|
|||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 0px;
|
||||
border-right: 1px solid $white;
|
||||
border-right: 1px solid #ccc;
|
||||
// background-color: #d4eaf4;
|
||||
// background-color: #C5E8F7;
|
||||
background-color: #C6F3B6;
|
||||
}
|
||||
}
|
||||
|
||||
#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-wrapper.docked {
|
||||
#topic-progress {
|
||||
left: 325px;
|
||||
}
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.topic-statuses .topic-status {
|
||||
padding: 0;
|
||||
i {
|
||||
margin-left: 5px !important;
|
||||
font-size:20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include small-width {
|
||||
.posts-wrapper .spinner {
|
||||
margin-left: 360px;
|
||||
}
|
||||
#topic-progress {
|
||||
left: 0;
|
||||
}
|
||||
#topic-progress-wrapper {
|
||||
right: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-invited .icon-remove {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.topic-post:last-of-type {padding-bottom: 40px;}
|
||||
|
||||
.heatmap-high {color: #f77 !important;}
|
||||
.heatmap-med {color: #a00 !important;}
|
||||
.heatmap-low {color: #700 !important;}
|
||||
|
||||
.onebox-result {margin-top: 15px;}
|
||||
.source .info {padding-right: 10px;}
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
|
||||
h3 {
|
||||
color: #666;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
|
|
@ -129,43 +130,6 @@
|
|||
@include border-radius-all(4px);
|
||||
}
|
||||
|
||||
|
||||
.about.collapsed-info {
|
||||
.controls {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
.secondary { display: none; }
|
||||
.bio { display: none; }
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
border: 2px solid white;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: #444;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -202,10 +166,12 @@
|
|||
}
|
||||
|
||||
.primary {
|
||||
margin-top: 30px;
|
||||
margin-top: 20px;
|
||||
float: left;
|
||||
width: 75%;
|
||||
|
||||
h1, h2 {margin-top: 10px;}
|
||||
|
||||
.bio {
|
||||
color: #ddd;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue