mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
UI Updates
This commit is contained in:
@@ -321,50 +321,126 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
.meetings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
|
||||
/* ---- Meeting card ---- */
|
||||
.meeting-card {
|
||||
display: block;
|
||||
background: var(--surface-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* background is set directly via inline style by meetingCardStyle() */
|
||||
border: 1px solid var(--surface-3);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 140px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.meeting-card:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--text-3);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(var(--country-r,100), var(--country-g,100), var(--country-b,150), 0.55);
|
||||
box-shadow: 0 6px 22px rgba(0,0,0,0.4),
|
||||
0 0 0 1px rgba(var(--country-r,100), var(--country-g,100), var(--country-b,150), 0.2);
|
||||
}
|
||||
.meeting-card.past { opacity: 0.5; }
|
||||
.meeting-card.past {
|
||||
opacity: 0.45;
|
||||
filter: grayscale(0.4);
|
||||
}
|
||||
.meeting-card.meeting-next {
|
||||
border-color: rgba(var(--country-r,225), var(--country-g,6), var(--country-b,0), 0.55);
|
||||
box-shadow: 0 0 0 1px rgba(var(--country-r,225), var(--country-g,6), var(--country-b,0), 0.2),
|
||||
0 4px 20px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* Top accent stripe */
|
||||
.meeting-card-accent {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--surface-3);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.meeting-card:not(.past) .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff4422);
|
||||
background: var(--country-accent, var(--surface-3));
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.meeting-card.past .meeting-card-accent { opacity: 0.35; }
|
||||
.meeting-card.meeting-next .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff8844, var(--f1-red));
|
||||
background: linear-gradient(90deg,
|
||||
var(--country-accent, var(--f1-red)) 0%,
|
||||
rgba(var(--country-r,225), var(--country-g,6), var(--country-b,0), 0.5) 50%,
|
||||
var(--country-accent, var(--f1-red)) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer-red 2s linear infinite;
|
||||
}
|
||||
.meeting-card.meeting-next {
|
||||
border-color: rgba(225,6,0,0.35);
|
||||
box-shadow: 0 0 0 1px rgba(225,6,0,0.12), 0 4px 16px rgba(225,6,0,0.1);
|
||||
|
||||
/* Card body: country code + flag */
|
||||
.meeting-card-body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0.85rem 0.25rem;
|
||||
}
|
||||
|
||||
/* Large bold country code — colored with the accent */
|
||||
.meeting-country-code {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
color: var(--country-accent, var(--text-1));
|
||||
/* soften very dark accents a little so they're legible */
|
||||
filter: brightness(1.4);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.meeting-card.past .meeting-country-code {
|
||||
color: var(--text-3);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* Small flag emoji — top-right corner */
|
||||
.meeting-card-flag {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
|
||||
}
|
||||
|
||||
/* Card footer: name, circuit, date */
|
||||
.meeting-card-foot {
|
||||
padding: 0.5rem 0.85rem 0.75rem;
|
||||
}
|
||||
.meeting-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.3;
|
||||
color: var(--text-1);
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.meeting-circuit {
|
||||
color: var(--text-2);
|
||||
font-size: 0.73rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.meeting-date {
|
||||
color: var(--text-3);
|
||||
font-size: 0.7rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Round number badge — bottom right */
|
||||
.meeting-round {
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
right: 0.7rem;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-3);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.meeting-flag { font-size: 1.5rem; margin: 0.3rem 0 0.3rem; }
|
||||
.meeting-name { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
|
||||
.meeting-circuit { color: var(--text-2); font-size: 0.78rem; margin-top: 0.15rem; }
|
||||
.meeting-date { color: var(--text-3); font-size: 0.75rem; margin-top: 0.3rem; }
|
||||
|
||||
/* ---- Session pills ---- */
|
||||
.session-pills {
|
||||
|
||||
Reference in New Issue
Block a user