From fb8b86773beae2fe3b33572a6d6e180bba71bf97 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Tue, 21 Sep 2021 14:02:46 +0200
Subject: [PATCH] Black modal for cta video
---
components/home/HomeCTA.vue | 4 ++--
plugins/vue-tailwind.js | 13 +++++++++----
2 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/components/home/HomeCTA.vue b/components/home/HomeCTA.vue
index 7a0ff67f..25aa54d8 100644
--- a/components/home/HomeCTA.vue
+++ b/components/home/HomeCTA.vue
@@ -12,10 +12,10 @@
</div>
</t-button>
- <t-modal name="videoIntro" variant="large">
+ <t-modal name="videoIntro" variant="video">
<div style="padding: 56.25% 0 0 0; position: relative">
<iframe
- src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0"
+ src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
diff --git a/plugins/vue-tailwind.js b/plugins/vue-tailwind.js
index 266f1416..553bd62b 100644
--- a/plugins/vue-tailwind.js
+++ b/plugins/vue-tailwind.js
@@ -134,14 +134,14 @@ const settings = {
props: {
fixedClasses: {
overlay:
- 'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
- wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
- modal: 'overflow-visible relative rounded',
+ 'flex items-center z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
+ wrapper: 'w-full relative mx-auto z-50 max-w-lg px-3 py-12',
+ modal: 'overflow-visible relative rounded',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: ' p-3 rounded-b',
close:
- 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
+ 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 z-10',
},
classes: {
overlay: 'bg-black',
@@ -173,6 +173,11 @@ const settings = {
'border-b p-3 rounded-t text-xl font-bold dark:border-gray-500',
footer: 'bg-gray-100 p-3 rounded-b dark:bg-gray-700',
},
+ video: {
+ modal: 'bg-black shadow rounded',
+ wrapper: 'relative mx-auto z-50 max-w-4xl px-3 py-12',
+ close: 'bg-gray-700 text-gray-100 hover:bg-gray-600',
+ },
},
},
},
--
GitLab