diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 235e2e3277..8d0c4ac522 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -14,7 +14,7 @@ div.video { section.video-player { height: 0; - overflow: hidden; + // overflow: hidden; padding-bottom: 56.25%; position: relative; @@ -45,12 +45,13 @@ div.video { div.slider { @extend .clearfix; background: #c2c2c2; - border: none; - border-bottom: 1px solid #000; + border: 1px solid #000; @include border-radius(0); border-top: 1px solid #000; @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); height: 7px; + margin-left: -1px; + margin-right: -1px; @include transition(height 2.0s ease-in-out); div.ui-widget-header { @@ -58,43 +59,12 @@ div.video { @include box-shadow(inset 0 1px 0 #999); } - .ui-tooltip.qtip .ui-tooltip-content { - background: $mit-red; - border: 1px solid darken($mit-red, 20%); - @include border-radius(2px); - @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); - color: #fff; - font: bold 12px $body-font-family; - margin-bottom: 6px; - margin-right: 0; - overflow: visible; - padding: 4px; - text-align: center; - text-shadow: 0 -1px 0 darken($mit-red, 10%); - -webkit-font-smoothing: antialiased; - - &::after { - background: $mit-red; - border-bottom: 1px solid darken($mit-red, 20%); - border-right: 1px solid darken($mit-red, 20%); - bottom: -5px; - content: " "; - display: block; - height: 7px; - left: 50%; - margin-left: -3px; - position: absolute; - @include transform(rotate(45deg)); - width: 7px; - } - } - a.ui-slider-handle { - background: $mit-red url(../images/slider-handle.png) center center no-repeat; + background: $pink url(../images/slider-handle.png) center center no-repeat; @include background-size(50%); - border: 1px solid darken($mit-red, 20%); + border: 1px solid darken($pink, 20%); @include border-radius(15px); - @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); + @include box-shadow(inset 0 1px 0 lighten($pink, 10%)); cursor: pointer; height: 15px; margin-left: -7px; @@ -103,7 +73,7 @@ div.video { width: 15px; &:focus, &:hover { - background-color: lighten($mit-red, 10%); + background-color: lighten($pink, 10%); outline: none; } } diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index cc1b49a0a2..c874076a31 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -7,6 +7,7 @@ @import 'base/base'; @import 'base/extends'; @import 'base/animations'; +@import 'shared/tooltips'; // Course base / layout styles @import 'course/layout/courseware_subnav'; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 1dac5354b6..1651ad4da8 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -15,15 +15,15 @@ div.info-wrapper { > ol { list-style: none; - padding-left: 0; margin-bottom: lh(); + padding-left: 0; > li { @extend .clearfix; border-bottom: 1px solid lighten($border-color, 10%); + list-style-type: disk; margin-bottom: lh(); padding-bottom: lh(.5); - list-style-type: disk; &:first-child { margin: 0 (-(lh(.5))) lh(); @@ -41,10 +41,10 @@ div.info-wrapper { h2 { float: left; - margin: 0 flex-gutter() 0 0; - width: flex-grid(2, 9); font-size: $body-font-size; font-weight: bold; + margin: 0 flex-gutter() 0 0; + width: flex-grid(2, 9); } section.update-description { @@ -68,15 +68,15 @@ div.info-wrapper { section.handouts { @extend .sidebar; - border-left: 1px solid #d3d3d3; + border-left: 1px solid $border-color; @include border-radius(0 4px 4px 0); - @include box-shadow(none); border-right: 0; + @include box-shadow(none); h1 { @extend .bottom-border; - padding: lh(.5) lh(.5); margin-bottom: 0; + padding: lh(.5) lh(.5); } ol { @@ -90,8 +90,9 @@ div.info-wrapper { &.expandable, &.collapsable { h4 { - font-weight: normal; + color: $blue; font-size: 1em; + font-weight: normal; padding: lh(.25) 0 lh(.25) lh(1.5); } } @@ -145,7 +146,8 @@ div.info-wrapper { filter: alpha(opacity=60); + h4 { - background-color: #e3e3e3; + @extend a:hover; + text-decoration: underline; } } diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index cd68b4bbaf..034e047754 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -3,6 +3,7 @@ body { } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { + text-align: left; font-family: $sans-serif; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 7b3e1cba84..c5e61f593e 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -25,24 +25,12 @@ h1.top-header { } } -.action-link { - a { - color: $mit-red; - - &:hover { - color: darken($mit-red, 20%); - text-decoration: none; - } - } -} - .content { @include box-sizing(border-box); display: table-cell; padding: lh(); vertical-align: top; width: flex-grid(9) + flex-gutter(); - overflow: hidden; @media print { @include box-shadow(none); @@ -164,7 +152,6 @@ h1.top-header { .topbar { @extend .clearfix; border-bottom: 1px solid $border-color; - font-size: 14px; @media print { display: none; @@ -193,17 +180,17 @@ h1.top-header { h2 { display: block; - width: 700px; float: left; font-size: 0.9em; font-weight: 600; - line-height: 40px; letter-spacing: 0; - text-transform: none; - text-shadow: 0 1px 0 #fff; - white-space: nowrap; - text-overflow: ellipsis; + line-height: 40px; overflow: hidden; + text-overflow: ellipsis; + text-shadow: 0 1px 0 #fff; + text-transform: none; + white-space: nowrap; + width: 700px; .provider { font: inherit; @@ -211,4 +198,4 @@ h1.top-header { color: #6d6d6d; } } -} \ No newline at end of file +} diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index fa3e844e88..198902c146 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -146,13 +146,13 @@ div.course-wrapper { @include border-radius(0); a.ui-slider-handle { - @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); + @include box-shadow(inset 0 1px 0 lighten($pink, 10%)); background: $mit-red url(../images/slider-bars.png) center center no-repeat; - border: 1px solid darken($mit-red, 20%); + border: 1px solid darken($pink, 20%); cursor: pointer; &:hover, &:focus { - background-color: lighten($mit-red, 10%); + background-color: lighten($pink, 10%); outline: none; } } diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 7f24659533..51e9cbd90d 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -13,7 +13,7 @@ section.course-index { div#accordion { h3 { @include border-radius(0); - border-top: 1px solid #e3e3e3; + border-top: 1px solid lighten($border-color, 10%); font-size: em(16, 18); margin: 0; overflow: hidden; @@ -34,6 +34,7 @@ section.course-index { } &.ui-accordion-header { + border-bottom: none; color: #000; a { diff --git a/lms/static/sass/course/discussion/_answers.scss b/lms/static/sass/course/discussion/_answers.scss index f0de650206..8ab22aa833 100644 --- a/lms/static/sass/course/discussion/_answers.scss +++ b/lms/static/sass/course/discussion/_answers.scss @@ -17,7 +17,6 @@ div.answer-controls { margin-left: flex-gutter(); nav { - @extend .action-link; float: right; margin-top: 34px; @@ -144,7 +143,7 @@ div.answer-actions { text-decoration: none; &.question-delete { - // color: $mit-red; + color: $mit-red; } } } diff --git a/lms/static/sass/course/discussion/_forms.scss b/lms/static/sass/course/discussion/_forms.scss index 3d484729b1..ae02ab3b20 100644 --- a/lms/static/sass/course/discussion/_forms.scss +++ b/lms/static/sass/course/discussion/_forms.scss @@ -92,7 +92,7 @@ form.answer-form { margin-left: 2.5%; padding-left: 1.5%; border-left: 1px dashed #ddd; - color: $mit-red;; + color: $mit-red; } ul, ol, pre { diff --git a/lms/static/sass/course/wiki/_sidebar.scss b/lms/static/sass/course/wiki/_sidebar.scss index 8c9f97d27d..22574c7a5a 100644 --- a/lms/static/sass/course/wiki/_sidebar.scss +++ b/lms/static/sass/course/wiki/_sidebar.scss @@ -14,14 +14,6 @@ div#wiki_panel { } } - form { - input[type="submit"]{ - @extend .light-button; - text-transform: none; - text-shadow: none; - } - } - div#wiki_create_form { @extend .clearfix; padding: lh(.5) lh() lh(.5) 0; @@ -53,4 +45,12 @@ div#wiki_panel { } } } + + input#wiki_search_input_submit { + padding: 4px 8px; + } + + input#wiki_search_input { + margin-right: 10px; + } } diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss index 760dc0bf63..842ffb0086 100644 --- a/lms/static/sass/shared/_forms.scss +++ b/lms/static/sass/shared/_forms.scss @@ -1,52 +1,54 @@ form { font-size: 1em; +} - label { - color: $base-font-color; - font: italic 300 1rem/1.6rem $serif; - margin-bottom: 5px; - text-shadow: 0 1px rgba(255,255,255, 0.4); - -webkit-font-smoothing: antialiased; +label { + color: $base-font-color; + font: italic 300 1rem/1.6rem $serif; + margin-bottom: 5px; + text-shadow: 0 1px rgba(255,255,255, 0.4); + -webkit-font-smoothing: antialiased; +} + +textarea, +input[type="text"], +input[type="email"], +input[type="password"] { + background: rgb(250,250,250); + border: 1px solid rgb(200,200,200); + @include border-radius(3px); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); + @include box-sizing(border-box); + font: italic 300 1rem/1.6rem $serif; + height: 35px; + padding: 5px 12px; + vertical-align: top; + -webkit-font-smoothing: antialiased; + + &:last-child { + margin-right: 0px; } - textarea, - input[type="text"], - input[type="email"], - input[type="password"] { - background: rgb(250,250,250); - border: 1px solid rgb(200,200,200); - @include border-radius(3px); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); - @include box-sizing(border-box); - font: italic 300 1rem/1.6rem $serif; - height: 35px; - padding: 5px 12px; - vertical-align: top; - -webkit-font-smoothing: antialiased; - - &:last-child { - margin-right: 0px; - } - - &:focus { - border-color: lighten($blue, 20%); - @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15)); - outline: none; - } - } - - textarea { - height: 60px; - } - - input[type="submit"] { - @include button(shiny, $blue); - @include border-radius(3px); - font: normal 1.2rem/1.6rem $sans-serif; - height: 35px; - letter-spacing: 1px; - text-transform: uppercase; - vertical-align: top; - -webkit-font-smoothing: antialiased; + &:focus { + border-color: lighten($blue, 20%); + @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15)); + outline: none; } } + +textarea { + height: 60px; +} + +input[type="submit"], +input[type="button"], +.button { + @include border-radius(3px); + @include button(shiny, $blue); + font: normal 1.2rem/1.6rem $sans-serif; + letter-spacing: 1px; + padding: 4px 20px; + text-transform: uppercase; + vertical-align: top; + -webkit-font-smoothing: antialiased; +} diff --git a/lms/static/sass/shared/_tooltips.scss b/lms/static/sass/shared/_tooltips.scss new file mode 100644 index 0000000000..eefbc09bef --- /dev/null +++ b/lms/static/sass/shared/_tooltips.scss @@ -0,0 +1,12 @@ +.ui-tooltip.qtip .ui-tooltip-content { + background: rgba($pink, .8); + border: 0; + color: #fff; + font: bold 12px $body-font-family; + margin-bottom: 6px; + margin-right: 0; + overflow: visible; + padding: 4px; + text-align: center; + -webkit-font-smoothing: antialiased; +} diff --git a/lms/templates/simplewiki/simplewiki_base.html b/lms/templates/simplewiki/simplewiki_base.html index 04a239b6c3..8736f3e421 100644 --- a/lms/templates/simplewiki/simplewiki_base.html +++ b/lms/templates/simplewiki/simplewiki_base.html @@ -110,7 +110,7 @@