MediaWiki:Citizen.css

Hinweis: Leeren Sie nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */
body {
    background: #fcfbf8;
}

.citizen-page-container {
    background: #ffffff;
}

.citizen-sidebar {
    background: #faf8f5;
}
/* Принудительно белый фон для всех основных областей */
body,
.skin-citizen .mw-page-container,
.skin-citizen .mw-header,
.skin-citizen .mw-content-container,
.skin-citizen .mw-workspace-container,
.skin-citizen .citizen-body-container {
    background-color: #ffffff !important;
}

/* Гарантируем, что текст будет темным и читабельным */
body,
.skin-citizen .mw-body-content,
.skin-citizen .mw-body,
.skin-citizen .mw-page-container * {
    color: #1a1a1a !important; /* Темно-серый, почти черный, хорошая читаемость */
}

/* На случай, если фон у карточек или панелей остается серым */
.skin-citizen .citizen-card,
.skin-citizen .citizen-panel,
.skin-citizen .mw-echo-ui-notificationItemWidget {
    background-color: #f8f9fa !important; /* Светлый фон, чтобы не сливался с белым */
    color: #1a1a1a !important;
}
/* ==========================================
   Michaeliten Wiki - Logo
   ========================================== */

/* Увеличиваем область логотипа */
.mw-logo {
    max-width: 110px !important;
    max-height: 110px !important;
}

/* Убираем ограничение на изображение */
.mw-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}
/* Футер - делаем фон белым, убираем голубизну */
.skin-citizen .mw-footer,
.skin-citizen .citizen-footer {
    background-color: #ffffff !important;
    /* Убираем градиент, если он есть */
    background-image: none !important;
    border-top: 1px solid #e0e0e0 !important; /* Легкая серая линия вместо голубой */
}

/* Все элементы внутри футера тоже на белом фоне */
.skin-citizen .mw-footer *,
.skin-citizen .citizen-footer * {
    background-color: transparent !important; /* Прозрачный фон, чтобы не перекрывать белый */
    color: #1a1a1a !important; /* Текст темный для читаемости */
}

/* Ссылки в футере делаем чуть светлее, но читаемыми */
.skin-citizen .mw-footer a,
.skin-citizen .citizen-footer a {
    color: #0645ad !important; /* Стандартный синий для ссылок */
}

.skin-citizen .mw-footer a:visited,
.skin-citizen .citizen-footer a:visited {
    color: #0b0080 !important; /* Цвет для посещенных ссылок */
}
/* Скрываем иконку логотипа в футере, оставляем только wordmark (logo1.png) */
.skin-citizen .mw-footer .mw-logo-icon,
.skin-citizen .citizen-footer .mw-logo-icon {
    display: none !important;
}

/* Убеждаемся, что wordmark отображается правильно */
.skin-citizen .mw-footer .mw-logo-wordmark,
.skin-citizen .citizen-footer .mw-logo-wordmark {
    display: block !important;
    height: 100px !important; /* Ваша желаемая высота */
    width: auto !important;
    max-width: 200px !important;
    filter: none !important; /* Убираем инверсию цвета */
}
@media screen and (max-width: 720px) {
    .citizen-drawer,
    .citizen-drawer__container,
    .citizen-drawer__header,
    .citizen-drawer__menu {
        background-color: #ffffff !important;
        background-image: none !important;
    }
    
    .citizen-drawer * {
        background-color: transparent !important;
    }
    
    .citizen-drawer .mw-list-item a {
        color: #1a1a1a !important;
    }
}
/* Исправляем конфликт между хедером и левой панелью */
.skin-citizen .mw-page-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Хедер (шапка) - делаем его шириной на всю страницу */
.skin-citizen .mw-header {
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

/* Левая панель - закрепляем слева */
.skin-citizen .citizen-panel,
.skin-citizen .mw-panel {
    position: sticky !important;
    top: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e0e0e0 !important;
    z-index: 5 !important;
}

/* Основной контент */
.skin-citizen .mw-body,
.skin-citizen .mw-body-container {
    flex: 1 !important;
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Исправляем контейнер, чтобы хедер и контент не перекрывались */
.skin-citizen .mw-workspace-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Мобильная версия - хедер становится нижней панелью */
@media screen and (max-width: 720px) {
    .skin-citizen .mw-page-container {
        flex-direction: column !important;
    }
    
    .skin-citizen .citizen-panel,
    .skin-citizen .mw-panel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        order: 2 !important; /* Переносим панель вниз */
    }
    
    .skin-citizen .mw-header {
        order: 1 !important;
    }
    
    .skin-citizen .mw-body,
    .skin-citizen .mw-body-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        order: 3 !important;
    }
}