Difference between revisions of "MediaWiki:Common.css"

From LinnDocs
Jump to: navigation, search
m
m
 
(74 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 +
/* https://en.wikipedia.org/wiki/MediaWiki:Common.css */
  
 
/*.tocnumber { display: none; } */
 
/*.tocnumber { display: none; } */
Line 5: Line 6:
 
.noautonum .tocnumber {
 
.noautonum .tocnumber {
 
     display: none;
 
     display: none;
 +
}
 +
 +
/* .catlinks { display: none; } */
 +
 +
/* Give a bit of space to the TOC */
 +
#toc {
 +
margin: 1em 0;
 +
}
 +
 +
/* CSS placed here will affect registered users only to allow hide test within
 +
<div style="display:none" class="user-show">Difficult</div>    */
 +
.anonymous-show {
 +
  display: none !important;
 +
}
 +
div.user-show,
 +
p.user-show {
 +
  display: block !important;
 +
}
 +
span.user-show,
 +
small.user-show {
 +
  display: inline !important;
 +
}
 +
table.user-show {
 +
  display: table !important;
 +
}
 +
li.user-show {
 +
  display: list-item !important;
 +
}
 +
 +
/*
 +
* 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;
 
}
 
}
  
Line 22: Line 79:
 
} */
 
} */
 
/* main content */
 
/* main content */
−
/* #content {
+
#content {
−
margin-left: 200px !important;
+
/* margin-left: 200px !important;
−
margin-right: auto !important;
+
margin-right: auto !important;*/
 
   max-width: 1000px;
 
   max-width: 1000px;
−
}  */
+
}   
  
−
/* history tab */
+
/* history tab */  
 
div.vectorTabs ul li#ca-history {visibility: hidden;}
 
div.vectorTabs ul li#ca-history {visibility: hidden;}
−
div.vectorTabs ul li#ca-nstab-main { display:none!important; }  
+
div.vectorTabs ul li#ca-nstab-main { display:none!important; }
 +
 
 +
/* talk tab */
 +
div.vectorTabs ul li#ca-talk { display: none !important; }
  
 
/* Source code tab*/
 
/* Source code tab*/
Line 37: Line 97:
 
/* Hide discussion tab */
 
/* Hide discussion tab */
 
div.vectorTabs ul li#ca-talk {  display: none!important;}
 
div.vectorTabs ul li#ca-talk {  display: none!important;}
 +
  
 
/*User Read tab */
 
/*User Read tab */
Line 50: Line 111:
 
  background-image: url('//docs.linn.co.uk/wiki/images/d/dd/SmallArrowDown.png');
 
  background-image: url('//docs.linn.co.uk/wiki/images/d/dd/SmallArrowDown.png');
 
  background-repeat: no-repeat;
 
  background-repeat: no-repeat;
−
  background-position: left center;
+
  background-position: left bottom;
 
}
 
}
 
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
 
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
Line 56: Line 117:
 
  padding-left: 50px !important;
 
  padding-left: 50px !important;
 
  background-image: url('//docs.linn.co.uk/wiki/images/f/f7/SmallArrowRight.png');
 
  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-repeat: no-repeat;
 
  background-position: left center;
 
  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%);
 +
}
 +
}
 +
//F11 toggle hide top bar
 +
document.onkeydown = function( e ) {
 +
if( e == null ) e = event
 +
if( testKey( e, 122 ) ) { //F11
 +
appendCSS('#column-content {margin: 0 0 .6em 0;} #content {margin: 2.8em 0 0 0;} #p-logo, .generated-sidebar, #p-lang, #p-tb, #p-search {display:none;} #p-cactions {left: .1em;} #footer {display:none;}');
 +
return false;
 +
}
 +
}
 +
 +
function testKey( e, intKeyCode ) {
 +
if( window.createPopup )
 +
return e.keyCode == intKeyCode
 +
else
 +
return e.which == intKeyCode
 +
}
 +
 +
//Enlarge picture on hover
 +
.zoom_img img{
 +
-moz-transition:-moz-transform 0.1s ease-in;
 +
-webkit-transition:-webkit-transform 0.1s ease-in;
 +
-o-transition:-o-transform 0.1s ease-in;
 +
transition:transform 0.1 ease-in;
 +
}
 +
 +
.zoom_img img:hover{
 +
-moz-transform:scale(1.5);
 +
-webkit-transform:scale(1.5);
 +
-o-transform:scale(1.5);
 +
transform:scale(1.5);
 +
}
 +
 +
.zoomXL_img img{
 +
-moz-transition:-moz-transform 0.1s ease-in;
 +
-webkit-transition:-webkit-transform 0.1s ease-in;
 +
-o-transition:-o-transform 0.1s ease-in;
 +
transition:transform 0.1 ease-in;
 +
}
 +
 +
.zoomXL_img img:hover{
 +
-moz-transform:scale(2);
 +
-webkit-transform:scale(2);
 +
-o-transform:scale(2);
 +
transform:scale(2);
 
}
 
}

Latest revision as of 12:11, 24 July 2024

/* 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;
}

/* CSS placed here will affect registered users only to allow hide test within 
<div style="display:none" class="user-show">Difficult</div>    */
.anonymous-show {
  display: none !important;
}
div.user-show,
p.user-show {
  display: block !important;
}
span.user-show,
small.user-show {
  display: inline !important;
}
table.user-show {
  display: table !important;
}
li.user-show {
  display: list-item !important;
}

/*
 * 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; }

/* talk tab */
div.vectorTabs ul li#ca-talk { 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%); 
 }
}
//F11 toggle hide top bar
document.onkeydown = function( e ) {
	if( e == null ) e = event
	if( testKey( e, 122 ) ) { //F11
		appendCSS('#column-content {margin: 0 0 .6em 0;} #content {margin: 2.8em 0 0 0;} #p-logo, .generated-sidebar, #p-lang, #p-tb, #p-search {display:none;} #p-cactions {left: .1em;} #footer {display:none;}');
		return false;
	}
}

function testKey( e, intKeyCode ) {
	if( window.createPopup )
		return e.keyCode == intKeyCode
	else
		return e.which == intKeyCode
}

//Enlarge picture on hover
.zoom_img img{
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}

.zoom_img img:hover{
-moz-transform:scale(1.5); 
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}

.zoomXL_img img{
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}

.zoomXL_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}
Retrieved from "https://docs.linn.co.uk/wiki/index.php?title=MediaWiki:Common.css&oldid=29956"