mnml/client/assets/styles/colours.less

@green: #1FF01F;
@red: #a52a2a;
// @blue: #3498db // cyan?
@blue: #3050f8;
@white: #f5f5f5; // whitesmoke
@purple: #9355b5; // 6lack - that far cover
@yellow: #ffa100;

@black: black;
@gray: #222;
@gray-box: #222;
@gray-exists: #444;
@gray-hint: #666;
@gray-hover: #888;
@gray-focus: whitesmoke;

svg {
    stroke: none;
    margin: 0 auto;
    display: block;

    &.red {
        stroke: @red;
    }

    &.green {
        stroke: @green;
    }

    &.blue {
        stroke: @blue;
    }
}

.green {
    color: @green;
    stroke: @green;
}

.red {
    color: @red;
    stroke: @red;
}

.red-fill {
    fill: @red;
}

.blue {
    color: @blue;
    stroke: @blue;
    stroke-linecap: round;
}

.gray {
    color: #333;
    stroke: #333;
}

.white {
    color: @white;
    stroke: @white;
}

.red-border {
    border-color: @red;
}
.blue-border {
    border-color: @blue;
}
.green-border {
    border-color: @green;
}

.red-blue-border {
    animation: rb 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
}
.red-green-border {
    animation: rg 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
}
.blue-green-border {
    animation: bg 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
}

@keyframes rg {
    from {
        border-color: @red;
    }
    to {
        border-color: @green;
    }
}

@keyframes rb {
    from {
        border-color: @red;
    }
    to {
        border-color: @blue;
    }
}

@keyframes bg {
    from {
        border-color: @blue;
    }
    to {
        border-color: @green;
    }
}

button {
    &.blue {
        border-color: @blue;
    }
    &.red {
        border-color: @red;
    }
    &.green {
        border-color: @green;
    }
}