mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-10-14 18:05:04 +03:00
MHSanaei
6f1dd0d757
The sidebar no longer carries a sponsor card. The backend stops serving the "sidebar" slot, so a sponsors.json entry that still lists it keeps only its other slots and one listing nothing else is dropped. Its rotation, three-sponsor cap and collapsed-rail logo rendering go with it. The Sponsors page now lists only real sponsors: the "Your brand here" card shows only as the empty state instead of sitting in the grid and repeating the header's Become a sponsor button, and the Available placements section and its slot-occupancy helper are removed. Cards are larger, two per row on wide screens. Unused i18n keys are dropped from every locale.
245 lines
4.2 KiB
CSS
245 lines
4.2 KiB
CSS
.sponsor-card {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
border: 1px solid var(--ant-color-border-secondary);
|
|
border-radius: var(--ant-border-radius-lg, 8px);
|
|
background: var(--bg-card, var(--ant-color-fill-quaternary));
|
|
transition:
|
|
border-color 0.2s,
|
|
background 0.2s;
|
|
}
|
|
|
|
.sponsor-card:hover {
|
|
border-color: var(--ant-color-primary);
|
|
}
|
|
|
|
.sponsor-main {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 12px 16px;
|
|
color: var(--ant-color-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sponsor-main:hover,
|
|
.sponsor-main:focus-visible {
|
|
color: var(--ant-color-text);
|
|
outline: none;
|
|
}
|
|
|
|
.sponsor-logo {
|
|
flex: 0 0 auto;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
object-fit: contain;
|
|
background: var(--ant-color-bg-elevated);
|
|
}
|
|
|
|
.sponsor-logo-fallback {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: var(--ant-color-primary);
|
|
background: var(--ant-color-primary-bg);
|
|
}
|
|
|
|
.sponsor-body {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sponsor-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sponsor-tag {
|
|
flex: 0 0 auto;
|
|
padding: 0 6px;
|
|
border: 1px solid var(--ant-color-border);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
color: var(--ant-color-text-tertiary);
|
|
}
|
|
|
|
.sponsor-title {
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.sponsor-text {
|
|
font-size: 13px;
|
|
color: var(--ant-color-text-secondary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.sponsor-visit {
|
|
flex: 0 0 auto;
|
|
font-size: 13px;
|
|
color: var(--ant-color-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sponsor-aside {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sponsor-close {
|
|
flex: 0 0 auto;
|
|
align-self: flex-start;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: 6px 6px 0 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--ant-color-text-tertiary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sponsor-close:hover,
|
|
.sponsor-close:focus-visible {
|
|
color: var(--ant-color-text);
|
|
background: var(--ant-color-fill-tertiary);
|
|
outline: none;
|
|
}
|
|
|
|
[dir='rtl'] .sponsor-close {
|
|
margin: 6px 0 0 6px;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-main {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 4px 8px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-body,
|
|
.sponsor-card-compact .sponsor-head {
|
|
display: contents;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-tag {
|
|
justify-self: start;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-title,
|
|
.sponsor-card-compact .sponsor-text {
|
|
display: -webkit-box;
|
|
grid-column: 1 / -1;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-title {
|
|
font-size: 13px;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-text {
|
|
font-size: 12px;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.sponsor-card-compact .sponsor-close {
|
|
position: absolute;
|
|
top: 4px;
|
|
inset-inline-end: 4px;
|
|
width: 22px;
|
|
height: 22px;
|
|
margin: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.sponsor-card-card {
|
|
height: 100%;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-main {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-logo {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-logo-fallback {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-body {
|
|
gap: 6px;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-title {
|
|
font-size: 17px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-text {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sponsor-card-card .sponsor-visit {
|
|
margin-top: auto;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.sponsor-card-banner .sponsor-main {
|
|
flex-wrap: wrap;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.sponsor-card-banner .sponsor-aside {
|
|
flex-basis: 100%;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-inline-start: 52px;
|
|
}
|
|
}
|
|
|
|
.sponsor-card-card {
|
|
transition:
|
|
border-color 0.2s,
|
|
transform 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
|
|
.sponsor-card-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
|
}
|