MediaWiki:Common.css: Difference between revisions

From Ages of Conflict
Browse history interactively
Content added Content deleted
No edit summary
(Added pdf icon and minimum thumb width.)
 
(163 intermediate revisions by 5 users not shown)
Line 1: Line 1:
/** Sidebars **/
/**
/* Placing all sidebars to the left aka forcing layout under 1340px as default
* CSS3 Tips
Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */
*
@media (min-width: 1340px) {
* A stylesheet for creating tooltips without using anything other than CSS3.
#mw-content-block {
*
display: block; }
* created by c.bavota
#mw-content,
* released under GPL v2
#content-bottom-stuff {
*
margin-left: 14em; }
* November 6th, 2013
#mw-content-wrapper {
*/
float: right;

margin-left: -14em;
[data-tips] {
width: 100%; }
position: relative;
/* Width and paddings */
text-decoration: none;
#mw-site-navigation, #mw-related-navigation {
width: 14em; }
#mw-related-navigation {
padding: 0 1em 0 0; }
}
}

.image-row {
[data-tips]:after,
display: flex;
[data-tips]:before {
justify-content: space-between;
position: absolute;
padding: 20px; /* Add padding to the row */
z-index: 100;
opacity: 0;
}
}


.image-box img {
[data-tips]:after {
content: attr(data-tips);
height: 134.38px;
height: 25px;
width: 100%;
line-height: 25px;
transition: 0.2s;
padding: 0 5px;
object-fit: cover;
font-size: 12px;
text-align: center;
color: #fff;
background: #222;
border-radius: 2px;
text-shadow: 0 0 5px #000;
/* -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
/* -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
/* box-shadow: 0 0 5px rgba(0,0,0,0.3); */
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}


.image-box:hover img {
[data-tips]:before {
transform: scale(1.05);
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
}
}
.pi-image {

clip-path: content-box;
[data-tips]:hover:after,
[data-tips]:hover:before {
opacity: 1;
}
}


.pi-image img {
/* Top tips */
transition: transform 0.5s;
[data-tips].top-tip:after,
[data-tips].top-tip:before {
-webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
bottom: 90%;
left: -9999px;
margin-bottom: 12px;
}
}


.pi-image img:hover {
[data-tips].top-tip:before {
transform: scale(1.04);
border-color: #222 transparent transparent transparent;
margin-bottom: 0;
}
}
/** Links **/

/* Normal */
[data-tips].top-tip:hover:after,
a {
[data-tips].top-tip:hover:before {
bottom: 100%;
color: gold !important; }
a:visited {
left: 0;
color: gold !important; }
a:hover {
color: gold !important;
text-decoration: none;
text-shadow: 2px 2px 5px black; }
/* Red */
a.new {
color: red !important; }
a.new:visited {
color: red !important; }
/* External interwiki and web links (affects long Special: links too) */
a.extiw, a.external {
color: gold !important; /* Different color */
padding-right: 0 !important; }
body #mw-content-text {
color: white;
}
}
body {

cursor: url("https://static.miraheze.org/agesofconflictwiki/5/5e/Default.png"), auto;
[data-tips].top-tip:hover:before {
left: 15px;
}
}
a:hover {

cursor: url("https://static.miraheze.org/agesofconflictwiki/5/5e/Default.png"), auto;
/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
-webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: 90%;
left: -9999px;
margin-top: 12px;
}

[data-tips].bottom-tip:before {
border-color: transparent transparent #222 transparent;
margin-top: 0;
}

[data-tips].bottom-tip:hover:after,
[data-tips].bottom-tip:hover:before {
top: 100%;
left: 0;
}

[data-tips].bottom-tip:hover:before {
left: 15px;
}

/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
-webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
left: 96%;
margin-left: 12px;
}

[data-tips].right-tip:before {
border-color: transparent #222 transparent transparent;
margin-left: 0;
}

[data-tips].right-tip:hover:after,
[data-tips].right-tip:hover:before {
left: 100%;
top: 0;
}

[data-tips].right-tip:hover:before {
top: 7px;
}

/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
-webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
right: 96%;
margin-right: 12px;
}
}


/* Things cannot go more than 100% (so stuff cannot overlap) */
[data-tips].left-tip:before {
img {
border-color: transparent transparent transparent #222;
margin-right: 0;
max-width: 100%;
height: auto;
}
}


/* Change the external link icon to a PDF icon for all PDF files */
[data-tips].left-tip:hover:after,
.mw-parser-output a[href$=".pdf"].external,
[data-tips].left-tip:hover:before {
.mw-parser-output a[href*=".pdf?"].external,
right: 100%;
.mw-parser-output a[href*=".pdf#"].external,
top: 0;
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
/* @noflip */
padding: 8px 18px 8px 0;
}
}


/* Minimum thumb width */
[data-tips].left-tip:hover:before {
figure[typeof~='mw:File/Thumb'],
top: 7px;
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
}

Latest revision as of 21:36, 26 February 2024

/** Sidebars **/
/* Placing all sidebars to the left aka forcing layout under 1340px as default 
   Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */
@media (min-width: 1340px) {
	#mw-content-block {
		display: block; }
	#mw-content,
	#content-bottom-stuff {
		margin-left: 14em; }
	#mw-content-wrapper {
		float: right;
		margin-left: -14em;
		width: 100%; }
	/* Width and paddings */
	#mw-site-navigation, #mw-related-navigation {
		width: 14em; }
	#mw-related-navigation {
		padding: 0 1em 0 0; }
}
 
.image-row {
  display: flex;
  justify-content: space-between;
  padding: 20px; /* Add padding to the row */
}

.image-box img {
    height: 134.38px;
    width: 100%;
    transition: 0.2s;
    object-fit: cover;
}

.image-box:hover img {
  transform: scale(1.05);
}
.pi-image {
    clip-path: content-box;
}

.pi-image img {
    transition: transform 0.5s;
}

.pi-image img:hover {
    transform: scale(1.04);
}
/** Links **/
/* Normal */
a {
    color: gold !important; }
a:visited {
    color: gold !important; }
a:hover {
    color: gold !important;
    text-decoration: none;
    text-shadow: 2px 2px 5px black; }
/* Red */
a.new {
    color: red !important; }
a.new:visited {
    color: red !important; }
/* External interwiki and web links (affects long Special: links too)  */
a.extiw, a.external {
    color: gold !important;                /* Different color */
    padding-right: 0 !important; }
    
    body #mw-content-text {
  color: white;
}
body {
  cursor: url("https://static.miraheze.org/agesofconflictwiki/5/5e/Default.png"), auto;
}
a:hover {
  cursor: url("https://static.miraheze.org/agesofconflictwiki/5/5e/Default.png"), auto;
}

/* Things cannot go more than 100% (so stuff cannot overlap) */
img {
    max-width: 100%;
    height: auto;
}

/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	/* @noflip */
	padding: 8px 18px 8px 0;
}

/* Minimum thumb width */
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
	min-width: 100px;
}
Retrieved from "https://agesofconflict.wiki/wiki/MediaWiki:Common.css?oldid=373054"