using the stylus extension and streamer layout as it is good for my vertical recordings. been using it a while, today something has gone wrong with the clocks, my clock that should be below the board is above the board, over opponents clock, can be seen in this recording. first time had any issue with this layout.
I went to the page on lichess where we get the streamer layout code and re-copied it fresh, using chrome broswer, but same if I just go to watch lichess tv.
https://www.youtube.com/watch?v=EhqOhkhfKUI
Hello! Try this code:
/* ==UserStyle==
@name Lichess Streamer Layout
@namespace github.com/ornicar/userstyles
@homepageURL https://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;
}
}
@Pri_X said in #2:
>
That helps
Had the same problem
Thank you
This topic has been archived and can no longer be replied to.