MediaWiki:Common.css: различия между версиями

Текущая версия от 12:58, 11 августа 2026

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.catlinks {
display: none;
}

:root {
--color-background: linear-gradient(135deg, #1d2330, #161b26);
--color-text: #ffffff;
--color-header: #00e676;
--color-description: #ffffff;
--color-highlight: #00e676;
--color-crit: #ff1744;
--color-type: #ff9100;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-border: #444;
--spacing-small: 8px;
--spacing-medium: 10px;
--spacing-large: 20px;
--border-radius: 12px;
}

.minecraft-item {
position: relative;
display: inline-block;
margin: 2px;
cursor: pointer;
width: 100px;
height: 100px;
}

.minecraft-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.minecraft-item:hover img {
transform: scale(1.05);
box-shadow: 0 10px 20px var(--color-shadow);
}

.minecraft-item .tooltip {
display: none;
position: absolute;
background: var(--color-background);
color: var(--color-text);
border-radius: var(--border-radius);
padding: var(--spacing-large);
z-index: 1;
width: 300px;
top: 50%;
left: calc(100% + 15px);
transform: translateY(-50%) translateX(10px);
box-shadow: 0 5px 10px var(--color-shadow);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
opacity: 0;
visibility: hidden;
}

.minecraft-item:hover .tooltip {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-50%) translateX(10px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}

.tooltip .item-name {
font-size: 1.4em;
font-family: 'Minecraft Rus', sans-serif;
margin-bottom: var(--spacing-medium);
text-shadow: 0 2px 4px var(--color-shadow);
color: var(--color-header);
}

.tooltip .price-coins,
.tooltip .price-hammers,
.tooltip .required-tech,
.tooltip .required-building,
.tooltip .points,
.tooltip .income-per-hour,
.tooltip .spawn-location,
.tooltip .buff,
.tooltip .buff-description,
.tooltip .buff2,
.tooltip .buff2-description,
.tooltip .category,
.tooltip .ship-price,
.tooltip .source,
.tooltip .stats,
.tooltip .extra-hp,
.tooltip .enchantments {
margin-top: var(--spacing-small);
font-size: 0.95em;
line-height: 1.5;
color: var(--color-text);
}

.tooltip .ability {
color: var(--color-highlight);
font-weight: bold;
}

.tooltip .requirements {
color: var(--color-crit);
font-weight: bold;
}

.tooltip .type {
color: var(--color-type);
font-weight: bold;
}

.tooltip hr {
border: 0;
height: 1px;
background: var(--color-border);
margin: var(--spacing-medium) 0;
}

.tooltip .description {
color: var(--color-description);
font-size: 1em;
line-height: 1.5;
}

@media (max-width: 600px) {
.minecraft-item {
width: 80px;
height: 80px;
}

.minecraft-item .tooltip {
width: 250px;
left: calc(100% + 10px);
}

.tooltip .item-name {
font-size: 1.1em;
}

.tooltip {
padding: 15px;
}
}


/* === Все ссылки синие, в т.ч. на ещё не созданные страницы === */
a, a.external, a.extiw {
    color: #4ea1f3 !important;
}
a:visited {
    color: #6ab7ff !important;
}
a:hover {
    color: #82c8ff !important;
}
a.new, .new a {
    color: #4ea1f3 !important;
    text-decoration: none;
}
a.new:hover, .new a:hover {
    color: #82c8ff !important;
    text-decoration: underline;
}

/* === CIVCRAFT ARTICLE CARDS 2026-08-11 === */
.civ-entry-card {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(260px, 360px);
    gap: 28px;
    align-items: stretch;
    margin: 12px 0 30px;
    padding: 22px;
    border: 1px solid rgba(126, 160, 205, .32);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(31, 40, 57, .96), rgba(17, 23, 34, .96));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
    overflow: hidden;
}
.civ-entry-wonder {
    border-color: rgba(236, 191, 76, .48);
    background: linear-gradient(135deg, rgba(49, 43, 29, .96), rgba(19, 23, 32, .96));
}
.civ-entry-main { min-width: 0; }
.civ-entry-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(79, 161, 243, .38);
    border-radius: 999px;
    color: #8bc5ff;
    background: rgba(78, 161, 243, .09);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.civ-entry-wonder .civ-entry-kicker {
    color: #f5cf67;
    border-color: rgba(245, 207, 103, .42);
    background: rgba(245, 207, 103, .09);
}
.civ-entry-lead {
    margin: 0 0 16px;
    color: #e9f1fb;
    font-size: 1.06rem;
    line-height: 1.55;
}
.civ-entry-visual {
    display: flex;
    min-height: 270px;
    padding: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), rgba(255,255,255,.025) 68%);
}
.civ-entry-visual img {
    width: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    filter: drop-shadow(0 12px 15px rgba(0,0,0,.28));
}
.civ-entry-caption {
    margin-top: 9px;
    color: #aebbd0;
    font-size: .78rem;
    text-align: center;
}
.civ-entry-placeholder {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.civ-entry-placeholder img {
    width: 128px;
    height: 128px;
    object-fit: contain;
    image-rendering: pixelated;
}
.civ-entry-placeholder-icon {
    font-size: 5.5rem;
    line-height: 1;
    filter: drop-shadow(0 12px 18px rgba(239, 190, 67, .24));
}
.civ-entry-placeholder-title {
    margin-top: 14px;
    color: #eef5ff;
    font-size: 1.05rem;
    font-weight: 750;
}
.civ-stat-table {
    width: 100%;
    max-width: 680px;
    border-collapse: separate;
    border-spacing: 0 3px;
    background: transparent !important;
}
.civ-stat-table td { border: 0 !important; }
.civ-stat-table .civ-stat-icon {
    width: 38px;
    padding: 3px 8px 3px 0;
    text-align: center;
}
.civ-stat-table .civ-stat-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.civ-stat-table .civ-stat-label {
    width: 42%;
    padding: 7px 12px;
    color: #aebbd0;
    font-size: .9rem;
}
.civ-stat-table .civ-stat-value {
    padding: 7px 10px;
    color: #f3f7fc;
    font-size: .92rem;
}
.civ-section-note {
    margin: 8px 0 14px;
    padding: 10px 13px;
    border-left: 3px solid #4ea1f3;
    border-radius: 5px;
    background: rgba(78, 161, 243, .08);
    color: #b9c8dc;
}
.civ-tree-launch {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 10px 0 28px;
    padding: 20px 22px;
    border: 1px solid rgba(78, 161, 243, .45);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(28, 53, 76, .96), rgba(18, 30, 44, .96));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.civ-tree-launch-icon { font-size: 2.55rem; line-height: 1; }
.civ-tree-launch-copy { color: #b9c8dc; line-height: 1.45; }
.civ-tree-launch-title {
    margin-bottom: 3px;
    color: #f2f7fd;
    font-size: 1.25rem;
    font-weight: 750;
}
.civ-tree-launch-action a.external {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #5eb5ff;
    border-radius: 8px;
    color: #f7fbff !important;
    background: #247ab9;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.civ-tree-launch-action a.external:hover {
    background: #3194d8;
    text-decoration: none;
}
.civ-level-table { width: auto; min-width: 52%; }
.mw-parser-output > h2 {
    margin-top: 1.55em;
    padding-bottom: .28em;
    border-bottom-color: rgba(126, 160, 205, .28);
}
.mw-parser-output > h2 .mw-headline { color: #eef5ff; }
@media (max-width: 850px) {
    .civ-tree-launch { grid-template-columns: auto 1fr; padding: 16px; gap: 12px; }
    .civ-tree-launch-action { grid-column: 1 / -1; }
    .civ-entry-card { grid-template-columns: 1fr; padding: 15px; gap: 16px; }
    .civ-entry-visual { grid-row: 1; min-height: 210px; }
    .civ-entry-visual img { max-height: 250px; }
    .civ-level-table { width: 100%; min-width: 0; display: block; overflow-x: auto; }
}