From 2e6e741869cf92775ff9567b684a7497329a624e Mon Sep 17 00:00:00 2001
From: Andrew Brey <34140052+andrewbrey@users.noreply.github.com>
Date: Mon, 30 Jan 2023 14:53:01 -0800
Subject: [PATCH] feat: revamp focus video css (#6)

---
 package.json                  |  2 +-
 renderer/public/css/embed.css | 47 +++++++++++++++++------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index ae0600f..80d9269 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "Flot",
   "description": "Open websites in a floating window",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "author": {
     "name": "Andrew Brey",
     "email": "34140052+andrewbrey@users.noreply.github.com"
diff --git a/renderer/public/css/embed.css b/renderer/public/css/embed.css
index 78889b2..0857bc5 100644
--- a/renderer/public/css/embed.css
+++ b/renderer/public/css/embed.css
@@ -45,34 +45,33 @@
 /*****************************
  * Video css (experimental)
  *****************************/
-.flotapp.flot-video video,
-.flotapp.flot-video video::before,
-.flotapp.flot-video video::after {
+.flotapp.flot-video {
+  overflow: hidden !important;
+  --flot-opacity: 1;
+}
+.flotapp.flot-video *:not(:has(video)):not(video) {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+.flotapp.flot-video *:has(video) {
+  background-color: transparent !important;
+}
+.flotapp.flot-video video {
+  opacity: var(--flot-opacity) !important;
+  width: 100vw !important;
+  height: 100vh !important;
   position: fixed !important;
-  display: block !important;
   top: 0 !important;
+  bottom: 0 !important;
   left: 0 !important;
   right: 0 !important;
-  bottom: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-}
-
-.flotapp.flot-video video {
+  padding: 0 !important;
+  margin: 0 !important;
   object-fit: contain !important;
+  background: rgba(0 0 0 / var(--flot-opacity)) !important;
   isolation: isolate !important;
-  visibility: visible !important;
-  overflow: visible !important;
-}
-
-.flotapp.flot-video video::before,
-.flotapp.flot-video video::after {
-  content: "" !important;
-  background: #000 !important;
-}
-
-.flotapp.flot-video :not(video) {
-  pointer-events: none !important;
-  visibility: hidden !important;
-  overflow: hidden !important;
 }