Common.css

In altre lingue: Deutsch • English • Español • Polski • Português • 中文

Le modifiche ai file CSS e Javascript devono essere conformi alle regole di design del wiki.

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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Clear the cache in Tools → Preferences

@import url("/MediaWiki:CosmeticsTables.css?action=raw&ctype=text/css");
@import url("/MediaWiki:Base64Files.css?action=raw&ctype=text/css");

/*Event Imports*/
/*Blood Moon*/
/*@import url("/MediaWiki:BloodMoonEvent.css?action=raw&ctype=text/css");*/
/*Event Imports END*/

/* CSS placed here will be applied to all skins */
:root{
	--fandom-global-nav-background-color: #1e0c1b;
	--fandom-global-nav-icon-border-color: #f5f3f5;
	--fandom-global-nav-link-color: #ffc500;
	
	--fandom-global-nav-text-color: #fff;
    --fandom-global-nav-link-color: #ffc500;
    --fandom-global-nav-link-color--hover: #997600;
    --fandom-global-nav-icon-color: #f5f3f5;
    --fandom-global-nav-icon-background-color: rgba(89,83,88,0.5);
    --fandom-global-nav-icon-background-color--hover: #595358;
    --fandom-global-nav-icon-background-color--active: #595358;
    --fandom-global-nav-icon-border-color: #f5f3f5;
    --fandom-global-nav-icon-border-color--hover: hsla(0,0%,100%,0.5);
    --fandom-global-nav-icon-border-color--active: #f5f3f5;
    --fandom-global-nav-bottom-icon-color: #f5f3f5;
    --fandom-global-nav-counter-background-color: #f5f3f5;
    --fandom-global-nav-counter-label-color: #520044;
    --fandom-global-nav-mobile-logo: url(https://deadbydaylight.fandom.com/resources-ucp/dist/svg/wds-brand-fandom-logo-light.svg);
    --fandom-global-nav-search-active-link-background-color: #595358;
    --fandom-global-nav-search-active-link-border-color: #fff;
    --fandom-global-nav-logo-separator-color: #d6d0d5;
    --fandom-global-nav-search-separator-color: #595358;
    
    --perk-switch-animation-durtation: 3s;
}
/*Logo Size*/
.fandom-community-header__image img{
	max-width: 350px !important;
}
/*mild gradient added*/
.theme-fandomdesktop-dark .page__main{
	    background: linear-gradient(90deg, var(--theme-page-background-color) 0%, #242424 50%, var(--theme-page-background-color) 100%);
}

/*Dynamic Boxes*/
.dynamicBox .dynamicContent{
    --border-dynBox-width: 2px;
    --text-dynBox-color: inherit;
	padding: 5px 5px 0 7px;
    margin: 0 7px;
    display: inline-block;
    
    color: var(--text-dynBox-color);
    background: var(--background-dynBox-color);
    border: 7px solid rgb(154 40 40 / 80%);
    border-image: repeating-linear-gradient(-45deg, var(--secondary-dynBox-color), var(--secondary-dynBox-color) 10px, var(--accent-dynBox-color) 10px, var(--accent-dynBox-color) 20px) 7;
    box-shadow:
    	inset 0 0 0 var(--border-dynBox-width) var(--terciary-dynBox-color), inset 0px 0px 15px #000000,
    	0 0 0 var(--border-dynBox-width) var(--terciary-dynBox-color);

}
/*PTB border, used in ptb() function and template*/
.dynamicBox .dynamicContent.ptb { /*.ptb to be removed*/
    --accent-dynBox-color: #3b144e;
    --secondary-dynBox-color: #531b6e;
    --terciary-dynBox-color: #30003c;
    --background-dynBox-color: #53006c54;
    --text-dynBox-color: #bcb1c0;
}

.dynamicBox .dynamicContent.deletedBox {
    --accent-dynBox-color: #4e1414;
    --secondary-dynBox-color: #6e1b1b;
    --terciary-dynBox-color: #3c0000;
    --background-dynBox-color: #6c000054;
    --text-dynBox-color: #e7a5a5;
}

.dynamicBox .dynamicContent.wipBox{
	--accent-dynBox-color: #4e4814;
    --secondary-dynBox-color: #6e671b;
    --terciary-dynBox-color: #3c3400;
    --background-dynBox-color: #61500054;
    --text-dynBox-color: #bbbaad;
}
/*DynamicBox is wrapper*/
.dynamicBox {
    display: inline-block;
}

.dynamicBox .dynamicTitle {
    font-size: smaller;
    font-weight: 500;
    color: #ffe28f;
    padding: 0 7px;
}

/*Outdated and WIP box glow animation*/
.wipBox .ambox-image img {
    animation: wipGlow 1.5s infinite alternate;
}

@keyframes wipGlow {
	from {
		filter: drop-shadow(0px 0px 0px #ffe40000);
	
	}
	to {
		filter: drop-shadow(0px 0px 50px #ffe40055)
		        drop-shadow(0px 0px 5px  #ffb400);
	}
}

/*Deleted/Removed Box*/
.removedInfoBox .ambox-image img {
    animation: removedGlow 1.5s infinite alternate;
}

@keyframes removedGlow {
	from {
		filter: drop-shadow(0px 0px 0px #0b0000f7);
	}
	to {
	    filter: drop-shadow(0px 0px 50px #0d0800d1) 
	    		drop-shadow(0px 0px 5px  #c40601eb);
	
	}
}