feat(video): remove margin around toolbar

CHANGELOG.md

@@ -7,6 +7,8 @@ Here I will outline the changes I've made over time...
 - Fixed a Blackboard Ultra bug on mobile where the breadcrumb bar would be floating near the top, rather than at the top.
 - Styled (and fixed) the mobile header on Blackboard Ultra.
 - Set the background color of the loading screen to be less jarring.
+- Set the video title bar to have a dark background.
+- Removed the margin around the video toolbar, and fixed the alignment of its icons.
 
 ### 20240128
 

main.css

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240129.00.00
+@version        20240129.01.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192
@@ -2013,11 +2013,11 @@
     height: 100%;
   }
   .video-js .vjs-control-bar {
-    background: rgba(29, 27, 30, 0.7) !important;
+    background: rgba(29, 27, 30, 0.8) !important;
     color: white !important;
     color: color-mix(in oklab, #e8e0e5, white 90%) !important;
-    border-radius: 0.5rem;
-    margin: 0 0.5rem 0.5rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
     width: auto;
   }
   .video-js .vjs-progress-holder {
@@ -2058,7 +2058,7 @@
     width: auto;
     padding-left: 2em;
     padding-right: 2em;
-    background: rgba(29, 27, 30, 0.9);
+    background: rgba(29, 27, 30, 0.8);
     color: #e8e0e5;
     border-radius: 0.5em;
     top: 1em;
@@ -2072,7 +2072,7 @@
     text-decoration: none;
   }
   .vjs-menu-button-popup .vjs-menu, .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
-    background: rgba(29, 27, 30, 0.7) !important;
+    background: rgba(29, 27, 30, 0.8) !important;
     color: white !important;
     color: color-mix(in oklab, #e8e0e5, white 90%) !important;
     border-radius: 0.5rem 0.5rem 0 0;
@@ -2093,6 +2093,11 @@
   .vjs-menu-button-popup .vjs-menu .vjs-menu-item:hover, .vjs-menu-button-popup .vjs-menu .vjs-menu-item:focus {
     background: rgba(129, 66, 166, 0.2);
   }
+  .video-js .vjs-control::before {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   /* animate menu opening */
   .vjs-menu-button-popup .vjs-menu {
     display: block !important;
@@ -2111,7 +2116,7 @@
   }
   /* captions */
   .vjs-text-track-display > div > div > div {
-    background: rgba(29, 27, 30, 0.7) !important;
+    background: rgba(29, 27, 30, 0.8) !important;
     color: white !important;
     color: color-mix(in oklab, #e8e0e5, white 90%) !important;
     border-radius: 0.2em !important;
@@ -2126,6 +2131,7 @@
   .vjs-new-tab-control {
     background: url("https://raw.githubusercontent.com/adil192/BlackboardTheme/main/assets/up-right-from-square.svg") no-repeat center !important;
     background-size: 1.3em !important;
+    background-position-y: 40% !important;
     cursor: pointer;
     flex: none;
   }

styles/_version.scss

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240129.00.00
+@version        20240129.01.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192

styles/_video.manchester.ac.uk.scss

@@ -5,7 +5,7 @@
 $progress-bar-height: 1.5em; // up from 0.3em
 $control-bar-border-radius: 0.5rem;
 $progress-bar-border-radius: calc($control-bar-border-radius / 2);
-$video-elem-background: rgba($header, 0.7);
+$video-elem-background: rgba($header, 0.8);
 $video-elem-color: color-mix(in oklab, $on-header, white 90%);
 
 @include fonts;
@@ -31,8 +31,8 @@ video,
   background: $video-elem-background !important;
   color: white !important;
   color: $video-elem-color !important;
-  border-radius: $control-bar-border-radius;
-  margin: 0 $control-bar-border-radius $control-bar-border-radius;
+  border-top-left-radius: $control-bar-border-radius;
+  border-top-right-radius: $control-bar-border-radius;
   width: auto;
 }
 
@@ -81,7 +81,7 @@ video,
   width: auto;
   padding-left: 2em;
   padding-right: 2em;
-  background: rgba($header, 0.9);
+  background: $video-elem-background;
   color: $on-header;
   border-radius: 0.5em;
 
@@ -128,6 +128,12 @@ video,
   }
 }
 
+.video-js .vjs-control::before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* animate menu opening */
 .vjs-menu-button-popup .vjs-menu {
   display: block !important;
@@ -165,6 +171,7 @@ video,
 .vjs-new-tab-control {
   background: url("https://raw.githubusercontent.com/adil192/BlackboardTheme/main/assets/up-right-from-square.svg") no-repeat center !important;
   background-size: 1.3em !important;
+  background-position-y: 40% !important;
   cursor: pointer;
   flex: none;
 }