User:OH&S/fandomdesktop.css

/* == Drafting code == */ /* Testing css code for switchover to Fandom Desktop */

/* custom "white links" - allows links to be properly seen on infoboxes with dark backgrounds */ .whitelinks a, .whitelinks a:hover { color: white; }

/* === Collapsible === */ /* Make collapsible table's link white/normal font */ .mw-collapsible-toggle a { color: white; }

/* For special mwCollapsibleAltered tables */ .mwCollapsibleAltered .mw-collapsible-toggle a { color: #0047CD; font-weight: normal; }

.attribution { display: none !important; }

/* shrinking down image text to size */ .ltr .thumbcaption { font-size: 85%; text-align: left; }

.spoiler { background-color: black; } .spoiler:hover { background-color: transparent; }

/* normalizing font to Courier New */ .EditPageEditor textarea { font-family: "Courier New", monospace; }

/* revising colors for SocTest buttons */ .SocTest.Wikia-Button { border-color: #006CB0; color: #fff; }

/* Formatting for Portable Infoboxes */ /*** Light ***/ .theme-fandomdesktop-light .portable-infobox .pi-background { background-color: #1A2421; }

.theme-fandomdesktop-light .portable-infobox .pi-secondary-background { background-color: #1A2421; }

.theme-fandomdesktop-light .portable-infobox .pi-data .pi-caption { background-color: #DFDFDF; border-bottom: 1px solid #AAAAAA; }

.theme-fandomdesktop-light .portable-infobox .pi-secondary-font { color: white; }

.theme-fandomdesktop-light .portable-infobox .pi-title { background-color: #1A2421; color: white; text-align: center; font-size: 16px; font-weight: bold; line-height: 22px; padding: 10px; }

.theme-fandomdesktop-light .portable-infobox .pi-data-label { color: #3A3A3A; }

/*** Dark ***/ .theme-fandomdesktop-dark .portable-infobox .pi-background { background-color: #161D1A; }

.theme-fandomdesktop-dark .portable-infobox .pi-secondary-background { background-color: #161D1A; }

.theme-fandomdesktop-dark .portable-infobox .pi-data .pi-caption { background-color: #2A2E2F; border-bottom: 1px solid #464A4D; }

.theme-fandomdesktop-dark .portable-infobox .pi-secondary-font { color: white; }

.theme-fandomdesktop-dark .portable-infobox .pi-title { background-color: #161D1A; color: white; text-align: center; font-size: 16px; font-weight: bold; line-height: 22px; padding: 10px; }

.theme-fandomdesktop-dark .portable-infobox .pi-data-label { color: #E6E6E6; }

/*** Both ***/ .pi-collapse .pi-header::after { border-color: inherit; }

.pi-collapse .pi-header:first-child::after { border-color: lightgray; }

.pi-horizontal-group .pi-horizontal-group-item { vertical-align: middle; }

.pi-image-collection-tabs { margin: unset; }

/* === CSS hot fixes === */ /* sharpen image class */ .sharpen img { max-width: 100%; height: auto; }

/* For Template:Weblinks */ div.weblinks { display: inline-flex; width: 166px; }

div.weblinks img { vertical-align: middle; transition: opacity 0.5s; -webkit-filter: invert(0%); /* Safari */ filter: invert(0%); }

/* style properties for images in weblinks div on hover */ div.weblinks img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ transition: opacity 0.5s; }

div.weblinks img:active { -webkit-filter: invert(100%); /* Safari */ filter: invert(100%); }

/* ==== For Template:Update ==== */ /* in-out animation */ @keyframes update { 0%   {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} 25%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 50%  {color: yellow;text-shadow: 0 0 3px red, 0 0 5px orange;} 75%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 100% {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} } /* apply 'update' animation to span update class */ .update { animation: update 2s infinite linear; }

/* ==== For Template:Franchise Overview ==== */ /* circle class for Franchise Overview images */ .circle img { border-radius: 50%; -webkit-transition: border-radius 1s; /* Safari */ -moz-transition: border-radius 1s; -o-transition: border-radius 1s; transition: border-radius 1s; } .circle img:hover { border-radius: 0%; }

/* ==== For Template:Introduction images ==== */ /* spin animation */ @keyframes spin { from  	{transform: rotate(0deg);} to 		{transform: rotate(360deg);} } /* apply spin animation to images in img-spin class containers*/ .img-spin img { animation: spin 10s infinite linear; } /* make images glow on hover in .img-glow class containers*/ .img-glow img { -webkit-filter: brightness(100%); filter: brightness(100%); transition: filter 0.5s, -webkit-filter 0.5s; } .img-glow img:hover { -webkit-filter: brightness(150%); filter: brightness(150%); transition: filter 0.5s, -webkit-filter 0.5s; }

/* apply stylization to news headlines */ .news { text-shadow: 0 0 6px #0080FF; }

/* Remove external url icon */ .remove-ext-icon a.external::after { all: unset; }

/* MP right rail tabber hotfix */ .rcs-container .mp-module .tabber .wds-tabs, .rcs-container .mp-module .tabber, .rcs-container .mp-module { max-width: 290px; box-sizing: border-box; }