a few general fixes to the new flatter theme

This commit is contained in:
Kris Aubuchon 2013-10-20 21:59:46 -04:00
parent 88a97bcb71
commit aa42a36b8a
4 changed files with 42 additions and 20 deletions

View File

@ -5,8 +5,8 @@
// Base // Base
// -------------------------------------------------- // --------------------------------------------------
$base-font-size: 13px !default; $base-font-size: 14px !default;
$base-line-height: 18px !default; $base-line-height: 19px !default;
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$base-background-color: #eee !default; $base-background-color: #eee !default;

View File

@ -7,6 +7,8 @@
@import "common/foundation/helpers"; @import "common/foundation/helpers";
html {font-size: 14px/19px;}
body { body {
min-width: $large-width; min-width: $large-width;
} }

View File

@ -36,7 +36,7 @@ html {background-color: #fff;}
.avoid-tab {padding-top: 25px; .avoid-tab {padding-top: 25px;
.topic-meta-data-inside {margin-top: -40px;} .topic-meta-data-inside {margin-top: -30px;}
} }
.gutter { .gutter {
@ -195,7 +195,7 @@ nav.post-controls {
.reply {padding-bottom: 10px;} .reply {padding-bottom: 10px;}
.topic-body { .topic-body {
padding-top: 5px; padding-top: 7px;
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -238,6 +238,8 @@ a.star {
display: none; display: none;
} }
.topic-link {margin-left: -8px;}
.topic-summary { .topic-summary {
@ -250,6 +252,8 @@ a.star {
word-wrap: break-word; word-wrap: break-word;
} }
margin: 15px 0 20px 0; margin: 15px 0 20px 0;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -331,6 +335,15 @@ a.star {
.information { .information {
border-top: 1px solid #d1d1d2; border-top: 1px solid #d1d1d2;
} }
.participants {
.user:not(:first-of-type) {margin-top: 10px;}
}
.topic-links { .topic-links {
.badge-notification { .badge-notification {
margin: 0 0 4px; margin: 0 0 4px;
@ -410,8 +423,8 @@ span.post-count {
#topic-title { #topic-title {
z-index: 1000; z-index: 1000;
background: #eee;
padding: 20px 10px 15px 10px; padding: 20px 10px 15px 10px;
border-bottom: 1px solid #ddd;
} }
@ -421,6 +434,7 @@ span.post-count {
padding-bottom: 5px; padding-bottom: 5px;
img { img {
max-width: 100%; max-width: 100%;
height: auto;
} }
} }
@ -431,7 +445,6 @@ img {
background-color: #666; background-color: #666;
color: #fff; color: #fff;
padding: 10px; padding: 10px;
width: 90px;
&:hover { &:hover {
background-color: #999; background-color: #999;
@ -463,6 +476,7 @@ iframe {
a.star { a.star {
margin-left: 10px; margin-left: 10px;
margin-right: 8px;
margin-top: 11px !important; margin-top: 11px !important;
} }
@ -476,7 +490,7 @@ iframe {
margin-bottom: 10px; margin-bottom: 10px;
width: 92px; width: 92px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
padding-top: 35px; padding-top: 25px;
img { text-align: center; } img { text-align: center; }
.contents { .contents {
@ -603,7 +617,7 @@ h3 {
} }
.user-title { .user-title {
margin-top: -7px; margin-top: 5px;
color: #aaa; color: #aaa;
overflow: hidden; overflow: hidden;
} }
@ -645,7 +659,6 @@ blockquote {
border-left: 5px solid #bebebe; border-left: 5px solid #bebebe;
background-color: #f1f1f1; background-color: #f1f1f1;
padding: 10px 10px 0 12px; padding: 10px 10px 0 12px;
clear: both;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }
img {margin-top: -4px;} img {margin-top: -4px;}
@ -661,12 +674,12 @@ blockquote {
.gutter { .gutter {
float: left; float: left;
max-width: 250px; max-width: 250px;
width: 13%; width: 15%;
ul {margin: 0;} ul {margin: 0;}
padding-left: 20px; padding-left: 20px;
.post-links { .post-links {
margin-top: 5px; margin-top: 6px;
list-style-type: none; list-style-type: none;
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
@ -696,13 +709,13 @@ blockquote {
float: left; float: left;
position: relative; position: relative;
width: 720px; width: 720px;
padding: 20px 0 0 20px; padding: 10px 0 0 20px;
} }
.topic-post:first-of-type { .topic-post:first-of-type {
.topic-body {border: none;} .topic-body { border: none; }
.topic-meta-data {border: none;} .topic-meta-data {border: none;}
} }
@ -738,6 +751,7 @@ blockquote {
&.bottom .arrow {float: right; margin: 0 15px 0 0;} &.bottom .arrow {float: right; margin: 0 15px 0 0;}
&.top {margin-left: 112px;} &.top {margin-left: 112px;}
.topic-body img {max-width: 100%; height: auto;}
.topic-body, .topic-meta-data {border: none;} .topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid #ddd; padding-top: 7px;} .row {border-top: 1px solid #ddd; padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
@ -940,3 +954,5 @@ clear: both;
} }
} }

View File

@ -3,7 +3,7 @@
.topic-meta-data-inside { .topic-meta-data-inside {
float: right; float: right;
margin-top: -30px; margin-top: -19px;
font-size: 12px; font-size: 12px;
} }
@ -45,10 +45,9 @@ a.edit-topic {font-size: 15px;}
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
width: 0; width: 0;
right: 0; right: 29%;
bottom: 0px; bottom: 0px;
z-index: 500; z-index: 500;
margin-right: 140px;
outline: 1px solid transparent; outline: 1px solid transparent;
@ -61,8 +60,11 @@ i {
margin-right: 5px; margin-right: 5px;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 3px 4px; padding: 2px 4px;
border-radius: 20px; border-radius: 20px;
transition: linear 1s;
-webkit-transition: linear 1s;
} }
} }
@ -71,8 +73,8 @@ a.reply-new {color: #aaa;}
a:hover.reply-new {color: #56aed3; a:hover.reply-new {color: #56aed3;
i {background: #e4f2f8; i {background: #e4f2f8;
border: none; border: 1px solid #e4f2f8;
padding: 4px 5px; padding: 2px 4px;
} }
} }
@ -144,6 +146,9 @@ i {background: #e4f2f8;
#topic-progress { #topic-progress {
} }
position: absolute; position: absolute;
margin-right: -68px;
bottom: 8px;
} }
.topic-statuses .topic-status { .topic-statuses .topic-status {
@ -158,7 +163,6 @@ i {background: #e4f2f8;
.topic-post:last-of-type {padding-bottom: 40px;}
.heatmap-high {color: #f77 !important;} .heatmap-high {color: #f77 !important;}
.heatmap-med {color: #a00 !important;} .heatmap-med {color: #a00 !important;}