MediaWiki:Common.css - Revision history

Marr0w: Replaced content with "/* CSS placed here will be applied to all skins */"

2016-01-02T05:52:13Z

Replaced content with "‎CSS placed here will be applied to all skins: "

Marr0w at 05:51, 2 January 2016

2016-01-02T05:51:36Z

Marr0w: Replaced content with "/* CSS placed here will be applied to all skins */"

2016-01-02T05:50:08Z

Replaced content with "‎CSS placed here will be applied to all skins: "

Marr0w at 05:48, 2 January 2016

2016-01-02T05:48:12Z

Marr0w at 05:46, 2 January 2016

2016-01-02T05:46:55Z

Marr0w: Replaced content with "/* CSS placed here will be applied to all skins */"

2016-01-02T05:42:17Z

Replaced content with "‎CSS placed here will be applied to all skins: "

Show changes

Marr0w at 05:37, 2 January 2016

2016-01-02T05:37:13Z

Show changes

Marr0w at 05:33, 2 January 2016

2016-01-02T05:33:29Z

Show changes

Marr0w at 05:23, 2 January 2016

2016-01-02T05:23:57Z

Marr0w at 00:59, 25 October 2015

2015-10-25T00:59:38Z

← Older revision		Revision as of 05:52, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
−
−	~~@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {~~
−
−	~~color: $textColor;~~
−	~~position: relative;~~
−	~~$steps: $intensity;~~
−
−	~~// Ensure the @keyframes are generated at the root level~~
−	~~@at-root {~~
−	~~// We need two different ones~~
−	~~@for $i from 1 through 2 {~~
−	~~@keyframes #{$name}-anim-#{$i} {~~
−	~~@for $i from 0 through $steps {~~
−	~~#{percentage($i*(1/$steps))} {~~
−	~~clip: rect(~~
−	~~random($height)+px,~~
−	~~$width+px,~~
−	~~random($height)+px,~~
−	0
−	);
−	}
−	}
−	}
−	}
−	}
−	~~&:before,~~
−	~~&:after {~~
−	~~content: attr(data-text);~~
−	~~position: absolute;~~
−	~~top: 0;~~
−	~~left: 0;~~
−	~~width: 100%;~~
−	~~background: $background;~~
−	~~clip: rect(0, 0, 0, 0);~~
−	}
−	~~&:after {~~
−	~~left: 2px;~~
−	~~text-shadow: -1px 0 $highlightColor1;~~
−	~~animation: #{$name}-anim-1 2s infinite linear alternate-reverse;~~
−	}
−	~~&:before {~~
−	~~left: -2px;~~
−	~~text-shadow: 2px 0 $highlightColor2;~~
−	~~animation: #{$name}-anim-2 3s infinite linear alternate-reverse;~~
−	}
−
−	}
−
−
−	~~@mixin imgGlitch($name, $intensity, $width, $height, $top, $left) {~~
−
−	~~$steps: $intensity;~~
−
−	~~// Ensure the @keyframes are generated at the root level~~
−	~~@at-root {~~
−	~~// We need two different ones~~
−	~~@for $i from 1 through 2 {~~
−	~~@keyframes #{$name}-anim-#{$i} {~~
−	~~@for $i from 0 through $steps {~~
−	~~#{percentage($i*(1/$steps))} {~~
−	~~clip: rect(~~
−	~~random($height)+px,~~
−	~~$width+px,~~
−	~~random($height)+px,~~
−	0
−	);
−	}
−	}
−	}
−	}
−	}
−
−	~~> img {~~
−	~~position: absolute;~~
−	~~top: $top+px;~~
−	~~left: $left+px;~~
−	}
−	~~> img:nth-child(2),~~
−	~~> img:nth-child(3){~~
−	~~clip: rect(0, 0, 0, 0);~~
−	}
−	~~> img:nth-child(2) {~~
−	~~left: ($left + 2) + px;~~
−	~~animation: #{$name}-anim-1 2s infinite linear alternate-reverse;~~
−	}
−	~~> img:nth-child(3) {~~
−	~~left: ($left - 2) + px;~~
−	~~animation: #{$name}-anim-2 3s infinite linear alternate-reverse;~~
−	}
−	}
−
−
−
−	~~@mixin svgGlitch($name, $intensity, $fillColor, $background, $fillHighlight1, $fillHighlight2, $width, $height, $top, $left) {~~
−
−	~~$steps: $intensity;~~
−
−	~~// Ensure the @keyframes are generated at the root level~~
−	~~@at-root {~~
−	~~// We need two different ones~~
−	~~@for $i from 1 through 2 {~~
−	~~@keyframes #{$name}-anim-#{$i} {~~
−	~~@for $i from 0 through $steps {~~
−	~~#{percentage($i*(1/$steps))} {~~
−	~~clip: rect(~~
−	~~(random($height)-20)+px,~~
−	~~$width+px,~~
−	~~(random($height)+20)+px,~~
−	0
−	);
−	}
−	}
−	}
−	}
−	}
−
−	~~svg {~~
−	~~position: absolute;~~
−	~~top: $top+px;~~
−	~~left: $left+px;~~
−	~~fill: $fillColor;~~
−	~~background: $background;~~
−	~~width: $width+px;~~
−	~~height: $height+px;~~
−	}
−	~~svg:nth-child(2),~~
−	~~svg:nth-child(3) {~~
−	~~clip: rect(0, 0, 0, 0);~~
−	}
−	~~svg:nth-child(2) {~~
−	~~fill: $fillHighlight1;~~
−	~~left: ($left - 2) + px;~~
−	~~animation: #{$name}-anim-1 2s infinite linear alternate-reverse;~~
−	}
−	~~svg:nth-child(3) {~~
−	~~fill: $fillHighlight2;~~
−	~~left: ($left + 2) + px;~~
−	~~animation: #{$name}-anim-2 3s infinite linear alternate-reverse;~~
−	}
−	}

← Older revision		Revision as of 05:51, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
		+
		+	@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
		+
		+	color: $textColor;
		+	position: relative;
		+	$steps: $intensity;
		+
		+	// Ensure the @keyframes are generated at the root level
		+	@at-root {
		+	// We need two different ones
		+	@for $i from 1 through 2 {
		+	@keyframes #{$name}-anim-#{$i} {
		+	@for $i from 0 through $steps {
		+	#{percentage($i*(1/$steps))} {
		+	clip: rect(
		+	random($height)+px,
		+	$width+px,
		+	random($height)+px,
		+	0
		+	);
		+	}
		+	}
		+	}
		+	}
		+	}
		+	&:before,
		+	&:after {
		+	content: attr(data-text);
		+	position: absolute;
		+	top: 0;
		+	left: 0;
		+	width: 100%;
		+	background: $background;
		+	clip: rect(0, 0, 0, 0);
		+	}
		+	&:after {
		+	left: 2px;
		+	text-shadow: -1px 0 $highlightColor1;
		+	animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
		+	}
		+	&:before {
		+	left: -2px;
		+	text-shadow: 2px 0 $highlightColor2;
		+	animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
		+	}
		+
		+	}
		+
		+
		+	@mixin imgGlitch($name, $intensity, $width, $height, $top, $left) {
		+
		+	$steps: $intensity;
		+
		+	// Ensure the @keyframes are generated at the root level
		+	@at-root {
		+	// We need two different ones
		+	@for $i from 1 through 2 {
		+	@keyframes #{$name}-anim-#{$i} {
		+	@for $i from 0 through $steps {
		+	#{percentage($i*(1/$steps))} {
		+	clip: rect(
		+	random($height)+px,
		+	$width+px,
		+	random($height)+px,
		+	0
		+	);
		+	}
		+	}
		+	}
		+	}
		+	}
		+
		+	> img {
		+	position: absolute;
		+	top: $top+px;
		+	left: $left+px;
		+	}
		+	> img:nth-child(2),
		+	> img:nth-child(3){
		+	clip: rect(0, 0, 0, 0);
		+	}
		+	> img:nth-child(2) {
		+	left: ($left + 2) + px;
		+	animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
		+	}
		+	> img:nth-child(3) {
		+	left: ($left - 2) + px;
		+	animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
		+	}
		+	}
		+
		+
		+
		+	@mixin svgGlitch($name, $intensity, $fillColor, $background, $fillHighlight1, $fillHighlight2, $width, $height, $top, $left) {
		+
		+	$steps: $intensity;
		+
		+	// Ensure the @keyframes are generated at the root level
		+	@at-root {
		+	// We need two different ones
		+	@for $i from 1 through 2 {
		+	@keyframes #{$name}-anim-#{$i} {
		+	@for $i from 0 through $steps {
		+	#{percentage($i*(1/$steps))} {
		+	clip: rect(
		+	(random($height)-20)+px,
		+	$width+px,
		+	(random($height)+20)+px,
		+	0
		+	);
		+	}
		+	}
		+	}
		+	}
		+	}
		+
		+	svg {
		+	position: absolute;
		+	top: $top+px;
		+	left: $left+px;
		+	fill: $fillColor;
		+	background: $background;
		+	width: $width+px;
		+	height: $height+px;
		+	}
		+	svg:nth-child(2),
		+	svg:nth-child(3) {
		+	clip: rect(0, 0, 0, 0);
		+	}
		+	svg:nth-child(2) {
		+	fill: $fillHighlight1;
		+	left: ($left - 2) + px;
		+	animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
		+	}
		+	svg:nth-child(3) {
		+	fill: $fillHighlight2;
		+	left: ($left + 2) + px;
		+	animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
		+	}
		+	}

← Older revision		Revision as of 05:50, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
−
−	~~@import "compass/css3";~~
−
−	~~.glitch{~~
−	~~color:white;~~
−	~~font-size:100px;~~
−	~~position:relative;~~
−	~~width:400px;~~
−	~~margin:0 auto;~~
−	}
−	~~@keyframes noise-anim{~~
−	~~$steps:20;~~
−	~~@for $i from 0 through $steps{~~
−	~~#{percentage($i*(1/$steps))}{~~
−	~~clip:rect(random(100)+px,9999px,random(100)+px,0);~~
−	}
−	}
−	}
−	~~.glitch:after{~~
−	~~content:attr(data-text);~~
−	~~position:absolute;~~
−	~~left:2px;~~
−	~~text-shadow:-1px 0 red;~~
−	~~top:0;~~
−	~~color:white;~~
−	~~background:black;~~
−	~~overflow:hidden;~~
−	~~clip:rect(0,900px,0,0);~~
−	~~animation:noise-anim 2s infinite linear alternate-reverse;~~
−	}
−
−	~~@keyframes noise-anim-2{~~
−	~~$steps:20;~~
−	~~@for $i from 0 through $steps{~~
−	~~#{percentage($i*(1/$steps))}{~~
−	~~clip:rect(random(100)+px,9999px,random(100)+px,0);~~
−	}
−	}
−	}
−	~~.glitch:before{~~
−	~~content:attr(data-text);~~
−	~~position:absolute;~~
−	~~left:-2px;~~
−	~~text-shadow:1px 0 blue;~~
−	~~top:0;~~
−	~~color:white;~~
−	~~background:black;~~
−	~~overflow:hidden;~~
−	~~clip:rect(0,900px,0,0);~~
−	~~animation:noise-anim-2 3s infinite linear alternate-reverse;~~
−	}

← Older revision		Revision as of 05:48, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
		+
		+	@import "compass/css3";

	.glitch{		.glitch{

← Older revision		Revision as of 05:46, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
		+
		+	.glitch{
		+	color:white;
		+	font-size:100px;
		+	position:relative;
		+	width:400px;
		+	margin:0 auto;
		+	}
		+	@keyframes noise-anim{
		+	$steps:20;
		+	@for $i from 0 through $steps{
		+	#{percentage($i*(1/$steps))}{
		+	clip:rect(random(100)+px,9999px,random(100)+px,0);
		+	}
		+	}
		+	}
		+	.glitch:after{
		+	content:attr(data-text);
		+	position:absolute;
		+	left:2px;
		+	text-shadow:-1px 0 red;
		+	top:0;
		+	color:white;
		+	background:black;
		+	overflow:hidden;
		+	clip:rect(0,900px,0,0);
		+	animation:noise-anim 2s infinite linear alternate-reverse;
		+	}
		+
		+	@keyframes noise-anim-2{
		+	$steps:20;
		+	@for $i from 0 through $steps{
		+	#{percentage($i*(1/$steps))}{
		+	clip:rect(random(100)+px,9999px,random(100)+px,0);
		+	}
		+	}
		+	}
		+	.glitch:before{
		+	content:attr(data-text);
		+	position:absolute;
		+	left:-2px;
		+	text-shadow:1px 0 blue;
		+	top:0;
		+	color:white;
		+	background:black;
		+	overflow:hidden;
		+	clip:rect(0,900px,0,0);
		+	animation:noise-anim-2 3s infinite linear alternate-reverse;
		+	}

← Older revision		Revision as of 05:23, 2 January 2016
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
		+
		+	@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
		+
		+	color: $textColor;
		+	position: relative;
		+	$steps: $intensity;
		+
		+	// Ensure the @keyframes are generated at the root level
		+	@at-root {
		+	// We need two different ones
		+	@for $i from 1 through 2 {
		+	@keyframes #{$name}-anim-#{$i} {
		+	@for $i from 0 through $steps {
		+	#{percentage($i*(1/$steps))} {
		+	clip: rect(
		+	random($height)+px,
		+	$width+px,
		+	random($height)+px,
		+	0
		+	);
		+	}
		+	}
		+	}
		+	}
		+	}
		+	&:before,
		+	&:after {
		+	content: attr(data-text);
		+	position: absolute;
		+	top: 0;
		+	left: 0;
		+	width: 100%;
		+	background: $background;
		+	clip: rect(0, 0, 0, 0);
		+	}
		+	&:after {
		+	left: 2px;
		+	text-shadow: -1px 0 $highlightColor1;
		+	animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
		+	}
		+	&:before {
		+	left: -2px;
		+	text-shadow: 2px 0 $highlightColor2;
		+	animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
		+	}
		+
		+	}

← Older revision		Revision as of 00:59, 25 October 2015
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
−
−	~~img {~~
−	~~box-shadow: 3px 3px 10px #000;~~
−	}