Minor CSS cleanup

assets/css/channel.css

@@ -70,7 +70,7 @@
   display: inline;
 }
 
-.section-contents .channel-profile {
+.category-contents .channel-profile {
   text-align: center;
 }
 
@@ -120,13 +120,16 @@ only show up when the screen is wide enough */
 .trailer-metadata {
   margin-left: 15px;
   font-size: 12px;
-  color: rgb(232, 230, 227);
+}
+
+
+.trailer-title {
+  font-size: 15px;
 }
 
 .trailer-metadata .read-more {
   line-height: 20px;
   text-transform: uppercase;
-  color: gray;
   font-size: 13px;
 }
 
@@ -136,3 +139,51 @@ only show up when the screen is wide enough */
   line-height: 20px;
   margin-top: 20px;
 }
+
+
+@media (prefers-color-scheme: dark) {
+  .no-theme .trailer-metadata {
+    color: rgb(232, 230, 227);
+  }
+
+  .no-theme .trailer-title {
+    color:rgb(209, 209, 209)
+  }
+
+  .no-theme .trailer-metadata .read-more,  .no-theme .trailer-timestamp {
+    color: gray;
+  }
+}
+
+.no-theme .trailer-metadata {
+  color: rgb(232, 230, 227);
+}
+
+.dark-theme .trailer-title {
+  color:rgb(209, 209, 209)
+}
+
+.dark-theme .trailer-metadata .read-more,  .no-theme .trailer-timestamp {
+  color: gray;
+}
+
+
+
+@media (prefers-color-scheme: light) {
+  .no-theme .trailer-metadata, .no-theme .trailer-title {
+    color: black;
+  }
+
+  .no-theme .trailer-metadata .read-more,  .no-theme .trailer-timestamp {
+    color: rgb(127, 127, 127);
+  }
+}
+
+.light-theme .trailer-metadata, .light-theme .trailer-title { 
+  color: black;
+}
+
+
+.light-theme .trailer-metadata .read-more,  .no-theme .trailer-timestamp {
+  color: rgb(127, 127, 127);
+}

assets/css/default.css

@@ -606,8 +606,8 @@ hr {
   margin-top: 1em;
 }
 
-.category .heading > p {
+.category-heading {
-  display: inline-block;
+  margin-bottom: 7px;
 }
 
 /* Split into .badge and #.featured */
@@ -621,7 +621,23 @@ hr {
   display: inline;
 }
 
- /* Temp */ 
+@media (prefers-color-scheme: dark) {
-.category-description {
+  .no-theme .category-description {
     color: #A8A095;
   }
+}
+
+.dark-theme .category-description {
+  color: #A8A095;
+}
+
+@media (prefers-color-scheme: light) {
+  .no-theme .category-description {
+    color: #000000;
+  }
+}
+
+.light-theme .category-description {
+  color: #000000;
+}
+

src/invidious/views/channel/featured_channels.ecr

@@ -11,8 +11,8 @@
     <% if !featured_channel_categories.empty? %>
         <% featured_channel_categories.each do | category | %>
             <div class="channel-section pure-u-1">
-                <details open="">
+                <details open="" class="category">
-                    <summary style="display: revert;">
+                    <summary style="display: revert;" class="category-heading">
                         <span style="font-weight: bold;">
                             <% if category.url %>
                                 <a href="<%=category.url%>">
@@ -24,7 +24,7 @@
                         </h3>
                     </summary>
                     <% contents = category.contents%>
-                    <div class="pure-g section-contents">
+                    <div class="pure-g category-contents">
                         <% if contents.is_a?(Array) %>
                             <% contents.each do |item|%>
                                 <% if !item.is_a?(SearchChannel)%>

src/invidious/views/channel/home.ecr

@@ -26,8 +26,8 @@
                 </div>
 
                 <div class="trailer-metadata pure-u-1 pure-u-md-1-3">
-                    <a style="color:rgb(209, 209, 209)"><%= HTML.escape(section.title) %></a>
+                    <a class="trailer-title"><%= HTML.escape(section.title) %></a>
-                    <p style="color: gray;">
+                    <p class="trailer-timestamp">
                         <%= translate(locale, "`x` views", number_to_short_text(section.views || 0)) %>
                         <%= translate(locale, "Shared `x` ago", recode_date(section.published, locale)) %>
                     </p>
@@ -40,8 +40,8 @@
         <% else %>
             <div class="category pure-u-1">
                 <details open = ""> 
-                    <summary style="display: revert;">
+                    <summary style="display: revert;" class="category-heading">
-                        <a class="category-heading" href="<%=section.url%>"> <%= section.title %> </a>
+                        <a href="<%=section.url%>"> <%= section.title %> </a>
                     </summary>
 
                     <div class="category-description h-box">