SuperCoach Bye Baby 2024 by alexmwalker

/* ==UserStyle==
@name           SuperCoach Bye Baby 2024
@namespace      USO Archive
@author         A W
@description    `A simple CSS layer to add colored markers to the club flags denoting that club's bye for the 2024 season. There's a small legend at the top explaining the color coding.`
@version        20210607.4.53
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
@-moz-document url-prefix("https://supercoach.heraldsun.com.au/afl/") {
	/* Create the colored labels in the top left */

		:root{
		--round2: rgb(0, 172, 234);
        --round3: #ff2a6f;    
        --round5: rgba(254,82,241,1);  
        --round6: #22a001; 
            
        --round12: rgb(14, 55, 242);
		--round13: rgb(196, 0, 79);
        --round14: rgb(240, 158, 7);
		--round15: rgb(189, 1, 255);
		 
	}	

	.vm-FieldViewComponent-header,
	.vm-FieldViewComponent-activeHeader {
		position: relative;
	}

	/* Attach LEGEND */
	.vm-FieldViewComponent-header:before,
	.vm-FieldViewComponent-header:after {
		display: block;
		position: absolute;
		color: #fff;
		font-size: .7rem;
		line-height: 1rem;
		text-align: center;
		width: 1rem;
                padding:0 .1rem;
		height: 9rem;
		top: 3rem;
		left: 2rem;
	}

	.vm-FieldViewComponent-header:after {
		left: 4rem;
        content: '02 03 05 06 . 12 13 14 15';
		background: linear-gradient(180deg, 
            var(--round2) 11%, var(--round3) 11%,
            var(--round3) 22%, var(--round5) 22%, 
            var(--round5) 33%, var(--round6) 33%,
            var(--round6) 44%, rgba(0,0,0,0) 44%, 
            rgba(0,0,0,0) 55%, var(--round12) 55%, 
            var(--round12) 66%, var(--round13) 66%, 
            var(--round13) 77%, var(--round14) 77%, 
            var(--round14) 88%, var(--round15) 88%, 
            var(--round15) 100%);
	}

    

	.vm-FieldCellComponent-flag,
	.vm-TeamFlagComponent,
	.ng-tns-c202-94 {
		overflow: visible;
	}
    

	/*  late bye
	12: Brisbane, GWS GIANTS, North Melbourne, Sydney   - blue
	13: Fremantle,  Port Adelaide - green
	14: Carlton,  Essendon, Geelong, Gold Coast,  Melbourne, West Coast - pink
	15: Adelaide, Collingwood, GWS GIANTS, Hawthorn,  Richmond, St Kilda, Western Bulldogs - orange 
    
    Adelaide Crows,0,15
    Brisbane Lions,2,12
    Carlton,2,14
    Collingwood,5,15
    Essendon,0,14
    Fremantle,0,13
    Geelong Cats,0,14
    Gold Coast Suns,3,14
    GWS Giants,3,12
    Hawthorn,0,15
    Melbourne,6,14
    North Melbourne,0,12
    Port Adelaide,0,13
    Richmond,6,15
    St Kilda,0,15
    Sydney Swans,5,12
    Western Bulldogs,0,15
    West Coast Eagles,0,14
*/
    

    .vm-TeamFlagComponent{
       outline: 1px #ccc solid;
        display:flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        
    }
    .vm-TeamFlagComponent svg{
        position: absolute;
    }
    /* shared */
    .vm-TeamFlagComponent:before,
    .vm-TeamFlagComponent:after{
        position:relative;
        width: 12px;
        height: 12px;
 		left: -5px;
 		top: auto;
        
        line-height:10px;
        text-align: center;
		font-size: 7px;
        
        z-index: 999;
        box-shadow: none;
        border-radius: 50%;
		border: 1px #fff solid;
        color: #fff;
    }

	
      /* :before is the early bye,  */
    
    .vm-TeamFlagComponent:before{
        top: auto;
    }


     
    /* rnd 6 teams */
    .vm-TeamFlagComponent:before {
		background: var(--round6);
		content: "6";
        display: none;
        color:#000;
		/*box-shadow: -10px 0px 0px 0px rgba(255, 0, 255, 1);*/
	}

    /* rnd 2 teams */
    [aria-label="Brisbane"]:before,
    [aria-label="Carlton"]:before{
        background: var(--round2);
        color: #fff;
        content: "2";
        display: block;
    }
     /* rnd 3 teams */
    [aria-label="GWS Giants"]:before,
    [aria-label="Gold Coast"]:before{
        background: var(--round3);
        color: #fff;
        content: "3";
        display: block;
    }
     /* rnd 5 teams */
    [aria-label="Sydney"]:before,
    [aria-label="Collingwood"]:before{
        background: var(--round5);
        color: #fff;
        content: "5";
        display: block;
    }
     [aria-label="Richmond"]:before,
    [aria-label="Melbourne"]:before{
        background: var(--round6);
        color: #fff;
        content: "6";
        display: block;
    }
    
    
    .vm-TeamFlagComponent:after {
		/* :after the later bye */
		display: block;
		content: "15";
        color: #fff;
	}
    
    .vm-TeamFlagComponent:after {
        background: var(--round15);
        color: #fff;
		/* The default orange - what rnd 15 teams get */
	}
    
	/* rnd 12 teams */

	[aria-label="Brisbane"]:after,
	[aria-label="GWS Giants"]:after,
	[aria-label="North Melbourne"]:after,
	[aria-label="Sydney"]:after {
		background: var(--round12);
        color: #fff;
        content: "12";
		/* blue */
	}

	/* rnd 13 teams */
	[aria-label="Fremantle"]:after,
	[aria-label="Port Adelaide"]:after {
		background: var(--round13);
        color: #fff;
        content: "13";
		/* green */
	}

	/* rnd 14 teams */
	[aria-label="Carlton"]:after,
	[aria-label="Essendon"]:after,
	[aria-label="Geelong"]:after,
	[aria-label="Gold Coast"]:after,
	[aria-label="Melbourne"]:after,
	[aria-label="West Coast"]:after {
		background:var(--round14);
        content: "14";
        color: #fff;
		/* magenta */
	}
}