Please read the notes
chess.com package V.3.2 by twyndyllyngs-flaris
Imported from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/257909.user.css
Details
Authortwyndyllyngs-flaris
LicenseNONE
Categorychess
Created
Updated
Size9.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
-
IMPORTANT *
- Use the default (medium) for move animation. Userstyles does not work when on Natural and
Arcade mode
- Use the default (medium) for move animation. Userstyles does not work when on Natural and
-
Not so important *
Theme and Board Settings (to make use of most changes):
- Highlight Moves: ON
- Coordinates: Inside Board
- Show Legal Moves: ONFor the rest, you can pick whatever you want
You can add me at chess.com: twyndelvanflarine (I'm rated 700 lol just playin for fun).
Took me around 7 days to finish this. Chess.com's css' wacky af.
Everything's responsive except the cursors. If you have your own cursors
or you want to lower the size, you can send me and email (I'll do it for free).
If you have any suggestions or want to thank me, you can send me an email at rmdldeleon@gmail.com
V3.2 Changes:
- Changed the color of right-click highlight to default (red)
My fav userstyles from lichess.org + my own custom styles and animations
Changes:
1.) Brown Wooden Chess Board. (Brightened it a lil bit)
- https://userstyles.org/styles/182874/lichess-board-brown-wooden-chess-board
- Original work by Mad_Amateur
2.) Added Board Shadow and Higher Border Radius
3.) Neo-Wood Pieces With Shadows (recolored it a lil bit to match the board color)
4.) Hint and Capture-Hint Effects + Animations
5.) Piece-Dragging Effect (Different Color For Both Sides).
6.) Changed Highlight Color
7.) Thinner Hover-square + Shadows
8.) On-board Custom Cursors and Pointers
9.) Smaller Coordinates Size + Shadows + Custom Font
10.) Changed Arrow Color
11.) Added my digital imprint on bottom-most-right square lol
Source code
/* ==UserStyle==
@name chess.com package V.3.2
@namespace USO Archive
@author Ralph Matthew De Leon
@description V3.2 Changes: - Changed the color of right-click highlight to default (red) My fav userstyles from lichess.org + my own custom styles and animations Changes: 1.) Brown Wooden Chess Board. (Brightened it a lil bit) - https://userstyles.org/styles/182874/lichess-board-brown-wooden-chess-board - Original work by Mad_Amateur 2.) Added Board Shadow and Higher Border Radius 3.) Neo-Wood Pieces With Shadows (recolored it a lil bit to match the board color) 4.) Hint and Capture-Hint Effects + Animations 5.) Piece-Dragging Effect (Different Color For Both Sides). 6.) Changed Highlight Color 7.) Thinner Hover-square + Shadows 8.) On-board Custom Cursors and Pointers 9.) Smaller Coordinates Size + Shadows + Custom Font 10.) Changed Arrow Color 11.) Added my digital imprint on bottom-most-right square lol
@version 20230508.08.13
@license NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain('chess.com'), url-prefix('https://chess.com') {
body{
background-image: url(https://drive.google.com/uc?export=view&id=1YIDN_p-m0HeW-00LWnpf1JIg9enLy8-W) !important;
background-color: #a8a8a8;
background-blend-mode: multiply;
}
.arrow{
}
polygon[style="fill: rgba(248, 85, 63, 0.8); opacity: 0.8;"]{
fill: #9c4047 !important;
}
polygon[style="fill: rgba(255, 170, 0, 0.8); opacity: 0.8;"]{
fill: lightgoldenrodyellow !important;
}
polygon[style="fill: rgba(159, 207, 63, 0.8); opacity: 0.8;"]{
fill: #3d3d42 !important;
}
polygon[style="fill: rgba(72, 193, 249, 0.8); opacity: 0.8;"]{
fill: #2aa8a2 !important;
}
.hover-square svg rect{
stroke-width: 8px;
}
.hover-square{
box-shadow: 0px calc(var(--boardWidth) * .0016) calc(var(--boardWidth) * .0058) calc(var(--boardWidth) * .0010) rgba(0,0,0,0.45),
calc(var(--boardWidth) * -.0058) calc(var(--boardWidth) * -.0058) 1px 1px rgba(0,0,0,0.25) inset,
calc(var(--boardWidth) * .0048) calc(var(--boardWidth) * .0048) 1px 1px rgba(0,0,0,0.25) inset !important;
}
.highlight.square-18{
border-top-left-radius: 7px;
}
.highlight.square-11{
border-bottom-left-radius: 7px;
}
.highlight.square-81{
border-bottom-right-radius: 7px;
}
.highlight.square-88{
border-top-right-radius: 7px;
}
.flipped > .highlight.square-18{
border-top-left-radius: 0;
border-bottom-right-radius: 7px;
}
.flipped > .highlight.square-11{
border-bottom-left-radius: 0;
border-top-right-radius: 7px;
}
.flipped > .highlight.square-81{
border-bottom-right-radius: 0;
border-top-left-radius: 7px;
}
.flipped > .highlight.square-88{
border-top-right-radius: 0;
border-bottom-left-radius: 7px;
}
div[style="background-color: rgb(255, 255, 0); opacity: 0.5;"]{
z-index: -2;
background-color: rgb(240, 219, 134) !important; opacity: .5 !important;
display: block;
}
div[style="background-color: rgb(244, 42, 50); opacity: 0.5;"]{
z-index: -2;
background-color: rgb(235, 97, 80) !important; opacity: .5 !important;
display: block;
}
div[style="background-color: rgb(235, 97, 80); opacity: 0.8;"]{
z-index: -2;
background-color: rgb(235, 97, 80) !important; opacity: .6 !important;
display: block;
-webkit-animation: .13s right-click forwards ease-out;
}
div[style="background-color: rgb(255, 170, 0); opacity: 0.8;"]{
z-index: -2;
background-color: #ffc261 !important; opacity: .6 !important;
display: block;
-webkit-animation: .13s right-click forwards ease-out;
}
div[style="background-color: rgb(82, 176, 220); opacity: 0.8;"]{
z-index: -2;
background-color: #25b0cf !important; opacity: .6 !important;
display: block;
-webkit-animation: .13s right-click forwards ease-out;
}
div[style="background-color: rgb(172, 206, 89); opacity: 0.8;"]{
z-index: -2;
background-color: #aaff96 !important; opacity: .6 !important;
display: block;
-webkit-animation: .13s right-click forwards ease-out;
}
@-webkit-keyframes right-click{
0%{
border-radius: 50%;
}
100%{
border-radius: 0;
}
}
.capture-hint{
z-index: -1;
-webkit-animation: .2s captureHint forwards, .4s .15s captureHintBC forwards;
}
@-webkit-keyframes captureHintBC{
0%{
background-color: rgba(255,255,255, 0);
}
100%{
background-color: rgba(255,255,255, .4);
}
}
@-webkit-keyframes captureHint{
0%{
border-radius: 0;
border-color: rgba(255,255,255, 0);
}
100%{
border-radius: 50%;
border-color: rgba(255,255,255, .2);
}
}
.hint{
background-color: rgba(255,255,255, .5);
filter: drop-shadow(0px 0px calc(var(--boardWidth) * .0232) white);
background-size: cover;
background-repeat: no-repeat;
-webkit-animation: fadeInFromNone 0.4s ease-out;
}
@-webkit-keyframes fadeInFromNone {
0% {
opacity: .1;
border-radius: 43%;
}
100% {
opacity: 1;
border-radius: 50%;
}
}
.piece.dragging {
cursor: url(https://drive.google.com/uc?export=view&id=1xSul1sJTP4esJsIrHrSjcZ4M5KeRv7GJ) , auto !important;
overflow: visible;
overflow-wrap: normal;
box-sizing: border-box;
}
.piece.wp.dragging::before, .piece.wb.dragging::before, .piece.wr.dragging::before,
.piece.wk.dragging::before, .piece.wn.dragging::before, .piece.wq.dragging::before{
position: absolute !important;
content: "";
width: 150%;
height: 150%;
opacity: .2;
background: white;
border-radius: 50%;
left: -25%;
top: -25%;
-webkit-animation: pieceScale 0.25s ease-out alternate;
filter: drop-shadow(0);
}
.piece.bp.dragging::before, .piece.bb.dragging::before, .piece.br.dragging::before,
.piece.bk.dragging::before, .piece.bn.dragging::before, .piece.bq.dragging::before{
position: absolute !important;
content: "";
width: 150%;
height: 150%;
opacity: .175;
background: black;
border-radius: 50%;
left: -25%;
top: -25%;
-webkit-animation: pieceScale 0.25s ease-out alternate;
}
@-webkit-keyframes pieceScale {
0% {
scale: .1;
}
100% {
scale: 1;
}
}
@keyframes delay-animation {
0% {
opacity: .2;
}
50% {
opacity: .2;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.piece{
cursor: url(https://drive.google.com/uc?export=view&id=1O45_AwIH4zEza-rOV7YqROkMNzqirCeB) , auto !important;
}
.board{
--five: calc(var(--boardWidth) * .0058);
--three: calc(var(--boardWidth) * .00348);
--four: calc(var(--boardWidth) * .00464);
--twoFive: calc(var(--boardWidth) * .0290);
--ten: calc(var(--boardWidth) * .0116);
cursor: url(https://drive.google.com/uc?export=view&id=1cvfnl_yWaj7Ne-Y5LmU5KYXt_uzt2HP5), auto !important;
background-image: url(https://drive.google.com/uc?export=view&id=1C5rB5eiT4yXtbV808YhPjj9Rrc6Ce2gQ) !important;
border-radius: .8%;
box-shadow: rgba(0, 0, 0, 0.28) 0px var(--three) var(--twoFive) var(--ten),
rgba(0, 0, 0, .3) 0px var(--three) var(--five) var(--four),
rgba(0, 0, 0, 0.3) 0px calc(var(--three) * -1) 0px inset,
rgba(255, 255, 255, .1) 0 0 0 1000000px inset;
}
.coordinate-light {
font-size: .155em;
text-shadow: 0px -1px 0px rgba(228, 219, 178, .7);
fill: #706b66 !important;
font-family: Tahoma, auto;
}
.coordinate-dark {
font-size: .155em;
text-shadow: 0px -1px 0px rgba(028, 019, 178, .6);
fill: #c7bdaa !important;
font-family: Tahoma, auto;
}
.piece.wp, .promotion-piece.wp
{
background-image: url("https://drive.google.com/uc?export=view&id=1JCkVS0O3c1UIY_3abxRGAtOhhX4smvZo") !important;
}
.piece.wn, .promotion-piece.wn
{
background-image: url("https://drive.google.com/uc?export=view&id=1DXtGSeQdaTDWBuhXRczGTlcnQPhjAE0i") !important;
}
.piece.wb, .promotion-piece.wb
{
background-image: url("https://drive.google.com/uc?export=view&id=10APsUNt7ztYM8XQDSZcItSrQE0dWLW2d") !important;
}
.piece.wr, .promotion-piece.wr
{
background-image: url("https://drive.google.com/uc?export=view&id=1t-FHWbeTauUoKfbTyMkbMj_CJi9HZPq9") !important;
}
.piece.wq, .promotion-piece.wq
{
background-image: url("https://drive.google.com/uc?export=view&id=1QIGsz9M04gcFhAAYixLmMItKYUWRDFbu") !Important;
}
.piece.wk, .promotion-piece.wk
{
background-image: url("https://drive.google.com/uc?export=view&id=1xVvn2QM8NfOsixSlOry--Y7cAK1uBFEa") !important;
}
/* Black Pieces */
.piece.bp, .promotion-piece.bp
{
background-image: url("https://drive.google.com/uc?export=view&id=1f8Tr7zAeaQMTweXZxcrkjhOkE7_QmXqe") !important;
}
.piece.bn, .promotion-piece.bn
{
background-image: url("https://drive.google.com/uc?export=view&id=1rlf0iIqBFI5gYWdVPRyvsmqNxi-M0PM1") !important;
}
.piece.bb, .promotion-piece.bb
{
background-image: url("https://drive.google.com/uc?export=view&id=11nk7eIlF2RxGVNUCJWl3ba1AGqou-NSt") !important;
}
.piece.br, .promotion-piece.br
{
background-image: url("https://drive.google.com/uc?export=view&id=1YIbYqvSATEZG52xvtMwl4nvPvCKfCE2e") !important;
}
.piece.bq, .promotion-piece.bq
{
background-image: url("https://drive.google.com/uc?export=view&id=1f2ifoI75SIKIjE60Jel8_k55lvUcgxhE") !important;
}
.piece.bk, .promotion-piece.bk
{
background-image: url("https://drive.google.com/uc?export=view&id=1GwNlSxJ_Av1JZFh2KdGBu-r4YJvjq2jd") !important;
}
}