Draw triangles at the bottom of the cursors

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