cloudcmd/css/query.css

@media only screen and (width >= 1600px) {
    .name {
        width: 40%;
    }

    .size {
        width: 10%;
    }

    .date {
        width: 15%;
    }

    .owner {
        width: 12%;
    }

    .mode {
        width: 15%;
    }
}

@media only screen and (height <= 900px) and (width <= 600px) {
    .fm {
        height: 85%;
    }

    .files {
        height: 90%;
    }
}

@media only screen and (height >= 550px) and (width <= 600px) {
    .fm {
        height: 80%;
    }

    .files {
        height: 90%;
    }
}

@media only screen and (height <= 750px) and (width <= 600px) {
    .fm {
        height: 75%;
    }
}

@media only screen and (height <= 450px) and (width <= 600px) {
    .fm {
        height: 75%;
    }
}

@media only screen and (height <= 550px) and (width <= 600px) {
    .fm {
        height: 65%;
    }
}

@media only screen and (height <= 550px) and (width <= 550px) {
    .fm {
        height: 70%;
    }
}

@media only screen and (height >= 850px) and (width >= 650px) {
    .fm {
        height: 95%;
    }
}

@media only screen and (height <= 850px) {
    .files {
        height: 90%;
    }
}

@media only screen and (height <= 700px) and (width >= 600px) {
    .fm {
        height: 85%;
    }

    .files {
        height: 90%;
    }
}

@media only screen and (height <= 450px) {
    .fm {
        height: 65%;
    }
}

@media only screen and (height <= 640px) and (width <= 360px) {
    .fm {
        height: 75%;
    }

    .files {
        height: 90%;
    }
}

/* iphone 6 landscape */
@media only screen and (device-width >= 375px) and (device-width <= 667px) and (orientation: landscape),
    only screen and (height <= 360px) and (width <= 640px) {
    .fm {
        height: 55%;
    }

    .files {
        height: 60%;
    }
}

@media only screen and (width <= 600px) {
    .panel {
        font-size: 26px;
    }

    /* текущий файл под курсором */
    .current-file {
        background-color: var(--color-transparent);
        color: white;
    }
    /* делаем иконки под курсом белыми */
    .current-file a {
        color: white;
    }

    .file::before,
    .file-link::before {
        color: rgb(26 224 124 / 56%);
        content: '\e80d';
    }

    .current-file .file::before,
    .file-link::before {
        color: white;
    }

    /* меняем иконки на шрифтовые */
    .mini-icon {
        color: rgb(246 224 124 / 56%);
        font: 16px 'Fontello';
        background-image: none;
        padding: 1%;
    }

    .size,
    .date,
    .owner,
    .mode {
        display: none;
    }

    .name {
        width: 90%;
        display: inline-block;
    }

    .directory::before,
    .directory-link::before {
        content: '\e807';
    }

    .file,
    .file-link {
        background-image: none;
    }

    .archive,
    .archive-link {
        background-image: none;
    }

    .archive::before,
    .archive-link {
        color: rgb(26 224 124 / 56%);
        content: '\e81d';
    }

    /* убираем заголовок */
    .fm-header {
        display: none;
    }

    /* выводим заголовки рядом с полями */
    .cmd-button {
        width: 20%;
    }
}

@media only screen and (width >= 601px) and (width <= 785px) {
    .cmd-button {
        width: 13%;
    }
}

@media only screen and (width >= 786px) and (width <= 1155px) {
    .cmd-button {
        width: 10%;
    }
}

@media only screen and (width <= 1155px) {
    .panel {
        width: 98%;
    }
    /* если правая панель не помещаеться - прячем её */
    .panel-right,
    .cmd-button#f5,
    .cmd-button#f6 {
        display: none;
    }
}

@media print {
    .panel {
        width: 94%;
        margin: 0;
        padding: 0;
        border: none;
    }

    .keyspanel,
    .panel-right {
        display: none;
    }

    .files {
        overflow-y: visible;
    }

    .current-file {
        box-shadow: 0 0;
    }

    .path-icon {
        display: none;
    }

    .mini-icon {
        display: none;
    }
}