Merge pull request #303 from glmdgrielson/annotations

Add annotation player

1 files changed, 81 insertions, 0 deletions

diff --git a/assets/css/videojs-youtube-annotations.css b/assets/css/videojs-youtube-annotations.css
new file mode 100644
index 00000000..3ca4e46d
--- /dev/null
+++ b/assets/css/videojs-youtube-annotations.css
@@ -0,0 +1,81 @@
+.__cxt-ar-annotations-container__ {
+	--annotation-close-size: 20px;
+
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+
+	top: 0px;
+	left: 0px;
+
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.__cxt-ar-annotation__ {
+	position: absolute;
+
+	box-sizing: border-box;
+
+	font-family: Arial, sans-serif;
+	color: white;
+
+	z-index: 20;
+}
+
+.__cxt-ar-annotation__ {
+	pointer-events: auto;
+}
+
+.__cxt-ar-annotation__ span {
+	position: absolute;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+	word-wrap: break-word;
+	white-space: pre-wrap;
+
+	pointer-events: none;
+	box-sizing: border-box;
+
+	padding: 2%;
+
+	user-select: none; 
+	-webkit-user-select: none;  /* Chrome all / Safari all */
+  	-moz-user-select: none;     /* Firefox all */
+  	-ms-user-select: none;      /* IE 10+ */
+}
+
+.__cxt-ar-annotation-close__ {
+	display: none;
+	position: absolute;
+	width: var(--annotation-close-size);
+	height: var(--annotation-close-size);
+
+	cursor: pointer;
+
+	right: calc(var(--annotation-close-size) / -1.8);
+	top: calc(var(--annotation-close-size) / -1.8);
+	/* place the close button above the svg */
+	z-index: 1;
+}
+.__cxt-ar-annotation__:hover:not([hidden]):not([data-ar-closed]) .__cxt-ar-annotation-close__ {
+	display: block;
+}
+.__cxt-ar-annotation__[hidden] {
+	display: none !important;
+}
+
+.__cxt-ar-annotation__[data-ar-type="highlight"] {
+	border: 1px solid rgba(255, 255, 255, 0.10);
+	background-color: transparent;
+}
+.__cxt-ar-annotation__[data-ar-type="highlight"]:hover {
+	border: 1px solid rgba(255, 255, 255, 0.50);
+	background-color: transparent;
+}
+
+.__cxt-ar-annotation__ svg {
+	pointer-events: all;
+}
\ No newline at end of file