src/components/map/mapFactionCtxMenu.scss - master - Astartes1337/cal

src/components/map/mapFactionCtxMenu.scss
378 строк8 KB
sh4rkman
#407
30 ноя 2025, 14:48
30 ноя 2025, 14:480d960b0
@use "../shared/variables";

#mapCtxButtonsContainer {
    display: flex;
    width: 100%;
    gap: 5px;
    min-width: 100px;
    margin-top: 5px;
    font-weight: bold;
    #mapPinButton,
    #backToFactionsBtn {
        background: #222;
        color: white;
        padding: 8px 12px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        font-size: 0.8em;
        font-weight: bold;
        &:hover {
            background: #111;
        }
        &.active {
            background-color: variables.$mainColor;
            color: white;
        }
    }
    #mapPinButton {
        flex: 9;
    }
    #backToFactionsBtn {
        flex: 1;
        svg {
            width: 1.2em;
            height: 1.2em;
            path {
                fill: white;
            }
        }
    }
}


.faction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 5px;
    max-width: 280px;
    justify-items: center;
    &:has(> :only-child) {
        grid-template-columns: 1fr;
    }
    &:has(.faction-item:nth-child(4)) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.faction-label {
    @include variables.text-outline;
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    pointer-events: none;
}

.faction-item {
    position: relative;
    background: #111;
    outline: 1px solid #ddd;
    border-radius: 2px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.1s ease;
    aspect-ratio: 2 / 1;
    line-break: loose;
    &.units {
        max-width: 400px;
        height: 65px;
        width: 70px;
        &:active {
            transform: scale(0.95);
            outline-color: green;
            transition: transform 0.1s ease;
        }
    }
    &._selected {
        outline: green 3px solid;
        &::after {
            background: rgba(255, 255, 255, 0);
        }
    }
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 3px solid rgba(0, 0, 0, 0.30);
        pointer-events: none;
    }
}

.faction-item.units img {
    position: absolute;
    top: 5px;
    width: 50%;
    height: auto;
    object-fit: contain;
}

.faction-item.units .faction-label {
    position: absolute;
    font-size: 10px;
    line-height: 1.1em;
    letter-spacing: normal;
    padding: 0 2px;
    top: 40px;
    white-space: wrap;
    // overflow: hidden;
    text-overflow: "..";
}

.faction-item:hover {
    outline-color: #007acc;
    cursor: pointer;
    outline-width: 3px;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    &._selected {
        outline-color: green;
    }
}

.faction-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.spawnVehicleCard {
    width: 250px;
    letter-spacing: 0.7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    backdrop-filter: blur(6px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-weight: bold;
    .respawn-icon, .ticket-icon, .delay-icon, .location-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.7em;
        svg {
            width: 100%;
            height: 100%;
            fill: #aaa;
        }
    }
    > div {
        font-size: 1em;
        color: #f0f0f0;
        display: flex;
        align-items: center;

    }
    .vehTitle {
        display: flex;
        align-items: center;
        justify-content: space-between; 
        width: 100%;
        padding: 0;
        .vehName {
            padding: 10px 10px 0;
            font-size: 1.4em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .vehFlag {
            margin: 6px 8px 0 0;
            width: 50px;
            height: auto;
            border-radius: 3px;
            flex-shrink: 0;
        }
    }
    .locationHolder {
        color: #0fa10f;
        .location-icon {
            svg {
                fill: #0fa10f; 
            }
            &.warning {
                svg {
                    fill: #f55;
                }
            }
        }
        &.warning {
            color: #f55;
            svg {
                fill: #f55;
            }
        }
    }
    .statsHolder {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6em 1em;
        padding: 1em 2em 0;
        margin-top: 0.5em;
        place-items: center;
        border-top: 1px solid rgba(128, 128, 128, 0.616);
    }
    .respawnHolder,
    .delayHolder,
    .ticketHolder,
    .locationHolder {
        display: flex;
        align-items: center;
        gap: 0.5em;
        width: 100%;
        justify-content: center;
        &.warning {
            color: #f55;
            svg {
                fill: #f55;
            }
        }
    }
    .ticket {
        display: inline-flex;
        align-items: center;
    }
    .delayHolder {
        color: #f55;
        svg {
            fill:#f55;
        }
    }
    img {
        margin-top: 1em;
        width: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    .tags {
        height: 3em;
        position: absolute;
        bottom: 0.5em;
        left: 0.7em;
        display: flex;
        gap: 0.5em;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        .tag {
            border-radius: 6px;
            background: rgba(26, 25, 25, 0.8);
            width: 3em;
            height: 3em;
            display: flex;
            justify-content: center;
            align-items: center;
            .passengers {
                position: absolute;
                font-size: 14px;
                letter-spacing: 0;
                margin-left: 13px;
            }
            img {
                margin-top: 0;
                bottom: 0;
            }
        }
    }
}


.spawnGroupCard {
    width: 200px;
    letter-spacing: 0.7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(6px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-weight: bold;
    .spawn-delay-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.7em;
        svg {
            width: 85%;
            height: 85%;
        }
    }
    > div {
        font-size: 1em;
        color: #f0f0f0;
        display: flex;
        align-items: center;

    }
    .spawnTitle {
        width: 100%;
        border-bottom: 1px solid rgba(128, 128, 128, 0.616);
        .spawnName {
            padding: 0.5em 0;
            font-size: 0.85em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin:auto;
            text-align: center;
        }
    }
    .statsHolder {
        display: block;
        place-items: center;
        font-size: 0.8em;
    }
    .spawnDelayHolder {
        padding: 0.7em 0;
        display: flex;
        align-items: center;
        gap: 0.5em;
        width: 100%;
        justify-content: center;
        color: #f55;
        svg {
            fill:#f55;
        }
        &.warning {
            color: #f55;
            svg {
                fill: #f55;
            }
        }
    }
    .rightClicToRemove {
        padding: 0.7em 0;
        font-size: 0.9em;
        font-style: italic;
    }
    img {
        width: 100%;
        object-fit: cover;
        border-radius: 0;
    }
}


.vehSpawnIcon {
    cursor: pointer!important;
}

.vehSpawnerTxt {
    z-index: 100!important;
}