MediaWiki:Tweeki.css

Материал из Vanilla Station
Перейти к: навигация, поиск

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

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/* Шрифты */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v170/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Основной текст */
.mw-body {
    color: lightgray;
}

/* Хедер */
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: white;
}

/* Месседжбоксы */
.mw-message-box,
.mw-changeslist-legend {
    border: 1px solid transparent;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0.75rem 1.25rem;
    position: relative;
}

.mw-message-box p:last-child {
    margin-bottom: 0;
}

.mw-message-box-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.mw-message-box-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.mw-message-box-info,
.mw-changeslist-legend {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

.mw-message-box-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

/* Кнопки */
.oo-ui-buttonElement>* {
    background: #007bff !important;
    border-color: black !important;
    border-radius: 12px !important;
    color: white !important;
}

.oo-ui-buttonElement>*:hover {
    background: color-mix(in srgb, #34c9eb 50%, #007bff) !important;
    color: white !important;
}

.mw-rcfilters-ui-ro,
.oo-ui-popupWidget-popup,
.mw-rcfilters-ui-table,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
    background: #212126 !important;
    border-color: black;
    color: white !important;
}

.oo-ui-labelElement-label {
    color: white;
}

div.thumbinner {
    border: 1px solid #000000;
    background-color: #212126;
}

/* Аккордион */
.card-header {
    background-color: rgb(39, 39, 46);
    border-bottom: 1px solid black;
    padding: 0;
}

.card-header > h2 {
    border-bottom: 0;
}

.accordion > .card:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.accordion > .card:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.card {
    background: #212126;
    border: 1px solid black;
}

/* Фон и элементы */
body {
    background: #212126 !important;
}

.form-control,
.mw-htmlform-field-HTMLTextField input,
.mw-input select,
.mw-input textarea,
body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background: #27272e;
    border: 1px solid black;
    border-radius: 0.8rem;
}

.form-control:focus,
.mw-htmlform-field-HTMLTextField input:focus,
.mw-input select:focus,
.mw-input textarea:focus,
body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:focus {
    background: #212126;
    color: white;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #f8f9fa;
}

#footer,
.bg-light {
    background: #27272e !important;
}

.dropdown-menu.show {
    background: #27272e;
    padding: 1px 0;
    margin-bottom: 5px;
    border: 1px solid black;
    overflow: hidden;
}

.navbar-toggler {
    border: 1px solid black !important;
}

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item {
    color: #ffffff;
}

.dropdown-divider {
    border-top: 1px solid black;
}

.dropdown-item:focus,
.dropdown-item:not(.active):hover {
    background: #1b1b1f;
}

/* Оглавление */
#tweekiTOC #toc a,
#tweekiTOC {
    color: #9a9a9a;
}

#tweekiTOC #toc a.active,
#tweekiTOC #toc a:focus,
#tweekiTOC #toc a:hover {
    color: white;
}

.toctitle {
    min-width: 150px;
}

/* Ширина страницы */
.row {
    width: 100%;
    margin: 0 auto;
}

/* Медиазапросы */
@media (max-width: 576px) {
    .col-md-9 {
        padding: 0;
    }

    body main {
        margin-bottom: 45px;
    }
}

@media (min-width: 576px) {
    .form-inline .form-control,
    .form-inline .mw-htmlform-field-HTMLTextField input,
    .form-inline .mw-input select,
    .form-inline .mw-input textarea,
    .form-inline body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
    .mw-htmlform-field-HTMLTextField .form-inline input,
    .mw-input .form-inline select,
    .mw-input .form-inline textarea,
    body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .form-inline .oo-ui-inputWidget-input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #sidebar-right.col-md-3.sidebar-sticky {
        display: none;
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100%;
        margin-right: 15px;
    }

    .dropdown-menu.show {
        border-radius: 0;
        border: none;
        border-top: 1px solid #212126;
        border-bottom: 1px solid #212126;
    }
}

@media (min-width: 768px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100%;
        margin: 0 15px;
    }

    .col-md-9 {
        flex-basis: 88.631%;
        max-width: 88.631%;
    }

    .col-md-3 {
        flex-basis: 11.369%;
        max-width: 11.369%;
    }

    #content {
        border-radius: 5px;
        padding: 0;
    }

    .col,
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-auto {
        padding-right: 5px;
        padding-left: 5px;
    }
}

@media (max-width: 992px) {
    .navbar-nav {
        margin-top: 0 !important;
    }

    #searchForm {
        margin-bottom: 5px;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-lg .navbar-collapse {
        flex-basis: auto;
    }
}