Difference between revisions of "MediaWiki:Tweeki.css"
From LINKS Community Center
Line 1: | Line 1: | ||
− | + | /* CSS placed here will affect users of the Tweeki skin */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | :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; | |
− | + | } | |
− | + | } | |
− | + | /* LCC FOOTER START */ | |
− | + | footer#footer.footer { padding: 0; } /* This is MediaWiki's own footer */ | |
− | |||
− | |||
− | |||
− | + | #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-text { grid-area: eu-text; display: flex; } | ||
+ | #lcc-footer-content .footer-eu-text p { font-size: .8em; } | ||
− | + | @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%; } | |
− | + | } | |
+ | /* LCC FOOTER END */ | ||
− | + | /* DCT PROFILE START */ | |
− | + | @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); | ||
+ | } | ||
+ | |||
+ | .skin-tweeki #content #dct-profile a.external::after { | ||
+ | content: "\2B67"; | ||
+ | padding-left: .4em; | ||
+ | display: inline-block; | ||
+ | transition: all 300ms ease-in-out; | ||
+ | } | ||
+ | |||
+ | .skin-tweeki #content #dct-profile a.external:hover::after { | ||
+ | transform: translate(15%, -15%); | ||
+ | } | ||
+ | |||
+ | #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-icon { | ||
+ | filter: invert(53%) sepia(16%) saturate(3227%) hue-rotate(169deg) brightness(77%) contrast(96%); | ||
+ | height: 2em; | ||
+ | width: 2em; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | |||
+ | #dct-profile .dct-func li::before { | ||
+ | content: "✓"; | ||
+ | color: var(--links-blue); | ||
+ | margin-right: .8em; | ||
+ | } | ||
+ | |||
+ | #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" | ||
+ | / 2fr 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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* DCT PROFILE END */ |
Revision as of 11:37, 21 June 2022
/* CSS placed here will affect users of the Tweeki skin */ :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; } } /* LCC FOOTER START */ footer#footer.footer { padding: 0; } /* This is MediaWiki's own footer */ #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-text { grid-area: eu-text; display: flex; } #lcc-footer-content .footer-eu-text p { font-size: .8em; } @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%; } } /* LCC FOOTER END */ /* DCT PROFILE START */ @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); } .skin-tweeki #content #dct-profile a.external::after { content: "\2B67"; padding-left: .4em; display: inline-block; transition: all 300ms ease-in-out; } .skin-tweeki #content #dct-profile a.external:hover::after { transform: translate(15%, -15%); } #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-icon { filter: invert(53%) sepia(16%) saturate(3227%) hue-rotate(169deg) brightness(77%) contrast(96%); height: 2em; width: 2em; } #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; } #dct-profile .dct-func li::before { content: "✓"; color: var(--links-blue); margin-right: .8em; } #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" / 2fr 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; } } /* DCT PROFILE END */