MediaWiki:Common.css

/* External CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Discord.css|MediaWiki:Infobox.css|u:dev:MediaWiki:BalancedSlider.css|u:dev:MediaWiki:SpoilerBlur.css");

/* Fonts */ @import url("https://fonts.googleapis.com/css?family=Inknut Antiqua:400,400italic,700,700italic"); /*	Colors: - #ad6e18: Accent -> Gold - #b6eda8: Accent -> Light green - #3a3a3a: Light background text -> Dark gray - #208c20: Active link glow -> Green - #bf0017: Red link glow -> Red - #eaf6e8: Tabs tab -> Light green - #45b72d: Tabs current tab -> Green - #f7f7f7: Tabs shadow -> Light gray - #ffffff: White - #000000: Black - #088235: Link -> Green (light mode) - #489C82: Link -> Green (dark mode)
 * root {
 * root {

--theme-Frieren-accent-gold: #ad6e18; --theme-Frieren-accent-green: #b6eda8; --theme-Frieren-light-text: #3a3a3a; --theme-Frieren-active-link-glow: #208c20; --theme-Frieren-red-link-glow: #bf0017; --theme-Frieren-tabs-tab: #eaf6e8; --theme-Frieren-tabs-current: #45b72d; --theme-Frieren-tabs-shadow: #f7f7f7; --theme-Frieren-font: 'Inknut Antiqua', rubik, helvetica, arial, sans-serif; --theme-Frieren-accent-gold--rgb: 173, 110, 24; --theme-Frieren-accent-green--rgb: 182, 237, 168; --theme-code-background--rgb: 183, 183, 183; --theme-code-border--rgb: 156, 156, 156;

--admin-Ryuu-color1--rgb: 85,228,224; --admin-Ryuu-color2--rgb: 75,68,224; --admin-Ryuu-color3--rgb: 64,198,238; --admin-Ryuu-color4--rgb: 177,36,224; --admin-Ryuu-color5: #00ffff; } /* Link changes */ a:hover, a:active { text-shadow: var(--theme-Frieren-active-link-glow) 0 0 3px; transition: all 0.5s ease-in; }

a.new:hover, a.new:active { text-shadow: var(--theme-Frieren-red-link-glow) 0 0 3px; transition: all 0.5s ease-in; } a { transition: all 0.5s ease-out; }

/* Improve header readability -- adapted from Kaguya Wiki (w:c:kaguyasama-wa-kokurasetai) */ .main-container .fandom-community-header__community-name-wrapper, .main-container .fandom-community-header__local-navigation .wds-tabs__tab-label { filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white); } /* Header icons */ .main-container .fandom-community-header__top-container .page-counter, .main-container .fandom-community-header__top-container .wds-button, .main-container .fandom-community-header__top-container .wds-button .wds-icon, .main-container .fandom-community-header__image { filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white); }

/* Code tag adjustments; CSS from Dev Wiki */ code, .code { background-color: rgba(var(--theme-code-background--rgb), 0.23); border: 1px solid rgba(var(--theme-code-border--rgb), 0.4); border-radius: 3px; color: inherit; padding: 1px 4px; font-family: monospace; }

/* Fix weird Mbox color issue on dark mode */ .theme-fandomdesktop-dark .mbox { background-color: var(--theme-page-background-color--secondary)!important; border-color: var(--theme-border-color)!important; }

/* Admin username highlights */ a[href="/wiki/User:Just_Some_Guy_in_a_Nutshell"] { background: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); border: 4px solid black; border-image: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); color: white!important; text-shadow: var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px!important; } a[href*="Message_Wall:Just_Some_Guy_in_a_Nutshell"] { background: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); border: 4px solid black; border-image: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); color: white!important; text-shadow: var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px!important; } .comments li[data-user="Just Some Guy in a Nutshell"] blockquote { background: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); border: 4px solid black; border-image: linear-gradient( 65.9deg, rgba(var(--admin-Ryuu-color1--rgb),1) 5.5%, rgba(var(--admin-Ryuu-color2--rgb),0.74) 54.2%, rgba(var(--admin-Ryuu-color3--rgb),1) 55.2%, rgba(var(--admin-Ryuu-color4--rgb),1) 98.4% ); color: white!important; text-shadow: var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px, var(--admin-Ryuu-color5) 0 0 7px!important; }

/* --- */ /* General theme design: START */ /* --- */ /* Content page border */ .page { border: 3px double var(--theme-Frieren-accent-gold); }

/* Fix heading scrollbar issue when using Inknut Antiqua */ .page-content h2 { overflow-y: hidden; }

/* Header embellishments */ .frieren_header:before, .frieren_header:after { content: ""; border-bottom: 3px double var(--theme-Frieren-accent-gold); flex: 1; height: 33px; /* height of img + border size */ } .frieren_header { overflow: hidden; display: flex; } /* Mainpage box */ .frieren_box { border: 2px double var(--theme-Frieren-accent-gold); border-image: linear-gradient(transparent, var(--theme-Frieren-accent-gold), transparent) 1; border-bottom: 0; border-top: 0; padding: 20px; }

.frieren_header h1 { align-items: center; color: var(--theme-Frieren-accent-gold); display: inline-flex; font-family: var(--theme-Frieren-font); font-weight: bold; margin: 0; text-align: center; }

/* Page reference adjustments */ ol.references { column-count: 2; column-gap: 2em; font-size: small; }

/* Affiliate wordmark sizing */ max-width: 100%; max-height: 50px; }
 * 1) wmDiv img {

/* Article tabs */ .article_tabs { font-family: var(--theme-Frieren-font); font-size: 14px; text-align: center; margin-bottom: 10px; } .article_tabs .tab { background-color: var(--theme-Frieren-tabs-tab); border: 2px outset var(--theme-Frieren-tabs-current); border-radius: 8px; box-shadow: inset 0 0 15px var(--theme-Frieren-tabs-shadow); display: inline-block; height: 2.4em; margin: 0 2px 0; min-width: 5em; padding: 0 0.5em; } .article_tabs .current_tab { background-color: var(--theme-Frieren-tabs-current); border: 0; color: white; } .article_tab table { height: 100%; width: 100%; } .article_tab td { vertical-align: center; } /* Improve contrast for article subpage tabs in dark mode */ .article_tabs a { color: var(--theme-Frieren-tabs-current); }

/* Generic article table design */ .generic_table { border-collapse: collapse; margin: auto; width: 100%; } .generic_table th { background-color: var(--theme-accent-color); color: var(--theme-Frieren-light-text); padding: 0.75em; text-align: center; } .generic_table td { padding: 0.75em; } .generic_table th a { color: var(--theme-Frieren-light-text); } /* Fancier table */ .frieren_table { border: 3px double var(--theme-Frieren-accent-gold); border-collapse: collapse; margin: auto; width: 100%; } .frieren_table th { background-color: var(--theme-Frieren-accent-gold); color: white; font-family: var(--theme-Frieren-font); font-weight: bold; text-align: center; } .frieren_table td { padding: 0.75em; } .frieren_table th a { color: white; }

/* Documentation */ .documentation { border: 1px solid var(--theme-Frieren-accent-gold); text-align: center; }

.documentation .doc_notice { background: var(--theme-Frieren-accent-gold); color: white; font-size: 75%; padding: 5px; }

/* Divider */ .divider { border-bottom: 5px double var(--theme-Frieren-accent-gold); border-image: url(https://static.wikia.nocookie.net/frieren/images/0/03/Divider.svg/revision/latest?cb=20230802073916) 50; margin: 5px; }

/* Decor for image thumbnails */ .thumb img { border-radius: 10px; } /* Prevent Special:NewFiles from having rounded borders */ .wikia-gallery .thumb img { border-radius: initial; } .thumb .thumbcaption { border-top: 5px double var(--theme-Frieren-accent-gold); border-image: url(https://static.wikia.nocookie.net/frieren/images/0/03/Divider.svg/revision/latest?cb=20230802073916) 50; margin-top: 10px; }

/* Tabber adjustments */ .tabber .wds-tabs__wrapper .wds-tabs__arrow-left, .tabber .wds-tabs__wrapper .wds-tabs__arrow-right { display: none; } /* Reset tabs */ .tabber .wds-tabs__tab-label, .tabber .wds-tabs__tab, .tabber .wds-tabs { all: unset; } /* Styling for the entire "tabber" group */ .tabber .wds-tabs__wrapper .wds-tabs { display: block; font-weight: bold; padding: 0.5em 0; margin-bottom: 1em; text-align: center; border-bottom: 5px double var(--theme-Frieren-accent-gold); border-image: url(https://static.wikia.nocookie.net/frieren/images/0/03/Divider.svg/revision/latest?cb=20230802073916) 50; } .tabber .wds-tabs__wrapper.with-bottom-border { border-bottom: 0; } /* All tabs */ .tabber .wds-tabs__tab { border: 3px double var(--theme-Frieren-accent-gold); border-bottom: 0; border-radius: 3px; font-size: smaller; line-height: 36px; margin: 0.5em; padding: 5px; } /* Unselected tabs */ .tabber .wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label { color: white; } .tabber .wds-tabs__tab:not(.wds-is-current) { background-color: var(--theme-Frieren-accent-gold); box-shadow: 0 0 8px var(--theme-Frieren-accent-gold); cursor: pointer; } /* Selected tab */ .tabber .wds-tabs__tab.wds-is-current { pointer-events: none; }

/* Navbox */ .navbox-group { font-family: var(--theme-Frieren-font); font-size: 90%; padding: 2px 10px; } .navbox-title, .navbox-group { background: var(--theme-Frieren-accent-gold); color: white; } .navbox-title a, .navbox-group a { color: white; } .navbox-title-text { font-family: var(--theme-Frieren-font); }

/* - */ /* General theme design: END */ /* - */

/* Front page character portal */ background: url(https://static.wikia.nocookie.net/frieren/images/7/7a/Frame_%28gold%29.png/revision/latest?cb=20230714085632) no-repeat center; background-size: cover; position: relative; height: 150px; width: 150px; transform-style: preserve-3d; }   position: absolute; left: 7px; top: 7px; display: block; margin: auto; transform: translateZ(-10px); } /* Default image: anime portrait */ display: block; }	display: none; } /* Hover image: manga portrait */ display: none; }	display: block; }	background-color: var(--theme-accent-color); position: absolute; bottom: 0; left: 50%; width: max-content; max-width: 100%; border-radius: 5px; color: var(--theme-Frieren-light-text); font-size: small; font-weight: bold; line-height: 170%; padding: 0 5px; text-align: center; transform: translate(-50%, 0); }	color: var(--theme-Frieren-light-text); } /* Countdown timer */ .countdown_release { display: flex; align-content: center; align-items: center; border: 1px solid var(--theme-Frieren-accent-gold); margin: .5em 1em; padding: 0; overflow: hidden; } .countdown_release .release_img { display: inline-block; float: left; vertical-align: middle; } .countdown_release .release_text { float: right; text-align: center; padding: 0 30px; vertical-align: middle; width: 100%; }
 * 1) portal_frame {
 * 1) portal_img {
 * 1) portal_img .default_img {
 * 1) portal_img:hover .default_img {
 * 1) portal_img .hover_img {
 * 1) portal_img:hover .hover_img {
 * 1) portal_text {
 * 1) portal_text a {