MediaWiki:Common.css
De La Bibliothèque Impériale
Révision datée du 26 mars 2023 à 22:10 par Blacklisted Jack (discussion | contributions)
@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; } 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[src^="/images"] { max-width: 100%; height: auto; } /** 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; } }