MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Allow highlighting a section or similar target) |
(Code for a tabbed interface, hoisted from a W3C example - https://www.w3.org/Style/Examples/007/target.en.html) |
||
Line 96: | Line 96: | ||
} | } | ||
/* ------------------------------------------------------------- | |||
* Tabbed interface | |||
* ------------------------------------------------------------- */ | |||
div.tabs { | |||
min-height: 7em; | |||
position: relative; | |||
line-height: 1; | |||
z-index: 0; | |||
} | |||
div.tabs > div { | |||
display: inline; | |||
} | |||
div.tabs > div > a { | |||
color: black; | |||
background: #ccc; | |||
padding: 0.2em; | |||
border: 0.1em outset #bbb; | |||
border-bottom: 0.1em solid #ccc; | |||
} | |||
div.tabs > div:not(:target) > a { | |||
border-bottom: none; | |||
background: #999 | |||
} | |||
div.tabs > div:target > a, | |||
:target .default > a { | |||
border-bottom: 0.1em solid #ccc; | |||
background: #ccc; | |||
} | |||
div.tabs > div > div { | |||
background: #ccc; | |||
z-index: -2; | |||
left: 0; top: 1.3em; | |||
bottom: 0; right: 0; | |||
overflow: auto; | |||
padding: 0.3em; | |||
border: 0.1em outset #bbb; | |||
} | |||
div.tabs > div:not(:target) > div { | |||
position: absolute; | |||
}; | |||
div.tabs > div:target > div, :target .default > div { | |||
position: absolute; | |||
z-index: -1; | |||
} | |||
div.tabs :target { | |||
outline: none; | |||
} | |||
/* ------------------------------------------------------------- | /* ------------------------------------------------------------- |
Revision as of 23:41, 17 August 2023
/* ------------------------------------------------------------- * Runes fonts * -------------------------------------------------------------*/ @font-face { font-family: MadokaRunes; src: url(/w/resources/assets/fonts/runes.ttf?1335354297); } @font-face { font-family: MadokaMusical; src: url(/w/resources/assets/fonts/runesmusical.ttf?1335354297); } /* ------------------------------------------------------------- * TODO table * -------------------------------------------------------------*/ table.todo { width: 100%; } table.todo td:first-child { width: 70px; text-align: center; font-weight: bold; font-size: 11px; } table.todo td:nth-child(2), table.todo td:nth-child(3) { width: 70px; font-size: 11px; text-align: center; } table.todo td.waiting { background: #eee; font-weight: normal; color: #999; } table.todo td.working { background: #FFE5CC; color: #B44723; } table.todo td.working ~ td { background: #FFF9EF; } table.todo td.partial { background: #6E9591; color: #fff; } table.todo td.partial ~ td { background: #D9F2F5; } table.todo td.done { background: #3c3; color: #fff; } table.todo td.done ~ td { background: #E4FFE3; } /* ------------------------------------------------------------- * Allow highlighting a section or similar target * ------------------------------------------------------------- */ .hilite-target:target { background-color: #ffa; } /* ------------------------------------------------------------- * Inline spoilers tag * ------------------------------------------------------------- */ .inline-spoilers, .inline_spoilers a, .inline_spoilers a:visited { /*background: #222; color: #222;*/ background: white; color: white; border-bottom: 1px solid #b3b3b3; border-left: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3; padding: 2px; } .inline-spoilers:hover { color: black; } /* ------------------------------------------------------------- * Tabbed interface * ------------------------------------------------------------- */ div.tabs { min-height: 7em; position: relative; line-height: 1; z-index: 0; } div.tabs > div { display: inline; } div.tabs > div > a { color: black; background: #ccc; padding: 0.2em; border: 0.1em outset #bbb; border-bottom: 0.1em solid #ccc; } div.tabs > div:not(:target) > a { border-bottom: none; background: #999 } div.tabs > div:target > a, :target .default > a { border-bottom: 0.1em solid #ccc; background: #ccc; } div.tabs > div > div { background: #ccc; z-index: -2; left: 0; top: 1.3em; bottom: 0; right: 0; overflow: auto; padding: 0.3em; border: 0.1em outset #bbb; } div.tabs > div:not(:target) > div { position: absolute; }; div.tabs > div:target > div, :target .default > div { position: absolute; z-index: -1; } div.tabs :target { outline: none; } /* ------------------------------------------------------------- * HAXX * ------------------------------------------------------------- */ .pm-character-box-hack .mw-collapsible-toggle { margin-top: 30px; margin-right: 10px; }