MediaWiki:ScmcCatalog.css: различия между версиями

Текущая версия от 16:23, 15 июня 2026

.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);
    }
}

.scmc-catalog-row {
    grid-template-columns: 38px 30px minmax(0, 1fr) auto;
}

.scmc-catalog-index,
.scmc-catalog-expand {
    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-expand {
    padding: 0;
    font-size: 18px;
    transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}

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

.scmc-catalog-row.is-open .scmc-catalog-expand {
    transform: rotate(90deg);
}

.scmc-catalog-actions {
    display: none;
}

.scmc-catalog-row.is-open .scmc-catalog-actions {
    display: flex;
}

.scmc-catalog-level-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: #9faab6;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: 0 9px;
}

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

.scmc-level-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-level-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-level-menu button:hover {
    background: rgba(80,145,190,.18);
}

@media screen and (max-width: 760px) {
    .scmc-catalog-row {
        grid-template-columns: 34px 30px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .scmc-catalog-actions {
        grid-column: 3;
        grid-row: 2;
    }
}

.scmc-catalog-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
}

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

.scmc-catalog-actions {
    display: flex;
}

@media screen and (max-width: 760px) {
    .scmc-catalog-row {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

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

.scmc-renata-guide {
    margin-top: 14px;
    border: 1px solid rgba(120,140,155,.18);
    border-radius: 10px;
    background: rgba(10,13,18,.32);
    overflow: hidden;
}

.scmc-renata-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    color: #dce8f2;
    font-weight: 800;
    user-select: none;
}

.scmc-renata-guide-toggle:hover {
    background: rgba(28,36,45,.42);
}

.scmc-renata-guide-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid rgba(120,140,155,.22);
    border-radius: 7px;
    background: rgba(18,23,29,.58);
    color: #8d9aa8;
    font-size: 20px;
    line-height: 1;
    transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}

.scmc-renata-guide-toggle:hover .scmc-renata-guide-arrow,
.scmc-renata-guide[data-open="true"] .scmc-renata-guide-arrow {
    color: #dce8f2;
    border-color: rgba(128,178,210,.48);
    background: rgba(28,36,45,.88);
}

.scmc-renata-guide[data-open="true"] .scmc-renata-guide-arrow {
    transform: rotate(90deg);
}

.scmc-renata-guide-content {
    display: none;
    gap: 12px;
    padding: 0 12px 12px;
}

.scmc-renata-guide[data-open="true"] .scmc-renata-guide-content {
    display: grid;
}

.scmc-guide-section {
    padding: 10px 11px;
    border-left: 3px solid rgba(128,178,210,.38);
    border-radius: 8px;
    background: rgba(24,31,39,.42);
}

.scmc-guide-title {
    margin-bottom: 7px;
    color: #f0f5fa;
    font-weight: 900;
}

.scmc-guide-text {
    color: #c7d2de;
    line-height: 1.45;
}

.scmc-guide-list {
    display: grid;
    gap: 6px;
    color: #c7d2de;
    line-height: 1.42;
}

@media screen and (max-width: 760px) {
    .scmc-renata-guide-content {
        padding: 0 9px 10px;
    }

    .scmc-guide-section {
        padding: 9px;
    }
}

.scmc-dialog-open {
    overflow: hidden;
}

.scmc-dialog-backdrop {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(0,0,0,.62);
}

.scmc-dialog {
    width: min(520px, 100%);
    border: 1px solid rgba(128,178,210,.42);
    border-radius: 12px;
    background: rgba(18,23,29,.98);
    box-shadow: 0 18px 60px rgba(0,0,0,.62);
    color: #dce8f2;
    overflow: hidden;
}

.scmc-dialog[data-type="error"] {
    border-color: rgba(255,89,100,.55);
}

.scmc-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(120,140,155,.16);
    background: rgba(10,13,18,.45);
}

.scmc-dialog-title {
    font-weight: 900;
    color: #f0f5fa;
}

.scmc-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(120,140,155,.20);
    border-radius: 8px;
    background: rgba(18,23,29,.58);
    color: #dce8f2;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.scmc-dialog-close:hover {
    border-color: rgba(128,178,210,.48);
    background: rgba(28,36,45,.88);
}

.scmc-dialog-body {
    display: grid;
    gap: 9px;
    padding: 14px;
}

.scmc-dialog-label,
.scmc-dialog-message {
    color: #c7d2de;
    line-height: 1.45;
    white-space: pre-wrap;
}

.scmc-dialog-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid rgba(120,140,155,.28);
    border-radius: 8px;
    background: rgba(12,16,21,.82);
    color: #e3e8ee;
    font: inherit;
    resize: vertical;
}

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

.scmc-dialog-input.is-error {
    border-color: rgba(255,89,100,.72);
    box-shadow: 0 0 0 2px rgba(255,89,100,.12);
}

.scmc-dialog-error {
    min-height: 18px;
    color: #ff8d94;
    font-size: 13px;
    line-height: 1.35;
}

.scmc-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 14px;
}

.scmc-dialog-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(120,140,155,.22);
    border-radius: 8px;
    background: rgba(18,23,29,.58);
    color: #dce8f2;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

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

.scmc-dialog-btn-primary {
    border-color: rgba(128,178,210,.48);
    background: rgba(55,93,120,.42);
}

.scmc-dialog-btn-primary:hover {
    background: rgba(68,112,145,.58);
}

@media screen and (max-width: 760px) {
    .scmc-dialog-backdrop {
        align-items: flex-start;
        padding: 14px;
    }

    .scmc-dialog-actions {
        flex-direction: column-reverse;
    }

    .scmc-dialog-btn {
        width: 100%;
    }
}