Mercurial > code > home > repos > video

changeset 47:c2c51aae3e31

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
pull styles into main.css
author drewp@bigasterisk.com
date Fri, 06 Dec 2024 09:27:10 -0800
parents 882d0bb0f801
children 046673b1cc24
files src/VideoPage.ts src/VideoSection.ts src/main.css
diffstat 3 files changed, 70 insertions(+), 68 deletions(-) [+]
line wrap: on
line diff
--- a/src/VideoPage.ts	Fri Dec 06 01:16:54 2024 -0800
+++ b/src/VideoPage.ts	Fri Dec 06 09:27:10 2024 -0800
@@ -123,49 +123,6 @@
       :host {
         display: block;
       }
-
-      video-section {
-        margin: 8px;
-      }
-
-      .listing a {
-        font-size: 20px;
-        text-transform: uppercase;
-        text-underline-offset: 10px;
-      }
-
-      .listing a .subdir {
-        transition: background 0.5s;
-        transition-delay: 0.1s;
-        background: #4ea1bd21;
-      }
-
-      .listing a:hover .subdir {
-        transition: background 0.5s;
-        background: #4ea1bd66;
-      }
-
-      .subdir {
-        vertical-align: top;
-        color: white;
-        padding: 11px;
-        display: inline-block;
-        width: 300px;
-        margin: 5px;
-        border-radius: 5px;
-      }
-
-      .subdir:after {
-        content: " › ";
-        color: #979797;
-      }
-
-      #scrim {
-        position: fixed;
-        background: #000000b5;
-        inset: 0;
-        display: none;
-      }
     `,
   ];
 
--- a/src/VideoSection.ts	Fri Dec 06 01:16:54 2024 -0800
+++ b/src/VideoSection.ts	Fri Dec 06 09:27:10 2024 -0800
@@ -1,6 +1,7 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "shaka-video-element";
+import maincss from "./main.css?inline";
 
 @customElement("video-section")
 export class VideoSection extends LitElement {
@@ -11,40 +12,19 @@
   @property({ type: String }) big: boolean = false;
 
   static styles = [
+    unsafeCSS(maincss),
     css`
       :host {
         display: inline-block;
       }
-      section {
-        box-shadow: 4px 4px 2px #00000029;
-        border-radius: 5px;
-        background: #ffffff14;
-        display: inline-block;
-        padding: 10px;
-        color: white;
-        width: 255px;
-      }
-      .video-title {
-        line-clamp: 2;
-        height: 3.2em;
-      }
-      #imgCrop {
-        overflow: hidden;
-        width: 250px;
-        height: 140px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: contain;
-        display: inline-block;
-      }
     `,
   ];
   render() {
     return html`
-      <section @click=${this.click}>
+      <div class="videoListing" @click=${this.click}>
         <div class="video-title" title="${this.title}">${this.title}</div>
         <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span>
-      </section>
+      </div>
     `;
   }
   click() {
--- a/src/main.css	Fri Dec 06 01:16:54 2024 -0800
+++ b/src/main.css	Fri Dec 06 09:27:10 2024 -0800
@@ -36,3 +36,68 @@
 a {
   color: white;
 }
+
+video-section {
+  margin: 8px;
+}
+
+.listing a {
+  font-size: 20px;
+  text-transform: uppercase;
+  text-underline-offset: 10px;
+}
+
+.listing a .subdir {
+  transition: background 0.5s;
+  transition-delay: 0.1s;
+  background: #4ea1bd21;
+}
+
+.listing a:hover .subdir {
+  transition: background 0.5s;
+  background: #4ea1bd66;
+}
+
+.subdir {
+  vertical-align: top;
+  color: white;
+  padding: 11px;
+  display: inline-block;
+  width: 300px;
+  margin: 5px;
+  border-radius: 5px;
+}
+
+.subdir:after {
+  content: " › ";
+  color: #979797;
+}
+
+#scrim {
+  position: fixed;
+  background: #000000b5;
+  inset: 0;
+  display: none;
+}
+.videoListing {
+  box-shadow: 4px 4px 2px #00000029;
+  border-radius: 5px;
+  background: #ffffff14;
+  display: inline-block;
+  padding: 10px;
+  color: white;
+  width: 255px;
+}
+.video-title {
+  line-clamp: 2;
+  height: 3.2em;
+}
+#imgCrop {
+  overflow: hidden;
+  width: 250px;
+  height: 140px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  display: inline-block;
+}