Skip to content

E
edx-platform
Commit de8fb63b by Galen Frechette
Options

wip course info/profile page

parent 9f319828
Showing with 362 additions and 130 deletions
lms/static/sass/_course_info.scss
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
} }
header.course-profile { header.course-profile {
background: rgb(240,240,240); background: rgb(245,245,245);
@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 40px 0px 40px; padding: 50px 0px 40px;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
...@@ -41,8 +41,6 @@ ...@@ -41,8 +41,6 @@
z-index: 2; z-index: 2;
> hgroup { > hgroup {
//@include inline-block;
//padding: 0 30px;
position: relative; position: relative;
hr { hr {
...@@ -69,9 +67,9 @@ ...@@ -69,9 +67,9 @@
h1 { h1 {
font: bold 2.8rem/3.2rem $sans-serif; font: bold 2.8rem/3.2rem $sans-serif;
margin-bottom: 0px; @include inline-block;
margin-right: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
//text-align: center;
span { span {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -81,7 +79,7 @@ ...@@ -81,7 +79,7 @@
} }
h2 { h2 {
//text-align: center; @include inline-block;
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -94,31 +92,92 @@ ...@@ -94,31 +92,92 @@
} }
} }
} }
.course-dates {
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
}
}
}
} }
.actions { .actions {
float: left; float: left;
padding-top: 5px;
position: relative; position: relative;
width: flex-grid(4); width: flex-grid(4);
z-index: 2; z-index: 2;
a.register { &:hover {
@include button(shiny, $blue); .register-wrapper {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(180,180,180);
}
}
.register-wrapper {
@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%));
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
display: block; border: 1px solid rgb(210,210,210);
font: italic 1.2rem/1.6rem $serif; @include border-radius(4px);
margin-bottom: 10px; @include transition(all, 0.15s, linear);
padding: 10px 0px; padding: 10px;
text-transform: uppercase;
text-align: center; a.register {
width: flex-grid(12); @include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
font: italic 1.2rem/1.6rem $serif;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: flex-grid(12);
z-index: 1;
}
} }
.social-sharing { .social-sharing {
background: rgb(230,230,230); padding: 0px 20px;
height: 40px;
p {
background: rgb(245,245,245);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 5px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin: 0;
}
> span {
font: normal 1.2rem/1.6rem $sans-serif;
margin-right: 5px;
}
}
} }
} }
} }
...@@ -131,8 +190,7 @@ ...@@ -131,8 +190,7 @@
border-bottom: 1px solid rgb(220,220,220); border-bottom: 1px solid rgb(220,220,220);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin-bottom: 40px; margin: 40px 0;
//text-align: center;
width: flex-grid(12); width: flex-grid(12);
&::after { &::after {
...@@ -142,14 +200,22 @@ ...@@ -142,14 +200,22 @@
} }
a { a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color; color: $lighter-base-font-color;
@include inline-block; @include inline-block;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
padding: 30px 20px; margin: 0 15px;
padding: 0px 5px 15px;
text-align: center; text-align: center;
text-transform: uppercase;
&:first-child {
margin-left: 0px;
}
&:hover, &.active { &:hover, &.active {
background: rgb(240,240,240); border-color: $pink;
//background: rgb(240,240,240);
color: $base-font-color; color: $base-font-color;
} }
} }
...@@ -175,8 +241,6 @@ ...@@ -175,8 +241,6 @@
width: flex-grid(8); width: flex-grid(8);
.inner-wrapper { .inner-wrapper {
//padding: 0 60px;
> section { > section {
&::after { &::after {
...@@ -242,25 +306,6 @@ ...@@ -242,25 +306,6 @@
background: rgb(245,245,245); background: rgb(245,245,245);
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; padding: 15px;
&.dates {
p {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px;
&:last-child {
border: none;
margin: 0;
padding: 0;
}
> span {
margin-left: 20px;
}
}
}
} }
.media { .media {
...@@ -273,11 +318,53 @@ ...@@ -273,11 +318,53 @@
.hero { .hero {
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
}
img { img {
min-width: 100%; min-width: 100%;
} }
} }
&:hover {
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
color: $pink;
}
}
}
} }
} }
} }
lms/static/sass/application.css
...@@ -3397,12 +3397,7 @@ nav.course-material { ...@@ -3397,12 +3397,7 @@ nav.course-material {
.course-info .container { .course-info .container {
margin-bottom: 60px; } margin-bottom: 60px; }
.course-info header.course-profile { .course-info header.course-profile {
background: #f0f0f0; background: #f5f5f5;
background-image: -webkit-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -moz-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -ms-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -o-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: linear-gradient(-90deg, #e6e6e6, #f5f5f5);
-webkit-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
...@@ -3416,7 +3411,7 @@ nav.course-material { ...@@ -3416,7 +3411,7 @@ nav.course-material {
zoom: 1; zoom: 1;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 40px 0px 40px; padding: 50px 0px 40px;
position: relative; position: relative;
width: 100%; } width: 100%; }
.course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after { .course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after {
...@@ -3476,81 +3471,189 @@ nav.course-material { ...@@ -3476,81 +3471,189 @@ nav.course-material {
width: 100%; } width: 100%; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 { .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 {
font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif; font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 0px; display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 5px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span { .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span {
color: #a0a0a0; color: #a0a0a0;
display: none; display: none;
font: 300 1.2rem/3rem "Open Sans", Verdana, Geneva, sans-serif; } font: 300 1.2rem/3rem "Open Sans", Verdana, Geneva, sans-serif; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a { .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 {
color: #a0a0a0; display: -moz-inline-box;
font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; -moz-box-orient: vertical;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } display: inline-block;
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover { vertical-align: baseline;
color: #1d9dd9; } zoom: 1;
*display: inline;
*vertical-align: auto; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a {
color: #a0a0a0;
font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover {
color: #1d9dd9; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p {
color: #a0a0a0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p:last-child {
margin: 0; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p > span {
color: #3c3c3c;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 5px; }
.course-info header.course-profile .intro-inner-wrapper .actions { .course-info header.course-profile .intro-inner-wrapper .actions {
float: left; float: left;
padding-top: 5px;
position: relative; position: relative;
width: 31.984%; width: 31.984%;
z-index: 2; } z-index: 2; }
.course-info header.course-profile .intro-inner-wrapper .actions a.register { .course-info header.course-profile .intro-inner-wrapper .actions:hover .register-wrapper {
border: 1px solid #002e88; -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
border-bottom: 1px solid #001e5f; -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
-webkit-border-radius: 5px; box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
-moz-border-radius: 5px; border-color: #b4b4b4; }
-ms-border-radius: 5px; .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper {
-o-border-radius: 5px; background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
border-radius: 5px; background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-webkit-box-shadow: inset 0 1px 0 0 #42bae5; background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-moz-box-shadow: inset 0 1px 0 0 #42bae5; background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
box-shadow: inset 0 1px 0 0 #42bae5; background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
color: white;
display: inline;
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: 7px 20px 8px;
text-align: center;
text-decoration: none;
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;
-webkit-border-radius: 3px; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-border-radius: 3px; -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-ms-border-radius: 3px; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-o-border-radius: 3px; border: 1px solid #d2d2d2;
border-radius: 3px; -webkit-border-radius: 4px;
display: block; -moz-border-radius: 4px;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; -ms-border-radius: 4px;
margin-bottom: 10px; -o-border-radius: 4px;
padding: 10px 0px; border-radius: 4px;
text-transform: uppercase; -webkit-transition-property: all;
text-align: center; -moz-transition-property: all;
width: 100%; } -ms-transition-property: all;
.course-info header.course-profile .intro-inner-wrapper .actions a.register:hover { -o-transition-property: all;
cursor: pointer; transition-property: all;
background-color: #108ec7; -webkit-transition-duration: 0.15s;
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)); -moz-transition-duration: 0.15s;
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); -ms-transition-duration: 0.15s;
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); -o-transition-duration: 0.15s;
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); transition-duration: 0.15s;
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); -webkit-transition-timing-function: linear;
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } -moz-transition-timing-function: linear;
.course-info header.course-profile .intro-inner-wrapper .actions a.register:active { -ms-transition-timing-function: linear;
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; -o-transition-timing-function: linear;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; transition-timing-function: linear;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } -webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
padding: 10px; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-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;
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: 7px 20px 8px;
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;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: 100%;
z-index: 1; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:hover {
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%); }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:active {
-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; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing { .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing {
background: #e6e6e6; padding: 0px 20px; }
height: 40px; } .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
border: 1px solid #d2d2d2;
border-top: 0;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 5px 10px;
margin: 0 auto;
color: #a0a0a0;
font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p:last-child {
margin: 0; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p > span {
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-right: 5px; }
.course-info .container { .course-info .container {
zoom: 1; } zoom: 1; }
.course-info .container:before, .course-info .container:after { .course-info .container:before, .course-info .container:after {
...@@ -3564,7 +3667,7 @@ nav.course-material { ...@@ -3564,7 +3667,7 @@ nav.course-material {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
zoom: 1; zoom: 1;
margin-bottom: 40px; margin: 40px 0;
width: 100%; } width: 100%; }
.course-info .container nav:before, .course-info .container nav:after { .course-info .container nav:before, .course-info .container nav:after {
content: ""; content: "";
...@@ -3575,6 +3678,7 @@ nav.course-material { ...@@ -3575,6 +3678,7 @@ nav.course-material {
content: ""; content: "";
display: none; } display: none; }
.course-info .container nav a { .course-info .container nav a {
border-bottom: 3px solid transparent;
color: #a0a0a0; color: #a0a0a0;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
...@@ -3584,10 +3688,14 @@ nav.course-material { ...@@ -3584,10 +3688,14 @@ nav.course-material {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 30px 20px; margin: 0 15px;
text-align: center; } padding: 0px 5px 15px;
text-align: center;
text-transform: uppercase; }
.course-info .container nav a:first-child {
margin-left: 0px; }
.course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active { .course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active {
background: #f0f0f0; border-color: #b62568;
color: #3c3c3c; } color: #3c3c3c; }
.course-info .container h2 { .course-info .container h2 {
color: #a0a0a0; color: #a0a0a0;
...@@ -3647,17 +3755,6 @@ nav.course-material { ...@@ -3647,17 +3755,6 @@ nav.course-material {
background: #f5f5f5; background: #f5f5f5;
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; } padding: 15px; }
.course-info .course-sidebar > section.dates p {
border-bottom: 1px solid #dcdcdc;
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px; }
.course-info .course-sidebar > section.dates p:last-child {
border: none;
margin: 0;
padding: 0; }
.course-info .course-sidebar > section.dates p > span {
margin-left: 20px; }
.course-info .course-sidebar .media { .course-info .course-sidebar .media {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -3668,9 +3765,57 @@ nav.course-material { ...@@ -3668,9 +3765,57 @@ nav.course-material {
width: 100%; } width: 100%; }
.course-info .course-sidebar .media .hero { .course-info .course-sidebar .media .hero {
height: 180px; height: 180px;
overflow: hidden; } overflow: hidden;
position: relative; }
.course-info .course-sidebar .media .hero .play-intro {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px; }
.course-info .course-sidebar .media .hero .play-intro::after {
color: #3c3c3c;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
top: 50%; }
.course-info .course-sidebar .media .hero img { .course-info .course-sidebar .media .hero img {
min-width: 100%; } min-width: 100%; }
.course-info .course-sidebar .media:hover {
cursor: pointer; }
.course-info .course-sidebar .media:hover .play-intro {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4); }
.course-info .course-sidebar .media:hover .play-intro::after {
color: #b62568; }
html { html {
height: 100%; height: 100%;
......
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