Files
GameList/wwwroot/css/results.css

130 lines
2.8 KiB
CSS

.results-table {
width: 100%;
border-collapse: collapse;
}
.results-table th,
.results-table td {
padding: 10px;
}
.results-table tr {
border-bottom: 1px solid #e3d4bd;
}
.results-table th {
text-align: left;
color: #7a6a53;
font-size: 12px;
letter-spacing: 0.3px;
}
.results-table .rank-cell {
width: 64px;
text-align: center;
}
.medal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
font-size: 28px;
font-weight: 800;
color: #2c1c0d;
background: #f1e5c7;
box-shadow: inset 0 0 0 2px #e3d4bd, 0 6px 16px rgba(0, 0, 0, 0.12);
}
.podium {
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.85));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.podium td {
border-bottom: none;
}
.podium-1 {
background: linear-gradient(135deg, #ffecb3, #ffd861);
}
.podium-1 .medal {
background: linear-gradient(135deg, #ffd54f, #ffca28);
box-shadow: inset 0 0 0 2px #f1b000, 0 8px 18px rgba(0, 0, 0, 0.2);
}
.podium-2 {
background: linear-gradient(135deg, #d3d6ed, #bfc6e6);
}
.podium-2 .medal {
background: linear-gradient(135deg, #d7dbe5, #c2c7d2);
box-shadow: inset 0 0 0 2px #9ea3b1, 0 8px 18px rgba(0, 0, 0, 0.18);
}
.podium-3 {
background: linear-gradient(135deg, #f0d0b0, #e2a96a);
}
.podium-3 .medal {
background: linear-gradient(135deg, #f2b37a, #e08a4a);
box-shadow: inset 0 0 0 2px #c56d2c, 0 8px 18px rgba(0, 0, 0, 0.2);
}
.podium::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.podium .link {
color: #1a5075;
}
.results-table .game-cell {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
}
.results-table .thumb {
width: 72px;
height: 48px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e3d4bd;
cursor: pointer;
}
.results-table .game-meta {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.results-table .title-line {
font-weight: 700;
max-width: 600px;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.results-table .title-line .title-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table .title-line .link-chip {
flex: 0 0 auto;
}
.results-table .author-cell {
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table .muted.small {
font-size: 12px;
color: #7a6a53;
}
.thumb-open {
background: #fffaf3;
border: 1px solid #e3d4bd;
color: #2c1c0d;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
}