Use clipboardjs to copy shot ID to clipboard

Using Zeno Rocha's clipboardjs
https://zenorocha.github.io/clipboard.js

src/styles/_shots.sass

@@ -142,27 +142,11 @@
 		margin-left: 10px
 		width: 40px
 		border: thin solid transparent
+		background-color: white
+		color: $color-text-dark-secondary
+		box-shadow: none
+		border-color: $color-text-dark-hint
 
 		&:hover
-			border-color: $color-text-dark-hint
+			color: $color-text-dark-primary
-
+			border-color: $color-text-dark-primary
-		&:active
-			background-color: $color-background
-
-	.btn.copy-to-clipboard.item-id
-		color: transparent
-		position: relative
-		&::selection
-			color: transparent
-			background-color: transparent
-
-	.btn.copy-to-clipboard+.copy-to-clipboard-icon
-		position: relative
-		height: 40px
-		pointer-events: none
-		color: $color-text-dark-primary
-		i
-			position: absolute
-			top: 8px
-			left: -32px
-			font-size: 1.2em

src/templates/attract/shots/for_project.jade

@@ -114,6 +114,7 @@ script.
 		$('.table-body ' + same_cells).removeClass('highlight');
 	});
 
+script(src="{{ url_for('static_attract', filename='assets/js/vendor/clipboard.min.js')}}")
 script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
 script.
 	$("#col_main").resizable({

src/templates/attract/shots/view_shot_embed.jade

@@ -1,5 +1,4 @@
 .attract-form
-	span.shot_id(title="Shot ID") {{ shot._id }}
 	form#shot_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
 		input(type='hidden',name='_etag',value='{{ shot._etag }}')
 		.input-transparent-group
@@ -8,13 +7,12 @@
 				type="text",
 				placeholder='Name',
 				value="{{ shot.name | hide_none }}")
-			input.copy-to-clipboard.btn.item-id(
+			button.copy-to-clipboard.btn.item-id(
 				name="Copy to Clipboard",
 				type="text",
-				title="{{ shot._id }}",
+				data-clipboard-text="{{ shot._id }}",
-				value="{{ shot._id }}")
+				title="Copy ID to clipboard")
-			.copy-to-clipboard-icon
+				| ID
-				i.pi-clipboard-copy
 
 		.input-transparent-group
 			textarea.input-transparent(
@@ -48,3 +46,6 @@
 	| Updated {{ shot._updated | pretty_date }}
 	pre.
 		{{ shot.to_dict() | pprint }}
+
+script.
+	new Clipboard('.copy-to-clipboard');