« Chronologie de l'Adeptus Astartes » et « Modèle:Accueil CSS » : différence entre les pages
De Omnis Bibliotheca
(Différence entre les pages)
Aucun résumé des modifications |
m (layout) |
||
Ligne 1 : | Ligne 1 : | ||
{{ | <includeonly>{{#css: | ||
body #globalWrapper { | |||
font-size: 12.7px;.news-thumb | |||
} | |||
body.OB #globalWrapper div#content { | |||
overflow: clip; | |||
box-shadow: 0 0 3px black,-6px 0 0 black !important; | |||
pointer-events: all; | |||
min-height: calc(100vh - 85px); | |||
box-sizing: border-box; | |||
margin: 6em 1em 0 11.4em; | |||
margin-top: 6em; | |||
padding-bottom: 20px !important; | |||
box-sizing: border-box !important; | |||
margin-top: 6em !important; | |||
background-attachment: fixed !important; | |||
background-image: radial-gradient(#041c20, black 70%) !important; | |||
} | |||
body div#column-one li, body div#column-one li * { | |||
font-size: 11.45px; | |||
} | |||
#firstHeading { | |||
display: none; | |||
} | |||
#content h2 { | |||
text-align: center; | |||
} | |||
hr { | |||
background: #2027287d; | |||
margin: 3em; | |||
} | |||
.section-header { | |||
color: #929495; | |||
position: relative; | |||
overflow: visible; | |||
text-align: center; | |||
letter-spacing: 4px; | |||
padding: 0.25em 2em; | |||
background: linear-gradient(135deg, #71797828, #41444428, #575b5b28, #23262528 , #3c424028, #1f232228) !important; | |||
box-shadow: inset 0 5px 0 #202728, inset 0 5px 5px black, inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important; | |||
font-size: 14px; | |||
background-color: #01090a !important; | |||
z-index: 1; | |||
box-sizing: border-box; | |||
font-family: 'Grenze Gotisch', cursive; | |||
font-size: 23px; | |||
z-index: 15; | |||
margin: auto; | |||
display: inline-block; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
} | |||
#siteSub { | |||
display: none; | |||
} | |||
#contentSub { | |||
display: none; | |||
} | |||
.titre-parchemin a, .citation-parchemin a, .signature-parchemin a, .citation-parchemin a.external.text, | |||
.titre-parchemin a[title], .citation-parchemin a[title], .signature-parchemin a[title], .citation-parchemin a[title].external.text { | |||
color: #1f5d66 !important; | |||
text-shadow: 0 0 2px #c8b5a8; | |||
font-weight: normal; | |||
} | |||
.OB-stamp { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
transform: translateX(30%) translateY(37px); | |||
opacity: 0.4; | |||
clip-path: polygon(5px 5px, 97% 5px, 97% 85%, 5px 85%); | |||
pointer-events: none; | |||
} | |||
{ | #toc { | ||
max-width: 1120px; | |||
margin: 40px auto !important; | |||
background: none !important; | |||
box-shadow: none; | |||
border: none !important; | |||
} | |||
#toc > .toctitle { | |||
display: none; | |||
} | |||
#toc li a { | |||
color: #929495 !important; | |||
position: relative; | |||
overflow: visible; | |||
font-weight: bold; | |||
text-align: center; | |||
font-family: sans-serif; | |||
font-style: italic; | |||
text-transform: uppercase; | |||
letter-spacing: 5px; | |||
padding: 16px 24px; | |||
background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important; | |||
/* background-color: rgba(0, 0, 0, 0); */ | |||
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important; | |||
/* font-size: 14px; */ | |||
background-color: #000 !important; | |||
z-index: 1; | |||
box-sizing: border-box; | |||
display: block; | |||
margin: 5px; | |||
font-size: 12px; | |||
text-decoration: none; | |||
display: flex; | |||
} | |||
#toc li a:hover { | |||
color: #c9cbcc !important; | |||
} | |||
#toc li a::before { | |||
content: "\25B2"; | |||
position: absolute; | |||
left: 0; | |||
top: 50%; | |||
transform: translateX(-16px) translateY(calc(-50% + 3px)) rotate(90deg) scale(1, 0.5); | |||
font-style: normal; | |||
font-size: 39px; | |||
color: transparent !important; | |||
text-shadow: none !important; | |||
} | |||
#toc li a:hover::before { | |||
color: #464646 !important; | |||
text-shadow: 1px 1px 5px #000, 1px 0 5px #000 !important; | |||
} | |||
#dallage-grid-left::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
transform: rotateY(90deg); | |||
transform-origin: left center; | |||
border-radius: 0 50% 0 0; | |||
box-shadow: inset 0 0 5px 15px #121313, inset 0 0 5px 30px rgb(37, 41, 40), inset 0 0 25px 30px black, inset 0 0 5px 70px rgb(49 53 51), inset 0 0 25px 70px black, inset 0 0 5px 100px rgb(52 55 53), inset 0 0 25px 100px black, inset 0 0 5px 120px rgb(23, 25, 24); | |||
overflow: visible; | |||
-webkit-mask-image: linear-gradient(transparent, white , white 50%, #0000007a, transparent 90%); | |||
mask: linear-gradient(transparent, white , white 50%, #0000007a, transparent 90%); | |||
} | |||
#dallage-grid-left::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
transform: rotateY(90deg); | |||
transform-origin: left center; | |||
border-radius: 0 50% 0 0; | |||
box-shadow: 25px -25px 50px 50px #000000; | |||
overflow: visible; | |||
clip-path: polygon(0 -50%, 150% 0, 100% 60%, 0 50%); | |||
} | |||
#dallage-grid-right::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
transform: rotateY(-90deg | |||
); | |||
transform-origin: right center; | |||
border-radius: 50% 0 0 0; | |||
box-shadow: inset 0 0 5px 15px #121313, inset 0 0 5px 30px rgb(37, 41, 40), inset 0 0 25px 30px black, inset 0 0 5px 70px rgb(49 53 51), inset 0 0 25px 70px black, inset 0 0 5px 100px rgb(52 55 53), inset 0 0 25px 100px black, inset 0 0 5px 120px rgb(23, 25, 24); | |||
overflow: visible; | |||
-webkit-mask-image: linear-gradient(transparent, white , white 50%, #0000007a , transparent 90%); | |||
mask: linear-gradient(transparent, white , white 50%, #0000007a , transparent 90%); | |||
} | |||
#dallage-grid-right::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
transform: rotateY(-90deg); | |||
transform-origin: right center; | |||
border-radius: 50% 0 0 0; | |||
box-shadow: -25px -25px 50px 50px #000000; | |||
overflow: visible; | |||
clip-path: polygon(-50% -50%, 100% 0, 100% 100%, 0 50%); | |||
} | |||
.dallage-include p { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: start; | |||
} | |||
.image-side-left, | |||
.image-side-left img, | |||
.image-side-right, | |||
.image-side-right img { | |||
pointer-events: none; | |||
} | |||
.image-side-left a, | |||
.image-side-right a { | |||
line-height: 50px; | |||
font-size: 300px; | |||
color: transparent !important; | |||
pointer-events: all; | |||
} | |||
#bodyContent::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 800px; | |||
background: linear-gradient(black 100px, #00495070 200px, black, transparent); | |||
-webkit-mask-image: radial-gradient(white, transparent); | |||
mask: radial-gradient(white, transparent); | |||
pointer-events: none; | |||
} | |||
#dallage-grid-left.dallage-wrapper.hexa .dallage-row { | |||
perspective: 1000px; | |||
perspective-origin: left -50px; | |||
} | |||
[data-trigger*="dalle-"] { | |||
position: absolute !important; | |||
z-index: 100; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); | |||
background: linear-gradient(35deg, teal, transparent, transparent, #aceaf4), linear-gradient(-35deg, teal, transparent, transparent, #aceaf4), linear-gradient(90deg, teal, transparent, transparent, transparent, transparent, transparent, #aceaf4), radial-gradient(#ffffffa1 50%, teal 70%); | |||
cursor: pointer; | |||
opacity: 0.4; | |||
transition: 0.2s all ease-in-out; | |||
} | |||
[data-trigger*="dalle-"]:hover { | |||
opacity: 1; | |||
} | |||
* | [data-trigger*="dalle-"] + [data-target*="dalle-"] { | ||
position: absolute; | |||
z-index: 120; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
} | |||
[data-trigger*="dalle-"] + [data-target]:not(.active) * { | |||
* | pointer-events: none !important; | ||
opacity: 0; | |||
} | |||
[data-trigger*="dalle-"]:not(active) + [data-target] { | |||
pointer-events: none !important; | |||
display: block; | |||
} | |||
[data-target] > .dalle-off { | |||
position: absolute !important; | |||
top: 50%; | |||
left: 50%; | |||
z-index: 100; | |||
width: 100%; | |||
height: 100%; | |||
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); | |||
background: linear-gradient(35deg, teal, transparent, transparent, #aceaf4), linear-gradient(-35deg, teal, transparent, transparent, #aceaf4), linear-gradient(90deg, teal, transparent, transparent, transparent, transparent, transparent, #aceaf4), radial-gradient(#ffffffa1 50%, teal 70%); | |||
transition: 0.2s opacity 0.1s ease-in-out; | |||
transform: translate3d(-50%, -50%, 0); | |||
} | |||
.dallage-row > .active { | |||
z-index: 100; | |||
} | |||
[data-target] > .dalle-sfx { | |||
position: absolute !important; | |||
z-index: 0; | |||
width: 1%; | |||
height: 1%; | |||
border-radius: 50%; | |||
background: radial-gradient(#00ffdb, transparent 70%); | |||
scale: 1; | |||
transition: 0s all; | |||
transform: translate3d(-50%, -50%, 0); | |||
top: 50%; | |||
left: 50%; | |||
opacity: 1; | |||
pointer-events: none !important; | |||
} | |||
[data-target].active > .dalle-sfx { | |||
width: 1000% !important; | |||
height: 1000% !important; | |||
opacity: 0 !important; | |||
transition: 0.4s all ease-in-out !important; | |||
} | |||
[data-target]:not(.active) > .dalle-sfx { | |||
opacity: 1 !important; | |||
} | |||
.discord-top-btn { | |||
position: absolute; | |||
right: 20px; | |||
top: 0; | |||
z-index: 10; | |||
border-radius: 50%; | |||
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black, 0 4px 10px black !important; | |||
padding: 4px; | |||
} | |||
.discord-top-btn:hover::before { | |||
content: 'Discordiae'; | |||
position: absolute; | |||
bottom: 0; | |||
left: 50%; | |||
transform: translate3d(-50%, calc(100% + 6px), 0); | |||
color: #929495; | |||
text-align: center; | |||
letter-spacing: 1px; | |||
padding: 5px 10px; | |||
box-shadow: inset 1px 1px #ffffff1c, inset 0 0 0 1px #000, 0 4px 10px black, inset 0 0 50px black !important; | |||
z-index: 1; | |||
box-sizing: border-box; | |||
background: linear-gradient(135deg, #444141 10%, #414444 25%, #2f3535 40%, #232625 55%, #3c4240 75%, #2f2d2d 85%) !important; | |||
font-family: 'Grenze Gotisch', cursive; | |||
font-size: 17px; | |||
border-radius: 5px; | |||
} | |||
.discord-top-btn::after { | |||
content: ''; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
width: calc(100% - 6px); | |||
height: calc(100% - 6px); | |||
z-index: 1; | |||
pointer-events: none; | |||
background-image: linear-gradient(rgba(0,0,0,0.2) 0px,rgba(0,0,0,0.3) 2px,rgba(0, 0, 0, 0.2) 2px,rgba(255, 255, 255, 0.2) 3px); | |||
background-size: auto 3px; | |||
overflow: hidden; | |||
box-sizing: border-box; | |||
transform: translate3d(-50%, -50%, 0); | |||
border-radius: 50%; | |||
box-shadow: inset 0 0 5px #000, inset 0 0 15px #60fdff; | |||
transition: 0.5s all ease-in-out; | |||
opacity: 0.8; | |||
} | |||
.discord-top-btn:hover::after { | |||
background-position-y: 5%; | |||
box-shadow: inset 0 0 5px #fff, inset 0 0 15px #60fdff; | |||
} | |||
* | /** Scène 3D - News **/ | ||
* | .annonces li { | ||
list-style: none; | |||
} | |||
.animation-root:not(:hover) .animation { | |||
animation-play-state: paused !important; | |||
} | |||
@media (hover: none) { | |||
.animation-root .animation, | |||
.animation-root .animation *, | |||
.animation-root .animation *::before, | |||
.animation-root .animation *::after { | |||
animation-play-state: paused !important; | |||
} | |||
} | |||
@media (hover: hover) { | |||
.animation-root:hover .servo-crane-deco { | |||
top: 0; | |||
left: 0; | |||
} | |||
.animation-root:hover .servo-crane-deco.light { | |||
background: none; | |||
z-index: 2; | |||
opacity: 1; | |||
transition: 1s all ease-in-out, 0s opacity ease-in-out 2s; | |||
} | |||
} | |||
.zoomable { | |||
transition: 1s all ease-in-out; | |||
transform: scale(0.95) !important; | |||
} | |||
.links { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
z-index: 10; | |||
margin: 30px 10px; | |||
text-align: center; | |||
display: flex; | |||
flex-flow: column; | |||
align-items: start; | |||
width: calc(100% - 20px); | |||
box-sizing: border-box; | |||
overflow: clip; | |||
transition: 0.6s all ease-in-out; | |||
} | |||
.links * { | |||
display: flex; | |||
flex-flow: row; | |||
align-items: center; | |||
justify-content: left; | |||
text-decoration: none !important; | |||
transition: 0.6s all ease-in-out; | |||
} | |||
.links a, | |||
#content .links .external.text { | |||
height: 36px; | |||
color: white !important; | |||
} | |||
.links > * { | |||
height: 30px; | |||
background: transparent; | |||
width: 100%; | |||
display: flex; | |||
flex-flow: row; | |||
align-items: center; | |||
padding: 4px 20px; | |||
border-radius: 3px; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
:hover > .links > * { | |||
background: #0005; | |||
} | |||
.links a + span::before { | |||
content: ''; | |||
width: 20px; | |||
height: 20px; | |||
display: inline-block; | |||
} | |||
.links a + *, | |||
.links a + * a { | |||
opacity: 1; | |||
transform: none; | |||
color: white !important; | |||
} | |||
.links :hover > a + *, | |||
.links :hover > a + * a { | |||
text-shadow: 0 0 2px #30e2ff,0 0 3px #30e2ff,0 0 5px #30e2ff !important; | |||
} | |||
.ripple-floor { | |||
background-position: center; | |||
background-color: #239d9d36; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
height: 100%; | |||
width: 100%; | |||
} | |||
.ripple-floor::before { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background: #9acbbb7d radial-gradient(circle, #9acbbb7d 1%, transparent 1%) center/20000%; | |||
z-index: 1; | |||
content: ''; | |||
opacity: 0; | |||
transition: all 0.8s ease-in-out 1s; | |||
background-repeat: no-repeat; | |||
} | |||
.animation-root:not(:hover) .ripple-floor::before { | |||
background-color: #ffffff00; | |||
background-size: 0%; | |||
opacity: 0.5; | |||
transition: all 0s; | |||
} | |||
.animation-root .red-eye-deco { | |||
position: absolute; | |||
bottom: 96px; | |||
left: 121px; | |||
width: 16px; | |||
height: 16px; | |||
border-radius: 50%; | |||
z-index: 1; | |||
background: radial-gradient(#ffffffdb, #f00, #ff000061, #ff000036, transparent 75%); | |||
transition: 1s all ease-in-out; | |||
box-shadow: 0 0 20px red,0 0 30px red, inset 0 0 5px #ff00004a; | |||
} | |||
.animation-root .screen-green-light { | |||
position: absolute; | |||
z-index: -1; | |||
bottom: 0; | |||
left: -7px; | |||
width: 100%; | |||
height: 100%; | |||
background: radial-gradient(#08fb91b5, #00ff9024, transparent 75%); | |||
background-size: 250px 120px; | |||
background-repeat: no-repeat; | |||
background-position-y: 0; | |||
background-position-X: 0; | |||
transition: 1s all ease-in-out; | |||
} | |||
.animation-root:not(:hover) .red-eye-deco, | |||
.animation-root:not(:hover) .screen-green-light { | |||
opacity: 0; | |||
} | |||
.tome-wrapper .eye-green-light { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 460px; | |||
height: 950px; | |||
border-radius: 50%; | |||
z-index: 100; | |||
transition: 1s all ease-in-out; | |||
background: conic-gradient(transparent 70deg, #60bb3696, transparent 140deg); | |||
background-position-x: 0%; | |||
background-position-y: 0%; | |||
-webkit-mask-image: radial-gradient(transparent, black 15%, transparent 72%, transparent); | |||
mask-image: radial-gradient(transparent, black 15%, transparent 72%, transparent); | |||
transform: translateX(calc(20px - 50%)) translateY(calc(-90px - 50%)) rotate(43deg); | |||
pointer-events: none; | |||
} | |||
.tome-wrapper:not(:hover) .eye-green-light { | |||
opacity: 0; | |||
} | |||
@media screen and (max-width: 1279px) { | |||
.responsive-layout { | |||
margin-top: 4em; | |||
flex-direction: column; | |||
align-content: center; | |||
} | |||
.hide-on-small-screen { | |||
display: none; | |||
} | |||
} | |||
div.techno-pane:hover > div > div.top-glass { | |||
box-shadow: inset 0 0 20px #ff000091, inset 1px 1px #ffffff1f, inset 0 0 0 1px #27272763, inset 0 0 20px 1px #ff5d5d, 0 0 15px red !important; | |||
background: linear-gradient(135deg, #717978 10%, #414444 25%, #575b5b 40%, #232625 55%, #3c4240 75%, #1f2322 85%) #fff !important; | |||
} | |||
.servo-crane-deco { | |||
position: absolute; | |||
top: 100px; | |||
left: 100px; | |||
transition: 1s all ease-in-out 1s; | |||
background: radial-gradient(#201e1e, transparent 70%, transparent); | |||
height: 580px; | |||
width: 190px; | |||
-webkit-animation: its-alive 10s linear infinite; | |||
animation: its-alive 10s linear infinite; | |||
} | |||
.servo-crane-deco.light { | |||
background: none; | |||
z-index: 0; | |||
opacity: 0; | |||
transition: 1s all ease-in-out, 0.1s opacity ease-in-out 0s; | |||
pointer-events: none !important; | |||
} | |||
.servo-crane-deco.light::after { | |||
content: ""; | |||
top: 41px; | |||
left: 70px; | |||
width: 800px; | |||
height: 800px; | |||
position: absolute; | |||
background: conic-gradient(transparent 90deg, #ff00007d, transparent 120deg); | |||
pointer-events: none; | |||
-webkit-mask-image: radial-gradient(transparent, black 15%, transparent 70%, transparent); | |||
mask-image: radial-gradient(transparent, black 15%, transparent 70%, transparent); | |||
background-position: center; | |||
transform: translateX(-50%) translateY(-50%); | |||
} | |||
.animation-root:hover .servo-crane-deco.light::after { | |||
-webkit-animation: its-alive-ray 10s linear infinite; | |||
animation: its-alive-ray 10s linear infinite; | |||
} | |||
.update-pane > a:hover { | |||
cursor: pointer; | |||
} | |||
@media screen and (min-width: 900px) { | |||
* | /* Safari */ | ||
@-webkit-keyframes its-alive { | |||
0% { -webkit-transform: translateX(-90px) translateY(-90px) rotate(20deg); } | |||
10% { -webkit-transform: translateX(-75px) translateY(-95px) rotate(15deg); } | |||
35% { -webkit-transform: translateX(-60px) translateY(-90px) rotate(20deg); } | |||
55% { -webkit-transform: translateX(-80px) translateY(-85px) rotate(15deg) ; } | |||
75% { -webkit-transform: translateX(-85px) translateY(-85px) rotate(20deg) ; } | |||
90% { -webkit-transform: translateX(-75x) translateY(-95px) rotate(15deg); } | |||
100% { -webkit-transform: translateX(-90px) translateY(-90px) rotate(20deg); } | |||
} | |||
@keyframes its-alive { | |||
0% { transform: translateX(-90px) translateY(-90px) rotate(20deg); } | |||
10% { transform: translateX(-75px) translateY(-95px) rotate(15deg); } | |||
35% { transform: translateX(-60px) translateY(-90px) rotate(20deg); } | |||
55% { transform: translateX(-80px) translateY(-85px) rotate(15deg) ; } | |||
75% { transform: translateX(-85px) translateY(-85px) rotate(20deg) ; } | |||
90% { transform: translateX(-75x) translateY(-95px) rotate(15deg); } | |||
100% { transform: translateX(-90px) translateY(-90px) rotate(20deg); } | |||
} | |||
* | /* Safari */ | ||
@-webkit-keyframes its-alive-ray { | |||
0% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-10deg); } | |||
10% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg); } | |||
35% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-20deg); } | |||
55% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg) ; } | |||
75% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-20deg) ; } | |||
90% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg); } | |||
100% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-10deg); } | |||
} | |||
@keyframes its-alive-ray { | |||
0% { transform: translateX(-50%) translateY(-50%) rotate(-10deg); } | |||
10% { transform: translateX(-50%) translateY(-50%) rotate(-15deg); } | |||
35% { transform: translateX(-50%) translateY(-50%) rotate(20deg); } | |||
55% { transform: translateX(-50%) translateY(-50%) rotate(-15deg) ; } | |||
75% { transform: translateX(-50%) translateY(-50%) rotate(-20deg) ; } | |||
90% { transform: translateX(-50%) translateY(-50%) rotate(-15deg); } | |||
100% { transform: translateX(-50%) translateY(-50%) rotate(-10deg); } | |||
} | |||
@-webkit-keyframes shade-off { | |||
0% { | |||
opacity: 0; | |||
} | |||
100% { | |||
opacity: 0.8; | |||
} | |||
} | |||
@keyframes shade-off { | |||
0% { | |||
opacity: 0; | |||
} | |||
100% { | |||
opacity: 0.8; | |||
} | |||
} | |||
@-webkit-keyframes spin { | |||
0% { -webkit-transform: rotate(0deg); } | |||
100% { -webkit-transform: rotate(360deg); } | |||
} | |||
@keyframes spin { | |||
0% { transform: rotate(0deg); } | |||
100% { transform: rotate(360deg); } | |||
} | |||
} | |||
*'' | .scs-list { | ||
text-align: left; | |||
color: #ffffffd1; | |||
* | text-shadow: none; | ||
padding-top: 10px; | |||
pointer-events: all; | |||
} | |||
.scs-pane { | |||
padding: 1px 10px 3px; | |||
width: 100%; | |||
position: relative; | |||
height: 100%; | |||
box-sizing: border-box; | |||
} | |||
/* | |||
.scs-pane::after { | |||
position: absolute; | |||
content: ''; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 10; | |||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); | |||
transition: 1s all ease-in-out; | |||
box-shadow: inset 0 0 1px 1px #a2a9b1; | |||
animation: clipMe 10s linear infinite; | |||
pointer-events: none; | |||
border-radius: 5px; | |||
opacity: 0.6; | |||
} | |||
.scs-pane::before{ | |||
position: absolute; | |||
content: ''; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 10; | |||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); | |||
transition: 1s all ease-in-out; | |||
box-shadow: inset 0 0 1px 1px #a2a9b1; | |||
animation: clipMe 10s linear infinite; | |||
pointer-events: none; | |||
border-radius: 5px; | |||
opacity: 0.6; | |||
scale: -1 -1; | |||
} | |||
*/ | |||
.scs-pane ul { | |||
margin: 0; | |||
} | |||
.scs-pane li[data-mw-revid] { | |||
background: none !important; | |||
max-width: 300px; | |||
box-sizing: border-box; | |||
text-overflow: ellipsis; | |||
font-size: 0; | |||
line-height: 0; | |||
margin: 11px 0; | |||
list-style-image: none; | |||
text-align: center; | |||
} | |||
.scs-pane li[data-mw-revid]:nth-child(6) ~ * { | |||
display: none; | |||
} | |||
.scs-pane li[data-mw-revid] a { | |||
text-overflow: ellipsis; | |||
max-width: 300px; | |||
overflow: hidden; | |||
font-size: 14px; | |||
line-height: 16px; | |||
padding: 0 0.2em 0.2em 0.2em; | |||
margin: 0; | |||
background: none !important; | |||
display: block; | |||
font-weight: normal; | |||
color: white; | |||
white-space: nowrap; | |||
} | |||
.scs-pane li[data-mw-revid] a:hover { | |||
text-shadow: 0 0 2px #ff6130 !important; | |||
text-decoration: none; | |||
background: #0005 !important; | |||
} | |||
.scs-pane li[data-mw-revid] > a:first-child, | |||
.scs-pane li[data-mw-revid] > a:first-child * { | |||
pointer-events: none; | |||
text-shadow: 0 0 5px black !important; | |||
font-weight: normal; | |||
color: #ffffff80 !important; | |||
font-size: 12px; | |||
} | |||
.scs-pane li[data-mw-revid] > :not(a.mw-newpages-pagename):not(a:first-child) { | |||
display: none; | |||
} | |||
.animation-root:not(:hover) .scs-pane::before, | |||
.animation-root:not(:hover) .scs-pane::after { | |||
animation-play-state: paused !important; | |||
} | |||
@-webkit-keyframes clipMe { | |||
0%, 100% {clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); } | |||
25% {clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%); } | |||
50% {clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%); } | |||
75% {clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%); } | |||
} | |||
@keyframes clipMe { | |||
0%, 100% {clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); } | |||
25% {clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%); } | |||
50% {clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%); } | |||
75% {clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%); } | |||
} | |||
.annonces ul li::before { | |||
content: '◈'; | |||
color: #2d7a84; | |||
position: absolute; | |||
transform: translateX(-18px); | |||
} | |||
.tome-wrapper::before { | |||
position: absolute; | |||
top: 31%; | |||
left: 23px; | |||
height: 70%; | |||
width: 200px; | |||
content: ''; | |||
background: radial-gradient(black, transparent 70%); | |||
transform: translateX(-50%); | |||
} | |||
.book { | |||
perspective-origin: center -20px; | |||
} | |||
.book .page-content * { | |||
font-family: 'Grenze Gotisch', cursive; | |||
font-size: 15.5px !important; | |||
line-height: 1; | |||
} | |||
.book .page-content * a[title] { | |||
position: relative; | |||
font-weight: inherit; | |||
text-decoration: none; | |||
text-shadow: 0 0 10px white; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
display: block; | |||
color: #1e1714cf !important; | |||
font-size: 15.5px !important; | |||
line-height: 17px !important; | |||
overflow: hidden; | |||
} | |||
.novum-majoris-page a[title]::before { | |||
content: '\2022 '; | |||
font-size: 22px; | |||
} | |||
.book .page-content * a[title]:hover::after { | |||
content: ''; | |||
display: block; | |||
background: radial-gradient(closest-side, #ffffff3d, transparent); | |||
position: absolute; | |||
left: 50%; | |||
top: 50%; | |||
transform: translateX(-50%) translateY(-50%); | |||
height: 200%; | |||
width: calc(100% + 50px); | |||
z-index: -1; | |||
} | |||
.book .coverDesign.cover_deco > :first-child { | |||
font-family: 'Grenze Gotisch', cursive; | |||
font-size: 22px; | |||
} | |||
.jdr-dice { | |||
position: absolute; | |||
top: 560px; | |||
left: 0; | |||
z-index: 10; | |||
transform: translateX(-35px); | |||
perspective: 2000px; | |||
perspective-origin: 100px -500px; | |||
} | |||
.jdr-dice:hover::after { | |||
content: 'Jeux de Rôle'; | |||
position: absolute; | |||
bottom: 0; | |||
left: 50%; | |||
z-index: 2; | |||
white-space: nowrap; | |||
font-size: 11px; | |||
text-align: center; | |||
font-family: sans-serif; | |||
font-style: italic; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
transform: translateY(64%) translateX(-43%) rotateY(25deg) translateY(-82px); | |||
transform-origin: center top; | |||
text-shadow: 0 0 2px #30e2ff,0 0 3px #30e2ff,0 0 5px #30e2ff !important; | |||
color: #fff; | |||
} | |||
.themes-link a { | |||
text-align: center; | |||
background: #bed1d32e; | |||
border-radius: 5px; | |||
margin: 10px; | |||
text-shadow: 0 0 1px #a6a6a6; | |||
display: block; | |||
text-decoration: none; | |||
} | |||
.themes-link a:hover { | |||
background: #bed1d373; | |||
color: white; | |||
} | |||
.news-flag > * { | |||
border-radius: 5px; | |||
padding: 2px 20px 2px 10px; | |||
text-align: center; | |||
min-width: 110px; | |||
display: inline-block; | |||
margin-top: 20px; | |||
break-after: right; | |||
font-weight: bold; | |||
background: #bed1d33d; | |||
color: #000; | |||
text-shadow: none; | |||
position: relative; | |||
transform: translateX(-12px); | |||
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); | |||
} | |||
.deco-metal-left { | |||
position: absolute; | |||
top: 24px; | |||
left: 0; | |||
width: 26px; | |||
height: 92px; | |||
z-index: 100; | |||
border-radius: 0 50% 50% 0; | |||
box-shadow: 1px 1px 10px black, inset 1px 1px #ffffff3d,inset 0 0 8px black; | |||
background: linear-gradient(135deg, #717978a0, #414444a0, #575b5ba0, #232625a0, #3c4240a0, #1f2322a0) #2f2d2d !important; | |||
transform: translateX(-1px); | |||
} | |||
.novum-majoris-page, .novum-majoris-page :not(a) { | |||
margin: 0; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.novum-majoris-page a::before { | |||
content: '◈ '; | |||
} | |||
.center-pane > * { | |||
pointer-events: all; | |||
} | |||
* | /** Holo Disk **/ | ||
*''' | .holo-disk-wrapper { | ||
display: table; | |||
position: relative; | |||
} | |||
.holo-pane { | |||
height: 300px; | |||
width: 200px; | |||
display: flex; | |||
position: relative; | |||
z-index: 10; | |||
} | |||
.holo-pane > :first-child { | |||
height: 100% !important; | |||
background-color: transparent !important; | |||
position: absolute !important; | |||
top: 30px; | |||
width: 100%; | |||
} | |||
.holo-pane > :first-child > :first-child { | |||
background: linear-gradient(90deg, transparent, #77fdfe8f, transparent); | |||
color: black !important; | |||
box-shadow: 0 12px 12px -8px #3ff; | |||
} | |||
.holo-seals { | |||
position: absolute; | |||
right: 10px; | |||
top: 85%; | |||
height: unset !important; | |||
background: radial-gradient(black, transparent 70%); | |||
} | |||
.holo-pane-body { | |||
height: 100%; | |||
position: relative; | |||
z-index: 2; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
box-sizing: border-box; | |||
width: 100%; | |||
padding: 80px 20px 0 20px; | |||
} | |||
.holo-pane-body a { | |||
background: none !important; | |||
padding: 0 !important; | |||
display: block; | |||
} | |||
.holo-pane-body a.external:hover { | |||
color: #ffffffc4 !important; | |||
text-shadow: 0 0 3px #ff6130, 0 0 5px #ff6130 !important; | |||
text-decoration: none; | |||
} | |||
.partenaire { | |||
position: relative; | |||
} | |||
:hover > .partenaire-desc { | |||
display: block; | |||
} | |||
.partenaire:hover::before { | |||
z-index: 10; | |||
} | |||
/* | |||
.partenaire::before { | |||
content: 'i'; | |||
text-transform: full-width; | |||
font-style: normal; | |||
position: absolute; | |||
left: 0; | |||
background: #0e4949; | |||
width: 20px; | |||
height: 20px; | |||
border-radius: 50%; | |||
color: black; | |||
z-index: 0; | |||
font-weight: bold; | |||
line-height: 20px; | |||
box-shadow: 0 0 2px black; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
} | |||
*/ | |||
.partenaire-desc { | |||
display: none; | |||
position: absolute; | |||
right: 85%; | |||
text-transform: none; | |||
width: 300px; | |||
background: #000000f0; | |||
padding: 20px 30px 20px 20px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
border-radius: 15px; | |||
box-shadow: inset 1px 1px #ffffff20, inset -1px -1px #ffffff10, 0 0 5px #000; | |||
text-align: justify; | |||
font-style: normal; | |||
color: #868686; | |||
z-index: 2; | |||
} | |||
.partenaire-desc b { | |||
color: #30818b; | |||
} | |||
.partenaire-desc::after { | |||
content: ''; | |||
position: absolute; | |||
right: 13px; | |||
top: 0; | |||
height: 100%; | |||
background: red; | |||
width: 1px; | |||
background: linear-gradient(transparent, #0e4949, transparent); | |||
} | |||
.partenaire-tags * { | |||
display: flex; | |||
margin: 0; | |||
padding: 0; | |||
text-align: center; | |||
justify-content: right; | |||
margin: 0 5px; | |||
font-style: italic; | |||
color: #439191; | |||
} | |||
.holo-base { | |||
text-align: center; | |||
z-index: 0; | |||
position: relative; | |||
} | |||
.holo-base::after { | |||
content: ''; | |||
position: absolute; | |||
top: 60%; | |||
left: 50%; | |||
width: 140%; | |||
height: 140%; | |||
transform: translateX(-50%) translateY(-50%); | |||
background: radial-gradient(black, transparent 70%); | |||
z-index: -1; | |||
} | |||
.holo-base img { | |||
width: 160px; | |||
height: 80px; | |||
transform: translateY(10px); | |||
} | |||
* | /** Message sur le panneau de droite. **/ | ||
.accueil-side-text { | |||
top: 50%; | |||
right: 50%; | |||
transform-origin: right; | |||
transform: translateY(-50%) translateX(50%); | |||
opacity: 0.7; | |||
width: 100%; | |||
display: flex; | |||
justify-content: center; | |||
cursor: pointer; | |||
} | |||
.accueil-side-text:hover { | |||
opacity: 1; | |||
} | |||
.accueil-side-text > * { | |||
color: white; | |||
font-size: 60px; | |||
transform: translateX(166px) translateY(0); | |||
opacity: 0.7; | |||
text-shadow: 0 0 5px black, 0 0 15px black; | |||
text-align: center; | |||
} | |||
.accueil-side-text > * > a[href] { | |||
color: white !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card { | |||
width: 200px !important; | |||
--offset-y-card: 6px !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card .news-content { | |||
display: none !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card .news-thumb { | |||
width: 100% !important; | |||
top: 18px !important; | |||
height: calc(100% - 27px) !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card.parchemin-ob .parchemin-ob-title a { | |||
color: white !important; | |||
top: 0; | |||
position: absolute; | |||
width: 100%; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
padding: 20px 15px 0 15px !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card .news-type { | |||
position: absolute; | |||
top: 0; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
font-size: 11px; | |||
} | |||
.recent-activity-cards-wrapper .news-card .parchemin-ob-content::before { | |||
top: var(--offset-y-card); | |||
} | |||
.recent-activity-cards-wrapper .news-card .parchemin-ob-content::after { | |||
-webkit-mask-image: none !important; | |||
mask: none !important; | |||
top: calc(6px + var(--offset-y-card)); | |||
height: calc(100% - calc(13px + var(--offset-y-card))); | |||
z-index: 20 !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card .parchemin-ob-content .parchemin-ob-corner { | |||
z-index: 25 !important; | |||
top: var(--offset-y-card); | |||
} | |||
.recent-activity-cards-wrapper .news-card .news-summary-link { | |||
display: none !important; | |||
} | |||
.recent-activity-cards-wrapper .news-card.parchemin-ob .parchemin-ob-page-bg { | |||
top: 46px !important; | |||
height: calc(100% - 62px) !important; | |||
} | |||
== | }}{{Tome | ||
{{ | | mode=css_only }}{{:Catégorie:Factions de Necromunda | ||
| mode=css_only }}{{:Catégorie:Factions de l'Imperium | |||
| mode=css_only }}{{Moniteur | |||
| mode=css_only }}{{ Diaporama | id=univers-diaporama | height=450px | |||
| mode=css_only }}{{Card News | |||
| css_mode=css_only }}{{Gallery |id=news-gallery |class=no-print |width=500px |height=320px |border-radius=5px |padding=0 |background=none |box-shadow=none | |||
| css_mode=css_only }}</includeonly><noinclude>{{Page OB}} | |||
<br><br><br><br><br><br><br> | |||
<div style="color: red; text-align: center;">Page technique de définition du CSS de la page d'Accueil</div></noinclude> |
Version du 31 janvier 2024 à 23:54
Page technique de définition du CSS de la page d'Accueil