flair.less

@import (reference) "style";

//*************
// Link flair *
//*************

.thing,
.flairselector {
	.linkflairlabel {
		vertical-align: sub;
		margin-bottom: 1px;
		
		background: none;
		border: none;
		
		font-size: 14px;
		text-transform: uppercase;
	}
	
	// Specific types
	
	//TODO: use filter: blur(3px) once Reddit supports the filter attribute
	// https://github.com/reddit/reddit/pull/1058
	&.linkflair-spoiler {
		.thumbnail {
			height: 52px;
			
			background-image: url(%%spoiler-thumbnail-link%%) !important;
			&.self {
				background-image: url(%%spoiler-thumbnail%%) !important;
			}
			background-position: center;
			background-repeat: no-repeat;
			
			img {
				display: none;
			}
		}
		
		.linkflairlabel {
			color: @color-red;
		}
	}
	
	&.linkflair-other {
		.linkflairlabel {
			color: @color-light-gray;
		}
	}
}

//*************
// User flair *
//*************

@flair-width: 22px;
@flair-height: 20px;

@team-flair-width: 24px;
@team-flair-height: 24px;

@riot-flair-width: 30px;

@best-of-flair-width: 77px;
@best-of-flair-height: 14px;

// General flair

.flair {
	min-width: @flair-width;
	height: @flair-height;
	line-height: @flair-height - 1px;
	vertical-align: middle;
	
	padding: 0;
	margin: 0 2px 0 0;
	
	background-color: transparent !important;
	border: none;
	border-radius: 2px;
	
	font-size: 0px !important;
	
	overflow: hidden;
	
	&::before {
		content: "";
		display: inline-block;
		width: @flair-width;
		height: @flair-height;
		
		background-image: url(%%champion-flair%%);
	}
	
	&:not([title=""]):hover {
		padding: 0 4px;
		
		background-color: darken(@color-white, 2%) !important;
		
		font-size: 11px !important;
		
		&::before {
			display: none;
		}
	}
}

.flair-team {
	min-width: @team-flair-width;
	height: @team-flair-height;
	line-height: @team-flair-height - 1px;
	
	&::before {
		width: @team-flair-width;
		height: @team-flair-height;
		
		background-image: url(%%team-flair%%);
	}
}

.flair-misc {
	min-width: @team-flair-width;
	height: @team-flair-height;
	line-height: @team-flair-height - 1px;
	
	&::before {
		width: @team-flair-width;
		height: @team-flair-height;
		
		background-image: url(%%misc-flair%%);
	}
}

// Specific flair

.flair-riot {
	&::before {
		width: @riot-flair-width;
		
		background-image: url(%%riot-flair%%);
	}
}

.flair-urf {
	min-width: @flair-width;
	height: @flair-height;
	line-height: @flair-height - 1px;
	
	&::before {
		width: @flair-width;
		height: @flair-height;
		
		background-position: 0 0;
	}
}

.flair-muffin {
	&::before {
		background-position: -145px 0;
	}
}
.flair-muffin {
	&::before {
		background-position: -195px 0;
	}
}

.flair-dominion {
	&::before {
		background-position: -170px 0;
	}
}

.flair-triggs {
	min-width: @team-flair-width * 2;
	
	&::before {
		width: @team-flair-width * 2;
		
		background-position: -96px 0;
	}
}

.flair-team-soraka {
	@w: 48px;
	@h: 24px;
	min-width: @w;
	height: @h;
	line-height: @h - 1px;
	
	&::before {
		width: @w;
		height: @h;
		
		background-image: url(%%team-soraka-flair%%);
	}
}

.flair-verified {
	@w: 16px;
	@h: 16px;
	min-width: @w;
	height: @h;
	line-height: @h - 1px;
	
	&::before {
		width: @w;
		height: @h;
		
		background-image: url(%%verified-flair%%);
	}
}

// Best-of awards

.flair-best-of {
	min-width: @best-of-flair-width;
	height: @best-of-flair-height;
	line-height: @best-of-flair-height - 1px;
	
	&::before {
		width: @best-of-flair-width;
		height: @best-of-flair-height;
		
		background-image: url(%%best-of-flair%%);
	}
}

.flair-best-of-2014 {
	&::before {
		background-position: 0 0;
	}
}

.flair-best-of-2015 {
	&::before {
		background-position: 0 -@best-of-flair-height;
	}
}

.flair-best-of-2016 {
	&::before {
		background-position: 0 -@best-of-flair-height*3;
	}
}

.flair-best-of-2016-moobeat {
	&::before {
		background-position: 0 -@best-of-flair-height*2;
	}
}

.flair-best-of-2016-riot {
	&::before {
		background-position: 0 -@best-of-flair-height*4;
	}
}

// Team flair

.make-team-flair(@name, @x, @y, @slots: 1) {
	@selector: ~".flair-@{name}";
	@{selector} {
		& when (@slots = 1) {
			&::before {
				background-position: -(@x * @team-flair-width) -(@y * @team-flair-height);
			}
		}
		& when (@slots > 1) {
			min-width: @team-flair-width * @slots;
			
			&::before {
				width: @team-flair-width * @slots;
				background-position: -(@x * @team-flair-width) -(@y * @team-flair-height);
			}
		}
	}
}

// NA LCS
.make-team-flair("00",	1, 0);	// TSM
.make-team-flair("01",	2, 0);	// CLG
.make-team-flair("nvy",	3, 0);	// Envy
.make-team-flair("03",	4, 0);	// Team Liquid
.make-team-flair("fly",	5, 0, 2);	// FlyQuest
.make-team-flair("imm",	7, 0);	// Immortals
.make-team-flair("07",	8, 0);	// Cloud 9
.make-team-flair("ef",	9, 0, 2);	// Echo Fox
.make-team-flair("phx",	11, 0);	// Pheonix1
.make-team-flair("dig",	11, 1);	// Dignitas

// EU LCS
.make-team-flair("g2",	0, 1);	// G2 Esports
.make-team-flair("11",	1, 1);	// Fnatic
.make-team-flair("vit",	2, 1);	// Team Vitality
.make-team-flair("13",	3, 1);	// Giants
.make-team-flair("msf",	4, 1);	// Misfits
.make-team-flair("15",	5, 1);	// Origen Gaming
.make-team-flair("spl",	6, 1);	// Splyce
.make-team-flair("17",	7, 1);	// ROCCAT
.make-team-flair("18",	8, 1);	// H2K Gaming
.make-team-flair("19",	9, 1);	// Unicorns of Love

// LMS
.make-team-flair("20",	0, 2);	// Hong Kong eSports
.make-team-flair("fbl",	1, 2);	// Fireball
.make-team-flair("22",	2, 2);	// Machi17
.make-team-flair("23",	3, 2);	// Flash Wolves
.make-team-flair("jtm",	4, 2);	// JTeam
.make-team-flair("hwv",	5, 2);	// HeatWave - namechange to eXtreme Gamers
.make-team-flair("26",	6, 2);	// AHQ eSports Club
.make-team-flair("ws",	7, 2, 2);	// Wayi Spider

// LPL
.make-team-flair("30",	0, 3, 2);	// LGD Gaming
.make-team-flair("32",	2, 3);	// Edward Gaming
.make-team-flair("33",	3, 3);	// OMG
.make-team-flair("34",	4, 3);	// Royal Never Give Up
.make-team-flair("35",	5, 3);	// Invictus Gaming
.make-team-flair("37",	6, 3);	// Team WE
.make-team-flair("40",	7, 3);	// Vici Gaming
.make-team-flair("qg",	8, 3);	// Qiao Gu Reapers
.make-team-flair("gmt",	9, 3);	// Game Talents
.make-team-flair("43",	10, 3);	// Snake eSports
.make-team-flair("may",	11, 3);	// I MAY
.make-team-flair("nwb",	11, 4);	// Newbee

// LCK
.make-team-flair("70",	0, 4);	// Jin Air Green Wings
.make-team-flair("mvp",	1, 4);	// MVP
.make-team-flair("lzg",	2, 4);	// Longzhu Gaming
.make-team-flair("73",	3, 4);	// Samsung Galaxy
.make-team-flair("74",	4, 4);	// SKtelecom T1
.make-team-flair("75",	5, 4);	// ROX Tigers
.make-team-flair("bbq",	6, 4);	// bbq OLIVERS
.make-team-flair("77",	7, 4, 2);	// KT Rolster
.make-team-flair("kdm",	9, 4);	// Kongdoo Monster
.make-team-flair("aff",	10, 4);	// Afreeca Freecs

// GPL
.make-team-flair("50", 0, 5);	// Bangkok Titans
.make-team-flair("51", 1, 5);	// Saigon Fantastic Five
.make-team-flair("52", 2, 5);	// Team Infinite
.make-team-flair("53", 3, 5);	// Mineski
.make-team-flair("54", 4, 5);	// Diamond
.make-team-flair("55", 5, 5);	// Fate
.make-team-flair("56", 6, 5);	// WarGods
.make-team-flair("57", 7, 5);	// Ultimate
.make-team-flair("60", 0, 6);	// Hunters
.make-team-flair("61", 1, 6);	// Full Louis
.make-team-flair("62", 2, 6);	// Saigon Jokers
.make-team-flair("63", 3, 6);	// Jakarta Juggernauts
.make-team-flair("64", 4, 6);	// Insidious Gaming Legends
.make-team-flair("65", 5, 6);	// 269
.make-team-flair("66", 6, 6);	// KTHXBAI
.make-team-flair("67", 7, 6);	// Fat Rabbit

// CBLoL
.make-team-flair("red",	0, 7);	// Red Candis
.make-team-flair("81",	1, 7);	// Keyd Stars
.make-team-flair("82",	2, 7);	// INTZ
.make-team-flair("83",	3, 7);	// CNB
.make-team-flair("rbrv",	4, 7);	// Remo Brave eSports
.make-team-flair("85",	5, 7);	// KABUM!
.make-team-flair("87",	6, 7, 2);	// paiN
.make-team-flair("opk",	8, 7, 2);	// Operation Kino

// OPL
.make-team-flair("ae", 0, 8);	// Abyss Esports
.make-team-flair("O1", 1, 8);	// Avant Garde
.make-team-flair("O2", 2, 8);	// Chiefs eSports Club
.make-team-flair("O3", 3, 8);	// Dire Wolves
.make-team-flair("tm", 4, 8);	// Tainted Minds
.make-team-flair("O5", 5, 8);	// Legacy eSports
.make-team-flair("O6", 6, 8);	// Sin Gaming
.make-team-flair("x5", 7, 8, 2);	// Exile5

.make-team-flair("nox", 11, 8);	// Albus Nox