Prep work for theming

1 files changed, 51 insertions, 0 deletions

diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less
new file mode 100644
index 00000000..6a3b0488
--- /dev/null
+++ b/src/less/components/tooltips.less
@@ -0,0 +1,51 @@
+// Tooltips
+// --------------------------------------------------------------
+
+.plyr__tooltip {
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+    margin-bottom: (@plyr-tooltip-padding * 2);
+    padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
+    pointer-events: none;
+
+    opacity: 0;
+    background: @plyr-tooltip-bg;
+    box-shadow: @plyr-tooltip-shadow;
+    border-radius: @plyr-tooltip-radius;
+
+    color: @plyr-tooltip-color;
+    font-size: @plyr-font-size-small;
+    line-height: 1.3;
+
+    transform: translate(-50%, 10px) scale(.8);
+    transform-origin: 50% 100%;
+    transition: transform .2s .1s ease, opacity .2s .1s ease;
+
+    // Arrows
+    &::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    // The background triangle
+    &::before {
+        bottom: -@plyr-tooltip-arrow-size;
+        border-right: @plyr-tooltip-arrow-size solid transparent;
+        border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
+        border-left: @plyr-tooltip-arrow-size solid transparent;
+        z-index: 2;
+    }
+}
+.plyr button:hover .plyr__tooltip,
+.plyr button.tab-focus:focus .plyr__tooltip,
+.plyr__tooltip--visible {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+}
+.plyr button:hover .plyr__tooltip {
+    z-index: 3;
+}
\ No newline at end of file