Difference between revisions of "MediaWiki:Common.css"

Revision as of 15:41, 12 February 2020

/* CSS placed here will be applied to all skins */
/* https://en.wikipedia.org/wiki/MediaWiki:Common.css */

/*.tocnumber { display: none; } */

.noautonum .tocnumber {
    display: none;
}

.catlinks { display: none; }

/* Give a bit of space to the TOC */
#toc {
	margin: 1em 0;
}

/*
 * Allow limiting of which header levels are shown in a TOC;
 * <div class="toclimit-3">, for instance, will limit to
 * showing ==headings== and ===headings=== but no further.
 * Used in [[Template:TOC]]
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}

/* make the list of references look smaller and highlight clicked reference in blue */
ol.references {
	font-size: 100%;
}
.references-small {
	font-size: 90%;
}
ol.references > li:target {
	background-color: #ddeeff;
}
sup.reference:target {
	background-color: #ddeeff;
}

/* upper blue line  */
/*
#mw-head-base {
	margin-left: 200px !important;
	margin-right: auto !important;
  max-width: 1000px !important;
}   */

/* lower blue line + footer content */
/* #footer {
	margin-left: 200px !important;
	margin-right: auto !important;
  max-width: 1000px !important;
} */
/* main content */
 #content {
	/* margin-left: 200px !important;
	margin-right: auto !important;*/
  max-width: 1000px;
}   

/* history tab */
<!-- div.vectorTabs ul li#ca-history {visibility: hidden;} -->
<!-- div.vectorTabs ul li#ca-nstab-main { display:none!important; } -->

/* Source code tab*/
div.vectorTabs ul li#ca-viewsource { visibility: hidden;} 

/* Hide discussion tab */
div.vectorTabs ul li#ca-talk {  display: none!important;}

/*User Read tab */
/*div.vectorTabs ul  li#ca-view { display:none!important; }*/

/* User Page tab */
div.vectorTabs ul li#ca-nstab-user {  display: none!important;}

/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-toggle-expanded.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-expanded .mw-collapsible-arrowtoggle {
 padding-left: 50px !important;
 background-image: url('//docs.linn.co.uk/wiki/images/d/dd/SmallArrowDown.png');
 background-repeat: no-repeat;
 background-position: left bottom;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
 padding-left: 50px !important;
 background-image: url('//docs.linn.co.uk/wiki/images/f/f7/SmallArrowRight.png');
 background-repeat: no-repeat;
 background-position: left top;
}


/* Add arrows to toggle-blocks for collapsible TOC */
.mw-collapsible-toggle-expanded.mw-collapsible-TOC,
.mw-collapsible-toggle-expanded .mw-collapsible-TOC {
 padding-left: 50px !important;
 background-image: url('https://docs.linn.co.uk/wiki/images/b/b5/TOC-40px.jpg');
 background-repeat: no-repeat;
 background-position: left bottom;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-TOC,
.mw-collapsible-toggle-collapsed .mw-collapsible-TOC {
 padding-left: 50px !important;
 background-image: url('https://docs.linn.co.uk/wiki/images/b/b5/TOC-40px.jpg');
 background-repeat: no-repeat;
 background-position: left center;
}

/* Collapse Toggle container */
#collapse-pre-one .mw-collapsible-toggle{
 display: table;
 border-collapse: collapse;
 width: 100%;
}

#collapse-pre-one .mw-collapsible-toggle-row{
 display: table-row;
}

/* Collapse Header should be on the left */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-header{
 display: table-cell;
 vertical-align: middle;
 padding: 5px;
}

/* Collapse indicator image should be inline. align wherever you would like */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator{
 display: table-cell;
 vertical-align: middle;
 padding: 5px;
 text-align: right;
}

/* Collapse indicator image size should be something sane*/
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
height: 20px !important; 
width: 20px !important;
}

/* Collapse indicator image should rotate when toggled*/
#collapse-pre-one:not(.mw-collapsed) .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
 /* Safari */
 -webkit-transform: rotate(90deg);

 /* Firefox */
 -moz-transform: rotate(90deg);

 /* IE */
 -ms-transform: rotate(90deg);

 /* Opera */
 -o-transform: rotate(90deg);

 /* Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {  67% { opacity: 0 }}
@-moz-keyframes blink {  67% { opacity: 0 }}
@-o-keyframes blink {  67% { opacity: 0 }}
@keyframes blink {  67% { opacity: 0 }}

.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
a:hover .visually-hidden,
a:focus .visually-hidden,
button:hover .visually-hidden,
button:focus .visually-hidden {
	position: relative;
	margin: 0;
}

/* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */
.mainpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.mainpage_box {
	flex: 1;
	margin: 5px;
	min-width: 210px;
        /* max-width:48%; */
	border: 1px solid #CCC;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.mainpage_box h3 {
	/* Reset padding so is equal across skins */
	padding: 0;
	margin: 0.5em 0;
}
.mainpage_box h3 .header_icon {
	float: left;
	margin-right: 5px;
}
.mainpage_box .items {
	border-top: 1px solid #CCC;
	padding-top: 0.5em;
}
.mainpage_box p:last-child {
	margin-bottom: 0;
}
.mainpage_boxcontents_small {
	font-size: 95%;
}


.scrollbox {
        height: 50px;  
        overflow: hidden;
        position: relative;
}
.scrollbox h3 {
       font-size: 2em;
       color: blue;
       position: absolute;
       width: 100%;
       height: 100%;
       margin: 0;
       line-height: 20px;
       text-align: center;
 /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);    
       transform:translateX(100%);
 /* Apply animation to this element */  
       -moz-animation: scrollbox 10s linear infinite;
       -webkit-animation: scrollbox 10s linear infinite;
       animation: scrollbox 10s linear infinite;
}
.scrollbox h4 {
       font-size: 1em;
       color: red;
       position: absolute;
       width: 100%;
       height: 100%;
       margin: 0;
       line-height: 20px;
       text-align: center;
 /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);    
       transform:translateX(100%);
 /* Apply animation to this element */  
       -moz-animation: scrollbox 10s linear infinite;
       -webkit-animation: scrollbox 10s linear infinite;
       animation: scrollbox 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scrollbox {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scrollbox {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
}
@keyframes scrollbox {
 0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
 }
}