Diferencia entre revisiones de «Plantilla:Premios Allie/styles.css»

De Wikimedia Small Projects
Sin resumen de edición
Sin resumen de edición
Línea 49: Línea 49:
     width: 100%;
     width: 100%;
     height: 32px;
     height: 32px;
}
/* atr https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
* {
font-family: Ubuntu;
border-radius: 2px;
}
.mw-editsection {
display: none;
}
.mw-collapsible-text {
color: #fff;
}
h2, h3 {
padding: .6rem;
color: #fff;
background: linear-gradient(135deg, #2a4b8d 20%, #772953 100%);
font-weight: bold;
}
body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #262626;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
}
.nav a {
  text-decoration: none;
  color: #fff !important;
  display: block;
}
.nav li:hover {
  background-color: #5e2750;
  transition: .3s background-color;
}
/*
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
*/
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}
}

Revisión del 01:00 19 oct 2022

@media only screen and (min-device-width: 600px) {
	.allie-title {
		font-size: 5.4em;
		font-family: 'Segoe UI';
		color: #fff;
		padding: 75px;
		background-image: radial-gradient(circle at 100% 100%, transparent 2px, #AA00FF 2px, #AA00FF 4px, transparent 4px),
			linear-gradient(to right, #AA00FF, #0091EA),
			radial-gradient(circle at 0% 100%, transparent 2px, #0091EA 2px, #0091EA 4px, transparent 4px),
			linear-gradient(to bottom, #0091EA, #64DD17),
			radial-gradient(circle at 0% 0%, transparent 2px, #64DD17 2px, #64DD17 4px, transparent 4px),
			linear-gradient(to left, #64DD17, #FF6D00),
			radial-gradient(circle at 100% 0%, transparent 2px, #FF6D00 2px, #FF6D00 4px, transparent 4px),
			linear-gradient(to top, #FF6D00, #AA00FF);
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	}	
}

@media only screen and (max-device-width: 600px) {
	.allie-title {
		font-size: 2.4em;
		color: white;
		font-family: 'Segoe UI';
		background-color: #d32;
		padding: 45px;
	}	
}

/* from https://stackoverflow.com/a/38352601 */
.allie-aw-title {
	text-align: center;
	font-weight: bold;
    position: relative;
    padding: 8px 8px 32px 8px;
    background-color: #36c;
	color: #fff;
	font-size: 343%;
}

.allie-aw-title:after {
	background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
}

/* atr https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
* {
 font-family: Ubuntu;
 border-radius: 2px;
}

.mw-editsection {
	display: none;
}

.mw-collapsible-text {
	color: #fff;
}

h2, h3 {
	padding: .6rem;
	color: #fff;
	background: linear-gradient(135deg, #2a4b8d 20%, #772953 100%);
	font-weight: bold;
}

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.nav ul {
  list-style: none;
  background-color: #262626;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
}
 
.nav a {
  text-decoration: none;
  color: #fff !important;
  display: block;
}
 
.nav li:hover {
  background-color: #5e2750;
  transition: .3s background-color;
}
/*
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
*/
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}