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;
@silver: #2c2c2c;

@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(0.5, 0, 0.5, 1) 0s infinite alternate;
}
.red-green-border {
    animation: rg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}
.blue-green-border {
    animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}

.combo-border:not(.highlight) {
    animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
}

@keyframes rg {
    0% {
        border-color: @red;
    }
    50% {
        border-color: @gray-box;
    }
    100% {
        border-color: @green;
    }
}

@keyframes rb {
    0% {
        border-color: @red;
    }
    50% {
        border-color: @gray-box;
    }
    100% {
        border-color: @blue;
    }
}

@keyframes bg {
    0% {
        border-color: @blue;
    }
    50% {
        border-color: @gray-box;
    }
    100% {
        border-color: @green;
    }
}

@keyframes border-co {
    0% {
        border-color: @gray-box;
    }
    100% {
        border-color: @gray-hint;
    }
}

@keyframes co {
    from {
        background: @black;
    }
    to {
        background: @gray-exists;
    }
}

@keyframes co-text {
    from {
        color: @black;
    }
    to {
        color: @gray-exists;
    }
}

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

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

@keyframes rgb {
    0% {
        color: @red;
    }
    25% {
        color: @white;
    }
    50% {
        color: @blue;
    }
    75% {
        color: @white;
    }
    100% {
        color: @green;
    }
}

@keyframes rb-text {
    0% {
        color: @red;
    }
    50% {
        color: @white;
    }
    100% {
        color: @blue;
    }
}

@keyframes target-ko {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}