Diferencia entre revisiones de «Usuario:Hasley/sandbox/styles.css»

(de https://meta.wikimedia.org/wiki/Template:Arctic_Knot_Conference_2021/styles.css)
(de https://meta.wikimedia.org/wiki/Template:WCNA2020/styles.css)
Línea 1: Línea 1:
@keyframes logo {
.wp20-menu ul {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
@media (max-width:1000px) {
.akheader {
margin-top: 1vh;
background: radial-gradient(circle at bottom,#555,#888);
border-radius: 1em 1em 1em 0;
flex-direction: column;
}
.akheadertext {
order: 2;
text-align: center;
}
.akheaderlogo {
order: 1;
}
.akheaderlogo, .tabs .focus a {
animation-name: logo;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.tabs {
margin-top: 3px;
justify-content: flex-start;
flex-wrap: wrap;
}
.tabs .tab a {
padding: 0.2em 0.4em;
border-radius: 0 5px 5px 0;
margin: 0 3px 3px 0;
color: #fff;
background: linear-gradient(to bottom,#555,#999);
}
.tabs .focus a {
border-right: 5px solid #b5da98;
cursor: default;
}
.mw-pt-languages {
text-align: center;
}
}
@media (min-width:1001px) {
.akheader {
background: radial-gradient(ellipse at bottom,transparent 40%,rgba(0,0,0,0.5)),
url("https://upload.wikimedia.org/wikipedia/commons/b/be/Arctic_Sunset.jpg");
background-size: cover;
background-position: 0 50%;
flex-direction: row;
justify-content: space-between;
border-radius: 3em;
height: 15vw;
min-height: 260px;
}
.akheader:hover .akheadertext {
line-height: 3rem;
}
.tabs .tab a {
padding: 0.5em;
margin: 0 0.5em;
border-bottom: 3px solid #555;
font-size: 110%;
margin-bottom: 0.5em;
color: #555;
}
.tabs .tab a:hover {
margin-bottom: 0;
padding-bottom: 1em;
background: #f6f6f6;
}
.tabs .focus a {
border-bottom: 3px solid #b5da98;
cursor: default;
}
.tabs {
justify-content: center;
}
}
.akheader {
width: 100%;
display: flex;
display: flex;
align-items: center;
columns: 1;
}
flex-wrap: wrap;
.akheadertext {
list-style: none;
padding: 2vw;
margin: 0;
font-size: 1.5rem;
color: #fff;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
transition: all 1s;
line-height: 2rem;
font-family: "Linux Libertine", serif;
}
.akheadertext b {
font-size: 150%;
}
.akheaderlogo {
padding: 2vw;
}
}
.tabs {
.wp20-menu li {
display: flex;
flex: 1 0 30%;
}
background-color: #eee;
.tabs .tab a {
margin: 1px;
display: inline-block;
border-top: 3px solid;
text-transform: uppercase;
padding: .5em .5em;
font-weight: 500;
transition: all 500ms;
}
.tabs .tab a:hover {
text-decoration: none;
}
.tabs .tab a.external {
background-image: none;
}
.container {
max-width: 1000px;
margin: 2em auto;
}
.tagline {
font-family: "Linux Libertine", serif;
font-style: italic;
font-size: 16pt;
text-align: center;
text-align: center;
margin: 2vh 0;
line-height: 1.15;
font-size: 1.5em;
color: #111;
word-spacing: -1px;
}
}
body.rtl ul {
.wp20-menu li:nth-child(1) {
list-style-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5d/%C3%81rvu-r%C3%A1nes-njuolla-g.svg");
border-color: #bc3f3f;
}
}
ul li {
.wp20-menu-selected-1 li:nth-child(1) {
padding-left: 0.5rem;
background-color: #bc3f3f;
color: #fefefe;
}
}
.logos {
.wp20-menu li:nth-child(2) {
display: flex;
border-color: #f1ac0d;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
width: 100%;
}
}
.uit-logo {
.wp20-menu-selected-2 li:nth-child(2) {
font-size: 130%;
background-color: #f1ac0d;
white-space: nowrap;
display: flex;
align-items: center;
padding: 1vw;
}
.uit-logo a.external, .uit-logo a.external:visited {
color: #000;
text-decoration: none;
}
.logotest {
animation-name: logo;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.mw-pt-languages {
max-width: 1000px;
margin: 1vw auto;
border-radius: 3vw;
overflow: hidden;
}
.program-parallel {
display: grid;
grid-template-columns: calc(50% - 0.25em) 0.5em calc(50% - 0.25em);
width: 100%;
}
.program-parallel .program-item:last-of-type {
grid-column: 3;
}
.program-parallel .program-item .speakerimage {
display: none;
}
.program-parallel .program-item {
grid-template-columns: 4em 7em auto 1px;
}
}
.program-item {
.wp20-menu li:nth-child(3) {
box-sizing: border-box;
border-color: #004e64;
    display: grid;
    grid-template-columns: 4em 7em auto 180px;
    width: 100%;
    background: rgba(0,0,0,0.05);
    border-radius: 1em;
    border: 1px solid #ccc;
    padding: 1em;
    margin-bottom: 0.5em;
}
}
.program-item .parallel-notice {
.wp20-menu-selected-3 li:nth-child(3) {
display: none;
background-color: #004e64;
color: #fefefe;
}
}
.break {
.wp20-menu li:nth-child(4) {
background: repeating-linear-gradient(45deg, #eee 0px, #eee 10px, #f5f5f5 10px, #F5F5F5 20px)
border-color: #69c25f;
}
}
.break .time {
.wp20-menu-selected-4 li:nth-child(4) {
grid-column: span 3;
background-color: #69c25f;
display: flex;
align-items: center;
justify-content: center;
}
}
.program-item .emoji {
.wp20-menu li:nth-child(5) {
font-size: 200%;
border-color: #2471a0;
text-align: center;
}
}
.program-item .title {
.wp20-menu-selected-5 li:nth-child(5) {
grid-column: 3;
background-color: #2471a0;
font-weight: bold;
color: #fefefe;
margin-left: 1em;
padding-left: 1em;
border: 0 dashed #ccc;
border-width: 0 0 0 2px;
}
}
.program-item .speakerimage {
.wp20-menu li:nth-child(6) {
grid-column: 4;
border-color: #c62e77;
grid-row: span 2;
margin: auto;
text-align: center;
}
}
.program-item .speakerimage img {
.wp20-menu-selected-6 li:nth-child(6) {
    width: 70px !important;
background-color: #c62e77;
    height: 70px !important;
color: #fefefe;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ccc;
    padding: 2px;
    margin: 2px;
    background: #fff;
}
.program-item .speaker {
grid-column: 3;
margin-left: calc(2em + 2px);
}
.program-item .watchlinks {
grid-column: span 4;
text-align: center;
}
}
.break .title, .break .speakerimage, .break .speaker, .break .watchlinks {
 
display: none;
.wp20-menu-selected-1 li:nth-child(1) a,
.wp20-menu-selected-3 li:nth-child(3) a,
.wp20-menu-selected-5 li:nth-child(5) a,
.wp20-menu-selected-6 li:nth-child(6) a {
color: inherit;
}
}
.videopool-item .time {
 
margin: auto;
.wp20-menu li small {
display: block;
margin-top: .5em;
font-size: 60%;
}
}
@media (max-width:1000px) {
 
.program-item {
.wp20-menu-helptranslate {
grid-template-columns: 4em 7em auto 80px;
font-size: smaller;
}
.program-item .time {
grid-column: span 2;
}
.program-item .title {
grid-column: 1 / span 3;
margin-left: 0;
padding-left: 0;
margin-top: 0.5em;
padding-top: 0.5em;
margin-right: 1em;
border-width: 2px 0 0 0;
}
.program-item .speakerimage {
grid-row: 1 / span 3;
}
.program-item .speaker {
grid-column: 1 / span 3;
margin-left: 0;
}
.program-parallel {
display: flex;
flex-direction: column;
}
.program-parallel .program-item {
background: rgba(255,255,0,0.1);
}
.program-parallel .program-item .parallel-notice {
display: inline;
}
.program-parallel .program-item:first-of-type {
margin: 0 !important;
border-radius: 1em 1em 0 0;
border-bottom: 0;
}
.program-parallel .program-item:last-of-type {
margin: 0 0 0.5em 0 !important;
border-radius: 0 0 1em 1em;
border-top-width: 3px;
border-top-style: dotted;
}
}
}

Revisión del 18:34 12 jul 2022

.wp20-menu ul {
	display: flex;
	columns: 1;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
}
.wp20-menu li {
	flex: 1 0 30%;
	background-color: #eee;
	margin: 1px;
	border-top: 3px solid;
	padding: .5em .5em;
	text-align: center;
	line-height: 1.15;
	font-size: 1.5em;
	color: #111;
	word-spacing: -1px;
}
.wp20-menu li:nth-child(1) {
	border-color: #bc3f3f;
}
.wp20-menu-selected-1 li:nth-child(1) {
	background-color: #bc3f3f;
	color: #fefefe;
}
.wp20-menu li:nth-child(2) {
	border-color: #f1ac0d;
}
.wp20-menu-selected-2 li:nth-child(2) {
	background-color: #f1ac0d;
}
.wp20-menu li:nth-child(3) {
	border-color: #004e64;
}
.wp20-menu-selected-3 li:nth-child(3) {
	background-color: #004e64;
	color: #fefefe;
}
.wp20-menu li:nth-child(4) {
	border-color: #69c25f;
}
.wp20-menu-selected-4 li:nth-child(4) {
	background-color: #69c25f;
}
.wp20-menu li:nth-child(5) {
	border-color: #2471a0;
}
.wp20-menu-selected-5 li:nth-child(5) {
	background-color: #2471a0;
	color: #fefefe;
}
.wp20-menu li:nth-child(6) {
	border-color: #c62e77;
}
.wp20-menu-selected-6 li:nth-child(6) {
	background-color: #c62e77;
	color: #fefefe;
}

.wp20-menu-selected-1 li:nth-child(1) a,
.wp20-menu-selected-3 li:nth-child(3) a,
.wp20-menu-selected-5 li:nth-child(5) a,
.wp20-menu-selected-6 li:nth-child(6) a {
	color: inherit;
}

.wp20-menu li small {
	display: block;
	margin-top: .5em;
	font-size: 60%;
}

.wp20-menu-helptranslate {
	font-size: smaller;
}