MediaWiki:Fandomdesktop.css

.theme-fandomdesktop-dark .fandom-community-header__image img { filter: drop-shadow(2px 1px 0px black) !important; }

/**==================
 * Font Imports

=
======**/ /* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');

/* Additional Fonts */ @font-face { font-family: "Funbold"; font-style: Regular; src: url("https://db.onlinewebfonts.com/t/1052a946a7c1c2dc03a0d92233290c6a.woff") format("woff"); }

/**==================
 * Mainpage Header

=
======**/ /* For Border */ position: relative; min-height: 300px; padding: 35px 35px 20px; border: transparent; margin: 0 0 16px; overflow: hidden; } /* For Border - Light Theme */ .theme-fandomdesktop-light #zom100border::before { content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-style: solid; border-width: 150px 114px; -moz-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757910772166656/Border_For_Light.png) 150 114 repeat; -webkit-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757910772166656/Border_For_Light.png) 150 114 repeat; -o-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757910772166656/Border_For_Light.png) 150 114 repeat; border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757910772166656/Border_For_Light.png) 150 114 fill repeat; pointer-events: none; } /* For Border - Dark Theme */ .theme-fandomdesktop-dark #zom100border::before { content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-style: solid; border-width: 150px 114px; -moz-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757911229354025/Border_For_Dark.png) 150 114 repeat; -webkit-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757911229354025/Border_For_Dark.png) 150 114 repeat; -o-border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757911229354025/Border_For_Dark.png) 150 114 repeat; border-image: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139757911229354025/Border_For_Dark.png) 150 114 fill repeat; pointer-events: none; }
 * 1) zom100border {

/* For Text Header */ /* For Border - Light Theme */ .theme-fandomdesktop-light #headerleft { vertical-align: inherit; text-align: center !important; font-family: "Funbold"; font-weight: bolder !important; font-size: 40px; letter-spacing: 1px; color: #ffffff; text-shadow: 4px 4px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; background: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139759195638480986/Header_Light.png); background-repeat: no-repeat; background-size: 330px; background-position: center; padding-top: 10px; padding-bottom: 10px; } .theme-fandomdesktop-light #headerright { vertical-align: inherit; text-align: center !important; font-family: "Funbold"; font-weight: bolder !important; font-size: 40px; letter-spacing: 1px; color: #ffffff; text-shadow: 4px 4px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; background: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139759195638480986/Header_Light.png); background-repeat: no-repeat; background-size: 245px; background-position: center; padding-top: 10px; padding-bottom: 10px; } /* For Border - Dark Theme */ .theme-fandomdesktop-dark #headerleft { vertical-align: inherit; text-align: center !important; font-family: "Funbold"; font-weight: bolder !important; font-size: 40px; letter-spacing: 1px; color: #000000; text-shadow: 4px 4px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; background: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139759195395194990/Header_Dark.png); background-repeat: no-repeat; background-size: 330px; background-position: center; padding-top: 10px; padding-bottom: 10px; } .theme-fandomdesktop-dark #headerright { vertical-align: inherit; text-align: center !important; font-family: "Funbold"; font-weight: bolder !important; font-size: 40px; letter-spacing: 1px; color: #000000; text-shadow: 4px 4px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; background: url(https://cdn.discordapp.com/attachments/1099172555325182074/1139759195395194990/Header_Dark.png); background-repeat: no-repeat; background-size: 245px; background-position: center; padding-top: 10px; padding-bottom: 10px; }

/**==================
 * WELCOME BANNER **

=
======**/ element.style { margin-top: -20px;margin-bottom: 10px; } .hpbanner1 { background: url(https://static.wikia.nocookie.net/zombie-100/images/7/7b/Zom100Splash.jpg/revision/latest?cb=20220724140431); background-size: cover !important; background-repeat: no-repeat; background-position: top !important; background-position-y: center !important; margin-bottom: 0px; transform: scaleX(1); padding-top: 0px; } .hpbanner2 { background: linear-gradient(360deg,#000000eb,transparent); transform: scaleX(1); } .hpfont-header { text-transform: uppercase; color: #ffffff; text-shadow: 0 0 5px #000000b8; text-align: center; font-weight: 900; font-size: 45px; line-height: 130%; padding-top: 80px; letter-spacing: 2px; }

/*============================
 * Template: Character Portal

=
===============*/ /* For Portal - Light Theme */ .theme-fandomdesktop-light #mpcharportal { position: relative; min-height: 190px; padding: 0px; border: transparent; border-radius: 50% !important; background: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789066502672424/BG_Light.png); background-size: cover !important; display: inline-block; overflow: hidden !important; transition: all 0.3s ease; } .theme-fandomdesktop-light #mpcharportal::after { content: ''; position: absolute; top: -7px; right: 0; bottom: 0; left: -7px; overflow: hidden !important; border-style: solid; border-width: 235px 228px; -moz-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769350598796/Portal_Light.png) 220 220 fill repeat; -webkit-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769350598796/Portal_Light.png) 220 220 fill repeat; -o-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769350598796/Portal_Light.png) 220 220 fill repeat; border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769350598796/Portal_Light.png) 220 220 fill repeat; pointer-events: none; } /* For Portal - Dark Theme */ .theme-fandomdesktop-dark #mpcharportal { position: relative; min-height: 190px; padding: 0px; border: transparent; border-radius: 50% !important; background: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789066745946132/BG_Dark.png); background-size: cover !important; display: inline-block; overflow: hidden !important; transition: all 0.3s ease; } .theme-fandomdesktop-dark #mpcharportal::after { content: ''; position: absolute; top: -7px; right: 0; bottom: 0; left: -7px; overflow: hidden !important; border-style: solid; border-width: 235px 228px; -moz-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769056981072/Portal_Dark.png) 220 220 fill repeat; -webkit-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769056981072/Portal_Dark.png) 220 220 fill repeat; -o-border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769056981072/Portal_Dark.png) 220 220 fill repeat; border-image: url(https://cdn.discordapp.com/attachments/974921474068611132/1139789769056981072/Portal_Dark.png) 220 220 fill repeat; pointer-events: none; } .mpcharportal:hover { opacity: 0.8; filter: alpha(opacity=60); } .mpcharportal-img { display: inline-block; } .overlay-container { position: relative; width: 100%; } .overlay-image { display: block; width: 100%; height: auto; } .overlay { border: 6px solid var(--theme-link-color); background: rgb(var(--theme-link-color--rgb), 0.60); position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 0.3s ease; } .overlay-container:hover .overlay {/* Hover - Credits to the Zero Game Wiki */ opacity: 1; } .overlay-text { display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; font-family: Funbold; color: var(--theme-page-background-color) !important; font-size: 30px !important; }

/*============================
 * Reddit Widget Customization

=
===============*/ .rembeddit { /* Main widget */ background: transparent !important; border: none !important; color: var(--theme-page-text-color) !important; } .reddit-header { background: transparent !important; font-family: 'Funbold' !important; letter-spacing: 0.1em !important; } .reddit-link-title { /* Post title */ color: var(--theme-page-text-color) !important; } .rembeddit .linkflairlabel { background: var(--theme-page-background-color) !important; color: var(--theme-page-text-color) !important; font-weight: bolder !important; text-transform: uppercase !important; font-size: 8px !important; padding-left: 5px !important; padding-right: 5px !important; border-radius: 5px !important; border: 1px solid var(--theme-link-color) !important; } .reddit-comment-link, .rembeddit small { /* Points/comments text */ color: var(--theme-link-color) !important; }

/*============================
 * Mainpage Hover Table

=
===============*/ /* Main Table =========== */ .mainpage-module { background: var(--theme-bg-color1) var(--theme-bg-img1) repeat; border-spacing: 0; border: 1px solid var(--theme-bg-color3); font-size: 15px; color: var(--theme-text-color1); margin: 0 0 5px 0; width: 100%; } .mainpage-module { -khtml-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; overflow: hidden; } .mainpage-module td, .mainpage-module th { padding: 5px; } .mainpage-module th a { color: inherit; } /* For Title =========== */ .mainpage-module-title { background: var(--theme-bg-color3) var(--theme-bg-img2) top left no-repeat; color: var(--theme-text-color3); font-size: 16px; text-shadow: var(--theme-title-shadow); } /* 1st Header =========== */ .mainpage-module-header { background: var(--theme-bg-color3); color: var(--theme-text-color3); } /* 2nd Header =========== */ .mainpage-module-header2 { background: var(--theme-bg-color2); color: var(--theme-text-color2); } /* Specific templates of the main page =========== */ .mainpage-content td:hover { background: rgb(var(--theme-link-color--rgb), 0.50); color: var(--theme-page-text-color); text-shadow: black; } .mainpage-content td:hover a { color: var(--theme-page-text-color); }

/*============================
 * Template: Volume Hover
 * For Mainpage Volume Setup

=
===============*/ .book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 110px; } .book-container { width: 110px; } .book-container-comic { width: 110px; } .book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; } .book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; } .book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); } .book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); }

.book-cover { position: relative; z-index: 10; } .book-cover img { height: auto; max-width: 100%; vertical-align: bottom; } .book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); } .book-spine-comic1 { background: #FFFFFF; } .book-spine-comic2 { background: #FFFFFF; } .book-spine-comic3 { background: #FFFFFF; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #FFFFFF; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; } .book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px; } .book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #FFFFFF; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; } .book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/*============================ Credits: My Hero Academia Wiki
 * Template: Site Portal

=
===============*/ .site_portal:hover { animation: spin 0.4s 1; } @keyframes spin { 100% {		transform: rotate(360deg); } }