Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(41 intermediate revisions by the same user not shown) | |||
Line 135: | Line 135: | ||
border: none; | border: none; | ||
} | } | ||
− | table.infobox, table.wikitable > * > tr > td{ | + | table.infobox /*, table.wikitable > * > tr > td*/{ |
background-color: #5B5760; | background-color: #5B5760; | ||
border: none; | border: none; | ||
Line 147: | Line 147: | ||
/*Forum stuff:*/ | /*Forum stuff:*/ | ||
− | |||
− | |||
− | |||
table.mw-wikiforum-frame { | table.mw-wikiforum-frame { | ||
background: #423C49; | 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 text*/ | ||
.spoiler, .spoiler2{ | .spoiler, .spoiler2{ | ||
Line 166: | Line 178: | ||
} | } | ||
− | + | /* Contrasted text */ | |
+ | .contrasted { | ||
+ | background: inherit; | ||
+ | background-clip: text; | ||
+ | color: transparent; | ||
+ | filter: grayscale(100%) contrast(100000%) invert(100%); | ||
+ | } | ||
/*Animations*/ | /*Animations*/ | ||
Line 214: | Line 232: | ||
/*button styling*/ | /*button styling*/ | ||
− | + | .button-confirm, .button-cancel{ | |
font-weight: bold; | font-weight: bold; | ||
border-radius: 5px; | border-radius: 5px; | ||
− | padding: 5px; | + | padding: 5px; /*thicc button*/ |
+ | margin: 5px; | ||
+ | cursor: pointer; /*Make it look clickable*/ | ||
} | } | ||
− | + | .button-confirm { background: #44B83B; } | |
− | + | .button-cancel { background: #D36443; } | |
/*sidebar*/ | /*sidebar*/ | ||
Line 232: | Line 252: | ||
border-radius: 10px; | border-radius: 10px; | ||
position: fixed; | 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: rotate(0) scale(1.2); } | ||
+ | 25% { transform: rotate(2deg) scale(1.2); } | ||
+ | 50% { transform: rotate(0) scale(1.2); } | ||
+ | 75% { transform: rotate(-2deg) scale(1.2); } | ||
+ | } | ||
+ | |||
+ | .cool-hover:hover { | ||
+ | transform: scale(1.2); | ||
+ | animation: rotateAndZoomAnimation 2s infinite; | ||
+ | animation-delay: 0.3s; | ||
} | } |
Latest revision as of 14:57, 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: rotate(0) scale(1.2); } 25% { transform: rotate(2deg) scale(1.2); } 50% { transform: rotate(0) scale(1.2); } 75% { transform: rotate(-2deg) scale(1.2); } } .cool-hover:hover { transform: scale(1.2); animation: rotateAndZoomAnimation 2s infinite; animation-delay: 0.3s; }