MediaWiki:Dumb.css

/* All the dumb CSS is stored in this page. Don't copy anything unless you know exactly what you're looking for, as some of these things don't work exactly as intended. If you have any problem, don't contact me, not even myself know what I'm doing with all this junk code.

With all that being said, have a nice day */

/*a) Box design, I guess*/ .box {	background-color:white;	padding:1em;	margin:2em;	color: #000;	border-radius:0px 0px 30px 0px;	border-left:10px solid; }

/*b) Button styling */ .button {	border: none;	border-radius: 15px;	padding: 12px 18px;	font-size: 16px;	text-transform: uppercase;	cursor: pointer;	color: white;	background-color: #2196f3;	box-shadow: 0 0 4px #999;	outline: none;	display:inline-block;	width:auto; }

/*c) Ripple effect */	background-position: center;	transition: background 0.8s; }	background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; }	background-color: #6eb9f7;	background-size: 100%;	transition: background 0s; }
 * 1) ripple {
 * 1) ripple:hover {
 * 1) ripple:active {

/* d) Spinner (no, not that spinner) */ .spinner{	border: 6px solid;	width:50px;	height:50px;	border-radius:50%;	border-color:#346eeb #346eeb #346eeb transparent;	animation:spin 1s linear infinite; } @keyframes spin {	0% {		transform:rotate(0deg);	}	100% {		transform:rotate(360deg);	} }

/* e) Some weird CSS animation (not actually that weird, it's something really, really simple) */ .dis {	animation:dis 2s linear infinite; } @keyframes dis {	0% {opacity:0;}	50% {opacity:100;}	100% {opacity:0;} }

/* f) Some more CSS animations... Nah, just some hovering effect or wtvr */ .back {	margin:5px 20px;	padding:2px 5px;	font-size:20px;	background-color: rgba(0,0,0,0);	display:inline-block;	transition:background-color 0.5s;	border-radius:10px; } .back:hover {	background-color:rgba(128, 128, 128, 0.5); }

/* g) Just... That, I guess */ .rules-link {	margin-right:20px;	font-size:25px;	font-weight:bold;	padding:5px;	border-radius:20px;	background-color: rgba(0,0,0,0);	transition:background-color 0.5s; } .rules-link:hover {	background-color:rgba(128, 128, 128, 0.4); } .theme-fandomdesktop-light .rules-link a {	color:#333; } .theme-fandomdesktop-dark .rules-link a {	color:#ccc; }

/* h) Tooltips */ .tooltip {	position:relative;	display:inline-block; } .tooltip .tooltip-text {	visibility:hidden;	width:150px;	background-color:rgba(112, 112, 112, 0.8);	color:#fff;	text-align:center;	padding:5px 2px;	border-radius:5px;	/*Something*/	position:absolute;	z-index:1;	top:100%;	left:50%;	margin-left: -75px; } .tooltip:hover .tooltip-text {	visibility:visible; } .tooltip .tooltip-text::after {	content:" ";	position:absolute; 	bottom:100%;	left:50%;	margin-left: -5px;	border-width:5px;	border-style:solid;	border-color:transparent transparent rgba(112, 112, 112, 0.8) transparent; } /* i) Centering stuff */ display:flex; justify-content:center; align-content:center; } /* j) Atajos, creo */ .theme-fandomdesktop-dark .atajo {	background-color: #3a3a3a;	border: solid 2px #fff; } .theme-fandomdesktop-light .atajo {	background-color: #f5f3f5;	border: solid 2px #000; } .atajo {	float: right;	margin: 5px 5px 5px 15px;	padding: 5px;	text-align: center;	width: 125px; }
 * 1) center {