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-reverse;
        width: 100%;
        margin-top: 20px;
        .cp-limit-bar {
            display: inline-flex;
            justify-content: center;
            align-items: center;

            max-width: 100%;
            margin: 4px;
            box-sizing: border-box;
            border-radius: 3px;
            background: white;
            position: relative;
            text-align: center;
            width: ~"calc(100% - 8px)";
            height: 35px;
            line-height: 25px;
            overflow: hidden;
            .cp-limit-usage {
                height: 100%;
                display: inline-block;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1; // .usage
                &.cp-limit-usage-normal {
                    background: lighten(@colortheme_green, 15%);
                }
                &.cp-limit-usage-warning {
                    background: orange;
                }
                &.cp-limit-usage-above {
                    background: red;
                }
            }
            .cp-limit-usage-text {
                position: relative;
                color: @cryptpad_text_col;
                z-index: 2; // .usageText
                font-size: @colortheme_app-font-size;
                
            }
        }
        .cp-limit-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            justify-content: space-evenly;
            //padding: 2px;
            a {
                height: 25px;
                display: inline-flex;
                align-items: center;
                min-width: 150px;
                margin: 2px;
                width: 50%;
                padding-top: 0;
                padding-bottom: 0;
                justify-content: center;
                flex: 1;
            }
        }
    }
}