MediaWiki:Tweeki.css
From LINKS Community Center
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the Tweeki skin */ /* =========================== GENERAL =========================== */ :root { --links-blue: #1980c3; --links-cyan: #34b8b8; --links-grey: #415262; --links-orange: #ee7802; } /* TODO: Add static fallback fonts */ @supports (font-variation-settings: normal) { @font-face { font-family: 'Open Sans'; src: url('/resources/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype supports variations"), url('/resources/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype-variations"); font-weight: 300 800; font-stretch: 75% 100%; } @font-face { font-family: 'Raleway'; src: url('/resources/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf') format("truetype supports variations"), url('/resources/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf') format("truetype-variations"); font-weight: 100 900; } } .firstHeading, .tweekiFirstHeading { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } .firstHeading .namespace { font-weight: 150; } #bodyContent { font-family: 'Open Sans'; } .platform-profile img, .platform-profile svg { max-width: 100px; max-height: 100px; } /* LCC FOOTER START */ /* #region */ /* This is MediaWiki's own footer */ footer#footer.footer { padding: 0; } #lcc-footer { width: 100%; padding: 1em; font-size: .8rem; font-family: 'Open Sans'; font-weight: 300; background-color: var(--links-grey); color: rgba(255, 255, 255, .6); background: linear-gradient(to top, #1A2026, var(--links-grey)); } #lcc-footer-content { margin: auto; display: grid; grid-template: "links" "nav" "legal" "eu-logo" "eu-text"; gap: 1em 1em; font-size: 1.2em; } #lcc-footer-content a { display: inline-block; margin-bottom: .7em; color: rgba(255, 255, 255, .7); transition: all 200ms; } #lcc-footer-content a:hover { display: inline-block; margin-bottom: .7em; color: rgba(255, 255, 255, .9); font-weight: 600; } #lcc-footer-content .footer-links { grid-area: links; display: flex; flex-flow: column wrap; } #lcc-footer-content .footer-nav { grid-area: nav; display: flex; flex-flow: column wrap; } #lcc-footer-content .footer-legal { grid-area: legal; display: flex; flex-flow: column wrap; } #lcc-footer-content .footer-eu-logo { grid-area: eu-logo; } #lcc-footer-content .footer-eu-logo img { height: 2.5em; opacity: .8; } #lcc-footer-content .footer-eu-text { grid-area: eu-text; display: flex; } #lcc-footer-content .footer-eu-text p { font-size: .8em; } #lcc-footer-content .project-link { font-variant: small-caps; font-size: 180%; margin-top: -0.4em; } @media screen and (min-width: 992px) { #lcc-footer { padding: 5em; font-size: 1rem; } #lcc-footer-content { width: 83.3333333333%; grid-template: "links nav legal" "eu-logo eu-text eu-text" /1fr 1fr 1fr; gap: 5em 1em; font-size: 1.2em; } #lcc-footer-content .footer-legal { grid-area: legal; text-align: right; } #lcc-footer-content .footer-eu-text { justify-content: flex-end; } #lcc-footer-content .footer-eu-text p { text-align: right; max-width: 75%; } } /* #endregion */ /* LCC FOOTER END */ /* DCT PROFILE START */ /* #region */ @keyframes showRight { from { transform-origin: left; transform: scaleX(0); } to { transform-origin: left; transform: scaleX(1); } } @keyframes showDown { from { transform-origin: top; transform: scaleY(0); } to { transform-origin: top; transform: scaleY(1); } } @keyframes hideDown { from { transform-origin: bottom; transform: scaleY(1); } to { transform-origin: bottom; transform: scaleY(0); } } #dct-profile { display: grid; grid-template: "meta" "desc" "info" "func" "more"; font-family: 'Open Sans'; font-weight: 400; font-stretch: 100%; color: var(--links-grey); margin-bottom: 3em; clip-path: inset(0 0 100% 0); opacity: 0; transition: all 500ms ease-in-out; } body.loaded #dct-profile { clip-path: inset(0 0 0 0); opacity: 1; } /* TODO: Generalize link formatting later (remove #dct-profile) */ .skin-tweeki #content #dct-profile a.external { background: initial; padding: 0; text-decoration: none; border-bottom: 1px solid var(--links-blue); } #dct-profile h1, #dct-profile h2, #dct-profile h3, #dct-profile h4, #dct-profile h5, #dct-profile h6 { color: var(--links-blue); font-family: 'Raleway'; font-weight: 300; } #dct-profile h1 { font-weight: 700; } #dct-profile h2 { font-weight: 500; } #dct-back-link { margin-bottom: 2em; } #dct-back-link a { font-family: 'Open Sans'; font-size: 1.5em; font-variant: small-caps; text-decoration: none !important; border-bottom: 1px solid var(--links-blue); } #dct-back-link .dct-icon { filter: invert(53%) sepia(16%) saturate(3227%) hue-rotate(169deg) brightness(77%) contrast(96%); height: 4em; width: 4em; margin-right: 1em; vertical-align: -1.5em; } #dct-profile .dct-logo { height: 2em; width: auto; margin-right: 1em; } #dct-profile>.section { box-sizing: border-box; padding: 2em 0 2em 2em; transition: all 500ms ease-in-out; transition-delay: 1000ms; } body.loaded #dct-profile>.section { padding-left: 0; } #dct-profile .dct-meta { grid-area: meta; } #dct-profile .dct-desc { grid-area: desc; } #dct-profile .dct-info { grid-area: info; display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 1em 1em; } #dct-profile .dct-info .country-flag { height: 1.8em; width: auto; } #dct-profile .dct-func { grid-area: func; } #dct-profile .dct-func h3 { font-size: 1.5em; } #dct-profile .dct-func .func-icon { filter: invert(53%) sepia(16%) saturate(3227%) hue-rotate(169deg) brightness(77%) contrast(96%); height: 2em; width: 2em; vertical-align: -.6em; margin-right: .6em; } #dct-profile .dct-func-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 2em 2em; } #dct-profile .dct-func li { list-style-type: none; margin-left: 5.5em; text-indent: -1.6em; position: relative; } #dct-profile .dct-func li.available::before { content: "✓"; color: var(--links-blue); margin-right: .8em; } #dct-profile .dct-func li.unavailable { color: #bbb; } #dct-profile .dct-func li.unavailable::before { content: "✗"; color: #666; opacity: .5; margin-right: .8em; } #dct-profile .dct-func li .prop-desc { opacity: 0; transition: opacity 1s; position: absolute; top: -45%; left: 105%; width: 18em; padding: .5em; text-indent: 0; z-index: 10; background: var(--links-blue); color: white; } #dct-profile .dct-func li .prop-desc::after { content: " "; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent var(--links-blue) transparent transparent; } #dct-profile .dct-func li:hover .prop-desc { opacity: 1; } #dct-profile .dct-more { grid-area: more; } .anim-border { position: relative; } .anim-border::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background-color: var(--links-blue); transform: scaleX(0); } .anim-border::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: var(--links-blue); transform: scaleY(0); } body.loaded .anim-border::before { animation: showDown 500ms ease-in-out 500ms 1 normal forwards, hideDown 500ms ease-in-out 1000ms 1 normal forwards; } body.loaded .anim-border::after { animation: showRight 500ms ease-in-out 1000ms 1 normal forwards; } @media only screen and (orientation: landscape) { #dct-profile { grid-template: "meta meta" "desc info" "func info" "more info" / 3fr 1fr; } #dct-profile>.section { box-sizing: border-box; padding: 2em; } #dct-profile .dct-info { display: block; padding-left: 2em !important; padding-right: 0; } #dct-profile .dct-info>div { margin-bottom: 2.5em; } #dct-profile .dct-info::before { animation: showDown 500ms ease-in-out 1500ms 1 normal forwards; } #dct-profile .dct-info::after { animation: none 0; } } /* #endregion */ /* DCT PROFILE END */ /* =========================== GUIDELINE LIST (TEMPORARY) =========================== */ /* #region */ #guidelines h1, #guidelines h2 { color: var(--links-orange); font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #guidelines h1 img { height: 2.5em; width: 2.5em; filter: invert(60%) sepia(40%) saturate(6791%) hue-rotate(6deg) brightness(100%) contrast(98%); margin-right: .5em; } /* #endregion */ /* =========================== END GUIDELINE LIST (TEMPORARY) =========================== */ /* =========================== GUIDELINE PROFILE (TEMPORARY) =========================== */ /* #region */ .guideline-profile+p { margin: 4em 0; font-size: larger; } .guideline-profile .smwtable-clean { width: 100%; table-layout: fixed; margin: 4em 0; } .guideline-profile .smwtable-clean tr>th { text-align: left; font-weight: 320; width: 14em; } .guideline-profile .smwtable-clean tbody>tr:nth-child(even) { background-color: unset; } /* #endregion */ /* =========================== END GUIDELINE PROFILE (TEMPORARY) =========================== */ /* =========================== RESOURCES =========================== */ /* #region */ #resources h1 { color: var(--links-grey); font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #resources h1 img { height: 2.5em; width: 2.5em; filter: invert(32%) sepia(13%) saturate(865%) hue-rotate(168deg) brightness(91%) contrast(93%); margin-right: .5em; } #resources-wrapper { margin-top: 2em; } #resources-wrapper h2, #resources-wrapper h3, #resources-wrapper h4, #resources-wrapper h5, #resources-wrapper h6 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #resources-wrapper h2 { margin-top: 2em; } #resources-wrapper h3 { font-size: 1.5em; margin-top: 1em; } #resources-wrapper dl { margin-left: 2em; } #resources-wrapper dl dt { margin-bottom: 1em; } #resources-wrapper dl dd { margin-top: -1em; margin-bottom: 1em; } /* #endregion */ /* =========================== END RESOURCES =========================== */ /* =========================== NETWORKS =========================== */ /* #region */ #networks h1 { color: var(--links-grey); font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #networks h1 img { height: 2.5em; width: 2.5em; filter: invert(32%) sepia(13%) saturate(865%) hue-rotate(168deg) brightness(91%) contrast(93%); margin-right: .5em; } #networks-wrapper { margin-top: 2em; margin-bottom: 2em; } #networks-wrapper h2, #networks-wrapper h3 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #networks-wrapper h2 { margin-top: 1.5em; } /* #endregion */ /* =========================== END NETWORKS =========================== */ .smwtable-clean tr>th { min-width: 10em; text-align: left; } #compass h1 img { height: 2.5em; width: 2.5em; filter: invert(67%) sepia(8%) saturate(3018%) hue-rotate(131deg) brightness(93%) contrast(87%); margin-right: .5em; } #compass h1 { color: var(--links-cyan); font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #compass-wrapper { font-family: 'Open Sans'; } #compass-wrapper h2, #compass-wrapper h3, #compass-wrapper h4, #compass-wrapper h5, #compass-wrapper h6 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; } #compass-wrapper h2 { margin-top: 2em; padding-bottom: 5px; border-bottom: 1px solid var(--links-cyan); color: var(--links-cyan); } #compass-wrapper h3 { font-weight: 500; font-size: 1.4em; } #compass-wrapper h4 { margin-left: 2em; font-size: 1.2em; } #compass-wrapper h4::before { content: "— "; } #compass-wrapper h4+.mw-collapsible { margin-left: 4.5em; margin-bottom: 1em; } #compass-wrapper .mw-collapsible ul { list-style-type: circle; font-family: 'Raleway'; } #compass-wrapper .toggle-activator { font-size: 1.8em; vertical-align: -0.15em; color: var(--links-cyan); }