Template:TableturfShape/style.css: Difference between revisions

From Inkipedia, the Splatoon wiki
(For a sandboxed template I'm working on. Sorry for creating this in the global Template namespace, but I think it needs to be there for TemplateStyles to work. Delete if this is not acceptable.)
 
(Added styles to center shapes when they appear in tables.)
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
div.tableturf_shape s {
div.tableturf_shape {
width: 10px;
display: grid;
height: 10px;
grid-template-columns: repeat(8, auto);
width: min-content;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
}
 
.wikitable div.tableturf_shape {
margin-left: auto;
margin-right: auto;
}
}


div.tableturf_shape .⬛ {
div.tableturf_shape s {
background-color: #000000;
width: 1em;
height: 1em;
box-shadow: inset 1px 1px 0 #666666;
background-color: #444444;
}
}


div.tableturf_shape .🟨 {
div.tableturf_shape .c1,
background-color: #ffff00;
div.tableturf_shape .c🟨 {
background-color: #eeff00;
box-shadow: inset 0 -0.1em 0.2em rgba(0, 102, 0, 0.5), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.9);
}
}


div.tableturf_shape .🟧 {
div.tableturf_shape .c2,
div.tableturf_shape .c🟧 {
background-color: #ff7f00;
background-color: #ff7f00;
box-shadow: inset 0 -0.1em 0.2em rgba(51, 0, 0, 0.5), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.6);
}
}

Latest revision as of 16:56, 14 September 2022

div.tableturf_shape {
	display: grid;
	grid-template-columns: repeat(8, auto);
	width: min-content;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

.wikitable div.tableturf_shape {
	margin-left: auto;
	margin-right: auto;
}

div.tableturf_shape s {
	width: 1em;
	height: 1em;
	box-shadow: inset 1px 1px 0 #666666;
	background-color: #444444;
}

div.tableturf_shape .c1,
div.tableturf_shape .c🟨 {
	background-color: #eeff00;
	box-shadow: inset 0 -0.1em 0.2em rgba(0, 102, 0, 0.5), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.9);
}

div.tableturf_shape .c2,
div.tableturf_shape .c🟧 {
	background-color: #ff7f00;
	box-shadow: inset 0 -0.1em 0.2em rgba(51, 0, 0, 0.5), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.6);
}