cryptpad/customize.dist/src/less2/include/limit-bar.less

@import (reference) "./colortheme-all.less";

.limit-bar_main () {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    .cp-limit-container {
        @colortheme_green: #5cb85c;
        display: inline-flex;
        flex-flow: column;
        width: 100%;
        margin: 20px 0px;
        .cp-limit-bar {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            max-width: 100%;
            margin: 5px;
            box-sizing: border-box;
            border-radius: 3px;
            background: white;
            position: relative;
            text-align: center;
            width: ~"calc(100% - 10px)";
            height: 10px;
            overflow: hidden;
            .cp-limit-usage {
                height: 10px;
                display: inline-block;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1; // .usage
                &.cp-limit-usage-normal {
                    background: @colortheme_green;
                }
                &.cp-limit-usage-warning {
                    background: orange;
                }
                &.cp-limit-usage-above {
                    background: red;
                }
            }
        }

        .cp-limit-usage-text {
            color: @cryptpad_text_col;
            margin-left: 5px;
            z-index: 2; // .usageText
            font-size: @colortheme_app-font-size-small; 
        }
                
        .cp-limit-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            justify-content: space-evenly;
            a {
                height: 25px;
                display: inline-flex;
                align-items: center;
                min-width: 150px;
                margin: 3px 5px;
                width: 50%;
                padding-top: 0;
                padding-bottom: 0;
                justify-content: center;
                flex: 1;
            }
        }
    }
}