Maingron/MainOS

body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    &.big_buttons {
        #headbar2 {
            height: 2.4rem;
        }
    
        #content_files {
            a {
                width: 72px;
            }
        }
    }
}

* {
}

#headbar2 {
    display: flex;
    position: relative;
    top: 0;
    justify-content: space-between;
    background-color: #ddb;
    height: 1.8em;
    width: 100%;
    border-bottom: 1px solid #999;
    overflow: visible;
    font-size: 1em;

    form { // Yet only supposed for path input
        display: flex;
        height: 100%;
        position: relative;

        input, button {
            box-sizing: border-box;
        }

        input[type=text] {
            width:100%;
            height: 100%;
            border-right: 0;
            padding: 0 10px;
        }

        button {
            width: auto;
            height: 100%;
            border-left: 0;
            padding: 0;

            img {
                width: auto;
                height: 100%;
            }
        }
    }

    img, a {
        display: inline-block;
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    a {
        padding: 2px;
    }
}

#content_files {
    padding: 15px;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    align-content: start;
    flex-wrap: wrap;

    a {
        background-color: transparent;
        border: 0;
        margin: 4px;
        overflow: hidden;
        width: 64px;
        height: auto;
        max-height: 100px;
        z-index: 10;
        top: 0;
        left: 0;
        float: left;
        text-align: center;
        align-content: start;
        user-select: none;
        word-break: break-word;
        display: inline-block;
        position: relative;
        font-size: .85em;
        text-decoration: none;
        border-radius: var(--border-radius) !important;

        &:hover,
        &:focus-visible {
            overflow: visible;
            z-index: 20;
        }

        &.fattr-hidden {
            opacity: .7;
        }

        &.fattr-system_file {

        }

        &.fattr-outdated_file {
            
        }


        .color_dot_div {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50px;
            line-height: 0;
            width: 80%;
            user-select: none;
            pointer-events: none;
            .color_dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                border: 1px solid #77777799;
                background-color: #777777aa;
                margin: 1px;
                padding: 0;
                display: inline-block;
                position: relative;
                background-repeat: no-repeat;
                top: 0;
                right: 0;
                // filter: drop-shadow(-1px -1px 0 #777777aa) drop-shadow(1px -1px 0 #777777aa) drop-shadow(-1px 1px 0 #777777aa) drop-shadow(1px 1px 0 #777777aa);
                &_A {
                    background-color: red;
                }
                &_B {
                    background-color: orange;
                }
                &_C {
                    background-color: yellow;
                }
                &_D {
                    background-color: green;
                }
                &_E {
                    background-color: blue;
                }
                &_F {
                    background-color: purple;
                }
                &_0 {
                    // system file
                    background-image: url("../../../logo.png");
                    background-size: 100%;
                    border-radius: 25%;
                }
                &_outdated {
                    // files to be removed by dev
                    background-color: #ff0000aa;
                    border-radius: 25%;
                    width: 5px;
                    &::after {
                        content: "!";
                        line-height: .8;
                        display: table-cell;
                    }
                }
            }
        }

        img {
            position: relative;
            display: block;
            top: 0;
            margin-top: 2px;
            height: 64px;
            max-height: 150px;
            pointer-events: none;
            width: 100%;
            overflow: hidden;
            object-fit: contain;
            pointer-events: none;
            margin: 0;
        }
    }
}


#bottom_info {
    position: relative;
    width: 100%;
    background: #77777744;
    height: auto;
    max-height: 40vh;
    overflow: hidden;
    position: relative;
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--themecolor);
    display: block;

    meter {
        width: 290px;
        max-width: 100%;
    }

    div.icon {
        display: inline-block;
        float: left;
        margin-right: 20px;
        transform: scale(1.5)
    }
}

#spaceinfo {
    background: var(--black2);
    height: auto;
    overflow: hidden;
    width: 100%;
    position: relative;
    //display done in js
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--themecolor);

    meter {
        width: 290px;
        max-width: 100%;
    }
}



@media (prefers-color-scheme:light) {
    #spaceinfo {
        background: var(--beige3);
    }
}


@media (prefers-color-scheme:dark) {
    #headbar2 {
        background: var(--black2);
        border: none;

        p {
            color: #fff;
        }
    }

    meter {
        filter:invert(1);

        &::-webkit-meter-optimum-value {
            filter:invert(1);
        }

        &::-moz-meter-bar {
            filter:invert(1);
        }
    }
}