diff --git a/app/assets/main.css b/app/assets/main.css index 9ae2fae..ec5d3c8 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -120,10 +120,49 @@ input#volume:focus { width: 2px !important; } +.playlist .selection.point::after { + /* Draw a triangle at the bottom */ + content: ''; + position: absolute; + width: 0; + height: 0; + bottom: 0; + left: -5px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #f00; +} + .playlist .selection.segment { background: #f006; - border-left: 1px solid red; - border-right: 1px solid red; + border-left: 2px solid red; + border-right: 2px solid red; +} + +.playlist .selection.segment:before { + /* Draw a triangle at the bottom */ + content: ''; + position: absolute; + width: 0; + height: 0; + bottom: 0; + left: -7px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid red; +} + +.playlist .selection.segment:after { + /* Draw a triangle at the bottom */ + content: ''; + position: absolute; + width: 0; + height: 0; + bottom: 0; + right: -7px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid red; } .playlist .playlist-time-scale { @@ -136,3 +175,16 @@ input#volume:focus { width: 2px !important; background: #666; } + +.playlist .cursor::after { + /* Draw a triangle at the bottom */ + content: ''; + position: absolute; + width: 0; + height: 0; + bottom: 0; + left: -5px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #666; +}