MediaWiki:Wikia.css

From Tower Defense Simulator Wiki
Jump to navigation Jump to search

Note: After publishing, 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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*Upgrade Styling - Thanks for TB Wikia for this*/
.upgrade {
border: 2px white;
border-radius: 5px;
margin: 5px;
padding: 5px;
}

.upgrade-z {
width: 50%;
}

/* ------------[Glowing Link Effect. href]------------   */ 
a:hover {
    text-shadow: white 2 2 5px;
    color: white !important;
    text-decoration:none;
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -ms-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition: all .2s linear 0s;
}

a:visited:hover, .color2 a:visited:hover { 
  color:white;
  text-shadow: white 0 0 4px;
  text-decoration:none;
}
 
a:hover, .color2 a:hover {
  color:white;
  text-shadow: white 0 0 4px;
  text-decoration:none;
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -ms-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition: all .2s linear 0s;
}
 
.WikiaFooter .tools-menu a:hover {
  color:white;
  text-shadow: white 0 4px 4px;
  text-decoration:none;
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -ms-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition: all .2s linear 0s;
}
 
a.new:hover {
  color:white;
  text-shadow: white 0 0 4px;
  text-decoration:none;
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -ms-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition: all .2s linear 0s;
}

/* ------------[The Good Stuff]------------ */ 
.hoverimage img {
    opacity: 0.80;
    filter: alpha(opacity=70);
   -webkit-transition: opacity .2s ease-in-out;
}
 
.hoverimage img:hover {
    opacity: 1.5;
    filter: alpha(opacity=200);
}

/* ------------[Wikia Selection Bar Hover n' Chevron.]------------ */ 
.WikiaDropdown .selected-items:hover {
    background-color: #D8DDEA !important;
    cursor: default;
}
.WikiaDropdown .selected-items .arrow {right: 5px;}
 
/* ------------[Wikia Selection Bar Dropdown Menu, Items, Hovers, Selected n' Selected Hovers.]------------ */ 
.WikiaDropdown .dropdown {box-shadow: none !important;} 
.WikiaDropdown .dropdown-item label {cursor: default;}
.WikiaDropdown .dropdown-item:hover {background: #D8DDEA !important;}
.WikiaDropdown .dropdown-item.selected {background: none !important;}
.WikiaDropdown .dropdown-item.selected:hover {background: #D8DDEA !important;}

/* == Containers == */
.ContainerColumn.TwitterContainer-Dark p, .ContainerColumn.TwitterContainer-Light p {
	margin: 0 !important;
}
.ContainerColumn.TwitterContainer-Dark {
	background: #292f33;
}
.ContainerColumn.TwitterContainer-Light {
	background: #fff;
}
.ContainerColumn.TwitterContainer-Dark .tabber .tabbertab, .ContainerColumn.TwitterContainer-Light .tabber .tabbertab {
	padding: 0 !important;
}
.TextHeader {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background-color: var(#0f2f6b);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	color: #fff !important;
	font-family: var(Source Sans Pro) !important;
	letter-spacing: var(--font-spacing) !important;
	font-size: 14px;
	line-height: 23px;
	padding: 7px 15px !important;
	text-shadow: var(0 0 10px rgba(1, 42, 89, 0.5));
}
.TextHeader h1 {
	margin: 0 !important;
	font-size: 20px !important;
	text-shadow: inherit;
}
.TextHeader h3 {
	margin: 0 !important;
	text-shadow: inherit;
}
.TextHeader h1 a {
	color: #fff;
}
.TextHeader a:hover {
	text-decoration: none;
}
.TextHeader a:active {
	text-decoration: underline;
}
.ContainerColumn {
	background-color: var(#2a3742);
	border-radius: var(5px);
	border: 1px solid var(#2a3742);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin: 0 0 10px;
	padding: 0;
	overflow: hidden;
}
.ContainerColumn.ImageContainer {
	position: relative;
}
.ContainerColumn.ImageContainer img {
	border-radius: var(5px);
	height: auto;
	width: 100%;
}
.ContainerColumn.ImageContainer .PlayButton {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background-color: #02b757;
	border-color: #02b757;
	border-radius: 5px;
	border: 1px solid transparent;
	color: #fff;
	cursor: pointer;
	font-size: 21px;
	font-weight: 400;
	left: 50%;
	opacity: 0;
	position: absolute;
	text-align: center;
	top: 70%;
	transform: translate(-50%, -50%);
	transition: top cubic-bezier(.29, 1.18, .25, 1) .5s, opacity 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
	white-space: nowrap;
}
.ContainerBody {
	color: var(#a8a8a8);
	height: auto;
	margin: 0;
	overflow-x: hidden;
	padding: 5px 10px;
}
.ContainerColumn.ActivityFeed ul.activityfeed {
	margin: 0 0 0 25px !important;
}
.ContainerColumn.ActivityFeed ul.activityfeed li, .ContainerColumn.ActivityFeed div > div li {
	list-style: none !important;
}
.ContainerColumn.ActivityFeed .TextHeader + .ContainerBody {
	padding: 0 !important;
}
.ContainerColumn.ActivityFeed .ContainerBody {
	padding-top: 0 !important;
}
.ContainerColumn.ActivityFeed ul.activityfeed li .activityfeed-diff {
	display: none;
}
.ContainerColumn.DiscordContainer {
	background: #2c2f33;
	border-color: #23272a;
}
.ContainerColumn.DiscordContainer .TextHeader {
	background-color: #7289da !important;
}
.ContainerColumn.DiscordContainer .ContainerBody {
	padding: 10px 10px 0;
}
.ContainerColumn.DiscordContainer .DiscordButton {
	background-color: #7289da;
	border-radius: 3px;
	border: 1px solid #677bc4;
	color: #fff;
	font-size: 15px;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	transition: all 0.12s ease-out;
}
.ContainerColumn.DiscordContainer .DiscordButton:hover, .ContainerColumn.DiscordContainer .DiscordButton:focus-within {
	background-color: #677bc4;
	border-color: #5b6eae;
	box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .4);
	transform: translate3d(0, -1px, 0);
}
.ContainerColumn.DiscordContainer .DiscordButton:active {
	background-color: #5b6eae;
	border-color: #4f5f99;
}
.ContainerColumn.DiscordContainer .DiscordButton p {
	margin: 0 !important;
}
.ContainerColumn.DiscordContainer .DiscordButton a {
	color: #fff !important;
	display: block;
	font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bold;
	padding: 10px;
	text-decoration: none;
}
.ContainerColumn.DiscordContainer .DiscordButton a.external::after {
	display: none;
}

/*Tabber stylizing */
.tabbernav {
    font-family: "Source Sans Pro" !important;
    font-weight: inherit !important;
    font-size: 18px !important;
    border-bottom: 1px solid #000 !important;
    padding: 0.4em 0.4em !important;
    transition: background .2s ease;
    overflow: hidden;
}
    .tabbernav a {
        padding: 0.4em 0.4em !important;
        margin: auto !important;
        color: white !important;
        border: none !important;
        background: #024a63 !important;
        border-radius: 4px 4px 0 0;
    }
    .tabberactive a {
        color: white !important;
        background: #01759C !important;
        border-radius: 4px 4px 0 0;
    }
    .tabbernav :not(.tabberactive) a:hover {
        background: rgba(2, 131, 174, 0.3) !important;
        transition: background .2s ease;
        border-radius: 4px 4px 0 0;
    }
    .tabbernav :not(.tabberactive) a:active {
        background: rgba(2, 131, 174, 0.5) !important;
        border-radius: 4px 4px 0 0;
    }
    .tabbertab {
        border: none !important;
        padding: 0 !important;
    }

.WikiaArticle .wds-tabs {
    list-style: none;
}

/*VE Editor Warning*/

body.ve .WikiaMainContent::before {
    animation-timing-function: ease;
    animation: PopoverBottom 0.5s 0.25s backwards;
 
    content:
        "Use the 𝐂𝐥𝐚𝐬𝐬𝐢𝐜 𝐄𝐝𝐢𝐭𝐨𝐫 if you are unable to publish your edits!\a"
        "(See [ 🖉 EDIT ] dropdown)";
 
    white-space: pre;
    font-size: 110%;
    text-align: center;
    display: block;
 
    background-color: #f5f5f5;
    margin: 3px;
    padding: 3px;
}

/*Infobox*/

.portable-infobox .pi-title {
    background:url('https://static.wikia.nocookie.net/tower-defense-sim/images/a/a6/Header.png/revision/latest?cb=20201017062748');
    }

.portable-infobox .pi-item-spacing {
   padding: 8px 10px;
   overflow: hidden;
}

.pi-image-collection {
	font-size: 12px;
    text-align: center;
}

.portable-infobox .pi-image-collection-tabs {
   font-size: 12px;
   padding: 6px 8px;
   background: #5DAED3;
   font: Source Sans Pro, Raleway, Roboto, sans-serif;
   text-align: center;
}
 
/*Rail Mods*/

.WikiaRail .rail-module {
    border: 8px solid transparent;
    border-radius: 7px;
    background: transparent;
    transition: 0.2s ease;
    transition-property: border, background;
}
    .WikiaRail .rail-module:hover {
        border: 8px solid rgba(211, 211, 211, 0.2);
        background: rgba(211, 211, 211, 0.5);
        border-radius: 6px;
    }
    
/*Roblox Interwiki Template*/

.RobloxWikis-Head {
    background: #025D7C !important;
    position: relative;
}
    .RobloxWikis-Head:Before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-style: solid;
        border-width: 0 0 12px 12px;
        border-color: #025D7C #FFFFFF;
    }
    .RobloxWikis a:hover {
        text-decoration: underline #222;
    }
    .RobloxWikis-HeadButton {
        border: none !important;
        background: #000 !important;
        box-shadow: 0 0 1px #000;
    }
    .RobloxWikis-OddRow {
        background: #555;
    }
    .RobloxWikis-EvenRow {
        background: #333;
    }
    
/*RWA Rails*/

.WikiaRail .module, .ChatModule, .ForumActivityModule, .ajax-poll, .MainPageModule {
    margin: 0 0 10px !important;
    padding: 10px 10px 10px !important;
    border: 0px solid #001244 !important;
    overflow: hidden;
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    background: #a2a2a2 !important;
    box-shadow: 0 0 1px #000000 !important;
    opacity: 1 !important;
 
}

/*Angled Header*/

.angledheader {
    position: relative;
    font: 22px source sans pro;
    width: auto;
    height: auto;
    color: white;
    background: #33577A;
	line-height: 30px;
	text-align: center;
	width: 98%;
}
    .angledheader:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-style: solid;
        border-width: 0 0 12px 12px;
        border-color: #33577A #E8E8E8;
    }

.angleddata {
	line-height:10px;
	margin: auto;
	border: 4px solid #33577A;
	background-color: white;
	text-align: center;
}

div.wikiaPhotoGallery-slider-body {
    background: transparent; 
}
div.wikiaPhotoGallery-slider-body .horizontal .description-background {
    height: 7px; 
    opacity: 0; 
}
div.wikiaPhotoGallery-slider-body .nav > img, div.wikiaPhotoGallery-slider-body .nav p > img {
    display: none;
}
.wikiaPhotoGallery-slider-body .nav {
    background: transparent;
    border: 2px solid white;
    border-radius: 50%;
    width: 7px;
    cursor: pointer;
    height: 7px;
    position: absolute;
}
.wikiaPhotoGallery-slider-body .selected {
    background: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 7px;
    cursor: pointer;
    height: 7px;
}
 .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-0 .nav {
    right: 70px !important;
}
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-1 .nav {
    right: 50px !important;
}
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-2 .nav {
    right: 30px !important;
}
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-3 .nav {
    right: 10px !important;
}
.wikiaPhotoGallery-slider-body a.wikia-button.secondary {
    background-color: rgba(235, 235, 235, 0.9) !important;
    background-image: none !important;
    border: 0 !important;
    color: black !important;
    text-transform: uppercase;
}
 
.wikiaPhotoGallery-slider-body a.wikia-button.secondary:hover {
    background-color: rgba(235, 235, 235, 0.9) !important;
    background-image: none !important;
    border: 0 !important;
    color: black !important;
    text-transform: uppercase;
}
 
.wikiaPhotoGallery-slider-body .horizontal .description {
    background: rgba(0, 0, 0, 0.85) !important;
    padding: 10px 15px 20px 15px !important;
    border-top-right-radius: 30px !important;
    width: 250px !important; 
}

/*Rail Headers*/
.media-module {
    display: flex;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
    font-size: 0;
    font-weight: bold;
    line-height: 30px;
    min-height: 30px;
    margin-bottom: 16px;
    padding-left: 2px;
}
    .media-module::before {
        align-self: center;
        content: '';
        -webkit-mask-image: url('https://tds.fandom.com/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-external.svg');
        background-color: rgba(0,0,0 ,0.75);
        background-size: contain;
        display: inline-flex;
        height: 13px;
        width: 13px;
        margin-right: 6px;
    }
    .media-module::after {
        content: 'Other Media';
        display: inline;
        font-size: 16px;
    }

.wikia-photogallery-add {
    display: none !important;
}

#MessageWall .entity-content,
#articleComments .entity-content {
    overflow: hidden;
}

 .toc {
    background-color: rgba(194, 194, 194, 0.6);
    border: 1px;
    margin: 0.5em;
    padding: 0;
}
	.toc::before {
		content: "";
		position: absolute;
		border-style: solid;
		border-width: 0 0 12px 12px;
		border-color: rgba(0, 0, 0, 0) #e8e8e8;
	}
	.toc .toctitle {
		padding: 9px 12px;
	}
	.toc ul {
		padding: 0 10px 1px 0;
	}
	
/* Mainpage buttons */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

.fade-In {
    margin: auto;
	opacity: 0;  /* make things invisible upon start */
	-webkit-animation: fadeIn ease 1;  /* calls fadeIn keyframe, uses ease function */
	-moz-animation: fadeIn ease 1;
	animation: fadeIn ease 1;

	-webkit-animation-fill-mode: forwards;  /* makes sure we remain at opacity 1 after fade-in */
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 0.35s;
	-moz-animation-duration: 0.35s;
	animation-duration: 0.35s;
}