Lichess prettier study notation layout

lichess-prettier-study-notation-layout.css

/*
Version 2 of https://paste.ofcode.org/XwWMzhY42Ci2uef4kjnjK3 (which will expire in a few days)

* Fixed the styling for dark and transparent backgrounds
* Cleanup

Apply this to URLS starting with https://lichess.org/study/.
E.g. use the Stylus browser addon for that.

Screenshot: https://i.postimg.cc/QM9s118j/lichess-prettier-notation-layout.gif

*/



/* Misc */

.tview2 move,
.tview2 move index,
.tview2 move glyph,
.tview2 comment,
.tview2 a,
.tview2 inline:before,
.tview2 inline:after {
    line-height: 22px;
    vertical-align: baseline !important;
    border: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    xxx font-family: "Roboto";
    font-size: 15px !important;
    font-style: normal;
    font-weight: normal !important;
}

.tview2 move index {
    font-size: 1em;
}

.tview2 inline {
    font-size: 1em;
    opacity: 1;
}

.tview2 comment {
    display: inline;
    position: relative;
    left: 3px;
    padding-right: 3px;
    font-family: "Roboto Light";
    font-size: 15px;
}



/* Spacings */

.tview2 line {
    margin: 9px 0;
}


.tview2-inline {
    padding: 9px;
}
.tview2-inline line {
    margin: 18px 0;
}


.tview2-column > interrupt {
    padding: 9px;
}
.tview2-column > interrupt > comment {
    padding: 0;
}
.tview2-column > interrupt > lines {
    border-left: 0!important;
    margin-left: 0!important;
}
.tview2-column > interrupt > lines > line {
    padding: 0;
}
.tview2-column > interrupt > lines:first-child > line:first-child {
    margin-top: 0;
}
.tview2-column > interrupt > lines:last-child > line:last-child {
    margin-bottom: 0;
}



/* Colors */

.tview2 move,
.tview2 move index,
.tview2 move glyph {
    opacity: 1!important;
    color: #4d4d4d!important;
}
.tview2 comment,
.tview2 inline:before,
.tview2 inline:after {
    opacity: 1!important;
    color: #707070 !important;
}
.tview2 lines {
    border-left: 2px solid #dbdbdb;
}


body[data-theme="dark"] .tview2 move,
body[data-theme="dark"] .tview2 move index,
body[data-theme="dark"] .tview2 move glyph {
    color: #BABABA!important;
}
body[data-theme="dark"] .tview2 comment,
body[data-theme="dark"] .tview2 inline:before,
body[data-theme="dark"] .tview2 inline:after {
    color: #999!important;
}
body[data-theme="dark"] .tview2 lines {
    border-left: 2px solid #444;
}


body[data-theme="transp"] .tview2 move,
body[data-theme="transp"] .tview2 move index,
body[data-theme="transp"] .tview2 move glyph,
body[data-theme="transp"] .tview2 comment,
body[data-theme="transp"] .tview2 inline:before,
body[data-theme="transp"] .tview2 inline:after {
    color: #ccc!important;
}
body[data-theme="transp"] .tview2 lines {
    border-left: 2px solid #ccc;
}



/*
Remove the linebreaks inserted (or: not removed) by Lichess' unwieldy import mechanism.
Test with https://lichess.org/study/RoBvWqfx.
Unfortunately also double linebreaks are removed. It can no be fixed with CSS only.
TBD.
*/

.tview2 br,
.study__comment .text br {
    content: " ";
    width: 3px;
    display: inline-flex;
}



/* If you dont need the move numbers remove the 'xxx' */

.tview2 move index {
    xxx display: none;
}



/* author names. I dont need that */

.tview2 span.by {
    display: none!important;
}



/* Add alphabetical variation numbers */

.tview2 move:first-of-type,
.tview2 move:first-of-type * {
    line-height: 24px !important;
}

.tview2 move:first-of-type:before {
    position: relative;
    left: 2px;
    margin-right: 9px;
    font-family: "Roboto";
    font-size: 1.1em;
    font-weight: bold;
}

.tview2 line:nth-of-type(1):only-child > move:first-of-type:before {
    content: '​'; /* That string is not empty! */
    margin-right: 0;
}

/* 26 variations are possible. Hope that is enough :-) */
.tview2 line:nth-of-type(1) > move:first-of-type:before {
    content: 'A)';
}

.tview2 line:nth-of-type(2) > move:first-of-type:before {
    content: 'B)';
}

.tview2 line:nth-of-type(3) > move:first-of-type:before {
    content: 'C)';
}

.tview2 line:nth-of-type(4) > move:first-of-type:before {
    content: 'D)';
}

.tview2 line:nth-of-type(5) > move:first-of-type:before {
    content: 'E)';
}

.tview2 line:nth-of-type(6) > move:first-of-type:before {
    content: 'F)';
}

.tview2 line:nth-of-type(7) > move:first-of-type:before {
    content: 'G)';
}

.tview2 line:nth-of-type(8) > move:first-of-type:before {
    content: 'H)';
}

.tview2 line:nth-of-type(9) > move:first-of-type:before {
    content: 'I)';
}

.tview2 line:nth-of-type(10) > move:first-of-type:before {
    content: 'J)';
}

.tview2 line:nth-of-type(11) > move:first-of-type:before {
    content: 'K)';
}

.tview2 line:nth-of-type(12) > move:first-of-type:before {
    content: 'L)';
}

.tview2 line:nth-of-type(13) > move:first-of-type:before {
    content: 'M)';
}

.tview2 line:nth-of-type(14) > move:first-of-type:before {
    content: 'N)';
}

.tview2 line:nth-of-type(15) > move:first-of-type:before {
    content: 'O)';
}

.tview2 line:nth-of-type(16) > move:first-of-type:before {
    content: 'P)';
}

.tview2 line:nth-of-type(17) > move:first-of-type:before {
    content: 'Q)';
}

.tview2 line:nth-of-type(18) > move:first-of-type:before {
    content: 'R)';
}

.tview2 line:nth-of-type(19) > move:first-of-type:before {
    content: 'S)';
}

.tview2 line:nth-of-type(20) > move:first-of-type:before {
    content: 'T)';
}

.tview2 line:nth-of-type(21) > move:first-of-type:before {
    content: 'U)';
}

.tview2 line:nth-of-type(22) > move:first-of-type:before {
    content: 'V)';
}

.tview2 line:nth-of-type(23) > move:first-of-type:before {
    content: 'W)';
}

.tview2 line:nth-of-type(24) > move:first-of-type:before {
    content: 'X)';
}

.tview2 line:nth-of-type(25) > move:first-of-type:before {
    content: 'Y)';
}

.tview2 line:nth-of-type(26) > move:first-of-type:before {
    content: 'Z)';
}



/* Simplify. The numbers explain enough. */

.tview2 line:before,
.tview2 lines:before {
    display: none;
}

.tview2 lines {
    margin-left: 4px !important;
}