MediaWiki:ScmcCatalog.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.

.scmc-catalog {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.scmc-catalog-tools {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.scmc-catalog-search {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid rgba(120,140,155,.28);
    border-radius: 8px;
    background: rgba(12,16,21,.82);
    color: #e3e8ee;
    font-size: 14px;
}

.scmc-catalog-search:focus {
    outline: none;
    border-color: rgba(128,178,210,.62);
    box-shadow: 0 0 0 2px rgba(80,145,190,.16);
}

.scmc-catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.scmc-catalog-filter {
    padding: 7px 10px;
    border: 1px solid rgba(120,140,155,.22);
    border-radius: 7px;
    background: rgba(18,23,29,.72);
    color: #dce8f2;
    cursor: pointer;
    font-weight: 650;
}

.scmc-catalog-filter:hover,
.scmc-catalog-filter.is-active {
    border-color: rgba(128,178,210,.48);
    background: rgba(28,36,45,.88);
}

.scmc-catalog-counter {
    color: #9faab6;
    font-size: 13px;
}

.scmc-catalog-list {
    display: grid;
    gap: 6px;
}

.scmc-catalog-row {
    --scmc-indent: 0px;
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 8px 7px calc(8px + var(--scmc-indent));
    border: 1px solid rgba(120,140,155,.12);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(12,16,21,.38);
    color: #dce8f2;
    overflow: hidden;
}

.scmc-catalog-row:hover {
    border-color: rgba(128,178,210,.30);
    background: rgba(18,24,31,.66);
}

.scmc-catalog-row[data-status="green"] {
    border-left-color: #63d99a;
}

.scmc-catalog-row[data-status="yellow"] {
    border-left-color: #e6c65a;
}

.scmc-catalog-row[data-status="red"] {
    border-left-color: #ff5964;
}

.scmc-catalog-row[data-status="blue"] {
    border-left-color: #5f9dff;
}

.scmc-catalog-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid rgba(120,140,155,.18);
    border-radius: 7px;
    background: rgba(8,11,16,.42);
    color: #8d9aa8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.scmc-catalog-index:hover {
    color: #dce8f2;
    border-color: rgba(128,178,210,.42);
    background: rgba(28,35,44,.82);
}

.scmc-catalog-main {
    min-width: 0;
}

.scmc-catalog-title {
    min-width: 0;
    font-weight: 800;
    line-height: 1.25;
}

.scmc-catalog-title a {
    color: #dce8f2 !important;
    text-decoration: none !important;
}

.scmc-catalog-title a:hover {
    color: #8fc7ef !important;
}

.scmc-catalog-page {
    margin-left: 6px;
    color: #7f8d9b;
    font-size: 12px;
    font-weight: 500;
}

.scmc-catalog-note {
    margin-top: 4px;
    padding: 5px 8px;
    border-left: 3px solid rgba(128,178,210,.38);
    border-radius: 6px;
    background: rgba(24,31,39,.45);
    color: #aebdca;
    font-size: 12px;
    line-height: 1.38;
}

.scmc-catalog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.scmc-catalog-btn,
.scmc-catalog-status,
.scmc-catalog-section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    box-sizing: border-box;
    border: 1px solid rgba(120,140,155,.20);
    border-radius: 7px;
    background: rgba(18,23,29,.58);
    color: #dce8f2;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.scmc-catalog-btn:hover,
.scmc-catalog-status:hover,
.scmc-catalog-section-btn:hover {
    border-color: rgba(128,178,210,.48);
    background: rgba(28,36,45,.88);
}

.scmc-catalog-note-btn {
    width: 30px;
    padding: 0;
}

.scmc-catalog-section-btn {
    max-width: 170px;
    padding: 0 9px;
    color: #9faab6;
}

.scmc-catalog-status {
    width: 30px;
    padding: 0;
    font-size: 14px;
}

.scmc-scan-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 999px;
}

.scmc-scan-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8d9aa8;
    transition: transform .16s ease, background .16s ease;
}

.scmc-scan-toggle[data-active="true"] {
    border-color: rgba(220,160,70,.48);
    background: rgba(90,62,20,.28);
}

.scmc-scan-toggle[data-active="true"]::before {
    transform: translateX(18px);
    background: #ffd48a;
}

.scmc-catalog-row[data-scan="stop"] .scmc-catalog-note {
    border-left-color: rgba(220,160,70,.58);
}

.scmc-level-1 {
    --scmc-indent: 0px;
    margin-top: 7px;
    background: rgba(18,23,29,.62);
    border-color: rgba(120,140,155,.18);
}

.scmc-level-1 .scmc-catalog-title {
    font-size: 15px;
}

.scmc-level-2 {
    --scmc-indent: 22px;
    box-shadow: inset 14px 0 0 rgba(128,178,210,.035);
}

.scmc-level-3 {
    --scmc-indent: 44px;
    box-shadow:
        inset 14px 0 0 rgba(128,178,210,.035),
        inset 36px 0 0 rgba(128,178,210,.03);
}

.scmc-level-4 {
    --scmc-indent: 66px;
    box-shadow:
        inset 14px 0 0 rgba(128,178,210,.035),
        inset 36px 0 0 rgba(128,178,210,.03),
        inset 58px 0 0 rgba(128,178,210,.025);
}

.scmc-level-5 {
    --scmc-indent: 88px;
    box-shadow:
        inset 14px 0 0 rgba(128,178,210,.035),
        inset 36px 0 0 rgba(128,178,210,.03),
        inset 58px 0 0 rgba(128,178,210,.025),
        inset 80px 0 0 rgba(128,178,210,.02);
}

.scmc-catalog-hidden {
    display: none !important;
}

.scmc-status-menu,
.scmc-section-menu {
    position: fixed;
    z-index: 2147483647;
    display: grid;
    gap: 4px;
    min-width: 190px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 40px));
    overflow: auto;
    padding: 6px;
    border: 1px solid rgba(128,178,210,.55);
    border-radius: 8px;
    background: rgba(22,25,31,.97);
    box-shadow: 0 0 26px rgba(0,0,0,.55);
}

.scmc-status-menu button,
.scmc-section-menu button {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #e3e8ee;
    text-align: left;
    cursor: pointer;
    font-weight: 650;
}

.scmc-status-menu button:hover,
.scmc-section-menu button:hover {
    background: rgba(80,145,190,.18);
}

.scmc-status-saving {
    opacity: .55;
    pointer-events: none;
}

@media screen and (max-width: 760px) {
    .scmc-catalog-row {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 7px;
        padding-left: calc(7px + var(--scmc-indent));
    }

    .scmc-catalog-actions {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .scmc-catalog-section-btn {
        max-width: 100%;
    }

    .scmc-level-2 {
        --scmc-indent: 12px;
        box-shadow: inset 8px 0 0 rgba(128,178,210,.035);
    }

    .scmc-level-3 {
        --scmc-indent: 24px;
        box-shadow:
            inset 8px 0 0 rgba(128,178,210,.035),
            inset 20px 0 0 rgba(128,178,210,.03);
    }

    .scmc-level-4 {
        --scmc-indent: 36px;
        box-shadow:
            inset 8px 0 0 rgba(128,178,210,.035),
            inset 20px 0 0 rgba(128,178,210,.03),
            inset 32px 0 0 rgba(128,178,210,.025);
    }

    .scmc-level-5 {
        --scmc-indent: 48px;
        box-shadow:
            inset 8px 0 0 rgba(128,178,210,.035),
            inset 20px 0 0 rgba(128,178,210,.03),
            inset 32px 0 0 rgba(128,178,210,.025),
            inset 44px 0 0 rgba(128,178,210,.02);
    }
}