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
[Lichess.org] Champions Chess Tour 1.0.0-beta by gridnik
![Screenshot of [Lichess.org] Champions Chess Tour 1.0.0-beta](https://userstyles.world/preview/1602/0.webp)
Details
Authorgridnik
LicenseNo License
CategoryLichess.org
Created
Updated
Size36 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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 {...