[feature] add link item background video

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.73.0",
+"version": "5.74.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

@@ -225,12 +225,12 @@
 transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
 }
 
-.link-image{
-background-image:var(--link-item-image-url);
+.link-background-image{
+background-image:var(--link-item-background-image-url);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
-opacity:var(--link-item-image-opacity);
+opacity:var(--link-item-background-opacity);
 position: absolute;
 top:0;
 left:0;
@@ -240,6 +240,28 @@
 pointer-events: none;
 }
 
+.link-background-video{
+opacity:var(--link-item-background-opacity);
+position: absolute;
+top:0;
+right:0;
+bottom:0;
+left:0;
+width:100%;
+height:100%;
+overflow: hidden;
+z-index:1;
+pointer-events: none;
+}
+
+.link-background-videovideo{
+opacity:var(--link-item-background-opacity);
+width:100%;
+height:100%;
+object-fit: cover;
+pointer-events: none;
+}
+
 .is-link-style-block .link-panel-front{
 padding:calc(1em*var(--link-item-padding));
 }
@@ -1143,7 +1165,7 @@
 
 /* link form */
 .link-form{
-margin-bottom:2em;
+margin-bottom:calc(var(--form-wrap-space) *4);
 }
 
 .link-form-area{
@@ -1153,7 +1175,7 @@
 @media (min-width:900px){
  .link-form-area{
 display: grid;
-grid-template-columns:2fr1fr;
+grid-template-columns:5fr2fr;
 grid-gap:calc(var(--form-wrap-space) *2);
 align-items: stretch;
  }

src.zip

@@ -3,7 +3,7 @@
 top:50%;
 left:50%;
 font-size:1em;
-width:50em;
+width:var(--modal-size);
 max-width:calc(100%-2em);
 min-width:10em;
 transform:translate(-50%,-50%);
@@ -13,15 +13,6 @@
 z-index:var(--z-index-modal);
 }
 
-.modal-large{
-width:70em;
-max-width:calc(100%-2em);
-}
-
-.modal-small{
-width:30em;
-}
-
 .modal-wrapper{
 background-color:rgb(var(--theme-color-01));
 border-radius:var(--theme-radius);
@@ -50,7 +41,7 @@
 }
 
 .modal-body-spacer{
-margin:2em;
+margin:calc(var(--form-wrap-space) *2) calc(var(--form-wrap-space) *2.5);
 }
 
 .modal-heading:focus{

src/css/link.css

@@ -116,7 +116,7 @@
 --link-item-visual-element-color-focus-hover:var(--theme-style-text);
 --link-item-name-color:var(--theme-color-14);
 --link-item-name-color-focus-hover:var(--theme-style-text);
---link-item-image-opacity:1;
+--link-item-background-opacity:1;
 --link-item-size:1em;
 --link-item-display-space:0.25em;
 --link-item-border:0;
@@ -274,6 +274,11 @@
 --edge-shadow: inset 000var(--layout-line-width) rgb(var(--theme-accent)),
  inset 000calc(var(--layout-line-width) *4) rgba(var(--theme-accent),0.1),
  inset 000calc(var(--layout-line-width) *8) rgba(var(--theme-accent),0.1);
+/* modal */
+--modal-small:30em;
+--modal-medium:50em;
+--modal-large:70em;
+--modal-size:var(--modal-medium);
 /* z index */
 --z-index-background:1000;
 --z-index-link:2000;

src/css/modal.css

@@ -18,7 +18,7 @@
 
  @@include("./bookmarks/accent.html")
 
- @@include("./bookmarks/image.html")
+ @@include("./bookmarks/background.html")
 
  @@include("./bookmarks/border.html")
 

src/css/variables.css

@@ -0,0 +1,29 @@
+<divid="menu-content-bookmarks-background" class="menu-content-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Background</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="form-wrap">
+<divclass="form-inline">
+<buttonclass="control-link-item-background-show button button-line" tabindex="-1">Show all</button>
+<buttonclass="control-link-item-background-hide button button-line" tabindex="-1">Hide all</button>
+</div>
+</div>
+<divclass="form-wrap">
+<pclass="control-link-item-background-helper form-helper-item">Show or hide all Bookmark Background images or videos.</p>
+<pclass="control-link-item-background-helper form-helper-item">This can also be changed by editing individual Bookmarks.</p>
+</div>
+<hr>
+<divclass="form-wrap">
+<labelfor="control-link-item-background-opacity-range">Opacity</label>
+<divclass="form-group form-group-block">
+<inputid="control-link-item-background-opacity-range" class="control-link-item-background-opacity-range mr-3" type="range" value="0" tabindex="-1">
+<inputclass="control-link-item-background-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+<buttonclass="control-link-item-background-opacity-default button button-line" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
+</div>
+</div>
+<divclass="form-wrap">
+<buttonclass="control-link-item-background-opacity-apply button button-line" tabindex="-1">Apply to all</button>
+</div>
+</div>
+</div>

src/html/menu/content/bookmarks.html

@@ -41,7 +41,7 @@
 <ahref="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
 <ahref="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
 <ahref="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
-<ahref="#menu-content-bookmarks-image" class="menu-nav-sub button button-small" tabindex="-1">Background image</a>
+<ahref="#menu-content-bookmarks-background" class="menu-nav-sub button button-small" tabindex="-1">Background</a>
 <ahref="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
 <ahref="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
 <ahref="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>