Chess package v3.5 by twyndyllyngs-flaris

Details

Authortwyndyllyngs-flaris

LicenseNo License

Categoryhttps://www.chess.com/

Created5 days, 5 hours ago

Updated5 days, 5 hours ago

Size8.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Please read the Notes

Notes

IMPORTANT *
- Use the default (medium) for move animation. Userstyles does not work when on Natural and
  Arcade mode
Not so important *

Theme and Board Settings (to make use of most changes):
- Highlight Moves: ON
- Coordinates: Inside Board
- Show Legal Moves: ON
```
For 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           www.chess.com/game/122967231090
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/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;
}

body {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/body-bg.jpg) !important;
  background-color: #a8a8a8;
  background-blend-mode: multiply;
}

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) * 0.0016) calc(var(--boardWidth) * 0.0058) calc(var(--boardWidth) * 0.001) rgba(0, 0, 0, 0.45),
    calc(var(--boardWidth) * -0.0058) calc(var(--boardWidth) * -0.0058) 1px 1px rgba(0, 0, 0, 0.25) inset,
    calc(var(--boardWidth) * 0.0048) calc(var(--boardWidth) * 0.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: 0.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: 0.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: 0.6 !important;
  display: block;
  -webkit-animation: 0.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: 0.6 !important;
  display: block;
  -webkit-animation: 0.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: 0.6 !important;
  display: block;
  -webkit-animation: 0.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: 0.6 !important;
  display: block;
  -webkit-animation: 0.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: 0.2s captureHint forwards, 0.4s 0.15s captureHintBC forwards;
}

@-webkit-keyframes captureHintBC {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.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, 0.2);
  }
}

.hint {
  background-color: rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0px 0px calc(var(--boardWidth) * 0.0232) white);
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-animation: fadeInFromNone 0.4s ease-out;
}

@-webkit-keyframes fadeInFromNone {
  0% {
    opacity: 0.1;
    border-radius: 43%;
  }
  100% {
    opacity: 1;
    border-radius: 50%;
  }
}

.piece.dragging {
  cursor: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/grabbing.png), 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: 0.2;
  background: white;
  border-radius: 50%;
  left: -25%;
  top: -25%;
  -webkit-animation: pieceScale 0.25s ease-out alternate;
  filter: drop-shadow();
}

.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: 0.175;
  background: black;
  border-radius: 50%;
  left: -25%;
  top: -25%;
  -webkit-animation: pieceScale 0.25s ease-out alternate;
}

@-webkit-keyframes pieceScale {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes delay-animation {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.2;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.piece {
  cursor: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/grab.png), auto !important;
}

#board-single,
.fade-in-overlay {
  cursor: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/grab.png), auto !important;
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/board.png) !important;
  border-radius: 0.8%;
  box-shadow: rgba(0, 0, 0, 0.28) 0px var(--three) var(--twoFive) var(--ten),
    rgba(0, 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, 0.1) 0 0 0 1000000px inset;
}

.coordinate-light {
  font-size: 0.155em;
  text-shadow: 0px -1px 0px rgba(228, 219, 178, 0.7);
  fill: #706b66 !important;
  font-family: Tahoma, auto;
}

.coordinate-dark {
  font-size: 0.155em;
  text-shadow: 0px -1px 0px rgba(028, 019, 178, 0.6);
  fill: #c7bdaa !important;
  font-family: Tahoma, auto;
}

.piece.wp,
.promotion-piece.wp {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wps.png) !important;
}

.piece.wn,
.promotion-piece.wn {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wns.png) !important;
}

.piece.wb,
.promotion-piece.wb {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wbs.png) !important;
}

.piece.wr,
.promotion-piece.wr {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wrs.png) !important;
}

.piece.wq,
.promotion-piece.wq {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wqs.png) !important;
}

.piece.wk,
.promotion-piece.wk {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/wks.png) !important;
}

.piece.bp,
.promotion-piece.bp {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/bps.png) !important;
}

.piece.bn,
.promotion-piece.bn {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/bns.png) !important;
}

.piece.bb,
.promotion-piece.bb {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/bbs.png) !important;
}

.piece.br,
.promotion-piece.br {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/brs.png) !important;
}

.piece.bq,
.promotion-piece.bq {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/bqs.png) !important;
}

.piece.bk,
.promotion-piece.bk {
  background-image: url(https://cdn.jsdelivr.net/gh/twyndyllyngs-flaris/chess.com-@main/bks.png) !important;
}
}

Reviews

No reviews yet.