2 files changed, 171 insertions, 0 deletions
diff --git a/styles/player.css b/styles/player.css
new file mode 100644
index 0000000..88c1957
--- /dev/null
+++ b/styles/player.css
@@ -0,0 +1,137 @@
+.seekbar {
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+  transition: 0.2s;
+  background: transparent;
+}
+
+.seekbar:hover {
+  cursor: pointer;
+}
+
+/*
+ * The styles have to be separated
+ * https://stackoverflow.com/a/42130838
+ */
+.seekbar::-webkit-slider-thumb {
+  opacity: 0;
+}
+.seekbar::-moz-range-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  opacity: 0;
+}
+
+.seekbar::-webkit-slider-runnable-track {
+  background: transparent;
+  height: 15px;
+  cursor: pointer;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+}
+.slider:focus {
+  outline: none;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #fff;
+  width: 10px;
+  height: 10px;
+  margin-top: -5px;
+  border-radius: 10px;
+}
+.slider::-moz-range-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #fff;
+  width: 10px;
+  height: 10px;
+  margin-top: -2.5px;
+  border-radius: 10px;
+  border: 0;
+}
+.slider::-webkit-slider-runnable-track {
+  background: transparent;
+  height: 0;
+  padding: 12px 0;
+}
+.slider::-moz-range-track {
+  background: transparent;
+  height: 0;
+  padding: 12px 0;
+}
+.slider::after {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  top: 50%;
+  margin-top: -1.5px;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.video-player:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * CSS Loader
+ * loading.io
+ */
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/**
+ * react-srv3 caption offset
+ */
+.react-srv3-caption-window {
+  transition: margin-bottom 0.2s;
+}
+.controls-visible .react-srv3-caption-window[data-ap="6"],
+.controls-visible .react-srv3-caption-window[data-ap="7"],
+.controls-visible .react-srv3-caption-window[data-ap="8"] {
+  margin-bottom: 72px;
+}
diff --git a/styles/tailwind.css b/styles/tailwind.css
new file mode 100644
index 0000000..c4a3ba1
--- /dev/null
+++ b/styles/tailwind.css
@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+html {
+  @apply bg-black text-white;
+  scroll-behavior: smooth;
+}
+
+html {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+  @apply flex flex-col;
+}
+#__next {
+  @apply flex flex-1 flex-col;
+}
+
+*::-webkit-scrollbar-track {
+  @apply bg-gray-900;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  @apply bg-gray-900;
+}
+
+*::-webkit-scrollbar-thumb {
+  @apply bg-gray-600;
+}