OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Add promotional slides with animations to TV stick component

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 12:13:10 -05:00
parent 1d49929ed3
commit ef0532ef9b
3 changed files with 116 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
theme/assets/css/main.css
View File

@@ -2487,6 +2487,97 @@ p:last-child { margin-bottom: 0; }
40% { filter: brightness(1.25); }
100% { filter: brightness(1); }
}
/* ── Promotional slides inside screen ── */
.ts-slides {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
.ts-stage.is-playing .ts-slides { opacity: 1; }
.ts-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12%;
opacity: 0;
transition: opacity 0.7s ease;
}
.ts-slide.is-active { opacity: 1; }
/* — Slide 1: Welcome / hero style — */
.ts-slide--1 {
background: linear-gradient(135deg, #1a2940 0%, #0f1923 100%);
}
.ts-slide--1 .ts-slide__accent {
width: 30px;
height: 3px;
background: #4ade80;
border-radius: 2px;
margin-bottom: 8px;
}
.ts-slide--1 .ts-slide__heading {
width: 70%;
height: 8px;
background: rgba(255,255,255,0.85);
border-radius: 2px;
margin-bottom: 6px;
}
.ts-slide--1 .ts-slide__sub {
width: 50%;
height: 5px;
background: rgba(255,255,255,0.35);
border-radius: 2px;
}
/* — Slide 2: Sale / promo style — */
.ts-slide--2 {
background: linear-gradient(135deg, #14532d 0%, #052e16 100%);
}
.ts-slide--2 .ts-slide__badge {
width: 22px;
height: 22px;
background: #4ade80;
border-radius: 50%;
margin-bottom: 8px;
}
.ts-slide--2 .ts-slide__heading {
width: 60%;
height: 7px;
background: rgba(255,255,255,0.9);
border-radius: 2px;
margin-bottom: 6px;
}
.ts-slide--2 .ts-slide__bar {
width: 45%;
height: 12px;
background: #4ade80;
border-radius: 3px;
}
/* — Slide 3: Menu / info-board style — */
.ts-slide--3 {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.ts-slide--3 .ts-slide__row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.ts-slide--3 .ts-slide__block {
width: 36px;
height: 28px;
background: rgba(255,255,255,0.12);
border-radius: 3px;
border: 1px solid rgba(74,222,128,0.25);
}
.ts-slide--3 .ts-slide__heading {
width: 55%;
height: 5px;
background: rgba(255,255,255,0.45);
border-radius: 2px;
}
/* HDMI port on back-right of TV */
.ts-tv__port {
position: absolute;