MediaWiki:Fandomdesktop.css

/*****************/ /* Shared Styles */ /*****************/ .infoblock, /* Template:Main Page Infoblocks */ .mbox /* Template:Mbox */ { background-color: rgba(0,0,0,0.2); }

/* Template:NIWAnav */ background-color: var(--theme-page-background-color); }
 * 1) NIWA-nav .cell {

ol.references li:target, sup.reference:target { background-color: var(--theme-accent-color); }

/* Module:Comment */ .comments { margin-bottom: var(--zw-space-2); }

.comments .mw-collapsible-toggle { float: none; }

/* A hack to show the heading before the toggle - we can't control how MediaWiki inserts the toggle ahead of the HTML */ .comments.mw-collapsible { display: grid; grid-template-columns: auto 1fr; column-gap: var(--zw-space-1); } .comments__heading { grid-row: 1; grid-column: 1; } .comments > .mw-collapsible-toggle { grid-row: 1; grid-column: 2; } .comments__content { grid-column: 1/3; }

.comments__commenter { text-align: center; }

.comments__content { margin-top: var(--zw-space-3); margin-bottom: var(--zw-space-4) }

.comments__toggle-more:active, .comments__toggle-more:focus, .comments__toggle-more:hover { text-decoration: underline; }

.comments__toggle-more { display: inline-block; margin-top: var(--zw-space-1); margin-left: calc(80px + var(--zw-space-4)); color: var(--theme-link-color); cursor: pointer; transition: color .3s; }

.comments__additional-comments:not(.mw-collapsed) .comments__toggle-more { display: none; }

.comments__first-comment, .comments__additional-comments-content { display: grid; grid-template-columns: 80px 1fr; align-items: center; column-gap: var(--zw-space-4); }

.comments__spacer { grid-column: 2; margin-top: var(--zw-space-6); }

.comments__quote-bubble { grid-column: 2; padding: var(--zw-space-6); background-color: var(--theme-page-background-color--secondary); border: 0.375rem solid var(--theme-border-color); border-radius: 1.5rem; }

blockquote.comments__quote-bubble { margin: 0; }

.comments__quote-bubble p { margin: 0; }

.comments__quote-bubble p+p { margin-top: var(--zw-space-2); }

.theme-fandomdesktop-dark .comments__quote-bubble { background-color: #1d578b; }

.comments__quote-context { grid-column: 2; font-size: 0.875rem; font-style: italic; }

.theme-fandomdesktop-dark .comments__quote-context { color: #bbbbbb; }

/* Template:Happy Mask Salesman */ .comments__quote-bubble--happy-mask-salesman { border-color: #cc33ff; }

/* Template:Midna */ .comments__quote-bubble--midna { border-color: #192020; }

/* Template:Fi */ .comments__quote-bubble--fi { border-color: #7447a9; }

/***************/ /* Light Theme */ /***************/

/* Main Page Logo and Site Logo */ .theme-fandomdesktop-light #mf-zw-logo, .theme-fandomdesktop-light .fandom-community-header__image img { filter: invert(0.9); }

/***************/ /* Dark Theme */ /***************/

/* Tabs */ .tabcontainer .tab { color: white; }

.theme-fandomdesktop-dark .tabcontainer .tab { border-color: #426787; }

.theme-fandomdesktop-light .tabcontainer .tab { border-color: #8fbfe8; }

.theme-fandomdesktop-dark .tabcontainer .tab { background-color: #1d578b; background-image:-webkit-linear-gradient(top, #1D679B, #1A4E7D); background-image:  -moz-linear-gradient(top, #1D679B, #1A4E7D); background-image:   -ms-linear-gradient(top, #1D679B, #1A4E7D); background-image:    -o-linear-gradient(top, #1D679B, #1A4E7D); background-image:       linear-gradient(top, #1D679B, #1A4E7D); }

.theme-fandomdesktop-light .tabcontainer .tab { background-color: #4fa0e4; background-image:-webkit-linear-gradient(top, #4fa0e4, #235f92); background-image:  -moz-linear-gradient(top, #4fa0e4, #235f92); background-image:   -ms-linear-gradient(top, #4fa0e4, #235f92); background-image:    -o-linear-gradient(top, #4fa0e4, #235f92); background-image:       linear-gradient(top, #4fa0e4, #235f92); }

.theme-fandomdesktop-dark .tabcontainer .tab:hover { background-color:#24527c; background-image:-webkit-linear-gradient(top, #305f89, #17456E); background-image:  -moz-linear-gradient(top, #305f89, #17456E); background-image:   -ms-linear-gradient(top, #305f89, #17456E); background-image:    -o-linear-gradient(top, #305f89, #17456E); background-image:       linear-gradient(top, #305f89, #17456E); }

.theme-fandomdesktop-light .tabcontainer .tab:hover { background-color:#0d68b5; background-image:-webkit-linear-gradient(top, #0d68b5, #4fa0e4); background-image:  -moz-linear-gradient(top, #0d68b5, #4fa0e4); background-image:   -ms-linear-gradient(top, #0d68b5, #4fa0e4); background-image:    -o-linear-gradient(top, #0d68b5, #4fa0e4); background-image:       linear-gradient(top, #0d68b5, #4fa0e4); }

.theme-fandomdesktop-dark .tabcontainer .tab.active { background-color:#17456e !important; background-image:-webkit-linear-gradient(top, #1D578B, #17456E); background-image:  -moz-linear-gradient(top, #1D578B, #17456E); background-image:   -ms-linear-gradient(top, #1D578B, #17456E); background-image:    -o-linear-gradient(top, #1D578B, #17456E); background-image:       linear-gradient(top, #1D578B, #17456E); }

/* Button-like gradient background */ .theme-fandomdesktop-dark .gradient { background-image:-webkit-linear-gradient(top, #2D679B, #1A4E7D); background-image:  -moz-linear-gradient(top, #2D679B, #1A4E7D); background-image:   -ms-linear-gradient(top, #2D679B, #1A4E7D); background-image:    -o-linear-gradient(top, #2D679B, #1A4E7D); background-image:       linear-gradient(top, #2D679B, #1A4E7D); }

.theme-fandomdesktop-dark .gradient:hover { background-image:-webkit-linear-gradient(top, #227777, #1A4E7D); background-image:  -moz-linear-gradient(top, #227777, #1A4E7D); background-image:   -ms-linear-gradient(top, #227777, #1A4E7D); background-image:    -o-linear-gradient(top, #227777, #1A4E7D); background-image:       linear-gradient(top, #227777, #1A4E7D); }

/* Reverse gradient */ .theme-fandomdesktop-dark .rgradient { background-image:-webkit-linear-gradient(bottom, #2D679B, #1A4E7D); background-image:  -moz-linear-gradient(bottom, #2D679B, #1A4E7D); background-image:   -ms-linear-gradient(bottom, #2D679B, #1A4E7D); background-image:    -o-linear-gradient(bottom, #2D679B, #1A4E7D); background-image:       linear-gradient(bottom, #2D679B, #1A4E7D); }

.theme-fandomdesktop-dark .rgradient:hover { background-image:-webkit-linear-gradient(bottom, #227777, #1A4E7D); background-image:  -moz-linear-gradient(bottom, #227777, #1A4E7D); background-image:   -ms-linear-gradient(bottom, #227777, #1A4E7D); background-image:    -o-linear-gradient(bottom, #227777, #1A4E7D); background-image:       linear-gradient(bottom, #227777, #1A4E7D); }

/* Template:Main Page Categories */ .theme-fandomdesktop-light .main-page-category-item-caption a { background: #4fa0e4; }

.theme-fandomdesktop-light .main-page-category-item-caption a:hover { background: #0d80e0; }

.theme-fandomdesktop-dark .main-page-category-item-caption a { background: #17568c; }

.theme-fandomdesktop-dark .main-page-category-item-caption a:hover { background: rgba(0,0,0,0.1); }

/* Portable Infoboxes */ .portable-infobox { background-color: var(--theme-page-text-mix-color-95); }

.pi-title { background-color: var(--theme-page-background-color--secondary); }

.pi-border-color { border-color: var(--theme-border-color); }

/* Template:Noncanon */ div.notice-container.noncanon div.notice-title, div.notice-content.noncanon { border-color: #0c0; }

div.notice-container.noncanon div.notice-title a { color: #0c0; }

/* Template:Ambig */ div.notice-container.ambig div.notice-title, div.notice-content.ambig { border-color: #ff31ff; }

div.notice-container.ambig div.notice-title a { color: #ff31ff; }