From ceb8d4bf5b19b66d3ab2fdfe0ffa6681eb6b9f77 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 3 Apr 2012 16:47:56 -0400 Subject: [PATCH] fix some small css bugs in askbot --- static/css/application.css | 86 +++++++++++----------- templates/sass/base/_extends.scss | 30 ++++++++ templates/sass/discussion/_discussion.scss | 31 -------- templates/sass/discussion/_questions.scss | 4 +- templates/sass/discussion/_sidebar.scss | 2 + 5 files changed, 77 insertions(+), 76 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 0881442571..8df537fd13 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -177,6 +177,46 @@ h1.top-header, div.course-wrapper section.course-content h1, div.info-wrapper se background-image: linear-gradient(top, #a2a2a2, #7b7b7b); border: 1px solid #555555; } +.light-button, div.history-controls input[type="submit"], body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa, div.discussion-wrapper aside div.view-profile a, ul.question-list div.post-own-question a, div#question-list div.post-own-question a, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator span.next, div.paginator span.prev, form.answer-form div.preview-toggle a, form.question-form div.preview-toggle a, a.light-button, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, div.discussion-wrapper aside div.view-profile a, ul.question-list div.post-own-question a, div#question-list div.post-own-question a, form.answer-form div.preview-toggle a, form.question-form div.preview-toggle a { + -webkit-box-shadow: inset 0 1px 0 white; + -moz-box-shadow: inset 0 1px 0 white; + box-shadow: inset 0 1px 0 white; + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, white, #eeeeee); + background-image: -moz-linear-gradient(top, white, #eeeeee); + background-image: -ms-linear-gradient(top, white, #eeeeee); + background-image: -o-linear-gradient(top, white, #eeeeee); + background-image: linear-gradient(top, white, #eeeeee); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + border: 1px solid #ccc; + padding: 4px 8px; + color: #666; + font: normal 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; } +.light-button:hover, div.history-controls input[type="submit"]:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa:hover, div.discussion-wrapper aside div.view-profile a:hover, ul.question-list div.post-own-question a:hover, div#question-list div.post-own-question a:hover, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator span.next:hover, div.paginator span.prev:hover, form.answer-form div.preview-toggle a:hover, form.question-form div.preview-toggle a:hover, .light-button:focus, div.history-controls input[type="submit"]:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa:focus, div.discussion-wrapper aside div.view-profile a:focus, ul.question-list div.post-own-question a:focus, div#question-list div.post-own-question a:focus, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator span.next:focus, div.paginator span.prev:focus, form.answer-form div.preview-toggle a:focus, form.question-form div.preview-toggle a:focus, a.light-button:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, div.discussion-wrapper aside div.view-profile a:hover, ul.question-list div.post-own-question a:hover, div#question-list div.post-own-question a:hover, form.answer-form div.preview-toggle a:hover, form.question-form div.preview-toggle a:hover, a.light-button:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, div.discussion-wrapper aside div.view-profile a:focus, ul.question-list div.post-own-question a:focus, div#question-list div.post-own-question a:focus, form.answer-form div.preview-toggle a:focus, form.question-form div.preview-toggle a:focus { + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e6e6e6)); + background-image: -webkit-linear-gradient(top, white, #e6e6e6); + background-image: -moz-linear-gradient(top, white, #e6e6e6); + background-image: -ms-linear-gradient(top, white, #e6e6e6); + background-image: -o-linear-gradient(top, white, #e6e6e6); + background-image: linear-gradient(top, white, #e6e6e6); + border: 1px solid #ccc; + text-decoration: none; } + +.action-link a, div.question-list-header section.question-list-meta div.question-sort nav a, div.answer-controls div.answer-sort nav a { + color: #993333; } +.action-link a:hover, div.question-list-header section.question-list-meta div.question-sort nav a:hover, div.answer-controls div.answer-sort nav a:hover { + text-decoration: none; + color: #4d1919; } + .content, div.course-wrapper section.course-content, div.book-wrapper section.book, div.info-wrapper section.updates, div.profile-wrapper section.course-info, div.gradebook-wrapper section.gradebook-content, div.wiki-wrapper section.wiki-body { -webkit-box-shadow: inset 0 0 2px 3px #f3f3f3; -moz-box-shadow: inset 0 0 2px 3px #f3f3f3; @@ -4975,46 +5015,6 @@ pre.prettyprint { padding: 3px; border: 0px solid #888; } -.light-button, div.history-controls input[type="submit"], body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa, ul.question-list div.post-own-question a, div#question-list div.post-own-question a, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:last-child, div.paginator span.next, div.paginator span.prev, form.answer-form div.preview-toggle a, form.question-form div.preview-toggle a, a.light-button, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, ul.question-list div.post-own-question a, div#question-list div.post-own-question a, form.answer-form div.preview-toggle a, form.question-form div.preview-toggle a { - -webkit-box-shadow: inset 0 1px 0 white; - -moz-box-shadow: inset 0 1px 0 white; - box-shadow: inset 0 1px 0 white; - background-color: white; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, white, #eeeeee); - background-image: -moz-linear-gradient(top, white, #eeeeee); - background-image: -ms-linear-gradient(top, white, #eeeeee); - background-image: -o-linear-gradient(top, white, #eeeeee); - background-image: linear-gradient(top, white, #eeeeee); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - border: 1px solid #ccc; - padding: 4px 8px; - color: #666; - font: normal 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - text-decoration: none; - cursor: pointer; - -webkit-font-smoothing: antialiased; } -.light-button:hover, div.history-controls input[type="submit"]:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa:hover, ul.question-list div.post-own-question a:hover, div#question-list div.post-own-question a:hover, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:hover:last-child, div.paginator span.next:hover, div.paginator span.prev:hover, form.answer-form div.preview-toggle a:hover, form.question-form div.preview-toggle a:hover, .light-button:focus, div.history-controls input[type="submit"]:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content .tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content .tabula-rasa:focus, ul.question-list div.post-own-question a:focus, div#question-list div.post-own-question a:focus, div.question-header div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.question-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.answer-block div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.answer-block div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.question-header div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.question-header div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator div.answer-container div.comments-container div.comments-content form.post-comments button:focus:last-child, div.paginator span.next:focus, div.paginator span.prev:focus, form.answer-form div.preview-toggle a:focus, form.question-form div.preview-toggle a:focus, a.light-button:hover, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:hover, ul.question-list div.post-own-question a:hover, div#question-list div.post-own-question a:hover, form.answer-form div.preview-toggle a:hover, form.question-form div.preview-toggle a:hover, a.light-button:focus, body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa:focus, ul.question-list div.post-own-question a:focus, div#question-list div.post-own-question a:focus, form.answer-form div.preview-toggle a:focus, form.question-form div.preview-toggle a:focus { - background-color: white; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e6e6e6)); - background-image: -webkit-linear-gradient(top, white, #e6e6e6); - background-image: -moz-linear-gradient(top, white, #e6e6e6); - background-image: -ms-linear-gradient(top, white, #e6e6e6); - background-image: -o-linear-gradient(top, white, #e6e6e6); - background-image: linear-gradient(top, white, #e6e6e6); - border: 1px solid #ccc; - text-decoration: none; } - -.action-link a, div.question-list-header section.question-list-meta div.question-sort nav a, div.answer-controls div.answer-sort nav a { - color: #993333; } -.action-link a:hover, div.question-list-header section.question-list-meta div.question-sort nav a:hover, div.answer-controls div.answer-sort nav a:hover { - text-decoration: none; - color: #4d1919; } - body.askbot section.main-content div.discussion-wrapper div.discussion-content, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -5337,7 +5337,7 @@ div.question-list-header { width: 100%; } div.question-list-header h1 { margin: 0; } -div.question-list-header h1 > a.light-button, div.question-list-header h1 > body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, body.askbot section.main-content div.discussion-wrapper div.discussion-content div.question-list-header h1 > a.tabula-rasa, div.question-list-header h1 > html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content div.question-list-header h1 > a.tabula-rasa, div.question-list-header h1 > ul.question-list div.post-own-question a, ul.question-list div.post-own-question div.question-list-header h1 > a, div.question-list-header h1 > div#question-list div.post-own-question a, div#question-list div.post-own-question div.question-list-header h1 > a, div.question-list-header h1 > form.answer-form div.preview-toggle a, form.answer-form div.preview-toggle div.question-list-header h1 > a, div.question-list-header h1 > form.question-form div.preview-toggle a, form.question-form div.preview-toggle div.question-list-header h1 > a { +div.question-list-header h1 > a.light-button, div.question-list-header h1 > body.askbot section.main-content div.discussion-wrapper div.discussion-content a.tabula-rasa, body.askbot section.main-content div.discussion-wrapper div.discussion-content div.question-list-header h1 > a.tabula-rasa, div.question-list-header h1 > html body.askbot section.outside-app div.discussion-wrapper div.discussion-content a.tabula-rasa, html body.askbot section.outside-app div.discussion-wrapper div.discussion-content div.question-list-header h1 > a.tabula-rasa, div.question-list-header h1 > div.discussion-wrapper aside div.view-profile a, div.discussion-wrapper aside div.view-profile div.question-list-header h1 > a, div.question-list-header h1 > ul.question-list div.post-own-question a, ul.question-list div.post-own-question div.question-list-header h1 > a, div.question-list-header h1 > div#question-list div.post-own-question a, div#question-list div.post-own-question div.question-list-header h1 > a, div.question-list-header h1 > form.answer-form div.preview-toggle a, form.answer-form div.preview-toggle div.question-list-header h1 > a, div.question-list-header h1 > form.question-form div.preview-toggle a, form.question-form div.preview-toggle div.question-list-header h1 > a { float: right; } div.question-list-header section.question-list-meta { display: block; @@ -5389,8 +5389,8 @@ ul.question-list, div#question-list { ul.question-list li.single-question, div#question-list li.single-question { border-bottom: 1px solid #eee; list-style: none; - padding: 10px 3%; - margin-left: -3%; + padding: 10px 22.652px; + margin-left: -22.652px; width: 100%; } ul.question-list li.single-question:hover, div#question-list li.single-question:hover { background: #F3F3F3; } diff --git a/templates/sass/base/_extends.scss b/templates/sass/base/_extends.scss index aa9e4e65dc..df4d5941eb 100644 --- a/templates/sass/base/_extends.scss +++ b/templates/sass/base/_extends.scss @@ -46,6 +46,36 @@ h1.top-header { } } +.light-button, a.light-button { + @include box-shadow(inset 0 1px 0 #fff); + @include linear-gradient(#fff, lighten(#888, 40%)); + @include border-radius(3px); + border: 1px solid #ccc; + padding: 4px 8px; + color: #666; + font: normal $body-font-size $body-font-family; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; + + &:hover, &:focus { + @include linear-gradient(#fff, lighten(#888, 37%)); + border: 1px solid #ccc; + text-decoration: none; + } +} + +.action-link { + a { + color: $mit-red; + + &:hover { + text-decoration: none; + color: darken($mit-red, 20%); + } + } +} + .content { @include box-shadow(inset 0 0 2px 3px #f3f3f3); @include box-sizing(border-box); diff --git a/templates/sass/discussion/_discussion.scss b/templates/sass/discussion/_discussion.scss index 42d8350fef..be2379cb57 100644 --- a/templates/sass/discussion/_discussion.scss +++ b/templates/sass/discussion/_discussion.scss @@ -1,34 +1,3 @@ -// Base extends (Merge with main stylesheet later) -.light-button, a.light-button { - @include box-shadow(inset 0 1px 0 #fff); - @include linear-gradient(#fff, lighten(#888, 40%)); - @include border-radius(3px); - border: 1px solid #ccc; - padding: 4px 8px; - color: #666; - font: normal $body-font-size $body-font-family; - text-decoration: none; - cursor: pointer; - -webkit-font-smoothing: antialiased; - - &:hover, &:focus { - @include linear-gradient(#fff, lighten(#888, 37%)); - border: 1px solid #ccc; - text-decoration: none; - } - -} -.action-link { - a { - color: $mit-red; - - &:hover { - text-decoration: none; - color: darken($mit-red, 20%); - } - } -} - // Layout body.askbot { diff --git a/templates/sass/discussion/_questions.scss b/templates/sass/discussion/_questions.scss index 3a7ab2f7c1..26bb270d2d 100644 --- a/templates/sass/discussion/_questions.scss +++ b/templates/sass/discussion/_questions.scss @@ -105,8 +105,8 @@ ul.question-list, div#question-list { li.single-question { border-bottom: 1px solid #eee; list-style: none; - padding: 10px 3%; - margin-left: -3%; + padding: 10px lh(); + margin-left: (-(lh())); width: 100%; &:hover { diff --git a/templates/sass/discussion/_sidebar.scss b/templates/sass/discussion/_sidebar.scss index fb007bab3b..c8a4f49a39 100644 --- a/templates/sass/discussion/_sidebar.scss +++ b/templates/sass/discussion/_sidebar.scss @@ -288,6 +288,7 @@ div.discussion-wrapper aside { border-top: 0; @include box-shadow(none); } + a { width: 100%; @include box-sizing(border-box); @@ -295,6 +296,7 @@ div.discussion-wrapper aside { padding: 10px; display: block; margin-top: 10px; + @extend .light-button; &:first-child { margin-top: 0;