doremi-script
Version:
Letter music notation processor
340 lines (297 loc) • 6.42 kB
CSS
#controls li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
h2.step {
width:600px;
font-size: 14px;
background-color: lavender;
border: 1px solid black;
}
div#open_div {
display:none
}
div#reopen a {
margin-right:10px;
}
div#reopen {
padding:4px;
background-color:DarkOrange;
border:1px solid black;
}
input#url_to_reopen {
padding:10px;
width:500px;
}
div#rendered_doremi_script {
border: 2px dotted #CCCCCC;
}
span.note_wrapper {
position: relative;
}
.show_sargam_source {
border: 1px solid black;
font-family: monospace;
font-size: 18px;
padding-left: 10px;
}
textarea#entry_area, textarea.entry_area {
white-space: nowrap;
overflow: auto;
font-family: monospace;
font-size: 18px;
padding-left: 10px;
}
#parse_tree,#warnings_div {
border: 1px solid black;
width: 70%;
height:550px;
overflow:scroll;
margin-left: 20px;
padding:4px;
display:none;
}
#warnings_div {
height:auto;
}
div.line {
position: relative;
font-family: sans-serif;
}
span.beat.looped {
border-top: 0px;
border-bottom: .1em solid;
padding-bottom: .75em;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
border-style: solid;
border-color:black;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width:1px;
border-right-width: 0px;
}
span.beat {
margin-right: 1em;
margin-left: .3em;
}
span.slur {
position:absolute;
margin-top: 1.5em;
border-top: .1em solid;
padding-top: 3.2em;
border-radius: .5em;
border-style: solid;
border-color: black;
border-top-width: 2px;
border-bottom-width: 0em;
border-bottom:none;
border-left-width: 0em;;
border-right-width: 0em;
}
span.ornament_item {
position: static;
display:inline;
}
span.ornament_item.octave_2, span.ornament_item.octave_2 {
/* octave of -2 or 2 */
}
span.upper_attribute.ornament {
position: absolute;
bottom: 1.6em;
font-size: .5em;
margin-left: 1.8em;
}
span.ornament span.note {
padding-right: .2em;
}
div.sargam_line {
/* font-size: 1em; */
/* font-family: sans-serif; */
/* border: 1px black dotted; */
border: none;
height: 11.5em;
padding-top: 0em;
padding-left:1em;
line-height: 10em; /* don't change this */
margin-bottom:0.4em;
padding-top:0em;
}
span.note.dash {
margin-left: 0.09em;
margin-right: 0.09em;
}
span.note.barline {
letter-spacing: -0.2em;
margin-right: .2em;
margin-left: .2em;
padding:.2em;
}
span.note.double_barline {
font-weight:bold;
}
div.composition {
/*
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px highlight dotted;
*/
padding-left: 10px;
padding-top:4px;
white-space:nowrap;
}
@media print {
div.composition {
border:none;
}
}
span.ornament {
font-size: 1em;
}
span.mordent {
/* TODO: use background image like ornaments bullet */
font-size: 1.5em;
left:0.13em;
}
span.upper_attribute + span.upper_attribute {
margin-top: -0.7em;
}
span.upper_attribute span.ornament {
font-size: .5em;
}
span.ornament span.note_wrapper span.note {
font-size: .5em;
}
span.ornament_item.upper_octave_1 {
padding-top: .5em;
padding-bottom: .5em;
/* Embed the bullet in the css file, that will make it easier to create standalone html pages that don't need image files travelling along with them */
background: url(data:image/gif;base64,R0lGODlhCQAHAID/AAAAAMDAwCH5BAEAAAEALAAAAAAJAAcAQAINjI8Bu8idomHpgQpDAQA7);
background-repeat: no-repeat;
}
span.ornament_item.lower_octave_1 {
padding-top: .5em;
padding-bottom: .5em;
/* Embed the bullet in the css file, that will make it easier to create standalone html pages that don't need image files travelling along with them */
background: url(data:image/gif;base64,R0lGODlhCQAHAID/AAAAAMDAwCH5BAEAAAEALAAAAAAJAAcAQAINjI8Bu8idomHpgQpDAQA7);
background-repeat: no-repeat;
}
span.ornament_item.lower_octave_1 {
background-position:bottom;
}
/******
*
* Note that ornament dots are implemented differently than regular notes
*/
span.ornament span.upper_octave_1,
span.ornament span.lower_octave_1 {
position: static;
display:inline;
}
span.ornament span.upper_octave_1 {
top: 1.2em;
left: .45em;
}
span.ornament span.lower_octave_1 {
top: -1.2em;
left: .45em;
}
span.ornament span.ornament_item.upper_octave_1
{
background-position:top;
}
span.lower_octave_2 {
bottom: -.79em;
}
span.lower_octave_1 {
left: 0.2em;
bottom: -.79em;
}
span.upper_octave_1, span.upper_octave_2, span.mordent{
top: -1.3em;
}
span.upper_octave_1{
left: 0.2em;
}
span.note.whitespace {
}
span.upper_octave_indicator {
top: -1em;
}
span.tala {
top: -2.2em;
}
span.chord_symbol, span.ending {
font-family:"Times New Roman",Georgia,Serif;
font-size: 1em;
top: -2em;
left:.2em;
}
span.ending {
font-family:"Times New Roman",Georgia,Serif;
font-size: .8em;
top: -2.75em;
left:.2em;
}
span.lower_octave_2,span.upper_octave_2 {
left:.3em;
}
span.lower_octave_1, span.upper_octave_2, span.lower_octave_2,span.upper_octave_1,span.mordent, span.upper_attribute {
z-index: 2;
position: absolute;
}
span.kommal_indicator {
left: 0.2em;
bottom: 0.05em;
}
span.attribute_key,span.attribute_value {
font-family: sans-serif;
font-size: 1.6em;
}
span.attribute_key {
font-weight: bold;
}
span.note, span.note_wrapper {
font-family: sans-serif;
font-size: 1.6em;
position: relative;
margin-right: -.75px;
margin-left: -.75px;
display: inline-block;
}
span.flat, span.sharp {
position: absolute;
bottom: 0.7em;
left: 1em;
}
span.breath_mark {
/*bottom: .75em;*/
}
span.whitespace {
margin-right: 0em;
margin-left: 0em;
}
/* unicode chars need this */
span.note.left_repeat,
span.note.right_repeat,
span.note.repeat_symbol,
span.note.barline,
span.note.final_barline,
span.note.reverse_final_barline,
span.note.double_barline
{
margin-right: 0.4em;
margin-left: 0.4em;
}
span.syllable {
position: absolute;
bottom: -2.1em;
margin-left: 0.03em;
font-size: 1.01em;
font-family: serif;
}