[Lichess.org] Champions Chess Tour 1.0.0-beta by gridnik

Screenshot of [Lichess.org] Champions Chess Tour 1.0.0-beta
Details

Authorgridnik
LicenseNo License
CategoryLichess.org
Created2 years, 6 months ago
Updated2 years, 6 months ago
Size36 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Custom Lichess theme based on the 2021 Champions Chess Tour broadcasts.
Requirements
Background must be set to 'dark'
Board theme must be set to 'purple
Notes

Requirements
Background must be set to 'dark'
Board theme must be set to 'purple
1.0.0-beta
All areas under 'Play" including tournaments have updated styles. Many areas retain default Lichess styling and those will be addressed in future updates.
Cleanup of code will also be done in future updates.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Champions Chess Tour 1.0.0-beta
@version      20211018.16.24
@namespace    userstyles.world/user/gridnik
@description  Custom Lichess theme based on the 2021 Champions Chess Tour broadcasts.
@author       gridnik
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://lichess.org/") {
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

body {
    background-image: url(https://i.imgur.com/sILlNvA.png);
    background-repeat: repeat;
    background-size: cover;
    color: #F0D3E4;
}

a {
    color: #ceb850;
}

a:hover,
a:active,
a:focus,
.timeline .entry:hover a,
.lobby__about a:hover {
    color: #ceb850;
}
.material mpiece {
    opacity: .5;
    margin-left: -5px;
}
.search button, input, optgroup, select, textarea {
    outline-color: #ceb850;
}

.rclock .bar {
    background: #ceb850;
}
.rclock .time,
.rclock.running .time {
    background: rgba(59, 8, 48, 0.8)
}
.rclock .time {
    color: #EED5E4
}
.rclock.running .time {
    color: #ceb850;
}
.rclock.emerg.running .time {
    background: #ceb850;
    color: #fff;
}
.rclock.emerg .time {
    background: #ceb850;
    color: #fff;
}
.rclock.emerg .time,
.rclock.outoftime .time {
    background: rgba(206, 184, 80, 0.6);
}
.rclock.emerg.running .time {
    background: rgba(206, 184, 80, 0.6);
}
.mini-game__clock.clock--run {
    color: #ceb850;
}

.round__app__table {
    background: rgba(70, 10, 58, 0.7)
}
rm6 {
    background: rgba(70, 10, 58, 0.2);
}
rm6 .buttons {
    background: rgba(91, 29, 77, 0.3);
}
.fbt:hover:not(.disabled):not([disabled]) {
    background: rgba(206, 184, 80, 0.7);
}
rm6 u8t.a1t {
    background: rgba(206, 184, 80, 0.5);
    ;
}
rm6 u8t:hover {
    background: #9c8a33;
}
rm6 i5z {
    background: rgba(70, 10, 58, 0.7)
}
a.user-link:hover {
    color: #ceb850;
}
.user-link,
.now-playing a {
    color: #F0D3E4;
}
.user-link.online .line {
    color: #ceb850;
}
.utitle {
    color: #ab9422;
}
.lobby__app__content {
    background: none;
    box-shadow: none;
}
.tv-channel > span::before {
    color: #F0D3E4;
}
.tv-channel.active > span::before {
    color: #ceb850;
}
.tv-single .tv-history h2 {
    color: #F0D3E4;
}
.subnav a {
    color: #F0D3E4;
}
.subnav a.active {
    color: #ceb850;
}
.subnav a::after {
    background: #ceb850;
}
.game__meta,
.tour-spotlight,
.tour-spotlight.invert,
.tour-spotlight.event-spotlight,
.tour-spotlight:hover {
    background: rgba(41, 5, 34, 0.7)
}
.tour-spotlight {
    color: #F0D3E4;
}
.lobby__streams .stream.highlight strong {
    color: #ceb850;
}
.lobby__streams .more:hover,
.timeline .more:hover,
.lobby__counters a:hover {
    color: #ceb850;
}
.lobby__support a {
    background: rgba(41, 5, 34, 0.7)
}
.crosstable .win {
    color: rgba(206, 184, 80, 100);
}
.crosstable .loss {
    color: #EED5E4;
    opacity: 0.5;
}
.crosstable fill,
.crosstable povs {
    background: rgba(41, 5, 34, 0.9);
}

.crosstable__users,
.crosstable__score,
.crosstable povs:hover,
.cmn-toggle + label::after,
.rcontrols .rematch.fbt,
#powerTip .forecast-info .title {
    background: rgba(59, 8, 48, 0.8)
}
.rcontrols .rematch.fbt:not(.disabled):hover {
    background: rgba(206, 184, 80, 0.7);
}
.rcontrols .rematch-decline,
.rcontrols .rematch-decline:hover {
    background: rgba(206, 184, 80, 0.7);
}
.rcontrols .rematch.glowing::before {
    background: #ceb850;
}
.crosstable__matchup,
.crosstable povs.current a {
    background: rgba(238, 213, 228, 0.08);
}
.site-title a,
.site-title a span {
    color: #EED5E4;
}
.site-title a:hover,
.site-title a:hover span {
    color: #ceb850
}
#topnav.hover section:hover > a,
#topnav section:active > a,
#topnav div {
    background: rgba(41, 5, 34, 0.9);
    border-color: #ceb850;
}
#topnav div a:hover {
    background: #ceb850
}
#topnav section > a {
    color: #EED5E4;
}
.lpools > div:hover {
    background: rgba(206, 184, 80, 0.7);
}
.lpools > div {
    background: rgba(41, 5, 34, 0.4);
    border: 1px solid rgba(238, 213, 228, 0.25);
    color: #EED5E4;
}
.tabs-horiz span.active {
    color: #ceb850;
}
.tabs-horiz span::after {
    background: rgba(206, 184, 80, 100);
}
.tabs-horiz,
.lobby__counters a,
.lobby__streams .stream,
.timeline,
.lobby__about a,
.about-side,
.lobby__puzzle .text {
    text-shadow: none;
    color: #EED5E4;
}
.tabs-horiz {
    border-bottom: 2px solid rgba(238, 213, 228, 0.4);
}
#hook .opponent,
.lobby__box__top {
    background: rgba(41, 5, 34, 0.8)
}
.hooks__list td {
    background: rgba(41, 5, 34, 0.5);
    border-bottom: 1px solid rgba(238, 213, 228, 0.4);
}
.lobby__box__top .title,
.lobby__box__top .more {
    color: #F0D3E4;
}
.lobby__box__content {
    background: rgba(41, 5, 34, 0.4);
}
.lobby__box tr:nth-child(2n) {
    background: rgba(26, 2, 21, 0.5)
}
.lobby__box td {
    border-top: 1px solid rgba(238, 213, 228, 0.4);
}
.lobby__box__top .more:hover,
.lobby__box td.name a:hover {
    color: #ceb850;
}
.lobby__support__text,
.lobby__support i::before {
    color: #ceb850;
}
.lobby__support a:hover {
    background: rgba(206, 184, 80, 0.7);
}
table good.rp,
.ruser good {
    color: #F0D3E4;
}
table bad.rp,
.ruser bad,
.user-link bad {
    color: #F0D3E4;
    opacity: .5;
}
.ruser good,
.user-link good {
    color: #ceb850;
}
.ruser a,
.ruser rating {
    color: #F0D3E4;
}
.data-count::after,
.unread,
.button.active,
.btn-rack__btn.active {
    text-shadow: none
}
.ublog-post-card {
    background: rgba(41, 5, 34, 0.8);
}
.ublog-post-card__title {
    color: #F0D3E4;
}
.ublog-post-card:hover {
    background: rgba(41, 5, 34, 0.4);
}
.button.active:not(.disabled):hover,
.button:not(.disabled):hover {
    background: rgba(206, 184, 80, 0.7);
}
.bg-switch__thumb {
    background: rgba(206, 184, 80, 100) url("data:image/svg+xml;utf8,%3Csvg style='fill: %23ffffff;' width='14' height='13' viewBox='0 0 14 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}
.bg-switch__track {
    border: 3px solid #ceb850;
    background: rgba(41, 5, 34, 0.4);
}
.data-count::after,
.unread,
.button.active,
.btn-rack__btn.active,
.button:not(.disabled):hover {
    background: rgba(206, 184, 80, 0.7);
}
.button.button-metal:not(.disabled):hover,
#friend_box .friend_box_title:hover,
.btn-rack__btn:hover,
.btn-rack form:hover {
    background: rgba(206, 184, 80, 0.7);
}
.site-buttons .signin.button-empty,
.button.button-empty:not(.disabled):hover,
.button.button-empty.button-green:not(.disabled):hover,
.button.button-empty.button-red:not(.disabled):hover,
.button.button-metal,
#friend_box .friend_box_title,
.btn-rack__btn,
.btn-rack form {
    background: rgba(41, 5, 34, 0.7)
}
.button.button-metal,
.button.button-metal:hover {
    color: #ccc;
}

.tabs-horiz span,
.ublog-post-card__intro,
.lpools,
.hooks__list th,
.lobby__streams .stream,
.timeline .entry,
.lobby__forum .extract,
.lobby__streams .more,
.timeline .more {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}

.hooks__list tr.join:hover td {
    background: rgba(206, 184, 80, 0.7);
}

.lobby__app .gamesFiltered {
    color: #ceb850
}

.lobby__app .gamesFiltered:hover {
    color: rgba(206, 184, 80, 0.7);
}

.button {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

.button {
    background: rgba(41, 5, 34, 0.7)
}

.lpools div.perf {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 600;
}
.tabs-horiz, .lobby__counters, .lobby__streams .stream, .timeline, .lobby__about a, .timeline .entry a {
    color: #EED5E4;
}

.timeline .entry::after {
    background: rgba(238, 213, 228, 0.2);
}

/* Custom Game */
#modal-wrap .close:hover {
    background: #ceb850;
}
#modal-wrap .close {
    background: rgba(238, 213, 228, 0.2);
}
#modal-overlay {
    background: rgba(23, 3, 19, 0.8)
}

#modal-wrap {
    background: rgba(41, 5, 34, 0.8)
}
.game-setup .optional_config,
.game-setup .ratings {
    background: rgba(70, 10, 58, 0.7)
}
input.range::-moz-range-track {
    background: rgba(238, 213, 228, 0.2)
}
input.range::-moz-range-thumb {
    background: rgba(41, 5, 34, 0.8);
    border: 1px solid rgba(238, 213, 228, 0.45);
}
.game-setup group.radio input:checked + label {
    background: rgba(206, 184, 80, 0.7);
}
group.radio label {
    background: rgba(70, 10, 58, 0.7)
}
group.radio label:hover {
    background: rgba(70, 10, 58, 0.4)
}
.lpools .active {
    background: rgba(206, 184, 80, 0.7);
}

/* Tournaments */
.box {
    background: rgba(41, 5, 34, 0) !important;
    box-shadow: none;
}
.tour-chart .timeheader {
    border-left: 1px dashed rgba(238, 213, 228, 0.45);
}
.tour-chart__inner {
    border-top: 1px solid rgba(238, 213, 228, 0.45);
}
.tour-chart .timeheader.now::after {
    border-top: 8px solid #ceb850;
}
.tour-chart .timeheader.now {
    border-left: 2px dashed #ceb850;
}
.tsht {
    background: rgba(201, 8, 127, 0.7);
}
.tsht-hourly {
    background-color: rgba(156, 56, 135, 0.75);
}
.tsht-max-rating {
    background-color: rgba(14, 188, 232, 0.75);
}
.tsht-weekly {...
Reviews

No reviews yet.