MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→CSS placed here will be applied to all skins: →Layout helpers: .hp-section { margin: 24px 0; } .hp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .hp-col { min-width: 0; } →Hero: .hp-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; } .hp-hero__deck { opacity: 0.9; } .hp-hero__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } →Universes grid: .ug-grid { display: gr..." |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* Контейнер секції */ | ||
.universes-wrap { margin: 8px 0 20px; } | |||
. | |||
/* | /* Сітка на 4 в ряд (адаптив) */ | ||
. | .ug-grid { | ||
. | display: grid; | ||
. | grid-template-columns: repeat(4, minmax(0, 1fr)); | ||
gap: 16px; | |||
} | |||
@media (max-width: 1100px) { .ug-grid { grid-template-columns: repeat(3, 1fr); } } | |||
@media (max-width: 820px) { .ug-grid { grid-template-columns: repeat(2, 1fr); } } | |||
@media (max-width: 520px) { .ug-grid { grid-template-columns: 1fr; } } | |||
/* | /* Картка */ | ||
.ug- | .ug-item { min-width: 0; } | ||
.ug-card { display:block; border:1px solid var(--border-color,# | .ug-card { | ||
.ug-card__img img{ width:100%; | display: block; | ||
.ug-card__body { padding:10px 12px; } | border: 1px solid var(--border-color, #2a2a2a); | ||
.ug-card__title { font-weight: | border-radius: 10px; | ||
.ug-card__tag { font-size:12px; opacity:. | overflow: hidden; | ||
background: var(--page-element-bg, #111); | |||
text-decoration: none; | |||
color: inherit; | |||
} | |||
.ug-card__img img { | |||
width: 100%; | |||
aspect-ratio: 16/9; | |||
object-fit: cover; | |||
display: block; | |||
} | |||
.ug-card__body { padding: 10px 12px; } | |||
.ug-card__title { font-weight: 700; } | |||
.ug-card__tag { font-size: 12px; opacity: .75; } | |||
/* | /* Кнопка “View all” */ | ||
. | .universes-cta { text-align: center; margin-top: 14px; } | ||
.btn { | |||
display: inline-block; | |||
padding: 10px 16px; | |||
border-radius: 999px; | |||
border: 1px solid var(--border-color, #2a2a2a); | |||
background: var(--page-element-bg, #111); | |||
font-weight: 700; | |||
white-space: nowrap; | |||
} | |||
.btn:hover { filter: brightness(1.1); } | |||
/* | /* Страховка, щоб нічого не тягнуло ширину */ | ||
html, body { overflow-x: hidden; } | |||
img, video, table, .thumb { max-width: 100%; height: auto; } | |||
} | |||
Latest revision as of 12:19, 4 November 2025
/* Контейнер секції */
.universes-wrap { margin: 8px 0 20px; }
/* Сітка на 4 в ряд (адаптив) */
.ug-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1100px) { .ug-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .ug-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ug-grid { grid-template-columns: 1fr; } }
/* Картка */
.ug-item { min-width: 0; }
.ug-card {
display: block;
border: 1px solid var(--border-color, #2a2a2a);
border-radius: 10px;
overflow: hidden;
background: var(--page-element-bg, #111);
text-decoration: none;
color: inherit;
}
.ug-card__img img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
.ug-card__body { padding: 10px 12px; }
.ug-card__title { font-weight: 700; }
.ug-card__tag { font-size: 12px; opacity: .75; }
/* Кнопка “View all” */
.universes-cta { text-align: center; margin-top: 14px; }
.btn {
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--border-color, #2a2a2a);
background: var(--page-element-bg, #111);
font-weight: 700;
white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
/* Страховка, щоб нічого не тягнуло ширину */
html, body { overflow-x: hidden; }
img, video, table, .thumb { max-width: 100%; height: auto; }