🟨INTL Multi Club Arena (ENG): chessboard by chessskins

/* ==UserStyle==
@name           🟨INTL Multi Club Arena (ENG): chessboard
@author         ChessSkins
@namespace      ChessSkins
@homepageURL    https://www.chess.com/blog/ChessSkins
@description    `Multi-color chessboard for chess.com.`
@version        1.0.4
@license        NO-REDISTRIBUTION
@preprocessor   stylus

@var    color    svgDarkSqColor  "Theme color"   #6298b9

@var    range    frameRadius  "🔵Corner radius" [1, 0, 34, 1, "px"]
@var    checkbox    frameRadiusInOut  "↪🔹all together <--> external" 1

@var    range    ajustBoardSize  "Board size" [0.92, 0.82, 0.92, 0.01, ""]

@var    select      setHighlight    "🟡Highlight" {
            "Custom*": "op1",
            "Default": "disabled",
        }
@var    color    hlColor  "↪Highlight color"   #ffff00
@var    range    highlightOpacity  "↪highlight opacity" [0.4, 0.3, 1, 0.1, ""]

@var    color    hlSqRed  "🔴Right click"   #eb6150
@var    color    hlSqOrange  "🟠CTRL+Click"   #fa0
@var    color    hlSqGreen  "🟢SHIFT+Click"   #acce59
@var    color    hlSqBlue  "🔵ALT+Click"   #52b0dc

@var    checkbox    enableArrowSettings   "🟩↘️Custom Arrows" 0
@var    range    arrowOpacity  "Arrows opacity" [0.9, 0.7, 1, 0.1, ""]
@var    color    arrowOrange  "🟠Right click"   #ff8000
@var    color    arrowRed  "🔴CTRL+Click"   #fa4d35
@var    color    arrowGreen  "🟢SHIFT+Click"   #abe439
@var    color    arrowBlue  "🔵ALT+Click"   #28b8fa
 
@var    checkbox    enableBoardFrame  "🟩🔳Outer border" 1
@var    checkbox    enableInnerBorder  "🟩Inner Border" 0
@var    checkbox    enableCenterLogo   "🟩Center logo" 1
@var    checkbox    enableCornerLogo   "🟩Secundary logo" 1
@var    checkbox    enableWallpaper   "🟩Background" 1
@var    checkbox    enableThinEvalBar  "🟩Thin Eval. bar" 1
@var    checkbox    enableOutsideCoords "🔠Outside Coord" 1

@var    range    outCoordFontSize  "↪Font size" [0.24, 0.1, 0.3, 0.01, "rem"]
@var select   outCoordFontWeight   "↪Font weight"    ["400*", "600", "700", "800"]

@var    select      outCoordFontCase    "↪Upper/Lower case"{
            "Uppercase": "uppercase",
            "Lowercase*": "lowercase",
        }

@var    select      useWallpaper    "🖼️Wallpaper" {
            "Theme Wallpaper*": "themeWallpaper",
            "Gradient (auto)": "gradient",
            "Gradient (user)": "gradientUsr",
            "Solid color": "backgroundColp",
            
        }

@var    color    backgroundColp  "custom color"   #302D2B
@var    range    globalColSaturation  "↪Saturation (auto)" [-30, -100, 200, 10, "%"]

@var    select      evalOpt    "Evaluation bar" {
            "Automatic color*": "auto",
            "Default": "disabled",
        }

==/UserStyle== */
@-moz-document domain("chess.com") {

    /*Default Settings*/
    enableGlobalColor=1;
    svgLightSqColor=#E7E2DA;
    svgBoardBlend=normal;
    svgDarkSqOpacity=1;
    svgLightSqOpacity=1;
    boardBGOpt=colorOnly;
    frameOpt=colorOnly;
    hlImgOpt=disabled;
    bgSize=cover;/*cover,contain,bPercentSize*/
    boardBGColor=svgDarkSqColor;
    bPercentSize=100%;
    frameSize=bgSize;/*cover,contain,fPercentSize,bgSize*/
    bgPosX=0;
    bgPosY=0;
    fPercentSize=100%;
    framePosX=50%;
    framePosY=50%;
    outCoordFontName="Segoe UI";
    outCoordColorOpt=svgLightSqColor;
    outCoordCol=#ffffffc4;
    coordsBlend=normal; 
    innerBorderColor=#c8b597;
    enableBoardShadowInset=0;
    enableBoardShadow=0;
    enableFrameShadowInset=0;
    frameShadowInsetBlur=2px;
    frameShadowInsetSpread=1px;
    frameShadowInsetColor=rgba(0, 0, 0, .4);
    enableFrameShadow=1;
    frameShadowBlur=8px;
    frameShadowSpread=4px;
    frameShadowColor=rgba(0, 0, 0, .5); 
    frameColor=#ad9161;
    innerBorderOpt=svgLightSqColor;
    enableCustomCoord=0;
    lCoordCol=#8d8d8d;
    dCoordCol=#acacac;
    centerLogoOpt=logoArena;
    centerLogoBlend=normal;
    centerLogoCol=#e5e1d66b;
    centerLogoSize=43%;
    centerLogoOpacity=0.12;
    centerLogoPosX=50%;
    centerLogoPosY=57%;
    cornerLogoOpt=logoTXT;
    cornerLogoBlend=multiply;
    cornerLogoSize=14%;
    cornerLogoOpacity=0.12;
    cornerLogoPosX=96.5%;
    cornerLogoPosY=54%;
    cornerLogoCol=#b9a98296;
    cornerLogo2Size=16px;
    cornerLogo2PosX=129%;
    cornerLogo2PosY=59%;
    cornerLogo2Blend=multiply;
    enableCornerLogo2=0;
    enableLightTheme=0;
    dEvalCol=#403D39;
    lEvalCol=#E0E0E0;    
    evalBarOpacity=0.95;
    setWallpaper=cover;
    //ajustBoardSize=ajustBoardSize * 1.002;

    /*Textures*/    

    /*selector with exceptions to avoid override analysis highlights*/
    notThisColors='[style*="179\, 52\, 48"]):not([style*="244\, 42\, 50"]):not([style*="#f42a32"]):not([style*="#b33430"]):not([style*="#9eba5a"]):not([style*="158\, 186\, 90"]):not([style*="#e6912c"]):not([style*="230\, 145\, 44"]):not([style*="#c93430"]):not([style*="201\, 52\, 48"]):not([style*="#1baca6"]):not([style*="#5c8bb0"]):not([style*="#96bc4b"]):not([style*="#96af8b"]):not([style*="#a88865"]):not([style*="#f0c15c"]):not([style*="#e58f2a"]):not([style*="#ca3431"]):not([style*="#dbac16"]):not([style*="27\, 172\, 166"]):not([style*="92\, 139\, 176"]):not([style*="150\, 188\, 75"]):not([style*="150\, 188\, 75"]):not([style*="150\, 175\, 139"]):not([style*="168\, 136\, 101"]):not([style*="240\, 193\, 92"]):not([style*="229\, 143\, 42"]):not([style*="202\, 52\, 49"]):not([style*="219\, 172\, 22"]):not([style*="172\, 206\, 89"]):not([style*="235\, 97\, 80"]):not([style*="82\, 176\, 220"]):not([style*="255\, 170\, 0"]):not([style*="#52b0dc"]):not([style*="#ffaa00"]):not([style*="#acce59"]):not([style*="#eb6150"]';

    if enableBoardShadow{
        boardShadow= 0px 0px 8px 4px rgba(0, 0, 0, .4);
    }
    if enableBoardShadowInset{
        boardShadowInset= inset 0px 1px 2px 1px rgba(0, 0, 0, .4);
    }
    if enableFrameShadow{
        frameShadow= 0px 0px frameShadowBlur frameShadowSpread frameShadowColor;
    }
    if enableFrameShadowInset{
        frameShadowInset= inset 0px -1px frameShadowInsetBlur frameShadowInsetSpread frameShadowInsetColor;
    }
    
}/*Themes below*/
@-moz-document domain("chess.com") {
    /*Themes*/
    myBoard="custom";
    themeWallpaper=gridWall;
    cornerLogoOpt=logoTXT;
    /*End themes*/

    /*GLOBAL COLOR - Need to be placed after themes*/
    if (enableGlobalColor==1 && myBoard=="custom") || global==1{ 
        outCoordColorOpt=svgLightSqColor=saturate(lighten(svgDarkSqColor, 78%), -40%);
        if enableInnerBorder=="1"{
            innerBorderOpt=boardBGColor=saturate(lighten(svgDarkSqColor, 20%), -10%);
        }
        frameColor=svgDarkSqColor;
        centerLogoBlend=normal;
        cornerLogoBlend=multiply;        
        cornerLogoCol=transparentify(saturate(lighten(svgDarkSqColor, 50%), -40%), #fff,0.3);
        globalColor=saturate(shade(svgDarkSqColor,60%), globalColSaturation);
    }
    
    if frameSize=="contain"{
        frameRepeat=repeat;
    }else{
        frameRepeat=no-repeat;
    }    
    if bgSize=="contain"{
        bgRepeat=repeat;
    }else{
        bgRepeat=no-repeat;
    }
    if !enableBoardShadowInset{
        boardShadowInset=0;
    }
    if !enableFrameShadow {
        frameShadow=0;
    }
    if !enableFrameShadowInset{
        frameShadowInset=0;
    }
}
@-moz-document domain("chess.com") {

    /*Board*/
   /*prevent user to get the board completely transparent with no visual references. It can be removed if you are an experienced user*/
    if svgLightSqOpacity<"0.2" && svgDarkSqOpacity<"0.2" && boardBGOpt=="transparent"{
        svgLightSqOpacity="0.2";
        svgDarkSqOpacity="0.2";
    }    
    solidBoardBGColor=transparentify(boardBGColor, #fff, 1);
    svgDarkSqColor=hsla(svgDarkSqColor);
    svgLightSqColor=hsla(svgLightSqColor);
    centerLogoCol=hsla(centerLogoCol);
    cornerLogoCol=hsla(cornerLogoCol);
    innerBorderOpt=hsla(innerBorderOpt);
    outCoordColorOpt=hsla(outCoordColorOpt);
    /*Wallpaper square colors*/
    wallLSqCol=transparentify(saturate(svgLightSqColor, -30%), #fff,0.1);
    wallDSqCol=transparentify(saturate(svgDarkSqColor, -30%), #fff,0.2);
    /*Center Logo*/
    shapeMaster=transparentify(saturate(lighten(svgDarkSqColor, 45%), -10%), #fff,0.5);
    shading=transparentify(saturate(lighten(svgDarkSqColor, 43%), -10%), #fff,0.43);
    backGrid=transparentify(saturate(lighten(svgDarkSqColor, 1%), -40%), #fff,0.05);
    gridWall="data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='1920' height='1080' shape-rendering='crispEdges' version='1.1' viewBox='0 0 1920 1080' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cg transform='matrix(1.1349 .65522 -.65522 1.1349 737.06 -1853.5)'%3e%3cpath id='darkSqr' d='m219.99 1506.2 80.013 138.59-4.1e-4 -144.78-69.277-4e-4 -10.735 6.1979zm80.012-6.1975 150-3e-4 -5e-5 -126.6-150 86.603 2.6e-4 39.997zm150-3e-4 3.5e-4 150 150-4e-4 -3.4e-4 -150-150 4e-4zm150-4e-4 150-3e-4 -3.5e-4 -150-150 4e-4 3.5e-4 150zm-3.5e-4 -150 5e-4 -63.202-109.47 63.202 109.47-1e-4zm150-4e-4 150 1e-3 9.4e-4 -150-149.66-6e-4 -0.33947 0.196-7.1e-4 149.8zm150-150 150-3e-4 -3e-4 -150-39.855 3e-4 -110.15 63.593 7.7e-4 86.407zm150-150 150-4e-4v-109.61l-150 86.603 3e-4 23.01zm150-4e-4 3e-4 150 150 1e-3 -4e-4 -150-150-1e-3zm150 1e-3 150-4e-4 -3e-4 -150-150 3.5e-4 3e-4 150zm-3e-4 -150-2e-4 -46.215-80.047 46.215 80.047 3.7e-4zm150-3.5e-4 61.804 2.6e-4 -61.805-107.05 4e-4 107.05zm3e-4 150 4e-4 150 150-3e-4 -2e-4 -147.24-1.5941-2.7609-148.41 8e-4zm150 150-9e-4 150 150-3e-4 1e-4 -37.433-64.991-112.57-85.008 3e-4zm150 150 3e-4 150 79.013 4e-4 21.901-12.645-79.302-137.36-21.612 5e-4zm3e-4 150-150 4e-4 9e-4 132.22 150-86.602 2e-4 -45.618zm-150 4e-4 -3e-4 -150-150 4e-4 3e-4 150 150-3e-4zm-150 3e-4 -150 4e-4 -4e-4 150 150 9e-4 -3e-4 -150zm3e-4 150 4e-4 68.822 119.2-68.822-119.2 2e-4zm-150-9e-4 -150 3e-4 3e-4 150 150-3e-4 -3e-4 -150zm3e-4 150 5e-4 5.426 9.3979-5.4259-9.3984-1e-4zm-150 3e-4 -150 4e-4 -9e-4 150 49.59-4e-4 100.41-57.972 1e-3 -92.029zm-150 150-150 4e-4 8.3e-4 115.23 150-86.602 3e-4 -...