MediaWiki:Common.css: Difference between revisions
From Mechabellum Wiki
No edit summary |
(add hover in gallery) |
||
(23 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* UI fix */ | |||
.mw-parser-output h2, | |||
.mw-parser-output h3, | |||
.mw-parser-output h4 { | |||
min-width:50px; | |||
} | |||
/* UI dark theme */ | |||
/* TODO: update edit page before removing .action-history */ | |||
body.action-history { | |||
color-scheme: dark; | |||
accent-color: #6d3; | |||
} | |||
.mw-ui-button { | |||
background-color: #999; | |||
} | |||
.table-dark caption { | |||
padding: 0.25rem 0.75rem; | |||
background: #0001; | |||
} | |||
.btn-xs { | |||
padding: 0 .75em; | |||
font-size: .8em; | |||
vertical-align: baseline; | |||
} | |||
/* TOC */ | |||
@media (min-width:768px) { | |||
#toc { | |||
float: right; | |||
margin-left: 2em; | |||
} | |||
} | |||
/* UI catlinks */ | |||
.mw-body .catlinks { | |||
background: none; | |||
border: none; | |||
border-top: 1px solid #a2a9b1; | |||
} | |||
/* UI thumbnail */ | |||
div.thumbinner { | |||
border: 1px solid rgba(0,0,0,0.6); | |||
background-color: var(--primary); | |||
} | |||
.thumbimage { | |||
border: 1px solid #222; | |||
} | |||
/* UI history page */ | |||
.mw-history-compareselectedversions { | |||
margin: 1em 0; | |||
} | |||
#pagehistory li.selected { | |||
background-color: #fff2; | |||
color: inherit; | |||
outline: 2px dashed #fff6; | |||
outline-offset: -1px; | |||
} | |||
/* UI gallery hover */ | |||
.gallery img { | |||
transition: border .3s; | |||
} | |||
.gallery img:hover { | |||
border: 6px solid #f99500; | |||
} | |||
/* Unit Infobox */ | |||
.infobox { | .infobox { | ||
float: right; | |||
margin: 0 0 1em 1em; | |||
padding: 1em; | |||
width: 280px; | |||
max-width: 100%; | |||
} | |||
.infobox-nav { | |||
width: 100%; | |||
} | |||
.infobox-nav a { | |||
opacity: .2; | |||
transition: opacity .2s; | |||
} | |||
.infobox-nav a:hover { | |||
opacity: 1; | |||
} | } | ||
.infobox-title { | .infobox-title { | ||
font-size: 2em; | |||
text-align: center; | |||
} | } | ||
.infobox-image { | .infobox-image { | ||
text-align: center; | |||
} | } | ||
.infobox-table th { | .infobox-table th { | ||
vertical-align: top; | |||
width: 120px; | |||
} | } | ||
.infobox-table td { | .infobox-table td { | ||
vertical-align: top; | vertical-align: top; | ||
} | |||
@media (max-width:767px) { | |||
.infobox { | |||
width:100%; | |||
margin: 1em 0; | |||
} | |||
.infobox-image { | |||
float: right; | |||
} | |||
} | |||
@media (max-width:550px) { | |||
.infobox-image { | |||
float: none; | |||
width:100%; | |||
} | |||
} | |||
/* icon template */ | |||
.icon { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
/* cost badge */ | |||
.icon .cost { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
background: #f99500; | |||
border-radius: 2px; | |||
color: #222; | |||
font-weight: bold; | |||
line-height: 1em; | |||
padding: .1em .25em .2em 1.2em; | |||
box-shadow: -2px -2px 3px #0006; | |||
font-size: .9em; | |||
} | |||
.cost::before { | |||
--bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 47"><path id="half" d="M0 12 l20 -12 20 12 0 11 -20 12 -8 -4.8 20 -12 0 -2.4 -12 -7.2 -20 12" fill="currentcolor"/><use href="%23half" transform="rotate(180 20 23.5)" /></svg>'); | |||
content: ""; | |||
background: currentcolor; | |||
mask-image: var(--bg); | |||
-webkit-mask-image: var(--bg); | |||
position: absolute; | |||
width: .8em; | |||
height: .94em; | |||
top: .15em; | |||
left: .25em; | |||
} | |||
/* shadow as boder */ | |||
.icon-border img { | |||
box-sizing: content-box; | |||
padding: 6px; | |||
border-radius: 6px 2px; | |||
box-shadow: 0 0 2px 1px #eee9 inset; | |||
} | |||
/* colorize cyan */ | |||
.icon-Tech img { | |||
filter: sepia(100%) saturate(750%) hue-rotate(110deg); | |||
-webkit-filter:: sepia(100%) saturate(750%) hue-rotate(110deg); | |||
-moz-filter: sepia(100%) saturate(750%) hue-rotate(110deg); | |||
} | |||
/* override cost badge */ | |||
.icon-Tech .cost { | |||
right: 2px; | |||
bottom: 2px; | |||
background: #2229; | |||
color: #eee; | |||
box-shadow: none; | |||
} | |||
/* notes box */ | |||
.note { | |||
color: #7a8288; | |||
transition: color .3s 2s; | |||
} | |||
.note:hover { | |||
color: inherit; | |||
transition: color .1s 0s; | |||
} | |||
.table .note::before { | |||
content: ''; | |||
border-top: 1px solid #0002; | |||
width: 90%; | |||
display: block; | |||
margin: .5em auto 0; | |||
} | |||
/* table break + sticky */ | |||
@media (max-width:767px) { | |||
.table-block-last tr { | |||
display: block; | |||
border-bottom: .5em solid var(--dark); | |||
} | |||
.table-block-last th { | |||
display: inline-block; | |||
border: none; | |||
color:#7a8288; | |||
font-weight: normal; | |||
} | |||
.table-block-last td { | |||
display: inline-block; | |||
border: none; | |||
vertical-align: middle; | |||
font-weight: bold; | |||
} | |||
.table-block-last td:last-child { | |||
display: block; | |||
font-weight: inherit; | |||
padding-top: 0; | |||
} | |||
.table-sticky-column td:first-child { | |||
position: sticky; | |||
left: 0; | |||
padding: 0 1em; | |||
line-height: .8em; | |||
background: linear-gradient(180deg, #0004 0, #0004 1em, #0000 1em); | |||
} | |||
} | |||
@media (max-width:991px) { | |||
.table-block-last-lg tr { | |||
display: block; | |||
border-bottom: .5em solid var(--dark); | |||
} | |||
.table-block-last-lg th { | |||
display: inline-block; | |||
border: none; | |||
color:#7a8288; | |||
font-weight: normal; | |||
} | |||
.table-block-last-lg td { | |||
display: inline-block; | |||
border: none; | |||
vertical-align: middle; | |||
font-weight: bold; | |||
} | |||
.table-block-last-lg td:last-child { | |||
display: block; | |||
font-weight: inherit; | |||
padding-top: 0; | |||
} | |||
} | |||
/* external link - show host */ | |||
a[href].external::after { | |||
content: attr(data-host); | |||
display: inline-block; | |||
padding-left: .5em; | |||
font-size: 0; | |||
color:#888; | |||
transition: font-size .2s; | |||
} | |||
a[href].external:hover::after, | |||
a[href].external:focus::after { | |||
font-size: .9em; | |||
} | |||
/* stronger strikethrough */ | |||
s { | |||
text-decoration: line-through 4px #f009; | |||
} | } |
Latest revision as of 18:52, 12 July 2023
/* CSS placed here will be applied to all skins */ /* UI fix */ .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4 { min-width:50px; } /* UI dark theme */ /* TODO: update edit page before removing .action-history */ body.action-history { color-scheme: dark; accent-color: #6d3; } .mw-ui-button { background-color: #999; } .table-dark caption { padding: 0.25rem 0.75rem; background: #0001; } .btn-xs { padding: 0 .75em; font-size: .8em; vertical-align: baseline; } /* TOC */ @media (min-width:768px) { #toc { float: right; margin-left: 2em; } } /* UI catlinks */ .mw-body .catlinks { background: none; border: none; border-top: 1px solid #a2a9b1; } /* UI thumbnail */ div.thumbinner { border: 1px solid rgba(0,0,0,0.6); background-color: var(--primary); } .thumbimage { border: 1px solid #222; } /* UI history page */ .mw-history-compareselectedversions { margin: 1em 0; } #pagehistory li.selected { background-color: #fff2; color: inherit; outline: 2px dashed #fff6; outline-offset: -1px; } /* UI gallery hover */ .gallery img { transition: border .3s; } .gallery img:hover { border: 6px solid #f99500; } /* Unit Infobox */ .infobox { float: right; margin: 0 0 1em 1em; padding: 1em; width: 280px; max-width: 100%; } .infobox-nav { width: 100%; } .infobox-nav a { opacity: .2; transition: opacity .2s; } .infobox-nav a:hover { opacity: 1; } .infobox-title { font-size: 2em; text-align: center; } .infobox-image { text-align: center; } .infobox-table th { vertical-align: top; width: 120px; } .infobox-table td { vertical-align: top; } @media (max-width:767px) { .infobox { width:100%; margin: 1em 0; } .infobox-image { float: right; } } @media (max-width:550px) { .infobox-image { float: none; width:100%; } } /* icon template */ .icon { position: relative; display: inline-block; } /* cost badge */ .icon .cost { position: absolute; right: 0; bottom: 0; background: #f99500; border-radius: 2px; color: #222; font-weight: bold; line-height: 1em; padding: .1em .25em .2em 1.2em; box-shadow: -2px -2px 3px #0006; font-size: .9em; } .cost::before { --bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 47"><path id="half" d="M0 12 l20 -12 20 12 0 11 -20 12 -8 -4.8 20 -12 0 -2.4 -12 -7.2 -20 12" fill="currentcolor"/><use href="%23half" transform="rotate(180 20 23.5)" /></svg>'); content: ""; background: currentcolor; mask-image: var(--bg); -webkit-mask-image: var(--bg); position: absolute; width: .8em; height: .94em; top: .15em; left: .25em; } /* shadow as boder */ .icon-border img { box-sizing: content-box; padding: 6px; border-radius: 6px 2px; box-shadow: 0 0 2px 1px #eee9 inset; } /* colorize cyan */ .icon-Tech img { filter: sepia(100%) saturate(750%) hue-rotate(110deg); -webkit-filter:: sepia(100%) saturate(750%) hue-rotate(110deg); -moz-filter: sepia(100%) saturate(750%) hue-rotate(110deg); } /* override cost badge */ .icon-Tech .cost { right: 2px; bottom: 2px; background: #2229; color: #eee; box-shadow: none; } /* notes box */ .note { color: #7a8288; transition: color .3s 2s; } .note:hover { color: inherit; transition: color .1s 0s; } .table .note::before { content: ''; border-top: 1px solid #0002; width: 90%; display: block; margin: .5em auto 0; } /* table break + sticky */ @media (max-width:767px) { .table-block-last tr { display: block; border-bottom: .5em solid var(--dark); } .table-block-last th { display: inline-block; border: none; color:#7a8288; font-weight: normal; } .table-block-last td { display: inline-block; border: none; vertical-align: middle; font-weight: bold; } .table-block-last td:last-child { display: block; font-weight: inherit; padding-top: 0; } .table-sticky-column td:first-child { position: sticky; left: 0; padding: 0 1em; line-height: .8em; background: linear-gradient(180deg, #0004 0, #0004 1em, #0000 1em); } } @media (max-width:991px) { .table-block-last-lg tr { display: block; border-bottom: .5em solid var(--dark); } .table-block-last-lg th { display: inline-block; border: none; color:#7a8288; font-weight: normal; } .table-block-last-lg td { display: inline-block; border: none; vertical-align: middle; font-weight: bold; } .table-block-last-lg td:last-child { display: block; font-weight: inherit; padding-top: 0; } } /* external link - show host */ a[href].external::after { content: attr(data-host); display: inline-block; padding-left: .5em; font-size: 0; color:#888; transition: font-size .2s; } a[href].external:hover::after, a[href].external:focus::after { font-size: .9em; } /* stronger strikethrough */ s { text-decoration: line-through 4px #f009; }