Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save nilslindemann/be6b19b2fd57faf340ff1487fe13b114 to your computer and use it in GitHub Desktop.
Save nilslindemann/be6b19b2fd57faf340ff1487fe13b114 to your computer and use it in GitHub Desktop.
Lichess prettier study notation layout
/*
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment