MediaWiki:Fandomdesktop.css

/* ==================== TEMPLATE: CHARPORTAL - Hover

=
===========*/ /* Hover Seasons - Credits to the Zero Game Wiki */ .overlay-chara { background-color: none; margin: 1em 1em 2em 1em; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 30px var(--theme-link-color), 0 0 20px var(--theme-link-color), 0 0 10px var(--theme-link-color); padding: 3px; width: 200px; position: relative; } .overlay-container { position: relative; width: 100%; border-radius: 50%; box-shadow: 2px var(--theme-link-color); } .overlay-image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 0.6s ease; background: rgb(15, 15, 15, 0.6); border-radius: 50%; box-shadow: 2px var(--theme-link-color); } .overlay-container:hover .overlay { opacity: 1; } .overlay-text { display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; color: var(--theme-link-color); font-size: 12px; }

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

=
===========*/ element.style { margin-top: -20px;margin-bottom: 10px; } .hpbanner1 { background: url(https://cdn.discordapp.com/attachments/977483596468207636/1083801620166492190/IMG_20230311_011822.jpg); background-size: cover; background-position: center; background-position-y: top; border: 1px solid white; margin-bottom: 0px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .hpbanner2 { background: linear-gradient(360deg,#000000eb,transparent); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* ==================== TEMPLATE: HEADER

=
===========*/	margin-top: -8px; padding-bottom: 42px; } .buddydad-header_cont{ padding: 0 12.5%; }
 * 1) buddydad-header{

.buddydad-header_cont:not(:first-child){ padding-top: 8px; } .buddydad-header_h3 { display: flex-direction: row; display: flex-wrap: nowrap; display: align-content: normal; display: justify-content: space-between; display: align-items: flex-end; justify-content: space-between; align-items: flex-end; position: relative; padding-bottom: 4px; } .buddydad-header_h3-eng{ flex-shrink: 0; font-family: 'Racing Sans One', sans-serif; font-size: 37px; line-height: 1.2414; -webkit-text-stroke: 1px #222; color: var(--theme-link-color); vertical-align: bottom; display: flex-direction: row; display: flex-wrap: nowrap; display: align-content: normal; display: justify-content: space-between; display: align-items: flex-end; align-items: flex-end; } .buddydad-header_h3-eng span{ display: inline-block; line-height: 0.7; } .buddydad-header_h3-eng span:first-child{ font-size: 70px; } .buddydad-header_h3-eng span:last-child{ font-size: 37px; } .theme-fandomdesktop-light .buddydad-header_h3:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background-color: #fff; border: 1px solid #222; } .theme-fandomdesktop-dark .buddydad-header_h3:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background-color: #000; border: 1px solid #fff; }

/* ====================
 * COMMUNITY PAGE HEADER **

=
===========*/ .community-page-header { border-radius: 3px; left: 0; width: 100%; background: url(https://static.wikia.nocookie.net/buddydaddies/images/8/8e/Episode_1-3.jpg/revision/latest?cb=20230107104504); background-size: cover; background-position: center; } .community-page-header .community-page-header-welcome-message { color: #fff; font-size: 36px; font-family: 'Racing Sans One'; text-shadow: 0 0 10px black; font-weight: 700; line-height: 1.25; margin: 0; } .community-page-header .community-page-subheader-welcome-message { color: #fff; font-size: 18px; text-shadow: 0 0 10px black; font-weight: bolder; line-height: 1.25; margin: 6px 0 0; }

/* ==================== SCROLL BAR SETTING

=
===========*/
 * -webkit-scrollbar {

width: 8px; height: 8px; }
 * -webkit-scrollbar-track {

border-radius: 4px; background: #222; }
 * -webkit-scrollbar-thumb {

background: var(--theme-link-color); border-radius: 4px; margin: 2px; box-shadow: none; } html{ scrollbar-color: #222 var(--theme-link-color); scrollbar-width: thin; }

/* ==================== PAGE SIDE TOOL

=
===========*/ .page-side-tool { -webkit-box-pack: center; -webkit-box-align: center; align-items: center; background: var(--theme-link-color); border: none; border-radius: 50%; -webkit-box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%); box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%); color: white; cursor: pointer; display: -webkit-box; display: flex; height: 36px; justify-content: center; margin-bottom: 9px; outline: none; -webkit-transition: color .3s; transition: color .3s; width: 36px; }

/* ==================== ** DISCORD RAIL

=
===========*/ .discord-widget .widget-header { background-color: var(--theme-link-color); } .discord-widget .widget-theme-light .widget-body { background-image: url(https://cdn.discordapp.com/attachments/969032013451497542/1063665973216944128/IMG_20230113_235437.jpg); box-shadow: 0 1px 0 rgb(0 0 0 / 20%); background-size: cover; background-position: center; } .discord-widget .widget-member-avatar img { border: 2px solid white; background-color: white; } .discord-widget .widget-member .widget-member-name { background-color: var(--theme-link-color); color: #fff; border: 2px solid white; } .discord-widget .widget-theme-light .widget-footer { background-color: var(--theme-link-color); } .discord-widget .widget-theme-light .widget-footer-info { color: white; } .discord-widget .widget-theme-light .widget-btn-connect { color: var(--theme-link-color); background-color: white; border: 2px solid white; } .discord-widget .widget-theme-light .widget-role-name { color: white; background: var(--theme-link-color); padding: 5px; border-radius: 8px; border: 2px solid var(--theme-link-color); } .discord-widget .widget-body::-webkit-scrollbar { width: 10px; } .discord-widget .widget-body::-webkit-scrollbar-track { background: #fff; margin: 3px 0; } .discord-widget .widget-body::-webkit-scrollbar-thumb { background:var(--theme-link-color); border: 2px solid var(--theme-link-color); border-radius: 10px; }

/* ====================
 * Navigation Dropdown

=
===========*/ .theme-fandomdesktop-dark .wds-dropdown { --wds-dropdown-background-color: var(--theme-link-color); --wds-dropdown-border-color: white; --wds-dropdown-text-color: white; --wds-dropdown-linked-item-color: white; --wds-dropdown-linked-item-background-color: rgba(var(--theme-link-color--rgb),0.1); --wds-dropdown-scrollable-shadow-color: 2px 2px 5px black; display: inline-block; position: relative; } .theme-fandomdesktop-light .wds-dropdown { --wds-dropdown-background-color: var(--theme-link-color); --wds-dropdown-border-color: black; --wds-dropdown-text-color: white; --wds-dropdown-linked-item-color: white; --wds-dropdown-linked-item-background-color: rgba(var(--theme-link-color--rgb),0.1); --wds-dropdown-scrollable-shadow-color: 2px 2px 5px black; display: inline-block; position: relative; } .wds-dropdown__content { background-color: var(--wds-dropdown-background-color); border: 1px solid var(--wds-dropdown-border-color); border-radius: 3px; color: white; display: none; left: 50%; min-width: 70%; padding: 7px 0; position: absolute; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .page-counter { font-weight: 500; line-height: 1; margin-left: auto; margin-right: 6px; text-align: right; text-transform: uppercase; font-weight: bolder; } body.skin-fandomdesktop #userProfileApp .user-identity-social__icon-tooltip { background-color: var(--wds-dropdown-background-color); border-color: var(--wds-dropdown-border-color); color: white; }

/* ==================== WIKI LINKS - Credits to Ghibli Wiki

=
===========*/ a:hover, a:active { color: #FFFFFF !important; text-decoration: none; text-shadow: #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px, #F2464A 0 0 7px; transition: all 0.5s ease-in; } a.new:hover, a.new:active { color: #FFFFFF !important; text-decoration: none; text-shadow: red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px; transition: all 0.5s ease-in; } a { transition: all 0.5s ease-out; } /* Hover Links */ .overlay-default { position: relative; width: 200px; } .overlay-hover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 200px; opacity: 0; transition: 0.8s ease; } .overlay-default:hover .overlay-hover { opacity: 1; }

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

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

/*==================*/ /*    Galleries    */ /*  Credits to AttackOnTitan Wiki */ /*==================*/

.buddy-gallery .wikia-gallery { max-height: 800px; overflow: auto; } .wikia-gallery-item .title { display: none; } .theme-fandomdesktop-dark .wikia-gallery-caption-below .lightbox-caption { font-weight: bold; width: 200px; color: white; text-align: center; } .theme-fandomdesktop-light .wikia-gallery-caption-below .lightbox-caption { font-weight: bold; width: 200px; color: black; text-align: center; } .gallery-image-wrapper, .wikia-gallery-item a { width: 100% !important; } .gallery-image-wrapper { background-color: #fff; border-color: #444 !important; bottom: 0 !important; height: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; } .gallery-image-wrapper:hover { background-color: #C9C9C9; } .wikia-gallery-item a { display: block !important; height: 100% !important; } .wikia-gallery-item img { position: relative; object-position: top; top: 50%; transform: translateY(-50%); }

/*===============*/ /* Right Rail   */ /*===============*/ .rail-module { border-top: 8px solid var(--theme-accent-color); background-color: var(--theme-page-background-color); margin-top: 0px; margin-bottom: 10px; overflow: hidden; padding: 9px; border-radius: 15px; page-break-inside: avoid; } .page__right-rail { --right-rail-background-color: var(--right-rail-background-color); background-color: var(--right-rail-background-color); border-radius: 0 3px 3px 0; min-height: 100%; }

/* Mbox */ .mbox { /* the background of the entire box */; background-color:var(--theme-page-background-color--secondary);

/* the border color of the entire box */ border-color: ;

/* the border thickness of the entire box */ border-width: ;

/* the default thick left border color; note this can be changed from within the template implementations using the "color" parameter */ border-left-color: ;

/* the rounded-ness of the corners */; border-radius: ;

/* the baseline font-size of the mbox */ font-size: ; } .mbox__content { /* the padding inside the mbox */ padding: ; } .mbox__content__image { /* the minimum width of the mbox's image (if bigger, use the "imagewidth" parameter in the template) */ width: ;

/* the spacing to the left of the text (i.e., the right of the image) */ padding-right: ; } .mbox__content__text__comment { /* the size of the text in the "comment" parameter */ font-size: ; } .mbox__content__aside { /* any particular modifications to the "aside" area can go here */

/* the maximum width of the aside area */ width: ; } .mbox__close { /* the appearance of the close symbol here */ content: '\00D7'; color: var(--theme-link-color); } .mbox__close:after { /* overwrite "content" here if you do not wish for the close symbol to be × */ content: '\00D7'; color: var(--theme-link-color); } .mw-collapsed + .mbox__close { /* modifications to the close symbol when the box is closed */ content: '\002B'; color: var(--theme-link-color); } .mw-collapsed + .mbox__close:after { /* overwrite "content" here if you do not wish for the close symbol to be + when the box is closed */ content: '\002B'; color: var(--theme-link-color); }

/* Navbox templates */ .navbox { width: 100%; font-size: 13px; text-align: center; border: 2px solid var(--theme-link-color); border-radius: 4px; border-spacing: 3px; margin: 5px 0 5px 0; background-repeat: no-repeat; background-position: right; background-position-y: bottom; background-size: 60px; background-color: transparent; } .navbox th { background: var(--theme-link-color); color: white; width: 200px; } .theme-fandomdesktop-dark .navbox .mw-collapsible-toggle { position: static; right: 0.5em; background: #420105e8; padding: 0 10px 0 10px; } .theme-fandomdesktop-light .navbox .mw-collapsible-toggle { position: static; right: 0.5em; background: #07355cde; padding: 0 10px 0 10px; } .navbox th a { color: white; } .mw-collapsible-toggle-default:before { content: ''; } .mw-collapsible-toggle-default:after { content: ''; }

/*===========================*/ /*        Tables            */ /*===========================*/

.buddydad { border: 1px solid #000; border-spacing: 0; margin: 0 auto; } .buddydad th { border: 1px solid #000; padding: 5px; } .buddydad tr { border: 1px solid #000; padding: 5px; }

/*===========================*/ /*        TABBER            */ /*===========================*/

/* Active Tab */ .wds-tabs__wrapper.with-bottom-border { border-bottom: 1px solid transparent; } .tabber .wds-tabs__tab.wds-is-current { color: #FFF; margin-bottom: 5px; margin-left: 3px; margin-right: 3px; background-color: var(--theme-link-color); transform: translate3d(0, 4px, 0); box-shadow: none; } /* Inactive Tab */ .tabber .wds-tabs__tab { width: auto; display: inline-block; padding: 0px 10px; margin-bottom: 5px; margin-left: 3px; margin-right: 3px; border-radius: 48px; border: 2px solid var(--theme-link-color); line-height: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: 20px; font-family: var(--font-family-eng); background-color: #FFF; color: var(--theme-link-color); box-shadow: 0px 4px 0 var(--theme-link-color); transition: .25s ease; }

/*===========================*/ /*      AFFILIATION         */ /*===========================*/ /* 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; } /* 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: var(--theme-link-color); color: white; text-shadow: black; } .mainpage-content td:hover a { color: white; }

/*============================
 * Custom BackToTopButton

=
===============*/   border-radius: initial; background: url(https://cdn.discordapp.com/attachments/1070485494363869226/1075318345794072627/Buddy_BackToTop.png) no-repeat !important; background-size: contain !important; width: 65px; height: 65px; }   visibility: hidden; }
 * 1) BackToTopBtn div {
 * 1) BackToTopBtn svg {