Add Invidious version to footer

assets/css/default.css

@@ -442,12 +442,23 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
  * Footer
  */
 
- footer {
+footer {
   color: #919191;
   margin-top: 2.5em;
   padding: 1.5em 0;
 }
 
+#footer-content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+#footer-content-container > hr {
+  margin: 0;
+  color: rgb(241, 241, 241);
+}
+
 .footer-content {
   display: flex;
   justify-content: space-between;
@@ -455,7 +466,7 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
   margin-top: -10px;
 }
 
-footer .footer-content a {
+footer a {
   color: #919191;
 }
 
@@ -476,6 +487,20 @@ footer .footer-content a {
   margin-bottom: 4px;
 }
 
+.footer-footer .left {
+  float: left
+}
+
+.footer-footer .right {
+  float: right;
+  display: flex;
+  gap: 5px;;
+}
+
+.footer-right .right a {
+  color: #919191
+}
+
 @media screen and (max-width: 929px) {
   #about-invidious-description {
     display: none;
@@ -546,11 +571,20 @@ span > select {
 }
 
 .light-theme footer {
+  color: #7a7a7a;
   background: #f2f2f2;
 }
 
+.light-theme #footer-content-container > hr {
+  color: rgb(241, 241, 241);
+}
+
+.light-theme footer a {
+  color: #7c7c7c !important;
+}
+
 .light-theme footer #about-invidious-description > b {
-  color: #7a7a7a;
+  color: #565D64;
 }
 
 @media (prefers-color-scheme: light) {
@@ -588,24 +622,21 @@ span > select {
     color: #303030;
   }
 
-  .no-theme footer {
-    color: #7c7c7c;
-  }
-
-  .no-theme footer a {
-    color: #7c7c7c !important;
-  }
-
   .light-theme .pure-menu-heading {
     color: #565d64;
   }
 
   .no-theme footer {
     background: #f2f2f2;
+    color: #7c7c7c;
   }
   
   .no-theme footer #about-invidious-description > b {
-    color: #7a7a7a;
+    color: #565D64;
+  }
+
+  .no-theme footer a {
+    color: #7c7c7c !important;
   }
 }
 
@@ -674,8 +705,12 @@ body.dark-theme {
   background: #16191a;
 }
 
+.dark-theme #footer-content-container > hr {
+  color: #313131;
+} 
+
 .dark-theme .footer-content #about-invidious-description > b {
-  color: #e5e5e5;
+  color: #ccc;
 }
 
 
@@ -735,10 +770,11 @@ body.dark-theme {
 
   .no-theme footer {
     background: #16191a;
+    color: #313131;
   }
 
   .no-theme footer #about-invidious-description > b {
-    color: #e5e5e5;
+    color: #ccc;
   }
 }
 

src/invidious/views/template.ecr

@@ -137,7 +137,7 @@
 
     <footer class="pure-g">
         <div class="pure-u-1 pure-u-md-2-24"></div>
-        <div class="h-box pure-u-1 pure-u-md-20-24">
+        <div class="h-box pure-u-1 pure-u-md-20-24" id="footer-content-container">
             <div class="pure-u-1 footer-content">
                 <div class="footer-section pure-u-1-4" id="about-invidious-description">
                     <b>Invidious</b>
@@ -249,25 +249,17 @@
                         </li>
                     </ul>                
                 </div>
-                <div class="footer-section">
+            </div>
-                    <b class="footer-section-header"><%= translate(locale, "footer_legal_section_header")%></b>
+            <hr/>
-                    <ul class="pure-menu-list footer-section-list">
+            <div class="footer-footer">
-                        <li class="pure-menu-item footer-section-item">
+                <span class="left"><%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %></span>
-                            <a href="/licenses" title="<%= translate(locale, "footer_licences_link")%>">
+                <div class="right">
-                                <%= translate(locale, "footer_licences_link") %>
+                    <a href="/privacy" title="<%= translate(locale, "footer_privacy_policy_link")%>"><%= translate(locale, "footer_privacy_policy_link") %></a>
-                            </a>
+                    <span> | </span>
-                        </li>
+                    <a href="/licenses" title="<%= translate(locale, "footer_licences_link")%>"><%= translate(locale, "footer_licences_link") %></a>
-                        <!-- TODO -->
-                        <li class="pure-menu-item footer-section-item">
-                            <a href="/privacy" title="<%= translate(locale, "footer_privacy_policy_link")%>">
-                                <%= translate(locale, "footer_privacy_policy_link") %>
-                            </a>
-                        </li>
-                    </ul>                
                 </div>
             </div>
         </div>
-        <!-- <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %> -->
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </footer>