MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Make tab view not look completely broken if there are too many tabs, and add support for tab scrolling provided appropriate JS is implemented) |
(Argh, line-height percentages are not relative to the parent… best I can do is reset it to the absolute value the parent set it to, which is the same in the default style but might end up being different in another style. Still better than the alternative though.) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 121: | Line 121: | ||
display:inline; | display:inline; | ||
scroll-margin-top:1em; | scroll-margin-top:1em; | ||
pointer-events: none; | |||
} | } | ||
| Line 136: | Line 137: | ||
position: relative; | position: relative; | ||
z-index: -1; | z-index: -1; | ||
pointer-events: auto; | |||
} | } | ||
| Line 153: | Line 155: | ||
position:absolute; | position:absolute; | ||
background:#fff; | background:#fff; | ||
line-height:1.6; | |||
left:0; | left:0; | ||
top:1.3em; | top:1.3em; | ||
| Line 165: | Line 168: | ||
border-bottom-right-radius:0.3em; | border-bottom-right-radius:0.3em; | ||
white-space: normal; | white-space: normal; | ||
pointer-events: auto; | |||
} | } | ||
| Line 205: | Line 209: | ||
border-radius: 5px 0px 0px 5px; | border-radius: 5px 0px 0px 5px; | ||
right:0; | right:0; | ||
} | |||
/* ------------------------------------------------------------- | |||
* Allow flowing table of contents into columns | |||
* ------------------------------------------------------------- */ | |||
.column-toc .toc ul { | |||
column-count: var(--toc-columns); | |||
} | } | ||
Latest revision as of 00:33, 10 December 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;
pointer-events: none;
}
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;
pointer-events: auto;
}
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;
line-height:1.6;
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;
pointer-events: auto;
}
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;
}
/* -------------------------------------------------------------
* Allow flowing table of contents into columns
* ------------------------------------------------------------- */
.column-toc .toc ul {
column-count: var(--toc-columns);
}
/* -------------------------------------------------------------
* HAXX
* ------------------------------------------------------------- */
.pm-character-box-hack .mw-collapsible-toggle {
margin-top: 30px;
margin-right: 10px;
}