MediaWiki:Templates.css

/* add CSS here that is primarily used in templates */

/* Appellation Tables */ .appellation table, .appellation tr, .appellation td { border:1px solid var(--theme-border-color); }

.appellation td { padding: 5px; }

/* --- start of Tempalte:ambox --- */ /* Ambox design */ .ambox { font-size: 95%; width: 80%; margin: 0 auto; border: 1px #AAA solid; border-left: 10px solid #228b22; border-collapse: collapse; background-color: #EEE; }

/* Ambox colours */ .ambox-blue { border-left: 10px solid #1e90ff; /* Blue (notice) */ } .ambox-red { border-left: 10px solid #b22222; /* Red (delete/serious) */ } .ambox-orange { border-left: 10px solid #f28500; /* Orange (content) */ } .ambox-yellow { border-left: 10px solid #f4c430; /* Yellow (style) */ } .ambox-purple { border-left: 10px solid #9932cc; /* Purple (merge) */ } .ambox-gray { border-left: 10px solid #bba; /* Gray (protection) */ } .ambox-green { border-left: 10px solid #228b22; /* Green */ }

/* Ambox small text */ .ambox-smalltext { font-size: smaller; margin-top:0.5em; margin-left:0.8em; }

/* Ambox image */ .ambox-image { /* The left image cell */ width: 60px; padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */ text-align: center; }

@media print { .ambox { display: none; } }   /* no ambox when printing */ /* --- end of Tempalte:ambox --- */

/* --- start of Template:TabNav --- */ .tabContainer { display: flex; flex-wrap: wrap; padding: 1em; justify-content: center; gap: .2em; }

.tabContainer > div { border: 1px solid var(--theme-accent-color); padding: 0.2em .4em 0.2em; margin-right: 5px; border-radius: 3px; } /* --- end of Template:TabNav --- */

/* vertical alignment for speaker in story tables */ .storyNavBar + table:not(.storyCover) tr > td:nth-of-type(1) { vertical-align: top; }

/* --- start of Template:Mbox --- */

.mbox.mbox-type-important { border-left-color: var(--type-important); }

.mbox.mbox-type-moderate { border-left-color: var(--type-moderate); }

.mbox.mbox-type-minor { border-left-color: var(--type-minor); } .mbox__content { display: table; box-sizing: border-box; width: 100%; padding: 8px 15px; } .mbox__content__image { display: table-cell; width: 40px; height: 100%; text-align: center; vertical-align: middle; padding-right: 15px; } .mbox__content__wrapper { display: table-cell; vertical-align: middle; } .mbox__content__header { display: block; font-weight: bold; } .mbox__content__text { display: block; } .mbox__content__text__comment { font-size: small; } .mbox__content__aside { display: table-cell; width: 100px; vertical-align: middle; text-align: center; padding-left: 15px; border-left: 1px solid #d6d6d6; } .mbox__close { position: absolute; right: 0; top: 0; padding: 2px 7px; font-weight: bold; font-size: 16px; color: #bbb; cursor: pointer; transition: all .15s ease-in; } .mbox__close:hover { color: #777; } .mbox__close:after { content: '×'; } .mw-collapsed + .mbox__close { transform: rotate(45deg); padding: 4px 7px 5px 2px; }

.mbox { background: var(--theme-page-background-color--secondary) !important; border: none; border-bottom: solid 5px var(--mbox-border-color); border-radius: 0px; padding: 10px 5px; max-width: 800px; overflow: visible; margin: 25px auto; color: inherit; position: relative; }

.mbox__content__image { width: 120px; padding-right: 15px; } /* --- end of Template:Mbox --- */

/* --- start of Template:ContentBox --- */ .mako-box { margin: 10px 5px 10px 0px; position: relative; display: flex; flex-flow: column; } .mako-box-icon { width: 40px; height: 40px; border-radius: 10px 10px 0px 0px; top: -13px; left: 5px; position: absolute; } .mako-box-icon img { position: absolute; bottom: 0px; } .mako-box-body { border-radius: 15px 0px 0px 0px; border: 1px solid #2967ff; overflow: hidden; display: flex; flex-flow: column; flex: 1 1 auto; } .mako-box-title { background: #5785F7; color: #fff; font-size: 16px; height: 26px; line-height: 26px; font-weight: bold; padding: 0px 5px 0px 50px; } .mako-box-content { background: #f5f5f5; flex: 1 1 auto; } /* --- end of Template:ContentBox ---*/

/* font for Natsume's spell */ .natsume-font { font-family: 'Jim Nightshade', cursive; font-size: 24px; line-height: 19px; }

/* icon border used in Template:FeaturedUnit2 .unitFeatureBorder { width: 100px; height: 100px; box-shadow: -6px -6px 8px -3px #FED7CB, 6px -6px 8px -3px #FFEBB6, 6px 6px 8px -2px #B6BCFA, 6px 6px 8px -4px #CAD6EE, -6px 6px 8px 2px #E1EFCC; }

/* icon border, used in Template:Birthday2 .birthdayicon { background: linear-gradient(150deg, #FDD7F2,#FED7CB,#FFEBB6,#E1EFCC,#CEE1E1,#CAD6EE,#AAB1FA,#929AFA); -webkit-border-radius: -10px; border-radius:40px; } */

/* for Template:CardSection */ .cardlist img { margin-bottom: 7px; border-radius: 4px; }

/* for Template:CurrentCampaign */ .campaigns-wrapper img{ width: 100%; max-width: 300px; height:auto; }

/* audio player */ .audio-button { background-color: #0C195C !important; background-image: url('https://static.wikia.nocookie.net/ensemble-stars/images/f/f0/Icon_audioplayer.svg/revision/latest?cb=20210624070950&format=original'); background-size: 10px; width: 40px; height: 19px; }

.audio-button.character-audio { background-image: url('https://static.wikia.nocookie.net/ensemble-stars/images/2/25/Icon_voice.svg/revision/latest?cb=20210606141725&format=original'); background-size: 20px; background-position:center 4px; }

.audio-button.now-playing { background-image: url('https://vignette.wikia.nocookie.net/dev/images/a/a9/OggPlayer_stop.svg'); background-size: 16px; background-position:center 1.5px; }

.audio-button:hover { background-color: unset; } /****/

/*** start of Template:Character Quote Intro ***/ .character-quote-wrapper { position: relative; text-align: right; overflow: hidden; }

.character-quote-wrapper p { margin: 0px 15px 15px !important; padding:15px 30px; border-radius: 5px 15px; text-align: left; border: solid 2px var(--theme-page-text-color); }

.character-quote-wrapper:before { content: '\201c'; font: 700 40px/20px Montserrat, serif; padding: 15px 5px -0px; position: absolute; left:0px; top: calc( 0px + 10px); background-color:var(--theme-page-background-color); }

.character-quote-wrapper:after { content: '\201d'; font: 700 40px/20px Montserrat, serif; padding: 15px 5px -0px; position: absolute; right:0px; bottom: calc( 0px + 60px); background-color:var(--theme-page-background-color); }

.character-quote-audio { top:-30px; right:40px; text-align:right; border-radius: 5px; background-color: #0C195C; display: inline-block; overflow:hidden; color: #FFF; height: 25px; position: relative; }

.character-quote-audio.character-quote-audio-friend{ padding-right:25px; }

.character-quote-audio .character-audio-name { margin: 0px 11px 0px 0px; }

.character-quote-audio .character-audio-name a{   color: #FFFFFF; }

.character-quote-audio > a{   display: block; top: -3px; right: -1px; position: absolute; }

.character-quote-audio > a img { border-radius: 0px 5px 5px 0px; height:26px; width: 26px; } /*** end of Template:Character Quote Intro ***/

/*** adds padding to translatorbio template ***/ .tlBio { padding: 8px; }

/*** characterNavBar by jeoaq @ github ***/ .characterNavBar-wrapper { background: var(--theme-page-background-color--secondary); border-bottom: solid 5px var(--theme-color-character-color); position: relative; padding: 20px 110px 20px 0px; width: 100%; max-width: 100%; margin-left: 0%; transform: translateX(0%); display: block; height: 185px; overflow: visible; transition: height 0.2s 0.2s ease, margin 0.2s ease, transform 0.2s ease, max-width 0.2s 0.2s ease; margin-top: 5px; margin-bottom: 5px; }

.characterNavBar-wrapper hr, .characterNavBar-wrapper .hidden-desktop { display: none; }

.characterNavBar-wrapper tbody { transition: padding-left 0.2s cubic-bezier(.32, 1.13, .5, 1.16); padding-left: 30px; }

.characterNavBar-wrapper tbody, .characterNavBar-wrapper tr, .characterNavBar-wrapper th { display: block; }

.characterNavBar-wrapper th { text-align: left; font: 900 italic 1.1em Montserrat; letter-spacing: 1px; text-transform: uppercase; position: absolute; width: 100%; height: 20px; right: 0; top: 0; padding: 20px 30px; z-index: 0; }

.characterNavBar-wrapper th span { text-transform: capitalize; font: 700 0.9em Rubik; letter-spacing: 0px; }

.characterNavBar-wrapper tbody th img { position: absolute; width: 100px; height: auto; top: 10px; left: 20px; transform: translate(10px, 0px) scale(1.3); opacity: 0.1; transition: transform 0.3s 0.2s cubic-bezier(.32, 1.13, .5, 1.16), opacity 0.2s ease; pointer-events: none; z-index: 1; }

.characterNavBar-wrapper tbody tr:nth-child(2) { height: auto; overflow: hidden; transition: height 0.2s ease; position: relative; }

.characterNavBar { padding: 5px 0px 0px; box-sizing: border-box; display: flex; flex-direction: row; overflow: auto; mask-image: linear-gradient(to left, transparent 0, black 50px); flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.2em; max-height: 160px; }

.characterNavBar center { padding: 0px 0px 10px; display: flex; flex-direction: row; overflow: auto; mask-image: linear-gradient(to left, transparent 0, black 50px); flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.2em; height: auto; }

.characterNavGroupTitle { display: none; }

.characterNavBar .characterNavGroup, .characterNavBar .characterNavSubGroup { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; white-space: nowrap; padding-right: 50px; flex: 0 0 100%; position: static; }

.characterNavBar div a { display: block; z-index: 2; }

.characterNavGroup.unit span { position: absolute; height: calc(100% - 40px); top: 10px; right: 40px; z-index: 1; opacity: 0.1; pointer-events: none; }

.characterNavGroup.unit img { left: 0px; height: auto; width: auto; max-width: 300px; max-height: 100px; z-index: 1; pointer-events: none; }

.characterNavBarCharAnzu .characterNavGroup.unit img { lefT: 0px; height: auto; width: auto; max-width: 150px; max-height: 60px; z-index: 1; }

.characterNavSubGroup > *:first-child, .characterNavGroup.unit a:nth-child(2) { font: 900 italic 1em Montserrat; flex: 0 0 30px; display: block; background: linear-gradient(var(--theme-infobox-accent-color) 0%, var(--theme-infobox-accent-color) 100%); background-repeat: no-repeat; background-size: 110% 40%; background-position: bottom; text-align: center; padding: 2px 5px 0px; }

/*****    special cases      *****/ .characterNavBar-wrapper.characterNavBarNewy { height: 160px; }

.characterNavBar-wrapper.characterNavBarNewy th img { transform: translate(10px, -10px) scale(1.15); }

.characterNavBar-wrapper.characterNavBarCharAnzu { height: 130px; }

.characterNavBar-wrapper.characterNavBarCharAnzu .characterNavSubGroup { display: none; }

.characterNavBar-wrapper.characterNavBarCharAnzu th img { transform: translate(10px, -25px) scale(1); }

/*****      collapsed        *****/ .characterNavBar-wrapper.mw-collapsed { height: 100px; max-width: 800px; margin-left: 50%; transform: translateX(-50%); transition: height 0.2s 0.2s ease, margin 0.2s 0.2s ease, transform 0.2s 0.2s ease, max-width 0.2s 0.4s ease; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar { overflow-y: hidden; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar center { transition: height 0.2s 0.22s ease; }

.characterNavBar-wrapper.mw-collapsed tbody th img { transform: translate(0px, -45px) scale(0.8); opacity: 1; transition: transform 0.2s 0.2s ease, opacity 0.2s 0.2s ease; }

.characterNavBar-wrapper.characterNavBarNoChibi th img { padding-top: 25px; }

.characterNavBar-wrapper.mw-collapsed tr:nth-child(2) { display: flex !important; }

.characterNavBar-wrapper .characterNavBar center > div:not(.subpage) { transition: margin-top 0.3s 0.4s cubic-bezier(.32, 1.13, .5, 1.16), opacity 0.3s 0.4s ease, margin-left 0s ease; opacity: 1; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar center > div:not(.subpage) { transition: margin-top 0.2s ease, opacity 0.2s ease, margin-left 0s 0.4s ease; margin-top: 10px; opacity: 0; margin-left: -500%; }

.characterNavBar-wrapper.mw-collapsed tbody { transition: padding-left 0.2s 0.2s ease; padding-left: 140px; }

/***** Notice *****/ .characterNavBarNotice-wrapper { width: 100%; max-width: 100%; margin-left: 0%; transform: translateX(0%); transition: height 0.2s 0.2s ease, margin 0.2s ease, transform 0.2s ease, max-width 0.2s 0.2s ease; display: flex; gap: 5px; margin-top: 0px; margin-bottom: 25px; flex-wrap: wrap; }

.characterNavBarNotice { flex: 1 0 300px; padding: 15px 10px 15px 80px; position: relative; }

.characterNavBarNotice.Stub { background: rgba(255, 0, 0, .10); }

.characterNavBarNotice.Spoilers { background: rgba(99, 165, 200, .2); }

.characterNavBarNotice img { position: absolute; width: 50px; top: 10px; left: 15px; height: auto; transition: left 0.2s 0.0s ease; }

.characterNavBarNotice p { font: 400 italic 0.9em Rubik; margin: 0px; }

.characterNavBarNotice h3 { font: 700 italic 1.0em Rubik; margin: 0px; display: block; }

.characterNavBar-wrapper.mw-collapsed ~ .characterNavBarNotice-wrapper { max-width: 800px; margin-left: 50%; transform: translateX(-50%); transition: height 0.2s 0.2s ease, margin 0.2s 0.2s ease, transform 0.2s 0.2s ease, max-width 0.2s 0.4s ease, padding-left 0.2s 0.4s ease; } /*** end of characterNavBar ***/