From aaf62e74a88b7e6108ab6007564b93402a12adef Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Fri, 24 Oct 2014 12:16:05 -0700 Subject: [PATCH 1/5] switch to LESS --- src/css/editor/ugsEditorPlus.aceEditor.css | 142 ------- src/css/editor/ugsEditorPlus.aceEditor.less | 150 +++++++ src/css/editor/ugsEditorPlus.arrowBox.css | 211 ---------- src/css/editor/ugsEditorPlus.arrowBox.less | 224 +++++++++++ ...buttons.css => ugsEditorPlus.buttons.less} | 83 ++-- ...er.css => ugsEditorPlus.chordBuilder.less} | 131 +++--- .../{ugsEditorPlus.css => ugsEditorPlus.less} | 4 +- ...menuBar.css => ugsEditorPlus.menuBar.less} | 0 src/css/editor/ugsEditorPlus.overlays.css | 234 ----------- src/css/editor/ugsEditorPlus.overlays.less | 267 +++++++++++++ ...rPlus.song.css => ugsEditorPlus.song.less} | 75 ++-- src/css/editor/ugsEditorPlus.themes.css | 354 ----------------- src/css/editor/ugsEditorPlus.themes.less | 375 ++++++++++++++++++ 13 files changed, 1173 insertions(+), 1077 deletions(-) delete mode 100644 src/css/editor/ugsEditorPlus.aceEditor.css create mode 100644 src/css/editor/ugsEditorPlus.aceEditor.less delete mode 100644 src/css/editor/ugsEditorPlus.arrowBox.css create mode 100644 src/css/editor/ugsEditorPlus.arrowBox.less rename src/css/editor/{ugsEditorPlus.buttons.css => ugsEditorPlus.buttons.less} (59%) rename src/css/editor/{ugsEditorPlus.chordBuilder.css => ugsEditorPlus.chordBuilder.less} (78%) rename src/css/editor/{ugsEditorPlus.css => ugsEditorPlus.less} (83%) rename src/css/editor/{ugsEditorPlus.menuBar.css => ugsEditorPlus.menuBar.less} (100%) delete mode 100644 src/css/editor/ugsEditorPlus.overlays.css create mode 100644 src/css/editor/ugsEditorPlus.overlays.less rename src/css/editor/{ugsEditorPlus.song.css => ugsEditorPlus.song.less} (53%) delete mode 100644 src/css/editor/ugsEditorPlus.themes.css create mode 100644 src/css/editor/ugsEditorPlus.themes.less diff --git a/src/css/editor/ugsEditorPlus.aceEditor.css b/src/css/editor/ugsEditorPlus.aceEditor.css deleted file mode 100644 index f3cb58c..0000000 --- a/src/css/editor/ugsEditorPlus.aceEditor.css +++ /dev/null @@ -1,142 +0,0 @@ -.aceEditorActive, -.aceEditorActive body { - overflow: hidden; - height: 100%; - width: 100%; - margin: 0; - padding: 0; -} -/* using jQuery instead: .aceEditorActive #aceEditor */ -.aceEditorActive #aceHeader{ - display: block; -} -.aceEditorActive .ugsAppMenuBar, -.aceEditorActive .overlay, -.aceEditorActive .scalablePrintArea{ - display: none; -} -#aceHeader { - border-bottom: solid 1px; - font-family: arial,sans-serif; - font-size: 1; - line-height: 40px; - height:40px; - padding:0 15px; - display: none; -} -#aceHeader a{ - float: right; - font-size: 0.87em; - line-height: inherit; - color: inherit; - text-decoration: none; -} -#aceHeader a:hover{ - color: #CC7833;/*F92672;*/ - text-decoration: none; -} -#aceEditor { - /* using jQuery instead: display: none;*/ - position: absolute; - top: 40px; - right: 0; - bottom: 0; - left: 0; -} -/* Show/Hide Sidebar Button - ------------------------------------------ */ -.aceSideBtn { - background-color: rgba(0, 0, 0, 0); - border: 1px solid #DDDDDD; - border-radius: 4px; - cursor: pointer; - float:left; - margin: 7px 0.8em 0 0; - transition: background-color .3s ease; -} -.aceSideBtn span { - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - background-color: #888888; - border-radius: 1px; - display: block; - height: 2px; - margin: 4px 2px; - width: 16px; - transition: background-color .3s ease; -} -.aceSideBtn:hover{ - background-color: #333; -} -.aceSideBtn:hover span{ - background-color: #eee; -} - -/* Help sidebar - ------------------------------------------ */ -#aceHelp { - bottom: 0; - left: -350px; - margin: 0; - position: absolute; - top: 40px; - width:350px; -} -#aceHelp { - background: #fff; - color: #707273; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 12px; - overflow-y: auto; - text-align: left; -} -.aceHelp { - border-top: 2px solid #333; - padding: 1em .6em; -} -.aceHelp h1, .aceHelp h3 { - color: #222222; - font-size: 2.5em; - font-weight: 500; - line-height: 1em; - margin: 0 0 1em; -} -.aceHelp h3{ - font-size: 1.3em; -} -.aceHelp p { - line-height: 1.6em; - margin: 0 0 1em; -} -.aceHelp table { - margin: 20px 0 10px; -} -.aceHelp strong { - font-weight: bold; -} -.aceHelp td, .aceHelp th { - color: #787878; - padding: 0 .8em .8em 0; - vertical-align: baseline; -} -.aceHelp th{ - font-weight: bold; -} -.aceHelp .key { - background-color: #666; - border: 0 none; - border-radius: .22em; - color: #FFF; - font-family: Arial; - display: inline-block; - font-size: .71em; - font-weight: bold; - line-height: 1.1; - padding: .22em .4em; - text-transform: uppercase; -} -.aceHelp .shortKeys{ - white-space: nowrap; - padding-right: 1.4em; -} diff --git a/src/css/editor/ugsEditorPlus.aceEditor.less b/src/css/editor/ugsEditorPlus.aceEditor.less new file mode 100644 index 0000000..2d1d604 --- /dev/null +++ b/src/css/editor/ugsEditorPlus.aceEditor.less @@ -0,0 +1,150 @@ +/* + * Document : ugsEditorPlus.aceEditor.css + * Author : Buz + * Description: Ace WYSIWYG Editor + */ +.aceEditorActive, +.aceEditorActive body { + overflow: hidden; + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} +/* using jQuery instead: .aceEditorActive #aceEditor */ +.aceEditorActive { + #aceHeader{ + display: block; + } + .ugsAppMenuBar, + .overlay, + .scalablePrintArea{ + display: none; + } +} +#aceHeader { + border-bottom: solid 1px; + font-family: arial,sans-serif; + font-size: 1; + line-height: 40px; + height:40px; + padding:0 15px; + display: none; + a{ + float: right; + font-size: 0.87em; + line-height: inherit; + color: inherit; + text-decoration: none; + } + a:hover{ + color: #CC7833;/*F92672;*/ + text-decoration: none; + } +} +#aceEditor { + /* using jQuery instead: display: none;*/ + position: absolute; + top: 40px; + right: 0; + bottom: 0; + left: 0; +} +/* Show/Hide Sidebar Button + ------------------------------------------ */ +.aceSideBtn { + background-color: rgba(0, 0, 0, 0); + border: 1px solid #DDDDDD; + border-radius: 4px; + cursor: pointer; + float:left; + margin: 7px 0.8em 0 0; + transition: background-color .3s ease; + span { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + background-color: #888888; + border-radius: 1px; + display: block; + height: 2px; + margin: 4px 2px; + width: 16px; + transition: background-color .3s ease; + } +} +.aceSideBtn:hover{ + background-color: #333; + span { + background-color: #eee; + } +} + +/* Help sidebar + ------------------------------------------ */ +#aceHelp { + bottom: 0; + left: -350px; + margin: 0; + position: absolute; + top: 40px; + width:350px; +} +#aceHelp { + background: #fff; + color: #707273; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 12px; + overflow-y: auto; + text-align: left; +} +.aceHelp { + border-top: 2px solid #333; + padding: 1em .6em; + + h1, h3 { + color: #222222; + font-size: 2.5em; + font-weight: 500; + line-height: 1em; + margin: 0 0 1em; + } + h3{ + font-size: 1.3em; + } + p { + line-height: 1.6em; + margin: 0 0 1em; + } + table { + margin: 20px 0 10px; + } + strong { + font-weight: bold; + } + td, th { + color: #787878; + padding: 0 .8em .8em 0; + vertical-align: baseline; + } + th{ + font-weight: bold; + } + .key { + background-color: #666; + border: 0 none; + border-radius: .22em; + color: #FFF; + font-family: Arial; + display: inline-block; + font-size: .71em; + font-weight: bold; + line-height: 1.1; + padding: .22em .4em; + text-transform: uppercase; + } + .shortKeys{ + white-space: nowrap; + padding-right: 1.4em; + } +} diff --git a/src/css/editor/ugsEditorPlus.arrowBox.css b/src/css/editor/ugsEditorPlus.arrowBox.css deleted file mode 100644 index 908b117..0000000 --- a/src/css/editor/ugsEditorPlus.arrowBox.css +++ /dev/null @@ -1,211 +0,0 @@ -/* - * Document : ugsEditorPlus.arrowBox.css - * Author : Buz - * Description: The menu boxes and their contents. - */ -/* Thanks to: cssarrowplease.com - -------------------------------- */ - .arrowBox { - background-color: rgba(0, 0, 0, 0.81); - border: 2px solid #fff; - border-radius: 10px; - color:#b3b3b3; - display: none; - position: fixed; - top: 60px; - width: 310px; - -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - z-index: 5; - } - .arrowBox:after, - .arrowBox:before { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - .arrowBox:after { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: #000; - border-width: 20px; - left: 50%; - margin-left: -20px; - } - .arrowBox:before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; - border-width: 23px; - left: 50%; - margin-left: -23px; - } - .arrowBoxContent{ - padding: 1em .6em .4em; - } - .arrowBoxContent + .arrowBoxContent{ - padding-top:0; - } - -/* --------------------------------------- */ -.enablePseudoSelects dt, -.enablePseudoSelects dd { - height: 3em; - line-height: 1; - margin: 0; - padding: 0; -} -.enablePseudoSelects dd { - display:none; - left: 16.1em; - position: relative; - top: -3.1em; - height: 0px; -} -.enablePseudoSelects label{ - color: #E4E4E4; - display: block; - cursor: pointer; - border: solid 1px transparent; - border-radius: 7px; - padding: 0.5em; -} -.enablePseudoSelects label em{ - color: #898989; - float: right; - font-family: Arial; -} -.enablePseudoSelects label:hover{ - color:#fff; - background-color: #2A2A2A; - border-color: #555; - box-shadow: 2px 2px 2px #000; - -} -.enablePseudoSelects label:hover em{ - color:#E4E4E4; -} -.event-userSelecting label{ - color:#B9B9B9; -} -.event-userSelecting label em{ - color:#3a3a3a; -} -html .active label{ - background-color: #000; - color: #fff; -} -/* --------------------------------------- */ -.pseudoSelect { - position: absolute; - background-color: #3C3C3C; - border: solid 1px #555; - border-radius: 7px; - box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); - color: #EFEFEF; - cursor: pointer; - width: 17em; -} -.pseudoSelect li { - display: block; - padding: 0.1em; -} -.pseudoSelect a{ - border: 2px solid transparent; - border-radius: 10px; - color: inherit; - display: block; - padding: 0.5em 0.5em 0.5em 30px; - text-decoration: none; -} -.pseudoSelect li:hover{ - color: #fff; -} -.pseudoSelect li:hover a{ - background-color: #000; - border-color: #676767; -} -/* undo */ -.pseudoSelect li { - float: none; - margin: 0; - text-align: inherit; -} -.pseudoSelect .checked a { - background: url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A; - border-color: #C5C5C5; - color: #FFFFFF; - text-shadow:1px 2px 1px #000; -} - -/* our Checkboxes are a problem... --------------------------------- */ -.checkboxBlock { - border-top: 1px solid #575757; - box-shadow: 0 -1px 0 #000; - font-size: 0.81em; - padding: 0.75em 0; -} -.checkboxBlock label{ - padding-left: 0.5em; -} -.checkBoxFinePrint{ - display: block; - font-size:.85em; - padding: 0.3em 0 0.5em 3.1em; -} -#commonChordList { - display: block; - font-size: 1.2em; - margin-left: 1.5em; - width: 15em; -} - -/* list of links (duh) - * ...undoing some spill-over styles, when will I learn - -------------------------------- */ - .linksList{ font-size: .85em;} - .linksList li { - margin: 0; - padding: 0.1em; - text-align: left; - float: none; - } - .linksList a { - border-radius: 8px; - color: #B9B9B9; - display: block; - padding: 0.6em; - text-decoration: none; - } - .linksList a:hover{ - background-color: #000; - color:#fff; - } -/* Feedback message -- on UPDATE --------------------------------- */ -.updateMessage { - background-color: #BAE5A7; - border: 1px solid #44A819; - border-radius: 4px 4px 4px 4px; - box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); - color: #43772D; - display: none; - position: absolute; - text-align: center; - text-shadow: 0 -1px rgba(255, 190, 40, 0.3); - width: 10em; -} -.updateMessage em{ - border: 1px solid #66D836; - border-radius: 3px 3px 3px 3px; - box-shadow: 0 0 3px #559277 inset; - display: block; - height: 100%; - padding: 0.2em; -} \ No newline at end of file diff --git a/src/css/editor/ugsEditorPlus.arrowBox.less b/src/css/editor/ugsEditorPlus.arrowBox.less new file mode 100644 index 0000000..25f8760 --- /dev/null +++ b/src/css/editor/ugsEditorPlus.arrowBox.less @@ -0,0 +1,224 @@ +/* + * Document : ugsEditorPlus.arrowBox.css + * Author : Buz + * Description: The menu boxes and their contents. + */ +/* Thanks to: cssarrowplease.com + -------------------------------- */ +.arrowBox { + background-color: rgba(0, 0, 0, 0.81); + border: 2px solid #fff; + border-radius: 10px; + color:#b3b3b3; + display: none; + position: fixed; + top: 60px; + width: 310px; + -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + z-index: 5; + + &:after, + &:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(0, 0, 0, 0); + border-bottom-color: #000; + border-width: 20px; + left: 50%; + margin-left: -20px; + } + + &:before { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + border-width: 23px; + left: 50%; + margin-left: -23px; + } +} + .arrowBoxContent{ + padding: 1em .6em .4em; + } + .arrowBoxContent + .arrowBoxContent{ + padding-top:0; + } + +/* +-------------------------------------- */ +.enablePseudoSelects { + dt, + dd { + height: 3em; + line-height: 1; + margin: 0; + padding: 0; + } + dd { + display:none; + left: 16.1em; + position: relative; + top: -3.1em; + height: 0px; + } + label { + color: #E4E4E4; + display: block; + cursor: pointer; + border: solid 1px transparent; + border-radius: 7px; + padding: 0.5em; + + &:hover { + color:#fff; + background-color: #2A2A2A; + border-color: #555; + box-shadow: 2px 2px 2px #000; + + em { + color:#E4E4E4; + } + } + } + + label em{ + color: #898989; + float: right; + font-family: Arial; + } +} +.event-userSelecting label { + color:#B9B9B9; + em { + color:#3a3a3a; + } +} +html .active label { + background-color: #000; + color: #fff; +} +/* +-------------------------------------- */ +.pseudoSelect { + position: absolute; + background-color: #3C3C3C; + border: solid 1px #555; + border-radius: 7px; + box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); + color: #EFEFEF; + cursor: pointer; + width: 17em; + + a { + border: 2px solid transparent; + border-radius: 10px; + color: inherit; + display: block; + padding: 0.5em 0.5em 0.5em 30px; + text-decoration: none; + } + + li { + display: block; + float: none; + margin: 0; + padding: 0.1em; + text-align: inherit; + + &:hover { + color: #fff; + + a { + background-color: #000; + border-color: #676767; + } + } + } + + .checked a { + background: url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A; + border-color: #C5C5C5; + color: #FFFFFF; + text-shadow:1px 2px 1px #000; + } +} +/* our Checkboxes are a problem... +-------------------------------- */ +.checkboxBlock { + border-top: 1px solid #575757; + box-shadow: 0 -1px 0 #000; + font-size: 0.81em; + padding: 0.75em 0; + + label { + padding-left: 0.5em; + } +} +.checkBoxFinePrint{ + display: block; + font-size:.85em; + padding: 0.3em 0 0.5em 3.1em; +} +#commonChordList { + display: block; + font-size: 1.2em; + margin-left: 1.5em; + width: 15em; +} + +/* list of links (duh) + * ...undoing some spill-over styles, when will I learn + -------------------------------- */ + .linksList { + font-size: .85em; + li { + margin: 0; + padding: 0.1em; + text-align: left; + float: none; + } + a { + border-radius: 8px; + color: #B9B9B9; + display: block; + padding: 0.6em; + text-decoration: none; + + &:hover { + background-color: #000; + color:#fff; + } + } +} +/* Feedback message -- on UPDATE +-------------------------------- */ +.updateMessage { + background-color: #BAE5A7; + border: 1px solid #44A819; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); + color: #43772D; + display: none; + position: absolute; + text-align: center; + text-shadow: 0 -1px rgba(255, 190, 40, 0.3); + width: 10em; + + em { + border: 1px solid #66D836; + border-radius: 3px 3px 3px 3px; + box-shadow: 0 0 3px #559277 inset; + display: block; + height: 100%; + padding: 0.2em; + } +} diff --git a/src/css/editor/ugsEditorPlus.buttons.css b/src/css/editor/ugsEditorPlus.buttons.less similarity index 59% rename from src/css/editor/ugsEditorPlus.buttons.css rename to src/css/editor/ugsEditorPlus.buttons.less index 89676f3..c5df507 100644 --- a/src/css/editor/ugsEditorPlus.buttons.css +++ b/src/css/editor/ugsEditorPlus.buttons.less @@ -21,13 +21,14 @@ /* Remove underline in case this is applied to a link */ text-decoration: none; -} -.baseBtn:hover { - background-color: #888; - /* Force colorin case this is applied to a link */ + &:hover { + background-color: #888; + /* Force colorin case this is applied to a link */ - color: #fff; + color: #fff; + } } + .blueBtn { background-color: #89b9e3; background-image: -moz-linear-gradient(top, #89b9e3, #3d6bbb); @@ -36,14 +37,14 @@ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')"; border-color: #3765B7; text-shadow: #89b9e3 0px 1px 0, #3765b7 0 -1px 0; -} -.blueBtn:hover { - background-color: #4c85e8; - background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; - text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; + &:hover { + background-color: #4c85e8; + background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; + text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; + } } /* orange */ @@ -55,28 +56,29 @@ background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); text-shadow: #da7c0c 0px 1px 0, #faa51a 0 -1px 0; -} -.orange:hover { - background: #f47c20; - background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); - background: -moz-linear-gradient(top, #f88e11, #f06015); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); - text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; -} -.orange:active { - color: #fcd3a5; - background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); - background: -moz-linear-gradient(top, #f47a20, #faa51a); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); + &:hover { + background: #f47c20; + background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); + background: -moz-linear-gradient(top, #f88e11, #f06015); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); + text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; + } + &:active { + color: #fcd3a5; + background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); + background: -moz-linear-gradient(top, #f47a20, #faa51a); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); + } } .btnBar { height: 30px; -} -.btnBar .baseBtn { - float: right; - font-size: 110%; - margin-bottom: 5px; + + .baseBtn { + float: right; + font-size: 110%; + margin-bottom: 5px; + } } /* "Cancel"/"No Thanks" (subtle, alternate) buttons ------------------------------ */ @@ -87,11 +89,12 @@ line-height: 33px; margin-right: 1.5em; text-decoration: none; + + &:hover { + color:#0646AD; + } } -.alternateBtn:hover, -.noThanks:hover { - color:#0646AD; -} + .noThanks { background-color: #EFD292; border-radius: 6px; @@ -102,10 +105,12 @@ -ms-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; + + &:hover { + background-color: #F2E2C1; + } } -.noThanks:hover { - background-color: #F2E2C1; -} -.alternateBtn{ + +.alternateBtn { } diff --git a/src/css/editor/ugsEditorPlus.chordBuilder.css b/src/css/editor/ugsEditorPlus.chordBuilder.less similarity index 78% rename from src/css/editor/ugsEditorPlus.chordBuilder.css rename to src/css/editor/ugsEditorPlus.chordBuilder.less index 55099fc..f5986ed 100644 --- a/src/css/editor/ugsEditorPlus.chordBuilder.css +++ b/src/css/editor/ugsEditorPlus.chordBuilder.less @@ -5,23 +5,25 @@ */ /* Chord Builder's elements ------------------------------ */ -.chordBuilderDlg input[type=text] { - border: 1px solid #D7D7D7; - border-radius: 5px 5px 5px 5px; - display: block; - font-size: 30pt; - padding: 0; - text-align: center; - max-width: 100%; - width: 100%; -} -.chordBuilderDlg pre { - font-size: 12pt; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; +.chordBuilderDlg { + input[type=text] { + border: 1px solid #D7D7D7; + border-radius: 5px 5px 5px 5px; + display: block; + font-size: 30pt; + padding: 0; + text-align: center; + max-width: 100%; + width: 100%; + } + pre { + font-size: 12pt; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; + } } /* ** canvas & editor stack */ html body .editorSurface { @@ -266,7 +268,7 @@ html .arrowDown { font-weight:bold; } /* ________ Chord Chooser (List) ________ */ -.ugsChordChooser{ +.ugsChordChooser { background-color: #eed18e; border-radius: 10px; color: #551d00;/* #f4e19d; */ @@ -275,50 +277,51 @@ html .arrowDown { min-height: 10em; overflow-y: auto; padding: .1em 0; + + li { + background-color: #bc9350; + border-radius: 6px; + cursor: pointer; + margin: 0.5em; + padding: 0.5em; + /* backwards transition support */ + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + -o-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; + } + li:hover { + background-color: #99512c; + color: #f4e19d; /* #ffdb5b; */ + text-shadow: 0px 2px 0px #551D00; + } + .newChord { + background-color: #b2612d; + color: #551d00; + font-weight: bold; + } + // delete button + .deleteChord { + background: url("../img/editor/delete-btn.png") right center no-repeat; + display: block; + float: right; + height: 30px; + opacity: 0; + width: 36px; + /* backwards transition support */ + -webkit-transition: opacity 0.4s ease; + -moz-transition: opacity 0.4s ease; + -ms-transition: opacity 0.4s ease; + -o-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; + } + li:hover .deleteChord { + opacity: 1; + } + // mini-diagram + canvas { + float: right; + margin-right: 10px; + } } -.ugsChordChooser li{ - background-color: #bc9350; - border-radius: 6px; - cursor: pointer; - margin: 0.5em; - padding: 0.5em; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - -o-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; -} -.ugsChordChooser li:hover{ - background-color: #99512c; - color: #f4e19d; /* #ffdb5b; */ - text-shadow: 0px 2px 0px #551D00; -} -.ugsChordChooser .newChord{ - background-color: #b2612d; - color: #551d00; - font-weight: bold; -} -/* delete button */ -.ugsChordChooser .deleteChord{ - background: url("../img/editor/delete-btn.png") right center no-repeat; - display: block; - float: right; - height: 30px; - opacity: 0; - width: 36px; - /* backwards transition support */ - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - -o-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; -} -.ugsChordChooser li:hover .deleteChord{ - opacity: 1; -} -/* mini-diagram */ -.ugsChordChooser canvas { - float: right; - margin-right: 10px; -} \ No newline at end of file diff --git a/src/css/editor/ugsEditorPlus.css b/src/css/editor/ugsEditorPlus.less similarity index 83% rename from src/css/editor/ugsEditorPlus.css rename to src/css/editor/ugsEditorPlus.less index e0dfba2..3633016 100644 --- a/src/css/editor/ugsEditorPlus.css +++ b/src/css/editor/ugsEditorPlus.less @@ -4,6 +4,6 @@ * Author : Buz * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. */ -.salt_8873ySp { - color:#0f0; +.salt_8873ySp8 { + color:#0ff; } diff --git a/src/css/editor/ugsEditorPlus.menuBar.css b/src/css/editor/ugsEditorPlus.menuBar.less similarity index 100% rename from src/css/editor/ugsEditorPlus.menuBar.css rename to src/css/editor/ugsEditorPlus.menuBar.less diff --git a/src/css/editor/ugsEditorPlus.overlays.css b/src/css/editor/ugsEditorPlus.overlays.css deleted file mode 100644 index 33be5a4..0000000 --- a/src/css/editor/ugsEditorPlus.overlays.css +++ /dev/null @@ -1,234 +0,0 @@ -/* - * Document : ugsEditorPlus.overlays.css - * Author : Buz - * Description: Generic and use-spedific Overlay/Dialog box elements. - */ -/* FLOATIN EDITOR --------------------------------- */ -.overlay { - position:fixed; - top:45px; - right:20px; - background-color: #2B1100; - background-color: rgba(30, 11, 0, 0.75); /* rgba(43, 17, 0, 0.80); */ - -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -moz-border-radius: 22px; - -webkit-border-radius: 22px; - border-radius: 22px; - padding: 10px; - width: 490px; - z-index:0; -} -.overlay > div { - background: url("../img/editor/woodChip.png") repeat scroll 0 0 transparent; - border-radius: 0 0 13px 13px; - overflow: hidden; - padding: 10px; -} -/* -.overlay div div{ - background-image: none; - border-radius:0; - padding: 0; -} -*/ -/* MOVED FROM PAGE: SECTION 4 ------------------------------- */ -.isHidden { - display:none; -} -/* Form inputs, ------------------------------------ */ -.overlay select{ - font-size: 1.1em; -} -.overlay input[type=text], -.overlay input[type=password] { - display: block; - font-size: 1.2em; - margin-bottom: .4em; - padding: 0.1em; - width: 98%; -} -.overlay textarea { - font-family: Monaco, "Consolas", "Lucida Console", "Courier New", courier, monospace; - font-size: 10pt; - line-height: 1.25; - padding-left: .3em; - white-space: nowrap; - white-space:pre; - overflow:scroll; - height:525px; - width: 98%; -} -.overlay input[type=text], -.overlay input[type=password], -.overlay textarea { - background-color: rgba(255, 255, 255, 0.7); - border: solid 1px #E1B166; - max-width: 100%; - max-height: 100%; - -webkit-transition: background-color 500ms linear; - -moz-transition: background-color 500ms linear; - -o-transition: background-color 500ms linear; - -ms-transition: background-color 500ms linear; - transition: background-color 500ms linear; -} -.overlay input[type=text]:hover, -.overlay input[type=password]:hover, -.overlay textarea:hover { - background-color:rgba(255, 255, 200, 0.7); - border-color:#444; -} -.overlay input[type=text]:focus, -.overlay input[type=password]:focus, -.overlay textarea:focus { - background-color:rgba(255, 255, 255, 0.9); - border-color: #6C280C; - -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); -} -.overlay h3 { - /* - cursor: move; - */ - background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; - border-bottom: 1px solid #240E01; - border-radius: 12px 12px 0 0; - border-top: 1px solid #84623C; - color: #F4E19F; - font-size: 22px; - /*font-weight: bold;*/ - height: 37px; - line-height: 37px; - padding: 0 20px; - text-shadow: 1px 2px 0 #592108; -} -.overlay .closeBtn { - background: url("../img/editor/closeBtn.png") no-repeat 0 0 transparent; - display: block; - height: 30px; - outline: none; - position: absolute; - right: 10px; - text-indent: -5000em; - top: 14px; - width: 30px; -} -.overlay .resizeBtn { - background: url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent; - display: block; - height: 20px; - outline: none; - position: absolute; - right: 55px; - text-indent: -5000em; - top: 18px; - width: 20px; -} -/* _________ Specific Overlays _________ */ -html .helpDlg { - top:75px; - right:70px; - width: 300px; - z-index:1; -} -html .optionsDlg { - top:100px; - right:210px; - width: 380px; - z-index:2; -} -.optionsDlg div{ - font-size:.91em; -} -.optionsDlg div li{ - padding-bottom:.82em; -} -/* _________ Chord Builder Dialog _________ */ -.chordBuilderDlg{ - right: 210px; - top: 70px; - width: 490px; - /* backwards transition support */ - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -html .chordBuilderNarrow{ - width: 345px; -} -/* STANDARD appearance HTML for Help Section --------------------------------- */ -.helpDlg{ - font-size:.9em; -} -.normalHtml p, -.normalHtml ul, -.normalHtml ol { - margin-bottom:1em; -} -.normalHtml li { - list-style: disc outside none; - margin-left: 1em; - padding-bottom:.4em; -} -.normalHtml h3 { - font-size:1.2em; - font-weight:bold; -} -/* Reformat Dialog ------------------------------- */ -.reformatDlg{ - right: 25%; - top: 100px; - width: 480px; - z-index: 3; -} -.instructions { - width: 28em; - padding:0 0 .7em; - color:#563324; -} -.instructions.small { - clear:both; - font-size:.8em; - display:block; - width: 35em; -} -html .reformatDlg textarea{ - height: 15em; -} - -/* --------------------------------------- */ -.layoutOptions{ - left: 50px; -} -.layoutOptions:after, -.layoutOptions:before { - left:22%; -} - -.tuningOptions{ - left:150px; -} -#transposeOptions em { - color: #CCCCCC; - float: right; - font-size: 0.86em; -} -.otherOptions { - left: 250px; -} -.helpOptions { - left: 320px; -} - - - diff --git a/src/css/editor/ugsEditorPlus.overlays.less b/src/css/editor/ugsEditorPlus.overlays.less new file mode 100644 index 0000000..fd412de --- /dev/null +++ b/src/css/editor/ugsEditorPlus.overlays.less @@ -0,0 +1,267 @@ +/* + * Document : ugsEditorPlus.overlays.css + * Author : Buz + * Description: Generic and use-spedific Overlay/Dialog box elements. + */ +/* FLOATIN EDITOR +-------------------------------- */ +.overlay { + position:fixed; + top:45px; + right:20px; + background-color: #2B1100; + background-color: rgba(30, 11, 0, 0.75); // rgba(43, 17, 0, 0.80); + -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + -moz-border-radius: 22px; + -webkit-border-radius: 22px; + border-radius: 22px; + padding: 10px; + width: 490px; + z-index:0; +} +.overlay > div { + background: url("../img/editor/woodChip.png") repeat scroll 0 0 transparent; + border-radius: 0 0 13px 13px; + overflow: hidden; + padding: 10px; +} + +// .overlay div div{ +// background-image: none; +// border-radius:0; +// padding: 0; +// } + +/* MOVED FROM PAGE: SECTION 4 +------------------------------ */ +.isHidden { + display:none; +} + +/* Form inputs, +----------------------------------- */ +.overlay { + select{ + font-size: 1.1em; + } + input[type=text], + input[type=password] { + display: block; + font-size: 1.2em; + margin-bottom: .4em; + padding: 0.1em; + width: 98%; + } + textarea { + font-family: Monaco, "Consolas", "Lucida Console", "Courier New", courier, monospace; + font-size: 10pt; + line-height: 1.25; + padding-left: .3em; + white-space: nowrap; + white-space:pre; + overflow:scroll; + height:525px; + width: 98%; + } + + input[type=text], + input[type=password], + textarea { + background-color: rgba(255, 255, 255, 0.7); + border: solid 1px #E1B166; + max-width: 100%; + max-height: 100%; + -webkit-transition: background-color 500ms linear; + -moz-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; + -ms-transition: background-color 500ms linear; + transition: background-color 500ms linear; + + &:hover { + background-color:rgba(255, 255, 200, 0.7); + border-color:#444; + } + &:focus { + background-color:rgba(255, 255, 255, 0.9); + border-color: #6C280C; + -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + } + } + + h3 { + // cursor: move; + background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; + border-bottom: 1px solid #240E01; + border-radius: 12px 12px 0 0; + border-top: 1px solid #84623C; + color: #F4E19F; + font-size: 22px; + // font-weight: bold; + height: 37px; + line-height: 37px; + padding: 0 20px; + text-shadow: 1px 2px 0 #592108; + } + .closeBtn { + background: url("../img/editor/closeBtn.png") no-repeat 0 0 transparent; + display: block; + height: 30px; + outline: none; + position: absolute; + right: 10px; + text-indent: -5000em; + top: 14px; + width: 30px; + } + .resizeBtn { + background: url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent; + display: block; + height: 20px; + outline: none; + position: absolute; + right: 55px; + text-indent: -5000em; + top: 18px; + width: 20px; + } +} +/* _________ Specific Overlays _________ */ +html .helpDlg { + top:75px; + right:70px; + width: 300px; + z-index:1; +} +html .optionsDlg { + top:100px; + right:210px; + width: 380px; + z-index:2; +} +.optionsDlg div { + font-size:.91em; +} +.optionsDlg div li { + padding-bottom:.82em; +} +/* _________ Chord Builder Dialog _________ */ +.chordBuilderDlg { + right: 210px; + top: 70px; + width: 490px; + // backwards transition support + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +html .chordBuilderNarrow{ + width: 345px; +} +/* STANDARD appearance HTML for Help Section +-------------------------------- */ +.helpDlg { + font-size:.9em; +} +.normalHtml { + p, + ul, + ol { + margin-bottom:1em; + } + li { + list-style: disc outside none; + margin-left: 1em; + padding-bottom:.4em; + } + h3 { + font-size:1.2em; + font-weight:bold; + } +} +/* Reformat Dialog +------------------------------ */ +.reformatDlg { + right: 25%; + top: 100px; + width: 480px; + z-index: 3; +} +.instructions { + width: 28em; + padding:0 0 .7em; + color:#563324; +} +.instructions.small { + clear:both; + font-size:.8em; + display:block; + width: 35em; +} +html .reformatDlg textarea{ + height: 15em; +} + +/* postitioning the drop-down menus & arrows +-------------------------------------- */ +.layoutOptions { + left: 50px; + &:after, + &:before { + left:22%; + } +} + +.tuningOptions { + left:150px; +} + +#transposeOptions em { + color: #CCCCCC; + float: right; + font-size: 0.86em; +} + +.otherOptions { + left: 250px; +} +.helpOptions { + left: 320px; +} + +.hasSongbookLink { + .layoutOptions:after, + .layoutOptions:before { + left: 72%; + } + + .tuningOptions { + left: 250px; + } + + // OTHER + .otherOptions { + left: 300px; + &:after, + &:before { + left: 70%; + } + } + + // HELP + .helpOptions { + left: 340px; + &:after, + &:before { + left: 80%; + } + } + +} + + diff --git a/src/css/editor/ugsEditorPlus.song.css b/src/css/editor/ugsEditorPlus.song.less similarity index 53% rename from src/css/editor/ugsEditorPlus.song.css rename to src/css/editor/ugsEditorPlus.song.less index 702cf17..8443163 100644 --- a/src/css/editor/ugsEditorPlus.song.css +++ b/src/css/editor/ugsEditorPlus.song.less @@ -4,49 +4,60 @@ * Description: Classes affecting song layout and style; Critical to Scriptasaurus presentation. * Important! This should be the last file in the CSS bundle. */ - .scalablePrintArea { - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - background-color: #fff; - border-right:solid 1px #888; - font-size: inherit; - box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); - } - .scalablePrintArea hgroup{ - padding-bottom: .15in; - } +.scalablePrintArea { + -moz-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + background-color: #fff; + border-right:solid 1px #888; + font-size: inherit; + box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); + + hgroup { + padding-bottom: .15in; + } +} + /* Alternate Layouts: Hide Diagrams -------------------------------- */ -html .ugsHideDiagrams .ugs-diagrams-wrap { - display:none; -} -html .ugsHideDiagrams .ugs-source-wrap { - margin-left: 0; +html .ugsHideDiagrams { + .ugs-diagrams-wrap { + display: none; + } + .ugs-source-wrap { + margin-left: 0; + } } + /* Alternate Layouts: Chord Diagrams On Top: -------------------------------- */ -html .diagramsOnTop .ugs-diagrams-wrap { - float: none; - width: auto; -} -html .diagramsOnTop .ugs-source-wrap { - margin-left: 0; +html .diagramsOnTop { + .ugs-diagrams-wrap { + float: none; + width: auto; + } + .ugs-source-wrap { + margin-left: 0; + } } .ugsNoChords .ugs-source-wrap{ margin-left: 0; } + /* Alternate Layouts: standard Two Column ------------------------------ */ -.diagramsOnSide .ugs-diagrams-wrap { - float:left; - width:225px; -} -.diagramsOnSide .ugs-source-wrap { - margin-left:250px; +.diagramsOnSide { + .ugs-diagrams-wrap { + float: left; + width: 225px; + } + .ugs-source-wrap { + margin-left: 250px; + } } .liBtn, .liBtn * { cursor: pointer; } + /* page widths -------------------------------- */ .pageWidth_letter .scalablePrintArea { @@ -62,9 +73,11 @@ html .diagramsOnTop .ugs-source-wrap { .pageWidth_screen .scalablePrintArea { padding:20px; } + /* redundant rule to allow JS hook -------------------------------- */ /* NOTE: this should be last set of rules in this file! */ -.scalablePrintArea .ugs-diagrams-wrap canvas{} -.scalablePrintArea .ugs-diagrams-wrap{} -.scalablePrintArea .ugs-source-wrap{} +// To prevent LESS compiler from removing them we need at least one rule, so using "zoom" +.scalablePrintArea .ugs-diagrams-wrap canvas{ zoom: 1;} +.scalablePrintArea .ugs-diagrams-wrap{ zoom: 1;} +.scalablePrintArea .ugs-source-wrap{ zoom: 1;} diff --git a/src/css/editor/ugsEditorPlus.themes.css b/src/css/editor/ugsEditorPlus.themes.css deleted file mode 100644 index 81ead67..0000000 --- a/src/css/editor/ugsEditorPlus.themes.css +++ /dev/null @@ -1,354 +0,0 @@ -/* - * Document : ugsEditorPlus.themese.css - * Author : Buz - * Description: Alternative color schemes. - */ - - /* __________ Reverse __________ */ - - .theme-reversed { - background-color: #000; - color: #FFF; - } - .theme-reversed .scalablePrintArea{ - background-color: transparent; - } - .theme-reversed pre { - color: #e9e9e9; - } - .theme-reversed .ugsChords code { - color: #333; - } - .theme-reversed .ugsChords code em { - color: #F42; - } - .theme-reversed .ugsChorus { - border-left-color: #333; - } - .theme-reversed .scalablePrintArea h5, .theme-reversed .scalablePrintArea h6 { - border-left-color: #444; - color: #69F; - } - /* unique to the reversed theme we need to harden editor's UI */ - .theme-reversed .subNav a:hover { - background-color: #888; - color: #000; - } - .theme-reversed .overlay { - background-color: #4E1C07; - box-shadow: none; - color: #000; - } - - /* __________ Jelly Bean __________ */ - - .theme-jellyBean .scalablePrintArea{ - color: #56A0A5; - font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; - } - .theme-jellyBean .scalablePrintArea hgroup { - color: #FF9417; - text-align: center; - } - .theme-jellyBean .scalablePrintArea h1 { - color: #D20770; - font-family: 'Peralta',cursive, sans-serif; - font-size: 2em; - text-shadow: 0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660; - } - .theme-jellyBean .scalablePrintArea h2 { - font-size: 1.1em; - } - .theme-jellyBean pre { - color: inherit; - } - .theme-jellyBean .ugsChords code { - color: #333; - } - .theme-jellyBean .ugsChords code em { - color: #D20070; - } - .theme-jellyBean .ugsChorus { - border-left-color: #F2E660; - border-radius: 5px 0 0 5px; - } - .theme-jellyBean .scalablePrintArea h5, .theme-jellyBean .scalablePrintArea h6 { - border-left-color: #F2E660; - color: #9C55ED; - font-family: inherit; - letter-spacing: 0.045em; - } - - /* __________ Western __________ */ - -.theme-western .scalablePrintArea{ - color: #88410A; -} -.theme-western .scalablePrintArea hgroup{ - color: #88410A; - font-family: 'Smokum',Arial, sans-serif; - text-align: center; -} -.theme-western .scalablePrintArea h1 { - color: #472B07; - font-family: inherit; - font-size: 3.3em; - text-shadow: 0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0; -} -.theme-western .scalablePrintArea h2{ - font-size: 1.7em; -} -.theme-western .ugsChorus { - border-left-color: #BEC481; - border-radius: 5px 0 0 5px; -} -.theme-western .scalablePrintArea h5, .theme-western .scalablePrintArea h6 { - border-left-color: #BED379; - color: #92A88C; - font-family: 'Smokum',Arial, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; -} -.theme-western .ugs-source-wrap pre { - color: inherit; -} - -/* __________ Pumpkin (Halloween 1) __________ */ - -.theme-pumpkin .scalablePrintArea { - color: #68391D; -} -.theme-pumpkin .ugs-source-wrap pre { - color: inherit; -} -.theme-pumpkin .scalablePrintArea hgroup{ - color: #B14623; - text-align: center; -} -.theme-pumpkin .scalablePrintArea h1 { - color: #D3770E; - font-family: 'Ranchers',Arial,sans-serif; - font-size: 3.2em; - line-height: 1.1; - text-shadow: 0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379; -} -.theme-pumpkin .scalablePrintArea h2{ - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.1em; -} -.theme-pumpkin .ugsChorus { - border-left-color: #A0B74E; - border-radius: 5px 0 0 5px; -} -.theme-pumpkin .ugsChords code em { - color: #FE9600; -} -.theme-pumpkin .scalablePrintArea h5, .theme-pumpkin .scalablePrintArea h6 { - border-left-color: #BED379; - color: #FFC501; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; -} - -/* __________ Zombie (Halloween II) __________ */ - -.theme-zombie .scalablePrintArea { - color: #798666; -} -.theme-zombie .ugs-source-wrap pre { - color: inherit; -} -.theme-zombie .scalablePrintArea hgroup{ - color: #902374; - text-align: center; -} -.theme-zombie .scalablePrintArea h1 { - color: #BED63A; - font-family: 'Creepster',cursive, sans-serif; - font-size: 3.2em; - line-height: 1.1; - text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04; -} -.theme-zombie .scalablePrintArea h2 { - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.1em; - text-shadow: 0.12em 0.13em 0 #DBDAE8; -} -.theme-zombie .ugsChorus { - border-left-color: #CDC693; - border-radius: 6px 0 0 6px; -} -.theme-zombie .ugsChords code em { - color: #DD1A52; -} -.theme-zombie .scalablePrintArea h5, .theme-zombie .scalablePrintArea h6 { - border-left-color: #E4DCA4; - color: #798666; - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; - text-shadow: 0.03em 0.07em 0 #BED63A; -} - -/* __________ Frosty __________ */ - -.theme-frosty .scalablePrintArea { - color: #154286; -} -.theme-frosty .ugs-source-wrap pre { - color: inherit; -} -.theme-frosty .scalablePrintArea hgroup{ - color: #6A97DB; - text-align: center; -} -.theme-frosty .scalablePrintArea h1 { - color: #D5E2F5; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 2.18em; - letter-spacing: 0.05em; - line-height: 1.1; - text-shadow: -0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; -} -.theme-frosty .scalablePrintArea h2 { - font-family: 'Ranchers',Arial,sans-serif; - font-size: 1.2em; -} -.theme-frosty .ugsChorus { - border-left-color: #0896FE; - border-radius: 6px 0 0 6px; -} -.theme-frosty .ugsChords code em { - color: #0896FE; -} -.theme-frosty .scalablePrintArea h5, .theme-frosty .scalablePrintArea h6 { - border-left-color: #E3F7F3; - color: #80B7B1; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 0.6em; -} - -/* __________ Gruss vom Krampus __________ */ - -/* -http://www.colourlovers.com/palette/1374491/Merry_Christmas%E2%98%83 -http://www.colourlovers.com/palette/510474/vintage_Christmas -*/ -.theme-krampus .scalablePrintArea { - color: #929867; -} -.theme-krampus .ugs-source-wrap pre { - color: inherit; -} -.theme-krampus .scalablePrintArea hgroup{ - color: #929867; - text-align: center; -} -.theme-krampus .scalablePrintArea h1 { - color: #A22C27; - font-family: 'Lobster',cursive, sans-serif; - font-size: 2.78em; - line-height: 1.1; - text-shadow: 0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621; -} -.theme-krampus .scalablePrintArea h2 { - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.2em; - text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; -} -.theme-krampus .ugsChorus { - border-left-color: #B9C97E; - border-radius: 6px 0 0 6px; -} -.theme-krampus .ugsChords code em { - color: #384030; -} -.theme-krampus .scalablePrintArea h5, .theme-krampus .scalablePrintArea h6 { - border-left-color: #7B8055; - color: #A32C28; - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.2em; - font-style: normal; - padding: 0; - text-indent: 0.6em; -} - -/* __________ Notebook __________ */ - -.theme-notebook .scalablePrintArea { - color: #443377; - font-family: 'Architects Daughter',Arial,sans-serif; -} -.theme-notebook .ugs-source-wrap pre { - color: inherit; -} -.theme-notebook .scalablePrintArea hgroup{ - color: #2E2ECC; - font-family: inherit; - text-align: center; -} -.theme-notebook .scalablePrintArea h1 { - border-color: #E4E4FF; - border-style: solid; - border-width: 1px 0; - color: #252537; - font-family: 'Permanent Marker',Arial,sans-serif; - font-size: 2em; - margin-bottom: 0.2em; -} -.theme-notebook .scalablePrintArea h2 { - border-bottom: 1px solid #E4E4FF; - font-size: 1.1em; -} -.theme-notebook .ugsChorus { - border-left-color: #a4a0b2; - border-radius: 6px 0 0 6px; -} -.theme-notebook .ugsChords code { - font-family: inherit; -} -/* -.theme-notebook .ugsChords code em { - color: #384030; -} -*/ -.theme-notebook .scalablePrintArea h5, .theme-notebook .scalablePrintArea h6 { - border-left-color: #626283; - color: #2E2ECC; - font-family: 'Permanent Marker',Arial,sans-serif; - font-size: 1.3em; - padding: 0; - text-indent: 0.7em; -} - -/* __________ Just BLack __________ */ - -.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, -.theme-justBlack .ugsChords code em { - color: #000; -} -.theme-justBlack .ugsChords code em{ - font-weight: bold; -} -.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, -.theme-justBlack .scalablePrintArea hgroup, -.theme-justBlack .scalablePrintArea hgroup *{ - /* first choice: museo slab 500 */ - font-family: 'Bree Serif', Arial, sans-serif; - font-style: normal; -} -.theme-justBlack .scalablePrintArea hgroup{ - text-align: center; -} diff --git a/src/css/editor/ugsEditorPlus.themes.less b/src/css/editor/ugsEditorPlus.themes.less new file mode 100644 index 0000000..2274ea3 --- /dev/null +++ b/src/css/editor/ugsEditorPlus.themes.less @@ -0,0 +1,375 @@ +/* + * Document : ugsEditorPlus.themes.css + * Author : Buz + * Description: Alternative color schemes. + */ + +/* __________ Reverse __________ */ +.theme-reversed { + background-color: #000; + color: #FFF; + + pre { + color: #e9e9e9; + } + .scalablePrintArea{ + background-color: transparent; + h5, + h6 { + border-left-color: #444; + color: #69F; + } + } + .ugsChorus { + border-left-color: #333; + } + .ugsChords { + code { + color: #333; + em { + color: #F42; + } + } + + } + /* unique to the reversed theme we need to harden editor's UI */ + .subNav a:hover { + background-color: #888; + color: #000; + } + .overlay { + background-color: #4E1C07; + box-shadow: none; + color: #000; + } +} + +/* __________ Jelly Bean __________ */ +.theme-jellyBean { + pre { + color: inherit; + } + .scalablePrintArea { + color: #56A0A5; + font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; + hgroup { + color: #FF9417; + text-align: center; + } + h1 { + color: #D20770; + font-family: 'Peralta',cursive, sans-serif; + font-size: 2em; + text-shadow: 0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660; + } + h2 { + font-size: 1.1em; + } + h5, + h6 { + border-left-color: #F2E660; + color: #9C55ED; + font-family: inherit; + letter-spacing: 0.045em; + } + } + .ugsChorus { + border-left-color: #F2E660; + border-radius: 5px 0 0 5px; + } + .ugsChords { + code { + color: #333; + em { + color: #D20070; + } + } + } +} + +/* __________ Western __________ */ +.theme-western { + .scalablePrintArea{ + color: #88410A; + hgroup{ + color: #88410A; + font-family: 'Smokum',Arial, sans-serif; + text-align: center; + } + h1 { + color: #472B07; + font-family: inherit; + font-size: 3.3em; + text-shadow: 0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0; + } + h2{ + font-size: 1.7em; + } + h5, h6 { + border-left-color: #BED379; + color: #92A88C; + font-family: 'Smokum',Arial, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + } + } + .ugsChorus { + border-left-color: #BEC481; + border-radius: 5px 0 0 5px; + } + .ugs-source-wrap pre { + color: inherit; + } +} + +/* __________ Pumpkin (Halloween 1) __________ */ +.theme-pumpkin { + .scalablePrintArea { + color: #68391D; + hgroup{ + color: #B14623; + text-align: center; + } + h1 { + color: #D3770E; + font-family: 'Ranchers',Arial,sans-serif; + font-size: 3.2em; + line-height: 1.1; + text-shadow: 0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379; + } + h2{ + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.1em; + } + h5, h6 { + border-left-color: #BED379; + color: #FFC501; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #A0B74E; + border-radius: 5px 0 0 5px; + } + .ugsChords { + code em { + color: #FE9600; + } + } +} + +/* __________ Zombie (Halloween II) __________ */ +.theme-zombie { + .scalablePrintArea { + color: #798666; + hgroup{ + color: #902374; + text-align: center; + } + h1 { + color: #BED63A; + font-family: 'Creepster',cursive, sans-serif; + font-size: 3.2em; + line-height: 1.1; + text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04; + } + h2 { + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.1em; + text-shadow: 0.12em 0.13em 0 #DBDAE8; + } + h5, h6 { + border-left-color: #E4DCA4; + color: #798666; + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + text-shadow: 0.03em 0.07em 0 #BED63A; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #CDC693; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #DD1A52; + } +} + +/* __________ Frosty __________ */ +.theme-frosty { + .scalablePrintArea { + color: #154286; + hgroup{ + color: #6A97DB; + text-align: center; + } + h1 { + color: #D5E2F5; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 2.18em; + letter-spacing: 0.05em; + line-height: 1.1; + text-shadow: -0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; + } + h2 { + font-family: 'Ranchers',Arial,sans-serif; + font-size: 1.2em; + } + h5, h6 { + border-left-color: #E3F7F3; + color: #80B7B1; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 0.6em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #0896FE; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #0896FE; + } +} + +/* __________ Gruss vom Krampus __________ */ +/* +http://www.colourlovers.com/palette/1374491/Merry_Christmas%E2%98%83 +http://www.colourlovers.com/palette/510474/vintage_Christmas +*/ +.theme-krampus { + .scalablePrintArea { + color: #929867; + hgroup{ + color: #929867; + text-align: center; + } + h1 { + color: #A22C27; + font-family: 'Lobster',cursive, sans-serif; + font-size: 2.78em; + line-height: 1.1; + text-shadow: 0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621; + } + h2 { + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.2em; + text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; + } + h5, h6 { + border-left-color: #7B8055; + color: #A32C28; + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.2em; + font-style: normal; + padding: 0; + text-indent: 0.6em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #B9C97E; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #384030; + } +} + +/* __________ Notebook __________ */ +.theme-notebook { + .scalablePrintArea { + color: #443377; + font-family: 'Architects Daughter',Arial,sans-serif; + hgroup{ + color: #2E2ECC; + font-family: inherit; + text-align: center; + } + h1 { + border-color: #E4E4FF; + border-style: solid; + border-width: 1px 0; + color: #252537; + font-family: 'Permanent Marker',Arial,sans-serif; + font-size: 2em; + margin-bottom: 0.2em; + } + h2 { + border-bottom: 1px solid #E4E4FF; + font-size: 1.1em; + } + h5, h6 { + border-left-color: #626283; + color: #2E2ECC; + font-family: 'Permanent Marker',Arial,sans-serif; + font-size: 1.3em; + padding: 0; + text-indent: 0.7em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #a4a0b2; + border-radius: 6px 0 0 6px; + } + .ugsChords code { + font-family: inherit; + } + /* + .ugsChords code em { + color: #384030; + } + */ +} + +/* __________ Just BLack __________ */ +.theme-justBlack { + .ugs-source-wrap { + h5, + h6 { + color: #000; + /* first choice: museo slab 500 */ + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; + } + } + .ugsChords code em { + color: #000; + font-weight: bold; + } + .scalablePrintArea hgroup, + .scalablePrintArea hgroup * { + /* first choice: museo slab 500 */ + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; + } + .scalablePrintArea hgroup{ + text-align: center; + } +} + From aadcabc9bfb4772fdee939ddf0e1209d4d1bd036 Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Fri, 24 Oct 2014 12:16:22 -0700 Subject: [PATCH 2/5] include version number in ChordBuilder; --- src/js/editor/ugsChordBuilder.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/editor/ugsChordBuilder.js b/src/js/editor/ugsChordBuilder.js index 0e3068f..d7c64a2 100644 --- a/src/js/editor/ugsChordBuilder.js +++ b/src/js/editor/ugsChordBuilder.js @@ -5,6 +5,7 @@ * @main ugsChordBuilder */ var ugsChordBuilder = window.ugsChordBuilder || {}; +ugsChordBuilder.version = '1.0.6'; /** * Entities (data containers) shared between the class libraries. Private From 9e6bda3acc6217f68f1faa80ffb29384d06b4670 Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Fri, 24 Oct 2014 12:17:07 -0700 Subject: [PATCH 3/5] switch to LESS; new class for "Songbook link" in nav bar; --- css/ugsEditorPlus.merged.css | 362 +++++++++++++++++++---------------- css/ugsEditorPlus.min.css | 239 +---------------------- 2 files changed, 200 insertions(+), 401 deletions(-) diff --git a/css/ugsEditorPlus.merged.css b/css/ugsEditorPlus.merged.css index a4c922a..e7c68e4 100644 --- a/css/ugsEditorPlus.merged.css +++ b/css/ugsEditorPlus.merged.css @@ -1,11 +1,15 @@ +/*! UkeGeeks Songbook Editor page + * Author: Buz Carter + * Engine: LessCSS + */ /* * Document : ugsEditorPlus * Created on : July 2013 * Author : Buz * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. */ -.salt_8873ySp { - color:#0f0; +.salt_8873ySp8 { + color: #0ff; } /* * Document : ugsEditorPlus.arrowBox.css @@ -83,11 +87,6 @@ border-radius: 7px; padding: 0.5em; } -.enablePseudoSelects label em{ - color: #898989; - float: right; - font-family: Arial; -} .enablePseudoSelects label:hover{ color:#fff; background-color: #2A2A2A; @@ -98,6 +97,11 @@ .enablePseudoSelects label:hover em{ color:#E4E4E4; } +.enablePseudoSelects label em { + color: #898989; + float: right; + font-family: Arial; +} .event-userSelecting label{ color:#B9B9B9; } @@ -120,10 +124,6 @@ html .active label{ cursor: pointer; width: 17em; } -.pseudoSelect li { - display: block; - padding: 0.1em; -} .pseudoSelect a{ border: 2px solid transparent; border-radius: 10px; @@ -132,6 +132,13 @@ html .active label{ padding: 0.5em 0.5em 0.5em 30px; text-decoration: none; } +.pseudoSelect li { + display: block; + float: none; + margin: 0; + padding: 0.1em; + text-align: inherit; +} .pseudoSelect li:hover{ color: #fff; } @@ -139,14 +146,8 @@ html .active label{ background-color: #000; border-color: #676767; } -/* undo */ -.pseudoSelect li { - float: none; - margin: 0; - text-align: inherit; -} .pseudoSelect .checked a { - background: url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A; + background: url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a; border-color: #C5C5C5; color: #FFFFFF; text-shadow:1px 2px 1px #000; @@ -156,7 +157,7 @@ html .active label{ -------------------------------- */ .checkboxBlock { border-top: 1px solid #575757; - box-shadow: 0 -1px 0 #000; + box-shadow: 0 -1px 0 #000000; font-size: 0.81em; padding: 0.75em 0; } @@ -178,7 +179,9 @@ html .active label{ /* list of links (duh) * ...undoing some spill-over styles, when will I learn -------------------------------- */ - .linksList{ font-size: .85em;} +.linksList { + font-size: .85em; +} .linksList li { margin: 0; padding: 0.1em; @@ -217,7 +220,8 @@ html .active label{ display: block; height: 100%; padding: 0.2em; -}/* +} +/* * Document : ugsEditorPlus.buttons.css * Author : Buz * Description: All editor's buttons and button-like links. @@ -262,7 +266,7 @@ html .active label{ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; - text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; + text-shadow: #000000 0px 1px 0, #3765b7 0 -1px 0; } /* orange */ @@ -324,9 +328,6 @@ html .active label{ } .noThanks:hover { background-color: #F2E2C1; -} -.alternateBtn{ - } /* * Document : ugsEditorPlus.chordBuilder.css @@ -391,7 +392,8 @@ html body .editorSurface { /* -- toolbox and its contents -- */ .chordToolbox{ border: 0 solid #ccc; - background-color: #F0EEF0;/*464646;*/ + background-color: #F0EEF0; + /*464646;*/ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); height: 250px; position: absolute; @@ -547,7 +549,8 @@ html .arrowUp, html .arrowDown{ min-height: 52px; } -html .arrowUp, html .arrowDown { +html .arrowUp, +html .arrowDown { background-repeat: no-repeat; background-position: center 29px; } @@ -599,7 +602,8 @@ html .arrowDown { .ugsChordChooser{ background-color: #eed18e; border-radius: 10px; - color: #551d00;/* #f4e19d; */ + color: #551d00; + /* #f4e19d; */ font-size: 14pt; max-height: 17em; min-height: 10em; @@ -621,7 +625,8 @@ html .arrowDown { } .ugsChordChooser li:hover{ background-color: #99512c; - color: #f4e19d; /* #ffdb5b; */ + color: #f4e19d; + /* #ffdb5b; */ text-shadow: 0px 2px 0px #551D00; } .ugsChordChooser .newChord{ @@ -629,7 +634,6 @@ html .arrowDown { color: #551d00; font-weight: bold; } -/* delete button */ .ugsChordChooser .deleteChord{ background: url("../img/editor/delete-btn.png") right center no-repeat; display: block; @@ -647,11 +651,11 @@ html .arrowDown { .ugsChordChooser li:hover .deleteChord{ opacity: 1; } -/* mini-diagram */ .ugsChordChooser canvas { float: right; margin-right: 10px; -}/* +} +/* * Document : ugsEditorPlus.menuBar.css * Author : Buz * Description: The top main application menu bar. @@ -661,7 +665,8 @@ html .arrowDown { * http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element * @import url(http://fonts.googleapis.com/css?family=Peralta); *-------------- */ - html, body { +html, +body { margin: 0; padding: 0; } @@ -807,7 +812,8 @@ html .arrowDown { .navOptions.active span, .navOptions a:hover span { background-position: -200px -50px; -}/* +} +/* * Document : ugsEditorPlus.overlays.css * Author : Buz * Description: Generic and use-spedific Overlay/Dialog box elements. @@ -819,7 +825,7 @@ html .arrowDown { top:45px; right:20px; background-color: #2B1100; - background-color: rgba(30, 11, 0, 0.75); /* rgba(43, 17, 0, 0.80); */ + background-color: rgba(30, 11, 0, 0.75); -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); @@ -836,13 +842,6 @@ html .arrowDown { overflow: hidden; padding: 10px; } -/* -.overlay div div{ - background-image: none; - border-radius:0; - padding: 0; -} -*/ /* MOVED FROM PAGE: SECTION 4 ------------------------------ */ .isHidden { @@ -896,21 +895,17 @@ html .arrowDown { .overlay textarea:focus { background-color:rgba(255, 255, 255, 0.9); border-color: #6C280C; - -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); + box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); } .overlay h3 { - /* - cursor: move; - */ background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; border-bottom: 1px solid #240E01; border-radius: 12px 12px 0 0; border-top: 1px solid #84623C; color: #F4E19F; font-size: 22px; - /*font-weight: bold;*/ height: 37px; line-height: 37px; padding: 0 20px; @@ -962,7 +957,6 @@ html .optionsDlg { right: 210px; top: 70px; width: 490px; - /* backwards transition support */ -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -ms-transition: width 0.6s ease; @@ -1013,8 +1007,7 @@ html .chordBuilderNarrow{ html .reformatDlg textarea{ height: 15em; } - -/* +/* postitioning the drop-down menus & arrows -------------------------------------- */ .layoutOptions{ left: 50px; @@ -1038,11 +1031,29 @@ html .reformatDlg textarea{ .helpOptions { left: 320px; } - - - +.hasSongbookLink .layoutOptions:after, +.hasSongbookLink .layoutOptions:before { + left: 72%; +} +.hasSongbookLink .tuningOptions { + left: 250px; +} +.hasSongbookLink .otherOptions { + left: 300px; +} +.hasSongbookLink .otherOptions:after, +.hasSongbookLink .otherOptions:before { + left: 70%; +} +.hasSongbookLink .helpOptions { + left: 340px; +} +.hasSongbookLink .helpOptions:after, +.hasSongbookLink .helpOptions:before { + left: 80%; +} /* -* Document : ugsEditorPlus.themese.css + * Document : ugsEditorPlus.themes.css * Author : Buz * Description: Alternative color schemes. */ @@ -1052,12 +1063,21 @@ html .reformatDlg textarea{ .theme-reversed { background-color: #000; color: #FFF; + /* unique to the reversed theme we need to harden editor's UI */ +} +.theme-reversed pre { + color: #e9e9e9; } .theme-reversed .scalablePrintArea{ background-color: transparent; } -.theme-reversed pre { - color: #e9e9e9; +.theme-reversed .scalablePrintArea h5, +.theme-reversed .scalablePrintArea h6 { + border-left-color: #444; + color: #69F; +} +.theme-reversed .ugsChorus { + border-left-color: #333; } .theme-reversed .ugsChords code { color: #333; @@ -1065,14 +1085,6 @@ html .reformatDlg textarea{ .theme-reversed .ugsChords code em { color: #F42; } -.theme-reversed .ugsChorus { - border-left-color: #333; -} -.theme-reversed .scalablePrintArea h5, .theme-reversed .scalablePrintArea h6 { - border-left-color: #444; - color: #69F; -} -/* unique to the reversed theme we need to harden editor's UI */ .theme-reversed .subNav a:hover { background-color: #888; color: #000; @@ -1084,7 +1096,9 @@ html .reformatDlg textarea{ } /* __________ Jelly Bean __________ */ - +.theme-jellyBean pre { + color: inherit; +} .theme-jellyBean .scalablePrintArea{ color: #56A0A5; font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; @@ -1102,8 +1116,16 @@ html .reformatDlg textarea{ .theme-jellyBean .scalablePrintArea h2 { font-size: 1.1em; } -.theme-jellyBean pre { - color: inherit; +.theme-jellyBean .scalablePrintArea h5, +.theme-jellyBean .scalablePrintArea h6 { + border-left-color: #F2E660; + color: #9C55ED; + font-family: inherit; + letter-spacing: 0.045em; +} +.theme-jellyBean .ugsChorus { + border-left-color: #F2E660; + border-radius: 5px 0 0 5px; } .theme-jellyBean .ugsChords code { color: #333; @@ -1111,16 +1133,6 @@ html .reformatDlg textarea{ .theme-jellyBean .ugsChords code em { color: #D20070; } -.theme-jellyBean .ugsChorus { - border-left-color: #F2E660; - border-radius: 5px 0 0 5px; -} -.theme-jellyBean .scalablePrintArea h5, .theme-jellyBean .scalablePrintArea h6 { - border-left-color: #F2E660; - color: #9C55ED; - font-family: inherit; - letter-spacing: 0.045em; -} /* __________ Western __________ */ @@ -1141,11 +1153,8 @@ html .reformatDlg textarea{ .theme-western .scalablePrintArea h2{ font-size: 1.7em; } -.theme-western .ugsChorus { - border-left-color: #BEC481; - border-radius: 5px 0 0 5px; -} -.theme-western .scalablePrintArea h5, .theme-western .scalablePrintArea h6 { +.theme-western .scalablePrintArea h5, +.theme-western .scalablePrintArea h6 { border-left-color: #BED379; color: #92A88C; font-family: 'Smokum',Arial, sans-serif; @@ -1154,6 +1163,10 @@ html .reformatDlg textarea{ padding: 0; text-indent: 1em; } +.theme-western .ugsChorus { + border-left-color: #BEC481; + border-radius: 5px 0 0 5px; +} .theme-western .ugs-source-wrap pre { color: inherit; } @@ -1163,9 +1176,6 @@ html .reformatDlg textarea{ .theme-pumpkin .scalablePrintArea { color: #68391D; } -.theme-pumpkin .ugs-source-wrap pre { - color: inherit; -} .theme-pumpkin .scalablePrintArea hgroup{ color: #B14623; text-align: center; @@ -1175,20 +1185,14 @@ html .reformatDlg textarea{ font-family: 'Ranchers',Arial,sans-serif; font-size: 3.2em; line-height: 1.1; - text-shadow: 0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379; + text-shadow: 0.064em 0.044em 0 #edf8ce, -0.037em 0.044em 0 #edf8ce, -0.074em 0.094em 0 #bed379, 0.074em 0.094em 0 #bed379; } .theme-pumpkin .scalablePrintArea h2{ font-family: 'Cherry Cream Soda',cursive, sans-serif; font-size: 1.1em; } -.theme-pumpkin .ugsChorus { - border-left-color: #A0B74E; - border-radius: 5px 0 0 5px; -} -.theme-pumpkin .ugsChords code em { - color: #FE9600; -} -.theme-pumpkin .scalablePrintArea h5, .theme-pumpkin .scalablePrintArea h6 { +.theme-pumpkin .scalablePrintArea h5, +.theme-pumpkin .scalablePrintArea h6 { border-left-color: #BED379; color: #FFC501; font-family: 'Cherry Cream Soda',cursive, sans-serif; @@ -1197,15 +1201,21 @@ html .reformatDlg textarea{ padding: 0; text-indent: 1em; } - +.theme-pumpkin .ugs-source-wrap pre { + color: inherit; +} +.theme-pumpkin .ugsChorus { + border-left-color: #A0B74E; + border-radius: 5px 0 0 5px; +} +.theme-pumpkin .ugsChords code em { + color: #FE9600; +} /* __________ Zombie (Halloween II) __________ */ .theme-zombie .scalablePrintArea { color: #798666; } -.theme-zombie .ugs-source-wrap pre { - color: inherit; -} .theme-zombie .scalablePrintArea hgroup{ color: #902374; text-align: center; @@ -1215,21 +1225,15 @@ html .reformatDlg textarea{ font-family: 'Creepster',cursive, sans-serif; font-size: 3.2em; line-height: 1.1; - text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04; + text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9eb036, -0.042em -0.014em 0 #8f2472, 0.087em 0.074em 0 #8f2472, -0.074em 0.094em 0 #ca4f04, 0.074em 0.174em 0 #ca4f04; } .theme-zombie .scalablePrintArea h2 { font-family: 'Cherry Cream Soda',cursive, sans-serif; font-size: 1.1em; text-shadow: 0.12em 0.13em 0 #DBDAE8; } -.theme-zombie .ugsChorus { - border-left-color: #CDC693; - border-radius: 6px 0 0 6px; -} -.theme-zombie .ugsChords code em { - color: #DD1A52; -} -.theme-zombie .scalablePrintArea h5, .theme-zombie .scalablePrintArea h6 { +.theme-zombie .scalablePrintArea h5, +.theme-zombie .scalablePrintArea h6 { border-left-color: #E4DCA4; color: #798666; font-family: 'Peralta',cursive, sans-serif; @@ -1239,15 +1243,21 @@ html .reformatDlg textarea{ text-indent: 1em; text-shadow: 0.03em 0.07em 0 #BED63A; } - +.theme-zombie .ugs-source-wrap pre { + color: inherit; +} +.theme-zombie .ugsChorus { + border-left-color: #CDC693; + border-radius: 6px 0 0 6px; +} +.theme-zombie .ugsChords code em { + color: #DD1A52; +} /* __________ Frosty __________ */ .theme-frosty .scalablePrintArea { color: #154286; } -.theme-frosty .ugs-source-wrap pre { - color: inherit; -} .theme-frosty .scalablePrintArea hgroup{ color: #6A97DB; text-align: center; @@ -1258,20 +1268,14 @@ html .reformatDlg textarea{ font-size: 2.18em; letter-spacing: 0.05em; line-height: 1.1; - text-shadow: -0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; + text-shadow: -0.064em -0.034em 0 #ffffff, 0.008em 0.008em 0 #a3e3d7, 0.009em -0.009em 0 #a3e3d7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183d, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; } .theme-frosty .scalablePrintArea h2 { font-family: 'Ranchers',Arial,sans-serif; font-size: 1.2em; } -.theme-frosty .ugsChorus { - border-left-color: #0896FE; - border-radius: 6px 0 0 6px; -} -.theme-frosty .ugsChords code em { - color: #0896FE; -} -.theme-frosty .scalablePrintArea h5, .theme-frosty .scalablePrintArea h6 { +.theme-frosty .scalablePrintArea h5, +.theme-frosty .scalablePrintArea h6 { border-left-color: #E3F7F3; color: #80B7B1; font-family: 'Cherry Cream Soda',cursive, sans-serif; @@ -1280,7 +1284,16 @@ html .reformatDlg textarea{ padding: 0; text-indent: 0.6em; } - +.theme-frosty .ugs-source-wrap pre { + color: inherit; +} +.theme-frosty .ugsChorus { + border-left-color: #0896FE; + border-radius: 6px 0 0 6px; +} +.theme-frosty .ugsChords code em { + color: #0896FE; +} /* __________ Gruss vom Krampus __________ */ /* @@ -1290,9 +1303,6 @@ http://www.colourlovers.com/palette/510474/vintage_Christmas .theme-krampus .scalablePrintArea { color: #929867; } -.theme-krampus .ugs-source-wrap pre { - color: inherit; -} .theme-krampus .scalablePrintArea hgroup{ color: #929867; text-align: center; @@ -1309,14 +1319,8 @@ http://www.colourlovers.com/palette/510474/vintage_Christmas font-size: 1.2em; text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; } -.theme-krampus .ugsChorus { - border-left-color: #B9C97E; - border-radius: 6px 0 0 6px; -} -.theme-krampus .ugsChords code em { - color: #384030; -} -.theme-krampus .scalablePrintArea h5, .theme-krampus .scalablePrintArea h6 { +.theme-krampus .scalablePrintArea h5, +.theme-krampus .scalablePrintArea h6 { border-left-color: #7B8055; color: #A32C28; font-family: 'Peralta',cursive, sans-serif; @@ -1325,16 +1329,28 @@ http://www.colourlovers.com/palette/510474/vintage_Christmas padding: 0; text-indent: 0.6em; } - +.theme-krampus .ugs-source-wrap pre { + color: inherit; +} +.theme-krampus .ugsChorus { + border-left-color: #B9C97E; + border-radius: 6px 0 0 6px; +} +.theme-krampus .ugsChords code em { + color: #384030; +} /* __________ Notebook __________ */ - +.theme-notebook { + /* + .ugsChords code em { + color: #384030; + } + */ +} .theme-notebook .scalablePrintArea { color: #443377; font-family: 'Architects Daughter',Arial,sans-serif; } -.theme-notebook .ugs-source-wrap pre { - color: inherit; -} .theme-notebook .scalablePrintArea hgroup{ color: #2E2ECC; font-family: inherit; @@ -1353,19 +1369,8 @@ http://www.colourlovers.com/palette/510474/vintage_Christmas border-bottom: 1px solid #E4E4FF; font-size: 1.1em; } -.theme-notebook .ugsChorus { - border-left-color: #a4a0b2; - border-radius: 6px 0 0 6px; -} -.theme-notebook .ugsChords code { - font-family: inherit; -} -/* -.theme-notebook .ugsChords code em { - color: #384030; -} -*/ -.theme-notebook .scalablePrintArea h5, .theme-notebook .scalablePrintArea h6 { +.theme-notebook .scalablePrintArea h5, +.theme-notebook .scalablePrintArea h6 { border-left-color: #626283; color: #2E2ECC; font-family: 'Permanent Marker',Arial,sans-serif; @@ -1373,19 +1378,29 @@ http://www.colourlovers.com/palette/510474/vintage_Christmas padding: 0; text-indent: 0.7em; } - +.theme-notebook .ugs-source-wrap pre { + color: inherit; +} +.theme-notebook .ugsChorus { + border-left-color: #a4a0b2; + border-radius: 6px 0 0 6px; +} +.theme-notebook .ugsChords code { + font-family: inherit; +} /* __________ Just BLack __________ */ .theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, -.theme-justBlack .ugsChords code em { +.theme-justBlack .ugs-source-wrap h6 { color: #000; + /* first choice: museo slab 500 */ + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; } .theme-justBlack .ugsChords code em{ + color: #000; font-weight: bold; } -.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, .theme-justBlack .scalablePrintArea hgroup, .theme-justBlack .scalablePrintArea hgroup *{ /* first choice: museo slab 500 */ @@ -1441,7 +1456,8 @@ html .diagramsOnTop .ugs-source-wrap { .diagramsOnSide .ugs-source-wrap { margin-left:250px; } -.liBtn, .liBtn * { +.liBtn, +.liBtn * { cursor: pointer; } /* page widths @@ -1462,9 +1478,20 @@ html .diagramsOnTop .ugs-source-wrap { /* redundant rule to allow JS hook -------------------------------- */ /* NOTE: this should be last set of rules in this file! */ -.scalablePrintArea .ugs-diagrams-wrap canvas{} -.scalablePrintArea .ugs-diagrams-wrap{} -.scalablePrintArea .ugs-source-wrap{} +.scalablePrintArea .ugs-diagrams-wrap canvas { + zoom: 1; +} +.scalablePrintArea .ugs-diagrams-wrap { + zoom: 1; +} +.scalablePrintArea .ugs-source-wrap { + zoom: 1; +} +/* + * Document : ugsEditorPlus.aceEditor.css + * Author : Buz + * Description: Ace WYSIWYG Editor + */ .aceEditorActive, .aceEditorActive body { overflow: hidden; @@ -1499,7 +1526,8 @@ html .diagramsOnTop .ugs-source-wrap { text-decoration: none; } #aceHeader a:hover{ - color: #CC7833;/*F92672;*/ + color: #CC7833; + /*F92672;*/ text-decoration: none; } #aceEditor { @@ -1519,7 +1547,7 @@ html .diagramsOnTop .ugs-source-wrap { cursor: pointer; float: left; margin: 7px 0.8em 0 0; - transition: background-color .3s ease; + transition: background-color 0.3s ease; } .aceSideBtn span { box-sizing: border-box; @@ -1531,7 +1559,7 @@ html .diagramsOnTop .ugs-source-wrap { height: 2px; margin: 4px 2px; width: 16px; - transition: background-color .3s ease; + transition: background-color 0.3s ease; } .aceSideBtn:hover{ background-color: #333; @@ -1562,7 +1590,8 @@ html .diagramsOnTop .ugs-source-wrap { border-top: 2px solid #333; padding: 1em .6em; } -.aceHelp h1, .aceHelp h3 { +.aceHelp h1, +.aceHelp h3 { color: #222222; font-size: 2.5em; font-weight: 500; @@ -1582,7 +1611,8 @@ html .diagramsOnTop .ugs-source-wrap { .aceHelp strong { font-weight: bold; } -.aceHelp td, .aceHelp th { +.aceHelp td, +.aceHelp th { color: #787878; padding: 0 .8em .8em 0; vertical-align: baseline; diff --git a/css/ugsEditorPlus.min.css b/css/ugsEditorPlus.min.css index c156094..b7bcb78 100644 --- a/css/ugsEditorPlus.min.css +++ b/css/ugsEditorPlus.min.css @@ -1,235 +1,4 @@ -/* - * Document : ugsEditorPlus - * Created on : July 2013 - * Author : Buz - * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. - */ -.salt_8873ySp { - color:#0f0; -} -.arrowBox{background-color:rgba(0, 0, 0, 0.81);border:2px -solid #fff;border-radius:10px;color:#b3b3b3;display:none;position:fixed;top:60px;width:310px;-moz-box-shadow:3px 13px 9px rgba(0, 0, 0, 0.5);-webkit-box-shadow:3px 13px 9px rgba(0, 0, 0, 0.5);box-shadow:3px 13px 9px rgba(0,0,0,0.5);z-index:5}.arrowBox:after,.arrowBox:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrowBox:after{border-color:rgba(0,0,0,0);border-bottom-color:#000;border-width:20px;left:50%;margin-left:-20px}.arrowBox:before{border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:23px;left:50%;margin-left:-23px}.arrowBoxContent{padding:1em -.6em .4em}.arrowBoxContent+.arrowBoxContent{padding-top:0}.enablePseudoSelects dt, -.enablePseudoSelects -dd{height:3em;line-height:1;margin:0;padding:0}.enablePseudoSelects -dd{display:none;left:16.1em;position:relative;top:-3.1em;height:0px}.enablePseudoSelects -label{color:#E4E4E4;display:block;cursor:pointer;border:solid 1px transparent;border-radius:7px;padding:0.5em}.enablePseudoSelects label -em{color:#898989;float:right;font-family:Arial}.enablePseudoSelects label:hover{color:#fff;background-color:#2A2A2A;border-color:#555;box-shadow:2px 2px 2px #000}.enablePseudoSelects label:hover -em{color:#E4E4E4}.event-userSelecting -label{color:#B9B9B9}.event-userSelecting label -em{color:#3a3a3a}html .active -label{background-color:#000;color:#fff}.pseudoSelect{position:absolute;background-color:#3C3C3C;border:solid 1px #555;border-radius:7px;box-shadow:2px 6px 6px rgba(0, 0, 0, 0.53);color:#EFEFEF;cursor:pointer;width:17em}.pseudoSelect -li{display:block;padding:0.1em}.pseudoSelect -a{border:2px -solid transparent;border-radius:10px;color:inherit;display:block;padding:0.5em 0.5em 0.5em 30px;text-decoration:none}.pseudoSelect li:hover{color:#fff}.pseudoSelect li:hover -a{background-color:#000;border-color:#676767}.pseudoSelect -li{float:none;margin:0;text-align:inherit}.pseudoSelect .checked -a{background:url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A;border-color:#C5C5C5;color:#FFF;text-shadow:1px 2px 1px #000}.checkboxBlock{border-top:1px solid #575757;box-shadow:0 -1px 0 #000;font-size:0.81em;padding:0.75em 0}.checkboxBlock -label{padding-left:0.5em}.checkBoxFinePrint{display:block;font-size:.85em;padding:0.3em 0 0.5em 3.1em}#commonChordList{display:block;font-size:1.2em;margin-left:1.5em;width:15em}.linksList{font-size: .85em}.linksList -li{margin:0;padding:0.1em;text-align:left;float:none}.linksList -a{border-radius:8px;color:#B9B9B9;display:block;padding:0.6em;text-decoration:none}.linksList a:hover{background-color:#000;color:#fff}.updateMessage{background-color:#BAE5A7;border:1px -solid #44A819;border-radius:4px 4px 4px 4px;box-shadow:0 0 4px rgba(255, 190, 40, 0.8);color:#43772D;display:none;position:absolute;text-align:center;text-shadow:0 -1px rgba(255, 190, 40, 0.3);width:10em}.updateMessage -em{border:1px -solid #66D836;border-radius:3px 3px 3px 3px;box-shadow:0 0 3px #559277 inset;display:block;height:100%;padding:0.2em}.baseBtn{background-color:#999;border:1px -solid #333;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#FFF;cursor:pointer;font-size:inherit;font-weight:bold;padding:0.2em 1em;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.5);text-decoration:none}.baseBtn:hover{background-color:#888;color:#fff}.blueBtn{background-color:#89b9e3;background-image:-moz-linear-gradient(top, #89b9e3, #3d6bbb);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')";border-color:#3765B7;text-shadow:#89b9e3 0px 1px 0, #3765b7 0 -1px 0}.blueBtn:hover{background-color:#4c85e8;background-image:-moz-linear-gradient(top, #4c85e8, #2f5493);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')";text-shadow:black 0px 1px 0, #3765b7 0 -1px 0}.orange{color:#fef4e9;border:solid 1px #da7c0c;background:#f78d1d;background:-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background:-moz-linear-gradient(top, #faa51a, #f47a20);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');text-shadow:#da7c0c 0px 1px 0, #faa51a 0 -1px 0}.orange:hover{background:#f47c20;background:-webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background:-moz-linear-gradient(top, #f88e11, #f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');text-shadow:#f47c20 0px 1px 0, #f88e11 0 -1px 0}.orange:active{color:#fcd3a5;background:-webkit-gradient(linear, left top, left bottom,from(#f47a20),to(#faa51a));background:-moz-linear-gradient(top,#f47a20,#faa51a);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a')}.btnBar{height:30px}.btnBar -.baseBtn{float:right;font-size:110%;margin-bottom:5px}.alternateBtn,.noThanks{color:#3965B0;float:right;line-height:33px;margin-right:1.5em;text-decoration:none}.alternateBtn:hover,.noThanks:hover{color:#0646AD}.noThanks{background-color:#EFD292;border-radius:6px;padding:0 -0.4em;-webkit-transition:background-color 0.4s ease;-moz-transition:background-color 0.4s ease;-ms-transition:background-color 0.4s ease;-o-transition:background-color 0.4s ease;transition:background-color 0.4s ease}.noThanks:hover{background-color:#F2E2C1}.alternateBtn{}.chordBuilderDlg input[type=text]{border:1px -solid #D7D7D7;border-radius:5px 5px 5px 5px;display:block;font-size:30pt;padding:0;text-align:center;max-width:100%;width:100%}.chordBuilderDlg -pre{font-size:12pt;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}html body -.editorSurface{background-color:#fff;border-radius:5px;font-size:0.9em;height:300px;margin:5px -auto;overflow:hidden;padding:0;position:relative;width:462px;-moz-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset;box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset}.editorSurface -canvas{border:none;cursor:none;left:0;position:absolute;top:0}#cdBldDiagramCanvas{z-index:1}#cdBldCursorCanvas{z-index:2}.chordToolbox{z-index:3}.toolboxEdgeShadow{z-index:4}.chordToolbox{border:0 -solid #ccc;background-color:#F0EEF0;box-shadow:1px 1px 3px rgba(0, 0, 0, 0.1);height:250px;position:absolute;top:25px;width:135px;-webkit-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-moz-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-ms-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-o-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out}.chordToolbox.open,.chordToolbox:hover{background-color:#fafafa;border-color:#8C8C8C;box-shadow:4px 6px 9px rgba(0,0,0,0.3)}.chordToolbox.leftEdge{border-radius:0 7px 7px 0;border-width:2px 2px 2px 0;left:-110px}.chordToolbox.leftEdge.open,.chordToolbox.leftEdge:hover{left:0}.chordToolbox.rightEdge{border-radius:7px 0 0 7px;border-width:2px 0 2px 2px;right:-110px}.chordToolbox.rightEdge.open,.chordToolbox.rightEdge:hover{right:0}.chordToolboxInner{margin:10px -auto;width:100px}.toolboxEdgeShadow{background-color:transparent;height:255px;position:absolute;top:26px;width:10px}.toolboxEdgeShadow.leftEdge{box-shadow:4px 0 6px rgba(0,0,0,0.3);left:-10px}.toolboxEdgeShadow.rightEdge{box-shadow:-4px 0 6px rgba(0,0,0,0.3);right:-10px}.toolChip{background-color:#fafafa;border:1px -solid #fafafa;border-radius:5px;color:#C7681B;cursor:pointer;display:block;margin-bottom:8px;min-height:70px;padding:5px -0;text-align:center;text-decoration:none;width:100%;-webkit-transition:background-color 0.4s ease, border-color 0.4s ease;-moz-transition:background-color 0.4s ease, border-color 0.4s ease;-ms-transition:background-color 0.4s ease, border-color 0.4s ease;-o-transition:background-color 0.4s ease, border-color 0.4s ease;transition:background-color 0.4s ease, border-color 0.4s ease}.toolChip:hover{background-color:#FEFEFE;border:1px -solid #EDEDED}html .selected, -html .selected:hover{border-color:#AAA73F;box-shadow:0 0 5px rgba(0,0,0,0.2)}#cdBldBtnFingerName{color:#806753;display:block;font-size: .67em}.bigDot{background-color:#E78333;border:3px -solid #973100;border-radius:23px 23px 23px 23px;display:block;height:23px;margin:5px -auto;width:23px}.toolChip img, -.toolChip -.bigDot{opacity: .75}.selected img, -.selected .bigDot, -.toolChip:hover img, -.toolChip:hover -.bigDot{opacity:1}.fingerToolImage{background:url("../img/editor/hand.png") top center no-repeat;display:block;height:83px;margin:0 -auto;position:relative;width:88px}.fingerDot{background-color:#F9F340;border:solid 2px #AF9607;border-radius:8px;display:block;height:8px;position:absolute;width:8px}.finger0 -.fingerDot{display:none}.finger1 -.fingerDot{right:22px;top:3px}.finger2 -.fingerDot{right:1px;top:11px}.finger3 -.fingerDot{right:1px;top:28px}.finger4 -.fingerDot{right:1px;top:44px}label[for=cdBldStartingFret], -html .arrowUp, -html -.arrowDown{min-height:52px}html .arrowUp, html -.arrowDown{background-repeat:no-repeat;background-position:center 29px}html -.arrowUp{background-image:url("../img/editor/basic-up-arrow.png")}html -.arrowDown{background-image:url("../img/editor/basic-down-arrow.png")}.outputBox{max-height:30em;overflow:hidden;-webkit-transition:max-height 0.8s ease;-moz-transition:max-height 0.8s ease;-o-transition:max-height 0.8s ease;-ms-transition:max-height 0.8s ease;transition:max-height 0.8s ease}.outputBox.collapseOutput{max-height:0}.chordPro-statement{background-color:#f9f9f9;border:solid 1px #bbb;color:#999;font-family:Consolas,'courier new',monospace;padding:1em}.chordPro-keyword{color:#8e7cc3}.chordPro-attribute{color:#741b47}.chordPro-number{color:#e69138;font-weight:bold}.chordPro-string{background-color:#EDF7E6;color:#38761d;font-weight:bold}.ugsChordChooser{background-color:#eed18e;border-radius:10px;color:#551d00;font-size:14pt;max-height:17em;min-height:10em;overflow-y:auto;padding: .1em 0}.ugsChordChooser -li{background-color:#bc9350;border-radius:6px;cursor:pointer;margin:0.5em;padding:0.5em;-webkit-transition:background-color 0.4s ease;-moz-transition:background-color 0.4s ease;-ms-transition:background-color 0.4s ease;-o-transition:background-color 0.4s ease;transition:background-color 0.4s ease}.ugsChordChooser li:hover{background-color:#99512c;color:#f4e19d;text-shadow:0px 2px 0px #551D00}.ugsChordChooser -.newChord{background-color:#b2612d;color:#551d00;font-weight:bold}.ugsChordChooser -.deleteChord{background:url("../img/editor/delete-btn.png") right center no-repeat;display:block;float:right;height:30px;opacity:0;width:36px;-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease}.ugsChordChooser li:hover -.deleteChord{opacity:1}.ugsChordChooser -canvas{float:right;margin-right:10px}html,body{margin:0;padding:0}body{position:relative;padding-top:40px}.editableSongPage{background-color:#EDECEA}.ugsLogo{color:#F2A848;font-family:'Peralta',cursive;font-size:16px;font-weight:normal;position:absolute;right:1em;text-shadow:1px 1px #322}.ugsAppMenuBar{background:#933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x;-moz-box-shadow:0 5px 8px rgba(0, 0, 0, 0.65);-webkit-box-shadow:0 5px 8px rgba(0, 0, 0, 0.65);box-shadow:0 5px 8px rgba(0, 0, 0, 0.65);border-top:1px solid #84623c;border-bottom:1px solid #240e01;font:17px/38px Helvetica,Arial;height:40px;min-width:910px;padding-left:0;position:fixed;top:0;width:100%;z-index:2}.ugsAppMenuBar>ul{margin-left:10px}.ugsAppMenuBar>ul>li{float:left;position:relative}.ugsAppMenuBar>ul>li>a{border:solid 1px transparent;color:#f4e19f;cursor:pointer;display:block;float:left;height:38px;line-height:38px;outline:0 -none;padding:0 -15px 0 5px;text-decoration:none;text-shadow:1px 2px 0 rgba(86,3,5,0.95)}.ugsAppMenuBar>ul>li>a:hover{border-color:#600000;background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fdda61;text-shadow:none}.ugsAppMenuBar>ul>.active>a{background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fef5e3;text-shadow:0 1px 1px rgba(0, 0, 0, 0.5)}.ugsAppMenuBar > ul > li > a -span{background-image:url("../img/editor/editorSprite.png");background-repeat:no-repeat;float:left;height:25px;margin-top:7px;width:25px}.navSong -span{background-position:-75px 0px}.navSong.active span, -.navSong a:hover -span{background-position:-75px -50px}.navInstruments -span{background-position:-50px 0px}.navInstruments.active span, -.navInstruments a:hover -span{background-position:-50px -50px}.navTranspose -span{background-position:-25px 0px}.navTranspose.active span, -.navTranspose a:hover -span{background-position:-25px -50px}.navDiagrams -span{background-position:0px 0px}.navDiagrams.active span, -.navDiagrams a:hover -span{background-position:0px -50px}.navLayout -span{background-position:-100px 0px}.navLayout.active span, -.navLayout a:hover -span{background-position:-100px -50px}.navColors -span{background-position:-125px 0px}.navColors.active span, -.navColors a:hover -span{background-position:-125px -50px}.navZoom -span{background-position:-150px 0px}.navZoom.active span, -.navZoom a:hover -span{background-position:-150px -50px}.navEdit -span{background-position:-175px 0px}.navEdit.active span, -.navEdit a:hover -span{background-position:-175px -50px}.navOptions -span{background-position:-200px 0px}.navOptions.active span, -.navOptions a:hover -span{background-position:-200px -50px}.overlay{position:fixed;top:45px;right:20px;background-color:#2B1100;background-color:rgba(30, 11, 0, 0.75);-moz-box-shadow:1px 10px 20px rgba(0, 0, 0, 0.85);-webkit-box-shadow:1px 10px 20px rgba(0, 0, 0, 0.85);box-shadow:1px 10px 20px rgba(0,0,0,0.85);-moz-border-radius:22px;-webkit-border-radius:22px;border-radius:22px;padding:10px;width:490px;z-index:0}.overlay>div{background:url("../img/editor/woodChip.png") repeat scroll 0 0 transparent;border-radius:0 0 13px 13px;overflow:hidden;padding:10px}.isHidden{display:none}.overlay -select{font-size:1.1em}.overlay input[type=text], -.overlay input[type=password]{display:block;font-size:1.2em;margin-bottom: .4em;padding:0.1em;width:98%}.overlay -textarea{font-family:Monaco,"Consolas","Lucida Console","Courier New",courier,monospace;font-size:10pt;line-height:1.25;padding-left: .3em;white-space:nowrap;white-space:pre;overflow:scroll;height:525px;width:98%}.overlay input[type=text], -.overlay input[type=password], -.overlay -textarea{background-color:rgba(255, 255, 255, 0.7);border:solid 1px #E1B166;max-width:100%;max-height:100%;-webkit-transition:background-color 500ms linear;-moz-transition:background-color 500ms linear;-o-transition:background-color 500ms linear;-ms-transition:background-color 500ms linear;transition:background-color 500ms linear}.overlay input[type=text]:hover, -.overlay input[type=password]:hover, -.overlay textarea:hover{background-color:rgba(255, 255, 200, 0.7);border-color:#444}.overlay input[type=text]:focus, -.overlay input[type=password]:focus, -.overlay textarea:focus{background-color:rgba(255, 255, 255, 0.9);border-color:#6C280C;-moz-box-shadow:inset 3px 3px 5px rgba(0,0,0,.3);-webkit-box-shadow:inset 3px 3px 5px rgba(0,0,0,.3);box-shadow:inset 3px 3px 5px rgba(0,0,0,.3)}.overlay -h3{background:url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17;border-bottom:1px solid #240E01;border-radius:12px 12px 0 0;border-top:1px solid #84623C;color:#F4E19F;font-size:22px;height:37px;line-height:37px;padding:0 -20px;text-shadow:1px 2px 0 #592108}.overlay -.closeBtn{background:url("../img/editor/closeBtn.png") no-repeat 0 0 transparent;display:block;height:30px;outline:none;position:absolute;right:10px;text-indent:-5000em;top:14px;width:30px}.overlay -.resizeBtn{background:url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent;display:block;height:20px;outline:none;position:absolute;right:55px;text-indent:-5000em;top:18px;width:20px}html -.helpDlg{top:75px;right:70px;width:300px;z-index:1}html -.optionsDlg{top:100px;right:210px;width:380px;z-index:2}.optionsDlg -div{font-size:.91em}.optionsDlg div -li{padding-bottom:.82em}.chordBuilderDlg{right:210px;top:70px;width:490px;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease}html -.chordBuilderNarrow{width:345px}.helpDlg{font-size:.9em}.normalHtml p, -.normalHtml ul, -.normalHtml -ol{margin-bottom:1em}.normalHtml -li{list-style:disc outside none;margin-left:1em;padding-bottom:.4em}.normalHtml -h3{font-size:1.2em;font-weight:bold}.reformatDlg{right:25%;top:100px;width:480px;z-index:3}.instructions{width:28em;padding:0 -0 .7em;color:#563324}.instructions.small{clear:both;font-size:.8em;display:block;width:35em}html .reformatDlg -textarea{height:15em}.layoutOptions{left:50px}.layoutOptions:after,.layoutOptions:before{left:22%}.tuningOptions{left:150px}#transposeOptions -em{color:#CCC;float:right;font-size:0.86em}.otherOptions{left:250px}.helpOptions{left:320px}.theme-reversed{background-color:#000;color:#FFF}.theme-reversed -.scalablePrintArea{background-color:transparent}.theme-reversed -pre{color:#e9e9e9}.theme-reversed .ugsChords -code{color:#333}.theme-reversed .ugsChords code -em{color:#F42}.theme-reversed -.ugsChorus{border-left-color:#333}.theme-reversed .scalablePrintArea h5, .theme-reversed .scalablePrintArea -h6{border-left-color:#444;color:#69F}.theme-reversed .subNav a:hover{background-color:#888;color:#000}.theme-reversed -.overlay{background-color:#4E1C07;box-shadow:none;color:#000}.theme-jellyBean -.scalablePrintArea{color:#56A0A5;font-family:"Comic Sans MS","Marker Felt",cursive,sans-serif}.theme-jellyBean .scalablePrintArea -hgroup{color:#FF9417;text-align:center}.theme-jellyBean .scalablePrintArea -h1{color:#D20770;font-family:'Peralta',cursive,sans-serif;font-size:2em;text-shadow:0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660}.theme-jellyBean .scalablePrintArea -h2{font-size:1.1em}.theme-jellyBean -pre{color:inherit}.theme-jellyBean .ugsChords -code{color:#333}.theme-jellyBean .ugsChords code -em{color:#D20070}.theme-jellyBean -.ugsChorus{border-left-color:#F2E660;border-radius:5px 0 0 5px}.theme-jellyBean .scalablePrintArea h5, .theme-jellyBean .scalablePrintArea -h6{border-left-color:#F2E660;color:#9C55ED;font-family:inherit;letter-spacing:0.045em}.theme-western -.scalablePrintArea{color:#88410A}.theme-western .scalablePrintArea -hgroup{color:#88410A;font-family:'Smokum',Arial,sans-serif;text-align:center}.theme-western .scalablePrintArea -h1{color:#472B07;font-family:inherit;font-size:3.3em;text-shadow:0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0}.theme-western .scalablePrintArea -h2{font-size:1.7em}.theme-western -.ugsChorus{border-left-color:#BEC481;border-radius:5px 0 0 5px}.theme-western .scalablePrintArea h5, .theme-western .scalablePrintArea -h6{border-left-color:#BED379;color:#92A88C;font-family:'Smokum',Arial,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-western .ugs-source-wrap -pre{color:inherit}.theme-pumpkin -.scalablePrintArea{color:#68391D}.theme-pumpkin .ugs-source-wrap -pre{color:inherit}.theme-pumpkin .scalablePrintArea -hgroup{color:#B14623;text-align:center}.theme-pumpkin .scalablePrintArea -h1{color:#D3770E;font-family:'Ranchers',Arial,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379}.theme-pumpkin .scalablePrintArea -h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em}.theme-pumpkin -.ugsChorus{border-left-color:#A0B74E;border-radius:5px 0 0 5px}.theme-pumpkin .ugsChords code -em{color:#FE9600}.theme-pumpkin .scalablePrintArea h5, .theme-pumpkin .scalablePrintArea -h6{border-left-color:#BED379;color:#FFC501;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-zombie -.scalablePrintArea{color:#798666}.theme-zombie .ugs-source-wrap -pre{color:inherit}.theme-zombie .scalablePrintArea -hgroup{color:#902374;text-align:center}.theme-zombie .scalablePrintArea -h1{color:#BED63A;font-family:'Creepster',cursive,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04}.theme-zombie .scalablePrintArea -h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em;text-shadow:0.12em 0.13em 0 #DBDAE8}.theme-zombie -.ugsChorus{border-left-color:#CDC693;border-radius:6px 0 0 6px}.theme-zombie .ugsChords code -em{color:#DD1A52}.theme-zombie .scalablePrintArea h5, .theme-zombie .scalablePrintArea -h6{border-left-color:#E4DCA4;color:#798666;font-family:'Peralta',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;text-shadow:0.03em 0.07em 0 #BED63A}.theme-frosty -.scalablePrintArea{color:#154286}.theme-frosty .ugs-source-wrap -pre{color:inherit}.theme-frosty .scalablePrintArea -hgroup{color:#6A97DB;text-align:center}.theme-frosty .scalablePrintArea -h1{color:#D5E2F5;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:2.18em;letter-spacing:0.05em;line-height:1.1;text-shadow:-0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286}.theme-frosty .scalablePrintArea -h2{font-family:'Ranchers',Arial,sans-serif;font-size:1.2em}.theme-frosty -.ugsChorus{border-left-color:#0896FE;border-radius:6px 0 0 6px}.theme-frosty .ugsChords code -em{color:#0896FE}.theme-frosty .scalablePrintArea h5, .theme-frosty .scalablePrintArea -h6{border-left-color:#E3F7F3;color:#80B7B1;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:0.6em}.theme-krampus -.scalablePrintArea{color:#929867}.theme-krampus .ugs-source-wrap -pre{color:inherit}.theme-krampus .scalablePrintArea -hgroup{color:#929867;text-align:center}.theme-krampus .scalablePrintArea -h1{color:#A22C27;font-family:'Lobster',cursive,sans-serif;font-size:2.78em;line-height:1.1;text-shadow:0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621}.theme-krampus .scalablePrintArea -h2{font-family:'Peralta',cursive,sans-serif;font-size:1.2em;text-shadow:0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592}.theme-krampus -.ugsChorus{border-left-color:#B9C97E;border-radius:6px 0 0 6px}.theme-krampus .ugsChords code -em{color:#384030}.theme-krampus .scalablePrintArea h5, .theme-krampus .scalablePrintArea -h6{border-left-color:#7B8055;color:#A32C28;font-family:'Peralta',cursive,sans-serif;font-size:1.2em;font-style:normal;padding:0;text-indent:0.6em}.theme-notebook -.scalablePrintArea{color:#437;font-family:'Architects Daughter',Arial,sans-serif}.theme-notebook .ugs-source-wrap -pre{color:inherit}.theme-notebook .scalablePrintArea -hgroup{color:#2E2ECC;font-family:inherit;text-align:center}.theme-notebook .scalablePrintArea -h1{border-color:#E4E4FF;border-style:solid;border-width:1px 0;color:#252537;font-family:'Permanent Marker',Arial,sans-serif;font-size:2em;margin-bottom:0.2em}.theme-notebook .scalablePrintArea -h2{border-bottom:1px solid #E4E4FF;font-size:1.1em}.theme-notebook -.ugsChorus{border-left-color:#a4a0b2;border-radius:6px 0 0 6px}.theme-notebook .ugsChords -code{font-family:inherit}.theme-notebook .scalablePrintArea h5, .theme-notebook .scalablePrintArea -h6{border-left-color:#626283;color:#2E2ECC;font-family:'Permanent Marker',Arial,sans-serif;font-size:1.3em;padding:0;text-indent:0.7em}.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, -.theme-justBlack .ugsChords code -em{color:#000}.theme-justBlack .ugsChords code -em{font-weight:bold}.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6, -.theme-justBlack .scalablePrintArea hgroup, -.theme-justBlack .scalablePrintArea hgroup -*{font-family:'Bree Serif',Arial,sans-serif;font-style:normal}.theme-justBlack .scalablePrintArea -hgroup{text-align:center}.scalablePrintArea{-moz-transform-origin:0 0;-webkit-transform-origin:0 0;background-color:#fff;border-right:solid 1px #888;font-size:inherit;box-shadow:3px 0 9px rgba(0, 0, 0, 0.4)}.scalablePrintArea -hgroup{padding-bottom: .15in}html .ugsHideDiagrams .ugs-diagrams-wrap{display:none}html .ugsHideDiagrams .ugs-source-wrap{margin-left:0}html .diagramsOnTop .ugs-diagrams-wrap{float:none;width:auto}html .diagramsOnTop .ugs-source-wrap{margin-left:0}.ugsNoChords .ugs-source-wrap{margin-left:0}.diagramsOnSide .ugs-diagrams-wrap{float:left;width:225px}.diagramsOnSide .ugs-source-wrap{margin-left:250px}.liBtn, .liBtn -*{cursor:pointer}.pageWidth_letter -.scalablePrintArea{width:8in;padding:0.2in;min-height:10.5in}.pageWidth_a4 -.scalablePrintArea{width:19cm;padding:1cm;min-height:28cm}.pageWidth_screen -.scalablePrintArea{padding:20px}.scalablePrintArea .ugs-diagrams-wrap -canvas{}.scalablePrintArea .ugs-diagrams-wrap{}.scalablePrintArea .ugs-source-wrap{}.aceEditorActive, -.aceEditorActive -body{overflow:hidden;height:100%;width:100%;margin:0;padding:0}.aceEditorActive -#aceHeader{display:block}.aceEditorActive .ugsAppMenuBar, -.aceEditorActive .overlay, -.aceEditorActive -.scalablePrintArea{display:none}#aceHeader{border-bottom:solid 1px;font-family:arial,sans-serif;font-size:1;line-height:40px;height:40px;padding:0 -15px;display:none}#aceHeader -a{float:right;font-size:0.87em;line-height:inherit;color:inherit;text-decoration:none}#aceHeader a:hover{color:#CC7833;text-decoration:none}#aceEditor{position:absolute;top:40px;right:0;bottom:0;left:0}.aceSideBtn{background-color:rgba(0, 0, 0, 0);border:1px -solid #DDD;border-radius:4px;cursor:pointer;float:left;margin:7px -0.8em 0 0;transition:background-color .3s ease}.aceSideBtn -span{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:#888;border-radius:1px;display:block;height:2px;margin:4px -2px;width:16px;transition:background-color .3s ease}.aceSideBtn:hover{background-color:#333}.aceSideBtn:hover -span{background-color:#eee}#aceHelp{bottom:0;left:-350px;margin:0;position:absolute;top:40px;width:350px}#aceHelp{background:#fff;color:#707273;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;overflow-y:auto;text-align:left}.aceHelp{border-top:2px solid #333;padding:1em -.6em}.aceHelp h1, .aceHelp -h3{color:#222;font-size:2.5em;font-weight:500;line-height:1em;margin:0 -0 1em}.aceHelp -h3{font-size:1.3em}.aceHelp -p{line-height:1.6em;margin:0 -0 1em}.aceHelp -table{margin:20px -0 10px}.aceHelp -strong{font-weight:bold}.aceHelp td, .aceHelp -th{color:#787878;padding:0 -.8em .8em 0;vertical-align:baseline}.aceHelp -th{font-weight:bold}.aceHelp -.key{background-color:#666;border:0 -none;border-radius: .22em;color:#FFF;font-family:Arial;display:inline-block;font-size: .71em;font-weight:bold;line-height:1.1;padding: .22em .4em;text-transform:uppercase}.aceHelp -.shortKeys{white-space:nowrap;padding-right:1.4em} \ No newline at end of file +/*! UkeGeeks Songbook Editor page + * Author: Buz Carter + * Engine: LessCSS + */.salt_8873ySp8{color:#0ff}.arrowBox{background-color:rgba(0,0,0,0.81);border:2px solid #fff;border-radius:10px;color:#b3b3b3;display:none;position:fixed;top:60px;width:310px;-moz-box-shadow:3px 13px 9px rgba(0,0,0,0.5);-webkit-box-shadow:3px 13px 9px rgba(0,0,0,0.5);box-shadow:3px 13px 9px rgba(0,0,0,0.5);z-index:5}.arrowBox:after,.arrowBox:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrowBox:after{border-color:rgba(0,0,0,0);border-bottom-color:#000;border-width:20px;left:50%;margin-left:-20px}.arrowBox:before{border-color:rgba(255,255,255,0);border-bottom-color:#ffffff;border-width:23px;left:50%;margin-left:-23px}.arrowBoxContent{padding:1em .6em .4em}.arrowBoxContent+.arrowBoxContent{padding-top:0}.enablePseudoSelects dt,.enablePseudoSelects dd{height:3em;line-height:1;margin:0;padding:0}.enablePseudoSelects dd{display:none;left:16.1em;position:relative;top:-3.1em;height:0px}.enablePseudoSelects label{color:#E4E4E4;display:block;cursor:pointer;border:solid 1px transparent;border-radius:7px;padding:0.5em}.enablePseudoSelects label:hover{color:#fff;background-color:#2A2A2A;border-color:#555;box-shadow:2px 2px 2px #000}.enablePseudoSelects label:hover em{color:#E4E4E4}.enablePseudoSelects label em{color:#898989;float:right;font-family:Arial}.event-userSelecting label{color:#B9B9B9}.event-userSelecting label em{color:#3a3a3a}html .active label{background-color:#000;color:#fff}.pseudoSelect{position:absolute;background-color:#3C3C3C;border:solid 1px #555;border-radius:7px;box-shadow:2px 6px 6px rgba(0,0,0,0.53);color:#EFEFEF;cursor:pointer;width:17em}.pseudoSelect a{border:2px solid transparent;border-radius:10px;color:inherit;display:block;padding:0.5em 0.5em 0.5em 30px;text-decoration:none}.pseudoSelect li{display:block;float:none;margin:0;padding:0.1em;text-align:inherit}.pseudoSelect li:hover{color:#fff}.pseudoSelect li:hover a{background-color:#000;border-color:#676767}.pseudoSelect .checked a{background:url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a;border-color:#C5C5C5;color:#FFFFFF;text-shadow:1px 2px 1px #000}.checkboxBlock{border-top:1px solid #575757;box-shadow:0 -1px 0 #000;font-size:0.81em;padding:0.75em 0}.checkboxBlock label{padding-left:0.5em}.checkBoxFinePrint{display:block;font-size:.85em;padding:0.3em 0 0.5em 3.1em}#commonChordList{display:block;font-size:1.2em;margin-left:1.5em;width:15em}.linksList{font-size:.85em}.linksList li{margin:0;padding:0.1em;text-align:left;float:none}.linksList a{border-radius:8px;color:#B9B9B9;display:block;padding:0.6em;text-decoration:none}.linksList a:hover{background-color:#000;color:#fff}.updateMessage{background-color:#BAE5A7;border:1px solid #44A819;border-radius:4px 4px 4px 4px;box-shadow:0 0 4px rgba(255,190,40,0.8);color:#43772D;display:none;position:absolute;text-align:center;text-shadow:0 -1px rgba(255,190,40,0.3);width:10em}.updateMessage em{border:1px solid #66D836;border-radius:3px 3px 3px 3px;box-shadow:0 0 3px #559277 inset;display:block;height:100%;padding:0.2em}.baseBtn{background-color:#999;border:1px solid #333;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#FFF;cursor:pointer;font-size:inherit;font-weight:bold;padding:0.2em 1em;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.5);text-decoration:none}.baseBtn:hover{background-color:#888;color:#fff}.blueBtn{background-color:#89b9e3;background-image:-moz-linear-gradient(top, #89b9e3, #3d6bbb);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')";border-color:#3765B7;text-shadow:#89b9e3 0 1px 0,#3765b7 0 -1px 0}.blueBtn:hover{background-color:#4c85e8;background-image:-moz-linear-gradient(top, #4c85e8, #2f5493);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')";text-shadow:#000 0 1px 0,#3765b7 0 -1px 0}.orange{color:#fef4e9;border:solid 1px #da7c0c;background:#f78d1d;background:-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background:-moz-linear-gradient(top, #faa51a, #f47a20);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');text-shadow:#da7c0c 0 1px 0,#faa51a 0 -1px 0}.orange:hover{background:#f47c20;background:-webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background:-moz-linear-gradient(top, #f88e11, #f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');text-shadow:#f47c20 0 1px 0,#f88e11 0 -1px 0}.orange:active{color:#fcd3a5;background:-webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background:-moz-linear-gradient(top, #f47a20, #faa51a);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a')}.btnBar{height:30px}.btnBar .baseBtn{float:right;font-size:110%;margin-bottom:5px}.alternateBtn,.noThanks{color:#3965B0;float:right;line-height:33px;margin-right:1.5em;text-decoration:none}.alternateBtn:hover,.noThanks:hover{color:#0646AD}.noThanks{background-color:#EFD292;border-radius:6px;padding:0 0.4em;-webkit-transition:background-color .4s ease;-moz-transition:background-color .4s ease;-ms-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease}.noThanks:hover{background-color:#F2E2C1}.chordBuilderDlg input[type=text]{border:1px solid #D7D7D7;border-radius:5px 5px 5px 5px;display:block;font-size:30pt;padding:0;text-align:center;max-width:100%;width:100%}.chordBuilderDlg pre{font-size:12pt;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}html body .editorSurface{background-color:#fff;border-radius:5px ;font-size:0.9em;height:300px;margin:5px auto;overflow:hidden;padding:0;position:relative;width:462px;-moz-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;-webkit-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset}.editorSurface canvas{border:none;cursor:none;left:0;position:absolute;top:0}#cdBldDiagramCanvas{z-index:1}#cdBldCursorCanvas{z-index:2}.chordToolbox{z-index:3}.toolboxEdgeShadow{z-index:4}.chordToolbox{border:0 solid #ccc;background-color:#F0EEF0;box-shadow:1px 1px 3px rgba(0,0,0,0.1);height:250px;position:absolute;top:25px;width:135px;-webkit-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-moz-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-ms-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-o-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out}.chordToolbox.open,.chordToolbox:hover{background-color:#fafafa;border-color:#8C8C8C;box-shadow:4px 6px 9px rgba(0,0,0,0.3)}.chordToolbox.leftEdge{border-radius:0 7px 7px 0;border-width:2px 2px 2px 0;left:-110px}.chordToolbox.leftEdge.open,.chordToolbox.leftEdge:hover{left:0}.chordToolbox.rightEdge{border-radius:7px 0 0 7px;border-width:2px 0 2px 2px;right:-110px}.chordToolbox.rightEdge.open,.chordToolbox.rightEdge:hover{right:0}.chordToolboxInner{margin:10px auto;width:100px}.toolboxEdgeShadow{background-color:transparent;height:255px;position:absolute;top:26px;width:10px}.toolboxEdgeShadow.leftEdge{box-shadow:4px 0 6px rgba(0,0,0,0.3);left:-10px}.toolboxEdgeShadow.rightEdge{box-shadow:-4px 0 6px rgba(0,0,0,0.3);right:-10px}.toolChip{background-color:#fafafa;border:1px solid #fafafa;border-radius:5px;color:#C7681B;cursor:pointer;display:block;margin-bottom:8px;min-height:70px;padding:5px 0;text-align:center;text-decoration:none;width:100%;-webkit-transition:background-color .4s ease,border-color .4s ease;-moz-transition:background-color .4s ease,border-color .4s ease;-ms-transition:background-color .4s ease,border-color .4s ease;-o-transition:background-color .4s ease,border-color .4s ease;transition:background-color .4s ease,border-color .4s ease}.toolChip:hover{background-color:#FEFEFE;border:1px solid #EDEDED}html .selected,html .selected:hover{border-color:#AAA73F;box-shadow:0 0 5px rgba(0,0,0,0.2)}#cdBldBtnFingerName{color:#806753;display:block;font-size:.67em}.bigDot{background-color:#E78333;border:3px solid #973100;border-radius:23px 23px 23px 23px;display:block;height:23px;margin:5px auto;width:23px}.toolChip img,.toolChip .bigDot{opacity:.75}.selected img,.selected .bigDot,.toolChip:hover img,.toolChip:hover .bigDot{opacity:1}.fingerToolImage{background:url("../img/editor/hand.png") top center no-repeat;display:block;height:83px;margin:0 auto;position:relative;width:88px}.fingerDot{background-color:#F9F340;border:solid 2px #AF9607;border-radius:8px;display:block;height:8px;position:absolute;width:8px}.finger0 .fingerDot{display:none}.finger1 .fingerDot{right:22px;top:3px}.finger2 .fingerDot{right:1px;top:11px}.finger3 .fingerDot{right:1px;top:28px}.finger4 .fingerDot{right:1px;top:44px}label[for=cdBldStartingFret],html .arrowUp,html .arrowDown{min-height:52px}html .arrowUp,html .arrowDown{background-repeat:no-repeat;background-position:center 29px}html .arrowUp{background-image:url("../img/editor/basic-up-arrow.png")}html .arrowDown{background-image:url("../img/editor/basic-down-arrow.png")}.outputBox{max-height:30em;overflow:hidden;-webkit-transition:max-height .8s ease;-moz-transition:max-height .8s ease;-o-transition:max-height .8s ease;-ms-transition:max-height .8s ease;transition:max-height .8s ease}.outputBox.collapseOutput{max-height:0}.chordPro-statement{background-color:#f9f9f9;border:solid 1px #bbb;color:#999;font-family:Consolas,'courier new',monospace;padding:1em}.chordPro-keyword{color:#8e7cc3}.chordPro-attribute{color:#741b47}.chordPro-number{color:#e69138;font-weight:bold}.chordPro-string{background-color:#EDF7E6;color:#38761d;font-weight:bold}.ugsChordChooser{background-color:#eed18e;border-radius:10px;color:#551d00;font-size:14pt;max-height:17em;min-height:10em;overflow-y:auto;padding:.1em 0}.ugsChordChooser li{background-color:#bc9350;border-radius:6px;cursor:pointer;margin:0.5em;padding:0.5em;-webkit-transition:background-color .4s ease;-moz-transition:background-color .4s ease;-ms-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease}.ugsChordChooser li:hover{background-color:#99512c;color:#f4e19d;text-shadow:0px 2px 0px #551D00}.ugsChordChooser .newChord{background-color:#b2612d;color:#551d00;font-weight:bold}.ugsChordChooser .deleteChord{background:url("../img/editor/delete-btn.png") right center no-repeat;display:block;float:right;height:30px;opacity:0;width:36px;-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease}.ugsChordChooser li:hover .deleteChord{opacity:1}.ugsChordChooser canvas{float:right;margin-right:10px}html,body{margin:0;padding:0}body{position:relative;padding-top:40px}.editableSongPage{background-color:#EDECEA}.ugsLogo{color:#F2A848;font-family:'Peralta',cursive;font-size:16px;font-weight:normal;position:absolute;right:1em;text-shadow:1px 1px #332222}.ugsAppMenuBar{background:#933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x;-moz-box-shadow:0 5px 8px rgba(0,0,0,0.65);-webkit-box-shadow:0 5px 8px rgba(0,0,0,0.65);box-shadow:0 5px 8px rgba(0,0,0,0.65);border-top:1px solid #84623c;border-bottom:1px solid #240e01;font:17px/38px Helvetica,Arial;height:40px;min-width:910px;padding-left:0;position:fixed;top:0;width:100%;z-index:2}.ugsAppMenuBar>ul{margin-left:10px}.ugsAppMenuBar>ul>li{float:left;position:relative}.ugsAppMenuBar>ul>li>a{border:solid 1px transparent;color:#f4e19f;cursor:pointer;display:block;float:left;height:38px;line-height:38px;outline:0 none;padding:0 15px 0 5px;text-decoration:none;text-shadow:1px 2px 0 rgba(86,3,5,0.95)}.ugsAppMenuBar>ul>li>a:hover{border-color:#600000;background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fdda61;text-shadow:none}.ugsAppMenuBar>ul>.active>a{background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fef5e3;text-shadow:0 1px 1px rgba(0,0,0,0.5)}.ugsAppMenuBar>ul>li>a span{background-image:url("../img/editor/editorSprite.png");background-repeat:no-repeat;float:left;height:25px;margin-top:7px;width:25px}.navSong span{background-position:-75px 0}.navSong.active span,.navSong a:hover span{background-position:-75px -50px}.navInstruments span{background-position:-50px 0}.navInstruments.active span,.navInstruments a:hover span{background-position:-50px -50px}.navTranspose span{background-position:-25px 0}.navTranspose.active span,.navTranspose a:hover span{background-position:-25px -50px}.navDiagrams span{background-position:0px 0px}.navDiagrams.active span,.navDiagrams a:hover span{background-position:0 -50px}.navLayout span{background-position:-100px 0}.navLayout.active span,.navLayout a:hover span{background-position:-100px -50px}.navColors span{background-position:-125px 0}.navColors.active span,.navColors a:hover span{background-position:-125px -50px}.navZoom span{background-position:-150px 0}.navZoom.active span,.navZoom a:hover span{background-position:-150px -50px}.navEdit span{background-position:-175px 0}.navEdit.active span,.navEdit a:hover span{background-position:-175px -50px}.navOptions span{background-position:-200px 0}.navOptions.active span,.navOptions a:hover span{background-position:-200px -50px}.overlay{position:fixed;top:45px;right:20px;background-color:#2B1100;background-color:rgba(30,11,0,0.75);-moz-box-shadow:1px 10px 20px rgba(0,0,0,0.85);-webkit-box-shadow:1px 10px 20px rgba(0,0,0,0.85);box-shadow:1px 10px 20px rgba(0,0,0,0.85);-moz-border-radius:22px;-webkit-border-radius:22px;border-radius:22px;padding:10px;width:490px;z-index:0}.overlay>div{background:url("../img/editor/woodChip.png") repeat scroll 0 0 transparent;border-radius:0 0 13px 13px;overflow:hidden;padding:10px}.isHidden{display:none}.overlay select{font-size:1.1em}.overlay input[type=text],.overlay input[type=password]{display:block;font-size:1.2em;margin-bottom:.4em;padding:0.1em;width:98%}.overlay textarea{font-family:Monaco,"Consolas","Lucida Console","Courier New",courier,monospace;font-size:10pt;line-height:1.25;padding-left:.3em;white-space:nowrap;white-space:pre;overflow:scroll;height:525px;width:98%}.overlay input[type=text],.overlay input[type=password],.overlay textarea{background-color:rgba(255,255,255,0.7);border:solid 1px #E1B166;max-width:100%;max-height:100%;-webkit-transition:background-color 500ms linear;-moz-transition:background-color 500ms linear;-o-transition:background-color 500ms linear;-ms-transition:background-color 500ms linear;transition:background-color 500ms linear}.overlay input[type=text]:hover,.overlay input[type=password]:hover,.overlay textarea:hover{background-color:rgba(255,255,200,0.7);border-color:#444}.overlay input[type=text]:focus,.overlay input[type=password]:focus,.overlay textarea:focus{background-color:rgba(255,255,255,0.9);border-color:#6C280C;-moz-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3)}.overlay h3{background:url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17;border-bottom:1px solid #240E01;border-radius:12px 12px 0 0;border-top:1px solid #84623C;color:#F4E19F;font-size:22px;height:37px;line-height:37px;padding:0 20px;text-shadow:1px 2px 0 #592108}.overlay .closeBtn{background:url("../img/editor/closeBtn.png") no-repeat 0 0 transparent;display:block;height:30px;outline:none;position:absolute;right:10px;text-indent:-5000em;top:14px;width:30px}.overlay .resizeBtn{background:url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent;display:block;height:20px;outline:none;position:absolute;right:55px;text-indent:-5000em;top:18px;width:20px}html .helpDlg{top:75px;right:70px;width:300px;z-index:1}html .optionsDlg{top:100px;right:210px;width:380px;z-index:2}.optionsDlg div{font-size:.91em}.optionsDlg div li{padding-bottom:.82em}.chordBuilderDlg{right:210px;top:70px;width:490px;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease}html .chordBuilderNarrow{width:345px}.helpDlg{font-size:.9em}.normalHtml p,.normalHtml ul,.normalHtml ol{margin-bottom:1em}.normalHtml li{list-style:disc outside none;margin-left:1em;padding-bottom:.4em}.normalHtml h3{font-size:1.2em;font-weight:bold}.reformatDlg{right:25%;top:100px;width:480px;z-index:3}.instructions{width:28em;padding:0 0 .7em;color:#563324}.instructions.small{clear:both;font-size:.8em;display:block;width:35em}html .reformatDlg textarea{height:15em}.layoutOptions{left:50px}.layoutOptions:after,.layoutOptions:before{left:22%}.tuningOptions{left:150px}#transposeOptions em{color:#CCCCCC;float:right;font-size:0.86em}.otherOptions{left:250px}.helpOptions{left:320px}.hasSongbookLink .layoutOptions:after,.hasSongbookLink .layoutOptions:before{left:72%}.hasSongbookLink .tuningOptions{left:250px}.hasSongbookLink .otherOptions{left:300px}.hasSongbookLink .otherOptions:after,.hasSongbookLink .otherOptions:before{left:70%}.hasSongbookLink .helpOptions{left:340px}.hasSongbookLink .helpOptions:after,.hasSongbookLink .helpOptions:before{left:80%}.theme-reversed{background-color:#000;color:#FFF}.theme-reversed pre{color:#e9e9e9}.theme-reversed .scalablePrintArea{background-color:transparent}.theme-reversed .scalablePrintArea h5,.theme-reversed .scalablePrintArea h6{border-left-color:#444;color:#69F}.theme-reversed .ugsChorus{border-left-color:#333}.theme-reversed .ugsChords code{color:#333}.theme-reversed .ugsChords code em{color:#F42}.theme-reversed .subNav a:hover{background-color:#888;color:#000}.theme-reversed .overlay{background-color:#4E1C07;box-shadow:none;color:#000}.theme-jellyBean pre{color:inherit}.theme-jellyBean .scalablePrintArea{color:#56A0A5;font-family:"Comic Sans MS","Marker Felt",cursive,sans-serif}.theme-jellyBean .scalablePrintArea hgroup{color:#FF9417;text-align:center}.theme-jellyBean .scalablePrintArea h1{color:#D20770;font-family:'Peralta',cursive,sans-serif;font-size:2em;text-shadow:0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660}.theme-jellyBean .scalablePrintArea h2{font-size:1.1em}.theme-jellyBean .scalablePrintArea h5,.theme-jellyBean .scalablePrintArea h6{border-left-color:#F2E660;color:#9C55ED;font-family:inherit;letter-spacing:0.045em}.theme-jellyBean .ugsChorus{border-left-color:#F2E660;border-radius:5px 0 0 5px}.theme-jellyBean .ugsChords code{color:#333}.theme-jellyBean .ugsChords code em{color:#D20070}.theme-western .scalablePrintArea{color:#88410A}.theme-western .scalablePrintArea hgroup{color:#88410A;font-family:'Smokum',Arial,sans-serif;text-align:center}.theme-western .scalablePrintArea h1{color:#472B07;font-family:inherit;font-size:3.3em;text-shadow:0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0}.theme-western .scalablePrintArea h2{font-size:1.7em}.theme-western .scalablePrintArea h5,.theme-western .scalablePrintArea h6{border-left-color:#BED379;color:#92A88C;font-family:'Smokum',Arial,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-western .ugsChorus{border-left-color:#BEC481;border-radius:5px 0 0 5px}.theme-western .ugs-source-wrap pre{color:inherit}.theme-pumpkin .scalablePrintArea{color:#68391D}.theme-pumpkin .scalablePrintArea hgroup{color:#B14623;text-align:center}.theme-pumpkin .scalablePrintArea h1{color:#D3770E;font-family:'Ranchers',Arial,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:.064em .044em 0 #edf8ce,-0.037em .044em 0 #edf8ce,-0.074em .094em 0 #bed379,.074em .094em 0 #bed379}.theme-pumpkin .scalablePrintArea h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em}.theme-pumpkin .scalablePrintArea h5,.theme-pumpkin .scalablePrintArea h6{border-left-color:#BED379;color:#FFC501;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-pumpkin .ugs-source-wrap pre{color:inherit}.theme-pumpkin .ugsChorus{border-left-color:#A0B74E;border-radius:5px 0 0 5px}.theme-pumpkin .ugsChords code em{color:#FE9600}.theme-zombie .scalablePrintArea{color:#798666}.theme-zombie .scalablePrintArea hgroup{color:#902374;text-align:center}.theme-zombie .scalablePrintArea h1{color:#BED63A;font-family:'Creepster',cursive,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:.002em .002em 0 #364000,.044em .044em 0 #9eb036,-0.042em -0.014em 0 #8f2472,.087em .074em 0 #8f2472,-0.074em .094em 0 #ca4f04,.074em .174em 0 #ca4f04}.theme-zombie .scalablePrintArea h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em;text-shadow:0.12em 0.13em 0 #DBDAE8}.theme-zombie .scalablePrintArea h5,.theme-zombie .scalablePrintArea h6{border-left-color:#E4DCA4;color:#798666;font-family:'Peralta',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;text-shadow:0.03em 0.07em 0 #BED63A}.theme-zombie .ugs-source-wrap pre{color:inherit}.theme-zombie .ugsChorus{border-left-color:#CDC693;border-radius:6px 0 0 6px}.theme-zombie .ugsChords code em{color:#DD1A52}.theme-frosty .scalablePrintArea{color:#154286}.theme-frosty .scalablePrintArea hgroup{color:#6A97DB;text-align:center}.theme-frosty .scalablePrintArea h1{color:#D5E2F5;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:2.18em;letter-spacing:0.05em;line-height:1.1;text-shadow:-0.064em -0.034em 0 #fff,.008em .008em 0 #a3e3d7,.009em -0.009em 0 #a3e3d7,.098em .115em 0 #154286,.064em .064em 0 #00183d,-0.114em -0.064em 0 #154286,-0.114em 0 0 #154286,0 -0.064em 0 #154286,-0.084em .064em 0 #154286,.064em -0.034em 0 #154286}.theme-frosty .scalablePrintArea h2{font-family:'Ranchers',Arial,sans-serif;font-size:1.2em}.theme-frosty .scalablePrintArea h5,.theme-frosty .scalablePrintArea h6{border-left-color:#E3F7F3;color:#80B7B1;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:0.6em}.theme-frosty .ugs-source-wrap pre{color:inherit}.theme-frosty .ugsChorus{border-left-color:#0896FE;border-radius:6px 0 0 6px}.theme-frosty .ugsChords code em{color:#0896FE}.theme-krampus .scalablePrintArea{color:#929867}.theme-krampus .scalablePrintArea hgroup{color:#929867;text-align:center}.theme-krampus .scalablePrintArea h1{color:#A22C27;font-family:'Lobster',cursive,sans-serif;font-size:2.78em;line-height:1.1;text-shadow:0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621}.theme-krampus .scalablePrintArea h2{font-family:'Peralta',cursive,sans-serif;font-size:1.2em;text-shadow:0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592}.theme-krampus .scalablePrintArea h5,.theme-krampus .scalablePrintArea h6{border-left-color:#7B8055;color:#A32C28;font-family:'Peralta',cursive,sans-serif;font-size:1.2em;font-style:normal;padding:0;text-indent:0.6em}.theme-krampus .ugs-source-wrap pre{color:inherit}.theme-krampus .ugsChorus{border-left-color:#B9C97E;border-radius:6px 0 0 6px}.theme-krampus .ugsChords code em{color:#384030}.theme-notebook .scalablePrintArea{color:#443377;font-family:'Architects Daughter',Arial,sans-serif}.theme-notebook .scalablePrintArea hgroup{color:#2E2ECC;font-family:inherit;text-align:center}.theme-notebook .scalablePrintArea h1{border-color:#E4E4FF;border-style:solid;border-width:1px 0;color:#252537;font-family:'Permanent Marker',Arial,sans-serif;font-size:2em;margin-bottom:0.2em}.theme-notebook .scalablePrintArea h2{border-bottom:1px solid #E4E4FF;font-size:1.1em}.theme-notebook .scalablePrintArea h5,.theme-notebook .scalablePrintArea h6{border-left-color:#626283;color:#2E2ECC;font-family:'Permanent Marker',Arial,sans-serif;font-size:1.3em;padding:0;text-indent:0.7em}.theme-notebook .ugs-source-wrap pre{color:inherit}.theme-notebook .ugsChorus{border-left-color:#a4a0b2;border-radius:6px 0 0 6px}.theme-notebook .ugsChords code{font-family:inherit}.theme-justBlack .ugs-source-wrap h5,.theme-justBlack .ugs-source-wrap h6{color:#000;font-family:'Bree Serif',Arial,sans-serif;font-style:normal}.theme-justBlack .ugsChords code em{color:#000;font-weight:bold}.theme-justBlack .scalablePrintArea hgroup,.theme-justBlack .scalablePrintArea hgroup *{font-family:'Bree Serif',Arial,sans-serif;font-style:normal}.theme-justBlack .scalablePrintArea hgroup{text-align:center}.scalablePrintArea{-moz-transform-origin:0 0;-webkit-transform-origin:0 0;background-color:#fff;border-right:solid 1px #888;font-size:inherit;box-shadow:3px 0 9px rgba(0,0,0,0.4)}.scalablePrintArea hgroup{padding-bottom:.15in}html .ugsHideDiagrams .ugs-diagrams-wrap{display:none}html .ugsHideDiagrams .ugs-source-wrap{margin-left:0}html .diagramsOnTop .ugs-diagrams-wrap{float:none;width:auto}html .diagramsOnTop .ugs-source-wrap{margin-left:0}.ugsNoChords .ugs-source-wrap{margin-left:0}.diagramsOnSide .ugs-diagrams-wrap{float:left;width:225px}.diagramsOnSide .ugs-source-wrap{margin-left:250px}.liBtn,.liBtn *{cursor:pointer}.pageWidth_letter .scalablePrintArea{width:8in;padding:0.2in;min-height:10.5in}.pageWidth_a4 .scalablePrintArea{width:19cm;padding:1cm;min-height:28cm}.pageWidth_screen .scalablePrintArea{padding:20px}.scalablePrintArea .ugs-diagrams-wrap canvas{zoom:1}.scalablePrintArea .ugs-diagrams-wrap{zoom:1}.scalablePrintArea .ugs-source-wrap{zoom:1}.aceEditorActive,.aceEditorActive body{overflow:hidden;height:100%;width:100%;margin:0;padding:0}.aceEditorActive #aceHeader{display:block}.aceEditorActive .ugsAppMenuBar,.aceEditorActive .overlay,.aceEditorActive .scalablePrintArea{display:none}#aceHeader{border-bottom:solid 1px;font-family:arial,sans-serif;font-size:1;line-height:40px;height:40px;padding:0 15px;display:none}#aceHeader a{float:right;font-size:0.87em;line-height:inherit;color:inherit;text-decoration:none}#aceHeader a:hover{color:#CC7833;text-decoration:none}#aceEditor{position:absolute;top:40px;right:0;bottom:0;left:0}.aceSideBtn{background-color:rgba(0,0,0,0);border:1px solid #DDDDDD;border-radius:4px;cursor:pointer;float:left;margin:7px 0.8em 0 0;transition:background-color .3s ease}.aceSideBtn span{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:#888888;border-radius:1px;display:block;height:2px;margin:4px 2px;width:16px;transition:background-color .3s ease}.aceSideBtn:hover{background-color:#333}.aceSideBtn:hover span{background-color:#eee}#aceHelp{bottom:0;left:-350px;margin:0;position:absolute;top:40px;width:350px}#aceHelp{background:#fff;color:#707273;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;overflow-y:auto;text-align:left}.aceHelp{border-top:2px solid #333;padding:1em .6em}.aceHelp h1,.aceHelp h3{color:#222222;font-size:2.5em;font-weight:500;line-height:1em;margin:0 0 1em}.aceHelp h3{font-size:1.3em}.aceHelp p{line-height:1.6em;margin:0 0 1em}.aceHelp table{margin:20px 0 10px}.aceHelp strong{font-weight:bold}.aceHelp td,.aceHelp th{color:#787878;padding:0 .8em .8em 0;vertical-align:baseline}.aceHelp th{font-weight:bold}.aceHelp .key{background-color:#666;border:0 none;border-radius:.22em;color:#FFF;font-family:Arial;display:inline-block;font-size:.71em;font-weight:bold;line-height:1.1;padding:.22em .4em;text-transform:uppercase}.aceHelp .shortKeys{white-space:nowrap;padding-right:1.4em} \ No newline at end of file From 38f2b40fd341fba19a9d207c06d1988c90856f77 Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Fri, 24 Oct 2014 12:21:40 -0700 Subject: [PATCH 4/5] rename directory, "css" to "less" --- src/less/editor/ugsEditorPlus.aceEditor.less | 150 +++++++ src/less/editor/ugsEditorPlus.arrowBox.less | 224 +++++++++++ src/less/editor/ugsEditorPlus.buttons.less | 116 ++++++ .../editor/ugsEditorPlus.chordBuilder.less | 327 +++++++++++++++ src/less/editor/ugsEditorPlus.less | 9 + src/less/editor/ugsEditorPlus.menuBar.less | 157 ++++++++ src/less/editor/ugsEditorPlus.overlays.less | 267 +++++++++++++ src/less/editor/ugsEditorPlus.song.less | 83 ++++ src/less/editor/ugsEditorPlus.themes.less | 375 ++++++++++++++++++ src/less/ugsEditorPlus_merged.less | 14 + 10 files changed, 1722 insertions(+) create mode 100644 src/less/editor/ugsEditorPlus.aceEditor.less create mode 100644 src/less/editor/ugsEditorPlus.arrowBox.less create mode 100644 src/less/editor/ugsEditorPlus.buttons.less create mode 100644 src/less/editor/ugsEditorPlus.chordBuilder.less create mode 100644 src/less/editor/ugsEditorPlus.less create mode 100644 src/less/editor/ugsEditorPlus.menuBar.less create mode 100644 src/less/editor/ugsEditorPlus.overlays.less create mode 100644 src/less/editor/ugsEditorPlus.song.less create mode 100644 src/less/editor/ugsEditorPlus.themes.less create mode 100644 src/less/ugsEditorPlus_merged.less diff --git a/src/less/editor/ugsEditorPlus.aceEditor.less b/src/less/editor/ugsEditorPlus.aceEditor.less new file mode 100644 index 0000000..2d1d604 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.aceEditor.less @@ -0,0 +1,150 @@ +/* + * Document : ugsEditorPlus.aceEditor.css + * Author : Buz + * Description: Ace WYSIWYG Editor + */ +.aceEditorActive, +.aceEditorActive body { + overflow: hidden; + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} +/* using jQuery instead: .aceEditorActive #aceEditor */ +.aceEditorActive { + #aceHeader{ + display: block; + } + .ugsAppMenuBar, + .overlay, + .scalablePrintArea{ + display: none; + } +} +#aceHeader { + border-bottom: solid 1px; + font-family: arial,sans-serif; + font-size: 1; + line-height: 40px; + height:40px; + padding:0 15px; + display: none; + a{ + float: right; + font-size: 0.87em; + line-height: inherit; + color: inherit; + text-decoration: none; + } + a:hover{ + color: #CC7833;/*F92672;*/ + text-decoration: none; + } +} +#aceEditor { + /* using jQuery instead: display: none;*/ + position: absolute; + top: 40px; + right: 0; + bottom: 0; + left: 0; +} +/* Show/Hide Sidebar Button + ------------------------------------------ */ +.aceSideBtn { + background-color: rgba(0, 0, 0, 0); + border: 1px solid #DDDDDD; + border-radius: 4px; + cursor: pointer; + float:left; + margin: 7px 0.8em 0 0; + transition: background-color .3s ease; + span { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + background-color: #888888; + border-radius: 1px; + display: block; + height: 2px; + margin: 4px 2px; + width: 16px; + transition: background-color .3s ease; + } +} +.aceSideBtn:hover{ + background-color: #333; + span { + background-color: #eee; + } +} + +/* Help sidebar + ------------------------------------------ */ +#aceHelp { + bottom: 0; + left: -350px; + margin: 0; + position: absolute; + top: 40px; + width:350px; +} +#aceHelp { + background: #fff; + color: #707273; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 12px; + overflow-y: auto; + text-align: left; +} +.aceHelp { + border-top: 2px solid #333; + padding: 1em .6em; + + h1, h3 { + color: #222222; + font-size: 2.5em; + font-weight: 500; + line-height: 1em; + margin: 0 0 1em; + } + h3{ + font-size: 1.3em; + } + p { + line-height: 1.6em; + margin: 0 0 1em; + } + table { + margin: 20px 0 10px; + } + strong { + font-weight: bold; + } + td, th { + color: #787878; + padding: 0 .8em .8em 0; + vertical-align: baseline; + } + th{ + font-weight: bold; + } + .key { + background-color: #666; + border: 0 none; + border-radius: .22em; + color: #FFF; + font-family: Arial; + display: inline-block; + font-size: .71em; + font-weight: bold; + line-height: 1.1; + padding: .22em .4em; + text-transform: uppercase; + } + .shortKeys{ + white-space: nowrap; + padding-right: 1.4em; + } +} diff --git a/src/less/editor/ugsEditorPlus.arrowBox.less b/src/less/editor/ugsEditorPlus.arrowBox.less new file mode 100644 index 0000000..25f8760 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.arrowBox.less @@ -0,0 +1,224 @@ +/* + * Document : ugsEditorPlus.arrowBox.css + * Author : Buz + * Description: The menu boxes and their contents. + */ +/* Thanks to: cssarrowplease.com + -------------------------------- */ +.arrowBox { + background-color: rgba(0, 0, 0, 0.81); + border: 2px solid #fff; + border-radius: 10px; + color:#b3b3b3; + display: none; + position: fixed; + top: 60px; + width: 310px; + -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + z-index: 5; + + &:after, + &:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(0, 0, 0, 0); + border-bottom-color: #000; + border-width: 20px; + left: 50%; + margin-left: -20px; + } + + &:before { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + border-width: 23px; + left: 50%; + margin-left: -23px; + } +} + .arrowBoxContent{ + padding: 1em .6em .4em; + } + .arrowBoxContent + .arrowBoxContent{ + padding-top:0; + } + +/* +-------------------------------------- */ +.enablePseudoSelects { + dt, + dd { + height: 3em; + line-height: 1; + margin: 0; + padding: 0; + } + dd { + display:none; + left: 16.1em; + position: relative; + top: -3.1em; + height: 0px; + } + label { + color: #E4E4E4; + display: block; + cursor: pointer; + border: solid 1px transparent; + border-radius: 7px; + padding: 0.5em; + + &:hover { + color:#fff; + background-color: #2A2A2A; + border-color: #555; + box-shadow: 2px 2px 2px #000; + + em { + color:#E4E4E4; + } + } + } + + label em{ + color: #898989; + float: right; + font-family: Arial; + } +} +.event-userSelecting label { + color:#B9B9B9; + em { + color:#3a3a3a; + } +} +html .active label { + background-color: #000; + color: #fff; +} +/* +-------------------------------------- */ +.pseudoSelect { + position: absolute; + background-color: #3C3C3C; + border: solid 1px #555; + border-radius: 7px; + box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); + color: #EFEFEF; + cursor: pointer; + width: 17em; + + a { + border: 2px solid transparent; + border-radius: 10px; + color: inherit; + display: block; + padding: 0.5em 0.5em 0.5em 30px; + text-decoration: none; + } + + li { + display: block; + float: none; + margin: 0; + padding: 0.1em; + text-align: inherit; + + &:hover { + color: #fff; + + a { + background-color: #000; + border-color: #676767; + } + } + } + + .checked a { + background: url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A; + border-color: #C5C5C5; + color: #FFFFFF; + text-shadow:1px 2px 1px #000; + } +} +/* our Checkboxes are a problem... +-------------------------------- */ +.checkboxBlock { + border-top: 1px solid #575757; + box-shadow: 0 -1px 0 #000; + font-size: 0.81em; + padding: 0.75em 0; + + label { + padding-left: 0.5em; + } +} +.checkBoxFinePrint{ + display: block; + font-size:.85em; + padding: 0.3em 0 0.5em 3.1em; +} +#commonChordList { + display: block; + font-size: 1.2em; + margin-left: 1.5em; + width: 15em; +} + +/* list of links (duh) + * ...undoing some spill-over styles, when will I learn + -------------------------------- */ + .linksList { + font-size: .85em; + li { + margin: 0; + padding: 0.1em; + text-align: left; + float: none; + } + a { + border-radius: 8px; + color: #B9B9B9; + display: block; + padding: 0.6em; + text-decoration: none; + + &:hover { + background-color: #000; + color:#fff; + } + } +} +/* Feedback message -- on UPDATE +-------------------------------- */ +.updateMessage { + background-color: #BAE5A7; + border: 1px solid #44A819; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); + color: #43772D; + display: none; + position: absolute; + text-align: center; + text-shadow: 0 -1px rgba(255, 190, 40, 0.3); + width: 10em; + + em { + border: 1px solid #66D836; + border-radius: 3px 3px 3px 3px; + box-shadow: 0 0 3px #559277 inset; + display: block; + height: 100%; + padding: 0.2em; + } +} diff --git a/src/less/editor/ugsEditorPlus.buttons.less b/src/less/editor/ugsEditorPlus.buttons.less new file mode 100644 index 0000000..c5df507 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.buttons.less @@ -0,0 +1,116 @@ +/* + * Document : ugsEditorPlus.buttons.css + * Author : Buz + * Description: All editor's buttons and button-like links. + */ + +/* "base button" is rounded & gray with white text */ +.baseBtn { + background-color: #999; + border: 1px solid #333; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + color: #FFF; + cursor: pointer; + font-size: inherit; + font-weight: bold; + padding: 0.2em 1em; + text-align: center; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); + /* Remove underline in case this is applied to a link */ + + text-decoration: none; + &:hover { + background-color: #888; + /* Force colorin case this is applied to a link */ + + color: #fff; + } +} + +.blueBtn { + background-color: #89b9e3; + background-image: -moz-linear-gradient(top, #89b9e3, #3d6bbb); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')"; + border-color: #3765B7; + text-shadow: #89b9e3 0px 1px 0, #3765b7 0 -1px 0; + &:hover { + background-color: #4c85e8; + background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; + text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; + } +} + +/* orange */ +.orange { + color: #fef4e9; + border: solid 1px #da7c0c; + background: #f78d1d; + background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); + background: -moz-linear-gradient(top, #faa51a, #f47a20); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); + text-shadow: #da7c0c 0px 1px 0, #faa51a 0 -1px 0; + &:hover { + background: #f47c20; + background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); + background: -moz-linear-gradient(top, #f88e11, #f06015); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); + text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; + } + &:active { + color: #fcd3a5; + background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); + background: -moz-linear-gradient(top, #f47a20, #faa51a); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); + } +} + +.btnBar { + height: 30px; + + .baseBtn { + float: right; + font-size: 110%; + margin-bottom: 5px; + } +} +/* "Cancel"/"No Thanks" (subtle, alternate) buttons +------------------------------ */ +.alternateBtn, +.noThanks { + color: #3965B0; + float: right; + line-height: 33px; + margin-right: 1.5em; + text-decoration: none; + + &:hover { + color:#0646AD; + } +} + +.noThanks { + background-color: #EFD292; + border-radius: 6px; + padding: 0 0.4em; + /* backwards transition support */ + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + -o-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; + + &:hover { + background-color: #F2E2C1; + } +} + +.alternateBtn { + +} diff --git a/src/less/editor/ugsEditorPlus.chordBuilder.less b/src/less/editor/ugsEditorPlus.chordBuilder.less new file mode 100644 index 0000000..f5986ed --- /dev/null +++ b/src/less/editor/ugsEditorPlus.chordBuilder.less @@ -0,0 +1,327 @@ +/* + * Document : ugsEditorPlus.chordBuilder.css + * Author : Buz + * Description: delicate positioning of chord builder's canvas and toolbox controls. + */ +/* Chord Builder's elements +------------------------------ */ +.chordBuilderDlg { + input[type=text] { + border: 1px solid #D7D7D7; + border-radius: 5px 5px 5px 5px; + display: block; + font-size: 30pt; + padding: 0; + text-align: center; + max-width: 100%; + width: 100%; + } + pre { + font-size: 12pt; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; + } +} +/* ** canvas & editor stack */ +html body .editorSurface { + background-color: #fff; + border-radius: 5px ; + font-size: 0.9em; + height: 300px; + margin: 5px auto; + overflow: hidden; + padding: 0; + position: relative; + width: 462px; + -moz-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; + -webkit-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; + box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; +} +/* ** stacking order ** */ +.editorSurface canvas { + border:none; + cursor:none; + left: 0; + position: absolute; + top: 0; +} +#cdBldDiagramCanvas { + z-index: 1; +} +#cdBldCursorCanvas { + z-index: 2; +} +.chordToolbox { + z-index: 3; +} +.toolboxEdgeShadow { + z-index: 4; +} +/* -- toolbox and its contents -- */ +.chordToolbox{ + border: 0 solid #ccc; + background-color: #F0EEF0;/*464646;*/ + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + height: 250px; + position: absolute; + top: 25px; + width: 135px; + /* backwards transition support */ + -webkit-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; + -moz-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; + -ms-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; + -o-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; + transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; +} +.chordToolbox.open, +.chordToolbox:hover { + background-color: #fafafa; + border-color:#8C8C8C; + box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.3); +} +.chordToolbox.leftEdge { + border-radius: 0 7px 7px 0; + border-width: 2px 2px 2px 0; + left: -110px; +} +.chordToolbox.leftEdge.open, +.chordToolbox.leftEdge:hover { + left: 0; +} +.chordToolbox.rightEdge { + border-radius: 7px 0 0 7px; + border-width: 2px 0 2px 2px; + right: -110px; +} +.chordToolbox.rightEdge.open, +.chordToolbox.rightEdge:hover { + right: 0; +} +.chordToolboxInner{ + margin: 10px auto; + width: 100px; +} +/* forceed shadow over toolbox(es) */ +.toolboxEdgeShadow { + background-color: transparent; + height: 255px; + position: absolute; + top: 26px; + width: 10px; +} + +.toolboxEdgeShadow.leftEdge{ + box-shadow: 4px 0 6px rgba(0, 0, 0, 0.3); + left: -10px; +} +.toolboxEdgeShadow.rightEdge{ + box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3); + right: -10px; +} +/* --- */ +.toolChip { + background-color: #fafafa; + border: 1px solid #fafafa; + border-radius: 5px; + color: #C7681B; + cursor: pointer; + display: block; + margin-bottom:8px; + min-height: 70px; + padding: 5px 0; + text-align: center; + text-decoration: none; + width: 100%; + /* backwards transition support */ + -webkit-transition: background-color 0.4s ease, border-color 0.4s ease; + -moz-transition: background-color 0.4s ease, border-color 0.4s ease; + -ms-transition: background-color 0.4s ease, border-color 0.4s ease; + -o-transition: background-color 0.4s ease, border-color 0.4s ease; + transition: background-color 0.4s ease, border-color 0.4s ease; +} +.toolChip:hover { + background-color: #FEFEFE; + border: 1px solid #EDEDED; +} +html .selected, +html .selected:hover { + border-color: #AAA73F; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); +} +#cdBldBtnFingerName { + color: #806753; + display: block; + font-size: .67em; +} +.bigDot { + background-color: #E78333; + border: 3px solid #973100; + border-radius: 23px 23px 23px 23px; + display: block; + height: 23px; + margin: 5px auto; + width: 23px; +} +/* some "active" button (hover) efx */ +.toolChip img, +.toolChip .bigDot { + opacity: .75; +} +.selected img, +.selected .bigDot, +.toolChip:hover img, +.toolChip:hover .bigDot { + opacity: 1; +} +/* hand */ +.fingerToolImage { + background: url("../img/editor/hand.png") top center no-repeat; + display:block; + height: 83px; + margin: 0 auto; + position: relative; + width: 88px; +} +.fingerDot { + background-color: #F9F340; + border:solid 2px #AF9607; + border-radius: 8px; + display: block; + height: 8px; + position: absolute; + width: 8px; +} +.finger0 .fingerDot { + display:none; +} +.finger1 .fingerDot { + right: 22px; + top: 3px; +} +.finger2 .fingerDot { + right: 1px; + top: 11px; +} +.finger3 .fingerDot { + right: 1px; + top: 28px; +} +.finger4 .fingerDot { + right: 1px; + top: 44px; +} +/* sliders (up/down arrows) */ +label[for=cdBldStartingFret], +html .arrowUp, +html .arrowDown{ + min-height: 52px; +} +html .arrowUp, html .arrowDown { + background-repeat: no-repeat; + background-position: center 29px; +} +html .arrowUp { + background-image: url("../img/editor/basic-up-arrow.png"); +} +html .arrowDown { + background-image: url("../img/editor/basic-down-arrow.png"); +} +/* output area */ +.outputBox{ + max-height: 30em; + overflow: hidden; + -webkit-transition: max-height 0.8s ease; + -moz-transition: max-height 0.8s ease; + -o-transition: max-height 0.8s ease; + -ms-transition: max-height 0.8s ease; + transition: max-height 0.8s ease; +} +.outputBox.collapseOutput{ + max-height: 0; +} + +/* ________ colorized chordPro defintion ________ */ +.chordPro-statement { + background-color:#f9f9f9; + border:solid 1px #bbb; + color: #999; + font-family: Consolas, 'courier new', monospace; + /* font-size: 14px; */ + padding:1em; +} +.chordPro-keyword { + color: #8e7cc3; +} +.chordPro-attribute { + color: #741b47; +} +.chordPro-number { + color: #e69138; + font-weight:bold; +} +.chordPro-string { + background-color: #EDF7E6; + color: #38761d; + font-weight:bold; +} +/* ________ Chord Chooser (List) ________ */ +.ugsChordChooser { + background-color: #eed18e; + border-radius: 10px; + color: #551d00;/* #f4e19d; */ + font-size: 14pt; + max-height: 17em; + min-height: 10em; + overflow-y: auto; + padding: .1em 0; + + li { + background-color: #bc9350; + border-radius: 6px; + cursor: pointer; + margin: 0.5em; + padding: 0.5em; + /* backwards transition support */ + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + -o-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; + } + li:hover { + background-color: #99512c; + color: #f4e19d; /* #ffdb5b; */ + text-shadow: 0px 2px 0px #551D00; + } + .newChord { + background-color: #b2612d; + color: #551d00; + font-weight: bold; + } + // delete button + .deleteChord { + background: url("../img/editor/delete-btn.png") right center no-repeat; + display: block; + float: right; + height: 30px; + opacity: 0; + width: 36px; + /* backwards transition support */ + -webkit-transition: opacity 0.4s ease; + -moz-transition: opacity 0.4s ease; + -ms-transition: opacity 0.4s ease; + -o-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; + } + li:hover .deleteChord { + opacity: 1; + } + // mini-diagram + canvas { + float: right; + margin-right: 10px; + } +} diff --git a/src/less/editor/ugsEditorPlus.less b/src/less/editor/ugsEditorPlus.less new file mode 100644 index 0000000..3633016 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.less @@ -0,0 +1,9 @@ +/* + * Document : ugsEditorPlus + * Created on : July 2013 + * Author : Buz + * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. +*/ +.salt_8873ySp8 { + color:#0ff; +} diff --git a/src/less/editor/ugsEditorPlus.menuBar.less b/src/less/editor/ugsEditorPlus.menuBar.less new file mode 100644 index 0000000..d65d111 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.menuBar.less @@ -0,0 +1,157 @@ +/* + * Document : ugsEditorPlus.menuBar.css + * Author : Buz + * Description: The top main application menu bar. + */ +/** + * Help on hiding the select scroll bars: + * http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element + * @import url(http://fonts.googleapis.com/css?family=Peralta); + *-------------- */ + html, body { + margin: 0; + padding: 0; + } + body { + position:relative; + padding-top: 40px; + } + .editableSongPage{ + background-color:#EDECEA; + } +/* LOGO +-------------------------------- */ +.ugsLogo { + color: #F2A848; + font-family: 'Peralta', cursive; + font-size: 16px; + font-weight: normal; + position: absolute; + right: 1em; + text-shadow: 1px 1px #332222; +} + +/* App +-------------------------------- */ +.ugsAppMenuBar { + background: #933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x; + -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); + -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); + border-top: 1px solid #84623c; + border-bottom: 1px solid #240e01; + font: 17px/38px Helvetica, Arial; + height: 40px; + min-width: 910px; + padding-left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 2; +} +.ugsAppMenuBar > ul { + margin-left: 10px; +} +.ugsAppMenuBar > ul > li { + float: left; + position: relative; +} +.ugsAppMenuBar > ul > li > a { + border: solid 1px transparent; + color: #f4e19f; + cursor: pointer; + display: block; + float: left; + height: 38px; + line-height: 38px; + outline: 0 none; + padding: 0 15px 0 5px; + text-decoration: none; + text-shadow: 1px 2px 0 rgba(86, 3, 5, 0.95); +} +.ugsAppMenuBar > ul > li > a:hover { + border-color: #600000; + background-color: #451212; + background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; + color: #fdda61; + text-shadow: none; +} +.ugsAppMenuBar > ul > .active > a { + background-color: #451212; + background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; + color: #fef5e3; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); +} +/* Icons/Sprits +-------------------------------- */ +.ugsAppMenuBar > ul > li > a span { + background-image: url("../img/editor/editorSprite.png"); + background-repeat: no-repeat; + float: left; + height: 25px; + margin-top: 7px; + width: 25px; +} +.navSong span { + background-position: -75px 0px; +} +.navSong.active span, +.navSong a:hover span { + background-position: -75px -50px; +} +.navInstruments span { + background-position: -50px 0px; +} +.navInstruments.active span, +.navInstruments a:hover span { + background-position: -50px -50px; +} +.navTranspose span { + background-position: -25px 0px; +} +.navTranspose.active span, +.navTranspose a:hover span { + background-position: -25px -50px; +} +.navDiagrams span { + background-position: 0px 0px; +} +.navDiagrams.active span, +.navDiagrams a:hover span { + background-position: 0px -50px; +} +.navLayout span { + background-position: -100px 0px; +} +.navLayout.active span, +.navLayout a:hover span { + background-position: -100px -50px; +} +.navColors span { + background-position: -125px 0px; +} +.navColors.active span, +.navColors a:hover span { + background-position: -125px -50px; +} +.navZoom span { + background-position: -150px 0px; +} +.navZoom.active span, +.navZoom a:hover span { + background-position: -150px -50px; +} +.navEdit span { + background-position: -175px 0px; +} +.navEdit.active span, +.navEdit a:hover span { + background-position: -175px -50px; +} +.navOptions span { + background-position: -200px 0px; +} +.navOptions.active span, +.navOptions a:hover span { + background-position: -200px -50px; +} \ No newline at end of file diff --git a/src/less/editor/ugsEditorPlus.overlays.less b/src/less/editor/ugsEditorPlus.overlays.less new file mode 100644 index 0000000..fd412de --- /dev/null +++ b/src/less/editor/ugsEditorPlus.overlays.less @@ -0,0 +1,267 @@ +/* + * Document : ugsEditorPlus.overlays.css + * Author : Buz + * Description: Generic and use-spedific Overlay/Dialog box elements. + */ +/* FLOATIN EDITOR +-------------------------------- */ +.overlay { + position:fixed; + top:45px; + right:20px; + background-color: #2B1100; + background-color: rgba(30, 11, 0, 0.75); // rgba(43, 17, 0, 0.80); + -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + -moz-border-radius: 22px; + -webkit-border-radius: 22px; + border-radius: 22px; + padding: 10px; + width: 490px; + z-index:0; +} +.overlay > div { + background: url("../img/editor/woodChip.png") repeat scroll 0 0 transparent; + border-radius: 0 0 13px 13px; + overflow: hidden; + padding: 10px; +} + +// .overlay div div{ +// background-image: none; +// border-radius:0; +// padding: 0; +// } + +/* MOVED FROM PAGE: SECTION 4 +------------------------------ */ +.isHidden { + display:none; +} + +/* Form inputs, +----------------------------------- */ +.overlay { + select{ + font-size: 1.1em; + } + input[type=text], + input[type=password] { + display: block; + font-size: 1.2em; + margin-bottom: .4em; + padding: 0.1em; + width: 98%; + } + textarea { + font-family: Monaco, "Consolas", "Lucida Console", "Courier New", courier, monospace; + font-size: 10pt; + line-height: 1.25; + padding-left: .3em; + white-space: nowrap; + white-space:pre; + overflow:scroll; + height:525px; + width: 98%; + } + + input[type=text], + input[type=password], + textarea { + background-color: rgba(255, 255, 255, 0.7); + border: solid 1px #E1B166; + max-width: 100%; + max-height: 100%; + -webkit-transition: background-color 500ms linear; + -moz-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; + -ms-transition: background-color 500ms linear; + transition: background-color 500ms linear; + + &:hover { + background-color:rgba(255, 255, 200, 0.7); + border-color:#444; + } + &:focus { + background-color:rgba(255, 255, 255, 0.9); + border-color: #6C280C; + -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + } + } + + h3 { + // cursor: move; + background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; + border-bottom: 1px solid #240E01; + border-radius: 12px 12px 0 0; + border-top: 1px solid #84623C; + color: #F4E19F; + font-size: 22px; + // font-weight: bold; + height: 37px; + line-height: 37px; + padding: 0 20px; + text-shadow: 1px 2px 0 #592108; + } + .closeBtn { + background: url("../img/editor/closeBtn.png") no-repeat 0 0 transparent; + display: block; + height: 30px; + outline: none; + position: absolute; + right: 10px; + text-indent: -5000em; + top: 14px; + width: 30px; + } + .resizeBtn { + background: url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent; + display: block; + height: 20px; + outline: none; + position: absolute; + right: 55px; + text-indent: -5000em; + top: 18px; + width: 20px; + } +} +/* _________ Specific Overlays _________ */ +html .helpDlg { + top:75px; + right:70px; + width: 300px; + z-index:1; +} +html .optionsDlg { + top:100px; + right:210px; + width: 380px; + z-index:2; +} +.optionsDlg div { + font-size:.91em; +} +.optionsDlg div li { + padding-bottom:.82em; +} +/* _________ Chord Builder Dialog _________ */ +.chordBuilderDlg { + right: 210px; + top: 70px; + width: 490px; + // backwards transition support + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +html .chordBuilderNarrow{ + width: 345px; +} +/* STANDARD appearance HTML for Help Section +-------------------------------- */ +.helpDlg { + font-size:.9em; +} +.normalHtml { + p, + ul, + ol { + margin-bottom:1em; + } + li { + list-style: disc outside none; + margin-left: 1em; + padding-bottom:.4em; + } + h3 { + font-size:1.2em; + font-weight:bold; + } +} +/* Reformat Dialog +------------------------------ */ +.reformatDlg { + right: 25%; + top: 100px; + width: 480px; + z-index: 3; +} +.instructions { + width: 28em; + padding:0 0 .7em; + color:#563324; +} +.instructions.small { + clear:both; + font-size:.8em; + display:block; + width: 35em; +} +html .reformatDlg textarea{ + height: 15em; +} + +/* postitioning the drop-down menus & arrows +-------------------------------------- */ +.layoutOptions { + left: 50px; + &:after, + &:before { + left:22%; + } +} + +.tuningOptions { + left:150px; +} + +#transposeOptions em { + color: #CCCCCC; + float: right; + font-size: 0.86em; +} + +.otherOptions { + left: 250px; +} +.helpOptions { + left: 320px; +} + +.hasSongbookLink { + .layoutOptions:after, + .layoutOptions:before { + left: 72%; + } + + .tuningOptions { + left: 250px; + } + + // OTHER + .otherOptions { + left: 300px; + &:after, + &:before { + left: 70%; + } + } + + // HELP + .helpOptions { + left: 340px; + &:after, + &:before { + left: 80%; + } + } + +} + + diff --git a/src/less/editor/ugsEditorPlus.song.less b/src/less/editor/ugsEditorPlus.song.less new file mode 100644 index 0000000..8443163 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.song.less @@ -0,0 +1,83 @@ +/* + * Document : ugsEditorPlus.song.css + * Author : Buz + * Description: Classes affecting song layout and style; Critical to Scriptasaurus presentation. + * Important! This should be the last file in the CSS bundle. + */ +.scalablePrintArea { + -moz-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + background-color: #fff; + border-right:solid 1px #888; + font-size: inherit; + box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); + + hgroup { + padding-bottom: .15in; + } +} + +/* Alternate Layouts: Hide Diagrams +-------------------------------- */ +html .ugsHideDiagrams { + .ugs-diagrams-wrap { + display: none; + } + .ugs-source-wrap { + margin-left: 0; + } +} + +/* Alternate Layouts: Chord Diagrams On Top: +-------------------------------- */ +html .diagramsOnTop { + .ugs-diagrams-wrap { + float: none; + width: auto; + } + .ugs-source-wrap { + margin-left: 0; + } +} +.ugsNoChords .ugs-source-wrap{ + margin-left: 0; +} + +/* Alternate Layouts: standard Two Column +------------------------------ */ +.diagramsOnSide { + .ugs-diagrams-wrap { + float: left; + width: 225px; + } + .ugs-source-wrap { + margin-left: 250px; + } +} +.liBtn, .liBtn * { + cursor: pointer; +} + +/* page widths +-------------------------------- */ +.pageWidth_letter .scalablePrintArea { + width: 8in; + padding:0.2in; + min-height:10.5in; +} +.pageWidth_a4 .scalablePrintArea { + width: 19cm; + padding:1cm; + min-height:28cm; +} +.pageWidth_screen .scalablePrintArea { + padding:20px; +} + +/* redundant rule to allow JS hook +-------------------------------- */ +/* NOTE: this should be last set of rules in this file! */ +// To prevent LESS compiler from removing them we need at least one rule, so using "zoom" +.scalablePrintArea .ugs-diagrams-wrap canvas{ zoom: 1;} +.scalablePrintArea .ugs-diagrams-wrap{ zoom: 1;} +.scalablePrintArea .ugs-source-wrap{ zoom: 1;} diff --git a/src/less/editor/ugsEditorPlus.themes.less b/src/less/editor/ugsEditorPlus.themes.less new file mode 100644 index 0000000..2274ea3 --- /dev/null +++ b/src/less/editor/ugsEditorPlus.themes.less @@ -0,0 +1,375 @@ +/* + * Document : ugsEditorPlus.themes.css + * Author : Buz + * Description: Alternative color schemes. + */ + +/* __________ Reverse __________ */ +.theme-reversed { + background-color: #000; + color: #FFF; + + pre { + color: #e9e9e9; + } + .scalablePrintArea{ + background-color: transparent; + h5, + h6 { + border-left-color: #444; + color: #69F; + } + } + .ugsChorus { + border-left-color: #333; + } + .ugsChords { + code { + color: #333; + em { + color: #F42; + } + } + + } + /* unique to the reversed theme we need to harden editor's UI */ + .subNav a:hover { + background-color: #888; + color: #000; + } + .overlay { + background-color: #4E1C07; + box-shadow: none; + color: #000; + } +} + +/* __________ Jelly Bean __________ */ +.theme-jellyBean { + pre { + color: inherit; + } + .scalablePrintArea { + color: #56A0A5; + font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; + hgroup { + color: #FF9417; + text-align: center; + } + h1 { + color: #D20770; + font-family: 'Peralta',cursive, sans-serif; + font-size: 2em; + text-shadow: 0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660; + } + h2 { + font-size: 1.1em; + } + h5, + h6 { + border-left-color: #F2E660; + color: #9C55ED; + font-family: inherit; + letter-spacing: 0.045em; + } + } + .ugsChorus { + border-left-color: #F2E660; + border-radius: 5px 0 0 5px; + } + .ugsChords { + code { + color: #333; + em { + color: #D20070; + } + } + } +} + +/* __________ Western __________ */ +.theme-western { + .scalablePrintArea{ + color: #88410A; + hgroup{ + color: #88410A; + font-family: 'Smokum',Arial, sans-serif; + text-align: center; + } + h1 { + color: #472B07; + font-family: inherit; + font-size: 3.3em; + text-shadow: 0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0; + } + h2{ + font-size: 1.7em; + } + h5, h6 { + border-left-color: #BED379; + color: #92A88C; + font-family: 'Smokum',Arial, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + } + } + .ugsChorus { + border-left-color: #BEC481; + border-radius: 5px 0 0 5px; + } + .ugs-source-wrap pre { + color: inherit; + } +} + +/* __________ Pumpkin (Halloween 1) __________ */ +.theme-pumpkin { + .scalablePrintArea { + color: #68391D; + hgroup{ + color: #B14623; + text-align: center; + } + h1 { + color: #D3770E; + font-family: 'Ranchers',Arial,sans-serif; + font-size: 3.2em; + line-height: 1.1; + text-shadow: 0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379; + } + h2{ + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.1em; + } + h5, h6 { + border-left-color: #BED379; + color: #FFC501; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #A0B74E; + border-radius: 5px 0 0 5px; + } + .ugsChords { + code em { + color: #FE9600; + } + } +} + +/* __________ Zombie (Halloween II) __________ */ +.theme-zombie { + .scalablePrintArea { + color: #798666; + hgroup{ + color: #902374; + text-align: center; + } + h1 { + color: #BED63A; + font-family: 'Creepster',cursive, sans-serif; + font-size: 3.2em; + line-height: 1.1; + text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04; + } + h2 { + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.1em; + text-shadow: 0.12em 0.13em 0 #DBDAE8; + } + h5, h6 { + border-left-color: #E4DCA4; + color: #798666; + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 1em; + text-shadow: 0.03em 0.07em 0 #BED63A; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #CDC693; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #DD1A52; + } +} + +/* __________ Frosty __________ */ +.theme-frosty { + .scalablePrintArea { + color: #154286; + hgroup{ + color: #6A97DB; + text-align: center; + } + h1 { + color: #D5E2F5; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 2.18em; + letter-spacing: 0.05em; + line-height: 1.1; + text-shadow: -0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; + } + h2 { + font-family: 'Ranchers',Arial,sans-serif; + font-size: 1.2em; + } + h5, h6 { + border-left-color: #E3F7F3; + color: #80B7B1; + font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-size: 1.4em; + font-style: normal; + padding: 0; + text-indent: 0.6em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #0896FE; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #0896FE; + } +} + +/* __________ Gruss vom Krampus __________ */ +/* +http://www.colourlovers.com/palette/1374491/Merry_Christmas%E2%98%83 +http://www.colourlovers.com/palette/510474/vintage_Christmas +*/ +.theme-krampus { + .scalablePrintArea { + color: #929867; + hgroup{ + color: #929867; + text-align: center; + } + h1 { + color: #A22C27; + font-family: 'Lobster',cursive, sans-serif; + font-size: 2.78em; + line-height: 1.1; + text-shadow: 0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621; + } + h2 { + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.2em; + text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; + } + h5, h6 { + border-left-color: #7B8055; + color: #A32C28; + font-family: 'Peralta',cursive, sans-serif; + font-size: 1.2em; + font-style: normal; + padding: 0; + text-indent: 0.6em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #B9C97E; + border-radius: 6px 0 0 6px; + } + .ugsChords code em { + color: #384030; + } +} + +/* __________ Notebook __________ */ +.theme-notebook { + .scalablePrintArea { + color: #443377; + font-family: 'Architects Daughter',Arial,sans-serif; + hgroup{ + color: #2E2ECC; + font-family: inherit; + text-align: center; + } + h1 { + border-color: #E4E4FF; + border-style: solid; + border-width: 1px 0; + color: #252537; + font-family: 'Permanent Marker',Arial,sans-serif; + font-size: 2em; + margin-bottom: 0.2em; + } + h2 { + border-bottom: 1px solid #E4E4FF; + font-size: 1.1em; + } + h5, h6 { + border-left-color: #626283; + color: #2E2ECC; + font-family: 'Permanent Marker',Arial,sans-serif; + font-size: 1.3em; + padding: 0; + text-indent: 0.7em; + } + } + .ugs-source-wrap pre { + color: inherit; + } + .ugsChorus { + border-left-color: #a4a0b2; + border-radius: 6px 0 0 6px; + } + .ugsChords code { + font-family: inherit; + } + /* + .ugsChords code em { + color: #384030; + } + */ +} + +/* __________ Just BLack __________ */ +.theme-justBlack { + .ugs-source-wrap { + h5, + h6 { + color: #000; + /* first choice: museo slab 500 */ + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; + } + } + .ugsChords code em { + color: #000; + font-weight: bold; + } + .scalablePrintArea hgroup, + .scalablePrintArea hgroup * { + /* first choice: museo slab 500 */ + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; + } + .scalablePrintArea hgroup{ + text-align: center; + } +} + diff --git a/src/less/ugsEditorPlus_merged.less b/src/less/ugsEditorPlus_merged.less new file mode 100644 index 0000000..8d2e08a --- /dev/null +++ b/src/less/ugsEditorPlus_merged.less @@ -0,0 +1,14 @@ +/*! UkeGeeks Songbook Editor page + * Author: Buz Carter + * Engine: LessCSS + */ + +@import 'editor/ugsEditorPlus.less'; +@import 'editor/ugsEditorPlus.arrowBox.less'; +@import 'editor/ugsEditorPlus.buttons.less'; +@import 'editor/ugsEditorPlus.chordBuilder.less'; +@import 'editor/ugsEditorPlus.menuBar.less'; +@import 'editor/ugsEditorPlus.overlays.less'; +@import 'editor/ugsEditorPlus.themes.less'; +@import 'editor/ugsEditorPlus.song.less'; +@import 'editor/ugsEditorPlus.aceEditor.less'; From b4c2cc9b1c14c34f8461103c1bfe599173cca0d8 Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Fri, 14 Nov 2014 10:50:08 -0800 Subject: [PATCH 5/5] rename LESS source directory (src/css to src/less); add mixins (lifted from Bootstrap) for gradients, box model, box-shadow, and transistions; --- css/ugsEditorPlus.merged.css | 1210 +++++++---------- css/ugsEditorPlus.min.css | 5 +- src/css/editor/ugsEditorPlus.aceEditor.less | 150 -- src/css/editor/ugsEditorPlus.arrowBox.less | 224 --- src/css/editor/ugsEditorPlus.buttons.less | 116 -- .../editor/ugsEditorPlus.chordBuilder.less | 327 ----- src/css/editor/ugsEditorPlus.less | 9 - src/css/editor/ugsEditorPlus.menuBar.less | 157 --- src/css/editor/ugsEditorPlus.overlays.less | 267 ---- src/css/editor/ugsEditorPlus.song.less | 83 -- src/css/editor/ugsEditorPlus.themes.less | 375 ----- src/less/editor/ugsEditorPlus.aceEditor.less | 8 +- src/less/editor/ugsEditorPlus.arrowBox.less | 14 +- src/less/editor/ugsEditorPlus.buttons.less | 29 +- .../editor/ugsEditorPlus.chordBuilder.less | 142 +- src/less/editor/ugsEditorPlus.less | 4 +- src/less/editor/ugsEditorPlus.menuBar.less | 215 +-- src/less/editor/ugsEditorPlus.overlays.less | 21 +- src/less/editor/ugsEditorPlus.song.less | 2 +- src/less/editor/ugsEditorPlus.themes.less | 2 +- src/less/mixins/gradients.less | 18 + src/less/mixins/vendor-prefixes.less | 76 ++ src/less/ugsEditorPlus_merged.less | 3 + 23 files changed, 809 insertions(+), 2648 deletions(-) delete mode 100644 src/css/editor/ugsEditorPlus.aceEditor.less delete mode 100644 src/css/editor/ugsEditorPlus.arrowBox.less delete mode 100644 src/css/editor/ugsEditorPlus.buttons.less delete mode 100644 src/css/editor/ugsEditorPlus.chordBuilder.less delete mode 100644 src/css/editor/ugsEditorPlus.less delete mode 100644 src/css/editor/ugsEditorPlus.menuBar.less delete mode 100644 src/css/editor/ugsEditorPlus.overlays.less delete mode 100644 src/css/editor/ugsEditorPlus.song.less delete mode 100644 src/css/editor/ugsEditorPlus.themes.less create mode 100644 src/less/mixins/gradients.less create mode 100644 src/less/mixins/vendor-prefixes.less diff --git a/css/ugsEditorPlus.merged.css b/css/ugsEditorPlus.merged.css index e7c68e4..f367e32 100644 --- a/css/ugsEditorPlus.merged.css +++ b/css/ugsEditorPlus.merged.css @@ -2,129 +2,112 @@ * Author: Buz Carter * Engine: LessCSS */ -/* - * Document : ugsEditorPlus - * Created on : July 2013 - * Author : Buz - * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. - */ -.salt_8873ySp8 { - color: #0ff; +.salt_oct14_880X7J { + color: #f00; } -/* - * Document : ugsEditorPlus.arrowBox.css - * Author : Buz - * Description: The menu boxes and their contents. - */ -/* Thanks to: cssarrowplease.com - -------------------------------- */ - .arrowBox { - background-color: rgba(0, 0, 0, 0.81); - border: 2px solid #fff; - border-radius: 10px; - color:#b3b3b3; - display: none; - position: fixed; - top: 60px; - width: 310px; - -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - z-index: 5; - } - .arrowBox:after, - .arrowBox:before { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - .arrowBox:after { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: #000; - border-width: 20px; - left: 50%; - margin-left: -20px; - } - .arrowBox:before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; - border-width: 23px; - left: 50%; - margin-left: -23px; - } - .arrowBoxContent{ - padding: 1em .6em .4em; - } - .arrowBoxContent + .arrowBoxContent{ - padding-top:0; - } - -/* --------------------------------------- */ -.enablePseudoSelects dt, -.enablePseudoSelects dd { +.arrowBox { + background-color: rgba(0,0,0,0.81); + border: 2px solid #fff; + border-radius: 10px; + color: #b3b3b3; + display: none; + position: fixed; + top: 60px; + width: 310px; + -moz-box-shadow: 3px 13px 9px rgba(0,0,0,0.5); + -webkit-box-shadow: 3px 13px 9px rgba(0,0,0,0.5); + box-shadow: 3px 13px 9px rgba(0,0,0,0.5); + z-index: 5; +} +.arrowBox:after, .arrowBox:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.arrowBox:after { + border-color: rgba(0,0,0,0); + border-bottom-color: #000; + border-width: 20px; + left: 50%; + margin-left: -20px; +} +.arrowBox:before { + border-color: rgba(255,255,255,0); + border-bottom-color: #fff; + border-width: 23px; + left: 50%; + margin-left: -23px; +} +.arrowBoxContent { + padding: 1em .6em .4em; +} +.arrowBoxContent + .arrowBoxContent { + padding-top: 0; +} +.enablePseudoSelects dt, .enablePseudoSelects dd { height: 3em; line-height: 1; margin: 0; padding: 0; } .enablePseudoSelects dd { - display:none; + display: none; left: 16.1em; position: relative; top: -3.1em; height: 0px; } -.enablePseudoSelects label{ - color: #E4E4E4; +.enablePseudoSelects label { + color: #e4e4e4; display: block; cursor: pointer; border: solid 1px transparent; border-radius: 7px; padding: 0.5em; } -.enablePseudoSelects label:hover{ - color:#fff; - background-color: #2A2A2A; +.enablePseudoSelects label:hover { + color: #fff; + background-color: #2a2a2a; border-color: #555; + -moz-box-shadow: 2px 2px 2px #000; + -webkit-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000; - } -.enablePseudoSelects label:hover em{ - color:#E4E4E4; +.enablePseudoSelects label:hover em { + color: #e4e4e4; } .enablePseudoSelects label em { - color: #898989; - float: right; - font-family: Arial; + color: #898989; + float: right; + font-family: Arial; } -.event-userSelecting label{ - color:#B9B9B9; +.event-userSelecting label { + color: #b9b9b9; } -.event-userSelecting label em{ - color:#3a3a3a; +.event-userSelecting label em { + color: #3a3a3a; } -html .active label{ +html .active label { background-color: #000; color: #fff; } -/* --------------------------------------- */ .pseudoSelect { position: absolute; - background-color: #3C3C3C; + background-color: #3c3c3c; border: solid 1px #555; border-radius: 7px; - box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); - color: #EFEFEF; + -moz-box-shadow: 2px 6px 6px rgba(0,0,0,0.53); + -webkit-box-shadow: 2px 6px 6px rgba(0,0,0,0.53); + box-shadow: 2px 6px 6px rgba(0,0,0,0.53); + color: #efefef; cursor: pointer; width: 17em; } -.pseudoSelect a{ +.pseudoSelect a { border: 2px solid transparent; border-radius: 10px; color: inherit; @@ -133,40 +116,39 @@ html .active label{ text-decoration: none; } .pseudoSelect li { - display: block; - float: none; - margin: 0; - padding: 0.1em; - text-align: inherit; + display: block; + float: none; + margin: 0; + padding: 0.1em; + text-align: inherit; } -.pseudoSelect li:hover{ +.pseudoSelect li:hover { color: #fff; } -.pseudoSelect li:hover a{ +.pseudoSelect li:hover a { background-color: #000; border-color: #676767; } .pseudoSelect .checked a { - background: url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a; - border-color: #C5C5C5; - color: #FFFFFF; - text-shadow:1px 2px 1px #000; -} - -/* our Checkboxes are a problem... --------------------------------- */ + background: url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a; + border-color: #c5c5c5; + color: #fff; + text-shadow: 1px 2px 1px #000; +} .checkboxBlock { border-top: 1px solid #575757; - box-shadow: 0 -1px 0 #000000; + -moz-box-shadow: 0 -1px 0 #000; + -webkit-box-shadow: 0 -1px 0 #000; + box-shadow: 0 -1px 0 #000; font-size: 0.81em; padding: 0.75em 0; } -.checkboxBlock label{ +.checkboxBlock label { padding-left: 0.5em; } -.checkBoxFinePrint{ +.checkBoxFinePrint { display: block; - font-size:.85em; + font-size: .85em; padding: 0.3em 0 0.5em 3.1em; } #commonChordList { @@ -175,124 +157,116 @@ html .active label{ margin-left: 1.5em; width: 15em; } - -/* list of links (duh) - * ...undoing some spill-over styles, when will I learn - -------------------------------- */ .linksList { - font-size: .85em; -} - .linksList li { - margin: 0; - padding: 0.1em; - text-align: left; - float: none; - } - .linksList a { - border-radius: 8px; - color: #B9B9B9; - display: block; - padding: 0.6em; - text-decoration: none; - } - .linksList a:hover{ - background-color: #000; - color:#fff; - } -/* Feedback message -- on UPDATE --------------------------------- */ + font-size: .85em; +} +.linksList li { + margin: 0; + padding: 0.1em; + text-align: left; + float: none; +} +.linksList a { + border-radius: 8px; + color: #b9b9b9; + display: block; + padding: 0.6em; + text-decoration: none; +} +.linksList a:hover { + background-color: #000; + color: #fff; +} .updateMessage { - background-color: #BAE5A7; - border: 1px solid #44A819; + background-color: #bae5a7; + border: 1px solid #44a819; border-radius: 4px 4px 4px 4px; - box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); - color: #43772D; + -moz-box-shadow: 0 0 4px rgba(255,190,40,0.8); + -webkit-box-shadow: 0 0 4px rgba(255,190,40,0.8); + box-shadow: 0 0 4px rgba(255,190,40,0.8); + color: #43772d; display: none; position: absolute; text-align: center; - text-shadow: 0 -1px rgba(255, 190, 40, 0.3); + text-shadow: 0 -1px rgba(255,190,40,0.3); width: 10em; } -.updateMessage em{ - border: 1px solid #66D836; +.updateMessage em { + border: 1px solid #66d836; border-radius: 3px 3px 3px 3px; + -moz-box-shadow: 0 0 3px #559277 inset; + -webkit-box-shadow: 0 0 3px #559277 inset; box-shadow: 0 0 3px #559277 inset; display: block; height: 100%; padding: 0.2em; } -/* - * Document : ugsEditorPlus.buttons.css - * Author : Buz - * Description: All editor's buttons and button-like links. - */ - -/* "base button" is rounded & gray with white text */ .baseBtn { background-color: #999; border: 1px solid #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; - color: #FFF; + color: #fff; cursor: pointer; font-size: inherit; font-weight: bold; padding: 0.2em 1em; text-align: center; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); - /* Remove underline in case this is applied to a link */ - + text-shadow: 0 1px 0 rgba(0,0,0,0.5); text-decoration: none; } .baseBtn:hover { background-color: #888; - /* Force colorin case this is applied to a link */ - color: #fff; } .blueBtn { background-color: #89b9e3; - background-image: -moz-linear-gradient(top, #89b9e3, #3d6bbb); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')"; - border-color: #3765B7; + background-image: -webkit-linear-gradient(top, #89b9e3 0%, #3d6bbb 100%); + background-image: -o-linear-gradient(top, #89b9e3 0%, #3d6bbb 100%); + background-image: linear-gradient(to bottom, #89b9e3 0%, #3d6bbb 100%); + background-repeat: repeat-x; +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89b9e3', endColorstr='#ff3d6bbb', GradientType=0); + border-color: #3765b7; text-shadow: #89b9e3 0px 1px 0, #3765b7 0 -1px 0; } .blueBtn:hover { background-color: #4c85e8; - background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; - text-shadow: #000000 0px 1px 0, #3765b7 0 -1px 0; -} - -/* orange */ + background-image: -webkit-linear-gradient(top, #4c85e8 0%, #2f5493 100%); + background-image: -o-linear-gradient(top, #4c85e8 0%, #2f5493 100%); + background-image: linear-gradient(to bottom, #4c85e8 0%, #2f5493 100%); + background-repeat: repeat-x; +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4c85e8', endColorstr='#ff2f5493', GradientType=0); + text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; +} .orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; - background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); - background: -moz-linear-gradient(top, #faa51a, #f47a20); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); + background-image: -webkit-linear-gradient(top, #faa51a 0%, #f47a20 100%); + background-image: -o-linear-gradient(top, #faa51a 0%, #f47a20 100%); + background-image: linear-gradient(to bottom, #faa51a 0%, #f47a20 100%); + background-repeat: repeat-x; +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffaa51a', endColorstr='#fff47a20', GradientType=0); text-shadow: #da7c0c 0px 1px 0, #faa51a 0 -1px 0; } .orange:hover { background: #f47c20; - background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); - background: -moz-linear-gradient(top, #f88e11, #f06015); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); + background-image: -webkit-linear-gradient(top, #f88e11 0%, #f06015 100%); + background-image: -o-linear-gradient(top, #f88e11 0%, #f06015 100%); + background-image: linear-gradient(to bottom, #f88e11 0%, #f06015 100%); + background-repeat: repeat-x; +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff88e11', endColorstr='#fff06015', GradientType=0); text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; } .orange:active { color: #fcd3a5; - background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); - background: -moz-linear-gradient(top, #f47a20, #faa51a); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); + background-image: -webkit-linear-gradient(top, #f47a20 0%, #faa51a 100%); + background-image: -o-linear-gradient(top, #f47a20 0%, #faa51a 100%); + background-image: linear-gradient(to bottom, #f47a20 0%, #faa51a 100%); + background-repeat: repeat-x; +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff47a20', endColorstr='#fffaa51a', GradientType=0); } - .btnBar { height: 30px; } @@ -301,25 +275,20 @@ html .active label{ font-size: 110%; margin-bottom: 5px; } -/* "Cancel"/"No Thanks" (subtle, alternate) buttons ------------------------------- */ -.alternateBtn, -.noThanks { - color: #3965B0; +.alternateBtn, .noThanks { + color: #3965b0; float: right; line-height: 33px; margin-right: 1.5em; text-decoration: none; } -.alternateBtn:hover, -.noThanks:hover { - color:#0646AD; +.alternateBtn:hover, .noThanks:hover { + color: #0646ad; } .noThanks { - background-color: #EFD292; + background-color: #efd292; border-radius: 6px; padding: 0 0.4em; - /* backwards transition support */ -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -ms-transition: background-color 0.4s ease; @@ -327,17 +296,10 @@ html .active label{ transition: background-color 0.4s ease; } .noThanks:hover { - background-color: #F2E2C1; + background-color: #f2e2c1; } -/* - * Document : ugsEditorPlus.chordBuilder.css - * Author : Buz - * Description: delicate positioning of chord builder's canvas and toolbox controls. - */ -/* Chord Builder's elements ------------------------------- */ .chordBuilderDlg input[type=text] { - border: 1px solid #D7D7D7; + border: 1px solid #d7d7d7; border-radius: 5px 5px 5px 5px; display: block; font-size: 30pt; @@ -354,10 +316,9 @@ html .active label{ white-space: -o-pre-wrap; word-wrap: break-word; } -/* ** canvas & editor stack */ html body .editorSurface { background-color: #fff; - border-radius: 5px ; + border-radius: 5px; font-size: 0.9em; height: 300px; margin: 5px auto; @@ -365,14 +326,13 @@ html body .editorSurface { padding: 0; position: relative; width: 462px; - -moz-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - -webkit-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; + -moz-box-shadow: 1px 2px 8px rgba(0,0,0,0.5) inset; + -webkit-box-shadow: 1px 2px 8px rgba(0,0,0,0.5) inset; + box-shadow: 1px 2px 8px rgba(0,0,0,0.5) inset; } -/* ** stacking order ** */ .editorSurface canvas { - border:none; - cursor:none; + border: none; + cursor: none; left: 0; position: absolute; top: 0; @@ -383,42 +343,39 @@ html body .editorSurface { #cdBldCursorCanvas { z-index: 2; } -.chordToolbox { - z-index: 3; -} .toolboxEdgeShadow { z-index: 4; } -/* -- toolbox and its contents -- */ -.chordToolbox{ +.chordToolbox { border: 0 solid #ccc; - background-color: #F0EEF0; - /*464646;*/ - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + background-color: #f0eef0; + -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.1); + -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.1); + box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 250px; position: absolute; top: 25px; width: 135px; - /* backwards transition support */ -webkit-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; -moz-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; -ms-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; -o-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; + z-index: 3; } -.chordToolbox.open, -.chordToolbox:hover { +.chordToolbox.open, .chordToolbox:hover { background-color: #fafafa; - border-color:#8C8C8C; - box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.3); + border-color: #8c8c8c; + -moz-box-shadow: 4px 6px 9px rgba(0,0,0,0.3); + -webkit-box-shadow: 4px 6px 9px rgba(0,0,0,0.3); + box-shadow: 4px 6px 9px rgba(0,0,0,0.3); } .chordToolbox.leftEdge { border-radius: 0 7px 7px 0; border-width: 2px 2px 2px 0; left: -110px; } -.chordToolbox.leftEdge.open, -.chordToolbox.leftEdge:hover { +.chordToolbox.leftEdge.open, .chordToolbox.leftEdge:hover { left: 0; } .chordToolbox.rightEdge { @@ -426,15 +383,13 @@ html body .editorSurface { border-width: 2px 0 2px 2px; right: -110px; } -.chordToolbox.rightEdge.open, -.chordToolbox.rightEdge:hover { +.chordToolbox.rightEdge.open, .chordToolbox.rightEdge:hover { right: 0; } -.chordToolboxInner{ +.chordToolboxInner { margin: 10px auto; width: 100px; } -/* forceed shadow over toolbox(es) */ .toolboxEdgeShadow { background-color: transparent; height: 255px; @@ -442,30 +397,31 @@ html body .editorSurface { top: 26px; width: 10px; } - -.toolboxEdgeShadow.leftEdge{ - box-shadow: 4px 0 6px rgba(0, 0, 0, 0.3); +.toolboxEdgeShadow.leftEdge { + -moz-box-shadow: 4px 0 6px rgba(0,0,0,0.3); + -webkit-box-shadow: 4px 0 6px rgba(0,0,0,0.3); + box-shadow: 4px 0 6px rgba(0,0,0,0.3); left: -10px; } -.toolboxEdgeShadow.rightEdge{ - box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3); +.toolboxEdgeShadow.rightEdge { + -moz-box-shadow: -4px 0 6px rgba(0,0,0,0.3); + -webkit-box-shadow: -4px 0 6px rgba(0,0,0,0.3); + box-shadow: -4px 0 6px rgba(0,0,0,0.3); right: -10px; } -/* --- */ .toolChip { background-color: #fafafa; border: 1px solid #fafafa; border-radius: 5px; - color: #C7681B; + color: #c7681b; cursor: pointer; display: block; - margin-bottom:8px; + margin-bottom: 8px; min-height: 70px; padding: 5px 0; text-align: center; text-decoration: none; width: 100%; - /* backwards transition support */ -webkit-transition: background-color 0.4s ease, border-color 0.4s ease; -moz-transition: background-color 0.4s ease, border-color 0.4s ease; -ms-transition: background-color 0.4s ease, border-color 0.4s ease; @@ -473,13 +429,20 @@ html body .editorSurface { transition: background-color 0.4s ease, border-color 0.4s ease; } .toolChip:hover { - background-color: #FEFEFE; - border: 1px solid #EDEDED; + background-color: #fefefe; + border: 1px solid #ededed; +} +.toolChip img, .toolChip .bigDot { + opacity: .75; +} +.toolChip:hover img, .toolChip:hover .bigDot { + opacity: 1; } -html .selected, -html .selected:hover { - border-color: #AAA73F; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); +html .selected, html .selected:hover { + border-color: #aaa73f; + -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); + -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); + box-shadow: 0 0 5px rgba(0,0,0,0.2); } #cdBldBtnFingerName { color: #806753; @@ -487,7 +450,7 @@ html .selected:hover { font-size: .67em; } .bigDot { - background-color: #E78333; + background-color: #e78333; border: 3px solid #973100; border-radius: 23px 23px 23px 23px; display: block; @@ -495,29 +458,20 @@ html .selected:hover { margin: 5px auto; width: 23px; } -/* some "active" button (hover) efx */ -.toolChip img, -.toolChip .bigDot { - opacity: .75; -} -.selected img, -.selected .bigDot, -.toolChip:hover img, -.toolChip:hover .bigDot { +.selected img, .selected .bigDot { opacity: 1; } -/* hand */ .fingerToolImage { background: url("../img/editor/hand.png") top center no-repeat; - display:block; + display: block; height: 83px; margin: 0 auto; position: relative; width: 88px; } .fingerDot { - background-color: #F9F340; - border:solid 2px #AF9607; + background-color: #f9f340; + border: solid 2px #af9607; border-radius: 8px; display: block; height: 8px; @@ -525,7 +479,7 @@ html .selected:hover { width: 8px; } .finger0 .fingerDot { - display:none; + display: none; } .finger1 .fingerDot { right: 22px; @@ -543,14 +497,10 @@ html .selected:hover { right: 1px; top: 44px; } -/* sliders (up/down arrows) */ -label[for=cdBldStartingFret], -html .arrowUp, -html .arrowDown{ +label[for=cdBldStartingFret], html .arrowUp, html .arrowDown { min-height: 52px; } -html .arrowUp, -html .arrowDown { +html .arrowUp, html .arrowDown { background-repeat: no-repeat; background-position: center 29px; } @@ -560,28 +510,24 @@ html .arrowUp { html .arrowDown { background-image: url("../img/editor/basic-down-arrow.png"); } -/* output area */ -.outputBox{ +.outputBox { max-height: 30em; overflow: hidden; -webkit-transition: max-height 0.8s ease; -moz-transition: max-height 0.8s ease; - -o-transition: max-height 0.8s ease; -ms-transition: max-height 0.8s ease; + -o-transition: max-height 0.8s ease; transition: max-height 0.8s ease; } -.outputBox.collapseOutput{ +.outputBox.collapseOutput { max-height: 0; } - -/* ________ colorized chordPro defintion ________ */ .chordPro-statement { - background-color:#f9f9f9; - border:solid 1px #bbb; + background-color: #f9f9f9; + border: solid 1px #bbb; color: #999; font-family: Consolas, 'courier new', monospace; - /* font-size: 14px; */ - padding:1em; + padding: 1em; } .chordPro-keyword { color: #8e7cc3; @@ -591,111 +537,90 @@ html .arrowDown { } .chordPro-number { color: #e69138; - font-weight:bold; + font-weight: bold; } .chordPro-string { - background-color: #EDF7E6; + background-color: #edf7e6; color: #38761d; - font-weight:bold; + font-weight: bold; } -/* ________ Chord Chooser (List) ________ */ -.ugsChordChooser{ +.ugsChordChooser { background-color: #eed18e; border-radius: 10px; - color: #551d00; - /* #f4e19d; */ + color: #551d00; font-size: 14pt; max-height: 17em; min-height: 10em; overflow-y: auto; padding: .1em 0; } -.ugsChordChooser li{ +.ugsChordChooser li { background-color: #bc9350; border-radius: 6px; cursor: pointer; margin: 0.5em; padding: 0.5em; - /* backwards transition support */ -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -ms-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; } -.ugsChordChooser li:hover{ +.ugsChordChooser li:hover { background-color: #99512c; - color: #f4e19d; - /* #ffdb5b; */ - text-shadow: 0px 2px 0px #551D00; + color: #f4e19d; + text-shadow: 0px 2px 0px #551d00; } -.ugsChordChooser .newChord{ +.ugsChordChooser .newChord { background-color: #b2612d; color: #551d00; font-weight: bold; } -.ugsChordChooser .deleteChord{ +.ugsChordChooser .deleteChord { background: url("../img/editor/delete-btn.png") right center no-repeat; display: block; float: right; height: 30px; opacity: 0; width: 36px; - /* backwards transition support */ -webkit-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease; -ms-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } -.ugsChordChooser li:hover .deleteChord{ +.ugsChordChooser li:hover .deleteChord { opacity: 1; } .ugsChordChooser canvas { float: right; margin-right: 10px; } -/* - * Document : ugsEditorPlus.menuBar.css - * Author : Buz - * Description: The top main application menu bar. - */ -/** - * Help on hiding the select scroll bars: - * http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element - * @import url(http://fonts.googleapis.com/css?family=Peralta); - *-------------- */ -html, +html, body { + margin: 0; + padding: 0; +} body { - margin: 0; - padding: 0; - } - body { - position:relative; - padding-top: 40px; - } - .editableSongPage{ - background-color:#EDECEA; - } -/* LOGO --------------------------------- */ + position: relative; + padding-top: 40px; +} +.editableSongPage { + background-color: #edecea; +} .ugsLogo { - color: #F2A848; + color: #f2a848; font-family: 'Peralta', cursive; font-size: 16px; font-weight: normal; position: absolute; right: 1em; - text-shadow: 1px 1px #332222; + text-shadow: 1px 1px #322; } - -/* App --------------------------------- */ .ugsAppMenuBar { background: #933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x; - -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); + -moz-box-shadow: 0 5px 8px rgba(0,0,0,0.65); + -webkit-box-shadow: 0 5px 8px rgba(0,0,0,0.65); + box-shadow: 0 5px 8px rgba(0,0,0,0.65); border-top: 1px solid #84623c; border-bottom: 1px solid #240e01; font: 17px/38px Helvetica, Arial; @@ -725,7 +650,7 @@ body { outline: 0 none; padding: 0 15px 0 5px; text-decoration: none; - text-shadow: 1px 2px 0 rgba(86, 3, 5, 0.95); + text-shadow: 1px 2px 0 rgba(86,3,5,0.95); } .ugsAppMenuBar > ul > li > a:hover { border-color: #600000; @@ -738,10 +663,8 @@ body { background-color: #451212; background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; color: #fef5e3; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); + text-shadow: 0 1px 1px rgba(0,0,0,0.5); } -/* Icons/Sprits --------------------------------- */ .ugsAppMenuBar > ul > li > a span { background-image: url("../img/editor/editorSprite.png"); background-repeat: no-repeat; @@ -753,88 +676,72 @@ body { .navSong span { background-position: -75px 0px; } -.navSong.active span, -.navSong a:hover span { +.navSong.active span, .navSong a:hover span { background-position: -75px -50px; } .navInstruments span { background-position: -50px 0px; } -.navInstruments.active span, -.navInstruments a:hover span { +.navInstruments.active span, .navInstruments a:hover span { background-position: -50px -50px; } .navTranspose span { background-position: -25px 0px; } -.navTranspose.active span, -.navTranspose a:hover span { +.navTranspose.active span, .navTranspose a:hover span { background-position: -25px -50px; } .navDiagrams span { background-position: 0px 0px; } -.navDiagrams.active span, -.navDiagrams a:hover span { +.navDiagrams.active span, .navDiagrams a:hover span { background-position: 0px -50px; } .navLayout span { background-position: -100px 0px; } -.navLayout.active span, -.navLayout a:hover span { +.navLayout.active span, .navLayout a:hover span { background-position: -100px -50px; } .navColors span { background-position: -125px 0px; } -.navColors.active span, -.navColors a:hover span { +.navColors.active span, .navColors a:hover span { background-position: -125px -50px; } .navZoom span { background-position: -150px 0px; } -.navZoom.active span, -.navZoom a:hover span { +.navZoom.active span, .navZoom a:hover span { background-position: -150px -50px; } .navEdit span { background-position: -175px 0px; } -.navEdit.active span, -.navEdit a:hover span { +.navEdit.active span, .navEdit a:hover span { background-position: -175px -50px; } .navOptions span { background-position: -200px 0px; } -.navOptions.active span, -.navOptions a:hover span { +.navOptions.active span, .navOptions a:hover span { background-position: -200px -50px; } -/* - * Document : ugsEditorPlus.overlays.css - * Author : Buz - * Description: Generic and use-spedific Overlay/Dialog box elements. - */ -/* FLOATIN EDITOR --------------------------------- */ .overlay { - position:fixed; - top:45px; - right:20px; - background-color: #2B1100; - background-color: rgba(30, 11, 0, 0.75); - -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + position: fixed; + top: 45px; + right: 20px; + background-color: #2b1100; + background-color: rgba(30,11,0,0.75); + -moz-box-shadow: 1px 10px 20px rgba(0,0,0,0.85); + -webkit-box-shadow: 1px 10px 20px rgba(0,0,0,0.85); + box-shadow: 1px 10px 20px rgba(0,0,0,0.85); -moz-border-radius: 22px; -webkit-border-radius: 22px; border-radius: 22px; padding: 10px; width: 490px; - z-index:0; + z-index: 0; } .overlay > div { background: url("../img/editor/woodChip.png") repeat scroll 0 0 transparent; @@ -842,18 +749,13 @@ body { overflow: hidden; padding: 10px; } -/* MOVED FROM PAGE: SECTION 4 ------------------------------- */ .isHidden { - display:none; + display: none; } -/* Form inputs, ------------------------------------ */ -.overlay select{ +.overlay select { font-size: 1.1em; } -.overlay input[type=text], -.overlay input[type=password] { +.overlay input[type=text], .overlay input[type=password] { display: block; font-size: 1.2em; margin-bottom: .4em; @@ -866,45 +768,39 @@ body { line-height: 1.25; padding-left: .3em; white-space: nowrap; - white-space:pre; - overflow:scroll; - height:525px; + white-space: pre; + overflow: scroll; + height: 525px; width: 98%; } -.overlay input[type=text], -.overlay input[type=password], -.overlay textarea { - background-color: rgba(255, 255, 255, 0.7); - border: solid 1px #E1B166; +.overlay input[type=text], .overlay input[type=password], .overlay textarea { + background-color: rgba(255,255,255,0.7); + border: solid 1px #e1b166; max-width: 100%; max-height: 100%; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; - -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; transition: background-color 500ms linear; } -.overlay input[type=text]:hover, -.overlay input[type=password]:hover, -.overlay textarea:hover { - background-color:rgba(255, 255, 200, 0.7); - border-color:#444; -} -.overlay input[type=text]:focus, -.overlay input[type=password]:focus, -.overlay textarea:focus { - background-color:rgba(255, 255, 255, 0.9); - border-color: #6C280C; - -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); - box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); +.overlay input[type=text]:hover, .overlay input[type=password]:hover, .overlay textarea:hover { + background-color: rgba(255,255,200,0.7); + border-color: #444; +} +.overlay input[type=text]:focus, .overlay input[type=password]:focus, .overlay textarea:focus { + background-color: rgba(255,255,255,0.9); + border-color: #6c280c; + -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3); + box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3); } .overlay h3 { background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; - border-bottom: 1px solid #240E01; + border-bottom: 1px solid #240e01; border-radius: 12px 12px 0 0; - border-top: 1px solid #84623C; - color: #F4E19F; + border-top: 1px solid #84623c; + color: #f4e19f; font-size: 22px; height: 37px; line-height: 37px; @@ -933,27 +829,25 @@ body { top: 18px; width: 20px; } -/* _________ Specific Overlays _________ */ html .helpDlg { - top:75px; - right:70px; + top: 75px; + right: 70px; width: 300px; - z-index:1; + z-index: 1; } html .optionsDlg { - top:100px; - right:210px; + top: 100px; + right: 210px; width: 380px; - z-index:2; + z-index: 2; } -.optionsDlg div{ - font-size:.91em; +.optionsDlg div { + font-size: .91em; } -.optionsDlg div li{ - padding-bottom:.82em; +.optionsDlg div li { + padding-bottom: .82em; } -/* _________ Chord Builder Dialog _________ */ -.chordBuilderDlg{ +.chordBuilderDlg { right: 210px; top: 70px; width: 490px; @@ -963,31 +857,25 @@ html .optionsDlg { -o-transition: width 0.6s ease; transition: width 0.6s ease; } -html .chordBuilderNarrow{ +html .chordBuilderNarrow { width: 345px; } -/* STANDARD appearance HTML for Help Section --------------------------------- */ -.helpDlg{ - font-size:.9em; +.helpDlg { + font-size: .9em; } -.normalHtml p, -.normalHtml ul, -.normalHtml ol { - margin-bottom:1em; +.normalHtml p, .normalHtml ul, .normalHtml ol { + margin-bottom: 1em; } .normalHtml li { list-style: disc outside none; margin-left: 1em; - padding-bottom:.4em; + padding-bottom: .4em; } .normalHtml h3 { - font-size:1.2em; - font-weight:bold; + font-size: 1.2em; + font-weight: bold; } -/* Reformat Dialog ------------------------------- */ -.reformatDlg{ +.reformatDlg { right: 25%; top: 100px; width: 480px; @@ -995,33 +883,29 @@ html .chordBuilderNarrow{ } .instructions { width: 28em; - padding:0 0 .7em; - color:#563324; + padding: 0 0 .7em; + color: #563324; } .instructions.small { - clear:both; - font-size:.8em; - display:block; + clear: both; + font-size: .8em; + display: block; width: 35em; } -html .reformatDlg textarea{ +html .reformatDlg textarea { height: 15em; } -/* postitioning the drop-down menus & arrows --------------------------------------- */ -.layoutOptions{ +.layoutOptions { left: 50px; } -.layoutOptions:after, -.layoutOptions:before { - left:22%; +.layoutOptions:after, .layoutOptions:before { + left: 22%; } - -.tuningOptions{ - left:150px; +.tuningOptions { + left: 150px; } #transposeOptions em { - color: #CCCCCC; + color: #ccc; float: right; font-size: 0.86em; } @@ -1031,412 +915,354 @@ html .reformatDlg textarea{ .helpOptions { left: 320px; } -.hasSongbookLink .layoutOptions:after, -.hasSongbookLink .layoutOptions:before { - left: 72%; +.hasSongbookLink .layoutOptions:after, .hasSongbookLink .layoutOptions:before { + left: 72%; } .hasSongbookLink .tuningOptions { - left: 250px; + left: 250px; } .hasSongbookLink .otherOptions { - left: 300px; + left: 300px; } -.hasSongbookLink .otherOptions:after, -.hasSongbookLink .otherOptions:before { - left: 70%; +.hasSongbookLink .otherOptions:after, .hasSongbookLink .otherOptions:before { + left: 70%; } .hasSongbookLink .helpOptions { - left: 340px; -} -.hasSongbookLink .helpOptions:after, -.hasSongbookLink .helpOptions:before { - left: 80%; -} -/* - * Document : ugsEditorPlus.themes.css -* Author : Buz -* Description: Alternative color schemes. -*/ - -/* __________ Reverse __________ */ - + left: 340px; +} +.hasSongbookLink .helpOptions:after, .hasSongbookLink .helpOptions:before { + left: 80%; +} .theme-reversed { background-color: #000; - color: #FFF; - /* unique to the reversed theme we need to harden editor's UI */ + color: #fff; } .theme-reversed pre { - color: #e9e9e9; + color: #e9e9e9; } -.theme-reversed .scalablePrintArea{ +.theme-reversed .scalablePrintArea { background-color: transparent; } -.theme-reversed .scalablePrintArea h5, -.theme-reversed .scalablePrintArea h6 { - border-left-color: #444; - color: #69F; +.theme-reversed .scalablePrintArea h5, .theme-reversed .scalablePrintArea h6 { + border-left-color: #444; + color: #69f; } .theme-reversed .ugsChorus { - border-left-color: #333; + border-left-color: #333; } .theme-reversed .ugsChords code { color: #333; } .theme-reversed .ugsChords code em { - color: #F42; + color: #f42; } .theme-reversed .subNav a:hover { background-color: #888; color: #000; } .theme-reversed .overlay { - background-color: #4E1C07; + background-color: #4e1c07; + -moz-box-shadow: none; + -webkit-box-shadow: none; box-shadow: none; color: #000; } - -/* __________ Jelly Bean __________ */ .theme-jellyBean pre { - color: inherit; + color: inherit; } -.theme-jellyBean .scalablePrintArea{ - color: #56A0A5; +.theme-jellyBean .scalablePrintArea { + color: #56a0a5; font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; } .theme-jellyBean .scalablePrintArea hgroup { - color: #FF9417; + color: #ff9417; text-align: center; } .theme-jellyBean .scalablePrintArea h1 { - color: #D20770; - font-family: 'Peralta',cursive, sans-serif; + color: #d20770; + font-family: 'Peralta', cursive, sans-serif; font-size: 2em; - text-shadow: 0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660; + text-shadow: 0.03125em 0.0625em 0 #fff, 0.09375em 0.125em 0 #f2e660; } .theme-jellyBean .scalablePrintArea h2 { font-size: 1.1em; } -.theme-jellyBean .scalablePrintArea h5, -.theme-jellyBean .scalablePrintArea h6 { - border-left-color: #F2E660; - color: #9C55ED; - font-family: inherit; - letter-spacing: 0.045em; +.theme-jellyBean .scalablePrintArea h5, .theme-jellyBean .scalablePrintArea h6 { + border-left-color: #f2e660; + color: #9c55ed; + font-family: inherit; + letter-spacing: 0.045em; } .theme-jellyBean .ugsChorus { - border-left-color: #F2E660; - border-radius: 5px 0 0 5px; + border-left-color: #f2e660; + border-radius: 5px 0 0 5px; } .theme-jellyBean .ugsChords code { color: #333; } .theme-jellyBean .ugsChords code em { - color: #D20070; + color: #d20070; } - -/* __________ Western __________ */ - -.theme-western .scalablePrintArea{ - color: #88410A; +.theme-western .scalablePrintArea { + color: #88410a; } -.theme-western .scalablePrintArea hgroup{ - color: #88410A; - font-family: 'Smokum',Arial, sans-serif; +.theme-western .scalablePrintArea hgroup { + color: #88410a; + font-family: 'Smokum', Arial, sans-serif; text-align: center; } .theme-western .scalablePrintArea h1 { - color: #472B07; + color: #472b07; font-family: inherit; font-size: 3.3em; - text-shadow: 0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0; + text-shadow: 0.011em 0.037em 0 #fff, 0.055em 0.07em 0 #e5dcc0; } -.theme-western .scalablePrintArea h2{ +.theme-western .scalablePrintArea h2 { font-size: 1.7em; } -.theme-western .scalablePrintArea h5, -.theme-western .scalablePrintArea h6 { - border-left-color: #BED379; - color: #92A88C; - font-family: 'Smokum',Arial, sans-serif; +.theme-western .scalablePrintArea h5, .theme-western .scalablePrintArea h6 { + border-left-color: #bed379; + color: #92a88c; + font-family: 'Smokum', Arial, sans-serif; font-size: 1.4em; font-style: normal; padding: 0; text-indent: 1em; } .theme-western .ugsChorus { - border-left-color: #BEC481; - border-radius: 5px 0 0 5px; + border-left-color: #bec481; + border-radius: 5px 0 0 5px; } .theme-western .ugs-source-wrap pre { color: inherit; } - -/* __________ Pumpkin (Halloween 1) __________ */ - .theme-pumpkin .scalablePrintArea { - color: #68391D; + color: #68391d; } -.theme-pumpkin .scalablePrintArea hgroup{ - color: #B14623; +.theme-pumpkin .scalablePrintArea hgroup { + color: #b14623; text-align: center; } .theme-pumpkin .scalablePrintArea h1 { - color: #D3770E; - font-family: 'Ranchers',Arial,sans-serif; + color: #d3770e; + font-family: 'Ranchers', Arial, sans-serif; font-size: 3.2em; line-height: 1.1; - text-shadow: 0.064em 0.044em 0 #edf8ce, -0.037em 0.044em 0 #edf8ce, -0.074em 0.094em 0 #bed379, 0.074em 0.094em 0 #bed379; + text-shadow: 0.064em 0.044em 0 #edf8ce, -0.037em 0.044em 0 #edf8ce, -0.074em .094em 0 #bed379, 0.074em .094em 0 #bed379; } -.theme-pumpkin .scalablePrintArea h2{ - font-family: 'Cherry Cream Soda',cursive, sans-serif; +.theme-pumpkin .scalablePrintArea h2 { + font-family: 'Cherry Cream Soda', cursive, sans-serif; font-size: 1.1em; } -.theme-pumpkin .scalablePrintArea h5, -.theme-pumpkin .scalablePrintArea h6 { - border-left-color: #BED379; - color: #FFC501; - font-family: 'Cherry Cream Soda',cursive, sans-serif; +.theme-pumpkin .scalablePrintArea h5, .theme-pumpkin .scalablePrintArea h6 { + border-left-color: #bed379; + color: #ffc501; + font-family: 'Cherry Cream Soda', cursive, sans-serif; font-size: 1.4em; font-style: normal; padding: 0; text-indent: 1em; } .theme-pumpkin .ugs-source-wrap pre { - color: inherit; + color: inherit; } .theme-pumpkin .ugsChorus { - border-left-color: #A0B74E; - border-radius: 5px 0 0 5px; + border-left-color: #a0b74e; + border-radius: 5px 0 0 5px; } .theme-pumpkin .ugsChords code em { - color: #FE9600; + color: #fe9600; } -/* __________ Zombie (Halloween II) __________ */ - .theme-zombie .scalablePrintArea { color: #798666; } -.theme-zombie .scalablePrintArea hgroup{ +.theme-zombie .scalablePrintArea hgroup { color: #902374; text-align: center; } .theme-zombie .scalablePrintArea h1 { - color: #BED63A; - font-family: 'Creepster',cursive, sans-serif; + color: #bed63a; + font-family: 'Creepster', cursive, sans-serif; font-size: 3.2em; line-height: 1.1; - text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9eb036, -0.042em -0.014em 0 #8f2472, 0.087em 0.074em 0 #8f2472, -0.074em 0.094em 0 #ca4f04, 0.074em 0.174em 0 #ca4f04; + text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9eb036, -0.042em -0.014em 0 #8f2472, 0.087em 0.074em 0 #8f2472, -0.074em 0.094em 0 #ca4f04, 0.074em 0.174em 0 #ca4f04; } .theme-zombie .scalablePrintArea h2 { - font-family: 'Cherry Cream Soda',cursive, sans-serif; + font-family: 'Cherry Cream Soda', cursive, sans-serif; font-size: 1.1em; - text-shadow: 0.12em 0.13em 0 #DBDAE8; + text-shadow: 0.12em 0.13em 0 #dbdae8; } -.theme-zombie .scalablePrintArea h5, -.theme-zombie .scalablePrintArea h6 { - border-left-color: #E4DCA4; +.theme-zombie .scalablePrintArea h5, .theme-zombie .scalablePrintArea h6 { + border-left-color: #e4dca4; color: #798666; - font-family: 'Peralta',cursive, sans-serif; + font-family: 'Peralta', cursive, sans-serif; font-size: 1.4em; font-style: normal; padding: 0; text-indent: 1em; - text-shadow: 0.03em 0.07em 0 #BED63A; + text-shadow: 0.03em 0.07em 0 #bed63a; } .theme-zombie .ugs-source-wrap pre { - color: inherit; + color: inherit; } .theme-zombie .ugsChorus { - border-left-color: #CDC693; - border-radius: 6px 0 0 6px; + border-left-color: #cdc693; + border-radius: 6px 0 0 6px; } .theme-zombie .ugsChords code em { - color: #DD1A52; + color: #dd1a52; } -/* __________ Frosty __________ */ - .theme-frosty .scalablePrintArea { color: #154286; } -.theme-frosty .scalablePrintArea hgroup{ - color: #6A97DB; +.theme-frosty .scalablePrintArea hgroup { + color: #6a97db; text-align: center; } .theme-frosty .scalablePrintArea h1 { - color: #D5E2F5; - font-family: 'Cherry Cream Soda',cursive, sans-serif; + color: #d5e2f5; + font-family: 'Cherry Cream Soda', cursive, sans-serif; font-size: 2.18em; letter-spacing: 0.05em; line-height: 1.1; - text-shadow: -0.064em -0.034em 0 #ffffff, 0.008em 0.008em 0 #a3e3d7, 0.009em -0.009em 0 #a3e3d7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183d, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; + text-shadow: -0.064em -0.034em 0 #fff, 0.008em 0.008em 0 #a3e3d7, 0.009em -0.009em 0 #a3e3d7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183d, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; } .theme-frosty .scalablePrintArea h2 { - font-family: 'Ranchers',Arial,sans-serif; + font-family: 'Ranchers', Arial, sans-serif; font-size: 1.2em; } -.theme-frosty .scalablePrintArea h5, -.theme-frosty .scalablePrintArea h6 { - border-left-color: #E3F7F3; - color: #80B7B1; - font-family: 'Cherry Cream Soda',cursive, sans-serif; +.theme-frosty .scalablePrintArea h5, .theme-frosty .scalablePrintArea h6 { + border-left-color: #e3f7f3; + color: #80b7b1; + font-family: 'Cherry Cream Soda', cursive, sans-serif; font-size: 1.4em; font-style: normal; padding: 0; text-indent: 0.6em; } .theme-frosty .ugs-source-wrap pre { - color: inherit; + color: inherit; } .theme-frosty .ugsChorus { - border-left-color: #0896FE; - border-radius: 6px 0 0 6px; + border-left-color: #0896fe; + border-radius: 6px 0 0 6px; } .theme-frosty .ugsChords code em { - color: #0896FE; -} -/* __________ Gruss vom Krampus __________ */ - -/* -http://www.colourlovers.com/palette/1374491/Merry_Christmas%E2%98%83 -http://www.colourlovers.com/palette/510474/vintage_Christmas -*/ + color: #0896fe; +} .theme-krampus .scalablePrintArea { color: #929867; } -.theme-krampus .scalablePrintArea hgroup{ +.theme-krampus .scalablePrintArea hgroup { color: #929867; text-align: center; } .theme-krampus .scalablePrintArea h1 { - color: #A22C27; - font-family: 'Lobster',cursive, sans-serif; + color: #a22c27; + font-family: 'Lobster', cursive, sans-serif; font-size: 2.78em; line-height: 1.1; - text-shadow: 0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621; + text-shadow: 0.036em 0.04em 0 #fcece8, 0.05em 0.08em 0 #4f2621, 0.02em 0.08em 0 #4f2621; } .theme-krampus .scalablePrintArea h2 { - font-family: 'Peralta',cursive, sans-serif; + font-family: 'Peralta', cursive, sans-serif; font-size: 1.2em; - text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; + text-shadow: 0.03em 0.03em 0 #fff, 0.08em 0.1em 0 #ebd592; } -.theme-krampus .scalablePrintArea h5, -.theme-krampus .scalablePrintArea h6 { - border-left-color: #7B8055; - color: #A32C28; - font-family: 'Peralta',cursive, sans-serif; +.theme-krampus .scalablePrintArea h5, .theme-krampus .scalablePrintArea h6 { + border-left-color: #7b8055; + color: #a32c28; + font-family: 'Peralta', cursive, sans-serif; font-size: 1.2em; font-style: normal; padding: 0; text-indent: 0.6em; } .theme-krampus .ugs-source-wrap pre { - color: inherit; + color: inherit; } .theme-krampus .ugsChorus { - border-left-color: #B9C97E; - border-radius: 6px 0 0 6px; + border-left-color: #b9c97e; + border-radius: 6px 0 0 6px; } .theme-krampus .ugsChords code em { - color: #384030; -} -/* __________ Notebook __________ */ -.theme-notebook { - /* - .ugsChords code em { - color: #384030; - } - */ + color: #384030; } .theme-notebook .scalablePrintArea { - color: #443377; - font-family: 'Architects Daughter',Arial,sans-serif; + color: #437; + font-family: 'Architects Daughter', Arial, sans-serif; } -.theme-notebook .scalablePrintArea hgroup{ - color: #2E2ECC; +.theme-notebook .scalablePrintArea hgroup { + color: #2e2ecc; font-family: inherit; text-align: center; } .theme-notebook .scalablePrintArea h1 { - border-color: #E4E4FF; + border-color: #e4e4ff; border-style: solid; border-width: 1px 0; color: #252537; - font-family: 'Permanent Marker',Arial,sans-serif; + font-family: 'Permanent Marker', Arial, sans-serif; font-size: 2em; margin-bottom: 0.2em; } .theme-notebook .scalablePrintArea h2 { - border-bottom: 1px solid #E4E4FF; + border-bottom: 1px solid #e4e4ff; font-size: 1.1em; } -.theme-notebook .scalablePrintArea h5, -.theme-notebook .scalablePrintArea h6 { +.theme-notebook .scalablePrintArea h5, .theme-notebook .scalablePrintArea h6 { border-left-color: #626283; - color: #2E2ECC; - font-family: 'Permanent Marker',Arial,sans-serif; + color: #2e2ecc; + font-family: 'Permanent Marker', Arial, sans-serif; font-size: 1.3em; padding: 0; text-indent: 0.7em; } .theme-notebook .ugs-source-wrap pre { - color: inherit; + color: inherit; } .theme-notebook .ugsChorus { - border-left-color: #a4a0b2; - border-radius: 6px 0 0 6px; + border-left-color: #a4a0b2; + border-radius: 6px 0 0 6px; } .theme-notebook .ugsChords code { - font-family: inherit; -} -/* __________ Just BLack __________ */ - -.theme-justBlack .ugs-source-wrap h5, -.theme-justBlack .ugs-source-wrap h6 { - color: #000; - /* first choice: museo slab 500 */ - font-family: 'Bree Serif', Arial, sans-serif; - font-style: normal; -} -.theme-justBlack .ugsChords code em{ - color: #000; + font-family: inherit; +} +.theme-justBlack .ugs-source-wrap h5, .theme-justBlack .ugs-source-wrap h6 { + color: #000; + font-family: 'Bree Serif', Arial, sans-serif; + font-style: normal; +} +.theme-justBlack .ugsChords code em { + color: #000; font-weight: bold; } -.theme-justBlack .scalablePrintArea hgroup, -.theme-justBlack .scalablePrintArea hgroup *{ - /* first choice: museo slab 500 */ +.theme-justBlack .scalablePrintArea hgroup, .theme-justBlack .scalablePrintArea hgroup * { font-family: 'Bree Serif', Arial, sans-serif; font-style: normal; } -.theme-justBlack .scalablePrintArea hgroup{ +.theme-justBlack .scalablePrintArea hgroup { text-align: center; } -/* - * Document : ugsEditorPlus.song.css - * Author : Buz - * Description: Classes affecting song layout and style; Critical to Scriptasaurus presentation. - * Important! This should be the last file in the CSS bundle. - */ - .scalablePrintArea { - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - background-color: #fff; - border-right:solid 1px #888; - font-size: inherit; - box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); - } - .scalablePrintArea hgroup{ - padding-bottom: .15in; - } -/* Alternate Layouts: Hide Diagrams --------------------------------- */ +.scalablePrintArea { + -moz-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + background-color: #fff; + border-right: solid 1px #888; + font-size: inherit; + -moz-box-shadow: 3px 0 9px rgba(0,0,0,0.4); + -webkit-box-shadow: 3px 0 9px rgba(0,0,0,0.4); + box-shadow: 3px 0 9px rgba(0,0,0,0.4); +} +.scalablePrintArea hgroup { + padding-bottom: .15in; +} html .ugsHideDiagrams .ugs-diagrams-wrap { - display:none; + display: none; } html .ugsHideDiagrams .ugs-source-wrap { margin-left: 0; } -/* Alternate Layouts: Chord Diagrams On Top: --------------------------------- */ html .diagramsOnTop .ugs-diagrams-wrap { float: none; width: auto; @@ -1444,144 +1270,128 @@ html .diagramsOnTop .ugs-diagrams-wrap { html .diagramsOnTop .ugs-source-wrap { margin-left: 0; } -.ugsNoChords .ugs-source-wrap{ +.ugsNoChords .ugs-source-wrap { margin-left: 0; } -/* Alternate Layouts: standard Two Column ------------------------------- */ .diagramsOnSide .ugs-diagrams-wrap { - float:left; - width:225px; + float: left; + width: 225px; } .diagramsOnSide .ugs-source-wrap { - margin-left:250px; + margin-left: 250px; } -.liBtn, -.liBtn * { +.liBtn, .liBtn * { cursor: pointer; } -/* page widths --------------------------------- */ .pageWidth_letter .scalablePrintArea { width: 8in; - padding:0.2in; - min-height:10.5in; + padding: 0.2in; + min-height: 10.5in; } .pageWidth_a4 .scalablePrintArea { width: 19cm; - padding:1cm; - min-height:28cm; + padding: 1cm; + min-height: 28cm; } .pageWidth_screen .scalablePrintArea { - padding:20px; + padding: 20px; } -/* redundant rule to allow JS hook --------------------------------- */ -/* NOTE: this should be last set of rules in this file! */ .scalablePrintArea .ugs-diagrams-wrap canvas { - zoom: 1; + zoom: 1; } .scalablePrintArea .ugs-diagrams-wrap { - zoom: 1; + zoom: 1; } .scalablePrintArea .ugs-source-wrap { - zoom: 1; + zoom: 1; } -/* - * Document : ugsEditorPlus.aceEditor.css - * Author : Buz - * Description: Ace WYSIWYG Editor - */ -.aceEditorActive, -.aceEditorActive body { +.aceEditorActive, .aceEditorActive body { overflow: hidden; height: 100%; width: 100%; margin: 0; padding: 0; } -/* using jQuery instead: .aceEditorActive #aceEditor */ -.aceEditorActive #aceHeader{ +.aceEditorActive #aceHeader { display: block; } -.aceEditorActive .ugsAppMenuBar, -.aceEditorActive .overlay, -.aceEditorActive .scalablePrintArea{ +.aceEditorActive .ugsAppMenuBar, .aceEditorActive .overlay, .aceEditorActive .scalablePrintArea { display: none; } #aceHeader { border-bottom: solid 1px; - font-family: arial,sans-serif; + font-family: arial, sans-serif; font-size: 1; line-height: 40px; - height:40px; - padding:0 15px; + height: 40px; + padding: 0 15px; display: none; } -#aceHeader a{ +#aceHeader a { float: right; font-size: 0.87em; line-height: inherit; color: inherit; text-decoration: none; } -#aceHeader a:hover{ - color: #CC7833; - /*F92672;*/ +#aceHeader a:hover { + color: #cc7833; text-decoration: none; } #aceEditor { - /* using jQuery instead: display: none;*/ position: absolute; top: 40px; right: 0; bottom: 0; left: 0; } -/* Show/Hide Sidebar Button ------------------------------------------- */ .aceSideBtn { - background-color: rgba(0, 0, 0, 0); - border: 1px solid #DDDDDD; + background-color: rgba(0,0,0,0); + border: 1px solid #ddd; border-radius: 4px; cursor: pointer; float: left; margin: 7px 0.8em 0 0; - transition: background-color 0.3s ease; + -webkit-transition: background-color .3s ease; + -moz-transition: background-color .3s ease; + -ms-transition: background-color .3s ease; + -o-transition: background-color .3s ease; + transition: background-color .3s ease; } .aceSideBtn span { - box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - background-color: #888888; + box-sizing: border-box; + background-color: #888; border-radius: 1px; display: block; height: 2px; margin: 4px 2px; width: 16px; - transition: background-color 0.3s ease; + -webkit-transition: background-color .3s ease; + -moz-transition: background-color .3s ease; + -ms-transition: background-color .3s ease; + -o-transition: background-color .3s ease; + transition: background-color .3s ease; } -.aceSideBtn:hover{ +.aceSideBtn:hover { background-color: #333; } -.aceSideBtn:hover span{ +.aceSideBtn:hover span { background-color: #eee; } - -/* Help sidebar ------------------------------------------- */ #aceHelp { bottom: 0; left: -350px; margin: 0; position: absolute; top: 40px; - width:350px; + width: 350px; } #aceHelp { background: #fff; color: #707273; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; overflow-y: auto; text-align: left; @@ -1590,15 +1400,14 @@ html .diagramsOnTop .ugs-source-wrap { border-top: 2px solid #333; padding: 1em .6em; } -.aceHelp h1, -.aceHelp h3 { - color: #222222; +.aceHelp h1, .aceHelp h3 { + color: #222; font-size: 2.5em; font-weight: 500; line-height: 1em; margin: 0 0 1em; } -.aceHelp h3{ +.aceHelp h3 { font-size: 1.3em; } .aceHelp p { @@ -1611,20 +1420,19 @@ html .diagramsOnTop .ugs-source-wrap { .aceHelp strong { font-weight: bold; } -.aceHelp td, -.aceHelp th { +.aceHelp td, .aceHelp th { color: #787878; padding: 0 .8em .8em 0; vertical-align: baseline; } -.aceHelp th{ +.aceHelp th { font-weight: bold; } .aceHelp .key { background-color: #666; border: 0 none; border-radius: .22em; - color: #FFF; + color: #fff; font-family: Arial; display: inline-block; font-size: .71em; @@ -1633,7 +1441,7 @@ html .diagramsOnTop .ugs-source-wrap { padding: .22em .4em; text-transform: uppercase; } -.aceHelp .shortKeys{ +.aceHelp .shortKeys { white-space: nowrap; padding-right: 1.4em; } diff --git a/css/ugsEditorPlus.min.css b/css/ugsEditorPlus.min.css index b7bcb78..ec4e4c6 100644 --- a/css/ugsEditorPlus.min.css +++ b/css/ugsEditorPlus.min.css @@ -1,4 +1 @@ -/*! UkeGeeks Songbook Editor page - * Author: Buz Carter - * Engine: LessCSS - */.salt_8873ySp8{color:#0ff}.arrowBox{background-color:rgba(0,0,0,0.81);border:2px solid #fff;border-radius:10px;color:#b3b3b3;display:none;position:fixed;top:60px;width:310px;-moz-box-shadow:3px 13px 9px rgba(0,0,0,0.5);-webkit-box-shadow:3px 13px 9px rgba(0,0,0,0.5);box-shadow:3px 13px 9px rgba(0,0,0,0.5);z-index:5}.arrowBox:after,.arrowBox:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrowBox:after{border-color:rgba(0,0,0,0);border-bottom-color:#000;border-width:20px;left:50%;margin-left:-20px}.arrowBox:before{border-color:rgba(255,255,255,0);border-bottom-color:#ffffff;border-width:23px;left:50%;margin-left:-23px}.arrowBoxContent{padding:1em .6em .4em}.arrowBoxContent+.arrowBoxContent{padding-top:0}.enablePseudoSelects dt,.enablePseudoSelects dd{height:3em;line-height:1;margin:0;padding:0}.enablePseudoSelects dd{display:none;left:16.1em;position:relative;top:-3.1em;height:0px}.enablePseudoSelects label{color:#E4E4E4;display:block;cursor:pointer;border:solid 1px transparent;border-radius:7px;padding:0.5em}.enablePseudoSelects label:hover{color:#fff;background-color:#2A2A2A;border-color:#555;box-shadow:2px 2px 2px #000}.enablePseudoSelects label:hover em{color:#E4E4E4}.enablePseudoSelects label em{color:#898989;float:right;font-family:Arial}.event-userSelecting label{color:#B9B9B9}.event-userSelecting label em{color:#3a3a3a}html .active label{background-color:#000;color:#fff}.pseudoSelect{position:absolute;background-color:#3C3C3C;border:solid 1px #555;border-radius:7px;box-shadow:2px 6px 6px rgba(0,0,0,0.53);color:#EFEFEF;cursor:pointer;width:17em}.pseudoSelect a{border:2px solid transparent;border-radius:10px;color:inherit;display:block;padding:0.5em 0.5em 0.5em 30px;text-decoration:none}.pseudoSelect li{display:block;float:none;margin:0;padding:0.1em;text-align:inherit}.pseudoSelect li:hover{color:#fff}.pseudoSelect li:hover a{background-color:#000;border-color:#676767}.pseudoSelect .checked a{background:url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a;border-color:#C5C5C5;color:#FFFFFF;text-shadow:1px 2px 1px #000}.checkboxBlock{border-top:1px solid #575757;box-shadow:0 -1px 0 #000;font-size:0.81em;padding:0.75em 0}.checkboxBlock label{padding-left:0.5em}.checkBoxFinePrint{display:block;font-size:.85em;padding:0.3em 0 0.5em 3.1em}#commonChordList{display:block;font-size:1.2em;margin-left:1.5em;width:15em}.linksList{font-size:.85em}.linksList li{margin:0;padding:0.1em;text-align:left;float:none}.linksList a{border-radius:8px;color:#B9B9B9;display:block;padding:0.6em;text-decoration:none}.linksList a:hover{background-color:#000;color:#fff}.updateMessage{background-color:#BAE5A7;border:1px solid #44A819;border-radius:4px 4px 4px 4px;box-shadow:0 0 4px rgba(255,190,40,0.8);color:#43772D;display:none;position:absolute;text-align:center;text-shadow:0 -1px rgba(255,190,40,0.3);width:10em}.updateMessage em{border:1px solid #66D836;border-radius:3px 3px 3px 3px;box-shadow:0 0 3px #559277 inset;display:block;height:100%;padding:0.2em}.baseBtn{background-color:#999;border:1px solid #333;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#FFF;cursor:pointer;font-size:inherit;font-weight:bold;padding:0.2em 1em;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.5);text-decoration:none}.baseBtn:hover{background-color:#888;color:#fff}.blueBtn{background-color:#89b9e3;background-image:-moz-linear-gradient(top, #89b9e3, #3d6bbb);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')";border-color:#3765B7;text-shadow:#89b9e3 0 1px 0,#3765b7 0 -1px 0}.blueBtn:hover{background-color:#4c85e8;background-image:-moz-linear-gradient(top, #4c85e8, #2f5493);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')";text-shadow:#000 0 1px 0,#3765b7 0 -1px 0}.orange{color:#fef4e9;border:solid 1px #da7c0c;background:#f78d1d;background:-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background:-moz-linear-gradient(top, #faa51a, #f47a20);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');text-shadow:#da7c0c 0 1px 0,#faa51a 0 -1px 0}.orange:hover{background:#f47c20;background:-webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background:-moz-linear-gradient(top, #f88e11, #f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');text-shadow:#f47c20 0 1px 0,#f88e11 0 -1px 0}.orange:active{color:#fcd3a5;background:-webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background:-moz-linear-gradient(top, #f47a20, #faa51a);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a')}.btnBar{height:30px}.btnBar .baseBtn{float:right;font-size:110%;margin-bottom:5px}.alternateBtn,.noThanks{color:#3965B0;float:right;line-height:33px;margin-right:1.5em;text-decoration:none}.alternateBtn:hover,.noThanks:hover{color:#0646AD}.noThanks{background-color:#EFD292;border-radius:6px;padding:0 0.4em;-webkit-transition:background-color .4s ease;-moz-transition:background-color .4s ease;-ms-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease}.noThanks:hover{background-color:#F2E2C1}.chordBuilderDlg input[type=text]{border:1px solid #D7D7D7;border-radius:5px 5px 5px 5px;display:block;font-size:30pt;padding:0;text-align:center;max-width:100%;width:100%}.chordBuilderDlg pre{font-size:12pt;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}html body .editorSurface{background-color:#fff;border-radius:5px ;font-size:0.9em;height:300px;margin:5px auto;overflow:hidden;padding:0;position:relative;width:462px;-moz-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;-webkit-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset}.editorSurface canvas{border:none;cursor:none;left:0;position:absolute;top:0}#cdBldDiagramCanvas{z-index:1}#cdBldCursorCanvas{z-index:2}.chordToolbox{z-index:3}.toolboxEdgeShadow{z-index:4}.chordToolbox{border:0 solid #ccc;background-color:#F0EEF0;box-shadow:1px 1px 3px rgba(0,0,0,0.1);height:250px;position:absolute;top:25px;width:135px;-webkit-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-moz-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-ms-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;-o-transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out;transition:background-color .4s ease,border-color .4s ease,left .4s ease-out,right .4s ease-out}.chordToolbox.open,.chordToolbox:hover{background-color:#fafafa;border-color:#8C8C8C;box-shadow:4px 6px 9px rgba(0,0,0,0.3)}.chordToolbox.leftEdge{border-radius:0 7px 7px 0;border-width:2px 2px 2px 0;left:-110px}.chordToolbox.leftEdge.open,.chordToolbox.leftEdge:hover{left:0}.chordToolbox.rightEdge{border-radius:7px 0 0 7px;border-width:2px 0 2px 2px;right:-110px}.chordToolbox.rightEdge.open,.chordToolbox.rightEdge:hover{right:0}.chordToolboxInner{margin:10px auto;width:100px}.toolboxEdgeShadow{background-color:transparent;height:255px;position:absolute;top:26px;width:10px}.toolboxEdgeShadow.leftEdge{box-shadow:4px 0 6px rgba(0,0,0,0.3);left:-10px}.toolboxEdgeShadow.rightEdge{box-shadow:-4px 0 6px rgba(0,0,0,0.3);right:-10px}.toolChip{background-color:#fafafa;border:1px solid #fafafa;border-radius:5px;color:#C7681B;cursor:pointer;display:block;margin-bottom:8px;min-height:70px;padding:5px 0;text-align:center;text-decoration:none;width:100%;-webkit-transition:background-color .4s ease,border-color .4s ease;-moz-transition:background-color .4s ease,border-color .4s ease;-ms-transition:background-color .4s ease,border-color .4s ease;-o-transition:background-color .4s ease,border-color .4s ease;transition:background-color .4s ease,border-color .4s ease}.toolChip:hover{background-color:#FEFEFE;border:1px solid #EDEDED}html .selected,html .selected:hover{border-color:#AAA73F;box-shadow:0 0 5px rgba(0,0,0,0.2)}#cdBldBtnFingerName{color:#806753;display:block;font-size:.67em}.bigDot{background-color:#E78333;border:3px solid #973100;border-radius:23px 23px 23px 23px;display:block;height:23px;margin:5px auto;width:23px}.toolChip img,.toolChip .bigDot{opacity:.75}.selected img,.selected .bigDot,.toolChip:hover img,.toolChip:hover .bigDot{opacity:1}.fingerToolImage{background:url("../img/editor/hand.png") top center no-repeat;display:block;height:83px;margin:0 auto;position:relative;width:88px}.fingerDot{background-color:#F9F340;border:solid 2px #AF9607;border-radius:8px;display:block;height:8px;position:absolute;width:8px}.finger0 .fingerDot{display:none}.finger1 .fingerDot{right:22px;top:3px}.finger2 .fingerDot{right:1px;top:11px}.finger3 .fingerDot{right:1px;top:28px}.finger4 .fingerDot{right:1px;top:44px}label[for=cdBldStartingFret],html .arrowUp,html .arrowDown{min-height:52px}html .arrowUp,html .arrowDown{background-repeat:no-repeat;background-position:center 29px}html .arrowUp{background-image:url("../img/editor/basic-up-arrow.png")}html .arrowDown{background-image:url("../img/editor/basic-down-arrow.png")}.outputBox{max-height:30em;overflow:hidden;-webkit-transition:max-height .8s ease;-moz-transition:max-height .8s ease;-o-transition:max-height .8s ease;-ms-transition:max-height .8s ease;transition:max-height .8s ease}.outputBox.collapseOutput{max-height:0}.chordPro-statement{background-color:#f9f9f9;border:solid 1px #bbb;color:#999;font-family:Consolas,'courier new',monospace;padding:1em}.chordPro-keyword{color:#8e7cc3}.chordPro-attribute{color:#741b47}.chordPro-number{color:#e69138;font-weight:bold}.chordPro-string{background-color:#EDF7E6;color:#38761d;font-weight:bold}.ugsChordChooser{background-color:#eed18e;border-radius:10px;color:#551d00;font-size:14pt;max-height:17em;min-height:10em;overflow-y:auto;padding:.1em 0}.ugsChordChooser li{background-color:#bc9350;border-radius:6px;cursor:pointer;margin:0.5em;padding:0.5em;-webkit-transition:background-color .4s ease;-moz-transition:background-color .4s ease;-ms-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease}.ugsChordChooser li:hover{background-color:#99512c;color:#f4e19d;text-shadow:0px 2px 0px #551D00}.ugsChordChooser .newChord{background-color:#b2612d;color:#551d00;font-weight:bold}.ugsChordChooser .deleteChord{background:url("../img/editor/delete-btn.png") right center no-repeat;display:block;float:right;height:30px;opacity:0;width:36px;-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease}.ugsChordChooser li:hover .deleteChord{opacity:1}.ugsChordChooser canvas{float:right;margin-right:10px}html,body{margin:0;padding:0}body{position:relative;padding-top:40px}.editableSongPage{background-color:#EDECEA}.ugsLogo{color:#F2A848;font-family:'Peralta',cursive;font-size:16px;font-weight:normal;position:absolute;right:1em;text-shadow:1px 1px #332222}.ugsAppMenuBar{background:#933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x;-moz-box-shadow:0 5px 8px rgba(0,0,0,0.65);-webkit-box-shadow:0 5px 8px rgba(0,0,0,0.65);box-shadow:0 5px 8px rgba(0,0,0,0.65);border-top:1px solid #84623c;border-bottom:1px solid #240e01;font:17px/38px Helvetica,Arial;height:40px;min-width:910px;padding-left:0;position:fixed;top:0;width:100%;z-index:2}.ugsAppMenuBar>ul{margin-left:10px}.ugsAppMenuBar>ul>li{float:left;position:relative}.ugsAppMenuBar>ul>li>a{border:solid 1px transparent;color:#f4e19f;cursor:pointer;display:block;float:left;height:38px;line-height:38px;outline:0 none;padding:0 15px 0 5px;text-decoration:none;text-shadow:1px 2px 0 rgba(86,3,5,0.95)}.ugsAppMenuBar>ul>li>a:hover{border-color:#600000;background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fdda61;text-shadow:none}.ugsAppMenuBar>ul>.active>a{background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fef5e3;text-shadow:0 1px 1px rgba(0,0,0,0.5)}.ugsAppMenuBar>ul>li>a span{background-image:url("../img/editor/editorSprite.png");background-repeat:no-repeat;float:left;height:25px;margin-top:7px;width:25px}.navSong span{background-position:-75px 0}.navSong.active span,.navSong a:hover span{background-position:-75px -50px}.navInstruments span{background-position:-50px 0}.navInstruments.active span,.navInstruments a:hover span{background-position:-50px -50px}.navTranspose span{background-position:-25px 0}.navTranspose.active span,.navTranspose a:hover span{background-position:-25px -50px}.navDiagrams span{background-position:0px 0px}.navDiagrams.active span,.navDiagrams a:hover span{background-position:0 -50px}.navLayout span{background-position:-100px 0}.navLayout.active span,.navLayout a:hover span{background-position:-100px -50px}.navColors span{background-position:-125px 0}.navColors.active span,.navColors a:hover span{background-position:-125px -50px}.navZoom span{background-position:-150px 0}.navZoom.active span,.navZoom a:hover span{background-position:-150px -50px}.navEdit span{background-position:-175px 0}.navEdit.active span,.navEdit a:hover span{background-position:-175px -50px}.navOptions span{background-position:-200px 0}.navOptions.active span,.navOptions a:hover span{background-position:-200px -50px}.overlay{position:fixed;top:45px;right:20px;background-color:#2B1100;background-color:rgba(30,11,0,0.75);-moz-box-shadow:1px 10px 20px rgba(0,0,0,0.85);-webkit-box-shadow:1px 10px 20px rgba(0,0,0,0.85);box-shadow:1px 10px 20px rgba(0,0,0,0.85);-moz-border-radius:22px;-webkit-border-radius:22px;border-radius:22px;padding:10px;width:490px;z-index:0}.overlay>div{background:url("../img/editor/woodChip.png") repeat scroll 0 0 transparent;border-radius:0 0 13px 13px;overflow:hidden;padding:10px}.isHidden{display:none}.overlay select{font-size:1.1em}.overlay input[type=text],.overlay input[type=password]{display:block;font-size:1.2em;margin-bottom:.4em;padding:0.1em;width:98%}.overlay textarea{font-family:Monaco,"Consolas","Lucida Console","Courier New",courier,monospace;font-size:10pt;line-height:1.25;padding-left:.3em;white-space:nowrap;white-space:pre;overflow:scroll;height:525px;width:98%}.overlay input[type=text],.overlay input[type=password],.overlay textarea{background-color:rgba(255,255,255,0.7);border:solid 1px #E1B166;max-width:100%;max-height:100%;-webkit-transition:background-color 500ms linear;-moz-transition:background-color 500ms linear;-o-transition:background-color 500ms linear;-ms-transition:background-color 500ms linear;transition:background-color 500ms linear}.overlay input[type=text]:hover,.overlay input[type=password]:hover,.overlay textarea:hover{background-color:rgba(255,255,200,0.7);border-color:#444}.overlay input[type=text]:focus,.overlay input[type=password]:focus,.overlay textarea:focus{background-color:rgba(255,255,255,0.9);border-color:#6C280C;-moz-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3)}.overlay h3{background:url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17;border-bottom:1px solid #240E01;border-radius:12px 12px 0 0;border-top:1px solid #84623C;color:#F4E19F;font-size:22px;height:37px;line-height:37px;padding:0 20px;text-shadow:1px 2px 0 #592108}.overlay .closeBtn{background:url("../img/editor/closeBtn.png") no-repeat 0 0 transparent;display:block;height:30px;outline:none;position:absolute;right:10px;text-indent:-5000em;top:14px;width:30px}.overlay .resizeBtn{background:url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent;display:block;height:20px;outline:none;position:absolute;right:55px;text-indent:-5000em;top:18px;width:20px}html .helpDlg{top:75px;right:70px;width:300px;z-index:1}html .optionsDlg{top:100px;right:210px;width:380px;z-index:2}.optionsDlg div{font-size:.91em}.optionsDlg div li{padding-bottom:.82em}.chordBuilderDlg{right:210px;top:70px;width:490px;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease}html .chordBuilderNarrow{width:345px}.helpDlg{font-size:.9em}.normalHtml p,.normalHtml ul,.normalHtml ol{margin-bottom:1em}.normalHtml li{list-style:disc outside none;margin-left:1em;padding-bottom:.4em}.normalHtml h3{font-size:1.2em;font-weight:bold}.reformatDlg{right:25%;top:100px;width:480px;z-index:3}.instructions{width:28em;padding:0 0 .7em;color:#563324}.instructions.small{clear:both;font-size:.8em;display:block;width:35em}html .reformatDlg textarea{height:15em}.layoutOptions{left:50px}.layoutOptions:after,.layoutOptions:before{left:22%}.tuningOptions{left:150px}#transposeOptions em{color:#CCCCCC;float:right;font-size:0.86em}.otherOptions{left:250px}.helpOptions{left:320px}.hasSongbookLink .layoutOptions:after,.hasSongbookLink .layoutOptions:before{left:72%}.hasSongbookLink .tuningOptions{left:250px}.hasSongbookLink .otherOptions{left:300px}.hasSongbookLink .otherOptions:after,.hasSongbookLink .otherOptions:before{left:70%}.hasSongbookLink .helpOptions{left:340px}.hasSongbookLink .helpOptions:after,.hasSongbookLink .helpOptions:before{left:80%}.theme-reversed{background-color:#000;color:#FFF}.theme-reversed pre{color:#e9e9e9}.theme-reversed .scalablePrintArea{background-color:transparent}.theme-reversed .scalablePrintArea h5,.theme-reversed .scalablePrintArea h6{border-left-color:#444;color:#69F}.theme-reversed .ugsChorus{border-left-color:#333}.theme-reversed .ugsChords code{color:#333}.theme-reversed .ugsChords code em{color:#F42}.theme-reversed .subNav a:hover{background-color:#888;color:#000}.theme-reversed .overlay{background-color:#4E1C07;box-shadow:none;color:#000}.theme-jellyBean pre{color:inherit}.theme-jellyBean .scalablePrintArea{color:#56A0A5;font-family:"Comic Sans MS","Marker Felt",cursive,sans-serif}.theme-jellyBean .scalablePrintArea hgroup{color:#FF9417;text-align:center}.theme-jellyBean .scalablePrintArea h1{color:#D20770;font-family:'Peralta',cursive,sans-serif;font-size:2em;text-shadow:0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660}.theme-jellyBean .scalablePrintArea h2{font-size:1.1em}.theme-jellyBean .scalablePrintArea h5,.theme-jellyBean .scalablePrintArea h6{border-left-color:#F2E660;color:#9C55ED;font-family:inherit;letter-spacing:0.045em}.theme-jellyBean .ugsChorus{border-left-color:#F2E660;border-radius:5px 0 0 5px}.theme-jellyBean .ugsChords code{color:#333}.theme-jellyBean .ugsChords code em{color:#D20070}.theme-western .scalablePrintArea{color:#88410A}.theme-western .scalablePrintArea hgroup{color:#88410A;font-family:'Smokum',Arial,sans-serif;text-align:center}.theme-western .scalablePrintArea h1{color:#472B07;font-family:inherit;font-size:3.3em;text-shadow:0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0}.theme-western .scalablePrintArea h2{font-size:1.7em}.theme-western .scalablePrintArea h5,.theme-western .scalablePrintArea h6{border-left-color:#BED379;color:#92A88C;font-family:'Smokum',Arial,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-western .ugsChorus{border-left-color:#BEC481;border-radius:5px 0 0 5px}.theme-western .ugs-source-wrap pre{color:inherit}.theme-pumpkin .scalablePrintArea{color:#68391D}.theme-pumpkin .scalablePrintArea hgroup{color:#B14623;text-align:center}.theme-pumpkin .scalablePrintArea h1{color:#D3770E;font-family:'Ranchers',Arial,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:.064em .044em 0 #edf8ce,-0.037em .044em 0 #edf8ce,-0.074em .094em 0 #bed379,.074em .094em 0 #bed379}.theme-pumpkin .scalablePrintArea h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em}.theme-pumpkin .scalablePrintArea h5,.theme-pumpkin .scalablePrintArea h6{border-left-color:#BED379;color:#FFC501;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em}.theme-pumpkin .ugs-source-wrap pre{color:inherit}.theme-pumpkin .ugsChorus{border-left-color:#A0B74E;border-radius:5px 0 0 5px}.theme-pumpkin .ugsChords code em{color:#FE9600}.theme-zombie .scalablePrintArea{color:#798666}.theme-zombie .scalablePrintArea hgroup{color:#902374;text-align:center}.theme-zombie .scalablePrintArea h1{color:#BED63A;font-family:'Creepster',cursive,sans-serif;font-size:3.2em;line-height:1.1;text-shadow:.002em .002em 0 #364000,.044em .044em 0 #9eb036,-0.042em -0.014em 0 #8f2472,.087em .074em 0 #8f2472,-0.074em .094em 0 #ca4f04,.074em .174em 0 #ca4f04}.theme-zombie .scalablePrintArea h2{font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.1em;text-shadow:0.12em 0.13em 0 #DBDAE8}.theme-zombie .scalablePrintArea h5,.theme-zombie .scalablePrintArea h6{border-left-color:#E4DCA4;color:#798666;font-family:'Peralta',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;text-shadow:0.03em 0.07em 0 #BED63A}.theme-zombie .ugs-source-wrap pre{color:inherit}.theme-zombie .ugsChorus{border-left-color:#CDC693;border-radius:6px 0 0 6px}.theme-zombie .ugsChords code em{color:#DD1A52}.theme-frosty .scalablePrintArea{color:#154286}.theme-frosty .scalablePrintArea hgroup{color:#6A97DB;text-align:center}.theme-frosty .scalablePrintArea h1{color:#D5E2F5;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:2.18em;letter-spacing:0.05em;line-height:1.1;text-shadow:-0.064em -0.034em 0 #fff,.008em .008em 0 #a3e3d7,.009em -0.009em 0 #a3e3d7,.098em .115em 0 #154286,.064em .064em 0 #00183d,-0.114em -0.064em 0 #154286,-0.114em 0 0 #154286,0 -0.064em 0 #154286,-0.084em .064em 0 #154286,.064em -0.034em 0 #154286}.theme-frosty .scalablePrintArea h2{font-family:'Ranchers',Arial,sans-serif;font-size:1.2em}.theme-frosty .scalablePrintArea h5,.theme-frosty .scalablePrintArea h6{border-left-color:#E3F7F3;color:#80B7B1;font-family:'Cherry Cream Soda',cursive,sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:0.6em}.theme-frosty .ugs-source-wrap pre{color:inherit}.theme-frosty .ugsChorus{border-left-color:#0896FE;border-radius:6px 0 0 6px}.theme-frosty .ugsChords code em{color:#0896FE}.theme-krampus .scalablePrintArea{color:#929867}.theme-krampus .scalablePrintArea hgroup{color:#929867;text-align:center}.theme-krampus .scalablePrintArea h1{color:#A22C27;font-family:'Lobster',cursive,sans-serif;font-size:2.78em;line-height:1.1;text-shadow:0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621}.theme-krampus .scalablePrintArea h2{font-family:'Peralta',cursive,sans-serif;font-size:1.2em;text-shadow:0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592}.theme-krampus .scalablePrintArea h5,.theme-krampus .scalablePrintArea h6{border-left-color:#7B8055;color:#A32C28;font-family:'Peralta',cursive,sans-serif;font-size:1.2em;font-style:normal;padding:0;text-indent:0.6em}.theme-krampus .ugs-source-wrap pre{color:inherit}.theme-krampus .ugsChorus{border-left-color:#B9C97E;border-radius:6px 0 0 6px}.theme-krampus .ugsChords code em{color:#384030}.theme-notebook .scalablePrintArea{color:#443377;font-family:'Architects Daughter',Arial,sans-serif}.theme-notebook .scalablePrintArea hgroup{color:#2E2ECC;font-family:inherit;text-align:center}.theme-notebook .scalablePrintArea h1{border-color:#E4E4FF;border-style:solid;border-width:1px 0;color:#252537;font-family:'Permanent Marker',Arial,sans-serif;font-size:2em;margin-bottom:0.2em}.theme-notebook .scalablePrintArea h2{border-bottom:1px solid #E4E4FF;font-size:1.1em}.theme-notebook .scalablePrintArea h5,.theme-notebook .scalablePrintArea h6{border-left-color:#626283;color:#2E2ECC;font-family:'Permanent Marker',Arial,sans-serif;font-size:1.3em;padding:0;text-indent:0.7em}.theme-notebook .ugs-source-wrap pre{color:inherit}.theme-notebook .ugsChorus{border-left-color:#a4a0b2;border-radius:6px 0 0 6px}.theme-notebook .ugsChords code{font-family:inherit}.theme-justBlack .ugs-source-wrap h5,.theme-justBlack .ugs-source-wrap h6{color:#000;font-family:'Bree Serif',Arial,sans-serif;font-style:normal}.theme-justBlack .ugsChords code em{color:#000;font-weight:bold}.theme-justBlack .scalablePrintArea hgroup,.theme-justBlack .scalablePrintArea hgroup *{font-family:'Bree Serif',Arial,sans-serif;font-style:normal}.theme-justBlack .scalablePrintArea hgroup{text-align:center}.scalablePrintArea{-moz-transform-origin:0 0;-webkit-transform-origin:0 0;background-color:#fff;border-right:solid 1px #888;font-size:inherit;box-shadow:3px 0 9px rgba(0,0,0,0.4)}.scalablePrintArea hgroup{padding-bottom:.15in}html .ugsHideDiagrams .ugs-diagrams-wrap{display:none}html .ugsHideDiagrams .ugs-source-wrap{margin-left:0}html .diagramsOnTop .ugs-diagrams-wrap{float:none;width:auto}html .diagramsOnTop .ugs-source-wrap{margin-left:0}.ugsNoChords .ugs-source-wrap{margin-left:0}.diagramsOnSide .ugs-diagrams-wrap{float:left;width:225px}.diagramsOnSide .ugs-source-wrap{margin-left:250px}.liBtn,.liBtn *{cursor:pointer}.pageWidth_letter .scalablePrintArea{width:8in;padding:0.2in;min-height:10.5in}.pageWidth_a4 .scalablePrintArea{width:19cm;padding:1cm;min-height:28cm}.pageWidth_screen .scalablePrintArea{padding:20px}.scalablePrintArea .ugs-diagrams-wrap canvas{zoom:1}.scalablePrintArea .ugs-diagrams-wrap{zoom:1}.scalablePrintArea .ugs-source-wrap{zoom:1}.aceEditorActive,.aceEditorActive body{overflow:hidden;height:100%;width:100%;margin:0;padding:0}.aceEditorActive #aceHeader{display:block}.aceEditorActive .ugsAppMenuBar,.aceEditorActive .overlay,.aceEditorActive .scalablePrintArea{display:none}#aceHeader{border-bottom:solid 1px;font-family:arial,sans-serif;font-size:1;line-height:40px;height:40px;padding:0 15px;display:none}#aceHeader a{float:right;font-size:0.87em;line-height:inherit;color:inherit;text-decoration:none}#aceHeader a:hover{color:#CC7833;text-decoration:none}#aceEditor{position:absolute;top:40px;right:0;bottom:0;left:0}.aceSideBtn{background-color:rgba(0,0,0,0);border:1px solid #DDDDDD;border-radius:4px;cursor:pointer;float:left;margin:7px 0.8em 0 0;transition:background-color .3s ease}.aceSideBtn span{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:#888888;border-radius:1px;display:block;height:2px;margin:4px 2px;width:16px;transition:background-color .3s ease}.aceSideBtn:hover{background-color:#333}.aceSideBtn:hover span{background-color:#eee}#aceHelp{bottom:0;left:-350px;margin:0;position:absolute;top:40px;width:350px}#aceHelp{background:#fff;color:#707273;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;overflow-y:auto;text-align:left}.aceHelp{border-top:2px solid #333;padding:1em .6em}.aceHelp h1,.aceHelp h3{color:#222222;font-size:2.5em;font-weight:500;line-height:1em;margin:0 0 1em}.aceHelp h3{font-size:1.3em}.aceHelp p{line-height:1.6em;margin:0 0 1em}.aceHelp table{margin:20px 0 10px}.aceHelp strong{font-weight:bold}.aceHelp td,.aceHelp th{color:#787878;padding:0 .8em .8em 0;vertical-align:baseline}.aceHelp th{font-weight:bold}.aceHelp .key{background-color:#666;border:0 none;border-radius:.22em;color:#FFF;font-family:Arial;display:inline-block;font-size:.71em;font-weight:bold;line-height:1.1;padding:.22em .4em;text-transform:uppercase}.aceHelp .shortKeys{white-space:nowrap;padding-right:1.4em} \ No newline at end of file +.salt_oct14_880X7J{color:#f00;}.arrowBox{background-color:rgba(0,0,0,0.81);border:2px solid #fff;border-radius:10px;color:#b3b3b3;display:none;position:fixed;top:60px;width:310px;-moz-box-shadow:3px 13px 9px rgba(0,0,0,0.5);-webkit-box-shadow:3px 13px 9px rgba(0,0,0,0.5);box-shadow:3px 13px 9px rgba(0,0,0,0.5);z-index:5;}.arrowBox:after,.arrowBox:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}.arrowBox:after{border-color:rgba(0,0,0,0);border-bottom-color:#000;border-width:20px;left:50%;margin-left:-20px;}.arrowBox:before{border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:23px;left:50%;margin-left:-23px;}.arrowBoxContent{padding:1em .6em .4em;}.arrowBoxContent + .arrowBoxContent{padding-top:0;}.enablePseudoSelects dt,.enablePseudoSelects dd{height:3em;line-height:1;margin:0;padding:0;}.enablePseudoSelects dd{display:none;left:16.1em;position:relative;top:-3.1em;height:0px;}.enablePseudoSelects label{color:#e4e4e4;display:block;cursor:pointer;border:solid 1px transparent;border-radius:7px;padding:0.5em;}.enablePseudoSelects label:hover{color:#fff;background-color:#2a2a2a;border-color:#555;-moz-box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;box-shadow:2px 2px 2px #000;}.enablePseudoSelects label:hover em{color:#e4e4e4;}.enablePseudoSelects label em{color:#898989;float:right;font-family:Arial;}.event-userSelecting label{color:#b9b9b9;}.event-userSelecting label em{color:#3a3a3a;}html .active label{background-color:#000;color:#fff;}.pseudoSelect{position:absolute;background-color:#3c3c3c;border:solid 1px #555;border-radius:7px;-moz-box-shadow:2px 6px 6px rgba(0,0,0,0.53);-webkit-box-shadow:2px 6px 6px rgba(0,0,0,0.53);box-shadow:2px 6px 6px rgba(0,0,0,0.53);color:#efefef;cursor:pointer;width:17em;}.pseudoSelect a{border:2px solid transparent;border-radius:10px;color:inherit;display:block;padding:0.5em 0.5em 0.5em 30px;text-decoration:none;}.pseudoSelect li{display:block;float:none;margin:0;padding:0.1em;text-align:inherit;}.pseudoSelect li:hover{color:#fff;}.pseudoSelect li:hover a{background-color:#000;border-color:#676767;}.pseudoSelect .checked a{background:url("../img/editor/checked.png") no-repeat scroll 10px center #2a2a2a;border-color:#c5c5c5;color:#fff;text-shadow:1px 2px 1px #000;}.checkboxBlock{border-top:1px solid #575757;-moz-box-shadow:0 -1px 0 #000;-webkit-box-shadow:0 -1px 0 #000;box-shadow:0 -1px 0 #000;font-size:0.81em;padding:0.75em 0;}.checkboxBlock label{padding-left:0.5em;}.checkBoxFinePrint{display:block;font-size:.85em;padding:0.3em 0 0.5em 3.1em;}#commonChordList{display:block;font-size:1.2em;margin-left:1.5em;width:15em;}.linksList{font-size:.85em;}.linksList li{margin:0;padding:0.1em;text-align:left;float:none;}.linksList a{border-radius:8px;color:#b9b9b9;display:block;padding:0.6em;text-decoration:none;}.linksList a:hover{background-color:#000;color:#fff;}.updateMessage{background-color:#bae5a7;border:1px solid #44a819;border-radius:4px 4px 4px 4px;-moz-box-shadow:0 0 4px rgba(255,190,40,0.8);-webkit-box-shadow:0 0 4px rgba(255,190,40,0.8);box-shadow:0 0 4px rgba(255,190,40,0.8);color:#43772d;display:none;position:absolute;text-align:center;text-shadow:0 -1px rgba(255,190,40,0.3);width:10em;}.updateMessage em{border:1px solid #66d836;border-radius:3px 3px 3px 3px;-moz-box-shadow:0 0 3px #559277 inset;-webkit-box-shadow:0 0 3px #559277 inset;box-shadow:0 0 3px #559277 inset;display:block;height:100%;padding:0.2em;}.baseBtn{background-color:#999;border:1px solid #333;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#fff;cursor:pointer;font-size:inherit;font-weight:bold;padding:0.2em 1em;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.5);text-decoration:none;}.baseBtn:hover{background-color:#888;color:#fff;}.blueBtn{background-color:#89b9e3;background-image:-webkit-linear-gradient(top,#89b9e3 0%,#3d6bbb 100%);background-image:-o-linear-gradient(top,#89b9e3 0%,#3d6bbb 100%);background-image:linear-gradient(to bottom,#89b9e3 0%,#3d6bbb 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89b9e3', endColorstr='#ff3d6bbb', GradientType=0);border-color:#3765b7;text-shadow:#89b9e3 0px 1px 0, #3765b7 0 -1px 0;}.blueBtn:hover{background-color:#4c85e8;background-image:-webkit-linear-gradient(top,#4c85e8 0%,#2f5493 100%);background-image:-o-linear-gradient(top,#4c85e8 0%,#2f5493 100%);background-image:linear-gradient(to bottom,#4c85e8 0%,#2f5493 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4c85e8', endColorstr='#ff2f5493', GradientType=0);text-shadow:black 0px 1px 0, #3765b7 0 -1px 0;}.orange{color:#fef4e9;border:solid 1px #da7c0c;background:#f78d1d;background-image:-webkit-linear-gradient(top,#faa51a 0%,#f47a20 100%);background-image:-o-linear-gradient(top,#faa51a 0%,#f47a20 100%);background-image:linear-gradient(to bottom,#faa51a 0%,#f47a20 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffaa51a', endColorstr='#fff47a20', GradientType=0);text-shadow:#da7c0c 0px 1px 0, #faa51a 0 -1px 0;}.orange:hover{background:#f47c20;background-image:-webkit-linear-gradient(top,#f88e11 0%,#f06015 100%);background-image:-o-linear-gradient(top,#f88e11 0%,#f06015 100%);background-image:linear-gradient(to bottom,#f88e11 0%,#f06015 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff88e11', endColorstr='#fff06015', GradientType=0);text-shadow:#f47c20 0px 1px 0, #f88e11 0 -1px 0;}.orange:active{color:#fcd3a5;background-image:-webkit-linear-gradient(top,#f47a20 0%,#faa51a 100%);background-image:-o-linear-gradient(top,#f47a20 0%,#faa51a 100%);background-image:linear-gradient(to bottom,#f47a20 0%,#faa51a 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff47a20', endColorstr='#fffaa51a', GradientType=0);}.btnBar{height:30px;}.btnBar .baseBtn{float:right;font-size:110%;margin-bottom:5px;}.alternateBtn,.noThanks{color:#3965b0;float:right;line-height:33px;margin-right:1.5em;text-decoration:none;}.alternateBtn:hover,.noThanks:hover{color:#0646ad;}.noThanks{background-color:#efd292;border-radius:6px;padding:0 0.4em;-webkit-transition:background-color 0.4s ease;-moz-transition:background-color 0.4s ease;-ms-transition:background-color 0.4s ease;-o-transition:background-color 0.4s ease;transition:background-color 0.4s ease;}.noThanks:hover{background-color:#f2e2c1;}.chordBuilderDlg input[type=text]{border:1px solid #d7d7d7;border-radius:5px 5px 5px 5px;display:block;font-size:30pt;padding:0;text-align:center;max-width:100%;width:100%;}.chordBuilderDlg pre{font-size:12pt;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}html body .editorSurface{background-color:#fff;border-radius:5px;font-size:0.9em;height:300px;margin:5px auto;overflow:hidden;padding:0;position:relative;width:462px;-moz-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;-webkit-box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;box-shadow:1px 2px 8px rgba(0,0,0,0.5) inset;}.editorSurface canvas{border:none;cursor:none;left:0;position:absolute;top:0;}#cdBldDiagramCanvas{z-index:1;}#cdBldCursorCanvas{z-index:2;}.toolboxEdgeShadow{z-index:4;}.chordToolbox{border:0 solid #ccc;background-color:#f0eef0;-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.1);-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.1);box-shadow:1px 1px 3px rgba(0,0,0,0.1);height:250px;position:absolute;top:25px;width:135px;-webkit-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-moz-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-ms-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;-o-transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;transition:background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out;z-index:3;}.chordToolbox.open,.chordToolbox:hover{background-color:#fafafa;border-color:#8c8c8c;-moz-box-shadow:4px 6px 9px rgba(0,0,0,0.3);-webkit-box-shadow:4px 6px 9px rgba(0,0,0,0.3);box-shadow:4px 6px 9px rgba(0,0,0,0.3);}.chordToolbox.leftEdge{border-radius:0 7px 7px 0;border-width:2px 2px 2px 0;left:-110px;}.chordToolbox.leftEdge.open,.chordToolbox.leftEdge:hover{left:0;}.chordToolbox.rightEdge{border-radius:7px 0 0 7px;border-width:2px 0 2px 2px;right:-110px;}.chordToolbox.rightEdge.open,.chordToolbox.rightEdge:hover{right:0;}.chordToolboxInner{margin:10px auto;width:100px;}.toolboxEdgeShadow{background-color:transparent;height:255px;position:absolute;top:26px;width:10px;}.toolboxEdgeShadow.leftEdge{-moz-box-shadow:4px 0 6px rgba(0,0,0,0.3);-webkit-box-shadow:4px 0 6px rgba(0,0,0,0.3);box-shadow:4px 0 6px rgba(0,0,0,0.3);left:-10px;}.toolboxEdgeShadow.rightEdge{-moz-box-shadow:-4px 0 6px rgba(0,0,0,0.3);-webkit-box-shadow:-4px 0 6px rgba(0,0,0,0.3);box-shadow:-4px 0 6px rgba(0,0,0,0.3);right:-10px;}.toolChip{background-color:#fafafa;border:1px solid #fafafa;border-radius:5px;color:#c7681b;cursor:pointer;display:block;margin-bottom:8px;min-height:70px;padding:5px 0;text-align:center;text-decoration:none;width:100%;-webkit-transition:background-color 0.4s ease, border-color 0.4s ease;-moz-transition:background-color 0.4s ease, border-color 0.4s ease;-ms-transition:background-color 0.4s ease, border-color 0.4s ease;-o-transition:background-color 0.4s ease, border-color 0.4s ease;transition:background-color 0.4s ease, border-color 0.4s ease;}.toolChip:hover{background-color:#fefefe;border:1px solid #ededed;}.toolChip img,.toolChip .bigDot{opacity:.75;}.toolChip:hover img,.toolChip:hover .bigDot{opacity:1;}html .selected,html .selected:hover{border-color:#aaa73f;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);}#cdBldBtnFingerName{color:#806753;display:block;font-size:.67em;}.bigDot{background-color:#e78333;border:3px solid #973100;border-radius:23px 23px 23px 23px;display:block;height:23px;margin:5px auto;width:23px;}.selected img,.selected .bigDot{opacity:1;}.fingerToolImage{background:url("../img/editor/hand.png") top center no-repeat;display:block;height:83px;margin:0 auto;position:relative;width:88px;}.fingerDot{background-color:#f9f340;border:solid 2px #af9607;border-radius:8px;display:block;height:8px;position:absolute;width:8px;}.finger0 .fingerDot{display:none;}.finger1 .fingerDot{right:22px;top:3px;}.finger2 .fingerDot{right:1px;top:11px;}.finger3 .fingerDot{right:1px;top:28px;}.finger4 .fingerDot{right:1px;top:44px;}label[for=cdBldStartingFret],html .arrowUp,html .arrowDown{min-height:52px;}html .arrowUp,html .arrowDown{background-repeat:no-repeat;background-position:center 29px;}html .arrowUp{background-image:url("../img/editor/basic-up-arrow.png");}html .arrowDown{background-image:url("../img/editor/basic-down-arrow.png");}.outputBox{max-height:30em;overflow:hidden;-webkit-transition:max-height 0.8s ease;-moz-transition:max-height 0.8s ease;-ms-transition:max-height 0.8s ease;-o-transition:max-height 0.8s ease;transition:max-height 0.8s ease;}.outputBox.collapseOutput{max-height:0;}.chordPro-statement{background-color:#f9f9f9;border:solid 1px #bbb;color:#999;font-family:Consolas, 'courier new', monospace;padding:1em;}.chordPro-keyword{color:#8e7cc3;}.chordPro-attribute{color:#741b47;}.chordPro-number{color:#e69138;font-weight:bold;}.chordPro-string{background-color:#edf7e6;color:#38761d;font-weight:bold;}.ugsChordChooser{background-color:#eed18e;border-radius:10px;color:#551d00;font-size:14pt;max-height:17em;min-height:10em;overflow-y:auto;padding:.1em 0;}.ugsChordChooser li{background-color:#bc9350;border-radius:6px;cursor:pointer;margin:0.5em;padding:0.5em;-webkit-transition:background-color 0.4s ease;-moz-transition:background-color 0.4s ease;-ms-transition:background-color 0.4s ease;-o-transition:background-color 0.4s ease;transition:background-color 0.4s ease;}.ugsChordChooser li:hover{background-color:#99512c;color:#f4e19d;text-shadow:0px 2px 0px #551d00;}.ugsChordChooser .newChord{background-color:#b2612d;color:#551d00;font-weight:bold;}.ugsChordChooser .deleteChord{background:url("../img/editor/delete-btn.png") right center no-repeat;display:block;float:right;height:30px;opacity:0;width:36px;-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease;}.ugsChordChooser li:hover .deleteChord{opacity:1;}.ugsChordChooser canvas{float:right;margin-right:10px;}html,body{margin:0;padding:0;}body{position:relative;padding-top:40px;}.editableSongPage{background-color:#edecea;}.ugsLogo{color:#f2a848;font-family:'Peralta', cursive;font-size:16px;font-weight:normal;position:absolute;right:1em;text-shadow:1px 1px #322;}.ugsAppMenuBar{background:#933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x;-moz-box-shadow:0 5px 8px rgba(0,0,0,0.65);-webkit-box-shadow:0 5px 8px rgba(0,0,0,0.65);box-shadow:0 5px 8px rgba(0,0,0,0.65);border-top:1px solid #84623c;border-bottom:1px solid #240e01;font:17px/38px Helvetica, Arial;height:40px;min-width:910px;padding-left:0;position:fixed;top:0;width:100%;z-index:2;}.ugsAppMenuBar > ul{margin-left:10px;}.ugsAppMenuBar > ul > li{float:left;position:relative;}.ugsAppMenuBar > ul > li > a{border:solid 1px transparent;color:#f4e19f;cursor:pointer;display:block;float:left;height:38px;line-height:38px;outline:0 none;padding:0 15px 0 5px;text-decoration:none;text-shadow:1px 2px 0 rgba(86,3,5,0.95);}.ugsAppMenuBar > ul > li > a:hover{border-color:#600000;background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fdda61;text-shadow:none;}.ugsAppMenuBar > ul > .active > a{background-color:#451212;background:url("../img/editor/editorSprite.png") 0 -145px repeat-x;color:#fef5e3;text-shadow:0 1px 1px rgba(0,0,0,0.5);}.ugsAppMenuBar > ul > li > a span{background-image:url("../img/editor/editorSprite.png");background-repeat:no-repeat;float:left;height:25px;margin-top:7px;width:25px;}.navSong span{background-position:-75px 0px;}.navSong.active span,.navSong a:hover span{background-position:-75px -50px;}.navInstruments span{background-position:-50px 0px;}.navInstruments.active span,.navInstruments a:hover span{background-position:-50px -50px;}.navTranspose span{background-position:-25px 0px;}.navTranspose.active span,.navTranspose a:hover span{background-position:-25px -50px;}.navDiagrams span{background-position:0px 0px;}.navDiagrams.active span,.navDiagrams a:hover span{background-position:0px -50px;}.navLayout span{background-position:-100px 0px;}.navLayout.active span,.navLayout a:hover span{background-position:-100px -50px;}.navColors span{background-position:-125px 0px;}.navColors.active span,.navColors a:hover span{background-position:-125px -50px;}.navZoom span{background-position:-150px 0px;}.navZoom.active span,.navZoom a:hover span{background-position:-150px -50px;}.navEdit span{background-position:-175px 0px;}.navEdit.active span,.navEdit a:hover span{background-position:-175px -50px;}.navOptions span{background-position:-200px 0px;}.navOptions.active span,.navOptions a:hover span{background-position:-200px -50px;}.overlay{position:fixed;top:45px;right:20px;background-color:#2b1100;background-color:rgba(30,11,0,0.75);-moz-box-shadow:1px 10px 20px rgba(0,0,0,0.85);-webkit-box-shadow:1px 10px 20px rgba(0,0,0,0.85);box-shadow:1px 10px 20px rgba(0,0,0,0.85);-moz-border-radius:22px;-webkit-border-radius:22px;border-radius:22px;padding:10px;width:490px;z-index:0;}.overlay > div{background:url("../img/editor/woodChip.png") repeat scroll 0 0 transparent;border-radius:0 0 13px 13px;overflow:hidden;padding:10px;}.isHidden{display:none;}.overlay select{font-size:1.1em;}.overlay input[type=text],.overlay input[type=password]{display:block;font-size:1.2em;margin-bottom:.4em;padding:0.1em;width:98%;}.overlay textarea{font-family:Monaco, "Consolas", "Lucida Console", "Courier New", courier, monospace;font-size:10pt;line-height:1.25;padding-left:.3em;white-space:nowrap;white-space:pre;overflow:scroll;height:525px;width:98%;}.overlay input[type=text],.overlay input[type=password],.overlay textarea{background-color:rgba(255,255,255,0.7);border:solid 1px #e1b166;max-width:100%;max-height:100%;-webkit-transition:background-color 500ms linear;-moz-transition:background-color 500ms linear;-ms-transition:background-color 500ms linear;-o-transition:background-color 500ms linear;transition:background-color 500ms linear;}.overlay input[type=text]:hover,.overlay input[type=password]:hover,.overlay textarea:hover{background-color:rgba(255,255,200,0.7);border-color:#444;}.overlay input[type=text]:focus,.overlay input[type=password]:focus,.overlay textarea:focus{background-color:rgba(255,255,255,0.9);border-color:#6c280c;-moz-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);box-shadow:inset 3px 3px 5px rgba(0,0,0,0.3);}.overlay h3{background:url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17;border-bottom:1px solid #240e01;border-radius:12px 12px 0 0;border-top:1px solid #84623c;color:#f4e19f;font-size:22px;height:37px;line-height:37px;padding:0 20px;text-shadow:1px 2px 0 #592108;}.overlay .closeBtn{background:url("../img/editor/closeBtn.png") no-repeat 0 0 transparent;display:block;height:30px;outline:none;position:absolute;right:10px;text-indent:-5000em;top:14px;width:30px;}.overlay .resizeBtn{background:url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent;display:block;height:20px;outline:none;position:absolute;right:55px;text-indent:-5000em;top:18px;width:20px;}html .helpDlg{top:75px;right:70px;width:300px;z-index:1;}html .optionsDlg{top:100px;right:210px;width:380px;z-index:2;}.optionsDlg div{font-size:.91em;}.optionsDlg div li{padding-bottom:.82em;}.chordBuilderDlg{right:210px;top:70px;width:490px;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}html .chordBuilderNarrow{width:345px;}.helpDlg{font-size:.9em;}.normalHtml p,.normalHtml ul,.normalHtml ol{margin-bottom:1em;}.normalHtml li{list-style:disc outside none;margin-left:1em;padding-bottom:.4em;}.normalHtml h3{font-size:1.2em;font-weight:bold;}.reformatDlg{right:25%;top:100px;width:480px;z-index:3;}.instructions{width:28em;padding:0 0 .7em;color:#563324;}.instructions.small{clear:both;font-size:.8em;display:block;width:35em;}html .reformatDlg textarea{height:15em;}.layoutOptions{left:50px;}.layoutOptions:after,.layoutOptions:before{left:22%;}.tuningOptions{left:150px;}#transposeOptions em{color:#ccc;float:right;font-size:0.86em;}.otherOptions{left:250px;}.helpOptions{left:320px;}.hasSongbookLink .layoutOptions:after,.hasSongbookLink .layoutOptions:before{left:72%;}.hasSongbookLink .tuningOptions{left:250px;}.hasSongbookLink .otherOptions{left:300px;}.hasSongbookLink .otherOptions:after,.hasSongbookLink .otherOptions:before{left:70%;}.hasSongbookLink .helpOptions{left:340px;}.hasSongbookLink .helpOptions:after,.hasSongbookLink .helpOptions:before{left:80%;}.theme-reversed{background-color:#000;color:#fff;}.theme-reversed pre{color:#e9e9e9;}.theme-reversed .scalablePrintArea{background-color:transparent;}.theme-reversed .scalablePrintArea h5,.theme-reversed .scalablePrintArea h6{border-left-color:#444;color:#69f;}.theme-reversed .ugsChorus{border-left-color:#333;}.theme-reversed .ugsChords code{color:#333;}.theme-reversed .ugsChords code em{color:#f42;}.theme-reversed .subNav a:hover{background-color:#888;color:#000;}.theme-reversed .overlay{background-color:#4e1c07;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;color:#000;}.theme-jellyBean pre{color:inherit;}.theme-jellyBean .scalablePrintArea{color:#56a0a5;font-family:"Comic Sans MS", "Marker Felt", cursive, sans-serif;}.theme-jellyBean .scalablePrintArea hgroup{color:#ff9417;text-align:center;}.theme-jellyBean .scalablePrintArea h1{color:#d20770;font-family:'Peralta', cursive, sans-serif;font-size:2em;text-shadow:0.03125em 0.0625em 0 #fff, 0.09375em 0.125em 0 #f2e660;}.theme-jellyBean .scalablePrintArea h2{font-size:1.1em;}.theme-jellyBean .scalablePrintArea h5,.theme-jellyBean .scalablePrintArea h6{border-left-color:#f2e660;color:#9c55ed;font-family:inherit;letter-spacing:0.045em;}.theme-jellyBean .ugsChorus{border-left-color:#f2e660;border-radius:5px 0 0 5px;}.theme-jellyBean .ugsChords code{color:#333;}.theme-jellyBean .ugsChords code em{color:#d20070;}.theme-western .scalablePrintArea{color:#88410a;}.theme-western .scalablePrintArea hgroup{color:#88410a;font-family:'Smokum', Arial, sans-serif;text-align:center;}.theme-western .scalablePrintArea h1{color:#472b07;font-family:inherit;font-size:3.3em;text-shadow:0.011em 0.037em 0 #fff, 0.055em 0.07em 0 #e5dcc0;}.theme-western .scalablePrintArea h2{font-size:1.7em;}.theme-western .scalablePrintArea h5,.theme-western .scalablePrintArea h6{border-left-color:#bed379;color:#92a88c;font-family:'Smokum', Arial, sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;}.theme-western .ugsChorus{border-left-color:#bec481;border-radius:5px 0 0 5px;}.theme-western .ugs-source-wrap pre{color:inherit;}.theme-pumpkin .scalablePrintArea{color:#68391d;}.theme-pumpkin .scalablePrintArea hgroup{color:#b14623;text-align:center;}.theme-pumpkin .scalablePrintArea h1{color:#d3770e;font-family:'Ranchers', Arial, sans-serif;font-size:3.2em;line-height:1.1;text-shadow:0.064em 0.044em 0 #edf8ce, -0.037em 0.044em 0 #edf8ce, -0.074em .094em 0 #bed379, 0.074em .094em 0 #bed379;}.theme-pumpkin .scalablePrintArea h2{font-family:'Cherry Cream Soda', cursive, sans-serif;font-size:1.1em;}.theme-pumpkin .scalablePrintArea h5,.theme-pumpkin .scalablePrintArea h6{border-left-color:#bed379;color:#ffc501;font-family:'Cherry Cream Soda', cursive, sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;}.theme-pumpkin .ugs-source-wrap pre{color:inherit;}.theme-pumpkin .ugsChorus{border-left-color:#a0b74e;border-radius:5px 0 0 5px;}.theme-pumpkin .ugsChords code em{color:#fe9600;}.theme-zombie .scalablePrintArea{color:#798666;}.theme-zombie .scalablePrintArea hgroup{color:#902374;text-align:center;}.theme-zombie .scalablePrintArea h1{color:#bed63a;font-family:'Creepster', cursive, sans-serif;font-size:3.2em;line-height:1.1;text-shadow:0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9eb036, -0.042em -0.014em 0 #8f2472, 0.087em 0.074em 0 #8f2472, -0.074em 0.094em 0 #ca4f04, 0.074em 0.174em 0 #ca4f04;}.theme-zombie .scalablePrintArea h2{font-family:'Cherry Cream Soda', cursive, sans-serif;font-size:1.1em;text-shadow:0.12em 0.13em 0 #dbdae8;}.theme-zombie .scalablePrintArea h5,.theme-zombie .scalablePrintArea h6{border-left-color:#e4dca4;color:#798666;font-family:'Peralta', cursive, sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:1em;text-shadow:0.03em 0.07em 0 #bed63a;}.theme-zombie .ugs-source-wrap pre{color:inherit;}.theme-zombie .ugsChorus{border-left-color:#cdc693;border-radius:6px 0 0 6px;}.theme-zombie .ugsChords code em{color:#dd1a52;}.theme-frosty .scalablePrintArea{color:#154286;}.theme-frosty .scalablePrintArea hgroup{color:#6a97db;text-align:center;}.theme-frosty .scalablePrintArea h1{color:#d5e2f5;font-family:'Cherry Cream Soda', cursive, sans-serif;font-size:2.18em;letter-spacing:0.05em;line-height:1.1;text-shadow:-0.064em -0.034em 0 #fff, 0.008em 0.008em 0 #a3e3d7, 0.009em -0.009em 0 #a3e3d7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183d, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286;}.theme-frosty .scalablePrintArea h2{font-family:'Ranchers', Arial, sans-serif;font-size:1.2em;}.theme-frosty .scalablePrintArea h5,.theme-frosty .scalablePrintArea h6{border-left-color:#e3f7f3;color:#80b7b1;font-family:'Cherry Cream Soda', cursive, sans-serif;font-size:1.4em;font-style:normal;padding:0;text-indent:0.6em;}.theme-frosty .ugs-source-wrap pre{color:inherit;}.theme-frosty .ugsChorus{border-left-color:#0896fe;border-radius:6px 0 0 6px;}.theme-frosty .ugsChords code em{color:#0896fe;}.theme-krampus .scalablePrintArea{color:#929867;}.theme-krampus .scalablePrintArea hgroup{color:#929867;text-align:center;}.theme-krampus .scalablePrintArea h1{color:#a22c27;font-family:'Lobster', cursive, sans-serif;font-size:2.78em;line-height:1.1;text-shadow:0.036em 0.04em 0 #fcece8, 0.05em 0.08em 0 #4f2621, 0.02em 0.08em 0 #4f2621;}.theme-krampus .scalablePrintArea h2{font-family:'Peralta', cursive, sans-serif;font-size:1.2em;text-shadow:0.03em 0.03em 0 #fff, 0.08em 0.1em 0 #ebd592;}.theme-krampus .scalablePrintArea h5,.theme-krampus .scalablePrintArea h6{border-left-color:#7b8055;color:#a32c28;font-family:'Peralta', cursive, sans-serif;font-size:1.2em;font-style:normal;padding:0;text-indent:0.6em;}.theme-krampus .ugs-source-wrap pre{color:inherit;}.theme-krampus .ugsChorus{border-left-color:#b9c97e;border-radius:6px 0 0 6px;}.theme-krampus .ugsChords code em{color:#384030;}.theme-notebook .scalablePrintArea{color:#437;font-family:'Architects Daughter', Arial, sans-serif;}.theme-notebook .scalablePrintArea hgroup{color:#2e2ecc;font-family:inherit;text-align:center;}.theme-notebook .scalablePrintArea h1{border-color:#e4e4ff;border-style:solid;border-width:1px 0;color:#252537;font-family:'Permanent Marker', Arial, sans-serif;font-size:2em;margin-bottom:0.2em;}.theme-notebook .scalablePrintArea h2{border-bottom:1px solid #e4e4ff;font-size:1.1em;}.theme-notebook .scalablePrintArea h5,.theme-notebook .scalablePrintArea h6{border-left-color:#626283;color:#2e2ecc;font-family:'Permanent Marker', Arial, sans-serif;font-size:1.3em;padding:0;text-indent:0.7em;}.theme-notebook .ugs-source-wrap pre{color:inherit;}.theme-notebook .ugsChorus{border-left-color:#a4a0b2;border-radius:6px 0 0 6px;}.theme-notebook .ugsChords code{font-family:inherit;}.theme-justBlack .ugs-source-wrap h5,.theme-justBlack .ugs-source-wrap h6{color:#000;font-family:'Bree Serif', Arial, sans-serif;font-style:normal;}.theme-justBlack .ugsChords code em{color:#000;font-weight:bold;}.theme-justBlack .scalablePrintArea hgroup,.theme-justBlack .scalablePrintArea hgroup *{font-family:'Bree Serif', Arial, sans-serif;font-style:normal;}.theme-justBlack .scalablePrintArea hgroup{text-align:center;}.scalablePrintArea{-moz-transform-origin:0 0;-webkit-transform-origin:0 0;background-color:#fff;border-right:solid 1px #888;font-size:inherit;-moz-box-shadow:3px 0 9px rgba(0,0,0,0.4);-webkit-box-shadow:3px 0 9px rgba(0,0,0,0.4);box-shadow:3px 0 9px rgba(0,0,0,0.4);}.scalablePrintArea hgroup{padding-bottom:.15in;}html .ugsHideDiagrams .ugs-diagrams-wrap{display:none;}html .ugsHideDiagrams .ugs-source-wrap{margin-left:0;}html .diagramsOnTop .ugs-diagrams-wrap{float:none;width:auto;}html .diagramsOnTop .ugs-source-wrap{margin-left:0;}.ugsNoChords .ugs-source-wrap{margin-left:0;}.diagramsOnSide .ugs-diagrams-wrap{float:left;width:225px;}.diagramsOnSide .ugs-source-wrap{margin-left:250px;}.liBtn,.liBtn *{cursor:pointer;}.pageWidth_letter .scalablePrintArea{width:8in;padding:0.2in;min-height:10.5in;}.pageWidth_a4 .scalablePrintArea{width:19cm;padding:1cm;min-height:28cm;}.pageWidth_screen .scalablePrintArea{padding:20px;}.scalablePrintArea .ugs-diagrams-wrap canvas{zoom:1;}.scalablePrintArea .ugs-diagrams-wrap{zoom:1;}.scalablePrintArea .ugs-source-wrap{zoom:1;}.aceEditorActive,.aceEditorActive body{overflow:hidden;height:100%;width:100%;margin:0;padding:0;}.aceEditorActive #aceHeader{display:block;}.aceEditorActive .ugsAppMenuBar,.aceEditorActive .overlay,.aceEditorActive .scalablePrintArea{display:none;}#aceHeader{border-bottom:solid 1px;font-family:arial, sans-serif;font-size:1;line-height:40px;height:40px;padding:0 15px;display:none;}#aceHeader a{float:right;font-size:0.87em;line-height:inherit;color:inherit;text-decoration:none;}#aceHeader a:hover{color:#cc7833;text-decoration:none;}#aceEditor{position:absolute;top:40px;right:0;bottom:0;left:0;}.aceSideBtn{background-color:rgba(0,0,0,0);border:1px solid #ddd;border-radius:4px;cursor:pointer;float:left;margin:7px 0.8em 0 0;-webkit-transition:background-color .3s ease;-moz-transition:background-color .3s ease;-ms-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease;}.aceSideBtn span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#888;border-radius:1px;display:block;height:2px;margin:4px 2px;width:16px;-webkit-transition:background-color .3s ease;-moz-transition:background-color .3s ease;-ms-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease;}.aceSideBtn:hover{background-color:#333;}.aceSideBtn:hover span{background-color:#eee;}#aceHelp{bottom:0;left:-350px;margin:0;position:absolute;top:40px;width:350px;}#aceHelp{background:#fff;color:#707273;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;overflow-y:auto;text-align:left;}.aceHelp{border-top:2px solid #333;padding:1em .6em;}.aceHelp h1,.aceHelp h3{color:#222;font-size:2.5em;font-weight:500;line-height:1em;margin:0 0 1em;}.aceHelp h3{font-size:1.3em;}.aceHelp p{line-height:1.6em;margin:0 0 1em;}.aceHelp table{margin:20px 0 10px;}.aceHelp strong{font-weight:bold;}.aceHelp td,.aceHelp th{color:#787878;padding:0 .8em .8em 0;vertical-align:baseline;}.aceHelp th{font-weight:bold;}.aceHelp .key{background-color:#666;border:0 none;border-radius:.22em;color:#fff;font-family:Arial;display:inline-block;font-size:.71em;font-weight:bold;line-height:1.1;padding:.22em .4em;text-transform:uppercase;}.aceHelp .shortKeys{white-space:nowrap;padding-right:1.4em;} \ No newline at end of file diff --git a/src/css/editor/ugsEditorPlus.aceEditor.less b/src/css/editor/ugsEditorPlus.aceEditor.less deleted file mode 100644 index 2d1d604..0000000 --- a/src/css/editor/ugsEditorPlus.aceEditor.less +++ /dev/null @@ -1,150 +0,0 @@ -/* - * Document : ugsEditorPlus.aceEditor.css - * Author : Buz - * Description: Ace WYSIWYG Editor - */ -.aceEditorActive, -.aceEditorActive body { - overflow: hidden; - height: 100%; - width: 100%; - margin: 0; - padding: 0; -} -/* using jQuery instead: .aceEditorActive #aceEditor */ -.aceEditorActive { - #aceHeader{ - display: block; - } - .ugsAppMenuBar, - .overlay, - .scalablePrintArea{ - display: none; - } -} -#aceHeader { - border-bottom: solid 1px; - font-family: arial,sans-serif; - font-size: 1; - line-height: 40px; - height:40px; - padding:0 15px; - display: none; - a{ - float: right; - font-size: 0.87em; - line-height: inherit; - color: inherit; - text-decoration: none; - } - a:hover{ - color: #CC7833;/*F92672;*/ - text-decoration: none; - } -} -#aceEditor { - /* using jQuery instead: display: none;*/ - position: absolute; - top: 40px; - right: 0; - bottom: 0; - left: 0; -} -/* Show/Hide Sidebar Button - ------------------------------------------ */ -.aceSideBtn { - background-color: rgba(0, 0, 0, 0); - border: 1px solid #DDDDDD; - border-radius: 4px; - cursor: pointer; - float:left; - margin: 7px 0.8em 0 0; - transition: background-color .3s ease; - span { - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - background-color: #888888; - border-radius: 1px; - display: block; - height: 2px; - margin: 4px 2px; - width: 16px; - transition: background-color .3s ease; - } -} -.aceSideBtn:hover{ - background-color: #333; - span { - background-color: #eee; - } -} - -/* Help sidebar - ------------------------------------------ */ -#aceHelp { - bottom: 0; - left: -350px; - margin: 0; - position: absolute; - top: 40px; - width:350px; -} -#aceHelp { - background: #fff; - color: #707273; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 12px; - overflow-y: auto; - text-align: left; -} -.aceHelp { - border-top: 2px solid #333; - padding: 1em .6em; - - h1, h3 { - color: #222222; - font-size: 2.5em; - font-weight: 500; - line-height: 1em; - margin: 0 0 1em; - } - h3{ - font-size: 1.3em; - } - p { - line-height: 1.6em; - margin: 0 0 1em; - } - table { - margin: 20px 0 10px; - } - strong { - font-weight: bold; - } - td, th { - color: #787878; - padding: 0 .8em .8em 0; - vertical-align: baseline; - } - th{ - font-weight: bold; - } - .key { - background-color: #666; - border: 0 none; - border-radius: .22em; - color: #FFF; - font-family: Arial; - display: inline-block; - font-size: .71em; - font-weight: bold; - line-height: 1.1; - padding: .22em .4em; - text-transform: uppercase; - } - .shortKeys{ - white-space: nowrap; - padding-right: 1.4em; - } -} diff --git a/src/css/editor/ugsEditorPlus.arrowBox.less b/src/css/editor/ugsEditorPlus.arrowBox.less deleted file mode 100644 index 25f8760..0000000 --- a/src/css/editor/ugsEditorPlus.arrowBox.less +++ /dev/null @@ -1,224 +0,0 @@ -/* - * Document : ugsEditorPlus.arrowBox.css - * Author : Buz - * Description: The menu boxes and their contents. - */ -/* Thanks to: cssarrowplease.com - -------------------------------- */ -.arrowBox { - background-color: rgba(0, 0, 0, 0.81); - border: 2px solid #fff; - border-radius: 10px; - color:#b3b3b3; - display: none; - position: fixed; - top: 60px; - width: 310px; - -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - z-index: 5; - - &:after, - &:before { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &:after { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: #000; - border-width: 20px; - left: 50%; - margin-left: -20px; - } - - &:before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; - border-width: 23px; - left: 50%; - margin-left: -23px; - } -} - .arrowBoxContent{ - padding: 1em .6em .4em; - } - .arrowBoxContent + .arrowBoxContent{ - padding-top:0; - } - -/* --------------------------------------- */ -.enablePseudoSelects { - dt, - dd { - height: 3em; - line-height: 1; - margin: 0; - padding: 0; - } - dd { - display:none; - left: 16.1em; - position: relative; - top: -3.1em; - height: 0px; - } - label { - color: #E4E4E4; - display: block; - cursor: pointer; - border: solid 1px transparent; - border-radius: 7px; - padding: 0.5em; - - &:hover { - color:#fff; - background-color: #2A2A2A; - border-color: #555; - box-shadow: 2px 2px 2px #000; - - em { - color:#E4E4E4; - } - } - } - - label em{ - color: #898989; - float: right; - font-family: Arial; - } -} -.event-userSelecting label { - color:#B9B9B9; - em { - color:#3a3a3a; - } -} -html .active label { - background-color: #000; - color: #fff; -} -/* --------------------------------------- */ -.pseudoSelect { - position: absolute; - background-color: #3C3C3C; - border: solid 1px #555; - border-radius: 7px; - box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); - color: #EFEFEF; - cursor: pointer; - width: 17em; - - a { - border: 2px solid transparent; - border-radius: 10px; - color: inherit; - display: block; - padding: 0.5em 0.5em 0.5em 30px; - text-decoration: none; - } - - li { - display: block; - float: none; - margin: 0; - padding: 0.1em; - text-align: inherit; - - &:hover { - color: #fff; - - a { - background-color: #000; - border-color: #676767; - } - } - } - - .checked a { - background: url("../img/editor/checked.png") no-repeat scroll 10px center #2A2A2A; - border-color: #C5C5C5; - color: #FFFFFF; - text-shadow:1px 2px 1px #000; - } -} -/* our Checkboxes are a problem... --------------------------------- */ -.checkboxBlock { - border-top: 1px solid #575757; - box-shadow: 0 -1px 0 #000; - font-size: 0.81em; - padding: 0.75em 0; - - label { - padding-left: 0.5em; - } -} -.checkBoxFinePrint{ - display: block; - font-size:.85em; - padding: 0.3em 0 0.5em 3.1em; -} -#commonChordList { - display: block; - font-size: 1.2em; - margin-left: 1.5em; - width: 15em; -} - -/* list of links (duh) - * ...undoing some spill-over styles, when will I learn - -------------------------------- */ - .linksList { - font-size: .85em; - li { - margin: 0; - padding: 0.1em; - text-align: left; - float: none; - } - a { - border-radius: 8px; - color: #B9B9B9; - display: block; - padding: 0.6em; - text-decoration: none; - - &:hover { - background-color: #000; - color:#fff; - } - } -} -/* Feedback message -- on UPDATE --------------------------------- */ -.updateMessage { - background-color: #BAE5A7; - border: 1px solid #44A819; - border-radius: 4px 4px 4px 4px; - box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); - color: #43772D; - display: none; - position: absolute; - text-align: center; - text-shadow: 0 -1px rgba(255, 190, 40, 0.3); - width: 10em; - - em { - border: 1px solid #66D836; - border-radius: 3px 3px 3px 3px; - box-shadow: 0 0 3px #559277 inset; - display: block; - height: 100%; - padding: 0.2em; - } -} diff --git a/src/css/editor/ugsEditorPlus.buttons.less b/src/css/editor/ugsEditorPlus.buttons.less deleted file mode 100644 index c5df507..0000000 --- a/src/css/editor/ugsEditorPlus.buttons.less +++ /dev/null @@ -1,116 +0,0 @@ -/* - * Document : ugsEditorPlus.buttons.css - * Author : Buz - * Description: All editor's buttons and button-like links. - */ - -/* "base button" is rounded & gray with white text */ -.baseBtn { - background-color: #999; - border: 1px solid #333; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - color: #FFF; - cursor: pointer; - font-size: inherit; - font-weight: bold; - padding: 0.2em 1em; - text-align: center; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); - /* Remove underline in case this is applied to a link */ - - text-decoration: none; - &:hover { - background-color: #888; - /* Force colorin case this is applied to a link */ - - color: #fff; - } -} - -.blueBtn { - background-color: #89b9e3; - background-image: -moz-linear-gradient(top, #89b9e3, #3d6bbb); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')"; - border-color: #3765B7; - text-shadow: #89b9e3 0px 1px 0, #3765b7 0 -1px 0; - &:hover { - background-color: #4c85e8; - background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; - text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; - } -} - -/* orange */ -.orange { - color: #fef4e9; - border: solid 1px #da7c0c; - background: #f78d1d; - background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); - background: -moz-linear-gradient(top, #faa51a, #f47a20); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); - text-shadow: #da7c0c 0px 1px 0, #faa51a 0 -1px 0; - &:hover { - background: #f47c20; - background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); - background: -moz-linear-gradient(top, #f88e11, #f06015); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); - text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; - } - &:active { - color: #fcd3a5; - background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); - background: -moz-linear-gradient(top, #f47a20, #faa51a); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); - } -} - -.btnBar { - height: 30px; - - .baseBtn { - float: right; - font-size: 110%; - margin-bottom: 5px; - } -} -/* "Cancel"/"No Thanks" (subtle, alternate) buttons ------------------------------- */ -.alternateBtn, -.noThanks { - color: #3965B0; - float: right; - line-height: 33px; - margin-right: 1.5em; - text-decoration: none; - - &:hover { - color:#0646AD; - } -} - -.noThanks { - background-color: #EFD292; - border-radius: 6px; - padding: 0 0.4em; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - -o-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; - - &:hover { - background-color: #F2E2C1; - } -} - -.alternateBtn { - -} diff --git a/src/css/editor/ugsEditorPlus.chordBuilder.less b/src/css/editor/ugsEditorPlus.chordBuilder.less deleted file mode 100644 index f5986ed..0000000 --- a/src/css/editor/ugsEditorPlus.chordBuilder.less +++ /dev/null @@ -1,327 +0,0 @@ -/* - * Document : ugsEditorPlus.chordBuilder.css - * Author : Buz - * Description: delicate positioning of chord builder's canvas and toolbox controls. - */ -/* Chord Builder's elements ------------------------------- */ -.chordBuilderDlg { - input[type=text] { - border: 1px solid #D7D7D7; - border-radius: 5px 5px 5px 5px; - display: block; - font-size: 30pt; - padding: 0; - text-align: center; - max-width: 100%; - width: 100%; - } - pre { - font-size: 12pt; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; - } -} -/* ** canvas & editor stack */ -html body .editorSurface { - background-color: #fff; - border-radius: 5px ; - font-size: 0.9em; - height: 300px; - margin: 5px auto; - overflow: hidden; - padding: 0; - position: relative; - width: 462px; - -moz-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - -webkit-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; -} -/* ** stacking order ** */ -.editorSurface canvas { - border:none; - cursor:none; - left: 0; - position: absolute; - top: 0; -} -#cdBldDiagramCanvas { - z-index: 1; -} -#cdBldCursorCanvas { - z-index: 2; -} -.chordToolbox { - z-index: 3; -} -.toolboxEdgeShadow { - z-index: 4; -} -/* -- toolbox and its contents -- */ -.chordToolbox{ - border: 0 solid #ccc; - background-color: #F0EEF0;/*464646;*/ - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - height: 250px; - position: absolute; - top: 25px; - width: 135px; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -moz-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -ms-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -o-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; -} -.chordToolbox.open, -.chordToolbox:hover { - background-color: #fafafa; - border-color:#8C8C8C; - box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.3); -} -.chordToolbox.leftEdge { - border-radius: 0 7px 7px 0; - border-width: 2px 2px 2px 0; - left: -110px; -} -.chordToolbox.leftEdge.open, -.chordToolbox.leftEdge:hover { - left: 0; -} -.chordToolbox.rightEdge { - border-radius: 7px 0 0 7px; - border-width: 2px 0 2px 2px; - right: -110px; -} -.chordToolbox.rightEdge.open, -.chordToolbox.rightEdge:hover { - right: 0; -} -.chordToolboxInner{ - margin: 10px auto; - width: 100px; -} -/* forceed shadow over toolbox(es) */ -.toolboxEdgeShadow { - background-color: transparent; - height: 255px; - position: absolute; - top: 26px; - width: 10px; -} - -.toolboxEdgeShadow.leftEdge{ - box-shadow: 4px 0 6px rgba(0, 0, 0, 0.3); - left: -10px; -} -.toolboxEdgeShadow.rightEdge{ - box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3); - right: -10px; -} -/* --- */ -.toolChip { - background-color: #fafafa; - border: 1px solid #fafafa; - border-radius: 5px; - color: #C7681B; - cursor: pointer; - display: block; - margin-bottom:8px; - min-height: 70px; - padding: 5px 0; - text-align: center; - text-decoration: none; - width: 100%; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease, border-color 0.4s ease; - -moz-transition: background-color 0.4s ease, border-color 0.4s ease; - -ms-transition: background-color 0.4s ease, border-color 0.4s ease; - -o-transition: background-color 0.4s ease, border-color 0.4s ease; - transition: background-color 0.4s ease, border-color 0.4s ease; -} -.toolChip:hover { - background-color: #FEFEFE; - border: 1px solid #EDEDED; -} -html .selected, -html .selected:hover { - border-color: #AAA73F; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -} -#cdBldBtnFingerName { - color: #806753; - display: block; - font-size: .67em; -} -.bigDot { - background-color: #E78333; - border: 3px solid #973100; - border-radius: 23px 23px 23px 23px; - display: block; - height: 23px; - margin: 5px auto; - width: 23px; -} -/* some "active" button (hover) efx */ -.toolChip img, -.toolChip .bigDot { - opacity: .75; -} -.selected img, -.selected .bigDot, -.toolChip:hover img, -.toolChip:hover .bigDot { - opacity: 1; -} -/* hand */ -.fingerToolImage { - background: url("../img/editor/hand.png") top center no-repeat; - display:block; - height: 83px; - margin: 0 auto; - position: relative; - width: 88px; -} -.fingerDot { - background-color: #F9F340; - border:solid 2px #AF9607; - border-radius: 8px; - display: block; - height: 8px; - position: absolute; - width: 8px; -} -.finger0 .fingerDot { - display:none; -} -.finger1 .fingerDot { - right: 22px; - top: 3px; -} -.finger2 .fingerDot { - right: 1px; - top: 11px; -} -.finger3 .fingerDot { - right: 1px; - top: 28px; -} -.finger4 .fingerDot { - right: 1px; - top: 44px; -} -/* sliders (up/down arrows) */ -label[for=cdBldStartingFret], -html .arrowUp, -html .arrowDown{ - min-height: 52px; -} -html .arrowUp, html .arrowDown { - background-repeat: no-repeat; - background-position: center 29px; -} -html .arrowUp { - background-image: url("../img/editor/basic-up-arrow.png"); -} -html .arrowDown { - background-image: url("../img/editor/basic-down-arrow.png"); -} -/* output area */ -.outputBox{ - max-height: 30em; - overflow: hidden; - -webkit-transition: max-height 0.8s ease; - -moz-transition: max-height 0.8s ease; - -o-transition: max-height 0.8s ease; - -ms-transition: max-height 0.8s ease; - transition: max-height 0.8s ease; -} -.outputBox.collapseOutput{ - max-height: 0; -} - -/* ________ colorized chordPro defintion ________ */ -.chordPro-statement { - background-color:#f9f9f9; - border:solid 1px #bbb; - color: #999; - font-family: Consolas, 'courier new', monospace; - /* font-size: 14px; */ - padding:1em; -} -.chordPro-keyword { - color: #8e7cc3; -} -.chordPro-attribute { - color: #741b47; -} -.chordPro-number { - color: #e69138; - font-weight:bold; -} -.chordPro-string { - background-color: #EDF7E6; - color: #38761d; - font-weight:bold; -} -/* ________ Chord Chooser (List) ________ */ -.ugsChordChooser { - background-color: #eed18e; - border-radius: 10px; - color: #551d00;/* #f4e19d; */ - font-size: 14pt; - max-height: 17em; - min-height: 10em; - overflow-y: auto; - padding: .1em 0; - - li { - background-color: #bc9350; - border-radius: 6px; - cursor: pointer; - margin: 0.5em; - padding: 0.5em; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - -o-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; - } - li:hover { - background-color: #99512c; - color: #f4e19d; /* #ffdb5b; */ - text-shadow: 0px 2px 0px #551D00; - } - .newChord { - background-color: #b2612d; - color: #551d00; - font-weight: bold; - } - // delete button - .deleteChord { - background: url("../img/editor/delete-btn.png") right center no-repeat; - display: block; - float: right; - height: 30px; - opacity: 0; - width: 36px; - /* backwards transition support */ - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - -o-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; - } - li:hover .deleteChord { - opacity: 1; - } - // mini-diagram - canvas { - float: right; - margin-right: 10px; - } -} diff --git a/src/css/editor/ugsEditorPlus.less b/src/css/editor/ugsEditorPlus.less deleted file mode 100644 index 3633016..0000000 --- a/src/css/editor/ugsEditorPlus.less +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Document : ugsEditorPlus - * Created on : July 2013 - * Author : Buz - * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. -*/ -.salt_8873ySp8 { - color:#0ff; -} diff --git a/src/css/editor/ugsEditorPlus.menuBar.less b/src/css/editor/ugsEditorPlus.menuBar.less deleted file mode 100644 index d65d111..0000000 --- a/src/css/editor/ugsEditorPlus.menuBar.less +++ /dev/null @@ -1,157 +0,0 @@ -/* - * Document : ugsEditorPlus.menuBar.css - * Author : Buz - * Description: The top main application menu bar. - */ -/** - * Help on hiding the select scroll bars: - * http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element - * @import url(http://fonts.googleapis.com/css?family=Peralta); - *-------------- */ - html, body { - margin: 0; - padding: 0; - } - body { - position:relative; - padding-top: 40px; - } - .editableSongPage{ - background-color:#EDECEA; - } -/* LOGO --------------------------------- */ -.ugsLogo { - color: #F2A848; - font-family: 'Peralta', cursive; - font-size: 16px; - font-weight: normal; - position: absolute; - right: 1em; - text-shadow: 1px 1px #332222; -} - -/* App --------------------------------- */ -.ugsAppMenuBar { - background: #933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x; - -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - border-top: 1px solid #84623c; - border-bottom: 1px solid #240e01; - font: 17px/38px Helvetica, Arial; - height: 40px; - min-width: 910px; - padding-left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 2; -} -.ugsAppMenuBar > ul { - margin-left: 10px; -} -.ugsAppMenuBar > ul > li { - float: left; - position: relative; -} -.ugsAppMenuBar > ul > li > a { - border: solid 1px transparent; - color: #f4e19f; - cursor: pointer; - display: block; - float: left; - height: 38px; - line-height: 38px; - outline: 0 none; - padding: 0 15px 0 5px; - text-decoration: none; - text-shadow: 1px 2px 0 rgba(86, 3, 5, 0.95); -} -.ugsAppMenuBar > ul > li > a:hover { - border-color: #600000; - background-color: #451212; - background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; - color: #fdda61; - text-shadow: none; -} -.ugsAppMenuBar > ul > .active > a { - background-color: #451212; - background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; - color: #fef5e3; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -} -/* Icons/Sprits --------------------------------- */ -.ugsAppMenuBar > ul > li > a span { - background-image: url("../img/editor/editorSprite.png"); - background-repeat: no-repeat; - float: left; - height: 25px; - margin-top: 7px; - width: 25px; -} -.navSong span { - background-position: -75px 0px; -} -.navSong.active span, -.navSong a:hover span { - background-position: -75px -50px; -} -.navInstruments span { - background-position: -50px 0px; -} -.navInstruments.active span, -.navInstruments a:hover span { - background-position: -50px -50px; -} -.navTranspose span { - background-position: -25px 0px; -} -.navTranspose.active span, -.navTranspose a:hover span { - background-position: -25px -50px; -} -.navDiagrams span { - background-position: 0px 0px; -} -.navDiagrams.active span, -.navDiagrams a:hover span { - background-position: 0px -50px; -} -.navLayout span { - background-position: -100px 0px; -} -.navLayout.active span, -.navLayout a:hover span { - background-position: -100px -50px; -} -.navColors span { - background-position: -125px 0px; -} -.navColors.active span, -.navColors a:hover span { - background-position: -125px -50px; -} -.navZoom span { - background-position: -150px 0px; -} -.navZoom.active span, -.navZoom a:hover span { - background-position: -150px -50px; -} -.navEdit span { - background-position: -175px 0px; -} -.navEdit.active span, -.navEdit a:hover span { - background-position: -175px -50px; -} -.navOptions span { - background-position: -200px 0px; -} -.navOptions.active span, -.navOptions a:hover span { - background-position: -200px -50px; -} \ No newline at end of file diff --git a/src/css/editor/ugsEditorPlus.overlays.less b/src/css/editor/ugsEditorPlus.overlays.less deleted file mode 100644 index fd412de..0000000 --- a/src/css/editor/ugsEditorPlus.overlays.less +++ /dev/null @@ -1,267 +0,0 @@ -/* - * Document : ugsEditorPlus.overlays.css - * Author : Buz - * Description: Generic and use-spedific Overlay/Dialog box elements. - */ -/* FLOATIN EDITOR --------------------------------- */ -.overlay { - position:fixed; - top:45px; - right:20px; - background-color: #2B1100; - background-color: rgba(30, 11, 0, 0.75); // rgba(43, 17, 0, 0.80); - -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -moz-border-radius: 22px; - -webkit-border-radius: 22px; - border-radius: 22px; - padding: 10px; - width: 490px; - z-index:0; -} -.overlay > div { - background: url("../img/editor/woodChip.png") repeat scroll 0 0 transparent; - border-radius: 0 0 13px 13px; - overflow: hidden; - padding: 10px; -} - -// .overlay div div{ -// background-image: none; -// border-radius:0; -// padding: 0; -// } - -/* MOVED FROM PAGE: SECTION 4 ------------------------------- */ -.isHidden { - display:none; -} - -/* Form inputs, ------------------------------------ */ -.overlay { - select{ - font-size: 1.1em; - } - input[type=text], - input[type=password] { - display: block; - font-size: 1.2em; - margin-bottom: .4em; - padding: 0.1em; - width: 98%; - } - textarea { - font-family: Monaco, "Consolas", "Lucida Console", "Courier New", courier, monospace; - font-size: 10pt; - line-height: 1.25; - padding-left: .3em; - white-space: nowrap; - white-space:pre; - overflow:scroll; - height:525px; - width: 98%; - } - - input[type=text], - input[type=password], - textarea { - background-color: rgba(255, 255, 255, 0.7); - border: solid 1px #E1B166; - max-width: 100%; - max-height: 100%; - -webkit-transition: background-color 500ms linear; - -moz-transition: background-color 500ms linear; - -o-transition: background-color 500ms linear; - -ms-transition: background-color 500ms linear; - transition: background-color 500ms linear; - - &:hover { - background-color:rgba(255, 255, 200, 0.7); - border-color:#444; - } - &:focus { - background-color:rgba(255, 255, 255, 0.9); - border-color: #6C280C; - -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - } - } - - h3 { - // cursor: move; - background: url("../img/editor/editorSprite.png") repeat-x 0 -100px #933f17; - border-bottom: 1px solid #240E01; - border-radius: 12px 12px 0 0; - border-top: 1px solid #84623C; - color: #F4E19F; - font-size: 22px; - // font-weight: bold; - height: 37px; - line-height: 37px; - padding: 0 20px; - text-shadow: 1px 2px 0 #592108; - } - .closeBtn { - background: url("../img/editor/closeBtn.png") no-repeat 0 0 transparent; - display: block; - height: 30px; - outline: none; - position: absolute; - right: 10px; - text-indent: -5000em; - top: 14px; - width: 30px; - } - .resizeBtn { - background: url("../img/editor/resizeBtn.png") no-repeat 0 0 transparent; - display: block; - height: 20px; - outline: none; - position: absolute; - right: 55px; - text-indent: -5000em; - top: 18px; - width: 20px; - } -} -/* _________ Specific Overlays _________ */ -html .helpDlg { - top:75px; - right:70px; - width: 300px; - z-index:1; -} -html .optionsDlg { - top:100px; - right:210px; - width: 380px; - z-index:2; -} -.optionsDlg div { - font-size:.91em; -} -.optionsDlg div li { - padding-bottom:.82em; -} -/* _________ Chord Builder Dialog _________ */ -.chordBuilderDlg { - right: 210px; - top: 70px; - width: 490px; - // backwards transition support - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -html .chordBuilderNarrow{ - width: 345px; -} -/* STANDARD appearance HTML for Help Section --------------------------------- */ -.helpDlg { - font-size:.9em; -} -.normalHtml { - p, - ul, - ol { - margin-bottom:1em; - } - li { - list-style: disc outside none; - margin-left: 1em; - padding-bottom:.4em; - } - h3 { - font-size:1.2em; - font-weight:bold; - } -} -/* Reformat Dialog ------------------------------- */ -.reformatDlg { - right: 25%; - top: 100px; - width: 480px; - z-index: 3; -} -.instructions { - width: 28em; - padding:0 0 .7em; - color:#563324; -} -.instructions.small { - clear:both; - font-size:.8em; - display:block; - width: 35em; -} -html .reformatDlg textarea{ - height: 15em; -} - -/* postitioning the drop-down menus & arrows --------------------------------------- */ -.layoutOptions { - left: 50px; - &:after, - &:before { - left:22%; - } -} - -.tuningOptions { - left:150px; -} - -#transposeOptions em { - color: #CCCCCC; - float: right; - font-size: 0.86em; -} - -.otherOptions { - left: 250px; -} -.helpOptions { - left: 320px; -} - -.hasSongbookLink { - .layoutOptions:after, - .layoutOptions:before { - left: 72%; - } - - .tuningOptions { - left: 250px; - } - - // OTHER - .otherOptions { - left: 300px; - &:after, - &:before { - left: 70%; - } - } - - // HELP - .helpOptions { - left: 340px; - &:after, - &:before { - left: 80%; - } - } - -} - - diff --git a/src/css/editor/ugsEditorPlus.song.less b/src/css/editor/ugsEditorPlus.song.less deleted file mode 100644 index 8443163..0000000 --- a/src/css/editor/ugsEditorPlus.song.less +++ /dev/null @@ -1,83 +0,0 @@ -/* - * Document : ugsEditorPlus.song.css - * Author : Buz - * Description: Classes affecting song layout and style; Critical to Scriptasaurus presentation. - * Important! This should be the last file in the CSS bundle. - */ -.scalablePrintArea { - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - background-color: #fff; - border-right:solid 1px #888; - font-size: inherit; - box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); - - hgroup { - padding-bottom: .15in; - } -} - -/* Alternate Layouts: Hide Diagrams --------------------------------- */ -html .ugsHideDiagrams { - .ugs-diagrams-wrap { - display: none; - } - .ugs-source-wrap { - margin-left: 0; - } -} - -/* Alternate Layouts: Chord Diagrams On Top: --------------------------------- */ -html .diagramsOnTop { - .ugs-diagrams-wrap { - float: none; - width: auto; - } - .ugs-source-wrap { - margin-left: 0; - } -} -.ugsNoChords .ugs-source-wrap{ - margin-left: 0; -} - -/* Alternate Layouts: standard Two Column ------------------------------- */ -.diagramsOnSide { - .ugs-diagrams-wrap { - float: left; - width: 225px; - } - .ugs-source-wrap { - margin-left: 250px; - } -} -.liBtn, .liBtn * { - cursor: pointer; -} - -/* page widths --------------------------------- */ -.pageWidth_letter .scalablePrintArea { - width: 8in; - padding:0.2in; - min-height:10.5in; -} -.pageWidth_a4 .scalablePrintArea { - width: 19cm; - padding:1cm; - min-height:28cm; -} -.pageWidth_screen .scalablePrintArea { - padding:20px; -} - -/* redundant rule to allow JS hook --------------------------------- */ -/* NOTE: this should be last set of rules in this file! */ -// To prevent LESS compiler from removing them we need at least one rule, so using "zoom" -.scalablePrintArea .ugs-diagrams-wrap canvas{ zoom: 1;} -.scalablePrintArea .ugs-diagrams-wrap{ zoom: 1;} -.scalablePrintArea .ugs-source-wrap{ zoom: 1;} diff --git a/src/css/editor/ugsEditorPlus.themes.less b/src/css/editor/ugsEditorPlus.themes.less deleted file mode 100644 index 2274ea3..0000000 --- a/src/css/editor/ugsEditorPlus.themes.less +++ /dev/null @@ -1,375 +0,0 @@ -/* - * Document : ugsEditorPlus.themes.css - * Author : Buz - * Description: Alternative color schemes. - */ - -/* __________ Reverse __________ */ -.theme-reversed { - background-color: #000; - color: #FFF; - - pre { - color: #e9e9e9; - } - .scalablePrintArea{ - background-color: transparent; - h5, - h6 { - border-left-color: #444; - color: #69F; - } - } - .ugsChorus { - border-left-color: #333; - } - .ugsChords { - code { - color: #333; - em { - color: #F42; - } - } - - } - /* unique to the reversed theme we need to harden editor's UI */ - .subNav a:hover { - background-color: #888; - color: #000; - } - .overlay { - background-color: #4E1C07; - box-shadow: none; - color: #000; - } -} - -/* __________ Jelly Bean __________ */ -.theme-jellyBean { - pre { - color: inherit; - } - .scalablePrintArea { - color: #56A0A5; - font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif; - hgroup { - color: #FF9417; - text-align: center; - } - h1 { - color: #D20770; - font-family: 'Peralta',cursive, sans-serif; - font-size: 2em; - text-shadow: 0.03125em 0.0625em 0 #FFFFFF, 0.09375em 0.125em 0 #F2E660; - } - h2 { - font-size: 1.1em; - } - h5, - h6 { - border-left-color: #F2E660; - color: #9C55ED; - font-family: inherit; - letter-spacing: 0.045em; - } - } - .ugsChorus { - border-left-color: #F2E660; - border-radius: 5px 0 0 5px; - } - .ugsChords { - code { - color: #333; - em { - color: #D20070; - } - } - } -} - -/* __________ Western __________ */ -.theme-western { - .scalablePrintArea{ - color: #88410A; - hgroup{ - color: #88410A; - font-family: 'Smokum',Arial, sans-serif; - text-align: center; - } - h1 { - color: #472B07; - font-family: inherit; - font-size: 3.3em; - text-shadow: 0.011em 0.037em 0 #FFFFFF, 0.055em 0.07em 0 #E5DCC0; - } - h2{ - font-size: 1.7em; - } - h5, h6 { - border-left-color: #BED379; - color: #92A88C; - font-family: 'Smokum',Arial, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; - } - } - .ugsChorus { - border-left-color: #BEC481; - border-radius: 5px 0 0 5px; - } - .ugs-source-wrap pre { - color: inherit; - } -} - -/* __________ Pumpkin (Halloween 1) __________ */ -.theme-pumpkin { - .scalablePrintArea { - color: #68391D; - hgroup{ - color: #B14623; - text-align: center; - } - h1 { - color: #D3770E; - font-family: 'Ranchers',Arial,sans-serif; - font-size: 3.2em; - line-height: 1.1; - text-shadow: 0.064em 0.044em 0 #EDF8CE, -0.037em 0.044em 0 #EDF8CE, -0.074em .094em 0 #BED379, 0.074em .094em 0 #BED379; - } - h2{ - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.1em; - } - h5, h6 { - border-left-color: #BED379; - color: #FFC501; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; - } - } - .ugs-source-wrap pre { - color: inherit; - } - .ugsChorus { - border-left-color: #A0B74E; - border-radius: 5px 0 0 5px; - } - .ugsChords { - code em { - color: #FE9600; - } - } -} - -/* __________ Zombie (Halloween II) __________ */ -.theme-zombie { - .scalablePrintArea { - color: #798666; - hgroup{ - color: #902374; - text-align: center; - } - h1 { - color: #BED63A; - font-family: 'Creepster',cursive, sans-serif; - font-size: 3.2em; - line-height: 1.1; - text-shadow: 0.002em 0.002em 0em #364000, 0.044em 0.044em 0 #9EB036, -0.042em -0.014em 0 #8F2472, 0.087em 0.074em 0 #8F2472, -0.074em 0.094em 0 #CA4F04, 0.074em 0.174em 0 #CA4F04; - } - h2 { - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.1em; - text-shadow: 0.12em 0.13em 0 #DBDAE8; - } - h5, h6 { - border-left-color: #E4DCA4; - color: #798666; - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 1em; - text-shadow: 0.03em 0.07em 0 #BED63A; - } - } - .ugs-source-wrap pre { - color: inherit; - } - .ugsChorus { - border-left-color: #CDC693; - border-radius: 6px 0 0 6px; - } - .ugsChords code em { - color: #DD1A52; - } -} - -/* __________ Frosty __________ */ -.theme-frosty { - .scalablePrintArea { - color: #154286; - hgroup{ - color: #6A97DB; - text-align: center; - } - h1 { - color: #D5E2F5; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 2.18em; - letter-spacing: 0.05em; - line-height: 1.1; - text-shadow: -0.064em -0.034em 0 #FFFFFF, 0.008em 0.008em 0 #A3E3D7, 0.009em -0.009em 0 #A3E3D7, 0.098em 0.115em 0 #154286, 0.064em 0.064em 0 #00183D, -0.114em -0.064em 0 #154286, -0.114em 0 0 #154286, 0 -0.064em 0 #154286, -0.084em 0.064em 0 #154286, 0.064em -0.034em 0 #154286; - } - h2 { - font-family: 'Ranchers',Arial,sans-serif; - font-size: 1.2em; - } - h5, h6 { - border-left-color: #E3F7F3; - color: #80B7B1; - font-family: 'Cherry Cream Soda',cursive, sans-serif; - font-size: 1.4em; - font-style: normal; - padding: 0; - text-indent: 0.6em; - } - } - .ugs-source-wrap pre { - color: inherit; - } - .ugsChorus { - border-left-color: #0896FE; - border-radius: 6px 0 0 6px; - } - .ugsChords code em { - color: #0896FE; - } -} - -/* __________ Gruss vom Krampus __________ */ -/* -http://www.colourlovers.com/palette/1374491/Merry_Christmas%E2%98%83 -http://www.colourlovers.com/palette/510474/vintage_Christmas -*/ -.theme-krampus { - .scalablePrintArea { - color: #929867; - hgroup{ - color: #929867; - text-align: center; - } - h1 { - color: #A22C27; - font-family: 'Lobster',cursive, sans-serif; - font-size: 2.78em; - line-height: 1.1; - text-shadow: 0.036em 0.04em 0 #FCECE8, 0.05em 0.08em 0 #4F2621, 0.02em 0.08em 0 #4F2621; - } - h2 { - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.2em; - text-shadow: 0.03em 0.03em 0 #FFFFFF, 0.08em 0.1em 0 #EBD592; - } - h5, h6 { - border-left-color: #7B8055; - color: #A32C28; - font-family: 'Peralta',cursive, sans-serif; - font-size: 1.2em; - font-style: normal; - padding: 0; - text-indent: 0.6em; - } - } - .ugs-source-wrap pre { - color: inherit; - } - .ugsChorus { - border-left-color: #B9C97E; - border-radius: 6px 0 0 6px; - } - .ugsChords code em { - color: #384030; - } -} - -/* __________ Notebook __________ */ -.theme-notebook { - .scalablePrintArea { - color: #443377; - font-family: 'Architects Daughter',Arial,sans-serif; - hgroup{ - color: #2E2ECC; - font-family: inherit; - text-align: center; - } - h1 { - border-color: #E4E4FF; - border-style: solid; - border-width: 1px 0; - color: #252537; - font-family: 'Permanent Marker',Arial,sans-serif; - font-size: 2em; - margin-bottom: 0.2em; - } - h2 { - border-bottom: 1px solid #E4E4FF; - font-size: 1.1em; - } - h5, h6 { - border-left-color: #626283; - color: #2E2ECC; - font-family: 'Permanent Marker',Arial,sans-serif; - font-size: 1.3em; - padding: 0; - text-indent: 0.7em; - } - } - .ugs-source-wrap pre { - color: inherit; - } - .ugsChorus { - border-left-color: #a4a0b2; - border-radius: 6px 0 0 6px; - } - .ugsChords code { - font-family: inherit; - } - /* - .ugsChords code em { - color: #384030; - } - */ -} - -/* __________ Just BLack __________ */ -.theme-justBlack { - .ugs-source-wrap { - h5, - h6 { - color: #000; - /* first choice: museo slab 500 */ - font-family: 'Bree Serif', Arial, sans-serif; - font-style: normal; - } - } - .ugsChords code em { - color: #000; - font-weight: bold; - } - .scalablePrintArea hgroup, - .scalablePrintArea hgroup * { - /* first choice: museo slab 500 */ - font-family: 'Bree Serif', Arial, sans-serif; - font-style: normal; - } - .scalablePrintArea hgroup{ - text-align: center; - } -} - diff --git a/src/less/editor/ugsEditorPlus.aceEditor.less b/src/less/editor/ugsEditorPlus.aceEditor.less index 2d1d604..6f03a16 100644 --- a/src/less/editor/ugsEditorPlus.aceEditor.less +++ b/src/less/editor/ugsEditorPlus.aceEditor.less @@ -59,18 +59,16 @@ cursor: pointer; float:left; margin: 7px 0.8em 0 0; - transition: background-color .3s ease; + .transition( background-color .3s ease); span { - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; + .box-sizing(border-box); background-color: #888888; border-radius: 1px; display: block; height: 2px; margin: 4px 2px; width: 16px; - transition: background-color .3s ease; + .transition( background-color .3s ease); } } .aceSideBtn:hover{ diff --git a/src/less/editor/ugsEditorPlus.arrowBox.less b/src/less/editor/ugsEditorPlus.arrowBox.less index 25f8760..bfe1eae 100644 --- a/src/less/editor/ugsEditorPlus.arrowBox.less +++ b/src/less/editor/ugsEditorPlus.arrowBox.less @@ -14,9 +14,7 @@ position: fixed; top: 60px; width: 310px; - -moz-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); - box-shadow: 3px 13px 9px rgba(0, 0, 0, 0.5); + .box-shadow(3px 13px 9px rgba(0, 0, 0, 0.5)); z-index: 5; &:after, @@ -82,7 +80,7 @@ color:#fff; background-color: #2A2A2A; border-color: #555; - box-shadow: 2px 2px 2px #000; + .box-shadow(2px 2px 2px #000); em { color:#E4E4E4; @@ -113,7 +111,7 @@ html .active label { background-color: #3C3C3C; border: solid 1px #555; border-radius: 7px; - box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.53); + .box-shadow(2px 6px 6px rgba(0, 0, 0, 0.53)); color: #EFEFEF; cursor: pointer; width: 17em; @@ -155,7 +153,7 @@ html .active label { -------------------------------- */ .checkboxBlock { border-top: 1px solid #575757; - box-shadow: 0 -1px 0 #000; + .box-shadow(0 -1px 0 #000); font-size: 0.81em; padding: 0.75em 0; @@ -205,7 +203,7 @@ html .active label { background-color: #BAE5A7; border: 1px solid #44A819; border-radius: 4px 4px 4px 4px; - box-shadow: 0 0 4px rgba(255, 190, 40, 0.8); + .box-shadow(0 0 4px rgba(255, 190, 40, 0.8)); color: #43772D; display: none; position: absolute; @@ -216,7 +214,7 @@ html .active label { em { border: 1px solid #66D836; border-radius: 3px 3px 3px 3px; - box-shadow: 0 0 3px #559277 inset; + .box-shadow(0 0 3px #559277 inset); display: block; height: 100%; padding: 0.2em; diff --git a/src/less/editor/ugsEditorPlus.buttons.less b/src/less/editor/ugsEditorPlus.buttons.less index c5df507..6b3cfd4 100644 --- a/src/less/editor/ugsEditorPlus.buttons.less +++ b/src/less/editor/ugsEditorPlus.buttons.less @@ -31,18 +31,12 @@ .blueBtn { background-color: #89b9e3; - background-image: -moz-linear-gradient(top, #89b9e3, #3d6bbb); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #89b9e3), color-stop(1, #3d6bbb)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89b9e3', endColorstr='#3d6bbb'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#89b9e3', EndColorStr='#3d6bbb')"; + #gradient > .vertical(#89b9e3, #3d6bbb); border-color: #3765B7; text-shadow: #89b9e3 0px 1px 0, #3765b7 0 -1px 0; &:hover { background-color: #4c85e8; - background-image: -moz-linear-gradient(top, #4c85e8, #2f5493); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c85e8), color-stop(1, #2f5493)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c85e8', endColorstr='#2f5493'); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c85e8', EndColorStr='#2f5493')"; + #gradient > .vertical(#4c85e8, #2f5493); text-shadow: black 0px 1px 0, #3765b7 0 -1px 0; } } @@ -52,22 +46,16 @@ color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; - background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); - background: -moz-linear-gradient(top, #faa51a, #f47a20); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); + #gradient > .vertical(#faa51a, #f47a20); text-shadow: #da7c0c 0px 1px 0, #faa51a 0 -1px 0; &:hover { background: #f47c20; - background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); - background: -moz-linear-gradient(top, #f88e11, #f06015); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); + #gradient > .vertical(#f88e11, #f06015); text-shadow: #f47c20 0px 1px 0, #f88e11 0 -1px 0; } &:active { color: #fcd3a5; - background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); - background: -moz-linear-gradient(top, #f47a20, #faa51a); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); + #gradient > .vertical(#f47a20, #faa51a); } } @@ -99,12 +87,7 @@ background-color: #EFD292; border-radius: 6px; padding: 0 0.4em; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - -o-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; + .transition(background-color 0.4s ease); &:hover { background-color: #F2E2C1; diff --git a/src/less/editor/ugsEditorPlus.chordBuilder.less b/src/less/editor/ugsEditorPlus.chordBuilder.less index f5986ed..b4a91c7 100644 --- a/src/less/editor/ugsEditorPlus.chordBuilder.less +++ b/src/less/editor/ugsEditorPlus.chordBuilder.less @@ -36,9 +36,7 @@ html body .editorSurface { padding: 0; position: relative; width: 462px; - -moz-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - -webkit-box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; - box-shadow:1px 2px 8px rgba(0, 0, 0, 0.5) inset; + .box-shadow(1px 2px 8px rgba(0, 0, 0, 0.5) inset); } /* ** stacking order ** */ .editorSurface canvas { @@ -54,9 +52,6 @@ html body .editorSurface { #cdBldCursorCanvas { z-index: 2; } -.chordToolbox { - z-index: 3; -} .toolboxEdgeShadow { z-index: 4; } @@ -64,41 +59,38 @@ html body .editorSurface { .chordToolbox{ border: 0 solid #ccc; background-color: #F0EEF0;/*464646;*/ - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + .box-shadow(1px 1px 3px rgba(0, 0, 0, 0.1)); height: 250px; position: absolute; top: 25px; width: 135px; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -moz-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -ms-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - -o-transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; - transition: background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out; -} -.chordToolbox.open, -.chordToolbox:hover { - background-color: #fafafa; - border-color:#8C8C8C; - box-shadow: 4px 6px 9px rgba(0, 0, 0, 0.3); -} -.chordToolbox.leftEdge { - border-radius: 0 7px 7px 0; - border-width: 2px 2px 2px 0; - left: -110px; -} -.chordToolbox.leftEdge.open, -.chordToolbox.leftEdge:hover { - left: 0; -} -.chordToolbox.rightEdge { - border-radius: 7px 0 0 7px; - border-width: 2px 0 2px 2px; - right: -110px; -} -.chordToolbox.rightEdge.open, -.chordToolbox.rightEdge:hover { - right: 0; + .transition( background-color 0.4s ease, border-color 0.4s ease, left 0.4s ease-out, right 0.4s ease-out); + z-index: 3; + + &.open, + &:hover { + background-color: #fafafa; + border-color:#8C8C8C; + .box-shadow(4px 6px 9px rgba(0, 0, 0, 0.3)); + } + &.leftEdge { + border-radius: 0 7px 7px 0; + border-width: 2px 2px 2px 0; + left: -110px; + &.open, + &:hover { + left: 0; + } + } + &.rightEdge { + border-radius: 7px 0 0 7px; + border-width: 2px 0 2px 2px; + right: -110px; + &.open, + &:hover { + right: 0; + } + } } .chordToolboxInner{ margin: 10px auto; @@ -111,16 +103,17 @@ html body .editorSurface { position: absolute; top: 26px; width: 10px; -} -.toolboxEdgeShadow.leftEdge{ - box-shadow: 4px 0 6px rgba(0, 0, 0, 0.3); - left: -10px; -} -.toolboxEdgeShadow.rightEdge{ - box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3); - right: -10px; + &.leftEdge{ + .box-shadow(4px 0 6px rgba(0, 0, 0, 0.3)); + left: -10px; + } + &.rightEdge{ + .box-shadow(-4px 0 6px rgba(0, 0, 0, 0.3)); + right: -10px; + } } + /* --- */ .toolChip { background-color: #fafafa; @@ -135,21 +128,27 @@ html body .editorSurface { text-align: center; text-decoration: none; width: 100%; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease, border-color 0.4s ease; - -moz-transition: background-color 0.4s ease, border-color 0.4s ease; - -ms-transition: background-color 0.4s ease, border-color 0.4s ease; - -o-transition: background-color 0.4s ease, border-color 0.4s ease; - transition: background-color 0.4s ease, border-color 0.4s ease; -} -.toolChip:hover { - background-color: #FEFEFE; - border: 1px solid #EDEDED; + .transition( background-color 0.4s ease, border-color 0.4s ease); + + &:hover { + background-color: #FEFEFE; + border: 1px solid #EDEDED; + } + + img, + .bigDot { + opacity: .75; + } + + &:hover img, + &:hover .bigDot { + opacity: 1; + } } html .selected, html .selected:hover { border-color: #AAA73F; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + .box-shadow(0 0 5px rgba(0, 0, 0, 0.2)); } #cdBldBtnFingerName { color: #806753; @@ -165,15 +164,10 @@ html .selected:hover { margin: 5px auto; width: 23px; } + /* some "active" button (hover) efx */ -.toolChip img, -.toolChip .bigDot { - opacity: .75; -} .selected img, -.selected .bigDot, -.toolChip:hover img, -.toolChip:hover .bigDot { +.selected .bigDot { opacity: 1; } /* hand */ @@ -233,11 +227,7 @@ html .arrowDown { .outputBox{ max-height: 30em; overflow: hidden; - -webkit-transition: max-height 0.8s ease; - -moz-transition: max-height 0.8s ease; - -o-transition: max-height 0.8s ease; - -ms-transition: max-height 0.8s ease; - transition: max-height 0.8s ease; + .transition( max-height 0.8s ease); } .outputBox.collapseOutput{ max-height: 0; @@ -284,12 +274,7 @@ html .arrowDown { cursor: pointer; margin: 0.5em; padding: 0.5em; - /* backwards transition support */ - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - -o-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; + .transition(background-color 0.4s ease); } li:hover { background-color: #99512c; @@ -309,12 +294,7 @@ html .arrowDown { height: 30px; opacity: 0; width: 36px; - /* backwards transition support */ - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - -o-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; + .transition(opacity 0.4s ease); } li:hover .deleteChord { opacity: 1; @@ -325,3 +305,5 @@ html .arrowDown { margin-right: 10px; } } + +/* / */ \ No newline at end of file diff --git a/src/less/editor/ugsEditorPlus.less b/src/less/editor/ugsEditorPlus.less index 3633016..54c1213 100644 --- a/src/less/editor/ugsEditorPlus.less +++ b/src/less/editor/ugsEditorPlus.less @@ -4,6 +4,6 @@ * Author : Buz * Description: Classes used by UkeGeeks "Song-a-Matic" Editor. */ -.salt_8873ySp8 { - color:#0ff; +.salt_oct14_880X7J { + color:#f00; } diff --git a/src/less/editor/ugsEditorPlus.menuBar.less b/src/less/editor/ugsEditorPlus.menuBar.less index d65d111..e474ab1 100644 --- a/src/less/editor/ugsEditorPlus.menuBar.less +++ b/src/less/editor/ugsEditorPlus.menuBar.less @@ -35,9 +35,7 @@ -------------------------------- */ .ugsAppMenuBar { background: #933f17 url("../img/editor/editorSprite.png") 0 -100px repeat-x; - -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); - box-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); + .box-shadow(0 5px 8px rgba(0, 0, 0, 0.65)); border-top: 1px solid #84623c; border-bottom: 1px solid #240e01; font: 17px/38px Helvetica, Arial; @@ -48,39 +46,40 @@ top: 0; width: 100%; z-index: 2; -} -.ugsAppMenuBar > ul { - margin-left: 10px; -} -.ugsAppMenuBar > ul > li { - float: left; - position: relative; -} -.ugsAppMenuBar > ul > li > a { - border: solid 1px transparent; - color: #f4e19f; - cursor: pointer; - display: block; - float: left; - height: 38px; - line-height: 38px; - outline: 0 none; - padding: 0 15px 0 5px; - text-decoration: none; - text-shadow: 1px 2px 0 rgba(86, 3, 5, 0.95); -} -.ugsAppMenuBar > ul > li > a:hover { - border-color: #600000; - background-color: #451212; - background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; - color: #fdda61; - text-shadow: none; -} -.ugsAppMenuBar > ul > .active > a { - background-color: #451212; - background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; - color: #fef5e3; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); + + & > ul { + margin-left: 10px; + } + & > ul > li { + float: left; + position: relative; + } + & > ul > li > a { + border: solid 1px transparent; + color: #f4e19f; + cursor: pointer; + display: block; + float: left; + height: 38px; + line-height: 38px; + outline: 0 none; + padding: 0 15px 0 5px; + text-decoration: none; + text-shadow: 1px 2px 0 rgba(86, 3, 5, 0.95); + } + & > ul > li > a:hover { + border-color: #600000; + background-color: #451212; + background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; + color: #fdda61; + text-shadow: none; + } + & > ul > .active > a { + background-color: #451212; + background: url("../img/editor/editorSprite.png") 0 -145px repeat-x; + color: #fef5e3; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); + } } /* Icons/Sprits -------------------------------- */ @@ -92,66 +91,86 @@ margin-top: 7px; width: 25px; } -.navSong span { - background-position: -75px 0px; -} -.navSong.active span, -.navSong a:hover span { - background-position: -75px -50px; -} -.navInstruments span { - background-position: -50px 0px; -} -.navInstruments.active span, -.navInstruments a:hover span { - background-position: -50px -50px; -} -.navTranspose span { - background-position: -25px 0px; -} -.navTranspose.active span, -.navTranspose a:hover span { - background-position: -25px -50px; +.navSong { + span { + background-position: -75px 0px; + } + &.active span, + & a:hover span { + background-position: -75px -50px; + } +} +.navInstruments { + span { + background-position: -50px 0px; + } + &.active span, + & a:hover span { + background-position: -50px -50px; + } +} +.navTranspose { + span { + background-position: -25px 0px; + } + &.active span, + & a:hover span { + background-position: -25px -50px; + } +} +.navDiagrams { + span { + background-position: 0px 0px; + } + &.active span, + & a:hover span { + background-position: 0px -50px; + } +} +.navLayout { + span { + background-position: -100px 0px; + } + &.active span, + & a:hover span { + background-position: -100px -50px; + } +} +.navColors { + span { + background-position: -125px 0px; + } + &.active span, + & a:hover span { + background-position: -125px -50px; + } +} +.navZoom { + span { + background-position: -150px 0px; + } + &.active span, + & a:hover span { + background-position: -150px -50px; + } +} +.navEdit { + span { + background-position: -175px 0px; + } + &.active span, + & a:hover span { + background-position: -175px -50px; + } +} +.navOptions { + span { + background-position: -200px 0px; + } + &.active span, + & a:hover span { + background-position: -200px -50px; + } } -.navDiagrams span { - background-position: 0px 0px; -} -.navDiagrams.active span, -.navDiagrams a:hover span { - background-position: 0px -50px; -} -.navLayout span { - background-position: -100px 0px; -} -.navLayout.active span, -.navLayout a:hover span { - background-position: -100px -50px; -} -.navColors span { - background-position: -125px 0px; -} -.navColors.active span, -.navColors a:hover span { - background-position: -125px -50px; -} -.navZoom span { - background-position: -150px 0px; -} -.navZoom.active span, -.navZoom a:hover span { - background-position: -150px -50px; -} -.navEdit span { - background-position: -175px 0px; -} -.navEdit.active span, -.navEdit a:hover span { - background-position: -175px -50px; -} -.navOptions span { - background-position: -200px 0px; -} -.navOptions.active span, -.navOptions a:hover span { - background-position: -200px -50px; -} \ No newline at end of file + +/* / */ \ No newline at end of file diff --git a/src/less/editor/ugsEditorPlus.overlays.less b/src/less/editor/ugsEditorPlus.overlays.less index fd412de..55c042e 100644 --- a/src/less/editor/ugsEditorPlus.overlays.less +++ b/src/less/editor/ugsEditorPlus.overlays.less @@ -11,9 +11,7 @@ right:20px; background-color: #2B1100; background-color: rgba(30, 11, 0, 0.75); // rgba(43, 17, 0, 0.80); - -moz-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - -webkit-box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); - box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.85); + .box-shadow(1px 10px 20px rgba(0, 0, 0, 0.85)); -moz-border-radius: 22px; -webkit-border-radius: 22px; border-radius: 22px; @@ -73,11 +71,7 @@ border: solid 1px #E1B166; max-width: 100%; max-height: 100%; - -webkit-transition: background-color 500ms linear; - -moz-transition: background-color 500ms linear; - -o-transition: background-color 500ms linear; - -ms-transition: background-color 500ms linear; - transition: background-color 500ms linear; + .transition(background-color 500ms linear); &:hover { background-color:rgba(255, 255, 200, 0.7); @@ -86,9 +80,7 @@ &:focus { background-color:rgba(255, 255, 255, 0.9); border-color: #6C280C; - -moz-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - -webkit-box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); - box-shadow: inset 3px 3px 5px rgba(0,0,0,.3); + .box-shadow(inset 3px 3px 5px rgba(0,0,0,.3)); } } @@ -153,12 +145,7 @@ html .optionsDlg { right: 210px; top: 70px; width: 490px; - // backwards transition support - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; + .transition(width 0.6s ease); } html .chordBuilderNarrow{ width: 345px; diff --git a/src/less/editor/ugsEditorPlus.song.less b/src/less/editor/ugsEditorPlus.song.less index 8443163..1cb3c48 100644 --- a/src/less/editor/ugsEditorPlus.song.less +++ b/src/less/editor/ugsEditorPlus.song.less @@ -10,7 +10,7 @@ background-color: #fff; border-right:solid 1px #888; font-size: inherit; - box-shadow: 3px 0 9px rgba(0, 0, 0, 0.4); + .box-shadow(3px 0 9px rgba(0, 0, 0, 0.4)); hgroup { padding-bottom: .15in; diff --git a/src/less/editor/ugsEditorPlus.themes.less b/src/less/editor/ugsEditorPlus.themes.less index 2274ea3..918797a 100644 --- a/src/less/editor/ugsEditorPlus.themes.less +++ b/src/less/editor/ugsEditorPlus.themes.less @@ -39,7 +39,7 @@ } .overlay { background-color: #4E1C07; - box-shadow: none; + .box-shadow( none); color: #000; } } diff --git a/src/less/mixins/gradients.less b/src/less/mixins/gradients.less new file mode 100644 index 0000000..cd91e87 --- /dev/null +++ b/src/less/mixins/gradients.less @@ -0,0 +1,18 @@ +// Gradients +// lifted 100% from Bootstrap + +#gradient { + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down + } + +} diff --git a/src/less/mixins/vendor-prefixes.less b/src/less/mixins/vendor-prefixes.less new file mode 100644 index 0000000..b194899 --- /dev/null +++ b/src/less/mixins/vendor-prefixes.less @@ -0,0 +1,76 @@ +// Vendor Prefixes +// +// All vendor mixins are deprecated as of v3.2.0 due to the introduction of +// Autoprefixer in our Gruntfile. They will be removed in v4. + +// Drop shadows +// +// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's +// supported browsers that have box shadow capabilities now support it. + +.box-shadow(@shadow) { + -moz-box-shadow: @shadow; + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} + +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + +// Transitions +// slightly modifed to include -moz and -ms vendor extensions +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} +.transition(@transition1, @transition2) { + -webkit-transition: @transition1, @transition2; + -moz-transition: @transition1, @transition2; + -ms-transition: @transition1, @transition2; + -o-transition: @transition1, @transition2; + transition: @transition1, @transition2; +} +.transition(@transition1, @transition2, @transition3) { + -webkit-transition: @transition1, @transition2, @transition3; + -moz-transition: @transition1, @transition2, @transition3; + -ms-transition: @transition1, @transition2, @transition3; + -o-transition: @transition1, @transition2, @transition3; + transition: @transition1, @transition2, @transition3; +} +.transition(@transition1, @transition2, @transition3, @transition4) { + -webkit-transition: @transition1, @transition2, @transition3, @transition4; + -moz-transition: @transition1, @transition2, @transition3, @transition4; + -ms-transition: @transition1, @transition2, @transition3, @transition4; + -o-transition: @transition1, @transition2, @transition3, @transition4; + transition: @transition1, @transition2, @transition3, @transition4; +} +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + diff --git a/src/less/ugsEditorPlus_merged.less b/src/less/ugsEditorPlus_merged.less index 8d2e08a..284351d 100644 --- a/src/less/ugsEditorPlus_merged.less +++ b/src/less/ugsEditorPlus_merged.less @@ -3,6 +3,9 @@ * Engine: LessCSS */ +@import 'mixins/gradients.less'; +@import "mixins/vendor-prefixes.less"; + @import 'editor/ugsEditorPlus.less'; @import 'editor/ugsEditorPlus.arrowBox.less'; @import 'editor/ugsEditorPlus.buttons.less';