cryptpad/customize.dist/src/less2/include/tokenfield.less

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

.tokenfield_main () {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    .ui-autocomplete {
        z-index: 100001; // alertify + 1
    }
    .tokenfield {
        .tools_unselectable();
        display: flex;
        flex-wrap: wrap;
        height: auto;
        min-height: 34px;
        padding-bottom: 0px;
        background-color: unset;
        border: none;
        margin: 0 10px;
        padding: 0;
        width: ~"calc(100% - 20px)";
        span.tokenfield-empty {
            font-size: 14px;
            font-style: italic;
            color: lighten(@cryptpad_text_col, 10%);
        }
        .cp-tokenfield-container {
            width: 100%;
        }
        .cp-tokenfield-form {
            display: flex;
            width: 100%;
            input {
                flex: 1;
                min-width: 0 !important;
            }
        }
        .token {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            margin: 2px 0;
            margin-right: 5px;
            height: 24px;
            vertical-align: middle;
            cursor: default;
            color: @cryptpad_text_col;

            &:hover {
                background-color: rgba(0, 0, 0, 0.2);
            }
            &.invalid {
                background: none;
                border: 1px solid transparent;
                border-radius: 0;
                border-bottom: 1px dotted #d9534f;
            }
            &.invalid.active {
                background: #ededed;
                border: 1px solid #ededed;
                border-radius: 3px;
            }
            .token-label {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 4px;
                vertical-align: middle;
            }
            .close {
                opacity: 1;
                font-family: Arial;
                display: inline-block;
                line-height: 1.49em;
                font-size: 1.1em;
                margin-left: 5px;
                float: none;
                height: 100%;
                vertical-align: middle;
                padding-right: 4px;
            }
            &.active {
                border-color: rgba(82, 168, 236, 0.8);
            }
            &.duplicate {
                border-color: #ebccd1;
            }
        }
        .token-input {
            background: none;
            flex: 1;
            border: 0;
            padding: 0;
            margin: 0 !important; // Override alertify
            box-shadow: none;
            max-width: 100%;
            width: 100%;
            min-width: 100% !important;
            &:focus {
                outline: 0;
                box-shadow: none;
            }
        }
    }
}