cloudcmd/css/query.css

@media only screen and (max-height: 900px) and (max-width: 600px) {
    .fm {
        height: 85%;
    }
    
    .files {
        height: 90%;
    }
}

@media only screen and (min-height: 550px) and (max-width: 600px) {
    .fm {
        height: 80%;
    }
    
    .files {
        height: 90%;
    }
}

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

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

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

@media only screen and (max-height: 550px) and (max-width: 550px) {
    .fm {
        height: 55%;
    }
}

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

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

@media only screen and (max-height: 700px) and (min-width: 600px) {
    .fm {
        height: 85%;
    }
    
    .files {
        height: 90%;
    }
}

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

@media only screen and (max-height: 640px) and (max-width: 360px) {
    .fm {
        height: 75%;
    }
    
    .files {
        height: 90%;
    }
}

@media only screen and (max-height: 360px) and (max-width: 640px) {
    .fm {
        height: 55%;
    }
    
    .files {
        height: 60%;
    }
}

@media only screen and (max-width: 600px) {
    .panel {
        font-size: 26px;
    }
    
    /* текущий файл под курсором */
    .current-file {
        background-color: rgba(49, 123, 249, .40);
        color: white;
    }
    /* делаем иконки под курсом белыми */
    .current-file a {
        color: white;
    }
    .current-file .text-file::before {
        color: white;
    }
    
    /* меняем иконки на шрифтовые */
    .mini-icon {
        color           : rgba(246, 224, 124, 0.56);
        font            : 16px 'Fontello';
        background-image: none;
        padding         : 1%;
    }
    
    .size, .date, .owner, .mode {
        display: none;
    }
    
    .name {
        width: 90%;
        display: inline-block;
    }
    
    .directory::before {
        content: '\e807';
    }
    
    .text-file::before {
        color: rgba(26, 224, 124, 0.56);
        content: '\e80d';
    }
    
    .text-file {
        background-image: none;
    }
    
    /* убираем заголовок */
    .fm-header {
        display: none;
    }
    
    /* выводим заголовки рядом с полями */
    .cmd-button {
        width: 20%;
    }
}

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

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

@media only screen and (max-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;
    }
}