mana/less/colors.less

259 lines
5.9 KiB
Plaintext
Raw Normal View History

// color indicator circles
.@{ms-prefix}-ci {
// base styles
border-radius: 100%;
box-shadow: inset 0 0 1px #fff; // to remove spill over
line-height: 0.95em; // shifts the border up a touch
width: 1em;
height: 1em;
// set the border color
&::before { color: @ms-border-black; }
// borders based on number of colors in identity
&-1::before { content: "\e98a"; }
&-2::before { content: "\e98b"; }
&-3::before { content: "\e98c"; }
&-4::before { content: "\e98d"; }
&-5::before { content: "\e98e"; }
// 1 color backgrounds
&-w { background: @ms-white; }
&-u { background: @ms-blue; }
&-b { background: @ms-black; }
&-r { background: @ms-red; }
&-g { background: @ms-green; }
// 2 color backgrounds
&-wu {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 225deg,
@ms-white 225deg
);
}
&-wb {
background: conic-gradient(
@ms-white 45deg,
@ms-black 45deg 225deg,
@ms-white 225deg
);
}
&-ub {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 225deg,
@ms-blue 225deg
);
}
&-ur {
background: conic-gradient(
@ms-blue 45deg,
@ms-red 45deg 225deg,
@ms-blue 225deg
);
}
&-bg {
background: conic-gradient(
@ms-black 45deg,
@ms-green 45deg 225deg,
@ms-black 225deg
);
}
&-br {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 225deg,
@ms-black 225deg
);
}
&-rw {
background: conic-gradient(
@ms-red 45deg,
@ms-white 45deg 225deg,
@ms-red 225deg
);
}
&-rg {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 225deg,
@ms-red 225deg
);
}
&-gu {
background: conic-gradient(
@ms-green 45deg,
@ms-blue 45deg 225deg,
@ms-green 225deg
);
}
&-gw {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 225deg,
@ms-green 225deg
);
}
// 3-color backgrounds
&-wug,
&-bant {
background: conic-gradient(
@ms-blue 60deg,
@ms-green 60deg 180deg,
@ms-white 180deg 300deg,
@ms-blue 300deg
);
}
&-ubw,
&-esper {
background: conic-gradient(
@ms-black 60deg,
@ms-white 60deg 180deg,
@ms-blue 180deg 300deg,
@ms-black 300deg
);
}
&-bru,
&-grixis {
background: conic-gradient(
@ms-red 60deg,
@ms-blue 60deg 180deg,
@ms-black 180deg 300deg,
@ms-red 300deg
);
}
&-rgb,
&-jund {
background: conic-gradient(
@ms-green 60deg,
@ms-black 60deg 180deg,
@ms-red 180deg 300deg,
@ms-green 300deg
);
}
&-gwr,
&-naya {
background: conic-gradient(
@ms-white 60deg,
@ms-red 60deg 180deg,
@ms-green 180deg 300deg,
@ms-white 300deg
);
}
&-wbg,
&-abzan,
&-junk {
background: conic-gradient(
@ms-black 60deg,
@ms-green 60deg 180deg,
@ms-white 180deg 300deg,
@ms-black 300deg
);
}
&-urw,
&-jeskai {
background: conic-gradient(
@ms-red 60deg,
@ms-white 60deg 180deg,
@ms-blue 180deg 300deg,
@ms-red 300deg
);
}
&-bgu,
&-sultai,
&-bug {
background: conic-gradient(
@ms-green 60deg,
@ms-blue 60deg 180deg,
@ms-black 180deg 300deg,
@ms-green 300deg
);
}
&-rwb,
&-mardu {
background: conic-gradient(
@ms-white 60deg,
@ms-black 60deg 180deg,
@ms-red 180deg 300deg,
@ms-white 300deg
);
}
&-gur,
&-temur,
&-rug {
background: conic-gradient(
@ms-blue 60deg,
@ms-red 60deg 180deg,
@ms-green 180deg 300deg,
@ms-blue 300deg
);
}
// 4 color backgrounds
&-ubrg,
&-glint {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 135deg,
@ms-red 135deg 225deg,
@ms-green 225deg 315deg,
@ms-blue 315deg
);
}
&-brgw,
&-dune {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 135deg,
@ms-green 135deg 225deg,
@ms-white 225deg 315deg,
@ms-black 315deg
);
}
&-rgwu,
&-ink {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 135deg,
@ms-white 135deg 225deg,
@ms-blue 225deg 315deg,
@ms-red 315deg
);
}
&-gwub,
&-witch {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 135deg,
@ms-blue 135deg 225deg,
@ms-black 225deg 315deg,
@ms-green 315deg
);
}
&-wubr,
&-yore {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 135deg,
@ms-black 135deg 225deg,
@ms-red 225deg 315deg,
@ms-white 315deg
);
}
// 5 color background
&-5 {
background: conic-gradient(
@ms-white 36deg,
@ms-blue 36deg 108deg,
@ms-black 108deg 180deg,
@ms-red 180deg 252deg,
@ms-green 252deg 324deg,
@ms-white 324deg
);
}
}