Skip to content

Instantly share code, notes, and snippets.

@nilslindemann

nilslindemann/lichess-prettier-study-notation-layout.css

Last active May 1, 2022 11:48
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.
Download ZIP

Revisions

  1. Nils Lindemann revised this gist Dec 19, 2021. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions lichess-prettier-study-notation-layout.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,9 @@ Version 2 of https://paste.ofcode.org/XwWMzhY42Ci2uef4kjnjK3 (which will expire
    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
    */


  2. Nils Lindemann created this gist Dec 19, 2021.
    308 changes: 308 additions & 0 deletions lichess-prettier-study-notation-layout.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,308 @@
    /*
    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.
    */



    /* 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;
    }