diff --git a/lms/static/images/portal-icons/calendar-icon.png b/lms/static/images/portal-icons/calendar-icon.png new file mode 100644 index 0000000000..4d21e405c8 Binary files /dev/null and b/lms/static/images/portal-icons/calendar-icon.png differ diff --git a/lms/static/images/portal-icons/chart-icon.png b/lms/static/images/portal-icons/chart-icon.png new file mode 100644 index 0000000000..fc6e224f59 Binary files /dev/null and b/lms/static/images/portal-icons/chart-icon.png differ diff --git a/lms/static/images/portal-icons/course-info-icon.png b/lms/static/images/portal-icons/course-info-icon.png new file mode 100644 index 0000000000..178a582cbd Binary files /dev/null and b/lms/static/images/portal-icons/course-info-icon.png differ diff --git a/lms/static/images/portal-icons/email-icon.png b/lms/static/images/portal-icons/email-icon.png new file mode 100644 index 0000000000..46f5457238 Binary files /dev/null and b/lms/static/images/portal-icons/email-icon.png differ diff --git a/lms/static/images/portal-icons/gear-icon.png b/lms/static/images/portal-icons/gear-icon.png new file mode 100644 index 0000000000..4e66eb3e3e Binary files /dev/null and b/lms/static/images/portal-icons/gear-icon.png differ diff --git a/lms/static/images/portal-icons/home-icon.png b/lms/static/images/portal-icons/home-icon.png new file mode 100644 index 0000000000..7022487bf4 Binary files /dev/null and b/lms/static/images/portal-icons/home-icon.png differ diff --git a/lms/static/images/info-icon.png b/lms/static/images/portal-icons/info-icon.png similarity index 100% rename from lms/static/images/info-icon.png rename to lms/static/images/portal-icons/info-icon.png diff --git a/lms/static/images/portal-icons/language-icon.png b/lms/static/images/portal-icons/language-icon.png new file mode 100644 index 0000000000..9ab8a178a6 Binary files /dev/null and b/lms/static/images/portal-icons/language-icon.png differ diff --git a/lms/static/images/portal-icons/pencil-icon.png b/lms/static/images/portal-icons/pencil-icon.png new file mode 100644 index 0000000000..30c99c191f Binary files /dev/null and b/lms/static/images/portal-icons/pencil-icon.png differ diff --git a/lms/static/images/portal-icons/video-play-icon.png b/lms/static/images/portal-icons/video-play-icon.png new file mode 100644 index 0000000000..b55612c1a0 Binary files /dev/null and b/lms/static/images/portal-icons/video-play-icon.png differ diff --git a/lms/static/sass/_course_about.scss b/lms/static/sass/_course_about.scss index 1e395efd1a..8a98dfac2c 100644 --- a/lms/static/sass/_course_about.scss +++ b/lms/static/sass/_course_about.scss @@ -358,18 +358,42 @@ margin-bottom: 20px; padding-bottom: 10px; + &:hover { + .icon { + opacity: 1; + } + } + p { color: $lighter-base-font-color; float: left; font-family: $sans-serif; } - img { - background: rgb(230,230,230); + .icon { + background-size: cover; float: left; height: 19px; - margin: 3px 10px 0 0; + margin: 2px 10px 0 0; + opacity: 0.6; + @include transition(all, 0.15s, linear); width: 19px; + + &.start-icon { + @include background-image(url('/static/images/portal-icons/calendar-icon.png')); + } + + &.final-icon { + @include background-image(url('/static/images/portal-icons/pencil-icon.png')); + } + + &.length-icon { + @include background-image(url('/static/images/portal-icons/chart-icon.png')); + } + + &.number-icon { + @include background-image(url('/static/images/portal-icons/course-info-icon.png')); + } } span { diff --git a/lms/static/sass/_dashboard.scss b/lms/static/sass/_dashboard.scss index aa64b8b6c5..cc82bfed99 100644 --- a/lms/static/sass/_dashboard.scss +++ b/lms/static/sass/_dashboard.scss @@ -30,27 +30,59 @@ > ul { background: rgb(250,250,250); - border: 1px solid rgb(220,220,220); + border: 1px solid rgb(200,200,200); border-top: none; @include border-bottom-radius(4px); @include box-sizing(border-box); + @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); @include clearfix; margin: 0px; - padding: 0px 10px 20px; + padding: 20px 10px 10px; width: flex-grid(12); li { + @include clearfix; + border-bottom: 1px dotted rgb(220,220,220); list-style: none; + margin-bottom: 20px; + padding-bottom: 10px; + + &:hover { + .icon { + opacity: 1; + } + } p { color: $lighter-base-font-color; + float: left; font-family: $sans-serif; - text-shadow: 0 1px rgba(255,255,255, 0.8); span { font-weight: 700; - margin-left: 10px; - text-transform: none; + margin-left: 12px; + } + } + + .icon { + background-size: cover; + float: left; + height: 19px; + margin: 2px 8px 0 0; + opacity: 0.6; + @include transition(all, 0.15s, linear); + width: 19px; + + &.email-icon { + @include background-image(url('/static/images/portal-icons/email-icon.png')); + } + + &.location-icon { + @include background-image(url('/static/images/portal-icons/home-icon.png')); + } + + &.language-icon { + @include background-image(url('/static/images/portal-icons/language-icon.png')); } } } @@ -254,9 +286,11 @@ .course-work-icon { - background: rgb(200,200,200); + @include background-image(url('/static/images/portal-icons/pencil-icon.png')); + background-size: cover; float: left; height: 22px; + opacity: 0.7; width: 22px; } @@ -280,7 +314,7 @@ .progress { @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - left: 40px; + left: 35px; position: absolute; right: 130px; diff --git a/lms/static/sass/_home.scss b/lms/static/sass/_home.scss index 9b02890e09..7c5eaf1ec5 100644 --- a/lms/static/sass/_home.scss +++ b/lms/static/sass/_home.scss @@ -148,7 +148,8 @@ vertical-align: middle; .play { - background: rgba(255,255,255, 0.6); + @include background-image(url('/static/images/portal-icons/video-play-icon.png')); + background-size: cover; height: 31px; margin-left: -13px; margin-top: -15px; diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index 2e57acf217..20630f3725 100644 --- a/lms/static/sass/application.css +++ b/lms/static/sass/application.css @@ -583,6 +583,16 @@ a:link, a:visited { background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); border: none; } +.error-message-colors, .container.activation h1.invalid { + background: #fd5757; + border: 1px solid #ca1111; + color: #8f0e0e; } + +.success-message-colors, .container.activation h1.valid { + background: #63ec89; + border: 1px solid #11ca36; + color: #238f0e; } + .animation-home-header-pop-up, .home > header .outer-wrapper { -webkit-animation: home-header-pop-up 1.15s ease-in-out; -moz-animation: home-header-pop-up 1.15s ease-in-out; @@ -1833,22 +1843,43 @@ header.global { margin-right: 0px; } header.global ol.user { float: right; } + header.global ol.user > li.primary { + display: block; + float: left; + margin: 0px; } + header.global ol.user > li.primary > a { + margin: 0px; + -webkit-border-top-right-radius: 0px; + -moz-border-top-right-radius: 0px; + -moz-border-radius-topright: 0px; + -ms-border-top-right-radius: 0px; + -o-border-top-right-radius: 0px; + border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0px; + -moz-border-bottom-right-radius: 0px; + -moz-border-radius-bottomright: 0px; + -ms-border-bottom-right-radius: 0px; + -o-border-bottom-right-radius: 0px; + border-bottom-right-radius: 0px; } + header.global ol.user > li.primary:last-child > a { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + -ms-border-radius: 0 4px 4px 0; + -o-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; + border-left: none; } header.global ol.user a.user-link { padding: 10px 12px 10px 42px; position: relative; text-transform: none; } header.global ol.user a.user-link .avatar { - background: #dcdcdc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - border: 1px solid #505050; - -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - height: 21px; + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-size: cover; + height: 26px; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -1857,61 +1888,57 @@ header.global { *display: inline; *vertical-align: auto; left: 8px; + opacity: 0.5; overflow: hidden; position: absolute; - top: 7px; - width: 21px; } - header.global ol.user a.user-link .avatar::after { - background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - content: ""; - display: block; - height: 100%; - position: absolute; - right: 0px; - top: 0px; - width: 100%; } - header.global ol.user a.user-link .avatar img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; } + top: 4px; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + width: 26px; } + header.global ol.user a.user-link:hover .avatar { + opacity: 0.8; } header.global ol.user ul.dropdown-menu { + background: #fcfcfc; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - border: 1px solid black; - background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4); + -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #646464; display: none; padding: 5px 10px; position: absolute; - right: 4px; + right: 0px; top: 50px; - width: 150px; + width: 170px; z-index: 3; } header.global ol.user ul.dropdown-menu.expanded { display: block; } header.global ol.user ul.dropdown-menu::before { background: transparent; - border-top: 6px solid black; - border-right: 6px solid black; + border-top: 6px solid #fcfcfc; + border-right: 6px solid #fcfcfc; border-bottom: 6px solid transparent; border-left: 6px solid transparent; -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; @@ -1931,7 +1958,7 @@ header.global { width: 0px; } header.global ol.user ul.dropdown-menu li { display: block; - border-top: 1px solid rgba(0, 0, 0, 0.4); + border-top: 1px dotted #c8c8c8; -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } @@ -1941,35 +1968,32 @@ header.global { -moz-box-shadow: none; box-shadow: none; } header.global ol.user ul.dropdown-menu li > a { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + border: 1px solid transparent; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - color: rgba(255, 255, 255, 0.9); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: #1d9dd9; + cursor: pointer; display: block; - font-family: Georgia, Cambria, "Times New Roman", Times, serif; - height: auto; - line-height: 1em; margin: 5px 0px; overflow: hidden; padding: 3px 5px 4px; - text-shadow: none; text-overflow: ellipsis; - text-transform: none; -webkit-transition-property: padding; -moz-transition-property: padding; -ms-transition-property: padding; -o-transition-property: padding; transition-property: padding; - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - -ms-transition-duration: 0.1s; - -o-transition-duration: 0.1s; - transition-duration: 0.1s; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; @@ -1983,18 +2007,8 @@ header.global { white-space: nowrap; width: 100%; } header.global ol.user ul.dropdown-menu li > a:hover { - background: #1d9dd9; - background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - border-color: black; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - padding-left: 8px; - text-shadow: 0 -1px rgba(0, 0, 0, 0.2); } + color: #3c3c3c; + text-decoration: none; } .highlighted-courses .courses, .find-courses .courses { zoom: 1; @@ -2640,6 +2654,28 @@ header.global { .modal .inner-wrapper .close-modal:hover p { color: #3c3c3c; } +.container.activation { + padding: 60px 0px 120px; } + .container.activation h1 { + margin-bottom: 20px; + padding: 10px; } + .container.activation h1 + hr { + margin-bottom: 30px; } + .container.activation .message { + background: #fcfcfc; + border: 1px solid #c8c8c8; + -webkit-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + margin: 0 auto; + padding: 40px; + width: 48.988%; } + .home { padding: 0px; } .home > header { @@ -2906,7 +2942,12 @@ header.global { width: 60px; vertical-align: middle; } .home > header .title .secondary-actions a.intro-video .video .play { - background: rgba(255, 255, 255, 0.6); + background-image: url("/static/images/portal-icons/video-play-icon.png"); + background-image: url("/static/images/portal-icons/video-play-icon.png"); + background-image: url("/static/images/portal-icons/video-play-icon.png"); + background-image: url("/static/images/portal-icons/video-play-icon.png"); + background-image: url("/static/images/portal-icons/video-play-icon.png"); + background-size: cover; height: 31px; margin-left: -13px; margin-top: -15px; @@ -3529,7 +3570,7 @@ header.global { clear: both; } .dashboard .profile-sidebar header.profile .user-info > ul { background: #fafafa; - border: 1px solid #dcdcdc; + border: 1px solid #c8c8c8; border-top: none; -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; @@ -3546,9 +3587,12 @@ header.global { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15); zoom: 1; margin: 0px; - padding: 0px 10px 20px; + padding: 20px 10px 10px; width: 100%; } .dashboard .profile-sidebar header.profile .user-info > ul:before, .dashboard .profile-sidebar header.profile .user-info > ul:after { content: ""; @@ -3556,15 +3600,70 @@ header.global { .dashboard .profile-sidebar header.profile .user-info > ul:after { clear: both; } .dashboard .profile-sidebar header.profile .user-info > ul li { - list-style: none; } + zoom: 1; + border-bottom: 1px dotted #dcdcdc; + list-style: none; + margin-bottom: 20px; + padding-bottom: 10px; } + .dashboard .profile-sidebar header.profile .user-info > ul li:before, .dashboard .profile-sidebar header.profile .user-info > ul li:after { + content: ""; + display: table; } + .dashboard .profile-sidebar header.profile .user-info > ul li:after { + clear: both; } + .dashboard .profile-sidebar header.profile .user-info > ul li:hover .icon { + opacity: 1; } .dashboard .profile-sidebar header.profile .user-info > ul li p { color: #a0a0a0; - font-family: "Open Sans", Verdana, Geneva, sans-serif; - text-shadow: 0 1px rgba(255, 255, 255, 0.8); } + float: left; + font-family: "Open Sans", Verdana, Geneva, sans-serif; } .dashboard .profile-sidebar header.profile .user-info > ul li p span { font-weight: 700; - margin-left: 10px; - text-transform: none; } + margin-left: 12px; } + .dashboard .profile-sidebar header.profile .user-info > ul li .icon { + background-size: cover; + float: left; + height: 19px; + margin: 2px 8px 0 0; + opacity: 0.6; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + width: 19px; } + .dashboard .profile-sidebar header.profile .user-info > ul li .icon.email-icon { + background-image: url("/static/images/portal-icons/email-icon.png"); + background-image: url("/static/images/portal-icons/email-icon.png"); + background-image: url("/static/images/portal-icons/email-icon.png"); + background-image: url("/static/images/portal-icons/email-icon.png"); + background-image: url("/static/images/portal-icons/email-icon.png"); } + .dashboard .profile-sidebar header.profile .user-info > ul li .icon.location-icon { + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); + background-image: url("/static/images/portal-icons/home-icon.png"); } + .dashboard .profile-sidebar header.profile .user-info > ul li .icon.language-icon { + background-image: url("/static/images/portal-icons/language-icon.png"); + background-image: url("/static/images/portal-icons/language-icon.png"); + background-image: url("/static/images/portal-icons/language-icon.png"); + background-image: url("/static/images/portal-icons/language-icon.png"); + background-image: url("/static/images/portal-icons/language-icon.png"); } .dashboard .my-courses { float: left; margin: 0px; @@ -3903,9 +4002,15 @@ header.global { .dashboard .my-courses .my-course .info .meta:after { clear: both; } .dashboard .my-courses .my-course .info .meta .course-work-icon { - background: #c8c8c8; + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-size: cover; float: left; height: 22px; + opacity: 0.7; width: 22px; } .dashboard .my-courses .my-course .info .meta .complete { float: right; } @@ -3929,7 +4034,7 @@ header.global { -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - left: 40px; + left: 35px; position: absolute; right: 130px; } .dashboard .my-courses .my-course .info .meta .progress .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done .meter { @@ -4637,16 +4742,63 @@ nav.course-material { display: table; } .course-info .course-sidebar .important-dates li:after { clear: both; } + .course-info .course-sidebar .important-dates li:hover .icon { + opacity: 1; } .course-info .course-sidebar .important-dates li p { color: #a0a0a0; float: left; font-family: "Open Sans", Verdana, Geneva, sans-serif; } - .course-info .course-sidebar .important-dates li img { - background: #e6e6e6; + .course-info .course-sidebar .important-dates li .icon { + background-size: cover; float: left; height: 19px; - margin: 3px 10px 0 0; + margin: 2px 10px 0 0; + opacity: 0.6; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; width: 19px; } + .course-info .course-sidebar .important-dates li .icon.start-icon { + background-image: url("/static/images/portal-icons/calendar-icon.png"); + background-image: url("/static/images/portal-icons/calendar-icon.png"); + background-image: url("/static/images/portal-icons/calendar-icon.png"); + background-image: url("/static/images/portal-icons/calendar-icon.png"); + background-image: url("/static/images/portal-icons/calendar-icon.png"); } + .course-info .course-sidebar .important-dates li .icon.final-icon { + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); + background-image: url("/static/images/portal-icons/pencil-icon.png"); } + .course-info .course-sidebar .important-dates li .icon.length-icon { + background-image: url("/static/images/portal-icons/chart-icon.png"); + background-image: url("/static/images/portal-icons/chart-icon.png"); + background-image: url("/static/images/portal-icons/chart-icon.png"); + background-image: url("/static/images/portal-icons/chart-icon.png"); + background-image: url("/static/images/portal-icons/chart-icon.png"); } + .course-info .course-sidebar .important-dates li .icon.number-icon { + background-image: url("/static/images/portal-icons/course-info-icon.png"); + background-image: url("/static/images/portal-icons/course-info-icon.png"); + background-image: url("/static/images/portal-icons/course-info-icon.png"); + background-image: url("/static/images/portal-icons/course-info-icon.png"); + background-image: url("/static/images/portal-icons/course-info-icon.png"); } .course-info .course-sidebar .important-dates li span { float: right; font-weight: 700; } diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss index b152a05593..1cdc7ce7e9 100644 --- a/lms/static/sass/application.scss +++ b/lms/static/sass/application.scss @@ -16,6 +16,7 @@ @import 'shared_styles/shared_list_of_courses'; @import 'shared_styles/shared_course_filter'; @import 'shared_styles/shared_modal'; +@import 'shared_styles/activation_messages'; @import 'home'; @import 'dashboard'; diff --git a/lms/static/sass/base_styles/_base.scss b/lms/static/sass/base_styles/_base.scss index 4db819d7d0..ed35178f68 100644 --- a/lms/static/sass/base_styles/_base.scss +++ b/lms/static/sass/base_styles/_base.scss @@ -14,6 +14,7 @@ $lighter-base-font-color: rgb(160,160,160); $blue: rgb(29,157,217); $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); +$error-red: rgb(253, 87, 87); html, body { background: rgb(250,250,250); diff --git a/lms/static/sass/base_styles/_base_extends.scss b/lms/static/sass/base_styles/_base_extends.scss index 703a85c471..b4f076e3ec 100644 --- a/lms/static/sass/base_styles/_base_extends.scss +++ b/lms/static/sass/base_styles/_base_extends.scss @@ -76,3 +76,15 @@ rgba(200,200,200, 0))); border: none; } + +.error-message-colors { + background: $error-red; + border: 1px solid rgb(202, 17, 17); + color: rgb(143, 14, 14); +} + +.success-message-colors { + background: rgb(99, 236, 137); + border: 1px solid rgb(17, 202, 54); + color: rgb(35, 143, 14); +} diff --git a/lms/static/sass/shared_styles/_activation_messages.scss b/lms/static/sass/shared_styles/_activation_messages.scss new file mode 100644 index 0000000000..bfcc1d278c --- /dev/null +++ b/lms/static/sass/shared_styles/_activation_messages.scss @@ -0,0 +1,30 @@ +.container.activation { + padding: 60px 0px 120px; + + h1 { + margin-bottom: 20px; + padding: 10px; + + &.invalid { + @extend .error-message-colors; + } + + &.valid { + @extend .success-message-colors; + } + } + + h1 + hr { + margin-bottom: 30px; + } + + .message { + background: rgb(252,252,252); + border: 1px solid rgb(200,200,200); + @include box-shadow(0 3px 20px 0 rgba(0,0,0, 0.2)); + @include border-radius(4px); + margin: 0 auto; + padding: 40px; + width: flex-grid(6); + } +} diff --git a/lms/static/sass/shared_styles/_shared_header.scss b/lms/static/sass/shared_styles/_shared_header.scss index c07d1d188e..b3b66be303 100644 --- a/lms/static/sass/shared_styles/_shared_header.scss +++ b/lms/static/sass/shared_styles/_shared_header.scss @@ -136,57 +136,65 @@ header.global { &.user { float: right; + > li.primary { + display: block; + float: left; + margin: 0px; + + > a { + margin: 0px; + @include border-right-radius(0px); + } + + &:last-child { + > a { + @include border-radius(0 4px 4px 0); + border-left: none; + } + } + } + a.user-link { padding: 10px 12px 10px 42px; position: relative; text-transform: none; .avatar { - background: rgb(220,220,220); - @include border-radius(3px); - border: 1px solid rgb(80,80,80); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - height: 21px; + //background: rgb(220,220,220); + @include background-image(url('/static/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)); + height: 26px; @include inline-block; left: 8px; + opacity: 0.5; overflow: hidden; position: absolute; - top: 7px; - width: 21px; + top: 4px; + @include transition(all, 0.15s, linear); + width: 26px; + } - &::after { - @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%)); - content: ""; - display: block; - height: 100%; - position: absolute; - right: 0px; - top: 0px; - width: 100%; - } - - img { - @include border-radius(4px); - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; + &:hover { + .avatar { + opacity: 0.8; } } } ul.dropdown-menu { + background: rgb(252,252,252); @include border-radius(4px); - @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); - border: 1px solid rgb(0,0,0); - @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, - rgba(0,0,0, 0.7) 100%)); + @include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4)); + border: 1px solid rgb(100,100,100); display: none; padding: 5px 10px; position: absolute; - right: 4px; + right: 0px; top: 50px; - width: 150px; + width: 170px; z-index: 3; &.expanded { @@ -196,8 +204,8 @@ header.global { &::before { background: transparent; border: { - top: 6px solid rgba(0,0,0, 1); - right: 6px solid rgba(0,0,0, 1); + top: 6px solid rgba(252,252,252, 1); + right: 6px solid rgba(252,252,252, 1); bottom: 6px solid transparent; left: 6px solid transparent; } @@ -214,7 +222,7 @@ header.global { li { display: block; - border-top: 1px solid rgba(0,0,0, 0.4); + border-top: 1px dotted rgba(200,200,200, 1); @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05)); &:first-child { @@ -223,31 +231,23 @@ header.global { } > a { - @include box-sizing(border-box); + border: 1px solid transparent; @include border-radius(3px); - color: rgba(255,255,255, 0.9); + @include box-sizing(border-box); + color: $blue; + cursor: pointer; display: block; - font-family: $serif; - height: auto; - line-height: 1em; margin: 5px 0px; overflow: hidden; padding: 3px 5px 4px; - text-shadow: none; text-overflow: ellipsis; - text-transform: none; - @include transition(padding, 0.1s, linear); + @include transition(padding, 0.15s, linear); white-space: nowrap; width: 100%; &:hover { - background: $blue; - @include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%, - rgba($blue, 1) 100%)); - border-color: rgba(0,0,0, 1); - @include box-shadow(none); - padding-left: 8px; - text-shadow: 0 -1px rgba(0,0,0, 0.2); + color: $base-font-color; + text-decoration: none; } } } diff --git a/lms/static/sass/shared_styles/_shared_modal.scss b/lms/static/sass/shared_styles/_shared_modal.scss index a783bdc7bc..f62e9ddc3e 100644 --- a/lms/static/sass/shared_styles/_shared_modal.scss +++ b/lms/static/sass/shared_styles/_shared_modal.scss @@ -107,7 +107,7 @@ } #enroll_error, #login_error { - background: rgb(253, 87, 87); + background: $error-red; border: 1px solid rgb(202, 17, 17); color: rgb(143, 14, 14); display: none; diff --git a/lms/templates/activation_active.html b/lms/templates/activation_active.html index 613c20dc9f..b3ac51d055 100644 --- a/lms/templates/activation_active.html +++ b/lms/templates/activation_active.html @@ -1,12 +1,14 @@ -<%inherit file="marketing.html" /> +<%! from django.core.urlresolvers import reverse %> +<%inherit file="main.html" /> -
-
+<%namespace name='static' file='static_content.html'/> -
-

Account already active!

- -

This account has already been activated. You can log in at - the 6.002x course page.

-
+
+ +
+

Account already active!

+
+ +

This account has already been activated. You can now login.

+
diff --git a/lms/templates/activation_complete.html b/lms/templates/activation_complete.html index dc01ae54ca..f48e8896b4 100644 --- a/lms/templates/activation_complete.html +++ b/lms/templates/activation_complete.html @@ -1,9 +1,14 @@ -<%inherit file="marketing.html" /> +<%! from django.core.urlresolvers import reverse %> +<%inherit file="main.html" /> -
-
-

Activation Complete!

- -

Thanks for activating your account. You can log in at the 6.002x course page.

-
+<%namespace name='static' file='static_content.html'/> + +
+ +
+

Activation Complete!

+
+ +

Thanks for activating your account. You can now login.

+
diff --git a/lms/templates/activation_invalid.html b/lms/templates/activation_invalid.html index 419f7a0ae6..09832d0df5 100644 --- a/lms/templates/activation_invalid.html +++ b/lms/templates/activation_invalid.html @@ -1,14 +1,19 @@ -<%inherit file="marketing.html" /> +<%! from django.core.urlresolvers import reverse %> +<%inherit file="main.html" /> -
-
-

Activation Invalid

+<%namespace name='static' file='static_content.html'/> -

Something went wrong. Check to make sure the URL you went to was - correct -- e-mail programs will sometimes split it into two - lines. If you still have issues, e-mail us to let us know what happened - at bugs@mitx.mit.edu.

+
-

Or you can go back to the 6.002x course page.

-
+
+

Activation Invalid

+
+ +

Something went wrong. Check to make sure the URL you went to was + correct -- e-mail programs will sometimes split it into two + lines. If you still have issues, e-mail us to let us know what happened + at bugs@edx.org.

+ +

Or you can go back to the home page.

+
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index d20f377133..d35f6c3960 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -11,13 +11,13 @@ @@ -46,7 +46,7 @@

Class Starts - 9/2/2012

-
+
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index e9d10e9dc9..3222491421 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -17,17 +17,17 @@
  1. - + ${user.username}
  2. ▾ - +
diff --git a/lms/templates/portal/course_about.html b/lms/templates/portal/course_about.html index 0d68989e93..9b1b616e46 100644 --- a/lms/templates/portal/course_about.html +++ b/lms/templates/portal/course_about.html @@ -98,9 +98,6 @@
-