diff --git a/lms/static/images/small-header-home-icon.png b/lms/static/images/small-header-home-icon.png new file mode 100644 index 0000000000..2e81217b77 Binary files /dev/null and b/lms/static/images/small-header-home-icon.png differ diff --git a/lms/static/images/small-header-logo.png b/lms/static/images/small-header-logo.png new file mode 100644 index 0000000000..a841b5429d Binary files /dev/null and b/lms/static/images/small-header-logo.png differ diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index b208ec36e6..821701ace8 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -15,7 +15,7 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-size: em(14); $body-line-height: golden-ratio(.875em, 1); $base-font-color: rgb(60,60,60); -$lighter-base-font-color: rgb(160,160,160); +$lighter-base-font-color: rgb(100,100,100); $blue: rgb(29,157,217); $pink: rgb(182,37,104); diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index ba40de32e4..9f0f4eaf49 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -34,6 +34,9 @@ @import "course/profile"; @import "course/gradebook"; +// instructor +@import "course/instructor/instructor"; + // Askbot / Discussion styles @import "course/discussion/askbot-original"; @import "course/discussion/discussion"; diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 7c884bf5d3..bb3826fb61 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -69,7 +69,7 @@ section.course-index { .chapter { padding: 11px 14px; @include linear-gradient(top, #f9f9f9, #eee); - box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset; + @include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset); &:first-child { border-radius: 3px 0 0 0; @@ -77,6 +77,7 @@ section.course-index { &:last-child { border-radius: 0 0 0 3px; + @include box-shadow(0 1px 0 #fff inset); } } diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss new file mode 100644 index 0000000000..070f7bcc9c --- /dev/null +++ b/lms/static/sass/course/instructor/_instructor.scss @@ -0,0 +1,15 @@ +.instructor-dashboard-wrapper { + @extend .table-wrapper; + display: table; + + section.instructor-dashboard-content { + @extend .content; + padding: 40px; + width: 100%; + + h1 { + @extend .top-header; + } + } +} + diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index ca8b9918d2..a4d5014baf 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -15,29 +15,32 @@ nav.course-material { ol.course-tabs { @include border-top-radius(4px); @include clearfix; - padding: 10px 0 0 0; + padding: 28px 0 10px 0; margin-left: 10px; li { float: left; list-style: none; + margin-right: 6px; a { + border-radius: 3px; color: #555; display: block; text-align: center; - padding: 8px 13px 12px; + padding: 10px 13px 12px; font-size: 14px; font-weight: bold; text-decoration: none; - text-shadow: 0 1px rgb(255,255,255); &:hover { color: #333; + background: rgba(0, 0, 0, .08); } &.active { color: $blue; + background: rgba(255, 255, 255, .8); } } } @@ -52,13 +55,49 @@ nav.course-material { } } -.global { - background: none !important; - border: none !important; - box-shadow: none !important; +header.global { + border-bottom: 1px solid #bbb; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + height: 45px; + @include linear-gradient(top, #fff, #eee); - .logo { - margin-left: 13px !important; + nav { + padding-top: 2px; + } + + h1.logo { + margin-left: 13px; + margin-right: 20px; + padding-right: 20px; + + &::before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 40px; + position: absolute; + right: 3px; + top: -8px; + width: 1px; + } + + &::after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 40px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } + + a { + width: 48px; + height: 24px; + background: url(../images/small-header-logo.png) no-repeat !important; + } + } .find-courses-button { @@ -71,9 +110,9 @@ nav.course-material { float: left; font-size: 0.9em; font-weight: 600; - color: #888; - line-height: 40px; + color: #777; letter-spacing: 0; + margin-top: 9px; text-transform: none; text-shadow: 0 1px 0 #fff; white-space: nowrap; @@ -83,7 +122,6 @@ nav.course-material { .provider { font: inherit; font-weight: bold; - color: #555; } } } \ No newline at end of file diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 4fb95f7004..442380d21b 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -48,7 +48,6 @@ footer { a:link, a:visited { color: $lighter-base-font-color; - letter-spacing: 1px; padding: 6px 0px; } } @@ -90,7 +89,6 @@ footer { a { color: $lighter-base-font-color; @include inline-block; - letter-spacing: 1px; margin-right: 20px; padding-top: 2px; vertical-align: middle; @@ -165,7 +163,6 @@ footer { color: $lighter-base-font-color; font-family: $serif; font-style: italic; - letter-spacing: 1px; line-height: 1.6em; margin-left: 20px; text-transform: lowercase; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 857db39a8d..116761ddc8 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -136,6 +136,7 @@ header.global { &.user { float: right; + margin-top: 4px; > li.primary { display: block; @@ -151,22 +152,22 @@ header.global { > a { @include border-radius(0 4px 4px 0); border-left: none; + padding: 5px 8px 7px 8px; } } } a.user-link { - padding: 10px 12px 10px 42px; + padding: 6px 12px 8px 35px; position: relative; text-transform: none; + font-size: 14px; + font-weight: bold; + letter-spacing: 0; .avatar { - //background: rgb(220,220,220); - @include background-image(url('../images/portal-icons/home-icon.png')); - background-size: cover; - //@include border-radius(3px); - //border: 1px solid rgb(80,80,80); - //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + @include background-image(url('../images/small-header-home-icon.png')); + background-repeat: no-repeat; height: 26px; @include inline-block; left: 8px; @@ -194,7 +195,7 @@ header.global { padding: 5px 10px; position: absolute; right: 0px; - top: 50px; + top: 34px; width: 170px; z-index: 3;