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

Update event display styles and replace event time element with cursor for improved visibility

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:14:41 -05:00
parent 5783fa7ebc
commit ebb4b7668c
2 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4270,7 +4270,11 @@ p:last-child { margin-bottom: 0; }
/* ══════════════════════════════════ /* ══════════════════════════════════
2 — EVENT DISPLAY 2 — EVENT DISPLAY
══════════════════════════════════ */ ══════════════════════════════════ */
.uc-inner--event { gap: 0; padding: 16px 18px; } .uc-inner--event {
gap: 0;
padding: 16px 18px;
position: relative;
}
.uc-event-header { .uc-event-header {
width: 100%; width: 100%;
@@ -4343,38 +4347,37 @@ p:last-child { margin-bottom: 0; }
.uc-event-title--active::after { animation: uc-event-shimmer 2.2s linear infinite; } .uc-event-title--active::after { animation: uc-event-shimmer 2.2s linear infinite; }
.uc-event-title--accent::after { animation: uc-event-shimmer 2.2s linear infinite 1.1s; } .uc-event-title--accent::after { animation: uc-event-shimmer 2.2s linear infinite 1.1s; }
.uc-event-time-now { .uc-event-cursor {
position: absolute; position: absolute;
top: 28px; top: 32px;
left: 26px; left: 0;
background: var(--color-accent); right: 0;
color: #fff; height: 2px;
font-size: 7px; background: var(--color-primary);
font-weight: 700; opacity: .85;
padding: 2px 5px;
border-radius: 2px;
white-space: nowrap;
pointer-events: none; pointer-events: none;
display: flex; box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.4);
align-items: center; animation: uc-event-time-progress 20s linear infinite;
gap: 3px;
letter-spacing: 0.3px;
animation: uc-event-time-pulse 2s ease-in-out infinite;
} }
.uc-event-time-now-val { .uc-event-cursor::before {
font-family: 'Monaco', 'Courier New', monospace; content: '';
font-size: 8px; position: absolute;
font-weight: 700; left: -6px;
letter-spacing: 0px; top: -4px;
width: 12px;
height: 10px;
background: var(--color-primary);
border-radius: 50%;
box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
} }
@keyframes uc-event-shimmer { @keyframes uc-event-shimmer {
0% { transform: translateX(-150%); } 0% { transform: translateX(-150%); }
100% { transform: translateX(250%); } 100% { transform: translateX(250%); }
} }
@keyframes uc-event-time-pulse { @keyframes uc-event-time-progress {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb, 255, 107, 29), 0.7); } 0% { top: 32px; }
50% { box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 255, 107, 29), 0); } 100% { top: calc(100% - 10px); }
} }
/* ══════════════════════════════════ /* ══════════════════════════════════
@@ -4547,7 +4550,7 @@ p:last-child { margin-bottom: 0; }
.uc-menu-row--highlight .uc-menu-price, .uc-menu-row--highlight .uc-menu-price,
.uc-event-title--active::after, .uc-event-title--active::after,
.uc-event-title--accent::after, .uc-event-title--accent::after,
.uc-event-time-now, .uc-event-cursor,
.uc-db-bar--1, .uc-db-bar--2, .uc-db-bar--3, .uc-db-bar--4, .uc-db-bar--1, .uc-db-bar--2, .uc-db-bar--3, .uc-db-bar--4,
.uc-wf-dot::after, .uc-wf-dot::after,
.uc-wf-arrow { animation: none !important; } .uc-wf-arrow { animation: none !important; }

2
theme/blocks/index.php
View File

@@ -1928,7 +1928,7 @@ function oribi_uc_anim_inner( $mod ) {
case 'event': case 'event':
return ' return '
<div class="uc-inner uc-inner--event" aria-hidden="true"> <div class="uc-inner uc-inner--event" aria-hidden="true">
<div class="uc-event-time-now">NOW <span class="uc-event-time-now-val">10:45</span></div> <div class="uc-event-cursor"></div>
<div class="uc-event-header">Schedule</div> <div class="uc-event-header">Schedule</div>
<div class="uc-event-row"> <div class="uc-event-row">
<div class="uc-event-time">9:00</div> <div class="uc-event-time">9:00</div>