MediaWiki:Gadget-NewYearTheme.css

Материал из Абсурдопедии
Перейти к навигации Перейти к поиску

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/* Новогоднее пастельно-голубое оформление для Vector 2010 и 2022 */

/* Верхний бордюр для Vector 2010 */
#mw-head-base {
    position: relative;
    background: linear-gradient(to bottom, 135deg, #e8f4f8 0%, #e8f4f8 50%, #e8f4f8 100%);
    min-height: 25px;
    border-bottom: 2px solid #b8d9e6;
}


/* Верхний бордюр для Vector 2022 */
.skin-vector-2022 .mw-header {
    position: relative;
    background: linear-gradient(to bottom, #f0f9ff 0%, #e6f7ff 100%) !important;
    border-bottom: 2px solid #b3d9f0 !important;
}

/* Боковые бордюры */
#mw-page-base {
    position: relative;
    background: linear-gradient(90deg, #f7fcff 0%, #ebf7ff 100%);
}

/* Для Vector 2022 - боковые бордюры */
.skin-vector-2022 .mw-page-container {
    position: relative;
    background: linear-gradient(90deg, #f7fcff 0%, #ebf7ff 100%) !important;
}

/* Левая граница с узором */
#mw-page-base::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #99d6ff,
        #99d6ff 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.4;
}

/* Правая граница с узором */
#mw-page-base::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #99d6ff,
        #99d6ff 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.4;
}

/* Для Vector 2022 - боковые границы с узором */
.skin-vector-2022 .mw-page-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #99d6ff,
        #99d6ff 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.4;
    z-index: 1000;
}

.skin-vector-2022 .mw-page-container::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #99d6ff,
        #99d6ff 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.4;
    z-index: 1000;
}

/* Нижний бордюр - градиент сверху вниз от нежного голубого к прозрачному */
#footer {
    position: relative;
    border-top: 2px solid #c2e6ff;
    background: linear-gradient(to bottom, #f0f9ff 0%, rgba(240, 249, 255, 0) 100%);
}

/* Для Vector 2022 */
.skin-vector-2022 #footer {
    position: relative;
    border-top: 2px solid #c2e6ff !important;
    background: linear-gradient(to bottom, #f0f9ff 0%, rgba(240, 249, 255, 0) 100%) !important;
}

#footer::before {
    content: "✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦";
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: #a8d8ff;
    opacity: 0.6;
    letter-spacing: 4px;
}


/* Для Vector 2022 - плавные переходы для более мягкого изменения */
#mw-head-base, .skin-vector-2022 .mw-header, #footer {
    transition: all 0.3s ease;
}

/* Для Vector 2022 - декоративная линия */
.skin-vector-2022 #footer::before {
    content: "✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦";
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: #a8d8ff;
    opacity: 0.6;
    letter-spacing: 4px;
}

/* Декоративные элементы в углах контентной области */
.mw-body {
    position: relative;
}

.mw-body::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #b3e0ff;
    border-left: 2px solid #b3e0ff;
    opacity: 0.4;
}

.mw-body::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #b3e0ff;
    border-right: 2px solid #b3e0ff;
    opacity: 0.4;
}

/* Дополнительные декоративные линии */
#content {
    border-left: 1px solid #e6f7ff;
    border-right: 1px solid #e6f7ff;
}

/* Для Vector 2022 - контентная область */
.skin-vector-2022 .mw-content-container {
    border-left: 1px solid #e6f7ff;
    border-right: 1px solid #e6f7ff;
}

/* Дополнительные нежные акценты */
.skin-vector-2022 .mw-header .mw-portlet h3 {
    color: #8ec9ff !important;
}

/* Легкая тень для глубины */
.skin-vector-2022 .mw-header {
    box-shadow: 0 1px 3px rgba(179, 217, 240, 0.2) !important;
}


/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .skin-vector-2022 .mw-page-container::before,
    .skin-vector-2022 .mw-page-container::after,
    #mw-page-base::before,
    #mw-page-base::after {
        width: 1px;
    }
}