MediaWiki:Common.css: Difference between revisions
From Ages of Conflict
Content added Content deleted
No edit summary Tag: Reverted |
(Undo revision 372902 by CrimzonConflict (talk)) Tags: Replaced Undo Reverted |
||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Timeless skin */ |
|||
body { |
|||
color: #E6E6E6; |
|||
background: #8C6745; /* Main background color */ |
|||
} |
|||
/** Background **/ |
|||
#mw-content-container { |
|||
background: url(https://static.miraheze.org/agesofconflictwiki/8/89/Orange-dynamic-line-background-with-round-shapes.jpg) !important; |
|||
background-position: center !important; |
|||
background-repeat: no-repeat !important; |
|||
background-size: cover !important; |
|||
background-attachment: fixed !important; |
|||
border: none; |
|||
} |
|||
/** Icons **/ |
|||
/* Taken from Zelda Wiki [ https://zeldawiki.wiki/wiki/MediaWiki:Timeless.css ] */ |
|||
@media screen and (max-width: 850px) { |
|||
#site-navigation h2 { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/b/b1/Wiki_Icon_Timeless_Menu_Large_Dark.svg"); |
|||
} |
|||
#site-tools h2 { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/b/b6/Wiki_Icon_Timeless_Gear_Large_Dark.svg"); |
|||
} |
|||
#user-tools h2 { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/e/e3/Wiki_Icon_Timeless_User_Large_Dark.svg"); |
|||
} |
|||
} |
|||
@media screen and (min-width: 851px) { |
|||
#personal h2 { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_User_Dark.svg"); |
|||
} |
|||
} |
|||
.tools-inline li[id^='ca-nstab-'] a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/4/44/Wiki_Icon_Timeless_Page_Dark.svg"); |
|||
} |
|||
#ca-talk a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_Talk_Dark.svg"); |
|||
} |
|||
#ca-watch a { |
|||
background-image: url("https://gogigantic.miraheze.org/wiki/File:Wiki_Icon_Timeless_Star_Dark.svg"); |
|||
} |
|||
#ca-unwatch a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/5/5e/Wiki_Icon_Timeless_Star_Filled_Dark.svg"); |
|||
} |
|||
.tools-inline li a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/0/0a/Wiki_Icon_Timeless_Page_Misc_Dark.svg"); |
|||
} |
|||
#ca-edit a, |
|||
.client-js #ca-ve-edit a, |
|||
.mw-editsection { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/e/eb/Wiki_Icon_Timeless_Pencil_Dark.svg"); |
|||
} |
|||
.client-js #ca-edit a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/7/7c/Wiki_Icon_Timeless_Pencil_Source_Dark.svg"); |
|||
} |
|||
#ca-viewsource a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/7/72/Wiki_Icon_Timeless_Brackets_Dark.svg"); |
|||
} |
|||
#ca-history a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/b/bb/Wiki_Icon_Timeless_Clock_Dark.svg"); |
|||
} |
|||
#ca-more span { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/8/88/Wiki_Icon_Timeless_Gear_Dark.svg"); |
|||
} |
|||
.dropdown-toggle:after, |
|||
#user-tools h2:after, |
|||
.sidebar-chunk h2:after, |
|||
#mw-site-navigation h2:after, |
|||
#mw-related-navigation h2:after { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/2/29/Wiki_Icon_Timeless_Arrow_Down_Dark.svg"); |
|||
} |
|||
#t-contributions a { |
|||
background-image: url("https://static.miraheze.org/gogiganticwiki/d/d3/Wiki_Icon_Timeless_Puzzle_Dark.svg"); |
|||
} |
|||
/** Banner (search and user toolbar) **/ |
|||
#mw-header-container { |
|||
color: #E6E6E6; |
|||
background: #C9A86E; /* Banner background color */ |
|||
} |
|||
.color-left, |
|||
.color-middle, |
|||
.color-right { |
|||
background: #C9A86E; /* Banner background color */ |
|||
} |
|||
/* Title in banner */ |
|||
.mw-wiki-title { |
|||
text-transform: uppercase !important; |
|||
font-family: 'MuseoSans500' !important; |
|||
font-weight: bold; |
|||
} |
|||
#p-logo-text { |
|||
max-width: unset; |
|||
} |
|||
#p-logo-text a { |
|||
color: #FFFDDF !important; |
|||
} |
|||
/* Username */ |
|||
#personal h2 span { |
|||
font-family: 'MuseoSans500' !important; |
|||
font-weight: bold; |
|||
margin-top: -5px !important; |
|||
} |
|||
/* User dropdown */ |
|||
.dropdown { |
|||
background: #C9A86E !important; /* User dropdown background color */ |
|||
border: 3px solid #E9C771 !important; /* User dropdown border color */ |
|||
} |
|||
.dropdown::before, |
|||
#personal .dropdown::after { /* Arrows */ |
|||
border-bottom: 8px solid #E9C771 !important; /* Arrow color */ |
|||
} |
|||
/** Search bar **/ |
|||
#simpleSearch { |
|||
background: #8C6745; /* Search bar background color */ |
|||
border: solid 2px #E9C771; /* Search bar border color */ |
|||
} |
|||
#searchInput { |
|||
color: #fff; |
|||
} |
|||
.suggestions .suggestions-results { |
|||
background-color: #C9A86E; /* Suggestions background color */ |
|||
border: 2px solid #E9C771; /* Suggestions border color */ |
|||
} |
|||
.suggestions .suggestions-result { |
|||
color: #E6E6E6; |
|||
} |
|||
.suggestions .suggestions-special { |
|||
background-color: #C9A86E; /* Suggestions special background color */ |
|||
border: 2px solid #E9C771; /* Suggestions special border color */ |
|||
} |
|||
.suggestions .suggestions-special .special-query, |
|||
.suggestions-special .special-label { |
|||
color: #FFFDDF !important; |
|||
} |
|||
.suggestions .suggestions-result-current { /* Hover */ |
|||
background-color: #E9C771; /* Suggestions hover background color */ |
|||
color: #FFFDDF; |
|||
} |
|||
#searchButton, |
|||
#mw-searchButton { /* Icon */ |
|||
background-color: transparent !important; |
|||
filter: invert(1); |
|||
} |
|||
/** Logo **/ |
|||
/* "Hiding" it - enough to have title on sticky banner, logo will be on Vector */ |
|||
#p-logo { |
|||
height: 1px !important; |
|||
} /* Instead of display: none; to keep sidebar margin */ |
|||
/** Sidebars **/ |
/** Sidebars **/ |
||
/* Placing all sidebars to the left aka forcing layout under 1340px as default |
/* Placing all sidebars to the left aka forcing layout under 1340px as default |
||
Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */ |
Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */ |
||
@media (min-width: 1340px) { |
@media (min-width: 1340px) { |
||
#mw-content-block { |
|||
display: block; } |
|||
#mw-content, |
|||
} |
|||
#content-bottom-stuff { |
|||
#mw-content, |
|||
margin-left: 14em; } |
|||
#content-bottom-stuff { |
|||
#mw-content-wrapper { |
|||
margin-left: 14em; |
|||
float: right; |
|||
} |
|||
margin-left: -14em; |
|||
#mw-content-wrapper { |
|||
width: 100%; } |
|||
float: right; |
|||
/* Width and paddings */ |
|||
margin-left: -14em; |
|||
#mw-site-navigation, #mw-related-navigation { |
|||
width: 100%; |
|||
width: 14em; } |
|||
} |
|||
#mw-related-navigation { |
|||
/* Width and paddings */ |
|||
padding: 0 1em 0 0; } |
|||
#mw-site-navigation, |
|||
#mw-related-navigation { |
|||
width: 14em; |
|||
} |
|||
#mw-related-navigation { |
|||
padding: 0 1em 0 0; |
|||
} |
|||
} |
|||
/* Other sidebar styling */ |
|||
#mw-site-navigation .sidebar-chunk, |
|||
#mw-related-navigation .sidebar-chunk { |
|||
background: #C9A86E; /* Sidebar background color */ |
|||
border: none; |
|||
padding-bottom: 2px; |
|||
} |
|||
@media (min-width: 1100px) { |
|||
#mw-site-navigation .sidebar-chunk, |
|||
#mw-related-navigation .sidebar-chunk { |
|||
font-family: 'Montserrat', sans-serif; |
|||
font-size: 0.85em; |
|||
padding: 1em 1.5em 0.01em; |
|||
} |
|||
} |
|||
/* Headings */ |
|||
.mw-portlet h3 { |
|||
border-color: #E9C771 !important; /* Heading border color */ |
|||
font-weight: bold !important; |
|||
} |
|||
/* Sticky toolbar, also taken from Inkipedia */ |
|||
@media (min-height: 850px) and (min-width: 1100px) and (max-width: 1339px) { |
|||
#mw-related-navigation { |
|||
position: sticky; |
|||
top: 4.5em; |
|||
padding-bottom: .1em; |
|||
} |
|||
} |
|||
@media (min-height: 600px) and (min-width: 1400px) { |
|||
#mw-related-navigation { |
|||
position: sticky; |
|||
top: 67px; |
|||
padding-bottom: .1em; |
|||
height: fit-content; |
|||
} |
|||
#site-tools { |
|||
position: sticky; |
|||
top: 67px; |
|||
padding-bottom: .1em; |
|||
} |
|||
} |
|||
/** Content area **/ |
|||
#mw-content { |
|||
background: #8C6745; /* Content area background color */ |
|||
border: 3px solid #E9C771; /* Content area border color */ |
|||
border-top: none; |
|||
box-shadow: none; |
|||
} |
|||
/** Headers **/ |
|||
.mw-body h2, |
|||
.mw-body h3, |
|||
.mw-body h4, |
|||
.mw-body dt { /* dt is ; */ |
|||
font-family: 'Segoe UI'; |
|||
} |
|||
.mw-body h2 { /* h2 on normal pages */ |
|||
font-weight: bold; |
|||
} |
|||
#mw-subcategories h2, |
|||
#mw-pages h2, |
|||
#mw-category-media h2 { /* Content headers in categories */ |
|||
border-color: #E9C771 !important; /* Heading border color */ |
|||
padding-bottom: 5px; |
|||
} |
|||
/** Divider **/ |
|||
hr { |
|||
border-color: #E9C771; /* Divider color */ |
|||
} |
|||
/** Page tabs **/ |
|||
.tools-inline a:hover { |
|||
text-shadow: none; |
|||
} |
|||
.tools-inline li.selected { /* Selected tab */ |
|||
border-bottom-color: #E9C771; /* Selected tab border color */ |
|||
} |
|||
.tools-inline li.selected:hover { |
|||
border-bottom-color: #FFFDDF !important; |
|||
} |
|||
/** Footer **/ |
|||
.mw-footer-container { |
|||
border: none; |
|||
box-shadow: none; |
|||
font-size: 90%; |
|||
} |
|||
/** ToC **/ |
|||
#toc { |
|||
border: 2px solid #E9C771; /* ToC border color */ |
|||
background: #C9A86E; /* ToC background color */ |
|||
} |
|||
.toctitle { |
|||
border-color: #E9C771 !important; /* ToC title border color */ |
|||
} |
|||
.tocnumber, |
|||
.toctogglelabel { |
|||
color: #FFFDDF; |
|||
} |
|||
/** Image thumbnail (|thumb|) **/ |
|||
.thumbinner { |
|||
background: transparent; |
|||
border: none; |
|||
box-shadow: none; |
|||
} |
|||
.thumbinner .thumbimage { |
|||
border: none; |
|||
} |
|||
div.magnify a { /* Icon */ |
|||
filter: invert(1); |
|||
} |
|||
/** Changes for smaller screens **/ |
|||
@media only screen and (max-width: 1100px) { |
|||
#mw-content { /* Content area */ |
|||
border: none; |
|||
} |
|||
#mw-content-block { |
|||
background: #C9A86E; /* Content block background color */ |
|||
} |
|||
#mw-header-nav-hack { /* Navigation (transformed sidebar) */ |
|||
background: #C9A86E; /* Navigation background color */ |
|||
border-color: #C9A86E; |
|||
padding-bottom: 5px; |
|||
border-bottom: 3px solid #E9C771; /* Navigation border color */ |
|||
} |
|||
.sidebar-inner { /* Dropdowns (transformed sidebar) */ |
|||
background: #C9A86E !important; /* Dropdowns background color */ |
|||
border: 3px solid #E9C771 !important; /* Dropdowns border color */ |
|||
padding: 1.5em; |
|||
} |
|||
#mw-site-navigation, |
|||
#mw-related-navigation { |
|||
width: initial; |
|||
} |
|||
#mw-site-navigation h2, |
|||
#mw-related-navigation h2 { /* Dropdowns headers */ |
|||
font-weight: bold !important; |
|||
font-family: 'Segoe UI'; |
|||
margin-top: -5px; |
|||
} |
|||
#mw-site-navigation .sidebar-chunk h2 span::before, |
|||
#mw-site-navigation .sidebar-chunk h2 span::after { /* Dropdowns arrows */ |
|||
border-bottom: 10px solid #E9C771; /* Dropdowns arrow color */ |
|||
} |
|||
.color-left, |
|||
.color-middle, |
|||
.color-right { /* Banner "borders" */ |
|||
display: none; |
|||
} |
|||
#content-bottom-stuff { /* Categories block */ |
|||
background: #C9A86E; /* Categories block background color */ |
|||
border-top: 3px solid #E9C771; /* Categories block border color */ |
|||
} |
|||
} |
|||
@media only screen and (max-width: 850px) { |
|||
#p-search { /* Search bar */ |
|||
border-bottom: 5px solid #8C6745; /* Search bar border color */ |
|||
} |
|||
.sidebar-inner .mw-portlet-body { |
|||
line-height: 0.5; |
|||
} |
|||
#mw-content { /* Content area (visually for banner) */ |
|||
border-top: 3px solid #E9C771 !important; /* Content area border color */ |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
@media only screen and (max-width: 500px) { |
|||
#p-logo-text { /* Wiki title */ |
|||
position: unset; |
|||
text-align: center; |
|||
margin: -10px auto 0; |
|||
font-size: 120%; |
|||
padding: 0.1em 0 0.2em !important; |
|||
} |
|||
#p-logo-text a { |
|||
padding: 0; |
|||
} |
|||
#user-tools h2 { /* User icon */ |
|||
margin-top: -4px; |
|||
} |
|||
#personal-extra { /* Alert and Notice icons */ |
|||
top: 0.5em; |
|||
} |
|||
} |
} |
||
.portable-infobox { background:#C9A86E; } |
|||
/* [[Category:Styling pages]] */ |
|||
.image-row { |
.image-row { |
||
Revision as of 23:46, 17 February 2024
/** Sidebars **/
/* Placing all sidebars to the left aka forcing layout under 1340px as default
Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */
@media (min-width: 1340px) {
#mw-content-block {
display: block; }
#mw-content,
#content-bottom-stuff {
margin-left: 14em; }
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%; }
/* Width and paddings */
#mw-site-navigation, #mw-related-navigation {
width: 14em; }
#mw-related-navigation {
padding: 0 1em 0 0; }
}
.image-row {
display: flex;
justify-content: space-between;
padding: 20px; /* Add padding to the row */
}
.image-box img {
height: 134.38px;
width: 100%;
transition: 0.2s;
object-fit: cover;
}
.image-box:hover img {
transform: scale(1.05);
}
.pi-image {
clip-path: content-box;
}
.pi-image img {
transition: transform 0.5s;
}
.pi-image img:hover {
transform: scale(1.04);
}
.portable-infobox { background:#C9A86E; }
