|
|
| 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;
| |
| }
| |
| } | | } |
.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;
}
