diff --git a/app/www/annotate.html b/app/www/annotate.html index dce45a2..c914e43 100644 --- a/app/www/annotate.html +++ b/app/www/annotate.html @@ -71,16 +71,16 @@ background: rgba(255, 255, 255, 0.7); } - - .controls--playback{ + + .controls--playback { /* display:flex; */ } - .timecode{ + .timecode { position: absolute; right: 100%; width: 5%; - font-size:8px; + font-size: 8px; } .controls--playback input[type='range'] { @@ -93,15 +93,18 @@ } - .controls button.paused, .controls button.playing{ + .controls button.paused, + .controls button.playing { position: absolute; left: 100%; width: 30px; } - .controls button.paused::before{ + + .controls button.paused::before { content: '⏵'; } - .controls button.playing::before{ + + .controls button.playing::before { content: '⏸'; } @@ -132,17 +135,19 @@ text-align: center; } - .tags li{ - display: block; + .tags li { + display: block; } - .tags .subtags{ - padding:0; + + .tags .subtags { + padding: 0; font-size: 80%; display: flex; flex-direction: row; flex-wrap: wrap; } - .tags .subtags .tag{ + + .tags .subtags .tag { padding: 2px; } @@ -177,11 +182,12 @@ pointer-events: all; } - .noUi-handle:focus{ + .noUi-handle:focus { /* background: red;; */ border: solid 2px #601be0; - + } + /* .noUi-handle:focus::before, .noUi-handle:focus::after{ background: #601be0; } */ @@ -194,7 +200,8 @@ vertical-align: middle; border-radius: 5px; } - .tags .subtags .tag span{ + + .tags .subtags .tag span { width: 10px; height: 10px; margin-right: 2px; @@ -247,73 +254,84 @@ .noUi-horizontal .noUi-touch-area { cursor: ew-resize; } - #interface .noUi-horizontal .noUi-tooltip{ + + #interface .noUi-horizontal .noUi-tooltip { /* tooltips go below the buttons */ - bottom:auto; - top:110%; + bottom: auto; + top: 110%; } - .audioconfig{ + .audioconfig { z-index: 9; - background:black; + background: black; color: white; position: relative; - width: 100px; /* as wide as audio controls only */ + width: 100px; + /* as wide as audio controls only */ overflow: hidden; white-space: nowrap; left: -50px; } - .audioconfig:hover{ + + .audioconfig:hover { width: auto; left: 0px; } - .audioconfig select, .audioconfig input{ - margin:10px; - } - audio{ - vertical-align: middle; - width: 100px; /* hides seek head */ + + .audioconfig select, + .audioconfig input { + margin: 10px; } - .playlist img{ + audio { + vertical-align: middle; + width: 100px; + /* hides seek head */ + } + + .playlist img { position: static; width: 250px; height: 250px; background: white; display: block; } - .help{ + + .help { position: absolute; right: 0; - top:10px; - left:70px; - margin:0; - padding:0; + top: 10px; + left: 70px; + margin: 0; + padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; font-size: 8pt; } - .help li{ + + .help li { display: inline-block; color: gray; - margin-right:10px; + margin-right: 10px; flex-grow: 1; } - .help .key{ - padding:5px; + + .help .key { + padding: 5px; background-color: aliceblue; border: solid 1px black; - color:black; + color: black; border-radius: 4px; } - #interface:not(.selected-annotation) .help .esc1{ - display: none; - } - #interface.selected-annotation .help .esc2{ + + #interface:not(.selected-annotation) .help .esc1 { display: none; } + #interface.selected-annotation .help .esc2 { + display: none; + } @@ -321,21 +339,23 @@