@media only screen and (width >= 1600px) {

.name {

width: 40%;

}

.size {

width: 10%;

}

.date {

width: 15%;

}

.owner {

width: 12%;

}

.mode {

width: 15%;

}

}

:root {

--min-one-panel-width: 1155px;

--is-mobile: 0;

}

@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 (width <= 600px) {

:root {

--is-mobile: 1;

}

}

@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%;

}

}

@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(--border-color);

color: white;

}

/* делаем иконки под курсом белыми */

.current-file a {

color: white;

}

.file::before {

color: rgb(26 224 124 / 56%);

content: '\e80d';

}

.file-link::before {

color: rgb(26 224 124 / 56%);

content: '\e81d';

}

/* меняем иконки на шрифтовые */

.mini-icon {

color: rgb(246 224 124 / 56%);

font: 16px 'Fontello';

background-image: none;

padding: 1%;

}

.size,

.date,

.owner,

.time,

.mode {

display: none !important;

}

.name {

width: 90%;

display: inline-block;

}

.directory::before {

content: '\e807';

}

.directory-link::before {

content: '\e81e';

}

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

}

}