rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add historical UI and backend API slice

Browse Source
This commit is contained in:
devRaGonSa
2026-03-20 22:39:17 +01:00
parent f346084c5f
commit 502d11d8b3
19 changed files with 1862 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
frontend/assets/css/historico.css Normal file
View File

@@ -0,0 +1,242 @@
.historical-shell {
padding-bottom: 56px;
}
.historical-hero {
min-height: auto;
}
.historical-hero__content {
padding-top: 44px;
padding-bottom: 46px;
}
.historical-hero__topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}
.historical-hero__copy {
display: grid;
gap: 24px;
}
.historical-hero__title {
max-width: 12ch;
}
.historical-hero__text {
max-width: 60ch;
}
.historical-content {
gap: 22px;
}
.historical-panel {
backdrop-filter: blur(4px);
}
.historical-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.historical-selector {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.historical-selector__button {
min-height: 48px;
padding: 0 18px;
border: 1px solid rgba(183, 201, 125, 0.28);
border-radius: 999px;
background: linear-gradient(180deg, rgba(24, 30, 22, 0.94), rgba(11, 14, 10, 0.98));
color: var(--text-soft);
font: inherit;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
background 160ms ease,
color 160ms ease;
}
.historical-selector__button:hover,
.historical-selector__button:focus-visible,
.historical-selector__button.is-active {
transform: translateY(-1px);
border-color: rgba(210, 182, 118, 0.5);
background: linear-gradient(180deg, rgba(183, 201, 125, 0.18), rgba(89, 101, 58, 0.24));
color: var(--text);
}
.historical-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 14px;
}
.historical-stat-card,
.historical-match-card {
position: relative;
overflow: hidden;
padding: 18px;
border: 1px solid rgba(159, 168, 141, 0.16);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(12, 15, 11, 0.98));
box-shadow: var(--shadow-soft);
}
.historical-stat-card p,
.historical-stat-card strong,
.historical-match-card p,
.historical-match-card strong {
margin: 0;
}
.historical-stat-card p,
.historical-match-meta__label {
margin-bottom: 6px;
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-stat-card strong {
font-size: 1.05rem;
line-height: 1.4;
}
.historical-state {
margin: 0 0 16px;
padding: 14px 16px;
border: 1px dashed rgba(159, 168, 141, 0.28);
border-radius: 14px;
color: var(--text-soft);
background: rgba(13, 17, 12, 0.52);
}
.historical-state.is-error {
border-style: solid;
border-color: rgba(210, 182, 118, 0.28);
color: var(--accent-warm);
}
.historical-state[hidden] {
display: none;
}
.historical-table-shell {
overflow-x: auto;
}
.historical-table {
width: 100%;
border-collapse: collapse;
min-width: 620px;
}
.historical-table th,
.historical-table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(159, 168, 141, 0.12);
text-align: left;
}
.historical-table th {
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-table td {
color: var(--text);
}
.historical-table tbody tr:last-child td {
border-bottom: 0;
}
.historical-table__position {
color: var(--accent-warm);
font-weight: 700;
}
.historical-match-list {
display: grid;
gap: 14px;
}
.historical-match-card {
display: grid;
gap: 14px;
}
.historical-match-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.historical-match-card__title {
margin: 0;
font-size: 1.08rem;
}
.historical-match-card__result {
padding: 0.45rem 0.75rem;
border: 1px solid rgba(183, 201, 125, 0.24);
border-radius: 999px;
color: var(--accent-strong);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-match-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 12px;
}
.historical-match-meta strong {
display: block;
line-height: 1.5;
}
@media (max-width: 720px) {
.historical-hero__topline,
.historical-panel__header,
.historical-match-card__top {
flex-direction: column;
align-items: flex-start;
}
.historical-selector {
flex-direction: column;
}
.historical-selector__button {
width: 100%;
}
.historical-table {
min-width: 540px;
}
}