MediaWiki:Common.css

/* Размещённый здесь CSS будет применяться ко всем темам оформления */

html {
  --header-size: 3.5rem;
  --header-card-maxheight: 70vh;
  --width-layout: 1080px;
  --width-layout--extended: calc(var(--width-layout) * 1.5);
  --width-toc: 240px;
  --line-height: 1.6;
  --line-height-xs: 1.25;
  --line-height-sm: 1.375;
  --space-unit: 1rem;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: var(--space-unit);
  --space-lg: calc(1.25 * var(--space-unit));
  --space-xl: calc(1.5 * var(--space-unit));
  --space-xxl: calc(2 * var(--space-unit));
  --margin-layout: calc((100vw - var(--width-layout)) / 2);
  --padding-page: 16px;
}

@media screen {
  :root.skin-citizen-dark {
    --color-primary__l: 60%;
    --color-surface-0: hsl(205,20%,10%);
    --color-surface-1: hsl(205,25%,12%);
    --color-surface-2: hsl(205,25%,15%);
    --color-surface-3: hsl(205,15%,20%);
    --color-surface-4: hsl(205,15%,25%);
    --color-base--emphasized: hsl(205,80%,95%);
    --color-base: hsl(205,25%,80%);
    --color-base--subtle: hsl(205,25%,65%);
    --background-color-primary--hover: hsl(205,60%,15%);
    --background-color-primary--active: hsl(205,60%,20%);
    --background-color-overlay: hsla(205,20%,10%,0.95);
    --background-color-overlay--lighter: hsla(205,20%,10%,0.6);
    --color-surface-2--hover: hsl(205,30%,19%);
    --color-surface-2--active: hsl(205,30%,11%);
    --surface-shadow: 205,50%,3%;
    --shadow-strength: 0.8;
    --filter-invert: invert(1) hue-rotate(180deg);
    --font-grade: -25;
  }
}

@media screen and (min-width: 851px) {
    .mobile {
        display:none !important;
    }
    
    .desktoponly {
    }
}

@media screen and (max-width: 850px) {
    .nomobile {
        display:none !important;
    }
    
    .mobileonly{
    }
    
    .mobilefont {
        font-size: 80%
    }
}

/*@media screen and (min-width: 640px) {*/
/*	.mobile {*/
/*    	display: none !important;*/
/*	}*/
/*}*/

/*@media screen and (max-width: 640px) {*/
/*  .nomobile {*/
/*    	display: none !important;*/
/*	}*/
/*}*/

.home-link__button a {
  color: #fff !important;
}

.wikitable-2 {
    margin: var(--space-md) 0;
    border: 0.5px solid var(--border-color-base);
    border-radius: var(--border-radius--medium);
    border-spacing: 0;
    font-size: var(--font-size-small);
}

img {
  image-rendering: pixelated;
}

/* Modern Infobox Styles - Adapted for Citizen Skin */
.infobox-modern {
    float: right;
    clear: right;
    margin: var(--space-md) 0 var(--space-md) var(--space-md); /* Используем переменные для отступов */
    width: 320px; /* Фиксированная ширина инфобокса */
    background-color: var(--color-surface-1); /* Используем фон из вашей темы */
    border: 1px solid var(--border-color-base, #eaecf0); /* Используем переменную для границы, с запасным значением */
    border-radius: var(--border-radius--medium, 8px); /* Используем переменную для радиуса, с запасным значением */
    padding: var(--space-xl); /* Внутренние отступы */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* Современный шрифт */
    font-size: var(--font-size-small, 0.9em); /* Используем переменную, если есть, иначе 0.9em */
    line-height: var(--line-height, 1.5); /* Используем переменную */
    color: var(--color-base, hsl(205,25%,80%)); /* Основной цвет текста из вашей темы */
    box-shadow: 0 2px 5px hsla(var(--surface-shadow, 205,50%,3%), calc(var(--shadow-strength, 0.2) * 0.5)); /* Легкая тень, адаптированная под переменные */
}

.infobox-modern .infobox-image-container {
    text-align: center;
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-color-base, #eaecf0); /* Разделитель */
    padding-bottom: var(--space-xl);
}

.infobox-modern .infobox-image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius--small, 4px); /* Закругленные углы для изображений */
}

.infobox-modern .infobox-name {
    font-size: calc(2 * var(--font-size-large, 1em)); /* Большой размер для имени, можно настроить */
    font-weight: 600; /* Полужирный */
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--space-xxl);
    color: var(--color-base--emphasized, hsl(205,80%,95%)); /* Более яркий цвет для имени */
}

.infobox-modern .infobox-section-title {
    font-size: calc(1.1 * var(--font-size-medium, 1em)); /* Размер для заголовков секций */
    font-weight: 500;
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-md);
    color: var(--color-base, hsl(205,25%,80%)); /* Цвет текста из вашей темы */
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color-base, #eaecf0); /* Разделитель для секций */
}

.infobox-modern .infobox-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed var(--border-color-base--subtle, #555); /* Пунктирная линия, используем более тонкий цвет */
}

.infobox-modern .infobox-row:last-of-type {
    border-bottom: none; /* Убираем границу у последнего элемента в секции */
}

.infobox-modern .infobox-label {
    font-weight: 400;
    color: var(--color-base--subtle, hsl(205,25%,65%)); /* Более приглушенный цвет для метки */
    flex-shrink: 0;
    margin-right: var(--space-xs);
}

.infobox-modern .infobox-value {
    text-align: right;
    font-weight: 500;
    color: var(--color-base, hsl(205,25%,80%)); /* Основной цвет текста */
    word-break: break-word;
}

/* Стилизация ссылок внутри инфобокса */
.infobox-modern a {
    color: var(--color-primary, #4a90e2); /* Используем переменную для основного цвета ссылок, или синий по умолчанию */
    text-decoration: none;
}

.infobox-modern a:hover {
    text-decoration: underline;
}

/* Адаптивность для узких экранов - используем ваши брейкпоинты */
@media screen and (max-width: 850px) { /* Используем ваш брейкпоинт для мобильных */
    .infobox-modern {
        float: none;
        clear: both;
        margin: var(--space-md) auto;
        width: 95%; /* Шире на мобильных */
        max-width: 400px; /* Ограничение максимальной ширины */
    }
    .infobox-modern .infobox-name {
        font-size: calc(1.5 * var(--font-size-large, 1em)); /* Чуть меньше на мобильных */
    }
    .infobox-modern .infobox-section-title {
        font-size: var(--font-size-large, 1em);
    }
}