MediaWiki: Tweeki.css
From LINKS Community Center
Revision as of 13:42, 16 May 2022 by <bdi>Eschmidt</bdi> (talk | contribs)
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will affect users of the Tweeki skin */ :root { --links-blue: #1980c3; --links-cyan: #34b8b8; --links-grey: #415262; --links-orange: #ee7802; } @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; } } /* 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 { font-family: 'Open Sans'; font-weight: 400; font-stretch: 100%; color: var(--links-grey); --dct-border: 1px solid var(--links-blue); margin-bottom: 3em; display: grid; grid-template: "meta meta" "desc info" "func info" "more info" / 2fr 1fr; } /* 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: "\1F865"; 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 .dct-logo { height: 1.5em; width: auto; margin-right: 1em; margin-bottom: .2em; } #dct-profile h1 { font-weight: 700; } #dct-profile>section { box-sizing: border-box; padding: 2em 2em 2em 0; position: relative; } #dct-profile>section::before { content: ""; position:absolute; left: 2px; width: 100%; height: 100%; background-color: red; } #dct-profile .dct-meta { grid-area: meta; /* border-bottom: var(--dct-border); */ } .anim-border { position: relative; } .anim-border::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background-color: var(--links-blue); /* transition: all 500ms ease-in-out; */ /* transform-origin: left; */ transform: scaleX(0); } .anim-border::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: var(--links-blue); transform: scaleY(0); } body.loaded .anim-border::before { animation: showDown 500ms ease-in-out 0ms 1 normal forwards, hideDown 500ms ease-in-out 500ms 1 normal forwards; } body.loaded .anim-border::after { /* transform: scaleX(1); */ animation: showRight 500ms ease-in-out 500ms 1 normal forwards; } #dct-profile .dct-desc { grid-area: desc; /* border-bottom: var(--dct-border); */ } #dct-profile .dct-info { grid-area: info; padding-left: 1em; } #dct-profile .dct-info::before { animation: showDown 500ms ease-in-out 1000ms 1 normal forwards; } #dct-profile .dct-info::after { animation: none 0; } #dct-profile .dct-info>div { margin-bottom: 2.5em; } #dct-profile .dct-func { grid-area: func; /* border-bottom: var(--dct-border); */ } #dct-profile .dct-more { grid-area: more; } @media only screen and (orientation: portrait) { #dct-profile { grid-template: "meta" "desc" "info" "func" "more" } #dct-profile>section { box-sizing: border-box; padding: 2em 0; } #dct-profile .dct-info { border-left: 0 none; border-bottom: var(--dct-border); padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 1em 1em; } #dct-profile .dct-info>div { margin: 0; } } /* DCT PROFILE END */