From 32f154d7fb69e3d93dbdc2477cdff2b4a3159b9f Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 25 Apr 2012 14:19:42 -0400 Subject: [PATCH 01/10] Added new styles for amplifier --- static/css/application.css | 192 ++++++++++++++----- templates/sass/courseware/_amplifier.scss | 207 ++++++++++++--------- templates/sass/courseware/_courseware.scss | 20 +- 3 files changed, 292 insertions(+), 127 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 3502587ae5..e5427b3b8e 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -117,7 +117,7 @@ input, select { font-weight: 800; font-style: italic; } -.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { +.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { content: "."; display: block; height: 0; @@ -2848,6 +2848,26 @@ div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle { div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:hover, div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:focus { background-color: #bf4040; outline: none; } +div.course-wrapper section.course-content div.ui-tabs { + border: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + margin: 0; + padding: 0; } +div.course-wrapper section.course-content div.ui-tabs .ui-tabs-nav { + background: none; + border: 0; + margin-bottom: 11.326px; } +div.course-wrapper section.course-content div.ui-tabs .ui-tabs-panel { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + padding: 0; } div.course-wrapper.closed section.course-index { width: 3.077%; } div.course-wrapper.closed section.course-index header#open_close_accordion { @@ -3770,64 +3790,150 @@ section.course-content nav.sequence-bottom ul li.next a { section.course-content nav.sequence-bottom ul li.next a:hover { background-color: none; } -div#graph-container { - border-top: 1px solid #ddd; - padding-top: 22.652px; } -div#graph-container canvas#graph { +section.tool-wrapper { + background: #073642; + border-top: 1px solid #00171c; + border-bottom: 1px solid #00171c; + -webkit-box-shadow: inset 0 0 0 4px #084150; + -moz-box-shadow: inset 0 0 0 4px #084150; + box-shadow: inset 0 0 0 4px #084150; + margin: 22.652px -22.652px; + padding: 22.652px; + color: #839496; } +section.tool-wrapper div#graph-container { + width: 48.641%; + margin-right: 2.717%; + float: left; } +section.tool-wrapper div#graph-container canvas { + width: 100%; } +section.tool-wrapper div#controlls-container { width: 48.641%; float: left; - margin-right: 2.717%; } -div#graph-container div.graph-controls { - width: 48.641%; - float: left; } -div#graph-container div.graph-controls select#musicTypeSelect { - display: block; + padding-bottom: 22.652px; } +section.tool-wrapper div#controlls-container div.graph-controls { + padding: 45.304px 0 33.978px; + border-bottom: 1px solid #05232b; margin-bottom: 22.652px; } -div#graph-container div.graph-controls div#graph-output { - display: block; - margin-bottom: 22.652px; } -div#graph-container div.graph-controls div#graph-listen { - display: block; - margin-bottom: 22.652px; } -div#graph-container div.graph-controls p { - margin-bottom: 11.326px; } -div#graph-container div.graph-controls div#label { - display: inline-block; } -div#graph-container div.graph-controls input#playButton { - display: block; } - -div#schematic-container canvas { - width: 48.641%; +section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { float: left; - margin-right: 2.717%; } -div#schematic-container div.schematic-sliders { - width: 48.641%; - float: left; } -div#schematic-container div.schematic-sliders div.slider-label#vs { - margin-top: 45.304px; } -div#schematic-container div.schematic-sliders div.slider-label { - margin-bottom: 11.326px; } -div#schematic-container div.schematic-sliders div.slider { + width: 47.207%; } +section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper { + margin-right: 5.587%; } +section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { + padding-top: 11.326px; } +section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect { + display: block; margin-bottom: 22.652px; } - -div.graph-controls label, div#graph-listen label { +section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { + display: block; + margin-bottom: 11.326px; } +section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin: 0; } +section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-bottom: 0; } +section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-bottom: 0; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton { + display: block; + border: 1px solid #13649d; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 0 #69acdb; + -moz-box-shadow: inset 0 1px 0 0 #69acdb; + box-shadow: inset 0 1px 0 0 #69acdb; + color: white; + display: inline; + font-size: 11px; + font-weight: bold; + background-color: #268bd2; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #268bd2), color-stop(100%, #156dab)); + background-image: -webkit-linear-gradient(top, #268bd2, #156dab); + background-image: -moz-linear-gradient(top, #268bd2, #156dab); + background-image: -ms-linear-gradient(top, #268bd2, #156dab); + background-image: -o-linear-gradient(top, #268bd2, #156dab); + background-image: linear-gradient(top, #268bd2, #156dab); + padding: 6px 18px 7px; + text-shadow: 0 1px 0 #0c5a90; + -webkit-background-clip: padding-box; + font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover { + -webkit-box-shadow: inset 0 1px 0 0 #3f96d2; + -moz-box-shadow: inset 0 1px 0 0 #3f96d2; + box-shadow: inset 0 1px 0 0 #3f96d2; + cursor: pointer; + background-color: #277cb8; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #277cb8), color-stop(100%, #14649d)); + background-image: -webkit-linear-gradient(top, #277cb8, #14649d); + background-image: -moz-linear-gradient(top, #277cb8, #14649d); + background-image: -ms-linear-gradient(top, #277cb8, #14649d); + background-image: -o-linear-gradient(top, #277cb8, #14649d); + background-image: linear-gradient(top, #277cb8, #14649d); } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active { + border: 1px solid #13649d; + -webkit-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; + -moz-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; + box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; } +section.tool-wrapper div#controlls-container label { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; font-weight: bold; - padding: 3px; } -div.graph-controls label[for="vinCheckbox"], div.graph-controls label[for="vinRadioButton"], div#graph-listen label[for="vinCheckbox"], div#graph-listen label[for="vinRadioButton"] { + padding: 3px; + color: #fff; } +section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] { color: #409fbf; } -div.graph-controls label[for="voutCheckbox"], div.graph-controls label[for="voutRadioButton"], div#graph-listen label[for="voutCheckbox"], div#graph-listen label[for="voutRadioButton"] { +section.tool-wrapper div#controlls-container label[for="voutCheckbox"], section.tool-wrapper div#controlls-container label[for="voutRadioButton"] { color: #e1a600; } -div.graph-controls label[for="vrCheckbox"], div.graph-controls label[for="vrRadioButton"], div#graph-listen label[for="vrCheckbox"], div#graph-listen label[for="vrRadioButton"] { +section.tool-wrapper div#controlls-container label[for="vrCheckbox"], section.tool-wrapper div#controlls-container label[for="vrRadioButton"] { color: #49c944; } -div.graph-controls label[for="vcCheckbox"], div.graph-controls label[for="vcRadioButton"], div#graph-listen label[for="vcCheckbox"], div#graph-listen label[for="vcRadioButton"] { +section.tool-wrapper div#controlls-container label[for="vcCheckbox"], section.tool-wrapper div#controlls-container label[for="vcRadioButton"] { color: #e1a600; } -div.graph-controls label[for="vlCheckbox"], div.graph-controls label[for="vlRadioButton"], div#graph-listen label[for="vlCheckbox"], div#graph-listen label[for="vlRadioButton"] { +section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.tool-wrapper div#controlls-container label[for="vlRadioButton"] { color: #a26784; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label#vs { + margin-top: 45.304px; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { + margin-bottom: 11.326px; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider { + margin-bottom: 22.652px; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider.ui-slider-horizontal { + height: 0.4em; + background: #002b36; + border: 1px solid #00171c; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle { + background-color: #dc322f; + margin-top: -0.3em; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:hover, section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:active { + background-color: #e04845; } div.book-wrapper section.book-sidebar { -webkit-box-sizing: border-box; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 6bae79fd21..7a94216fc9 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -1,101 +1,142 @@ // JM MOSFET AMPLIFIER -div#graph-container { - @extend .clearfix; - border-top: 1px solid #ddd; - padding-top: lh(1.0); - - canvas#graph { - width: flex-grid(4.5, 9); - float: left; - margin-right: flex-gutter(9); - } - - div.graph-controls { - width: flex-grid(4.5, 9); - float: left; - - select#musicTypeSelect { - display: block; - margin-bottom: lh(); - } - - div#graph-output { - display: block; - margin-bottom: lh(); - } - - div#graph-listen { - display: block; - margin-bottom: lh(); - } - - p { - margin-bottom: lh(.5); - } - - div#label { - display: inline-block; - } - - input#playButton { - display: block; - } - } -} - -div#schematic-container { +section.tool-wrapper { + background: #073642; + border-top: 1px solid darken(#002b36, 5%); + border-bottom: 1px solid darken(#002b36, 5%); + @include box-shadow(inset 0 0 0 4px darken(#094959, 2%)); + margin: lh() (-(lh())); + padding: lh(); + color: #839496; @extend .clearfix; - canvas { - width: flex-grid(4.5, 9); - float: left; - margin-right: flex-gutter(9); - } - - div.schematic-sliders { + div#graph-container { width: flex-grid(4.5, 9); + margin-right: flex-gutter(9); float: left; - div.slider-label#vs { - margin-top: lh(2.0); - } - - div.slider-label { - margin-bottom: lh(0.5); - } - - div.slider { - margin-bottom: lh(1); + canvas { + width: 100%; } } -} -//End JM MOSFET AMPLIFIER -// Labels -div.graph-controls, div#graph-listen { + div#controlls-container { + @extend .clearfix; + width: flex-grid(4.5, 9); + float: left; + padding-bottom: lh(); - label { - @include border-radius(2px); - font-weight: bold; - padding: 3px; - } - //MOSFET AMPLIFIER - label[for="vinCheckbox"], label[for="vinRadioButton"]{ + div.graph-controls { + padding: lh(2) 0 lh(1.5); + border-bottom: 1px solid darken(#073642, 5%); + margin-bottom: lh(); + @extend .clearfix; + + div.music-wrapper, div.inputs-wrapper { + float: left; + width: flex-grid(2.25, 4.5); + } + + div.music-wrapper { + margin-right: flex-gutter(4.5); + } + + div.inputs-wrapper { + padding-top: lh(.5); + } + + select#musicTypeSelect { + display: block; + margin-bottom: lh(); + } + + div#graph-output, div#graph-listen { + display: block; + margin-bottom: lh(.5); + + p { + @include inline-block(); + margin: 0; + } + + ul { + @include inline-block(); + margin-bottom: 0; + + li { + @include inline-block(); + margin-bottom: 0; + } + } + } + + input#playButton { + display: block; + @include button(simple, #268bd2); + font: bold 14px $body-font-family; + } + } + + label { + @include border-radius(2px); + font-weight: bold; + padding: 3px; + color: #fff; + } + + //MOSFET AMPLIFIER + label[for="vinCheckbox"], label[for="vinRadioButton"]{ color: desaturate(#00bfff, 50%); - } - label[for="voutCheckbox"], label[for="voutRadioButton"]{ + } + + label[for="voutCheckbox"], label[for="voutRadioButton"]{ color: darken(#ffcf48, 20%); - } - label[for="vrCheckbox"], label[for="vrRadioButton"]{ + } + + label[for="vrCheckbox"], label[for="vrRadioButton"]{ color: desaturate(#1df914, 40%); - } - //RC Filters - label[for="vcCheckbox"], label[for="vcRadioButton"]{ + } + + //RC Filters + label[for="vcCheckbox"], label[for="vcRadioButton"]{ color: darken(#ffcf48, 20%); - } - //RLC Series - label[for="vlCheckbox"], label[for="vlRadioButton"]{ + } + + //RLC Series + label[for="vlCheckbox"], label[for="vlRadioButton"]{ color: desaturate(#d33682, 40%); + } + + div.schematic-sliders { + + div.slider-label#vs { + margin-top: lh(2.0); + } + + div.slider-label { + margin-bottom: lh(0.5); + } + + div.slider { + margin-bottom: lh(1); + + &.ui-slider-horizontal { + height: 0.4em; + background: #002b36; + border: 1px solid darken(#002b36, 5%); + @include box-shadow(none); + } + + .ui-slider-handle { + background-color: #dc322f; + margin-top: -.3em; + + &:hover, &:active { + background-color: lighten(#dc322f, 5%); + } + } + } + } } } + diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss index 8084077247..48cbcd64bb 100644 --- a/templates/sass/courseware/_courseware.scss +++ b/templates/sass/courseware/_courseware.scss @@ -1,4 +1,4 @@ -html { +html { height: 100%; max-height: 100%; } @@ -258,6 +258,24 @@ div.course-wrapper { } } } + + div.ui-tabs { + border: 0; + @include border-radius(0); + margin: 0; + padding: 0; + + .ui-tabs-nav { + background: none; + border: 0; + margin-bottom: lh(.5); + } + + .ui-tabs-panel { + @include border-radius(0); + padding: 0; + } + } } &.closed { From 954397be347d96064f2027404e36b29ee864594e Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 25 Apr 2012 15:23:02 -0400 Subject: [PATCH 02/10] More tweeks for the amplifier --- static/css/application.css | 96 +++++++++++++++++++---- templates/sass/courseware/_amplifier.scss | 53 +++++++++---- 2 files changed, 118 insertions(+), 31 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index e5427b3b8e..77d80b1eef 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3792,28 +3792,33 @@ section.course-content nav.sequence-bottom ul li.next a:hover { section.tool-wrapper { background: #073642; - border-top: 1px solid #00171c; - border-bottom: 1px solid #00171c; + border-top: 1px solid #000203; + border-bottom: 1px solid #000203; -webkit-box-shadow: inset 0 0 0 4px #084150; -moz-box-shadow: inset 0 0 0 4px #084150; box-shadow: inset 0 0 0 4px #084150; - margin: 22.652px -22.652px; - padding: 22.652px; + margin: 22.652px -22.652px 0; color: #839496; } section.tool-wrapper div#graph-container { width: 48.641%; - margin-right: 2.717%; - float: left; } + margin-left: 2.717%; + padding: 22.652px; + display: table-cell; + vertical-align: top; } section.tool-wrapper div#graph-container canvas { width: 100%; } section.tool-wrapper div#controlls-container { - width: 48.641%; - float: left; - padding-bottom: 22.652px; } + display: table-cell; + vertical-align: top; + padding: 22.652px; + background: #062e39; + border-right: 1px solid #001317; + -webkit-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; + -moz-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; + box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; } section.tool-wrapper div#controlls-container div.graph-controls { - padding: 45.304px 0 33.978px; - border-bottom: 1px solid #05232b; - margin-bottom: 22.652px; } + padding: 22.652px 0 22.652px; + border-bottom: 1px solid #05232b; } section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { float: left; width: 47.207%; } @@ -3823,10 +3828,13 @@ section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapp padding-top: 11.326px; } section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect { display: block; - margin-bottom: 22.652px; } + margin-bottom: 11.326px; + font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + width: 100%; } section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { display: block; - margin-bottom: 11.326px; } + margin-bottom: 11.326px; + text-align: right; } section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p { display: -moz-inline-box; -moz-box-orient: vertical; @@ -3854,6 +3862,8 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output *display: inline; *vertical-align: auto; margin-bottom: 0; } +section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li input, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li input { + margin-right: 5px; } section.tool-wrapper div#controlls-container div.graph-controls input#playButton { display: block; border: 1px solid #13649d; @@ -3897,6 +3907,56 @@ section.tool-wrapper div#controlls-container div.graph-controls input#playButton -webkit-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; -moz-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"] { + border: 1px solid #030d15; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 0 #215f8a; + -moz-box-shadow: inset 0 1px 0 0 #215f8a; + box-shadow: inset 0 1px 0 0 #215f8a; + color: white; + display: inline; + font-size: 11px; + font-weight: bold; + background-color: #0f3550; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f3550), color-stop(100%, #041623)); + background-image: -webkit-linear-gradient(top, #0f3550, #041623); + background-image: -moz-linear-gradient(top, #0f3550, #041623); + background-image: -ms-linear-gradient(top, #0f3550, #041623); + background-image: -o-linear-gradient(top, #0f3550, #041623); + background-image: linear-gradient(top, #0f3550, #041623); + padding: 6px 18px 7px; + text-shadow: 0 1px 0 #000203; + -webkit-background-clip: padding-box; + font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:hover { + -webkit-box-shadow: inset 0 1px 0 0 #174362; + -moz-box-shadow: inset 0 1px 0 0 #174362; + box-shadow: inset 0 1px 0 0 #174362; + cursor: pointer; + background-color: #0c2739; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c2739), color-stop(100%, #030d15)); + background-image: -webkit-linear-gradient(top, #0c2739, #030d15); + background-image: -moz-linear-gradient(top, #0c2739, #030d15); + background-image: -ms-linear-gradient(top, #0c2739, #030d15); + background-image: -o-linear-gradient(top, #0c2739, #030d15); + background-image: linear-gradient(top, #0c2739, #030d15); } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active { + border: 1px solid #030d15; + -webkit-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; + -moz-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; + box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; } +section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } section.tool-wrapper div#controlls-container label { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -3919,13 +3979,15 @@ section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.to section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label#vs { margin-top: 45.304px; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { - margin-bottom: 11.326px; } + margin-bottom: 11.326px; + font-weight: bold; + -webkit-font-smoothing: antialiased; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider { margin-bottom: 22.652px; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider.ui-slider-horizontal { height: 0.4em; - background: #002b36; - border: 1px solid #00171c; + background: #00232c; + border: 1px solid #000b0d; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 7a94216fc9..365cc676bc 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -1,18 +1,19 @@ // JM MOSFET AMPLIFIER section.tool-wrapper { background: #073642; - border-top: 1px solid darken(#002b36, 5%); - border-bottom: 1px solid darken(#002b36, 5%); + border-top: 1px solid darken(#002b36, 10%); + border-bottom: 1px solid darken(#002b36, 10%); @include box-shadow(inset 0 0 0 4px darken(#094959, 2%)); - margin: lh() (-(lh())); - padding: lh(); + margin: lh() (-(lh())) 0; color: #839496; @extend .clearfix; div#graph-container { width: flex-grid(4.5, 9); - margin-right: flex-gutter(9); - float: left; + margin-left: flex-gutter(9); + padding: lh(); + display: table-cell; + vertical-align: top; canvas { width: 100%; @@ -21,14 +22,16 @@ section.tool-wrapper { div#controlls-container { @extend .clearfix; - width: flex-grid(4.5, 9); - float: left; - padding-bottom: lh(); + display: table-cell; + vertical-align: top; + padding: lh(); + background: darken(#073642, 2%); + border-right: 1px solid darken(#002b36, 6%); + @include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%)); div.graph-controls { - padding: lh(2) 0 lh(1.5); + padding: lh() 0 lh(); border-bottom: 1px solid darken(#073642, 5%); - margin-bottom: lh(); @extend .clearfix; div.music-wrapper, div.inputs-wrapper { @@ -46,12 +49,15 @@ section.tool-wrapper { select#musicTypeSelect { display: block; - margin-bottom: lh(); + margin-bottom: lh(.5); + font: 16px $body-font-family; + width: 100%; } div#graph-output, div#graph-listen { display: block; margin-bottom: lh(.5); + text-align: right; p { @include inline-block(); @@ -65,6 +71,10 @@ section.tool-wrapper { li { @include inline-block(); margin-bottom: 0; + + input { + margin-right: 5px; + } } } } @@ -73,6 +83,19 @@ section.tool-wrapper { display: block; @include button(simple, #268bd2); font: bold 14px $body-font-family; + + &:active { + @include box-shadow(none); + } + + &[value="Stop"] { + @include button(simple, darken(#268bd2, 30%)); + font: bold 14px $body-font-family; + + &:active { + @include box-shadow(none); + } + } } } @@ -114,6 +137,8 @@ section.tool-wrapper { div.slider-label { margin-bottom: lh(0.5); + font-weight: bold; + -webkit-font-smoothing: antialiased; } div.slider { @@ -121,8 +146,8 @@ section.tool-wrapper { &.ui-slider-horizontal { height: 0.4em; - background: #002b36; - border: 1px solid darken(#002b36, 5%); + background: darken(#002b36, 2%); + border: 1px solid darken(#002b36, 8%); @include box-shadow(none); } From 6362977ace5526853aa58a4b1e332f8bbbc5f8fe Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 25 Apr 2012 21:28:11 -0400 Subject: [PATCH 03/10] Added some small tweeks to the amplifier --- static/css/application.css | 52 +++++++++++------------ templates/sass/courseware/_amplifier.scss | 2 +- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 77d80b1eef..5d99b4efb9 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3866,47 +3866,47 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output margin-right: 5px; } section.tool-wrapper div#controlls-container div.graph-controls input#playButton { display: block; - border: 1px solid #13649d; + border: 1px solid #b01613; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 0 #69acdb; - -moz-box-shadow: inset 0 1px 0 0 #69acdb; - box-shadow: inset 0 1px 0 0 #69acdb; + -webkit-box-shadow: inset 0 1px 0 0 #e07977; + -moz-box-shadow: inset 0 1px 0 0 #e07977; + box-shadow: inset 0 1px 0 0 #e07977; color: white; display: inline; font-size: 11px; font-weight: bold; - background-color: #268bd2; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #268bd2), color-stop(100%, #156dab)); - background-image: -webkit-linear-gradient(top, #268bd2, #156dab); - background-image: -moz-linear-gradient(top, #268bd2, #156dab); - background-image: -ms-linear-gradient(top, #268bd2, #156dab); - background-image: -o-linear-gradient(top, #268bd2, #156dab); - background-image: linear-gradient(top, #268bd2, #156dab); + background-color: #dc322f; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dc322f), color-stop(100%, #be1815)); + background-image: -webkit-linear-gradient(top, #dc322f, #be1815); + background-image: -moz-linear-gradient(top, #dc322f, #be1815); + background-image: -ms-linear-gradient(top, #dc322f, #be1815); + background-image: -o-linear-gradient(top, #dc322f, #be1815); + background-image: linear-gradient(top, #dc322f, #be1815); padding: 6px 18px 7px; - text-shadow: 0 1px 0 #0c5a90; + text-shadow: 0 1px 0 #a30f0c; -webkit-background-clip: padding-box; font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover { - -webkit-box-shadow: inset 0 1px 0 0 #3f96d2; - -moz-box-shadow: inset 0 1px 0 0 #3f96d2; - box-shadow: inset 0 1px 0 0 #3f96d2; + -webkit-box-shadow: inset 0 1px 0 0 #d84f4c; + -moz-box-shadow: inset 0 1px 0 0 #d84f4c; + box-shadow: inset 0 1px 0 0 #d84f4c; cursor: pointer; - background-color: #277cb8; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #277cb8), color-stop(100%, #14649d)); - background-image: -webkit-linear-gradient(top, #277cb8, #14649d); - background-image: -moz-linear-gradient(top, #277cb8, #14649d); - background-image: -ms-linear-gradient(top, #277cb8, #14649d); - background-image: -o-linear-gradient(top, #277cb8, #14649d); - background-image: linear-gradient(top, #277cb8, #14649d); } + background-color: #ca2a28; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ca2a28), color-stop(100%, #af1714)); + background-image: -webkit-linear-gradient(top, #ca2a28, #af1714); + background-image: -moz-linear-gradient(top, #ca2a28, #af1714); + background-image: -ms-linear-gradient(top, #ca2a28, #af1714); + background-image: -o-linear-gradient(top, #ca2a28, #af1714); + background-image: linear-gradient(top, #ca2a28, #af1714); } section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active { - border: 1px solid #13649d; - -webkit-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; - -moz-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; - box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; } + border: 1px solid #b01613; + -webkit-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee; + -moz-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee; + box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee; } section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active { -webkit-box-shadow: none; -moz-box-shadow: none; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 365cc676bc..f8ef01677b 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -81,7 +81,7 @@ section.tool-wrapper { input#playButton { display: block; - @include button(simple, #268bd2); + @include button(simple, #dc322f); font: bold 14px $body-font-family; &:active { From 3464e8bca95e6fca9b494e9d8d7ea4df69f20ace Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 25 Apr 2012 21:38:55 -0400 Subject: [PATCH 04/10] More tweeks to the amp --- static/css/application.css | 6 +++++- templates/sass/courseware/_amplifier.scss | 2 ++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/static/css/application.css b/static/css/application.css index 5d99b4efb9..5bc5ea84d4 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3818,7 +3818,10 @@ section.tool-wrapper div#controlls-container { box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; } section.tool-wrapper div#controlls-container div.graph-controls { padding: 22.652px 0 22.652px; - border-bottom: 1px solid #05232b; } + border-bottom: 1px solid #05232b; + -webkit-box-shadow: 0 1px 0 #083e4b; + -moz-box-shadow: 0 1px 0 #083e4b; + box-shadow: 0 1px 0 #083e4b; } section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { float: left; width: 47.207%; } @@ -3981,6 +3984,7 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-la section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { margin-bottom: 11.326px; font-weight: bold; + text-shadow: 0 -1px 0 #021014; -webkit-font-smoothing: antialiased; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider { margin-bottom: 22.652px; } diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index f8ef01677b..1c7946b97d 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -32,6 +32,7 @@ section.tool-wrapper { div.graph-controls { padding: lh() 0 lh(); border-bottom: 1px solid darken(#073642, 5%); + @include box-shadow(0 1px 0 lighten(#073642, 2%)); @extend .clearfix; div.music-wrapper, div.inputs-wrapper { @@ -138,6 +139,7 @@ section.tool-wrapper { div.slider-label { margin-bottom: lh(0.5); font-weight: bold; + text-shadow: 0 -1px 0 darken(#073642, 10%); -webkit-font-smoothing: antialiased; } From c858ab03420d2f65d58b11c3bf9ab524ddb8c170 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 10:07:19 -0400 Subject: [PATCH 05/10] Added some slight text modification for amplifier --- static/css/application.css | 3 ++- templates/sass/courseware/_amplifier.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/static/css/application.css b/static/css/application.css index 5bc5ea84d4..e76b936ab1 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3968,7 +3968,8 @@ section.tool-wrapper div#controlls-container label { border-radius: 2px; font-weight: bold; padding: 3px; - color: #fff; } + color: #fff; + -webkit-font-smoothing: antialiased; } section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] { color: #409fbf; } section.tool-wrapper div#controlls-container label[for="voutCheckbox"], section.tool-wrapper div#controlls-container label[for="voutRadioButton"] { diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 1c7946b97d..0bc9161374 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -105,6 +105,7 @@ section.tool-wrapper { font-weight: bold; padding: 3px; color: #fff; + -webkit-font-smoothing: antialiased; } //MOSFET AMPLIFIER From 38422b2c505ffbf0f4317aaca02d3d682ae1dbf2 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 14:01:11 -0400 Subject: [PATCH 06/10] Shortened first column for controls --- static/css/application.css | 11 ++++++----- templates/sass/courseware/_amplifier.scss | 9 ++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index e76b936ab1..5e71ba62c2 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3822,13 +3822,14 @@ section.tool-wrapper div#controlls-container div.graph-controls { -webkit-box-shadow: 0 1px 0 #083e4b; -moz-box-shadow: 0 1px 0 #083e4b; box-shadow: 0 1px 0 #083e4b; } -section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { - float: left; - width: 47.207%; } section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper { - margin-right: 5.587%; } + margin-right: 5.587%; + width: 29.609%; + float: left; } section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { - padding-top: 11.326px; } + padding-top: 11.326px; + width: 64.804%; + float: left; } section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect { display: block; margin-bottom: 11.326px; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 0bc9161374..a0c19bfb95 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -35,17 +35,16 @@ section.tool-wrapper { @include box-shadow(0 1px 0 lighten(#073642, 2%)); @extend .clearfix; - div.music-wrapper, div.inputs-wrapper { - float: left; - width: flex-grid(2.25, 4.5); - } - div.music-wrapper { margin-right: flex-gutter(4.5); + width: flex-grid(1.5, 4.5); + float: left; } div.inputs-wrapper { padding-top: lh(.5); + width: flex-grid(3, 4.5); + float: left; } select#musicTypeSelect { From b7cf6438e432917842d1de6d8065525d7bbf7382 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 14:02:56 -0400 Subject: [PATCH 07/10] added generated css --- static/css/application.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/application.css b/static/css/application.css index 5e71ba62c2..ae67c82193 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3679,7 +3679,7 @@ nav.sequence-nav ol li p::after { width: 10px; } nav.sequence-nav ul { margin-right: 1px; - list-style: none !important; + list-style: none !important; position: absolute; right: 0; top: 0; From bd8adcce97c4cae9b2f79f65ad4bd11e7b44cb09 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 16:52:47 -0400 Subject: [PATCH 08/10] Added styles for tabs --- static/css/application.css | 72 ++++++++++++++++++++--- templates/sass/courseware/_amplifier.scss | 66 +++++++++++++++++++-- 2 files changed, 123 insertions(+), 15 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index ae67c82193..7e38d15259 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3798,24 +3798,78 @@ section.tool-wrapper { -moz-box-shadow: inset 0 0 0 4px #084150; box-shadow: inset 0 0 0 4px #084150; margin: 22.652px -22.652px 0; - color: #839496; } + color: #839496; + display: table; } section.tool-wrapper div#graph-container { - width: 48.641%; - margin-left: 2.717%; - padding: 22.652px; + background: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; display: table-cell; - vertical-align: top; } + padding: 22.652px; + vertical-align: top; + width: 51.359%; } +section.tool-wrapper div#graph-container .ui-widget-content { + background: none; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; } section.tool-wrapper div#graph-container canvas { width: 100%; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav { + background: #062e39; + margin: -22.652px -22.652px 0; + padding: 0; + position: relative; + width: 110%; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + border-bottom: 1px solid #03181d; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li { + margin-bottom: 0; + background: none; + color: #fff; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected { + border-right: 1px solid #03181d; + border-left: 1px solid #03181d; + background-color: #073642; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected:first-child { + border-left: none; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected a { + color: #eee8d5; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li a { + border: none; + font: bold 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + color: #839496; } +section.tool-wrapper div#graph-container ul.ui-tabs-nav li a:hover { + color: #eee8d5; } section.tool-wrapper div#controlls-container { - display: table-cell; - vertical-align: top; - padding: 22.652px; background: #062e39; border-right: 1px solid #001317; -webkit-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; -moz-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; - box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; } + box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: table-cell; + padding: 22.652px; + vertical-align: top; + width: 48.641%; } section.tool-wrapper div#controlls-container div.graph-controls { padding: 22.652px 0 22.652px; border-bottom: 1px solid #05232b; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index a0c19bfb95..2da59c2ac8 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -7,27 +7,81 @@ section.tool-wrapper { margin: lh() (-(lh())) 0; color: #839496; @extend .clearfix; + display: table; div#graph-container { - width: flex-grid(4.5, 9); - margin-left: flex-gutter(9); - padding: lh(); + background: none; + @include box-sizing(border-box); display: table-cell; + padding: lh(); vertical-align: top; + width: flex-grid(4.5, 9) + flex-gutter(9); + +.ui-widget-content { + background: none; + border: none; + @include border-radius(0); +} canvas { width: 100%; } + + ul.ui-tabs-nav { + background: darken(#073642, 2%); + margin: (-(lh())) (-(lh())) 0; + padding: 0; + position: relative; + width: 110%; + @include border-radius(0); + border-bottom: 1px solid darken(#073642, 8%); + + li { + margin-bottom: 0; + background: none; + color: #fff; + border: none; + @include border-radius(0); + + &.ui-tabs-selected { + border-right: 1px solid darken(#073642, 8%); + border-left: 1px solid darken(#073642, 8%); + background-color: #073642; + + &:first-child { + border-left: none; + } + + a { + color: #eee8d5; + } + } + + a { + border: none; + font: bold 12px $body-font-family; + text-transform: uppercase; + letter-spacing: 1px; + color: #839496; + + &:hover { + color: #eee8d5; + } + } + } + } } div#controlls-container { @extend .clearfix; - display: table-cell; - vertical-align: top; - padding: lh(); background: darken(#073642, 2%); border-right: 1px solid darken(#002b36, 6%); @include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%)); + @include box-sizing(border-box); + display: table-cell; + padding: lh(); + vertical-align: top; + width: flex-grid(4.5, 9); div.graph-controls { padding: lh() 0 lh(); From 89fbd4611b07fb6c99bc19e93d5b276c1af3d13c Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 16:58:04 -0400 Subject: [PATCH 09/10] Fixed margin padding issue for top of sliders --- static/css/application.css | 5 ++--- templates/sass/courseware/_amplifier.scss | 17 +++++++---------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 7e38d15259..ac9a666dff 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3871,7 +3871,8 @@ section.tool-wrapper div#controlls-container { vertical-align: top; width: 48.641%; } section.tool-wrapper div#controlls-container div.graph-controls { - padding: 22.652px 0 22.652px; + padding: 0 0 22.652px; + margin-bottom: 22.652px; border-bottom: 1px solid #05232b; -webkit-box-shadow: 0 1px 0 #083e4b; -moz-box-shadow: 0 1px 0 #083e4b; @@ -4035,8 +4036,6 @@ section.tool-wrapper div#controlls-container label[for="vcCheckbox"], section.to color: #e1a600; } section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.tool-wrapper div#controlls-container label[for="vlRadioButton"] { color: #a26784; } -section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label#vs { - margin-top: 45.304px; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { margin-bottom: 11.326px; font-weight: bold; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 2da59c2ac8..eb1fae7fea 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -17,11 +17,11 @@ section.tool-wrapper { vertical-align: top; width: flex-grid(4.5, 9) + flex-gutter(9); -.ui-widget-content { - background: none; - border: none; - @include border-radius(0); -} + .ui-widget-content { + background: none; + border: none; + @include border-radius(0); + } canvas { width: 100%; @@ -84,7 +84,8 @@ section.tool-wrapper { width: flex-grid(4.5, 9); div.graph-controls { - padding: lh() 0 lh(); + padding: 0 0 lh(); + margin-bottom: lh(); border-bottom: 1px solid darken(#073642, 5%); @include box-shadow(0 1px 0 lighten(#073642, 2%)); @extend .clearfix; @@ -186,10 +187,6 @@ section.tool-wrapper { div.schematic-sliders { - div.slider-label#vs { - margin-top: lh(2.0); - } - div.slider-label { margin-bottom: lh(0.5); font-weight: bold; From 128ba351a620e77d16ff1f2d0b06b6c8c7383d46 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 17:02:07 -0400 Subject: [PATCH 10/10] Added better styles for play button --- static/css/application.css | 7 ++++++- templates/sass/courseware/_amplifier.scss | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/static/css/application.css b/static/css/application.css index ac9a666dff..72fb99c379 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3948,7 +3948,12 @@ section.tool-wrapper div#controlls-container div.graph-controls input#playButton padding: 6px 18px 7px; text-shadow: 0 1px 0 #a30f0c; -webkit-background-clip: padding-box; - font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } + font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + color: #47221a; + text-shadow: 0 1px 0 #e04845; + -webkit-box-shadow: inset 0 1px 0 #e35d5b; + -moz-box-shadow: inset 0 1px 0 #e35d5b; + box-shadow: inset 0 1px 0 #e35d5b; } section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover { -webkit-box-shadow: inset 0 1px 0 0 #d84f4c; -moz-box-shadow: inset 0 1px 0 0 #d84f4c; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index eb1fae7fea..e515d49b22 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -138,6 +138,9 @@ section.tool-wrapper { display: block; @include button(simple, #dc322f); font: bold 14px $body-font-family; + color: #47221a; + text-shadow: 0 1px 0 lighten(#dc322f, 5%); + @include box-shadow(inset 0 1px 0 lighten(#dc322f, 10%)); &:active { @include box-shadow(none);