MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/*
CONTENTS

1. Character insert styling
2. Collapsible list
3. Floating Table of Contents (TOC)
4. Toolbar links
5. Tooltips
6. Diagonal headers
*/


/**
 * Styling for links generated by [[MediaWiki:Edittools]]
 * @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
 * @updated 2012-02-29
 */
.iw-result__content {
    margin-bottom: 20px;
}

.default-protocol {
	display: none;
}

.mw-charinsert-buttons {
	margin-top: 20px;
	padding: 1px;
	text-align: center;
}
.mw-charinsert-buttons a {
	color: black;
	background-color: #cde !important;
	font-weight: bold;
	font-size: .9em;
	text-decoration: none;
	border: thin #069 outset;
	padding: 0 .1em .1em;
}
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
	background-color: #bcd;
	border-style: inset;
}
.client-js .mw-edittools-section {
	display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
	font-size: 0.9em;
}

/*
JUST ADD .collapsibleList TO UL tag; see https://bahai9.com/wiki/User:Brettz9/test-collapsibleLists
note the new code for this listed below at https://iamkate.com/code/tree-views/
is good in being CSS only but requires details/summary which are not supported
yet in MW, and which are cumbersome to add

User:Brettz9 added these styles for auto-added classes as per the code from http://code.stephenmorley.org/javascript/collapsible-lists/ with the license per http://code.stephenmorley.org/about-this-site/copyright/ being under http://creativecommons.org/publicdomain/zero/1.0/legalcode
If applying for DL or DD/DT, ensure to add these as well
*/.collapsibleList li > span {
    list-style-image: none;
    padding: 0;
    background: none;
    cursor: auto;
}

ol.collapsibleList > li.collapsibleListOpen > span,
.collapsibleList ol > li.collapsibleListOpen > span {
  background:url('https://file.bahai.media/9/9c/Button-open.png') no-repeat 0 5px;
  cursor:pointer;
}
.collapsibleList ol > li.collapsibleListClosed > span,
ol.collapsibleList > li.collapsibleListClosed > span {
  background:url('https://file.bahai.media/0/00/Button-closed.png') left center no-repeat;
  cursor:pointer;
}
ul.collapsibleList > li.collapsibleListOpen > span,
.collapsibleList ul > li.collapsibleListOpen > span {
  cursor:pointer;
}
ul.collapsibleList > li.collapsibleListClosed > span,
.collapsibleList ul > li.collapsibleListClosed > span {
  cursor:pointer;
}
ul.collapsibleList > li.collapsibleListOpen,
.collapsibleList ul > li.collapsibleListOpen {
  list-style-image:url('https://file.bahai.media/9/9c/Button-open.png');
  cursor:pointer;
}
ul.collapsibleList > li.collapsibleListClosed,
.collapsibleList ul > li.collapsibleListClosed {
  list-style-image:url('https://file.bahai.media/0/00/Button-closed.png');
  cursor:pointer;
}

/* Float TOC to right */
#toc {
    position: fixed;
    right: 0;
    top: 7em; /* 5em is height of header, 6em brings just under */
    /* bottom: 5em; /* 5em puts us above the footer; not bad but too low when TOC is collapsed */

    /* z-index: 10000; Ensure we float above the header, etc. */
    
    /* Add opacity (translucency) */
    background-color: rgb(249, 249, 249);
    background-color: rgba(249, 249, 249, 0.9); /* Higher opacity (last arg) means less transparency */
}
/* Ensure the TOC height doesn't take over the screen; percentages may be higher than view port, so we use pixels */
#toc > ul {
    max-height: 350px;
    overflow: auto;	
}
.toctoggle {
	float: right;
}

/* Toolbar links (was using with BADIPagesCreatedLinks) */
.portal .external, .portal .new, .portal .checking, .portal .erred {
    font-size: 1.25em !important;
    line-height: 1.525em !important;
}

/* Tooltips */
.tooltip-parent:hover .tooltip-child {
    display:block;
}

.tooltip-child {
    display: none;
    /* margin-left: 28px; /* moves the tooltip to the right */
    /* margin-top: 15px; /* moves it down */
    position: absolute;
    z-index: 1000;
}


/* Diagonal headers */
th.tilted {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}
th.tilted > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.tilted > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
table.tilted td {
	border: 1px solid #ccc;
}

h3, h4, h5 {
	font-weight: bold !important;
}