Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kyle Fiedler
2012-08-13 15:05:43 -04:00
parent a984fbb65f
commit 731f1cd7a8
13 changed files with 105 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -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;
}
}

1
lms/static/sass/course.scss
View File

@@ -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';

20
lms/static/sass/course/_info.scss
View File

@@ -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;
}
}

1
lms/static/sass/course/base/_base.scss
View File

@@ -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;
}

27
lms/static/sass/course/base/_extends.scss
View File

@@ -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;
text-shadow: 0 1px 0 #fff;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #fff;
text-transform: none;
white-space: nowrap;
width: 700px;
.provider {
font: inherit;
@@ -211,4 +198,4 @@ h1.top-header {
color: #6d6d6d;
}
}
}
}

6
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -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;
}
}

3
lms/static/sass/course/courseware/_sidebar.scss
View File

@@ -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 {

3
lms/static/sass/course/discussion/_answers.scss
View File

@@ -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;
}
}
}

2
lms/static/sass/course/discussion/_forms.scss
View File

@@ -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 {

16
lms/static/sass/course/wiki/_sidebar.scss
View File

@@ -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;
}
}

92
lms/static/sass/shared/_forms.scss
View File

@@ -1,52 +1,54 @@
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;
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;
&: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;
&:last-child {
margin-right: 0px;
}
&: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;
}
}
textarea {
height: 60px;
}
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;
&: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;
}
}
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;
}

12
lms/static/sass/shared/_tooltips.scss Normal file
View File

@@ -0,0 +1,12 @@
.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;
}

6
lms/templates/simplewiki/simplewiki_base.html
View File

@@ -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>