[feature] add background video controls

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.77.0",
+  "version": "5.78.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

package.json

@@ -9,12 +9,12 @@
   display: none;
 }
 
-.is-background-image-show .background {
+.is-background-visual-show .background {
   display: block;
 }
 
-.background-image {
-  background-image: var(--background-image);
+.background-visual-image {
+  background-image: var(--background-visual-image);
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
@@ -25,32 +25,57 @@
   height: 100%;
   pointer-events: none;
   display: block;
-  opacity: var(--background-opacity);
-  transform: scale(var(--background-scale));
-  filter: blur(var(--background-blur)) grayscale(var(--background-grayscale));
+  opacity: var(--background-visual-opacity);
+  transform: scale(var(--background-visual-scale));
+  filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
+  z-index: 1;
 }
 
-.background-accent {
-  background-color: rgba(var(--theme-accent), var(--background-accent));
+.background-visual-video {
+  opacity: var(--link-item-background-opacity);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.background-visual-video video {
+  opacity: var(--background-visual-opacity);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  transform: scale(var(--background-visual-scale));
+  filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
+}
+
+.background-visual-accent {
+  background-color: rgba(var(--theme-accent), var(--background-visual-accent));
   position: absolute;
   top: -1em;
   left: -1em;
   width: calc(100% + 2em);
   height: calc(100% + 2em);
   pointer-events: none;
   display: block;
+  z-index: 2;
 }
 
-.background-vignette {
+.background-visual-vignette {
   position: absolute;
   top: -1em;
   left: -1em;
   width: calc(100% + 2em);
   height: calc(100% + 2em);
   pointer-events: none;
-  background-image: radial-gradient(
-    circle,
-    transparent var(--background-vignette-end),
-    rgba(0, 0, 0, var(--background-vignette-opacity)) var(--background-vignette-start)
-  );
+  background-image: radial-gradient(circle,
+      transparent var(--background-visual-vignette-end),
+      rgba(0, 0, 0, var(--background-visual-vignette-opacity)) var(--background-visual-vignette-start));
+  z-index: 3;
 }

src.zip

@@ -1963,6 +1963,7 @@ input[type="range"]:disabled::-moz-range-progress {
   border-top-right-radius: var(--theme-radius);
   border-bottom-right-radius: var(--theme-radius);
   width: 100%;
+  transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast);
 }
 
 .form-feedback p {

src/css/background.css

@@ -14,6 +14,6 @@
   transition: opacity var(--layout-transition-extra-fast);
 }
 
-.is-edge:not(.is-background-image-show) .shade {
+.is-edge:not(.is-background-visual-show) .shade {
   background-color: rgba(var(--theme-accent), 0.05);
 }

src/css/form.css

@@ -160,14 +160,14 @@
   /* background */
   --background-color-theme:                             var(--theme-color-01);
   --background-color-custom:                            rgb(0, 0, 0);
-  --background-image:                                   none;
-  --background-opacity:                                 1;
-  --background-scale:                                   1;
-  --background-accent:                                  0;
-  --background-blur:                                    0;
-  --background-vignette-opacity:                        0%;
-  --background-vignette-start:                          90%;
-  --background-vignette-end:                            70%;
+  --background-visual-image:                            none;
+  --background-visual-opacity:                          1;
+  --background-visual-scale:                            1;
+  --background-visual-accent:                           0;
+  --background-visual-blur:                             0;
+  --background-visual-vignette-opacity:                 0%;
+  --background-visual-vignette-start:                   90%;
+  --background-visual-vignette-end:                     70%;
   /* form */
   --form-label:                                         var(--theme-color-16);
   --form-label-hover:                                   var(--theme-color-20);

src/css/shade.css

@@ -1,5 +1,6 @@
 <div class="background">
-  <div class="background-image"></div>
-  <div class="background-accent"></div>
-  <div class="background-vignette"></div>
+  <div class="background-visual-image"></div>
+  <div class="background-visual-video"></div>
+  <div class="background-visual-accent"></div>
+  <div class="background-visual-vignette"></div>
 </div>

src/css/variables.css

@@ -2,6 +2,6 @@
 
   @@include("./background/color.html")
 
-  @@include("./background/image.html")
+  @@include("./background/visual.html")
 
 </div>