feat: revamp focus video css (#6)

Author: andrewbrey

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": "[email protected]"

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;
 }