MediaWiki:Common.css : Différence entre versions

Version du 27 mars 2023 à 00:45

@import url('https://fonts.googleapis.com/css2?family=Alkalami&family=Asul:wght@400;700&family=Encode+Sans+Semi+Condensed&family=Trykker&family=Asul:wght@400;700&family=IM+Fell+English+SC&family=Pirata+One&family=Spectral+SC:wght@500&family=Trykker&display=swap');

div#content {
	background-color: #cfc9bd;
	color: #000;
	padding: 1em 50px;
	border-width: 0;
	box-shadow: inset 0 5px 5px -2px #aca0a0;
	border-radius: 10px;
	overflow: hidden;
}
div#content::after {
	content: '';
	background: url('/images/6/6e/Border-page.jpg');
	background-size: 78px auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 75px;
	height: 100%;
	background-position-x: -11px;
	background-repeat: repeat-y;
	-webkit-mask: linear-gradient(90deg, black, transparent 70%);
	pointer-events: none;
	border-radius: 8px;
}
div#content::before {
    content: '';
    background: url(//bibliotheque-imperiale.com/images/2/25/Border-page-mirror.jpg);
    background-size: 78px auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 100%;
    background-position-x: 11px;
    background-repeat: repeat-y;
    -webkit-mask: linear-gradient(-90deg,black,transparent 70%);
    pointer-events: none;
    border-radius: 8px;
}

#content h1, 
#content h2, 
#content h3, 
#content h4, 
#content h5, 
#content h6 {
	color: black !important;
}
a, 
a:visited {
	color: #087eac;
}
#p-personal ul {
	text-transform: lowercase;
	display: flex;
	flex-flow: row;
	height: 31px;
	justify-content: flex-end;
	/* width: 100%; */
	padding: 5px 15px;
	box-sizing: border-box;
	font-size: 100%;
	align-items: center;
	background: linear-gradient(135deg,transparent,transparent 10%,#000);
	float: right;
}
#p-personal li a {
	text-decoration: none;
	padding-bottom: .2em;
	background: none !important;
	font-weight: inherit;
	color: white;
	font-size: 1em !important;
	font-family: Verdana,Geneva,sans-serif;
}
#globalWrapper {
	box-sizing: border-box;
	background: linear-gradient(#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),linear-gradient(90deg,#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),radial-gradient(#221917 60%,#000);
	background-size: auto 3px,3px auto,auto;
	box-shadow: inset 0 0 15px black;
}
#p-logo {
	width: 100% !important;
	text-align: center;
}
#p-logo a.mw-wiki-logo, #p-logo a.mw-wiki-logo:hover {
	width: 100% !important;
	background-position: center center !important;
}

#p-,
#p-search,
#p-tb {
	width: 12.5em;
	transform: translateX(-0.1em);
}

.portlet {
	border: none;
}

#p- .pBody,
#p-search .pBody,
#p-tb .pBody {
	margin: 5px 5px 5px 5px;
	border: none;
	font-size: 1em;
	padding: 0.5em 0;
	box-sizing: border-box;
	position: relative;
	background: #cfc9bd;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 1px 5px, inset 0 2px #0000004d, inset 0 -1px #0000004d;
}
#p- .pBody::after, 
#p-tb .pBody::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 7px;
	box-shadow: inset 3px 0 3px -3px grey;
}
#p- .pBody::before, 
#p-tb .pBody::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 7px;
	transform: scaleX(-1);
	box-shadow: inset 3px 0 3px -3px grey;
}

div#column-one {
	position: fixed;
	padding: 160px 5px 0 0;
	height: 100%;
	box-sizing: border-box;
	background: linear-gradient(#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),linear-gradient(90deg,#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),radial-gradient(var(--side-bg-color) 60%,#000);
	background-size: auto 3px,3px auto,auto;
	box-shadow: inset 0 0 0 1px #31261d,inset 0 0 5px 5px #8776591c,inset 0 15px 1px 15px black,0 0 0 1px black,inset 30px 0 0 #a49892,inset 31px 0 0 #b7b7b7,inset 35px 0 0 #9d9d9d,inset 36px 0 5px #131313,inset -30px 0 0 #a49892,inset -31px 0 0 #b7b7b7,inset -35px 0 0 #9d9d9d,inset -36px 0 5px #131313;
	width: 158px;
	--side-bg-color: #1e0202;
}

#p- a,
#p-search a,
#p-tb a {
	font-weight: normal;
	color: #000;
	display: block;
	text-decoration: unset;
	font-size: 0.9em;
	text-overflow: ellipsis;
	overflow: hidden;
	font-family: 'Spectral SC',serif;
	text-shadow: none;
	padding: 0 0.6em 0 1em;
	position: relative;
	z-index: 1;
}
#p- a:hover,
#p-search a:hover,
#p-tb a:hover {
	background: #00000021;
}

#p- a:hover::after, 
#p-tb a:hover::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translatey(-50%) translatex(-50%) rotate(45deg);
	height: 10px;
	width: 10px;
	background: linear-gradient(45deg,#473122 50%,#00f0 80%),radial-gradient(white,#462f21);
	margin: 0;
	padding: 0;
	box-shadow: inset 0 0 3px white;
}

#p- ul,
#p-search ul,
#p-tb ul {
	list-style: none;
	margin: 0;
}

#p- li,
#p-search li,
#p-tb li {
	margin: 0 0.5em;
	box-shadow: 0 2px 2px -2px #6a4e354a;
}
#p-search .pBody {
	padding: 0.2em !important;
}
#p-search #searchform {
	padding: 0;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	height: 2em;
	display: block;
}
#p-search #searchform #searchInput {
	margin: 0;
	font-size: 95%;
	width: 100%;
	padding: 0 0 0 0.5em;
	height: 2em;
}

#p-search #searchGoButton,
#mw-searchButton {
	display: none;
}

#p-search h3,
#p-tb h3 {
	text-transform: capitalize;
	display: block;
	text-align: center;
	font-family: 'Spectral SC',serif;
	font-size: 1em;
	line-height: normal;
	height: unset;
	padding: 0;
	margin: 0;
}

#firstHeading {
	font-size: 2em;
	font-family: 'Trykker', serif;
}
#p-cactions ul {
	list-style-type: none;
	list-style-image: none;
	overflow: hidden;
}
#p-cactions li a {
	z-index: 1 !important;
	font-family: 'Spectral SC',serif;
	font-weight: normal;
	font-size: 1.05em;
	background: radial-gradient(#01101d 60%,#000);
	color: #d2d2d2;
	border-radius: 3px 3px 0 0;
	padding: 0.5em 1em 0.5em 1em !important;
	background: radial-gradient(#200202 60%,#000);
}

#p-cactions li {
	border: none !important;
	background: none;
	padding: 0;
}
#p-cactions li.selected a {
	z-index: 3;
	background-color: #cfcfcf;
	background: #cfc9bd;
	color: black;
	border-radius: 3px 3px 0 0;
	border: none !important;
	font-weight: normal;
	box-shadow: inset 0 -5px 0 -2px #6f624da8,inset 0 -5px 5px -2px #fff;
}
#p-cactions li a:hover {
	z-index: 1 !important;
	text-decoration: none;
	color: white !important;
}

div#content {
	margin-top: 6.5em;
}
#p-cactions {
	left: 12.5em;
	top: 4.7em;
}
#p-cactions ul {
	overflow: visible;
}

@media only screen and (min-width: 1024px)  {
#column-login #p-personal::before {
	content: 'La Bibliothèque Impériale';
	position: absolute;
	top: 4px;
	left: 160px;
	height: unset;
	padding: 0.45em 0.5em;
	font-family: 'IM Fell English SC',serif;
	font-size: 2.2em;
	background: linear-gradient(#640000,#c6bc9191,transparent 70%),linear-gradient(90deg,#4d0000,#aa7b52,transparent 80px,transparent calc(100% - 20px),#4d0000),linear-gradient(-90deg,#e8b990,transparent 80px),radial-gradient(#d7af84,black 110%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	z-index: 2;
	user-select: none;
}
#column-login #p-personal::after {
	content: 'La Bibliothèque Impériale';
	position: absolute;
	top: 5px;
	left: 160px;
	height: unset;
	padding: 0.45em 0.5em;
	font-family: 'IM Fell English SC',serif;
	font-size: 2.2em;
	z-index: 1;
	user-select: none;
	text-shadow: 0 0 2px black;
}
}

div#footer {
	color: #a49993;
	border: 1px solid #a49892;
	text-align: center;
	font-size: 90%;
	width: 90.85%;
	float: right;
	margin: 0 .6em .6em -12.2em;
	padding: 0 0 0 0;
	background: linear-gradient(#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),linear-gradient(90deg,#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),radial-gradient(var(--side-bg-color) 60%,#000);
	background-size: auto 3px,3px auto,auto;
	--side-bg-color: #1e0202;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: baseline;
}
div#footer #f-list {
	margin: 0;
	flex: 1;
}

#catlinks {
	background: #372424 !important;
	border-radius: 5px;
	padding: 2px;
}
#mw-normal-catlinks {
	background: linear-gradient(#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),linear-gradient(90deg,#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),radial-gradient(var(--side-bg-color) 60%,#000);
	background-size: auto 3px,3px auto,auto;
	--side-bg-color: #1e0202;
	padding: 1em;
}

#content .toctitle h2, .tocnumber {
	color: #aaa !important;
}
#toc {
	background: linear-gradient(#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),linear-gradient(90deg,#b9757520 0px,transparent 4px,transparent calc(100% - 4px),#b9757520 100%),radial-gradient(var(--side-bg-color) 60%,#000);
	background-size: auto 3px,3px auto,auto;
	--side-bg-color: #1e0202;
	padding: 1em;
}

/** Composants custom **/

.react-zoom {
	transition: 0.3s all ease-in-out;
	position: relative;
	z-index: 0;
}
.react-zoom:hover {
	transform: scale(1.05);
	z-index: 1;
}

/** Recadrage des images qui débordent **/
.mw-parser-output > .center img,
.mw-parser-output > .thumb img,
.mw-parser-output > .floatright > a > img,
.mw-parser-output > .floatleft > a > img {
	max-width: 100%;
	height: auto;
}
.thumbinner {
	max-width: 100%;
}
div.thumb {
	max-width: 100%;
}

/** Gestion pour petits écrans **/
@media only screen and (max-height: 1199px)  {
.large-screen-only {
   display none !important;
}
}

/** Menu des thèmes **/
#custom-theme-wrapper {
	display: none;
}

@media only screen and (min-height: 800px)  {
#custom-theme-wrapper {
	position: fixed;
	left: 0;
	top: 100%;
	width: 160px;
	text-align: center;
	padding: 1em;
	display: flex;
	flex-flow: column;
	box-sizing: border-box;
	color: black;
	background: #00000082;
	transform: translateY(-2.9em);
	transition: 0.3s all ease-in-out;
	display: none;
}
#custom-theme-wrapper:hover {
	transform: translateY(-100%);
}
.themeBoxLabel {
	display: block;
	color: white;
	font-family: 'Spectral SC',serif;
	font-size: 1.2em;
}

}