@@ Ligne 1 : / Ligne 1 : @@
-<includeonly>
+<includeonly>{{#css:
-<div class="no-print explorer">
-<div class="explorer-btn"><div data-trigger="ob-nav" data-group="toggle-menu">☰</div>[[Fichier:Logo-OB-2021.jpg|100px]]</div>
+.book-wrapper {
-</div>
+	display: flex;
-<div class="no-print explorer-pane" data-target="ob-nav">
+	justify-content: center;
-<div class="explorer-closer" data-group="toggle-menu" data-trigger="ob-navmenu-closer"></div><div data-target="ob-navmenu-closer"></div>
+	margin: 20px;
-<div class="novum-majoris">
+}
-<div class="novum-majoris-title">Novum Majoris</div>
+.book-wrapper.no-events {
-<div class="novum-majoris-content">{{Novum Majoris}}</div>
+	pointer-events: none;
-<div class="novum-majoris-footer">[[Fichier:Deco_cable.png]]</div>
+}
-</div>
-<div class="explorer-back-home">[[Accueil]]</div>
+/* ///////////////////////////////////////////////////
-<div class="explorer-search">{{#tag:inputbox|type=search|placeholder=Rentrez votre recherche...}}</div>
-<div class="explorer-menu">
+HARDCOVER
-<div class="explorer-menu-item">Univers<div class="explorer-menu-item-pane">
+Table of Contents
-{{#categorytree:Histoire|mode=pages|depth=0}}
-{{#categorytree:Chronologie Générale|mode=pages|depth=0}}
+. container
-{{#categorytree:Panthéon/Religions|mode=pages|depth=0}}
+. background & color
-{{#categorytree:Imperium|mode=pages|depth=0}}
+. opening cover, back cover and pages
-{{#categorytree:L'Immaterium|mode=pages|depth=0}}
+. position, transform y transition
-{{#categorytree:Chaos|mode=pages|depth=0}}
+. events
-{{#categorytree:Xenos|mode=pages|depth=0}}
+. Bonus
-{{#categorytree:Planètes|mode=pages|depth=0}}
+	- Cover design
-{{#categorytree:Necromunda|mode=pages|depth=0}}
+	- Ribbon
-</div><div class="explorer-menu-item-desc">
+	- Figcaption
-[[Fichier:Menu-univers.jpg|center|186px]]
+. mini-reset
-<div class="explorer-menu-item-desc-title">Univers</div>
-''« …sinistre cauchemar d’un avenir lointain, où seule la guerre règne et où la galaxie est en flammes… »
+/////////////////////////////////////////////////////*/
+/*
+. container
+*/
+.book {
+	position: relative;
+	width: 160px;
+	height: 220px;
+	-webkit-perspective: 1000px;
+	-moz-perspective: 1000px;
+	perspective: 1000px;
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	transition: 0.8s all ease-in-out 0.2s;
+}
+.book.sliding:hover {
+	transform: translateX(50%);
+}
+.book * {
+	pointer-events: none;
+}
+.book-wrapper:not(.no-events) .book .page-content,
+.book-wrapper:not(.no-events) .book .page-content * {
+	pointer-events: all;
+}
+/*
+. background & color
+*/
+/* HARDCOVER FRONT */
+.hardcover_front .face:first-child {
+	background-color: #eee;
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+.book > .hardcover_front > .face::after {
+	content: none! important;
+}
-''« Dans les ténèbres, l'aveugle est le meilleur des guides. En cet âge de démence, faites confiance au fou pour vous montrer la voie. »
+/* reverse */
-</div></div>
+.hardcover_front .face:last-child {
-<div class="explorer-menu-item">Factions<div class="explorer-menu-item-pane">
+	box-shadow: inset 0 0 2px #f9d2d247, 0 0 5px black !important;
-<div class="explorer-menu-item-pane-title">FACTIONS</div>
+background: linear-gradient(135deg, #444141 10%, #212424 25%, #141515 75%, #282525) !important;
-{{#categorytree:Factions de l'Imperium|mode=pages|depth=0}}
+box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black !important;
-{{#categorytree:Factions du Chaos|mode=pages|depth=0}}
+}
-{{#categorytree:Factions Xenos|mode=pages|depth=0}}
-</div><div class="explorer-menu-item-desc">
-[[Fichier:Menu-factions.jpg|center|186px]]
-<div class="explorer-menu-item-desc-title">Factions</div>
-''« Je ne me soucie pas de qui connaîtra la vérité, maintenant, demain, ou dans dix mille ans. La loyauté porte en elle sa propre récompense. »'' <strong>- Lion El’Jonson</strong>
+/* HARDCOVER BACK */
+.hardcover_back .face::after {
+	content: none !important;
+}
+.hardcover_back .face:first-child {
+	box-shadow: inset 0 0 2px #f9d2d247, 0 0 5px black !important;
+background: linear-gradient(135deg, #444141 10%, #212424 25%, #141515 75%, #282525) !important;
+box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black !important;
+}
-La galaxie gothique ravagée par la guerre du lointain futur grouille d’armées de l’Imperium, d’adorateurs des noirs dieux du Chaos et de peuples Xenos belliqueux, tous opposés dans le plus grand conflit que les étoiles elles-mêmes aient connu.</div></div>
+/* reverse */
-<div class="explorer-menu-item">Personnages<div class="explorer-menu-item-pane">
+.hardcover_back .face:last-child {
-{{#categorytree:Personnages de l'Univers de Warhammer 40k|mode=pages|depth=0}}
+	box-shadow: inset 0 0 2px #f9d2d247, 0 0 5px black !important;
-</div><div class="explorer-menu-item-desc">
+background: linear-gradient(135deg, #444141 10%, #212424 25%, #141515 75%, #282525) !important;
-[[Fichier:GabrielAngelos-min.jpg|x260px|center]]
+box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black !important;
-<div class="explorer-menu-item-desc-title">Personnages</div>
+}
-''« L’univers est vaste et quoi qu’il advienne, nul ne se souviendra de vous… »''
+.book_spine .face:first-child {
+	background: #eee;
+}
+.book_spine .face:last-child {
+	background: #333;
+}
-Les Héros et personnages illustres naissent des guerres et des tragédies, luttant et oeuvrant pour réaliser ou lutter contre leur destin, quand ce n'est celui d’un Monde entier ou de l'univers lui-même.
-Vous trouverez ici une liste de quelques uns de ces personnages ayant laissé leur empreinte, aussi futile soit-elle, au milieu des conflits sans nombre du sombre univers de Warhammer 40.000.</div></div>
+/* page */
-<div class="explorer-menu-item">Batailles<div class="explorer-menu-item-pane">
-{{#categorytree:Batailles de la Galaxie|mode=categories|depth=0}}
-</div><div class="explorer-menu-item-desc">
-[[Fichier:Battle-img.jpg|186px|center]]
-<div class="explorer-menu-item-desc-title">Batailles</div>
-<div style="font-style: italic; text-align: justify;">
+.page > .face {
-« Dans l’obscurité, je serai la lumière.<br>
+	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
-Dans le doute, je garderai la foi.<br>
+	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
-Dans la rage, j'affinerai mon talent.<br>
+	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
-Dans la vengeance, je n'aurai nulle pitié.<br>
+	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
-Au cœur de la bataille, je n'aurai nulle peur.<br>
+	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
-Devant la mort, je n'aurai aucun regret... »<br>
+	border-radius: 0px 5px 5px 0px;
-</div>
+}
-:'''- Liturgie de Bataille des Blood Ravens'''
+.book > * > * > .image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 0;
+	pointer-events: none;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+}
+.book > * > * > .page-content {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	text-align: left;
+	background: linear-gradient(#ac272710 0px, transparent 1px, transparent calc(100% - 1px), #ac272730 100%), linear-gradient(90deg, #ac272710 0px, transparent 1px, transparent calc(100% - 1px), #ac272710 100%), radial-gradient(#00000026, transparent, #00000078);
+	background-position-x: 0%, 0%, 0%;
+	background-position-y: 0%, 0%, 0%;
+	background-repeat: repeat, repeat, repeat;
+	background-size: auto, auto, auto;
+	background-repeat: repeat;
+	background-size: auto 10px, 10px auto, auto auto;
+	background-position: center center;
+	box-shadow: inset 0 0 20px #ffffff85;
+}
+.book .page-content * {
+	color: #571c1c !important;
+	font-size: 11px;
+	font-weight: inherit;
+	text-decoration: none;
+	text-shadow: 0 0 10px white;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.book .page-content .image-page {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0.5em;
+	width: 100%;
+	pointer-events: none !important;
+	height: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+.book .page-content .image-page > .image {
+	pointer-events: none !important;
+	width: 100%;
+	height: 100%;
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.book .page-content .image-page img {
+	width: calc(100% - 1em);
+	-webkit-mask-image: linear-gradient(90deg, black 90%, transparent);
+	mask-image: linear-gradient(90deg, black 90%, transparent);
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
+.book .page-content hr {
+	background: #28221ea3;
+	margin: 1em;
+}
+.book > * > ::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	box-shadow: 0 0 1px grey, inset 15px 0 25px -15px #311700, inset 0 0 10px white;
+}
+/*
+. opening cover, back cover and pages
+*/
+.hardcover_front {
+	-webkit-transform: rotateY(-34deg) translateZ(8px);
+	-moz-transform: rotateY(-34deg) translateZ(8px);
+	transform: rotateY(-34deg) translateZ(8px);
+	z-index: 100;
+}
-</div></div>
+.hardcover_back {
-<div class="explorer-menu-item">Technologie<div class="explorer-menu-item-pane">
+	-webkit-transform: rotateY(-15deg) translateZ(-8px);
-{{#categorytree:Armement‎|mode=pages|depth=0}}
+	-moz-transform: rotateY(-15deg) translateZ(-8px);
-{{#categorytree:Armures‎|mode=pages|depth=0}}
+	transform: rotateY(-15deg) translateZ(-8px);
-{{#categorytree:Flottes de Guerre‎|mode=pages|depth=0}}
+}
-{{#categorytree:Véhicules‎|mode=pages|depth=0}}
-{{#categorytree:Titans|mode=pages|depth=0}}
-</div><div class="explorer-menu-item-desc">
-[[Fichier:Menu-techno.jpg|186px|center]]
-<div class="explorer-menu-item-desc-title">Technologie</div>
-''« L’Omnimessie a rempli la galaxie de mystères afin que nous puissions les découvrir et pour nous rapprocher de Sa perfection. Les ignorer même en temps de guerre, est une hérésie. »
-:'''- Archimagos Belisarius Cawl.
-</div></div>
-<div class="explorer-menu-item">Jeux de Rôle<div class="explorer-menu-item-pane">
-{{#categorytree:Jeux de Rôle|mode=pages|depth=0}}
-{{#categorytree:Les Carrières|mode=pages|depth=0}}
-</div><div class="explorer-menu-item-desc">
-<div class="no-shadow">[[Fichier:Menu-jdr.jpg|center|186px]]</div>
-<div class="explorer-menu-item-desc-title">Jeux de Rôle</div>
-Liste des jeux de rôle papier connus mettant en scène l’univers de Warhammer 40.000, ainsi que les ''carrières'' (rôles) que des joueurs pourraient potentiellement interpréter en tant qu’Humain, Xenos ou Hérétique dans ce type de jeu.
+.page .face:nth-child(1) {
+	-webkit-transform: rotateY(-28deg);
+	-moz-transform: rotateY(-28deg);
+	transform: rotateY(-28deg);
+}
-<div style="background: black; text-align: center; padding: 0.5em;">''Pages en construction''</div>
+.page .face:nth-child(2) {
-</div></div>
+	-webkit-transform: rotateY(-30deg);
-<div class="explorer-menu-item">Manufactorum<div class="explorer-menu-item-pane">{{Spécial:Nouvelles_pages}}</div><div class="explorer-menu-item-desc">
+	-moz-transform: rotateY(-30deg);
-[[Fichier:Menu-manufactorum.jpg|center|186px]]
+	transform: rotateY(-30deg);
-<div class="explorer-menu-item-desc-title">Manufactorum</div>
+}
-Liste des dernières pages ajoutées par les bibliothécaires de l’'''''OMNIS BIBLIOTHECA'''''.</div></div>
+.page .face:nth-child(3) {
-<div style="position: absolute; width: 100%; bottom: 110px;left: 0;font-family: 'courier new',monospace;text-align: center;font-size: 11px; white-space: nowrap; padding: 0 1em;box-sizing: border-box;color: #5b3937;perspective: 1500px;">
+	-webkit-transform: rotateY(-32deg);
-<div class="explorer-console-entry" style="color: #18484a;">+ Données Noosphèriques +</div>
+	-moz-transform: rotateY(-32deg);
-<div class="explorer-console-entry" style="color: #604544;">+++ ACCÈS CONFIDENTIEL +++</div>
+	transform: rotateY(-32deg);
-</div>
-<div class="menu-discord">[https://discord.com/invite/m2hJh7N Discordiae]</div>
-<div style="position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black, 0 -25px 25px -25px #000 !important;z-index: 1;background: linear-gradient(135deg, #444141 10%, #414444 25%, #2f3535 40%, #232625 55%, #3c4240 75%, #2f2d2d 85%) !important;padding: 1em;box-sizing: border-box;border-radius: 10px 10px 0 0;overflow: clip;border: 2px solid black;border-top-color: #0009;border-left-color: #221506;border-right-color: #000000c2;border-bottom: none;"><div style="margin: auto; border-radius: 50%;display: table;background: linear-gradient( transparent, black), radial-gradient(#02f3ffc2, #f000);box-shadow: 0 0 10px #7cf2f2;">[[Fichier:Discord-ob.png|50px|link=https://discord.com/invite/m2hJh7N]]</div>
-<div style="position: absolute;top: 0;left: 0;width: 60%;height: 100%;background: #f000; border-radius: 0 0 50% 0;transform: translateX(-50%) translateY(-10%);box-shadow: inset 0 0 10px black, 0 0 0 5px #252827;background: linear-gradient(rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 2px,rgba(128,128,128,0.1) 2px,rgba(128,128,128,0.1) 4px),radial-gradient( #481d1db3,rgba(28,20,20,0.76)),linear-gradient(135deg,#531714,#531714,#000,#531714,#000,#531714,#000);background-position-y: 0%, 0%, 0%;background-size: auto, auto, auto;background-size: auto 4px,100% 100%;"></div>
-<div style="position: absolute;top: 0;right: 0;width: 60%;height: 100%;background: #f000; border-radius: 0 0 0 50%;transform: translateX(50%) translateY(-10%);box-shadow: inset 0 0 10px black, 0 0 0 5px #181a19;background: linear-gradient(rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 2px,rgba(128,128,128,0.1) 2px,rgba(128,128,128,0.1) 4px),radial-gradient( #000000b3,rgba(28,20,20,0.76)),linear-gradient(135deg,#531714,#531714,#000,#531714,#000,#531714,#000);background-position-y: 0%, 0%, 0%;background-size: auto, auto, auto;background-size: auto 4px,100% 100%;"></div></div>
-</div></div>{{#css:
-body.OB .mw-parser-output > .center {
-	overflow: auto;
 }
-body.OB .mw-parser-output > .center img {
-	max-width: 100%;
+.page .face:nth-child(4) {
-	height: auto;
+	-webkit-transform: rotateY(-34deg);
+	-moz-transform: rotateY(-34deg);
+	transform: rotateY(-34deg);
 }
-body.OB .mw-parser-output > table {
-	overflow: auto;
+.page .face:nth-child(5) {
+	-webkit-transform: rotateY(-36deg);
+	-moz-transform: rotateY(-36deg);
+	transform: rotateY(-36deg);
 }
-@media only screen and (min-width: 1024px) {
-  #p-cactions::after {
+/*
-	content: 'Omnis-Bibliotheca';
+. position, transform & transition
+*/
+.hardcover_front,
+.hardcover_back,
+.book_spine,
+.hardcover_front .face,
+.hardcover_back .face,
+.book_spine .face {
 	position: absolute;
-	bottom: 100%;
+	top: 0;
-	left: 50px;
+	left: 0;
-	background: linear-gradient(116.5deg,#ddd 18px,#000000bd 20px,#490c0d,#000000bd);
+	width: 100%;
-	height: 32px;
+	height: 100%;
-	display: flex;
+	-webkit-transform-style: preserve-3d;
-	justify-content: center;
+	-moz-transform-style: preserve-3d;
-	align-items: center;
+	transform-style: preserve-3d;
-	padding: 0 36px 0 46px;
+}
-	font-style: normal;
-	letter-spacing: 5px;
+.hardcover_front,
-	color: white;
+.hardcover_back {
-	text-transform: none;
+	-webkit-transform-origin: 0% 100%;
-	font-weight: normal;
+	-moz-transform-origin: 0% 100%;
-	clip-path: polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%) !important;
+	transform-origin: 0% 100%;
-	font-family: 'Grenze Gotisch', cursive;
+}
-	font-size: 20px;
-  }
+.hardcover_front {
+	-webkit-transition: all 0.8s ease 0.2s, z-index 0.6s 0.2s;
+	-moz-transition: all 0.8s ease 0.2s, z-index 0.6s 0.2s;
+	transition: all 0.8s ease 0.2s, z-index 0.6s 0.2s;
+}
+/* HARDCOVER front */
+.hardcover_front .face:first-child {
+	cursor: default;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	-webkit-transform: translateZ(2px);
+	-moz-transform: translateZ(2px);
+	transform: translateZ(2px);
+}
+.hardcover_front .face:last-child {
+	-webkit-transform: rotateY(180deg) translateZ(2px);
+	-moz-transform: rotateY(180deg) translateZ(2px);
+	transform: rotateY(180deg) translateZ(2px);
+}
+/* HARDCOVER back */
+.hardcover_back .face:first-child {
+	-webkit-transform: translateZ(2px);
+	-moz-transform: translateZ(2px);
+	transform: translateZ(2px);
+}
+.hardcover_back .face:last-child {
+	-webkit-transform: translateZ(-2px);
+	-moz-transform: translateZ(-2px);
+	transform: translateZ(-2px);
 }
-.explorer-pane .novum-majoris-title {
-	margin: 5px auto 15px;
+/* BOOK SPINE */
-	padding: 0 0 10px;
+.book_spine {
-	text-align: center;
+	-webkit-transform: rotateY(60deg) translateX(2px) translateZ(-12px);
-	font-size: 13px;
+	-moz-transform: rotateY(60deg) translateX(2px) translateZ(-12px);
-	font-family: sans-serif;
+	transform: rotateY(60deg) translateX(2px) translateZ(-12px);
-	font-style: italic;
+	width: 16px;
-	letter-spacing: 2px;
+	z-index: 0;
-	background-image: linear-gradient(135deg,#bdbdbd33 0,#46424163 25%,#aaaaaa4f 40%,#26262691 55%,#7b7b7b91 75%,#22222291 85%),radial-gradient(#ffd990,#6f510b);
-	background-clip: border-box;
-	-webkit-background-clip: text;
-	color: transparent;
-	text-transform: none;
-	box-shadow: 0px 2px 1px -2px grey,0px 4px 0px -2px black;
-	font-family: 'Grenze Gotisch', cursive;
-	font-weight: normal;
-	font-size: 21px;
-	font-style: normal;
 }
-body.OB .explorer-menu-item {
+.book_spine .face:first-child {
-	color: white;
+	-webkit-transform: translateZ(2px);
-	padding: 0.7em 0 0.7em 4px;
+	-moz-transform: translateZ(2px);
-	text-shadow: 0 0 2px black,0 0 3px #ff6130,0 0 3px #ff6130,0 0 5px #ff6130 !important;
+	transform: translateZ(2px);
-	font-family: 'Grenze Gotisch', cursive;
-	font-size: 16px;
-	letter-spacing: 4px;
 }
-body.OB .explorer-menu-item:hover {
-	text-shadow: 0 0 2px #000,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
+.book_spine .face:last-child {
+	-webkit-transform: translateZ(-2px);
+	-moz-transform: translateZ(-2px);
+	transform: translateZ(-2px);
 }
-body.OB .explorer-menu-item > * {
-	font-family: sans-serif !important;
+.page,
-	font-size: 12px !important;
+.page > .face {
+	position: absolute;
+	top: 0;
+	left: 0;
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
 }
-body.OB .explorer-pane .explorer-back-home {
-	border-bottom: 1px solid #414141;
+.page {
-	background: radial-gradient(black, transparent 70%), linear-gradient(135deg,#717978,#414444,#575b5b,#232625,#3c4240,#1f2322,#717978,#414444,#575b5b,#232625,#3c4240,#1f2322) !important;
+	width: 100%;
-	box-shadow: inset 1px 1px #ffffff1f,inset 0 0 0 1px #272727,0 4px 10px black,inset 0 0 50px black !important;
+	height: 98%;
-	position: relative;
+	top: 1%;
-	margin-bottom: 20px;
+	left: 3%;
+	z-index: 10;
 }
-body.OB .explorer-pane .explorer-back-home a {
+.page > .face {
+	width: 100%;
 	height: 100%;
-	text-decoration: none;
+	-webkit-transform-origin: left center;
-	padding: 5px 1em 5px 0;
+	-moz-transform-origin: left center;
-	margin: 1px;
+	transform-origin: left center;
-	border: 1px solid #00000052;
+	-webkit-transition-property: transform;
-	font-family: 'Grenze Gotisch', cursive;
+	-moz-transition-property: transform;
-	font-weight: normal;
+	transition-property: transform;
-	font-size: 20px;
+	-webkit-transition-timing-function: ease;
-	display: flex;
+	-moz-transition-timing-function: ease;
-	align-items: center;
+	transition-timing-function: ease;
-	justify-content: center;
+	transition-delay: 0.2s;
-	background-image: linear-gradient(135deg,#bdbdbd33 0,#46424163 25%,#aaaaaa4f 40%,#26262691 55%,#7b7b7b91 75%,#22222291 85%),radial-gradient(#ffd990,#6f510b) !important;
+}
-	background-clip: border-box !important;
-	-webkit-background-clip: text !important;
+.page > .face:nth-child(1) {
-	color: transparent !important;
+	-webkit-transition-duration: 0.6s;
-	text-transform: none;
+	-moz-transition-duration: 0.6s;
+	transition-duration: 0.6s;
+}
+.page > .face:nth-child(2) {
+	-webkit-transition-duration: 0.6s;
+	-moz-transition-duration: 0.6s;
+	transition-duration: 0.6s;
+}
+.page > .face:nth-child(3) {
+	-webkit-transition-duration: 0.4s;
+	-moz-transition-duration: 0.4s;
+	transition-duration: 0.4s;
+}
+.page > .face:nth-child(4) {
+	-webkit-transition-duration: 0.5s;
+	-moz-transition-duration: 0.5s;
+	transition-duration: 0.5s;
+}
+.page > .face:nth-child(5) {
+	-webkit-transition-duration: 0.6s;
+	-moz-transition-duration: 0.6s;
+	transition-duration: 0.6s;
+}
+/*
+. events
+*/
+.book:hover > .hardcover_front {
+	-webkit-transform: rotateY(-155deg) translateZ(0);
+	-moz-transform: rotateY(-155deg) translateZ(0);
+	transform: rotateY(-155deg) translateZ(0);
+	z-index: 0;
+}
+.book:hover > .page .face:nth-child(1) {
+	-webkit-transform: rotateY(-30deg);
+	-moz-transform: rotateY(-30deg);
+	transform: rotateY(-30deg);
+	-webkit-transition-duration: 1.5s;
+	-moz-transition-duration: 1.5s;
+	transition-duration: 1.5s;
+}
+.book:hover > .page .face:nth-child(2) {
+/*
+	-webkit-transform: rotateY(-35deg);
+	-moz-transform: rotateY(-35deg);
+	transform: rotateY(-35deg);
+*/
+	-webkit-transition-duration: 1.8s;
+	-moz-transition-duration: 1.8s;
+	transition-duration: 1.8s;
+}
+.book:hover > .page .face:nth-child(3) {
+	-webkit-transform: rotateY(-130deg);
+	-moz-transform: rotateY(-130deg);
+	transform: rotateY(-130deg);
+	-webkit-transition-duration: 1.6s;
+	-moz-transition-duration: 1.6s;
+	transition-duration: 1.6s;
+}
+.book:hover > .page .face:nth-child(4) {
+	-webkit-transform: rotateY(-140deg);
+	-moz-transform: rotateY(-140deg);
+	transform: rotateY(-140deg);
+	-webkit-transition-duration: 1.4s;
+	-moz-transition-duration: 1.4s;
+	transition-duration: 1.4s;
+}
+.book:hover > .page .face:nth-child(5) {
+	-webkit-transform: rotateY(-150deg);
+	-moz-transform: rotateY(-150deg);
+	transform: rotateY(-150deg);
+	-webkit-transition-duration: 1.2s;
+	-moz-transition-duration: 1.2s;
+	transition-duration: 1.2s;
+}
+/*
+.2 no mouse events (smartphones, tablets)
+*/
+@media (hover: none) {
+.book.open-for-touchable > .hardcover_front {
+	-webkit-transform: rotateY(-155deg) translateZ(0);
+	-moz-transform: rotateY(-155deg) translateZ(0);
+	transform: rotateY(-155deg) translateZ(0);
+	z-index: 0;
+}
+.book.open-for-touchable > .page .face:nth-child(1) {
+	-webkit-transform: rotateY(-30deg);
+	-moz-transform: rotateY(-30deg);
+	transform: rotateY(-30deg);
+	-webkit-transition-duration: 1.5s;
+	-moz-transition-duration: 1.5s;
+	transition-duration: 1.5s;
+}
+.book.open-for-touchable > .page .face:nth-child(2) {
+	-webkit-transform: rotateY(-35deg);
+	-moz-transform: rotateY(-35deg);
+	transform: rotateY(-35deg);
+	-webkit-transition-duration: 1.8s;
+	-moz-transition-duration: 1.8s;
+	transition-duration: 1.8s;
+}
+.book.open-for-touchable > .page .face:nth-child(3) {
+	-webkit-transform: rotateY(-130deg);
+	-moz-transform: rotateY(-130deg);
+	transform: rotateY(-130deg);
+	-webkit-transition-duration: 1.6s;
+	-moz-transition-duration: 1.6s;
+	transition-duration: 1.6s;
+}
+.book.open-for-touchable > .page .face:nth-child(4) {
+	-webkit-transform: rotateY(-140deg);
+	-moz-transform: rotateY(-140deg);
+	transform: rotateY(-140deg);
+	-webkit-transition-duration: 1.4s;
+	-moz-transition-duration: 1.4s;
+	transition-duration: 1.4s;
+}
+.book.open-for-touchable > .page .face:nth-child(5) {
+	-webkit-transform: rotateY(-150deg);
+	-moz-transform: rotateY(-150deg);
+	transform: rotateY(-150deg);
+	-webkit-transition-duration: 1.2s;
+	-moz-transition-duration: 1.2s;
+	transition-duration: 1.2s;
+}
+}
+/*
+. Bonus
+*/
+/* cover CSS */
+.coverDesign {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	overflow: hidden;
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+.coverDesign .title {
+	color: #fff;
+	font-size: 2.2em;
+	letter-spacing: 0.05em;
+	text-align: center;
+	margin: 46% 0 0 0;
+	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+	border: none;
+	background: #000;
+	box-shadow: 5px 5px 5px -5px #000,inset 0 0 50px #000,0 0 3px #443c3d,0 0 3px black,inset 25px 0 50px #ffffff4d,inset 5px 5px 2px -5px #ffffffba;
+	padding: 10px;
+}
+.coverDesign p {
+	color: #f8f8f8;
+	font-size: 1em;
+	text-align: center;
+	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+}
+.cover-bg img {
+	width: 155%;
+}
+.cover-bg.custom img {
+	width: 100%;
+}
+.yellow {
+	background-color: #f1c40f;
+	background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+	background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+	background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 }
-body.OB .explorer-pane .explorer-back-home a:hover {
-	background: #0000004f !important;
+.cover_deco {
-	color: white !important;
+	border-color: black;
+	border-top-color: #c8a478;
+	border-left-color: #c8a478;
+	border-right-color: #d5a2626e;
+	border-bottom-color: #d5a2626e;
+	z-index: 1;
 }
-body.OB .explorer-back-home a:first-child::before {
-	content: '↩ ';
+.grey {
-	font-weight: bold;
+	background-color: #f8e9d1;
-	pointer-events: none;
+	background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
-	width: 22px;
+	background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
-	position: relative;
+	background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
-	font-family: sans-serif;
-	font-size: 16px;
-	padding: 5px 0 0 0;
-	color: #ffffff91;
 }
-body.OB .explorer-pane .menu-discord a {
-	font-family: 'Grenze Gotisch', cursive;
+/* Basic ribbon */
-	font-weight: normal;
-	font-size: 18px;
+.ribbon {
-	font-style: normal;
+	background: #c0392b;
-	line-height: 12px;
+	color: #fff;
+	display: block;
+	font-size: 0.7em;
+	position: absolute;
+	top: 11px;
+	right: 1px;
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	letter-spacing: 0.15em;
+	text-align: center;
+	-webkit-transform: rotateZ(45deg) translateZ(1px);
+	-moz-transform: rotateZ(45deg) translateZ(1px);
+	transform: rotateZ(45deg) translateZ(1px);
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	backface-visibility: hidden;
+	z-index: 10;
 }
-body.OB .portrait-scifi-entry > .portrait-scifi-name {
+/* figcaption */
-	background: linear-gradient(135deg,#71797848,#41444448,#575b5b48,#23262548,#3c424048,#1f232248) #131313 !important;
-	box-shadow: inset 1px 1px #ffffff1f,inset 0 0 0 1px #272727,0 4px 10px black !important;
+figcaption {
-	font-family: 'Grenze Gotisch', cursive;
+	padding-left: 40px;
-	font-size: 17px;
+	text-align: left;
+	position: absolute;
+	top: 0%;
+	left: 160px;
+	width: 310px;
 }
-#column-one > .portlet:not([id="p-cactions"]):not([id="p-personal"]):not([id="p-logo"]) h3 {
+figcaption span {
-	font-family: 'Grenze Gotisch', cursive;
+	color: #16a085;
-	font-weight: normal;
+	padding: 0.6em 0 1em 0;
-	font-size: 17px;
+	display: block;
-	font-style: normal;
-	text-transform: none;
-	line-height: 1;
-	padding: 2px 0 4px 0;
 }
-#column-one > .portlet:not([id="p-cactions"]):not([id="p-personal"]):not([id="p-logo"]):hover h3 {
-	color: #fff !important;
+figcaption p {
-	text-shadow: 0 0 2px #000,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
+	color: #63707d;
+	line-height: 1.3;
 }
-}}</includeonly><noinclude>
-{{Page OB}}
-== Fonctionnalités ==
+/* Media Queries */
+@media screen and (max-width: 37.8125em) {
+	.book {
+		margin: 0 auto;
+	}
-*Affiche en haut à droite un menu standard pour naviguer dans les catégories principales du site.
+	figcaption {
+		text-align: center;
+		width: 320px;
+		top: 250px;
+		padding-left: 0;
+		left: -80px;
+		font-size: 90%;
+	}
+}
-== Utilisation ==
+}}{{#ifeq: {{{mode|}}} | css_only ||
+<div class="book-wrapper {{#ifeq: {{{open|}}} | none | no-events}} {{{space|}}}" style="{{#if: {{{margin|}}} |margin: {{{margin|}}}}}">
+<div class="book {{#ifeq: {{{open|}}} | sliding | sliding}} {{#ifeq: {{{open|}}} | open-for-touchable | open-for-touchable}}" style="{{#if: {{{largeur|}}} | width:{{{largeur|}}}; }} {{#if: {{{hauteur|}}} | height:{{{hauteur|}}}; }}">
+<!-- Front -->
+<div class='hardcover_front'>
+<div class="face">
+<div class="coverDesign cover_deco" style="box-shadow: {{{cover_shadow|0 0 3px black,inset 25px 0 50px #000000b3,inset 0 0 0 10px #000, inset 13px -13px #464646, inset -11px 11px #444}}}">
+<div style="position: absolute;top: 34px;left: 50%;transform: translateX(-50%);color: #686161;text-shadow: 2px 2px 1px #000;">{{{titre-header|}}}</div>
+{{#if: {{{titre|}}} | <div class="title">{{{titre|}}}</div>}}
+<p style="color: #d4c5a8;text-shadow: 2px 2px 1px #000;">{{{sous-titre|}}}</p>
+</div>
+<div class="cover-bg {{#if: {{{cover_image|}}} | custom}}" style="position: absolute;top:0; left:0; width: 100%; height: 100%; z-index: 0; overflow: hidden; display: flex; {{#if: {{{cover_image|}}} | align-items: center;}}">{{#if: {{{cover_image|}}} | [[Fichier:{{{cover_image|}}}|160px]] | [[Fichier:Book cover.jpg]]}}</div>
+</div>
+<div class="face"></div>
+</div>
+<!-- Pages -->
+<div class='page'>
+<div class="face bg-parchemin">
+<div class="page-content">{{{right-page-2|}}}</div>
+</div>
+<div class="face bg-parchemin">
+<div class="page-content" style="box-shadow: inset 20px 0 20px -20px black, 20px 0 20px -20px black, inset 0 0 20px #ffffff85;">{{{right-page|}}}</div>
+</div>
+<div class="face bg-parchemin">
+<div class="page-content" style="transform: rotateY(180deg) translateZ(1px);">{{{left-page|}}}</div>
+</div>
+<div class="face bg-parchemin">
+<div class="page-content" style="transform: rotateY(180deg) translateZ(1px);">{{{left-page-2|}}}</div>
+</div>
+<div class="face bg-parchemin">
+<div class="page-content" style="transform: rotateY(180deg) translateZ(1px);">{{{left-page-3|}}}</div>
+</div>
+</div>
+<!-- Back -->
+<div class='hardcover_back'>
+<div class="face"></div>
+</div>
+<div class='book_spine'>
+<div class="face"></div>
+<div class="face"></div>
+</div></div></div>}}</includeonly><noinclude>
+{{Page Theme
+|menu-title=Modèles
+|menu-category=Modèles de mise en page
+}}
-Modèle à insérer en tout début de page.
+'''Rendu:'''
-'''Code :'''
+{{Tome
-<pre>
+|titre=Hello
-{{Page OB}}
+|sous-titre=Nova Majoris
-</pre>
+|right-page=blablabla...
+|left-page=Hello Mars
+}}
 [[Catégorie:Modèles de mise en page|global]]
 </noinclude>

« Modèle:Test » et « Modèle:Tome » : différence entre les pages

Version actuelle datée du 24 novembre 2022 à 22:07

« Modèle:Test » et « Modèle:Tome » : différence entre les pages