Request: more visible indicator of last move

I relatively often experience an issue where I'm staring at the board, and yet don't see that my opponent has made a move.

I have the last move display turned on (and piece animation), but the subtle green squares on beige/pink background don't seem to stand out enough for me. The indicator of whether it's my turn or not is also too far from the board, so sometimes I don't pick it up in my peripheral vision.

Is there any chance of having an option for a more dramatic display of the most recent move? Ideally:

- a big arrow (like in the analysis board) showing opponent's last move
- a different coloured border around the board (or even a small change to every square) indicating that it's my move?

I'm a JavaScript programmer, so would also be interested in any tips for how I could implement something like this myself.

I'm not colour blind - have done tests in the past.

Unfortunately, changing the colour theme doesn't help very much - it's not possible to change the last-move indicator, which contrasts very poorly with a lot of the colour themes.

You can change the color with Stylus. See lichess.org/forum/lichess-feedback/highlighting-of-opponent-previous-move-buzz-warnings-when-time-gets-critical#3

Thanks. That style itself seems to have a bug, but it got me moving in the right direction.

This CSS highlights just the square that the piece moved to:

square.last-move:first-child {
border: 5px solid yellow;
}

(The CSS in that user style has ".cg-board" when it should just be "cg-board".

great bugfix, very useful style! how can i change the color of the square, that i have selected as start of my move? this is also too greenish.

#6 @TrapAdvisor
With some guesswork I found: square.selected { background-color: rgba(255, 0, 255, .3); }

@Titanoboa ahhh great, thank you! this makes entry of moves much safer to prevent misclicks!
Thank you so much!

@Titanoboa maybe you also know the name of colour for the premove-squares? It is grey in default and hard to see with some board themes.

Yeah I went on to make my own custom themes later so I had to find all the stuff. I'll paste one of my themes for you to pick and choose from. I added variables to it to make it easier to create new ones, but it shouldn't be too hard for you to dissect. Just replace the var() bit with whatever is between -- and ; in the :root{} bit if you don't want to keep the variables.

If you don't like how I've changed the dots for legal moves/premoves, you can probably find the original by messing about with the percentages.

/* Skyline */
:root {
--imgurl: url("i.imgur.com/7mXgFOj.png");
--last-move: rgba(19, 161, 163, .25);
--legal-moves: rgba(19, 161, 163, .25);
--legal-move-hover: rgba(36, 196, 199, .45);
--premove: rgba(239, 94, 255, .4);
--legal-premoves: rgba(239, 94, 255, .25);
--legal-premove-hover: rgba(239, 94, 255, .45);
--selected: rgba(25, 70, 147, .4);
--checks: rgba(255, 174, 0, .75);
}

.is2d cg-board {background-image: var(--imgurl) !important;}
square.last-move { background-color: var(--last-move); }
square.move-dest { background: radial-gradient( var(--legal-moves), rgba(0,0,0,0)); }
square.oc.move-dest {background: radial-gradient( transparent 40%, transparent 42%, var(--legal-moves) 90%); }
square.move-dest:hover { background: radial-gradient( var(--legal-move-hover), rgba(0,0,0,0)); }
square.oc.move-dest:hover { background: radial-gradient( rgba(0,0,0,0), var(--legal-move-hover)); }
square.current-premove { background-color: var(--premove) !important; }
square.premove-dest { background: radial-gradient(var(--legal-premoves), rgba(0,0,0,0)); }
square.oc.premove-dest {background: radial-gradient(transparent 40%, transparent 42%, var(--legal-premoves) 90%); }
square.premove-dest:hover { background: radial-gradient( var(--legal-premove-hover), rgba(0,0,0,0)); }
square.oc.premove-dest:hover { background: radial-gradient(rgba(0,0,0,0), var(--legal-premove-hover)); }
square.selected { background-color: var(--selected); }
square.check { background: radial-gradient(var(--checks), rgba(0, 0, 0, 0)); }