Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Line 293: | Line 293: | ||
.cool-hover { | .cool-hover { | ||
transition: transform 0.3s ease; | transition: transform 0.3s ease; | ||
− | width: fit- | + | width: fit-content; |
} | } | ||
Revision as of 14:32, 20 July 2023
/* CSS placed here will be applied to all skins */ /*INFOBOX STUFF*/ /* Navbar styling when nested in infobox and navbox */ .infobox .navbar { font-size: 100%; } /* Infobox template style */ .infobox { border: 1px solid #a2a9b1; border-spacing: 3px; background-color: #f8f9fa; color: black; /* @noflip */ margin: 0.5em 0 0.5em 1em; padding: 0.2em; /* @noflip */ float: right; /* @noflip */ clear: right; font-size: 88%; line-height: 1.5em; } .infobox caption { font-size: 125%; font-weight: bold; padding: 0.2em; text-align: center; } .infobox td, .infobox th { vertical-align: top; /* @noflip */ text-align: left; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid #a2a9b1; } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; } .infobox.sisterproject { width: 20em; font-size: 90%; } .infobox.standard-talk { border: 1px solid #c0c090; background-color: #f8eaba; } .infobox.standard-talk.bordered td, .infobox.standard-talk.bordered th { border: 1px solid #c0c090; } /* styles for bordered infobox with merged rows */ .infobox.bordered .mergedtoprow td, .infobox.bordered .mergedtoprow th { border: 0; border-top: 1px solid #a2a9b1; /* @noflip */ border-right: 1px solid #a2a9b1; } .infobox.bordered .mergedrow td, .infobox.bordered .mergedrow th { border: 0; /* @noflip */ border-right: 1px solid #a2a9b1; } /* Styles for geography infoboxes, eg countries, country subdivisions, cities, etc. */ .infobox.geography { border-collapse: collapse; line-height: 1.2em; font-size: 90%; } .infobox.geography td, .infobox.geography th { border-top: 1px solid #a2a9b1; padding: 0.4em 0.6em 0.4em 0.6em; } .infobox.geography .mergedtoprow td, .infobox.geography .mergedtoprow th { border-top: 1px solid #a2a9b1; padding: 0.4em 0.6em 0.2em 0.6em; } .infobox.geography .mergedrow td, .infobox.geography .mergedrow th { border: 0; padding: 0 0.6em 0.2em 0.6em; } .infobox.geography .mergedbottomrow td, .infobox.geography .mergedbottomrow th { border-top: 0; border-bottom: 1px solid #a2a9b1; padding: 0 0.6em 0.4em 0.6em; } .infobox.geography .maptable td, .infobox.geography .maptable th { border: 0; padding: 0; } /*Makes the property labels bold, with the exception of captions.*/ .infobox > * > tr > td:first-child { font-weight: bold; } /*Makes the property labels bold*/ .infobox > * > tr > td.caption { font-weight: normal; } /*Makes the headers in infoboxes more spacious.*/ .infobox > * > tr > th { padding: 10px !important; } table.infobox > * > tr > th { background-color: #232323; border: none; } table.infobox /*, table.wikitable > * > tr > td*/{ background-color: #5B5760; border: none; width: 300px; } .infobox { padding: 0px; border-spacing: 0px; } /*Forum stuff:*/ table.mw-wikiforum-frame { background: #423C49; } td.mw-wikiforum-thread-main { background: #46414a; } th.mw-wikiforum-thread-top { background: #2c272f; } tr.mw-wikiforum-title, tr.mw-wikiforum-normal, table.mw-wikiforum-title, .mw-wikiforum-thread-sub { background: #46414a !important; } textarea, input { background: #342f38; color: #f3f3f3; } td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub { word-break: keep-all; } /*Spoiler text*/ .spoiler, .spoiler2{ color: #271E27; background-color: #271E27; padding: 3px; border-radius: 6px; } .spoiler:hover{ color: white; } /* Contrasted text */ .contrasted { background: inherit; background-clip: text; color: transparent; filter: grayscale(100%) contrast(100000%) invert(100%); } /*Animations*/ @webkit-keyframes spin { from {} to {transform:rotate(360deg);} } @keyframes spin { from {} to {transform:rotate(360deg);} } :root{ --intensity: 5px } @keyframes vertical { 0% {transform: translate(0px, calc(-1*var(--intensity)) )} 50% {transform: translate(0px, calc( var(--intensity)) )} 100% {transform: translate(0px, calc(-1*var(--intensity)) )} } @keyframes horizontal { 0% {transform: translate(calc(-1*var(--intensity)), 0px)} 50% {transform: translate(calc( var(--intensity)), 0px)} 100% {transform: translate(calc(-1*var(--intensity)), 0px)} } @keyframes rainbow { 0% {} 100% {filter:hue-rotate(360deg)} } /* redirect marker */ #contentSub, #contentSub2 { color: #AFAFAF; } /* Overlay styling for stuff like seizure warnings */ #overlay { position: fixed; /* Sit on top of the page content */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; background-color: #55505a; /* Black background with opacity */ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ } /*button styling*/ .button-confirm, .button-cancel{ font-weight: bold; border-radius: 5px; padding: 5px; /*thicc button*/ margin: 5px; cursor: pointer; /*Make it look clickable*/ } .button-confirm { background: #44B83B; } .button-cancel { background: #D36443; } /*sidebar*/ #mw-panel { background: #45404A; left: -12px; padding-bottom: 11px; padding-top: 34px; top: -27px; border-radius: 10px; position: fixed; } /*PAGE HISTORY*/ #pagehistory li.selected { background-color: #312e33; color: #cecece; } /* the funny xzyckon box */ .xzycorner { border: 10px solid transparent; border-image: url(https://dwaia.site/wiki/funny/xzycorners.svg) 8 fill / 40px / 0px stretch; } /* hatnotes (https://en.wikipedia.org/wiki/Template:Hatnote) */ .hatnote { font-style: italic; } div.hatnote { padding-left: 1.6em; margin-bottom: 0.5em; } /* div col (https://en.wikipedia.org/wiki/Template:Div_col) */ .div-col { column-width: 30em; } /* see Template:Block */ .block { display: table; } /* Does something cool when you hover over it */ .cool-hover { transition: transform 0.3s ease; width: fit-content; } @keyframes rotateAndZoomAnimation { 0%, 100% { transform: scale(1.2) rotate(0); } 25% { transform: scale(1.4) rotate(-5deg); } 50% { transform: scale(1.2) rotate(0deg); } 75% { transform: scale(1.4) rotate(5deg); } } .cool-hover:hover { animation: rotateAndZoomAnimation 2s infinite; }