src/assets/css/filesystem.css - master - githubmirror/edex-ui

src/assets/css/filesystem.css
288 строк6 KB
ghost-in-the-machine-86
feat: audio, video and pdf reader (#953)
17 дек 2020, 20:09
17 дек 2020, 20:09a445205
section#filesystem {
    position: relative;
    top: -0.925vh;
    width: 43vw;
    height: 30vh;
    margin-right: 0.5vw;

    opacity: 0;
    transition: opacity .5s cubic-bezier(0.4, 0, 1, 1);
}

section#filesystem > h3.title {
    width: 43vw;
    padding-right: 0;
}

section#filesystem.hideDotfiles > h3.title > p#fs_disp_title_dir::before {
    content: "dotfiles hidden - ";
}

h2#fs_disp_error {
    font-weight: bold;
    text-align: center;
    padding-top: 12vh;
}

div#fs_disp_container {
    position: relative;
    left: .35vw;
    top: 1.5vh;
    height: 25.5vh;
    width: 43vw;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5vh, 1fr));
    grid-auto-rows: 8.5vh;
    grid-gap: 1vh;
    box-sizing: border-box;
}

div#fs_disp_container > * {
    overflow: hidden;
    width: 8.5vh;
    height: 8.5vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s linear;
}

div#fs_disp_container > *.animationWait {
    opacity: 0 !important;
}

div#fs_disp_container > *:active {
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-duration: .1s;
}

@keyframes blink {
    0% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
    50% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);}
    100% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
}

div#fs_disp_container > *.hidden {
    opacity: 0.7;
}

section#filesystem.hideDotfiles > div#fs_disp_container > *.hidden {
    display: none;
}

div#fs_disp_container > * > svg {
    width: 5vh;
}

/* Add padding around non-edex icons */
div#fs_disp_container > * > svg:not([viewBox="0 0 24 24"]) {
    padding: 0.5vh;
    box-sizing: border-box;
}

div#fs_disp_container > * > h3 {
    font-size: 1.3vh;
    max-width: 100%;
    max-height: 30%;
    margin: 0px;
    padding-top: .5vh;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

section#filesystem:not(.list-view) > div#fs_disp_container > div > h4 {
    display: none;
}

div#fs_disp_container.disks > div > h4 {
	  display: none;
}

section#filesystem.list-view > div#fs_disp_container {
    grid-template-columns: 1fr;
    grid-auto-rows: 2vh;
    grid-gap: 0.5vh;
    padding-right: 0.5vh;
}

section#filesystem.list-view > div#fs_disp_container:not(.disks) > * {
    width: auto;
    height: 2vh;
    flex-direction: row;
    justify-content: flex-start;
}

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > svg {
    height: 2vh;
    margin: 0;
    width: auto;
    margin-right: 2%;
}

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h3 {
    max-height: unset;
    padding-top: .2vh;
    text-align: left;
    width: 32%;
}

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4 {
    font-size: 1.3vh;
    font-weight: normal;
    padding-top: .2vh;
    text-align: right;
    overflow: hidden;
}

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(1) { width: 15%; }

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(2) { width: 10%; }

section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(3) { width: 38%; }

div#fs_disp_container.disks {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 0.4vh double rgba(var(--color_r), var(--color_g), var(--color_b), 0.8);
    flex-wrap: wrap;
}
div#fs_disp_container.disks > * {
    width: auto;
    max-width: 8vw;
}

section#filesystem:not(.list-view) div.fs_disp_showDisks > svg, section#filesystem:not(.list-view) div.fs_disp_up > svg {
    width: 4vh !important;
    margin-bottom: 0.5vh;
    margin-top: 0.5vh;
}

div.fs_disp_file > h3 {
    font-weight: normal;
}
div.fs_disp_symlink > h3 {
    font-weight: normal;
    text-decoration: underline;
}
div.fs_disp_other > h3 {
    font-style: italic;
}

div#fs_space_bar {
    position: relative;
    top: 1.5vh;
    left: .15vw;
}

div#fs_space_bar > h1 {
    display: none;

    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.1);
    height: 3.2vh;
    width: 100%;
    position: relative;
    bottom: .7vh;
    left: .3vh;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
    border-radius: 2px;
    font-family: var(--font_main);
    font-weight: bold;
    font-size: 1.5vh;
    cursor: pointer;
}

div#fs_disp_container.disks+div#fs_space_bar > h1 {
    display: flex;
}
div#fs_disp_container.disks+div#fs_space_bar > *:not(h1) {
    display: none;
}

div#fs_space_bar > h3 {
    width: 30%;
    margin: 0;
    display: inline-block;
    font-size: 1.4vh;
    font-weight: normal;
    white-space: nowrap;
    position: relative;
    bottom: .4vh;
}

div#fs_space_bar > progress {
    width: 70%;
    height: 2.2vh;
    padding-top: .5vh;
    -webkit-appearance: none;
}

div#fs_space_bar > progress::after {
    content: "";
    position: absolute;
    right: -.1vh;
    top: .45vh;
    width: .1vh;
    height: 1.7vh;
    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.8);
}

div#fs_space_bar > progress:not([value])::after {
    animation: space_bar_working 1.7s ease-in-out alternate infinite;
    background: rgba(var(--color_r), var(--color_g), var(--color_b), 1);
}

@keyframes space_bar_working {
    0% { right: 0%; }
    100% { right: 70%; }
}

div#fs_space_bar > progress::-webkit-progress-bar {
    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.4);
    height: .7vh;
    position: relative;
    top: .7vh;
}

div#fs_space_bar > progress::-webkit-progress-value {
    background: rgb(var(--color_r), var(--color_g), var(--color_b));
    height: .7vh;
    position: relative;
    bottom: .7vh;
    transition: width .5s cubic-bezier(0.4, 0, 1, 1);
}

.pdf_container {
    text-align: center;
    background: var(--color_light_black);
    color: rgb(var(--color_r), var(--color_g), var(--color_b));
    border: 0.15vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
    padding: 0.4vh 0.2vh;
    font-size: 1.4vh;
    resize: none;
    overflow: auto;
    width: 50vw;
    height: 50vh;
}

.pdf_options button {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.pdf_options span {
    margin-left: 1.5vh;
    font-size: 24px;
}