diff options
| -rw-r--r-- | components/videoPlayer.js | 4 | ||||
| -rw-r--r-- | styles/globals.css | 18 |
2 files changed, 20 insertions, 2 deletions
diff --git a/components/videoPlayer.js b/components/videoPlayer.js index b73ef10..f93f153 100644 --- a/components/videoPlayer.js +++ b/components/videoPlayer.js @@ -110,12 +110,12 @@ export default function VideoPlayer({ if (!art.layers.op) { art.layers.add({ name: "op", - html: `<button style="background-color: #fff; color: black; padding: 10px 25px; border: none; border-radius: 4px; cursor: pointer; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); font-family: Karla, sans-serif; font-size: 16px; text-align: center;">Skip Opening</button>`, + html: `<button class="skip-button">Skip Opening</button>`, tooltip: "Skip", style: { position: "absolute", bottom: "68px", - right: "60px", + right: "58px", }, click: function (...args) { art.seek = op.interval.endTime; diff --git a/styles/globals.css b/styles/globals.css index 002d267..d0278c0 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -143,3 +143,21 @@ button { margin-left: 2px; margin-bottom: 1px; } + +.skip-button { + @apply bg-white xs:w-28 xs:h-9 w-20 h-7 -right-8 bottom-6 rounded-md font-karla shadow-xl hover:bg-[#f1f1f1] text-black md:static absolute xs:-right-6 xs:bottom-0; +} + +@media screen and (max-width: 768px) { + .skip-button { + font-size: 14px; + padding: 8px 20px; + } +} + +@media screen and (max-width: 480px) { + .skip-button { + font-size: 12px; + padding: 6px 16px; + } +} |