Redesigned the sidebar in the question list view
This commit is contained in:
kaishin
@@ -36,6 +36,8 @@ h1.top-header {
|
||||
font: bold $body-font-size $body-font-family;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
|
||||
@@ -107,6 +109,10 @@ h1.top-header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar {
|
||||
|
||||
@@ -396,27 +396,27 @@ body.anon #searchBar {
|
||||
text-align: right;
|
||||
margin: 0; } }
|
||||
h2 {
|
||||
padding-left: 0;
|
||||
/*background: #eceeeb;*/
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
/*text-align: right;*/
|
||||
/*font-size: 18px !important;*/
|
||||
font-weight: normal;
|
||||
color: #656565;
|
||||
/*padding-right: 10px;*/
|
||||
/*margin-bottom: 10px;*/
|
||||
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/
|
||||
// padding-left: 0;
|
||||
// /*background: #eceeeb;*/
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
// /*text-align: right;*/
|
||||
// /*font-size: 18px !important;*/
|
||||
// // font-weight: normal;
|
||||
// // color: #656565;
|
||||
// /*padding-right: 10px;*/
|
||||
// /*margin-bottom: 10px;*/
|
||||
// /*font-family: 'Yanone Kaffeesatz',sans-serif;*/
|
||||
}
|
||||
h3 {
|
||||
/*color: #4a757f;*/
|
||||
/*font-size: 18px;*/
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/
|
||||
padding-left: 0px; }
|
||||
.contributorback {
|
||||
background: #eceeeb url(../images/contributorsback.png) no-repeat center left; }
|
||||
// h3 {
|
||||
// /*color: #4a757f;*/
|
||||
// /*font-size: 18px;*/
|
||||
// text-align: left;
|
||||
// font-weight: normal;
|
||||
// /*font-family: 'Yanone Kaffeesatz',sans-serif;*/
|
||||
// padding-left: 0px; }
|
||||
// .contributorback {
|
||||
// background: #eceeeb url(../images/contributorsback.png) no-repeat center left; }
|
||||
// label {
|
||||
// color: #707070;
|
||||
// font-size: 15px;
|
||||
@@ -428,23 +428,23 @@ body.anon #searchBar {
|
||||
// margin-right: 18px; }
|
||||
// #displayTagFilterControl label {
|
||||
// width: 160px; }
|
||||
ul {
|
||||
margin-left: 22px; }
|
||||
li {
|
||||
list-style-type: disc;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: #707070; }
|
||||
ul.tags {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 170%;
|
||||
display: block; }
|
||||
#displayTagFilterControl p label {
|
||||
color: #707070;
|
||||
font-size: 15px; }
|
||||
// ul {
|
||||
// margin-left: 22px; }
|
||||
// li {
|
||||
// list-style-type: disc;
|
||||
// font-size: 13px;
|
||||
// line-height: 20px;
|
||||
// margin-bottom: 10px;
|
||||
// color: #707070; }
|
||||
// ul.tags {
|
||||
// list-style: none;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// line-height: 170%;
|
||||
// display: block; }
|
||||
// #displayTagFilterControl p label {
|
||||
// color: #707070;
|
||||
// font-size: 15px; }
|
||||
/*.inputs {
|
||||
#interestingTagInput, #ignoredTagInput {
|
||||
width: 153px;
|
||||
@@ -474,47 +474,47 @@ body.anon #searchBar {
|
||||
box-shadow: 1px 1px 2px #808080; }
|
||||
#interestingTagAdd:hover, #ignoredTagAdd:hover {
|
||||
background: url(../images/small-button-blue.png) repeat-x bottom; } }*/
|
||||
img.gravatar {
|
||||
margin: 1px; }
|
||||
a {
|
||||
&.followed, &.follow {
|
||||
background: url(../images/medium-button.png) top repeat-x;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
font-family: 'Yanone Kaffeesatz',sans-serif;
|
||||
color: #4a757f;
|
||||
font-weight: normal;
|
||||
font-size: 21px;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
width: 120px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
-webkit-box-shadow: 1px 1px 2px #636363;
|
||||
-moz-box-shadow: 1px 1px 2px #636363;
|
||||
box-shadow: 1px 1px 2px #636363;
|
||||
margin: 0 auto;
|
||||
padding: 0; }
|
||||
&.followed:hover, &.follow:hover {
|
||||
text-decoration: none;
|
||||
background: url(../images/medium-button.png) bottom repeat-x;
|
||||
text-shadow: 0px 1px 0px #c6d9dd;
|
||||
-moz-text-shadow: 0px 1px 0px #c6d9dd;
|
||||
-webkit-text-shadow: 0px 1px 0px #c6d9dd; }
|
||||
&.followed {
|
||||
div.unfollow {
|
||||
display: none; }
|
||||
&:hover div {
|
||||
display: none;
|
||||
&.unfollow {
|
||||
display: inline;
|
||||
color: #a05736; } } } }
|
||||
// img.gravatar {
|
||||
// margin: 1px; }
|
||||
// a {
|
||||
// &.followed, &.follow {
|
||||
// background: url(../images/medium-button.png) top repeat-x;
|
||||
// height: 34px;
|
||||
// line-height: 34px;
|
||||
// text-align: center;
|
||||
// border: 0;
|
||||
// font-family: 'Yanone Kaffeesatz',sans-serif;
|
||||
// color: #4a757f;
|
||||
// font-weight: normal;
|
||||
// font-size: 21px;
|
||||
// margin-top: 3px;
|
||||
// display: block;
|
||||
// width: 120px;
|
||||
// text-decoration: none;
|
||||
// border-radius: 4px;
|
||||
// -ms-border-radius: 4px;
|
||||
// -moz-border-radius: 4px;
|
||||
// -webkit-border-radius: 4px;
|
||||
// -khtml-border-radius: 4px;
|
||||
// -webkit-box-shadow: 1px 1px 2px #636363;
|
||||
// -moz-box-shadow: 1px 1px 2px #636363;
|
||||
// box-shadow: 1px 1px 2px #636363;
|
||||
// margin: 0 auto;
|
||||
// padding: 0; }
|
||||
// &.followed:hover, &.follow:hover {
|
||||
// text-decoration: none;
|
||||
// background: url(../images/medium-button.png) bottom repeat-x;
|
||||
// text-shadow: 0px 1px 0px #c6d9dd;
|
||||
// -moz-text-shadow: 0px 1px 0px #c6d9dd;
|
||||
// -webkit-text-shadow: 0px 1px 0px #c6d9dd; }
|
||||
// &.followed {
|
||||
// div.unfollow {
|
||||
// display: none; }
|
||||
// &:hover div {
|
||||
// display: none;
|
||||
// &.unfollow {
|
||||
// display: inline;
|
||||
// color: #a05736; } } } }
|
||||
.favorite-number {
|
||||
padding: 5px 0 0 5px;
|
||||
font-size: 100%;
|
||||
@@ -839,35 +839,35 @@ body.anon #searchBar {
|
||||
.paginator-container-left {
|
||||
padding: 5px 0 10px 0; } }
|
||||
|
||||
.tag-size-1 {
|
||||
font-size: 12px; }
|
||||
// .tag-size-1 {
|
||||
// font-size: 12px; }
|
||||
|
||||
.tag-size-2 {
|
||||
font-size: 13px; }
|
||||
// .tag-size-2 {
|
||||
// font-size: 13px; }
|
||||
|
||||
.tag-size-3 {
|
||||
font-size: 14px; }
|
||||
// .tag-size-3 {
|
||||
// font-size: 14px; }
|
||||
|
||||
.tag-size-4 {
|
||||
font-size: 15px; }
|
||||
// .tag-size-4 {
|
||||
// font-size: 15px; }
|
||||
|
||||
.tag-size-5 {
|
||||
font-size: 16px; }
|
||||
// .tag-size-5 {
|
||||
// font-size: 16px; }
|
||||
|
||||
.tag-size-6 {
|
||||
font-size: 17px; }
|
||||
// .tag-size-6 {
|
||||
// font-size: 17px; }
|
||||
|
||||
.tag-size-7 {
|
||||
font-size: 18px; }
|
||||
// .tag-size-7 {
|
||||
// font-size: 18px; }
|
||||
|
||||
.tag-size-8 {
|
||||
font-size: 19px; }
|
||||
// .tag-size-8 {
|
||||
// font-size: 19px; }
|
||||
|
||||
.tag-size-9 {
|
||||
font-size: 20px; }
|
||||
// .tag-size-9 {
|
||||
// font-size: 20px; }
|
||||
|
||||
.tag-size-10 {
|
||||
font-size: 21px; }
|
||||
// .tag-size-10 {
|
||||
// font-size: 21px; }
|
||||
|
||||
// ul {
|
||||
// &.tags {
|
||||
@@ -895,29 +895,29 @@ body.anon #searchBar {
|
||||
// padding: 0;
|
||||
// height: 20px; } }
|
||||
|
||||
.wildcard-tags {
|
||||
clear: both; }
|
||||
// .wildcard-tags {
|
||||
// clear: both; }
|
||||
|
||||
ul.tags.marked-tags li, .wildcard-tags ul.tags li {
|
||||
margin-bottom: 5px; }
|
||||
// ul.tags.marked-tags li, .wildcard-tags ul.tags li {
|
||||
// margin-bottom: 5px; }
|
||||
|
||||
#tagSelector div.inputs {
|
||||
clear: both;
|
||||
float: none;
|
||||
margin-bottom: 10px; }
|
||||
// #tagSelector div.inputs {
|
||||
// clear: both;
|
||||
// float: none;
|
||||
// margin-bottom: 10px; }
|
||||
|
||||
.tags-page ul.tags li {
|
||||
width: 160px;
|
||||
margin: 5px; }
|
||||
// .tags-page ul.tags li {
|
||||
// width: 160px;
|
||||
// margin: 5px; }
|
||||
|
||||
ul {
|
||||
&#ab-user-tags li {
|
||||
width: 160px;
|
||||
margin: 5px; }
|
||||
&#related-tags li {
|
||||
margin: 0 5px 8px 0;
|
||||
float: left;
|
||||
clear: left; } }
|
||||
// ul {
|
||||
// &#ab-user-tags li {
|
||||
// width: 160px;
|
||||
// margin: 5px; }
|
||||
// &#related-tags li {
|
||||
// margin: 0 5px 8px 0;
|
||||
// float: left;
|
||||
// clear: left; } }
|
||||
|
||||
// .tag-left {
|
||||
// cursor: pointer;
|
||||
@@ -949,28 +949,28 @@ ul {
|
||||
// font-family: Arial;
|
||||
// color: #717179; }
|
||||
|
||||
.deletable-tag {
|
||||
margin-right: 3px;
|
||||
white-space: nowrap;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-webkit-border-top-right-radius: 4px; }
|
||||
// .deletable-tag {
|
||||
// margin-right: 3px;
|
||||
// white-space: nowrap;
|
||||
// border-top-right-radius: 4px;
|
||||
// border-bottom-right-radius: 4px;
|
||||
// -moz-border-radius-topright: 4px;
|
||||
// -moz-border-radius-bottomright: 4px;
|
||||
// -webkit-border-bottom-right-radius: 4px;
|
||||
// -webkit-border-top-right-radius: 4px; }
|
||||
|
||||
.tags {
|
||||
a.tag-right, span.tag-right {
|
||||
color: #585858;
|
||||
text-decoration: none; }
|
||||
a:hover {
|
||||
color: #1A1A1A; } }
|
||||
// .tags {
|
||||
// a.tag-right, span.tag-right {
|
||||
// color: #585858;
|
||||
// text-decoration: none; }
|
||||
// a:hover {
|
||||
// color: #1A1A1A; } }
|
||||
|
||||
.users-page h1, .tags-page h1 {
|
||||
float: left; }
|
||||
// .users-page h1, .tags-page h1 {
|
||||
// float: left; }
|
||||
|
||||
.main-page h1 {
|
||||
margin-right: 5px; }
|
||||
// .main-page h1 {
|
||||
// margin-right: 5px; }
|
||||
|
||||
// .delete-icon {
|
||||
// margin-top: -1px;
|
||||
@@ -997,22 +997,22 @@ ul {
|
||||
// &:hover {
|
||||
// background: #b32f2f; } }
|
||||
|
||||
.tag-number {
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
color: #5d5d5d; }
|
||||
// .tag-number {
|
||||
// font-weight: normal;
|
||||
// float: left;
|
||||
// font-size: 16px;
|
||||
// color: #5d5d5d; }
|
||||
|
||||
.badges .tag-number {
|
||||
float: none;
|
||||
display: inline;
|
||||
padding-right: 15px; }
|
||||
// .badges .tag-number {
|
||||
// float: none;
|
||||
// display: inline;
|
||||
// padding-right: 15px; }
|
||||
|
||||
.section-title {
|
||||
color: #7ea9b3;
|
||||
font-family: 'Yanone Kaffeesatz',sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 24px; }
|
||||
// .section-title {
|
||||
// color: #7ea9b3;
|
||||
// font-family: 'Yanone Kaffeesatz',sans-serif;
|
||||
// font-weight: bold;
|
||||
// font-size: 24px; }
|
||||
|
||||
// #fmask {
|
||||
// margin-bottom: 30px;
|
||||
@@ -1841,9 +1841,9 @@ ul {
|
||||
margin-right: 4px;
|
||||
display: inline; } }
|
||||
|
||||
.tabBar-tags {
|
||||
width: 270px;
|
||||
margin-bottom: 15px; }
|
||||
// .tabBar-tags {
|
||||
// width: 270px;
|
||||
// margin-bottom: 15px; }
|
||||
|
||||
a {
|
||||
&.medal {
|
||||
@@ -2100,10 +2100,10 @@ a {
|
||||
font-weight: bold;
|
||||
font-family: sans-serif; } }
|
||||
|
||||
del {
|
||||
color: #C34719;
|
||||
.post-tag {
|
||||
color: #C34719; } }
|
||||
// del {
|
||||
// color: #C34719;
|
||||
// .post-tag {
|
||||
// color: #C34719; } }
|
||||
|
||||
ins {
|
||||
.post-tag, p {
|
||||
@@ -2274,8 +2274,8 @@ label.retag-error {
|
||||
font-weight: bold;
|
||||
text-decoration: none; }
|
||||
|
||||
.narrow .tags {
|
||||
float: left; }
|
||||
// .narrow .tags {
|
||||
// float: left; }
|
||||
|
||||
.user-action-1 {
|
||||
font-weight: bold;
|
||||
@@ -2518,25 +2518,25 @@ ul.form-horizontal-rows {
|
||||
font-weight: bold;
|
||||
vertical-align: top; }
|
||||
|
||||
ul {
|
||||
&.post-tags {
|
||||
margin-left: 3px;
|
||||
li {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 3px; } }
|
||||
&.post-retag {
|
||||
margin-bottom: 0px;
|
||||
margin-left: 5px; } }
|
||||
// ul {
|
||||
// &.post-tags {
|
||||
// margin-left: 3px;
|
||||
// li {
|
||||
// margin-top: 4px;
|
||||
// margin-bottom: 3px; } }
|
||||
// &.post-retag {
|
||||
// margin-bottom: 0px;
|
||||
// margin-left: 5px; } }
|
||||
|
||||
#question-controls .tags {
|
||||
margin: 0 0 3px 0; }
|
||||
// #question-controls .tags {
|
||||
// margin: 0 0 3px 0; }
|
||||
|
||||
#tagSelector {
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 0; }
|
||||
// #tagSelector {
|
||||
// padding-bottom: 2px;
|
||||
// margin-bottom: 0; }
|
||||
|
||||
#related-tags {
|
||||
padding-left: 3px; }
|
||||
// #related-tags {
|
||||
// padding-left: 3px; }
|
||||
|
||||
#hideIgnoredTagsControl {
|
||||
margin: 5px 0 0 0;
|
||||
@@ -2666,8 +2666,8 @@ a.edit {
|
||||
.pln {
|
||||
color: #000; }
|
||||
|
||||
.tag {
|
||||
color: #008; }
|
||||
// .tag {
|
||||
// color: #008; }
|
||||
|
||||
.atn {
|
||||
color: #606; }
|
||||
|
||||
@@ -72,30 +72,6 @@ div.question-list-header {
|
||||
|
||||
div.tags-list {
|
||||
|
||||
ul.tags {
|
||||
display: inline;
|
||||
|
||||
li {
|
||||
span.delete-icon, div.delete-icon {
|
||||
@include border-radius(0 4px 4px 0);
|
||||
background: #555;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
float: none;
|
||||
display: inline;
|
||||
clear: none;
|
||||
left: 10px;
|
||||
padding: 3px 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
div.discussion-wrapper aside {
|
||||
@extend .sidebar;
|
||||
@include box-shadow(inset 1px 0 0 #f6f6f6);
|
||||
@@ -7,8 +8,13 @@ div.discussion-wrapper aside {
|
||||
padding: lh();
|
||||
width: flex-grid(3);
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
color: #4D4D4D;
|
||||
|
||||
&.first {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -20,14 +26,60 @@ div.discussion-wrapper aside {
|
||||
width: 76%;
|
||||
}
|
||||
|
||||
div.box {
|
||||
@include box-shadow(0 1px 0 #eee);
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
display: block;
|
||||
padding-bottom: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
@include box-shadow(none);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.contributors {
|
||||
|
||||
a {
|
||||
@include border-radius(3px);
|
||||
border: 1px solid #888;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include border-radius(3px);
|
||||
@include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
|
||||
top: 1px; left: 1px; bottom: 1px; right: 1px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
img.gravatar {
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
&.tag-selector {
|
||||
ul {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#displayTagFilterControl {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.search-box {
|
||||
input {
|
||||
@include box-sizing(border-box);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
@include box-shadow(none);
|
||||
opacity: 0.5;
|
||||
@@ -49,7 +101,37 @@ div.discussion-wrapper aside {
|
||||
|
||||
input#keywords {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input#clear {
|
||||
@include box-shadow(none);
|
||||
@include border-radius(5px);
|
||||
border: none;
|
||||
background: $mit-red;
|
||||
color: #fff;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
margin-left: -25px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Question view sopecific
|
||||
|
||||
div.follow-buttons {
|
||||
margin: 20px 0;
|
||||
display: block;
|
||||
|
||||
a.button {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
ul.tags {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
li, a {
|
||||
position: relative;
|
||||
}
|
||||
@@ -7,21 +8,56 @@ ul.tags {
|
||||
@include border-radius(4px);
|
||||
background: #eee;
|
||||
color: #555;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
padding: 3px 10px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:-11px;
|
||||
width:0;
|
||||
height:0;
|
||||
border-color:transparent #eee transparent transparent;
|
||||
border-style:solid;
|
||||
border-width:12px 12px 12px 0;
|
||||
content:"";
|
||||
height:0;
|
||||
left:-11px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:0;
|
||||
}
|
||||
|
||||
span.delete-icon, div.delete-icon {
|
||||
@include border-radius(0 4px 4px 0);
|
||||
background: #555;
|
||||
clear: none;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
float: none;
|
||||
left: 10px;
|
||||
opacity: 0.5;
|
||||
padding: 3px 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.tag-number {
|
||||
@include border-radius(3px);
|
||||
background: #555;
|
||||
font-size: 10px;
|
||||
margin: 0 3px;
|
||||
padding: 2px 5px;
|
||||
color: #eee;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user