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

Refactor event display structure and styles for improved readability and consistency

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:05:58 -05:00
parent 150fe5a291
commit df794be0d8
2 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4279,18 +4279,13 @@ p:last-child { margin-bottom: 0; }
background: var(--color-border);
margin-bottom: 10px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.uc-event-header::after {
content: '';
position: absolute;
top: 0; left: 0;
height: 100%;
width: 45%;
background: var(--color-primary);
border-radius: 3px;
animation: uc-event-hdr-move 4s ease-in-out infinite;
display: flex;
align-items: center;
padding: 0 6px;
font-size: 9px;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.5px;
}
.uc-event-row {
width: 100%;
@@ -4301,31 +4296,52 @@ p:last-child { margin-bottom: 0; }
}
.uc-event-row + .uc-event-row { margin-top: 7px; }
.uc-event-time {
height: 7px;
width: 22px;
height: 10px;
width: 28px;
border-radius: 2px;
background: var(--color-border);
flex-shrink: 0;
font-size: 7px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted);
font-weight: 600;
}
.uc-event-bar {
.uc-event-title {
height: 14px;
flex: 1;
border-radius: 3px;
background: var(--color-border);
position: relative;
overflow: hidden;
font-size: 8px;
display: flex;
align-items: center;
padding: 0 6px;
color: var(--color-muted);
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
}
.uc-event-bar::after {
.uc-event-title::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
transform: translateX(-150%);
pointer-events: none;
}
.uc-event-bar--active { background: var(--color-primary); }
.uc-event-bar--accent { background: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); }
.uc-event-bar--active::after { animation: uc-event-shimmer 2.2s linear infinite; }
.uc-event-bar--accent::after { animation: uc-event-shimmer 2.2s linear infinite 1.1s; }
.uc-event-title--active {
background: var(--color-primary);
color: #fff;
}
.uc-event-title--accent {
background: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
color: var(--color-text);
}
.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-cursor {
position: absolute;
@@ -4339,11 +4355,6 @@ p:last-child { margin-bottom: 0; }
animation: uc-event-cursor-move 4s ease-in-out infinite;
}
@keyframes uc-event-hdr-move {
0%, 20% { transform: translateX(0%); }
55%, 80% { transform: translateX(125%); }
100% { transform: translateX(0%); }
}
@keyframes uc-event-shimmer {
0% { transform: translateX(-150%); }
100% { transform: translateX(250%); }
@@ -4522,9 +4533,8 @@ p:last-child { margin-bottom: 0; }
.uc-menu-row--highlight,
.uc-menu-row--highlight .uc-menu-name,
.uc-menu-row--highlight .uc-menu-price,
.uc-event-header::after,
.uc-event-bar--active::after,
.uc-event-bar--accent::after,
.uc-event-title--active::after,
.uc-event-title--accent::after,
.uc-event-cursor,
.uc-db-bar--1, .uc-db-bar--2, .uc-db-bar--3, .uc-db-bar--4,
.uc-wf-dot::after,

22
theme/blocks/index.php
View File

@@ -1929,11 +1929,23 @@ function oribi_uc_anim_inner( $mod ) {
return '
<div class="uc-inner uc-inner--event" aria-hidden="true">
<div class="uc-event-cursor"></div>
<div class="uc-event-header"></div>
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--active"></div></div>
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--accent"></div></div>
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
<div class="uc-event-header">Schedule</div>
<div class="uc-event-row">
<div class="uc-event-time">9:00</div>
<div class="uc-event-title uc-event-title--active">Keynote Speech</div>
</div>
<div class="uc-event-row">
<div class="uc-event-time">10:30</div>
<div class="uc-event-title">Panel Discussion</div>
</div>
<div class="uc-event-row">
<div class="uc-event-time">11:45</div>
<div class="uc-event-title uc-event-title--accent">Coffee Break</div>
</div>
<div class="uc-event-row">
<div class="uc-event-time">12:30</div>
<div class="uc-event-title">Networking Lunch</div>
</div>
</div>';
case 'dashboard':
return '