Skip to content

E
edx-platform
Commit 5644ed25 by Galen Frechette
Options

Merge branch 'prototype' into dormsbee/multicourse

parents f8ae7dc0 915810d4
Showing with 1031 additions and 790 deletions
lms/static/js/toggle_login_modal.js
$(document).ready(function () { $(document).ready(function () {
$('a.login').click(function() { $('a#login').click(function() {
$('.modal-wrapper').addClass("visible"); $('.modal.login-modal').addClass("visible");
$('.modal-overlay').addClass("visible");
}); });
$('div.close-modal').click(function() { $('div.close-modal').click(function() {
$('.modal-wrapper').removeClass("visible"); $('.modal.login-modal').removeClass("visible");
$('.modal-overlay').removeClass("visible");
});
$('a#signup').click(function() {
$('.modal.signup-modal').addClass("visible");
$('.modal-overlay').addClass("visible");
});
$('div.close-modal').click(function() {
$('.modal.signup-modal').removeClass("visible");
$('.modal-overlay').removeClass("visible");
}); });
}); });
lms/static/sass/_base_extends.scss
.faded-hr-divider { .faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0))); @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-vertical-divider { .faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0))); @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
left: 1px;
}
}
.horizontal-divider {
@extend .faded-hr-divider;
position: relative;
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
top: 1px;
}
}
lms/static/sass/_base_mixins.scss
@mixin vertically-and-horizontally-centered ( $height, $width ) { @mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%; left: 50%;
margin-left: -$width / 2; margin-left: -$width / 2;
margin-top: -$height / 2; //margin-top: -$height / 2;
min-height: $height; min-height: $height;
min-width: $width; min-width: $width;
position: fixed; position: absolute;
top: 35%; top: 150px;
} }
lms/static/sass/_index.scss
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
} }
a { a {
@include button(shiny, $pink); @include button(shiny, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
@include inline-block; @include inline-block;
...@@ -95,20 +95,7 @@ ...@@ -95,20 +95,7 @@
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
width: flex-grid(6); width: flex-grid(12);
&:first-child {
margin-right: flex-gutter();
}
&.find-courses {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
font: normal italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
}
} }
form { form {
......
lms/static/sass/_shared_forms.scss
...@@ -34,7 +34,7 @@ form { ...@@ -34,7 +34,7 @@ form {
} }
input[type="submit"] { input[type="submit"] {
@include button(shiny, $pink); @include button(shiny, $blue);
@include border-radius(3px); @include border-radius(3px);
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
height: 35px; height: 35px;
......
lms/static/sass/_shared_header.scss
...@@ -18,236 +18,233 @@ header.app { ...@@ -18,236 +18,233 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 16px 30px 0px 0px; margin: 16px 15px 0px 0px;
position: relative; position: relative;
&::after { img {
@extend .faded-vertical-divider; position: relative;
content: ""; z-index: 2;
display: block;
height: 50px;
position: absolute;
right: -15px;
top: -12px;
} }
}
a.discover-courses {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
display: block;
float: left;
font: normal 1rem/1.2rem $sans-serif;
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover { &:hover {
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 90px;
left: -20px;
position: absolute;
top: -32px;
width: 90px;
z-index: 1;
}
} }
} }
nav.guest { .divider {
float: right; @extend .vertical-divider;
@include inline-block;
height: 40px;
vertical-align: middle;
}
nav {
height: 40px;
margin-top: 8px;
&.find-courses {
float: left;
}
&.guest {
float: right;
}
ol { ol {
font-size: 0em; font-size: 0em;
li { li {
@include inline-block; @include inline-block;
margin-top: 12px; vertical-align: top;
padding: 0px 5px; }
position: relative;
vertical-align: bottom;
&:last-child { li.secondary {
padding-right: 0px; margin: 0px 15px;
}
a { a {
@include border-radius(3px); @include border-radius(3px);
border: 1px solid transparent; border: 1px solid transparent;
color: $base-font-color; @include box-sizing(border-box);
color: $lighter-base-font-color;
display: block; display: block;
font: normal italic 1.2rem/1.2rem $serif; font: normal italic 1.2rem/1.4rem $serif;
height: 15px; height: 30px;
padding: 8px; @include inline-block;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:hover { &:hover {
background: rgb(220,220,220);
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color; color: $base-font-color;
} }
} }
} }
}
}
nav.user {
float: right;
ol {
font-size: 0em;
li { li.primary {
border-right: 1px solid rgb(200,200,200);
@include inline-block;
margin-top: 10px;
padding: 0px 5px;
position: relative; position: relative;
vertical-align: bottom;
a { a {
border: 1px solid transparent;
@include border-radius(3px); @include border-radius(3px);
color: $lighter-base-font-color; @include box-sizing(border-box);
color: $base-font-color;
display: block; display: block;
font: normal italic 1.2rem/1.2rem $serif; font: normal 1.2rem/1.4rem $sans-serif;
height: 15px; height: 38px;
padding: 10px; @include inline-block;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover {
background: rgb(220,220,220);
color: $base-font-color;
}
&.active {
background: rgb(220,220,220);
color: $base-font-color;
}
&.options { &:hover, &.active {
font: normal 1.2rem/1.2rem $sans-serif; @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
padding-right: 10px; border-color: rgb(200,200,200);
text-transform: none; @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
} }
}
}
}
&.user-link { &.user {
font: normal 1.2rem/1.2rem $sans-serif; float: right;
padding: 10px 10px 10px 45px;
text-transform: none;
@media screen and (max-width: 768px) {
font-size: 0em;
padding: 10px 0px;
width: 38px;
}
.avatar {
background: rgb(220,220,220);
@include border-radius(3px);
border: 1px solid rgb(180,180,180);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 22px;
@include inline-block;
left: 15px;
overflow: hidden;
position: absolute;
top: 5px;
width: 22px;
&::after { a.user-link {
@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%)); padding: 9px 8px 11px 40px;
content: ""; position: relative;
display: block; text-transform: none;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
}
img { @media screen and (max-width: 768px) {
@include border-radius(4px); font-size: 0em;
display: block; padding: 10px 0px;
min-height: 100%; width: 38px;
min-width: 100%;
height: 100%;
}
}
}
} }
ol.user-options { .avatar {
@include border-radius(4px);
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(200,200,200);
background: rgb(220,220,220); background: rgb(220,220,220);
display: none; @include border-radius(3px);
right: 4px; border: 1px solid rgb(180,180,180);
padding: 5px 10px; @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 22px;
@include inline-block;
left: 8px;
overflow: hidden;
position: absolute; position: absolute;
top: 50px; top: 6px;
width: 170px; width: 22px;
z-index: 3;
&.expanded { &::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; display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
} }
&::before { img {
background: transparent; @include border-radius(4px);
border: {
top: 8px solid rgb(220,220,220);
right: 8px solid rgb(220,220,220);
bottom: 8px solid transparent;
left: 8px solid transparent;
}
@include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200));
content: "";
display: block; display: block;
height: 0px; min-height: 100%;
position: absolute; min-width: 100%;
@include transform(rotate(-45deg)); height: 100%;
right: 10px;
top: -7px;
width: 0px;
} }
}
}
li { ol.user-options {
border: { @include border-radius(4px);
top: 1px solid rgb(200,200,200); @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
right: none; border: 1px solid rgb(0,0,0);
bottom: none; @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
left: none; rgba(0,0,0, 0.7) 100%));
} display: none;
margin: 0px; right: 0px;
padding: 0px; padding: 5px 10px;
width: 100%; position: absolute;
top: 52px;
width: 150px;
z-index: 3;
&.expanded {
display: block;
}
&:first-child { &::before {
border: none; background: transparent;
} border: {
top: 6px solid rgba(0,0,0, 1);
right: 6px solid rgba(0,0,0, 1);
bottom: 6px solid transparent;
left: 6px solid transparent;
}
@include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
content: "";
display: block;
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
right: 12px;
top: -6px;
width: 0px;
}
li {
display: block;
border-top: 1px solid rgba(0,0,0, 0.4);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
a { &:first-child {
@include box-sizing(border-box); border: none;
display: block; @include box-shadow(none);
font: normal 1rem/1.2rem $sans-serif; }
height: auto;
margin: 5px 0px; > a {
overflow: hidden; @include box-sizing(border-box);
padding: 5px; color: rgba(255,255,255, 0.9);
text-overflow: ellipsis; display: block;
@include transition(padding, 0.1s, linear); font: normal italic 1.2rem/1.4rem $serif;
white-space: nowrap; height: auto;
width: 100%; margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
@include transition(padding, 0.1s, linear);
white-space: nowrap;
width: 100%;
&:hover { &:hover {
background: rgb(255,255,255); background: $blue;
padding: 5px 8px; @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);
} }
} }
} }
......
lms/static/sass/_shared_login_modal.scss → lms/static/sass/_shared_modal.scss
.modal-wrapper { .modal-overlay {
@include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7))); //background: rgba(255,255,255, 0.7);
@include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0; bottom: 0;
content: ""; content: "";
display: none; display: none;
...@@ -12,43 +13,60 @@ ...@@ -12,43 +13,60 @@
&.visible { &.visible {
display: block; display: block;
} }
}
.modal {
background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(0px);
@include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5));
color: #fff;
display: none;
left: 50%;
margin-left: -(grid-width(6)) / 2;
padding: 8px;
position: absolute;
top: 170px;
width: grid-width(6);
z-index: 10;
&.visible {
display: block;
}
.login-modal { .inner-wrapper {
background: rgba(0,0,0, 0.6); background: rgb(240,240,240);
@include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(4px); @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
@include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5)); overflow: hidden;
color: #fff; padding-bottom: 30px;
padding: 10px; position: relative;
width: grid-width(7);
@include vertically-and-horizontally-centered(400px, grid-width(7)); header {
z-index: 10; margin-bottom: 30px;
.inner-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
@include border-radius(4px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 380px;
overflow: hidden; overflow: hidden;
padding: 30px; padding: 28px 20px 0px;
position: relative; position: relative;
z-index: 2;
&::before { &::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: ""; content: "";
display: block; display: block;
height: 400px; height: 400px;
left: 0px; left: 0px;
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
bottom: -140px; top: -140px;
width: 100%; width: 100%;
z-index: 1;
} }
header { hr {
margin-bottom: 30px; @extend .faded-hr-divider-light;
padding-top: 5px; border: none;
margin: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
...@@ -58,120 +76,177 @@ ...@@ -58,120 +76,177 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: -1px;
} }
}
h3 { h3 {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif; font: normal 1.4rem/1.8rem $serif;
padding-bottom: 20px; padding-bottom: 20px;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
position: relative;
z-index: 2;
}
}
form {
margin-bottom: 12px;
padding: 0px 40px;
position: relative;
z-index: 2;
label {
display: none;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="email"],
input[type="text"],
input[type="password"] {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
label.remember-me,
label.terms-of-service,
label.honor-code {
background: rgb(233,233,233);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 20px;
padding: 8px 10px;
&:hover {
background: rgb(230,230,230);
} }
a {
font: normal 1.2rem/1.6rem $serif;
text-decoration: underline;
&:hover {
}
}
} }
form { .honor-code-summary {
@include clearfix; margin-bottom: 20px;
padding: 0px;
position: relative; position: relative;
z-index: 2;
label { p {
display: none; color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
} }
label.remember-me { hr {
background: rgb(230,230,230); @extend .faded-hr-divider-light;
border: 1px solid rgb(200,200,200); border: none;
@include border-radius(3px); margin-top: 30px;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 60px;
padding: 8px 10px;
position: relative; position: relative;
z-index: 2;
&::before { &::after {
@extend .faded-hr-divider; @extend .faded-hr-divider;
bottom: -30px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: -1px;
} }
} }
input[type="checkbox"] { ul {
margin-right: 5px; @include box-sizing(border-box);
} margin: 0;
padding: 0 0 0 20px;
input[type="email"],
input[type="password"] {
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%; width: 100%;
li {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0px;
}
}
} }
}
.submit {
padding-top: 10px;
input[type="submit"] { input[type="submit"] {
display: block; display: block;
height: 45px; height: 45px;
margin: 0 auto; margin: 0 auto;
width: 70%; width: 100%;
} }
} }
}
.login-extra { .login-extra {
padding: 15px 0px; position: relative;
position: relative; z-index: 2;
p {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-align: center;
p { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
text-align: center; text-decoration: underline;
a { &:hover {
color: $lighter-base-font-color; color: $base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline;
} }
}
span + a { span + a {
margin-left: 15px; margin-left: 15px;
}
} }
} }
}
.close-modal { .close-modal {
//background: rgb(240,240,240); @include border-radius(2px);
//border: 1px solid rgba(180,180,180, 0.7); cursor: pointer;
@include border-radius(2px); @include inline-block;
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1)); padding: 10px;
cursor: pointer; position: absolute;
@include inline-block; right: 2px;
padding: 5px 10px; top: 0px;
position: absolute; z-index: 3;
right: 5px;
top: 5px; .inner {
@include transition(all, 0.15s, ease-out); p {
color: $lighter-base-font-color;
.inner { font: normal 1.2rem/1.2rem $sans-serif;
p { text-align: center;
color: $lighter-base-font-color; text-shadow: 0 1px rgba(255,255,255, 0.8);
font: normal 1.2rem/1.2rem $sans-serif; @include transition(all, 0.15s, ease-out);
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all, 0.15s, ease-out);
}
} }
}
&:hover { &:hover {
//background: rgb(235,235,235); p {
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125)); color: $base-font-color;
p {
color: $base-font-color;
}
} }
} }
} }
......
lms/static/sass/application.css
...@@ -340,24 +340,58 @@ a:link, a:visited { ...@@ -340,24 +340,58 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .modal-wrapper .login-modal .inner-wrapper header::after, .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before, .home .university-partners:before, .home .university-partners:after { .faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .home .university-partners:before, .home .university-partners:after {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-vertical-divider, header.app a.logo::after { .faded-hr-divider-light, .horizontal-divider::after, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
height: 1px;
width: 100%; }
.faded-vertical-divider, .vertical-divider, header.app .divider {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -o-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 100%; height: 100%;
width: 1px; } width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
height: 100%;
width: 1px; }
.vertical-divider, header.app .divider {
position: relative; }
.vertical-divider::after, header.app .divider::after {
content: "";
display: block;
position: absolute;
left: 1px; }
.horizontal-divider {
position: relative; }
.horizontal-divider::after {
content: "";
display: block;
position: absolute;
top: 1px; }
.animation-title-appear { .animation-title-appear {
-webkit-animation: title-appear 4.65s ease-out; -webkit-animation: title-appear 4.65s ease-out;
-moz-animation: title-appear 4.65s ease-out; -moz-animation: title-appear 4.65s ease-out;
...@@ -843,29 +877,29 @@ form { ...@@ -843,29 +877,29 @@ form {
box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
outline: none; } outline: none; }
form input[type="submit"] { form input[type="submit"] {
border: 1px solid #410017; border: 1px solid #002e88;
border-bottom: 1px solid #380000; border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #db4274; -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #db4274; -moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #db4274; box-shadow: inset 0 1px 0 0 #42bae5;
color: white; color: white;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
background-color: #b62568; background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px; padding: 8px 20px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #2a0000; text-shadow: 0 -1px 1px #001067;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
...@@ -880,17 +914,17 @@ form { ...@@ -880,17 +914,17 @@ form {
vertical-align: top; } vertical-align: top; }
form input[type="submit"]:hover:not(:disabled) { form input[type="submit"]:hover:not(:disabled) {
cursor: pointer; cursor: pointer;
background-color: #a91656; background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); } background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
form input[type="submit"]:active:not(:disabled) { form input[type="submit"]:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
form input[type="submit"]:disabled { form input[type="submit"]:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; } cursor: not-allowed; }
...@@ -996,69 +1030,104 @@ header.app { ...@@ -996,69 +1030,104 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 16px 30px 0px 0px; margin: 16px 15px 0px 0px;
position: relative; } position: relative; }
header.app a.logo::after { header.app a.logo img {
position: relative;
z-index: 2; }
header.app a.logo:hover::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
content: ""; content: "";
display: block; display: block;
height: 50px; height: 90px;
left: -20px;
position: absolute; position: absolute;
right: -15px; top: -32px;
top: -12px; } width: 90px;
header.app a.discover-courses { z-index: 1; }
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); header.app .divider {
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); display: inline-block;
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); vertical-align: baseline;
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); zoom: 1;
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); *display: inline;
border: 1px solid #c8c8c8; *vertical-align: auto;
-webkit-border-radius: 3px; height: 40px;
-moz-border-radius: 3px; vertical-align: middle; }
border-radius: 3px; header.app nav {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); height: 40px;
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); margin-top: 8px; }
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); header.app nav.find-courses {
color: #3c3c3c; float: left; }
display: block; header.app nav.guest {
float: left; float: right; }
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; header.app nav ol {
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
header.app nav.guest {
float: right; }
header.app nav.guest ol {
font-size: 0em; } font-size: 0em; }
header.app nav.guest ol li { header.app nav ol li {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-top: 12px; vertical-align: top; }
padding: 0px 5px; header.app nav ol li.secondary {
position: relative; margin: 0px 15px; }
vertical-align: bottom; } header.app nav ol li.secondary a {
header.app nav.guest ol li:last-child {
padding-right: 0px; }
header.app nav.guest ol li a {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
color: #3c3c3c; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #a0a0a0;
display: block; display: block;
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 15px; height: 30px;
padding: 8px; display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } text-shadow: 0 1px rgba(255, 255, 255, 0.6);
header.app nav.guest ol li a:hover { vertical-align: middle; }
background: #dcdcdc; header.app nav ol li.secondary a:last-child {
margin-right: 0px; }
header.app nav ol li.secondary a:hover {
color: #3c3c3c; }
header.app nav ol li.primary {
position: relative; }
header.app nav ol li.primary a {
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #3c3c3c;
display: block;
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
height: 38px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
vertical-align: middle; }
header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
...@@ -1067,165 +1136,147 @@ header.app { ...@@ -1067,165 +1136,147 @@ header.app {
border-color: #c8c8c8; border-color: #c8c8c8;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -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); -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); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
color: #3c3c3c; } header.app nav.user {
header.app nav.user { float: right; }
float: right; } header.app nav.user a.user-link {
header.app nav.user ol { padding: 9px 8px 11px 40px;
font-size: 0em; }
header.app nav.user ol li {
border-right: 1px solid #c8c8c8;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 10px;
padding: 0px 5px;
position: relative; position: relative;
vertical-align: bottom; } text-transform: none; }
header.app nav.user ol li a { @media screen and (max-width: 768px) {
header.app nav.user a.user-link {
font-size: 0em;
padding: 10px 0px;
width: 38px; } }
header.app nav.user a.user-link .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
color: #a0a0a0; border: 1px solid #b4b4b4;
display: block; -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
height: 15px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
padding: 10px; height: 22px;
text-decoration: none; display: inline-block;
text-transform: lowercase; vertical-align: baseline;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); } zoom: 1;
header.app nav.user ol li a:hover { *display: inline;
background: #dcdcdc; *vertical-align: auto;
color: #3c3c3c; } left: 8px;
header.app nav.user ol li a.active { overflow: hidden;
background: #dcdcdc;
color: #3c3c3c; }
header.app nav.user ol li a.options {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
padding-right: 10px;
text-transform: none; }
header.app nav.user ol li a.user-link {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 10px 10px 10px 45px;
text-transform: none; }
@media screen and (max-width: 768px) {
header.app nav.user ol li a.user-link {
font-size: 0em;
padding: 10px 0px;
width: 38px; } }
header.app nav.user ol li a.user-link .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #b4b4b4;
-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: 22px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
left: 15px;
overflow: hidden;
position: absolute;
top: 5px;
width: 22px; }
header.app nav.user ol li 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.app nav.user ol li a.user-link .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
height: 100%; }
header.app nav.user ol li ol.user-options {
-webkit-border-radius: 4px;
-moz-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 #c8c8c8;
background: #dcdcdc;
display: none;
right: 4px;
padding: 5px 10px;
position: absolute; position: absolute;
top: 50px; top: 6px;
width: 170px; width: 22px; }
z-index: 3; } header.app nav.user a.user-link .avatar::after {
header.app nav.user ol li ol.user-options.expanded { 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%);
display: block; } 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%);
header.app nav.user ol li ol.user-options::before { 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: transparent; 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%);
border-top: 8px solid #dcdcdc; 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%);
border-right: 8px solid #dcdcdc;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
-webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
-moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
content: ""; content: "";
display: block; display: block;
height: 0px; height: 100%;
position: absolute; position: absolute;
-webkit-transform: rotate(-45deg); right: 0px;
-moz-transform: rotate(-45deg); top: 0px;
-ms-transform: rotate(-45deg); width: 100%; }
-o-transform: rotate(-45deg); header.app nav.user a.user-link .avatar img {
transform: rotate(-45deg); -webkit-border-radius: 4px;
right: 10px; -moz-border-radius: 4px;
top: -7px; border-radius: 4px;
width: 0px; } display: block;
header.app nav.user ol li ol.user-options li { min-height: 100%;
border-top: 1px solid #c8c8c8; min-width: 100%;
border-right: none; height: 100%; }
border-bottom: none; header.app nav.user ol.user-options {
border-left: none; -webkit-border-radius: 4px;
margin: 0px; -moz-border-radius: 4px;
padding: 0px; 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%);
display: none;
right: 0px;
padding: 5px 10px;
position: absolute;
top: 52px;
width: 150px;
z-index: 3; }
header.app nav.user ol.user-options.expanded {
display: block; }
header.app nav.user ol.user-options::before {
background: transparent;
border-top: 6px solid black;
border-right: 6px solid black;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
-moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
content: "";
display: block;
height: 0px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 12px;
top: -6px;
width: 0px; }
header.app nav.user ol.user-options li {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.4);
-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); }
header.app nav.user ol.user-options li:first-child {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
header.app nav.user ol.user-options li > a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.9);
display: block;
font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: auto;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
-webkit-transition: padding, 0.1s, linear;
-moz-transition: padding, 0.1s, linear;
-ms-transition: padding, 0.1s, linear;
-o-transition: padding, 0.1s, linear;
transition: padding, 0.1s, linear;
white-space: nowrap;
width: 100%; } width: 100%; }
header.app nav.user ol li ol.user-options li:first-child { header.app nav.user ol.user-options li > a:hover {
border: none; } background: #1d9dd9;
header.app nav.user ol li ol.user-options li a { background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
-webkit-box-sizing: border-box; background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
-moz-box-sizing: border-box; background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
box-sizing: border-box; background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
display: block; background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; border-color: black;
height: auto; -webkit-box-shadow: none;
margin: 5px 0px; -moz-box-shadow: none;
overflow: hidden; box-shadow: none;
padding: 5px; padding-left: 8px;
text-overflow: ellipsis; text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
-webkit-transition: padding, 0.1s, linear;
-moz-transition: padding, 0.1s, linear;
-ms-transition: padding, 0.1s, linear;
-o-transition: padding, 0.1s, linear;
transition: padding, 0.1s, linear;
white-space: nowrap;
width: 100%; }
header.app nav.user ol li ol.user-options li a:hover {
background: white;
padding: 5px 8px; }
.courses { .courses {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -1629,12 +1680,12 @@ header.app { ...@@ -1629,12 +1680,12 @@ header.app {
border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;
height: 36px; } height: 36px; }
.modal-wrapper { .modal-overlay {
background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); background-image: -webkit-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); background-image: -moz-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); background-image: -ms-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); background-image: -o-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); background-image: radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
bottom: 0; bottom: 0;
content: ""; content: "";
display: none; display: none;
...@@ -1643,163 +1694,203 @@ header.app { ...@@ -1643,163 +1694,203 @@ header.app {
right: 0; right: 0;
top: 0; top: 0;
z-index: 5; } z-index: 5; }
.modal-wrapper.visible { .modal-overlay.visible {
display: block; } display: block; }
.modal-wrapper .login-modal {
background: rgba(0, 0, 0, 0.6); .modal {
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
color: #fff;
display: none;
left: 50%;
margin-left: -242.5px;
padding: 8px;
position: absolute;
top: 170px;
width: 485px;
z-index: 10; }
.modal.visible {
display: block; }
.modal .inner-wrapper {
background: #f0f0f0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-moz-border-radius: 4px; -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
border-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-webkit-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5); overflow: hidden;
-moz-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5); padding-bottom: 30px;
box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5); position: relative; }
color: #fff; .modal .inner-wrapper header {
padding: 10px; margin-bottom: 30px;
width: 570px;
left: 50%;
margin-left: -285px;
margin-top: -200px;
min-height: 400px;
min-width: 570px;
position: fixed;
top: 35%;
z-index: 10; }
.modal-wrapper .login-modal .inner-wrapper {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -o-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
height: 380px;
overflow: hidden; overflow: hidden;
padding: 30px; padding: 28px 20px 0px;
position: relative; } position: relative;
.modal-wrapper .login-modal .inner-wrapper::before { z-index: 2; }
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); .modal .inner-wrapper header::before {
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
content: ""; content: "";
display: block; display: block;
height: 400px; height: 400px;
left: 0px; left: 0px;
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
bottom: -140px; top: -140px;
width: 100%; } width: 100%;
.modal-wrapper .login-modal .inner-wrapper header { z-index: 1; }
margin-bottom: 30px; .modal .inner-wrapper header hr {
padding-top: 5px; border: none;
margin: 0px;
position: relative; position: relative;
z-index: 2; } z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper header::after { .modal .inner-wrapper header hr::after {
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
position: absolute; } position: absolute;
.modal-wrapper .login-modal .inner-wrapper header h3 { top: -1px; }
color: #a0a0a0; .modal .inner-wrapper header h3 {
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; color: #a0a0a0;
padding-bottom: 20px; font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: center; padding-bottom: 20px;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); text-align: center;
text-transform: uppercase; text-shadow: 0 1px rgba(255, 255, 255, 0.4);
vertical-align: middle; } text-transform: uppercase;
.modal-wrapper .login-modal .inner-wrapper form { vertical-align: middle;
zoom: 1;
position: relative; position: relative;
z-index: 2; } z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper form:before, .modal-wrapper .login-modal .inner-wrapper form:after { .modal .inner-wrapper form {
content: ""; margin-bottom: 12px;
display: table; } padding: 0px 40px;
.modal-wrapper .login-modal .inner-wrapper form:after { position: relative;
clear: both; } z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper form label { .modal .inner-wrapper form label {
display: none; } display: none; }
.modal-wrapper .login-modal .inner-wrapper form label.remember-me { .modal .inner-wrapper form input[type="checkbox"] {
background: #e6e6e6; margin-right: 5px; }
border: 1px solid #c8c8c8; .modal .inner-wrapper form input[type="email"],
-webkit-border-radius: 3px; .modal .inner-wrapper form input[type="text"],
-moz-border-radius: 3px; .modal .inner-wrapper form input[type="password"] {
border-radius: 3px; background: white;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); display: block;
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); height: 45px;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); margin-bottom: 20px;
display: block; width: 100%; }
margin-bottom: 60px; .modal .inner-wrapper form label.remember-me,
padding: 8px 10px; .modal .inner-wrapper form label.terms-of-service,
position: relative; } .modal .inner-wrapper form label.honor-code {
.modal-wrapper .login-modal .inner-wrapper form label.remember-me::before { background: #e9e9e9;
bottom: -30px; border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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);
display: block;
margin-bottom: 20px;
padding: 8px 10px; }
.modal .inner-wrapper form label.remember-me:hover,
.modal .inner-wrapper form label.terms-of-service:hover,
.modal .inner-wrapper form label.honor-code:hover {
background: #e6e6e6; }
.modal .inner-wrapper form label.remember-me a,
.modal .inner-wrapper form label.terms-of-service a,
.modal .inner-wrapper form label.honor-code a {
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-decoration: underline; }
.modal .inner-wrapper form .honor-code-summary {
margin-bottom: 20px;
padding: 0px;
position: relative; }
.modal .inner-wrapper form .honor-code-summary p {
color: #a0a0a0;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; }
.modal .inner-wrapper form .honor-code-summary hr {
border: none;
margin-top: 30px;
position: relative;
z-index: 2; }
.modal .inner-wrapper form .honor-code-summary hr::after {
bottom: 0px;
content: ""; content: "";
display: block; display: block;
position: absolute; } position: absolute;
.modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] { top: -1px; }
margin-right: 5px; } .modal .inner-wrapper form .honor-code-summary ul {
.modal-wrapper .login-modal .inner-wrapper form input[type="email"], -webkit-box-sizing: border-box;
.modal-wrapper .login-modal .inner-wrapper form input[type="password"] { -moz-box-sizing: border-box;
display: block; box-sizing: border-box;
height: 45px; margin: 0;
margin-bottom: 20px; padding: 0 0 0 20px;
width: 100%; } width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form input[type="submit"] { .modal .inner-wrapper form .honor-code-summary ul li {
color: #a0a0a0;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 10px; }
.modal .inner-wrapper form .honor-code-summary ul li:last-child {
margin-bottom: 0px; }
.modal .inner-wrapper form .submit {
padding-top: 10px; }
.modal .inner-wrapper form .submit input[type="submit"] {
display: block; display: block;
height: 45px; height: 45px;
margin: 0 auto; margin: 0 auto;
width: 70%; } width: 100%; }
.modal-wrapper .login-modal .inner-wrapper .login-extra { .modal .inner-wrapper .login-extra {
padding: 15px 0px; position: relative;
position: relative; } z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p { .modal .inner-wrapper .login-extra p {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: center; }
.modal .inner-wrapper .login-extra p a {
color: #a0a0a0; color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: center; } text-decoration: underline; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p a { .modal .inner-wrapper .login-extra p a:hover {
color: #a0a0a0; color: #3c3c3c; }
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; .modal .inner-wrapper .login-extra p span + a {
text-decoration: underline; } margin-left: 15px; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p span + a { .modal .inner-wrapper .close-modal {
margin-left: 15px; } -webkit-border-radius: 2px;
.modal-wrapper .login-modal .inner-wrapper .close-modal { -moz-border-radius: 2px;
-webkit-border-radius: 2px; border-radius: 2px;
-moz-border-radius: 2px; cursor: pointer;
border-radius: 2px; display: inline-block;
cursor: pointer; vertical-align: baseline;
display: inline-block; zoom: 1;
vertical-align: baseline; *display: inline;
zoom: 1; *vertical-align: auto;
*display: inline; padding: 10px;
*vertical-align: auto; position: absolute;
padding: 5px 10px; right: 2px;
position: absolute; top: 0px;
right: 5px; z-index: 3; }
top: 5px; .modal .inner-wrapper .close-modal .inner p {
color: #a0a0a0;
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
-webkit-transition: all, 0.15s, ease-out; -webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out; -moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out; -ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out; -o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; } transition: all, 0.15s, ease-out; }
.modal-wrapper .login-modal .inner-wrapper .close-modal .inner p { .modal .inner-wrapper .close-modal:hover p {
color: #a0a0a0; color: #3c3c3c; }
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
-webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; }
.modal-wrapper .login-modal .inner-wrapper .close-modal:hover p {
color: #3c3c3c; }
.home { .home {
margin: 50px 10px 100px; } margin: 50px 10px 100px; }
...@@ -1900,29 +1991,29 @@ header.app { ...@@ -1900,29 +1991,29 @@ header.app {
-moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); -moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); } box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); }
.home > header .welcome .signup-wrapper .sign-up a { .home > header .welcome .signup-wrapper .sign-up a {
border: 1px solid #410017; border: 1px solid #002e88;
border-bottom: 1px solid #380000; border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #db4274; -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #db4274; -moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #db4274; box-shadow: inset 0 1px 0 0 #42bae5;
color: white; color: white;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
background-color: #b62568; background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px; padding: 8px 20px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #2a0000; text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
...@@ -1938,78 +2029,23 @@ header.app { ...@@ -1938,78 +2029,23 @@ header.app {
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
width: 48.744%; } width: 100%; }
.home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) {
cursor: pointer; cursor: pointer;
background-color: #a91656; background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); } background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a:disabled { .home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; } cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up a:first-child {
margin-right: 2.513%; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 15px 0px; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:hover:not(:disabled) {
cursor: pointer;
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"], .home > header .welcome .signup-wrapper .sign-up form input[type="text"],
.home > header .welcome .signup-wrapper .sign-up form input[type="email"], .home > header .welcome .signup-wrapper .sign-up form input[type="email"],
.home > header .welcome .signup-wrapper .sign-up form input[type="password"] { .home > header .welcome .signup-wrapper .sign-up form input[type="password"] {
...@@ -2555,7 +2591,7 @@ nav.course-material { ...@@ -2555,7 +2591,7 @@ nav.course-material {
padding-bottom: 20px; padding-bottom: 20px;
position: relative; position: relative;
width: 31.658%; } width: 31.658%; }
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after { .course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
......
lms/static/sass/application.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
@import 'shared_header'; @import 'shared_header';
@import 'shared_list_of_courses'; @import 'shared_list_of_courses';
@import 'shared_course_filter'; @import 'shared_course_filter';
@import 'shared_login_modal'; @import 'shared_modal';
@import 'index'; @import 'index';
@import 'dashboard'; @import 'dashboard';
......
lms/templates/about.html 0 → 100644
<%inherit file="main.html" />
<h1>About Us</h1>
lms/templates/index.html
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
<div class="signup-wrapper"> <div class="signup-wrapper">
<section class="sign-up"> <section class="sign-up">
<a href="#" class="find-courses">Find Courses</a> <a href="#" class="find-courses">Find Courses</a>
<a href="#" class="create-account">Sign Up</a>
</section> </section>
</div> </div>
</section> </section>
......
lms/templates/jobs.html 0 → 100644
<%inherit file="main.html" />
<h1>Jobs</h1>
lms/templates/login_modal.html
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<section class="modal-wrapper"> <section class="modal login-modal">
<section class="login-modal"> <div class="inner-wrapper">
<div class="inner-wrapper"> <header>
<header> <h3>Log In</h3>
<h3>Log In</h3> <hr>
</header> </header>
<form id="login_form" method="post"> <form id="login_form" method="post">
<label>E-mail</label> <label>E-mail</label>
<input name="email" type="email" placeholder="e-mail"> <input name="email" type="email" placeholder="E-mail">
<label>Password</label> <label>Password</label>
<input name="password" type="password" placeholder="password"> <input name="password" type="password" placeholder="Password">
<label class="remember-me"> <label class="remember-me">
<input name="remember" type="checkbox"> <input name="remember" type="checkbox">
Remember me Remember me
</label> </label>
<div class="submit">
<input name="submit" type="submit" value="Submit"> <input name="submit" type="submit" value="Submit">
</form> </div>
</form>
<section class="login-extra"> <section class="login-extra">
<p> <p>
<span>Not enrolled? <a href="#">Sign up.</a></span> <span>Not enrolled? <a href="#">Sign up.</a></span>
<a href="#" class="pwd-reset">Forgot password?</a> <a href="#" class="pwd-reset">Forgot password?</a>
</p> </p>
</section> </section>
<div class="close-modal"> <div class="close-modal">
<div class="inner"> <div class="inner">
<p>&#10005;</p> <p>&#10005;</p>
</div>
</div> </div>
</div> </div>
</section> </div>
</section> </section>
<script type="text/javascript"> <script type="text/javascript">
function getCookie(name) { function getCookie(name) {
var cookieValue = null; var cookieValue = null;
...@@ -68,7 +70,7 @@ function postJSON(url, data, callback) { ...@@ -68,7 +70,7 @@ function postJSON(url, data, callback) {
submit_data, submit_data,
function(json) { function(json) {
if(json.success) { if(json.success) {
location.href="/info"; location.href="/courses";
} else if($('#login_error').length == 0) { } else if($('#login_error').length == 0) {
$('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>'); $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
} else { } else {
......
lms/templates/navigation.html
...@@ -7,21 +7,35 @@ ...@@ -7,21 +7,35 @@
<a href="${ MITX_ROOT_URL }" class="logo"> <a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" /> <img src="${static.url('images/logo.png')}" />
</a> </a>
<a href="/courses" class="discover-courses">Find Courses</a> <nav class="find-courses">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="/courses">Find Courses</a>
<div class="divider"></div>
</li>
<li class="secondary">
<a href="/about">About</a>
<a href="#">Blog</a>
<a href="/jobs">Jobs</a>
</li>
</ol>
</nav>
%if user.is_authenticated(): %if user.is_authenticated():
<h1>${ settings.COURSE_TITLE }</h1>
<nav class="user"> <nav class="user">
<ol> <ol>
<li> <li class="primary">
<div class="divider"></div>
<a href="/dashboard" class="user-link"> <a href="/dashboard" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span> <span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
Neil deGrasse Tyson Neil deGrasse Tyson
</a> </a>
</li> <div class="divider"></div>
<li>
<a href="#" class="options">&#9662</a> <a href="#" class="options">&#9662</a>
<div class="divider"></div>
<ol class="user-options"> <ol class="user-options">
<li><a href="#">Account Settings</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
<li><a href="/logout">Log Out</a></li> <li><a href="/logout">Log Out</a></li>
</ol> </ol>
...@@ -32,20 +46,12 @@ ...@@ -32,20 +46,12 @@
%else: %else:
<nav class="guest"> <nav class="guest">
<ol> <ol>
<li> <li class="primary">
<a href="#">About</a> <div class="divider"></div>
</li> <a href="#" id="login">Log In</a>
<li> <div class="divider"></div>
<a href="#">Blog</a> <a href="#" id="signup">Sign Up</a>
</li> <div class="divider"></div>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#" class="login">Log In</a>
</li>
<li>
<a href="#">Sign Up</a>
</li> </li>
</ol> </ol>
</nav> </nav>
...@@ -55,4 +61,8 @@ ...@@ -55,4 +61,8 @@
%if not user.is_authenticated(): %if not user.is_authenticated():
<%include file="login_modal.html" /> <%include file="login_modal.html" />
<%include file="signup_modal.html" />
<section class="modal-overlay">
</section>
%endif %endif
lms/templates/signup_modal.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
<section class="modal signup-modal">
<div class="inner-wrapper">
<header>
<h3>Sign Up for edX</h3>
<hr>
</header>
<form id="login_form" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label>Public Username</label>
<input name="username" type="text" placeholder="Public Username">
<label>Full Name</label>
<input name="fullname" type="text" placeholder="Full Name">
<label>Your Location</label>
<input name="location" type="text" placeholder="Your Location">
<label>Prefered Language</label>
<input name="language" type="text" placeholder="Prefered Language">
<label class="terms-of-service">
<input name="terms-of-service" type="checkbox">
I agree to the
<a href="#">Terms of Service</a>
</label>
<label class="honor-code">
<input name="honor-code" type="checkbox">
I agree to the
<a href="#">Honor Code</a>
, sumarized below as:
</label>
<div class="honor-code-summary">
<ul>
<li>
<p>Complete all mid-terms and final exams with only my own work.</p>
</li>
<li>
<p>Maintain only one account, and not share the username or password.</p>
</li>
<li>
<p>Not engage in any activity that would dishonestly improve my results, or improve or hurt those of others.</p>
</li>
<li>
<p>Not post answers to problems that are being used to assess student performance.</p>
</li>
</ul>
<hr>
</div>
<div class="submit">
<input name="submit" type="submit" value="Create My Account">
</div>
</form>
<section class="login-extra">
<p>
<span>Already have an account? <a href="#">Login.</a></span>
</p>
</section>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
</div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment