src/components/shared/_responsive.scss - master - Astartes1337/cal

src/components/shared/_responsive.scss
475 строк11 KB
sh4rkman
weapon selector height adjustments
03 дек 2025, 20:33
03 дек 2025, 20:330f56a05
/***************************************************
 ************   HEIGHT ADJUSTMENTS   ***************
 ***************************************************/

 @use '../shared/variables';

/* -- L*568px -- */

@media (height >= 35em) {
    header {
        #mapSelector {
            .select2-results__options {
                max-height: 470px;
            }
        }
        .weaponSelector #weaponSelector {
            .select2-results__options {
                max-height: 400px;
            }
        }
    }
}


/* -- L*730px -- */

@media (height >= 45em) {
    header {
        .mapSelector #mapSelector, .weaponSelector #layerSelector {
            .select2-results__options {
                line-height: 0.85em;
                max-height: 770px;
            }
        }
        .weaponSelector #weaponSelector {
            .select2-results__options {
                max-height: 500px;
            }
        }
    }
}


/* -- L*800px -- */

@media (height >= 50em) {
    header {
        #mapSelector {
            .select2-results__options {
                max-height: 850px;
            }
        }
    }
}


/***************************************************
   ************   WIDTH ADJUSTMENTS  ***************
   ***************************************************/

@media screen and (width <= 48em) {
    .unit-logo {
        display: none;
    }
    .respawnText, .delayText, .ticketText {
        display: none;
    }
    .countryFlags {
        .img-flag {
            width: 40px;
        }
    }
    #factionsDialog #factionVehicles .vehicle-card .image .tags {
        height: 3em!important;
        .tag {
            width: 3em!important;
            .passenger {
                font-size: 11px!important;
                margin-left: 10px!important;;
            }
        }
    }
    #commanderAssets .commanderAssets img {
        height: 35px;
    }
    #factionsDialog {
        #factionVehicles {
            .card-content {
                .vehicle-icon {
                    width: 22px;
                    height: 22px;
                }
            }
        }
        .select2-container {
            min-width: 100px;
            max-width: 175px;
            padding-bottom: 0.1em;
            .select2-selection--single {
                height: 24px;
            }
            .unit-option .unit-type {
                font-size: 1.5em;
            }
             .unit-option .unit-name {
                font-size: 1.4em;
            }
        }
        .btn-pin {
            max-width: 100px;
            font-size: 0.8em;
        }
        #factionMenu {
            font-size: 0.8em;
            #team1, #team2 {
                .selectors {
                    flex-direction: column;
                    font-size: 0.9em;
                    .unitSelector {
                        min-width: 100px;
                        padding-top: 5px;
                    }
                }
            }
        }
    }

    /* -- H < 568px -- */
    @media (height >= 35em) {
        #classic_ui {
            input {
                height: 40px;
            }
            #saved {
                font-size: 0.65em;
            }
            .results {
                margin: 1.5em auto;
            }
        }


    }
    /* -- H < 800px -- */
    @media (height >= 50em) {
        #classic_ui {
            padding-top: 1em;
            .results {
                font-size: 1.7em;
                margin: 2em auto;
            }
            #saved {
                font-size: 0.8em;
            }
        }
    }
}

/* -- WIDTH < 568px -- */
@media screen and (width <= 35em) {
    #factionsDialog #factionVehicles {
        .card-content {
            padding: 0.3em;
            .vehicle-icon {
                width: 22px;
                height: 22px;
                margin-right: 0.5em;
            }
            .vehicle-info {
                font-size: 0.8em;
            }
        }
        .vehicle-info {
            font-size: 0.8em;
        }
        #team1Vehicles {
            .card-content {
                .vehicle-icon {
                    margin-left: 0.5em;
                }
            }
        }
        
    }
}

/* -- WIDTH < 512px -- */
@media screen and (width <= 32em) {
    #factionsDialog #factionVehicles {
        .card-content {
            padding: 0.3em;
            .vehicle-icon {
                width: 15px;
                height: 15px;
                margin-right: 0.2em;
                .vehicle-count {
                    font-size: 1em;
                }
            }
            .vehicle-info {
                font-size: 0.6em;
            }
        }
        #team1Vehicles {
            .card-content {
                .vehicle-icon {
                    margin-left: 0.2em;
                    margin-right: 0;
                }
            }
        }
    }
} 

/* ≥ 768px */

@media screen and (width >= 48em) {
    /* On big screen, fix map&weapon Selectors on top corners */
    header {
        .weaponSelector {
            // fix to top left corner
            left: 1em;
            position: fixed;
            width: auto;
            .select2-container {
                float: left;
                font-size: 1em;
            }
            #ammoSelector {
                padding-top: 3em;
            }
        }
        .mapSelector {
            // fix to top right corner
            position: fixed;
            right: 1em;
            top: 0;
            margin-top: 0;
            width: auto;
            .select2-container {
                float: right;
                font-size: 1em;
                padding-bottom: 0.3em;
            }
            #layerSelector {
                padding-top: 3em;
            }
        }
    }
    #loader, #background {
        span {
            span {
                display: inline-block;
            }
            span:nth-child(3) {
                width: auto;
            }
        }
    }
    #classic_ui {
        padding-top: 3em;
        .coord {
            img {
                height: 45px;
            }
        }
    }
    #factionsDialog #factionVehicles .vehicle-card.selected .image a {
        font-size: 1em;
    }

    @media (height >= 40em) {
        #mapLayerMenu{
            right: 2%;
            .btn {
                font-size: 1.4em;
                width: 44px;
                height: 44px;
                &.btn-servers {
                    margin-top: 1em;
                }
            }
            #sessionActions {
                width: 44px;
            }
            .mapLayerMenuSeparator {
                margin-top: 20px;
            }
        }
    }
    footer {
        #footerButtons {
            padding: 1em 1em 1em 2em;
            gap: 1em;
            max-width: 5em;
            .fabs {
                height: 3.5rem;
                width: 3.5rem;
                .fab {
                    height: 3.5rem;
                    width: 3.5rem;
                    svg {
                        height: 1.3em;
                        width: 1.3em;
                    }
                }
            }

        }
    }

    /* -- L*560px -- */
    @media (height >= 35em) {
        #classic_ui {
            font-size: 25px;
            padding-top: 5em;
            input {
                height: 60px;
            }
        }
    }
    /* -- L*730px -- */
    @media (height >= 45em) {
        #classic_ui {
            padding-top: 5em;
            input {
                height: 70px;
            }
        }
    }
    /* -- L*800px -- */
    @media (height >= 50em) {
        #classic_ui {
            font-size: 30px;
        }
    }
}


/* ≥ 992px */

@media screen and (width >= 62em) {
    header {
        .select2-container {
            font-size: 1em;
            min-width: 205px;
        }
    }
    dialog {
        font-size: 0.7em;
        table {
            width: 44%;
            margin: 0 3% 2em;
        }
        &#weaponInformation {
            max-width: 600px;
        }
        &#helpDialog {
            font-size: 0.7em;
            height: 585px;
            width: 600px;
            table {
               width: 90%;
            }
        }
    }
}


/* ≥ 1200px */

@media screen and (width >= 62em) {
    header {
        .select2-container {
            max-width: 230px;
        }
    }
}


/* ≥ 1400px */

@media screen and (width >= 87.5em) {
    header {
        .select2-results__options {
            font-size: 1em;
        }
    }
}


/* ≥ 1920px */

@media screen and (width >= 124em) {
    /* ≥ 1920px & 1080 */
    @media (height >= 68em) {
        header {
            .weaponSelector {
                padding: 2em 0 0 1.5em;
                #ammoSelector {
                    padding-top: 5em;
                }
            }
            .mapSelector {
                padding: 2em 1.5em 0 0;
                #layerSelector {
                    padding-top: 5em;
                }
            }
            #weaponSelector,
            #mapSelector,
            #ammoSelector,
            #layerSelector {
                .select2-container {
                    min-width: 350px;
                    padding-bottom: 1em;
                    font-size: 1.4em;
                }
                .select2-results__options {
                    font-size: 1.2em;
                    line-height: 1.3em;
                    max-height: 1100px;
                }
                .select2-selection__placeholder {
                    font-size: 1.1em;
                }
                .select2-selection__rendered {
                    font-size: 1.2em;
                }
            }
        }
        #classic_ui {
            padding-top: 7em;
            input {
                font-size: 1.7em;
                height: 100px;
            }
            #results {
                font-size: 1.5em;
            }
            #saved {
                font-size: 1em;
            }
            .coord img {
                height: 75px;
            }
        }
        .tippy-box {
            font-size: 200%;
        }
    }
}

/* Fix for mobile devices - prevent hover states from sticking on specific elements */
@media (hover: none) {
    // Settings controls buttons
    #settingsControls button:not(.active):hover {
        background-color: inherit !important;
    }
    // Map layer menu buttons
    #mapLayerMenu .btn:not(.active):hover {
        background-color: white !important;
        svg {
            transform: none !important;
        }
    }
    // Footer buttons
    footer button:hover {
        background-color: inherit !important;
    }
    // Dialog close buttons
    .closeModal:hover {
        background-color: inherit !important;
    }
}