MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Fix the issue of links, inline elements, and other things showing through an inline spoiler) |
(Make tab view not look completely broken if there are too many tabs, and add support for tab scrolling provided appropriate JS is implemented) |
||
Line 114: | Line 114: | ||
margin-top:1.5em; | margin-top:1.5em; | ||
z-index:0; | z-index:0; | ||
white-space: nowrap; | |||
overflow-x: clip; | |||
} | } | ||
Line 131: | Line 133: | ||
border-top-left-radius:0.5em; | border-top-left-radius:0.5em; | ||
border-top-right-radius:0.5em; | border-top-right-radius:0.5em; | ||
border-bottom:0.1em solid #fff | border-bottom:0.1em solid #fff; | ||
position: relative; | |||
z-index: -1; | |||
} | } | ||
Line 160: | Line 164: | ||
border-bottom-left-radius:0.3em; | border-bottom-left-radius:0.3em; | ||
border-bottom-right-radius:0.3em; | border-bottom-right-radius:0.3em; | ||
white-space: normal; | |||
} | } | ||
Line 171: | Line 176: | ||
} | } | ||
div.tabs :target, div.tabs .default { | div.tabs :target, | ||
outline:none; | div.tabs .default { | ||
outline:none | |||
} | |||
div.tabs > .tab-nav { | |||
text-align: center; | |||
color:blue; | |||
height:1.5em; | |||
width:1em; | |||
top: -1.4em; | |||
position:absolute; | |||
z-index: 5; | |||
background:white; | |||
border: dotted 1px; | |||
padding: 0.7em 0.3em 0em 0.2em; | |||
cursor:pointer; | |||
user-select:none; | |||
} | |||
div.tabs > .tab-nav.left{ | |||
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)); | |||
border-radius: 0px 5px 5px 0px; | |||
} | |||
div.tabs > .tab-nav.right{ | |||
background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)); | |||
border-radius: 5px 0px 0px 5px; | |||
right:0; | |||
} | } | ||
Revision as of 03:44, 19 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 { /*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 * { visibility: hidden; } .inline-spoilers:hover { color: inherit; } .inline-spoilers:hover * { visibility: inherit; } /* ------------------------------------------------------------- * Tabbed interface * ------------------------------------------------------------- */ div.tabs { min-height:15em; position:relative; line-height:1; margin-top:1.5em; z-index:0; white-space: nowrap; overflow-x: clip; } div.tabs > div { display:inline; scroll-margin-top:1em; } div.tabs > div > a { color:#222; font-size:110%; font-weight:bold; text-decoration:none; background:linear-gradient(#ddd,#fff); padding:0.7em; border:0.1em outset #bbb; border-top-left-radius:0.5em; border-top-right-radius:0.5em; border-bottom:0.1em solid #fff; position: relative; z-index: -1; } div.tabs > div:not(:target):not(.default) > a { border-bottom:none; background:#999; } div.tabs > div:target > a, div.tabs > div.default > a { padding-bottom:0.154em; position:relative; z-index:1; } div.tabs > div > div { position:absolute; background:#fff; left:0; top:1.3em; bottom:0; right:0; overflow:auto; padding:0.3em; border:0.1em outset #bbb; border-top-right-radius:0em; border-top-right-radius:0.3em; border-bottom-left-radius:0.3em; border-bottom-right-radius:0.3em; white-space: normal; } div.tabs > div:not(:target):not(.default) > div { z-index:-2; } div.tabs > div:target > div, div.tabs > div.default > div { z-index:0; } div.tabs :target, div.tabs .default { outline:none } div.tabs > .tab-nav { text-align: center; color:blue; height:1.5em; width:1em; top: -1.4em; position:absolute; z-index: 5; background:white; border: dotted 1px; padding: 0.7em 0.3em 0em 0.2em; cursor:pointer; user-select:none; } div.tabs > .tab-nav.left{ background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)); border-radius: 0px 5px 5px 0px; } div.tabs > .tab-nav.right{ background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)); border-radius: 5px 0px 0px 5px; right:0; } /* ------------------------------------------------------------- * HAXX * ------------------------------------------------------------- */ .pm-character-box-hack .mw-collapsible-toggle { margin-top: 30px; margin-right: 10px; }