Bug: Streamer layout has clocks overlapping

Just started today. The bottom clock is overlayed on top of the top clock, even if you resize the board: https://i.imgur.com/L9122fc.png

https://raw.githubusercontent.com/ornicar/userstyles/master/lichess.streamer.user.css

Did you manage to fix it by any chance? I reinstalled it but they are still overlapping!

Some variable names have changed. Edit the style and replace the three instances of "--cg-" with "---cg-" and save.

@ItsGam3Tyme said in #4:

--cg-

Thank you! That did the trick. I had spent an hour trying to figure it out myself, but couldn't.

Hello! Try this code:

/* ==UserStyle==
@name Lichess Streamer Layout
@namespace github.com/ornicar/userstyles
@homepageURL raw.githubusercontent.com/ornicar/userstyles/master/lichess.streamer.user.css
@version 1.1.2
@description On lichess.org games, puts usernames and clocks around board for easier screen capture
@author github.com/ornicar
==/UserStyle== */

@-moz-document domain("lichess.org") {
/* Change background to fixed color to allow blending into custom stream overlays */
body { background: #EDEBE9; }
body.dark { background: #161512; }

@media (prefers-color-scheme: dark) {
body.system {
background: #161512;
}
}

/* Display board above clock drop shadows*/
.round__app__board {
z-index: 2;
}

/* Adjustments to wide layout /
@media (min-width: 1260px) {
/ Hide scrollbar and make board larger /
body.playing {
/ TODO: Might need to add extra adjustments for small v-heights */
height: 100vh;
overflow: hidden !important;

/* Remove 2vmin bottom margin */
margin: 0px;
padding: 0px;
}

/* Make clocks bigger /
.rclock .time {
/

• TODO: needs !important because of setting later on
• This should be refactored at some point when the narrower
• layout gets updates
  */
  line-height: 36px !important;
  height: 36px;
  min-width: 8rem;
  justify-content: center;
  padding: 0px 0rem;
  }

/*

• Re-align the top "more time" plus button
• to vertically center on expanded clock
  */
  .rclock-top .time, .rclock-top a.moretime {
  margin-top: 0px;
  }

/* Layout to re-align board */
.round {
--chat-top-margin: calc(30px - 0.5rem);
grid-template-areas: "side app app" "uchat app app";
grid-template-rows: calc(var(--chat-top-margin) + var(---cg-height)) 30px;
grid-row-gap: 0;
}

/* Remove underboard scoresheet */
.round__underboard {
display: none;
}

/* Re-align left sidebar to top of board */
.round__side {
margin-top: var(--chat-top-margin);
}

/* Vertically center list of spectators underneath chat */
.round__underchat {
display: flex;
flex-direction: column;
justify-content: center;
}

.chat__members {
height: auto !important;
}
}

@media (min-width: 800px), (orientation: landscape) {
.round__app {
grid-template-columns: minmax(calc(70vmin * var(---board-scale)), calc(100vh * var(---board-scale) - calc(var(---site-header-height) + var(---site-header-margin)) - 3rem)) minmax(240px, 400px);
grid-template-rows: 30px 1fr auto min-content auto auto min-content auto 1fr 30px;
grid-template-areas: 'user-top .' 'board .' 'board mat-top' 'board expi-top' 'board moves' 'board controls' 'board expi-bot' 'board mat-bot' 'board .' 'user-bot .' 'kb-move .';
margin-top: .2em;
}
.round__app .rclock-top, .round__app .rclock-bottom {
grid-area: 1 / 1 / 2 / 2;
}
.round__app .rclock-bottom {
transform: translateY(calc(var(---cg-height) + 30px));
}
.round__app .round__app__table {
grid-area: 4 / 2 / 6 / 3;
}
.rclock {
/* that weird shit is required so the clock goes above the player since they share the same grid cell */
justify-self: flex-end;
z-index: 1;
}
.rclock .tour-rank,
.rclock .moretime,
.rclock .berserked {
order: -1;
}
.rclock .bar {
display: none;
}
.rclock .time {
font-size: 1.7em !important;
line-height: 30px;
background: #1d4f4f;
}
.ruser {
font-size: 1.4em ;
padding: 0 .3em;
line-height: 30px;
}
.ruser a {
flex: none;
}

/* Move puzzle board down to match main game board (ornicar/userstyles#4) */
main.puzzle {
margin-top: calc(30px - 0.5em);
}

/* Horizontally align board between different views (game vs puzzle) */
cg-container {
right: auto;
left: 0px;
}

.analyse__player_strip, .rclock {
margin-right: calc(100% - var(---cg-width));
}
}

#top .site-buttons a[title="Moderation"] {
display: none;
}

}

@ItsGam3Tyme said in #4:

Some variable names have changed. Edit the style and replace the three instances of "--cg-" with "---cg-" and save.

Thanks! That worked for me.