feat: revamp focus video css (#6)

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