diff --git a/lms/static/images/bg-texture.png b/lms/static/images/bg-texture.png new file mode 100644 index 0000000000..909af2b7ff Binary files /dev/null and b/lms/static/images/bg-texture.png differ diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 7ad30f0c91..50c5c07b5a 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -21,6 +21,7 @@ $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); $error-red: rgb(253, 87, 87); $border-color: #C8C8C8; +$sidebar-color: #f6f6f6; // old variables @@ -28,3 +29,4 @@ $light-gray: #ddd; $dark-gray: #333; $mit-red: #993333; $text-color: $dark-gray; + diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index d3a74cb91b..ba40de32e4 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -11,6 +11,7 @@ // Course base / layout styles @import 'course/layout/courseware_header'; +@import 'course/layout/footer'; @import 'course/base/base'; @import 'course/base/extends'; @import 'module/module-styles.scss'; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 1651ad4da8..886c46c9e7 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -68,23 +68,31 @@ div.info-wrapper { section.handouts { @extend .sidebar; - border-left: 1px solid $border-color; @include border-radius(0 4px 4px 0); border-right: 0; @include box-shadow(none); + font-size: 14px; h1 { - @extend .bottom-border; margin-bottom: 0; - padding: lh(.5) lh(.5); + padding: 20px 26px; + font-size: 18px; + font-style: normal; + font-weight: bold; } ol { li { + padding: 0 26px; + margin-bottom: 14px; + a { display: block; - padding-left: lh(.5); - padding-right: 0; + padding: 0; + + &:hover { + background: transparent; + } } &.expandable, @@ -98,7 +106,6 @@ div.info-wrapper { } &.multiple { - padding: lh(.5) 0 lh(.5) lh(.5); a { @include inline-block; @@ -133,7 +140,7 @@ div.info-wrapper { } div.hitarea { - background-image: url('../images/treeview-default.gif'); + background-image: url('../images/treeview-default.gif') no-repeat; display: block; height: 100%; margin-left: 0; @@ -165,7 +172,7 @@ div.info-wrapper { @include box-shadow(none); color: #aaa; font-size: 1em; - margin-bottom: em(6); + margin-bottom: em(6); } p { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 6bd42e63cd..780520a3fc 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,6 +1,6 @@ body { min-width: 980px; - background: #f7f7f7; + background: url(../images/bg-texture.png) #f7f7f7; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { @@ -12,6 +12,13 @@ table { table-layout: fixed; } +a { + &:hover { + color: $pink; + text-decoration: none !important; + } +} + .content-wrapper { background: none; border: none; @@ -36,6 +43,6 @@ form { } ::selection, ::-moz-selection, ::-webkit-selection { - background:#444; - color:#fff; + background: #444; + color: #fff; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 04eaf73094..3604f784f9 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -28,7 +28,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding: lh(); + padding: 2.5em; vertical-align: top; width: flex-grid(9) + flex-gutter(); @@ -38,13 +38,14 @@ h1.top-header { } .sidebar { - border-right: 1px solid #C8C8C8; + // border-right: 1px solid #C8C8C8; @include box-sizing(border-box); display: table-cell; font-family: $sans-serif; position: relative; vertical-align: top; width: flex-grid(3); + background: $sidebar-color; h1, h2 { font-size: em(20); @@ -85,7 +86,7 @@ h1.top-header { } &.active { - @extend .bottom-border; + // @extend .bottom-border; color: #000; font-weight: bold; @@ -101,7 +102,7 @@ h1.top-header { padding-left: 0; li { - @extend .bottom-border; + // @extend .bottom-border; @extend .clearfix; background: none; position: relative; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 7905bd81e6..198902c146 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -5,12 +5,6 @@ html { div.course-wrapper { @extend .table-wrapper; - padding: 40px; - box-sizing: border-box; - border-radius: 3px; - background: #fff; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); - ul, ol { list-style: none; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 7a2a04a5db..ca8b9918d2 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,7 +1,6 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; border-bottom: none; margin: 0px auto 0px; padding: 0px; @@ -24,7 +23,7 @@ nav.course-material { list-style: none; a { - color: darken($lighter-base-font-color, 20%); + color: #555; display: block; text-align: center; padding: 8px 13px 12px; @@ -34,7 +33,7 @@ nav.course-material { text-shadow: 0 1px rgb(255,255,255); &:hover { - color: $base-font-color; + color: #333; } &.active { @@ -72,6 +71,7 @@ nav.course-material { float: left; font-size: 0.9em; font-weight: 600; + color: #888; line-height: 40px; letter-spacing: 0; text-transform: none; @@ -83,7 +83,7 @@ nav.course-material { .provider { font: inherit; font-weight: bold; - color: #6d6d6d; + color: #555; } } } \ No newline at end of file diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss new file mode 100644 index 0000000000..7abf35a819 --- /dev/null +++ b/lms/static/sass/course/layout/_footer.scss @@ -0,0 +1,4 @@ +footer { + border: none; + box-shadow: none; +} \ No newline at end of file