diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 038f331..5c763d1 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -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, diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 2f96721..a5f9a6a 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1929,11 +1929,23 @@ function oribi_uc_anim_inner( $mod ) { return ' '; case 'dashboard': return '