Skip to content

E
edx-platform
Commit 731f1cd7 by Kyle Fiedler
Options

Added tooltip styles, made all buttons the same, and other small changes throughout the courseware

parent a984fbb6
Showing with 101 additions and 127 deletions
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -14,7 +14,7 @@ div.video {
section.video-player {
height: 0;
overflow: hidden;
// overflow: hidden;
padding-bottom: 56.25%;
position: relative;
......@@ -45,12 +45,13 @@ div.video {
div.slider {
@extend .clearfix;
background: #c2c2c2;
border: none;
border-bottom: 1px solid #000;
border: 1px solid #000;
@include border-radius(0);
border-top: 1px solid #000;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
height: 7px;
margin-left: -1px;
margin-right: -1px;
@include transition(height 2.0s ease-in-out);
div.ui-widget-header {
......@@ -58,43 +59,12 @@ div.video {
@include box-shadow(inset 0 1px 0 #999);
}
.ui-tooltip.qtip .ui-tooltip-content {
background: $mit-red;
border: 1px solid darken($mit-red, 20%);
@include border-radius(2px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
margin-right: 0;
overflow: visible;
padding: 4px;
text-align: center;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
&::after {
background: $mit-red;
border-bottom: 1px solid darken($mit-red, 20%);
border-right: 1px solid darken($mit-red, 20%);
bottom: -5px;
content: " ";
display: block;
height: 7px;
left: 50%;
margin-left: -3px;
position: absolute;
@include transform(rotate(45deg));
width: 7px;
}
}
a.ui-slider-handle {
background: $mit-red url(../images/slider-handle.png) center center no-repeat;
background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%);
border: 1px solid darken($mit-red, 20%);
border: 1px solid darken($pink, 20%);
@include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@include box-shadow(inset 0 1px 0 lighten($pink, 10%));
cursor: pointer;
height: 15px;
margin-left: -7px;
......@@ -103,7 +73,7 @@ div.video {
width: 15px;
&:focus, &:hover {
background-color: lighten($mit-red, 10%);
background-color: lighten($pink, 10%);
outline: none;
}
}
......
lms/static/sass/course.scss
......@@ -7,6 +7,7 @@
@import 'base/base';
@import 'base/extends';
@import 'base/animations';
@import 'shared/tooltips';
// Course base / layout styles
@import 'course/layout/courseware_subnav';
......
lms/static/sass/course/_info.scss
......@@ -15,15 +15,15 @@ div.info-wrapper {
> ol {
list-style: none;
padding-left: 0;
margin-bottom: lh();
padding-left: 0;
> li {
@extend .clearfix;
border-bottom: 1px solid lighten($border-color, 10%);
list-style-type: disk;
margin-bottom: lh();
padding-bottom: lh(.5);
list-style-type: disk;
&:first-child {
margin: 0 (-(lh(.5))) lh();
......@@ -41,10 +41,10 @@ div.info-wrapper {
h2 {
float: left;
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
font-size: $body-font-size;
font-weight: bold;
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
}
section.update-description {
......@@ -68,15 +68,15 @@ div.info-wrapper {
section.handouts {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
border-left: 1px solid $border-color;
@include border-radius(0 4px 4px 0);
@include box-shadow(none);
border-right: 0;
@include box-shadow(none);
h1 {
@extend .bottom-border;
padding: lh(.5) lh(.5);
margin-bottom: 0;
padding: lh(.5) lh(.5);
}
ol {
......@@ -90,8 +90,9 @@ div.info-wrapper {
&.expandable,
&.collapsable {
h4 {
font-weight: normal;
color: $blue;
font-size: 1em;
font-weight: normal;
padding: lh(.25) 0 lh(.25) lh(1.5);
}
}
......@@ -145,7 +146,8 @@ div.info-wrapper {
filter: alpha(opacity=60);
+ h4 {
background-color: #e3e3e3;
@extend a:hover;
text-decoration: underline;
}
}
......
lms/static/sass/course/base/_base.scss
......@@ -3,6 +3,7 @@ body {
}
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
text-align: left;
font-family: $sans-serif;
}
......
lms/static/sass/course/base/_extends.scss
......@@ -25,24 +25,12 @@ h1.top-header {
}
}
.action-link {
a {
color: $mit-red;
&:hover {
color: darken($mit-red, 20%);
text-decoration: none;
}
}
}
.content {
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
width: flex-grid(9) + flex-gutter();
overflow: hidden;
@media print {
@include box-shadow(none);
......@@ -164,7 +152,6 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid $border-color;
font-size: 14px;
@media print {
display: none;
......@@ -193,17 +180,17 @@ h1.top-header {
h2 {
display: block;
width: 700px;
float: left;
font-size: 0.9em;
font-weight: 600;
line-height: 40px;
letter-spacing: 0;
text-transform: none;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #fff;
text-transform: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 700px;
.provider {
font: inherit;
......@@ -211,4 +198,4 @@ h1.top-header {
color: #6d6d6d;
}
}
}
\ No newline at end of file
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -146,13 +146,13 @@ div.course-wrapper {
@include border-radius(0);
a.ui-slider-handle {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@include box-shadow(inset 0 1px 0 lighten($pink, 10%));
background: $mit-red url(../images/slider-bars.png) center center no-repeat;
border: 1px solid darken($mit-red, 20%);
border: 1px solid darken($pink, 20%);
cursor: pointer;
&:hover, &:focus {
background-color: lighten($mit-red, 10%);
background-color: lighten($pink, 10%);
outline: none;
}
}
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -13,7 +13,7 @@ section.course-index {
div#accordion {
h3 {
@include border-radius(0);
border-top: 1px solid #e3e3e3;
border-top: 1px solid lighten($border-color, 10%);
font-size: em(16, 18);
margin: 0;
overflow: hidden;
......@@ -34,6 +34,7 @@ section.course-index {
}
&.ui-accordion-header {
border-bottom: none;
color: #000;
a {
......
lms/static/sass/course/discussion/_answers.scss
......@@ -17,7 +17,6 @@ div.answer-controls {
margin-left: flex-gutter();
nav {
@extend .action-link;
float: right;
margin-top: 34px;
......@@ -144,7 +143,7 @@ div.answer-actions {
text-decoration: none;
&.question-delete {
// color: $mit-red;
color: $mit-red;
}
}
}
......
lms/static/sass/course/discussion/_forms.scss
......@@ -92,7 +92,7 @@ form.answer-form {
margin-left: 2.5%;
padding-left: 1.5%;
border-left: 1px dashed #ddd;
color: $mit-red;;
color: $mit-red;
}
ul, ol, pre {
......
lms/static/sass/course/wiki/_sidebar.scss
......@@ -14,14 +14,6 @@ div#wiki_panel {
}
}
form {
input[type="submit"]{
@extend .light-button;
text-transform: none;
text-shadow: none;
}
}
div#wiki_create_form {
@extend .clearfix;
padding: lh(.5) lh() lh(.5) 0;
......@@ -53,4 +45,12 @@ div#wiki_panel {
}
}
}
input#wiki_search_input_submit {
padding: 4px 8px;
}
input#wiki_search_input {
margin-right: 10px;
}
}
lms/static/sass/shared/_forms.scss
form {
font-size: 1em;
}
label {
color: $base-font-color;
font: italic 300 1rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: italic 300 1rem/1.6rem $serif;
height: 35px;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
label {
color: $base-font-color;
font: italic 300 1rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
}
&:last-child {
margin-right: 0px;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: italic 300 1rem/1.6rem $serif;
height: 35px;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
&:focus {
border-color: lighten($blue, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
&:last-child {
margin-right: 0px;
}
textarea {
height: 60px;
&:focus {
border-color: lighten($blue, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
}
input[type="submit"] {
@include button(shiny, $blue);
@include border-radius(3px);
font: normal 1.2rem/1.6rem $sans-serif;
height: 35px;
letter-spacing: 1px;
text-transform: uppercase;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
textarea {
height: 60px;
}
input[type="submit"],
input[type="button"],
.button {
@include border-radius(3px);
@include button(shiny, $blue);
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 4px 20px;
text-transform: uppercase;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
lms/static/sass/shared/_tooltips.scss 0 → 100644
.ui-tooltip.qtip .ui-tooltip-content {
background: rgba($pink, .8);
border: 0;
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
margin-right: 0;
overflow: visible;
padding: 4px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
lms/templates/simplewiki/simplewiki_base.html
......@@ -110,7 +110,7 @@
</div>
<ul>
<li>
<input type="submit" class="button" value="Create" style="display: inline-block; margin-right: 2px; font-weight: bold;" />
<input type="submit" class="button" value="Create" />
</li>
</ul>
</form>
......@@ -120,8 +120,8 @@
<li class="search">
<form method="GET" action='${wiki_reverse("wiki_search_articles", course=course, namespace=namespace)}'>
<label class="wiki_box_title">Search</label>
<input type="text" placeholder="Search" name="value" id="wiki_search_input" style="width: 71%" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
<input type="submit" id="wiki_search_input_submit" value="Go!" style="width: 20%" />
<input type="text" placeholder="Search" name="value" id="wiki_search_input" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
<input type="submit" id="wiki_search_input_submit" value="Go!" />
</form>
</li>
</ul>
......
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