Refactor slide structure to enhance menu board, wayfinding sign, and schedule display
This commit is contained in:
Matt Batchelder
@@ -2508,76 +2508,245 @@ p:last-child { margin-bottom: 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%);
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
Slide 1 — Menu Board
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.ts-slide--menu {
|
||||
background: linear-gradient(170deg, #1a1206 0%, #0d0a04 100%);
|
||||
padding: 8%;
|
||||
}
|
||||
.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;
|
||||
.ts-menu { width: 100%; height: 100%; display: flex; flex-direction: column; }
|
||||
.ts-menu__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid rgba(255,200,100,0.25);
|
||||
}
|
||||
.ts-slide--1 .ts-slide__sub {
|
||||
.ts-menu__logo {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #e6a730;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-menu__title {
|
||||
width: 50%;
|
||||
height: 5px;
|
||||
background: rgba(255,255,255,0.35);
|
||||
border-radius: 2px;
|
||||
background: rgba(255,220,150,0.8);
|
||||
border-radius: 1px;
|
||||
}
|
||||
/* — 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 {
|
||||
.ts-menu__cols {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.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-menu__col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.ts-slide--3 .ts-slide__heading {
|
||||
.ts-menu__cat {
|
||||
width: 55%;
|
||||
height: 4px;
|
||||
background: #e6a730;
|
||||
border-radius: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.ts-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.ts-menu__name {
|
||||
width: 40%;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.6);
|
||||
border-radius: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-menu__dots {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
border-bottom: 1px dotted rgba(255,255,255,0.18);
|
||||
}
|
||||
.ts-menu__price {
|
||||
width: 14%;
|
||||
height: 3px;
|
||||
background: rgba(255,220,150,0.7);
|
||||
border-radius: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
Slide 2 — Wayfinding Sign
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.ts-slide--wayfind {
|
||||
background: linear-gradient(170deg, #0c1a2e 0%, #081220 100%);
|
||||
padding: 8%;
|
||||
}
|
||||
.ts-wf { width: 100%; height: 100%; display: flex; flex-direction: column; }
|
||||
.ts-wf__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid rgba(74,222,128,0.2);
|
||||
}
|
||||
.ts-wf__building {
|
||||
width: 60%;
|
||||
height: 5px;
|
||||
background: rgba(255,255,255,0.45);
|
||||
background: rgba(255,255,255,0.7);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-wf__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
.ts-wf__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 4px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ts-wf__arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-wf__arrow--left {
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-right: 5px solid #4ade80;
|
||||
}
|
||||
.ts-wf__arrow--right {
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-left: 5px solid #4ade80;
|
||||
}
|
||||
.ts-wf__arrow--up {
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-bottom: 5px solid #4ade80;
|
||||
}
|
||||
.ts-wf__label {
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.55);
|
||||
border-radius: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
.ts-wf__label--w1 { max-width: 60%; }
|
||||
.ts-wf__label--w2 { max-width: 45%; }
|
||||
.ts-wf__label--w3 { max-width: 70%; }
|
||||
.ts-wf__label--w4 { max-width: 50%; }
|
||||
.ts-wf__floor {
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
background: rgba(74,222,128,0.15);
|
||||
border: 1px solid rgba(74,222,128,0.3);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
Slide 3 — Schedule / Timetable
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.ts-slide--sched {
|
||||
background: linear-gradient(170deg, #111827 0%, #0a0f1a 100%);
|
||||
padding: 8%;
|
||||
}
|
||||
.ts-sched { width: 100%; height: 100%; display: flex; flex-direction: column; }
|
||||
.ts-sched__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid rgba(74,222,128,0.2);
|
||||
}
|
||||
.ts-sched__title {
|
||||
width: 35%;
|
||||
height: 5px;
|
||||
background: rgba(255,255,255,0.75);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-sched__date {
|
||||
width: 20%;
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-sched__table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
flex: 1;
|
||||
}
|
||||
.ts-sched__hrow,
|
||||
.ts-sched__row {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
.ts-sched__hrow {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.ts-sched__hcell {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.25);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-sched__hcell:first-child { flex: 0.5; }
|
||||
.ts-sched__row {
|
||||
align-items: stretch;
|
||||
}
|
||||
.ts-sched__time {
|
||||
flex: 0.5;
|
||||
height: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ts-sched__time::before {
|
||||
content: '';
|
||||
width: 80%;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-sched__cell {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.ts-sched__event {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ts-sched__event--a {
|
||||
background: rgba(74,222,128,0.25);
|
||||
border: 1px solid rgba(74,222,128,0.4);
|
||||
}
|
||||
.ts-sched__event--b {
|
||||
background: rgba(96,165,250,0.25);
|
||||
border: 1px solid rgba(96,165,250,0.4);
|
||||
}
|
||||
.ts-sched__event--c {
|
||||
background: rgba(251,191,36,0.25);
|
||||
border: 1px solid rgba(251,191,36,0.4);
|
||||
}
|
||||
/* HDMI port on back-right of TV */
|
||||
.ts-tv__port {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user