From aee3579e969411e19bd9fdeec04c181d67840557 Mon Sep 17 00:00:00 2001
From: Gerben <gerben@treora.com>
Date: Mon, 21 Oct 2019 22:43:15 +0530
Subject: [PATCH] Draw triangles at the bottom of the cursors

---
 app/assets/main.css | 56 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 2 deletions(-)

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;
+}