Aucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 162 : | Ligne 162 : | ||
border: 1px solid #868585; |
border: 1px solid #868585; |
||
box-shadow: rgba(104, 116, 120, 1) 0 0.1em 0.75em; |
box-shadow: rgba(104, 116, 120, 1) 0 0.1em 0.75em; |
||
+ | } |
||
+ | |||
+ | |||
+ | |||
+ | /* Responsive main page stuff */ |
||
+ | /******************** |
||
+ | /* Main menu styles * |
||
+ | /********************/ |
||
+ | .primary-navigation-enabled { |
||
+ | border-left: 12px solid #505050 !important; |
||
+ | background: #101010 !important; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left { |
||
+ | border-left: 12px solid #505050; |
||
+ | background: transparent; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul { |
||
+ | background: transparent; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul:first-child { |
||
+ | border-bottom: 12px solid #505050; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul li { |
||
+ | border-top: 1px solid #505050; |
||
+ | border-bottom: 1px solid #505050; |
||
+ | background: transparent; |
||
+ | text-shadow: none; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul li a, |
||
+ | #mw-mf-page-left ul.hlist li a { |
||
+ | border: none; |
||
+ | color: #3674b3; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul li:hover { |
||
+ | border-left: 12px solid #aaaaaa; |
||
+ | background: #505050; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul.hlist li:hover { |
||
+ | border: none; |
||
+ | } |
||
+ | |||
+ | #mw-mf-page-left ul li:hover a, |
||
+ | #mw-mf-page-left ul.hlist li:hover a { |
||
+ | color: #ffffff; |
||
+ | } |
||
+ | |||
+ | /********************* |
||
+ | /* Front page styles * |
||
+ | /*********************/ |
||
+ | .fpbox { |
||
+ | border-radius: 5px; |
||
+ | border: 2px solid #505050; |
||
+ | box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset; |
||
+ | background: transparent; |
||
+ | color: inherit; |
||
+ | margin: 5px; |
||
+ | padding: 5px; |
||
+ | } |
||
+ | |||
+ | .fpbox .welcome { |
||
+ | border-bottom: 1px solid #505050; |
||
+ | background: transparent; |
||
+ | /* color: #e0e0e0; */ |
||
+ | font-size: 150%; |
||
+ | text-transform: uppercase; |
||
+ | text-align: center; |
||
+ | margin: 0 0 10px 0; |
||
+ | padding: 0 0 5px 0; |
||
+ | } |
||
+ | |||
+ | .fpbox .heading { |
||
+ | border-bottom: 1px solid #505050; |
||
+ | background: transparent; |
||
+ | /* color: #e0e0e0; */ |
||
+ | font-size: 132%; |
||
+ | font-variant: small-caps; |
||
+ | margin: 0 0 10px 0; |
||
+ | padding: 0 0 5px 0; |
||
+ | } |
||
+ | |||
+ | .fpbox .heading .smalllink { |
||
+ | color: #3674b3; |
||
+ | font-weight: bold; |
||
+ | font-size: 75%; |
||
+ | } |
||
+ | |||
+ | .fpbox hr { |
||
+ | border: none; |
||
+ | border-bottom: 2px solid #505050; |
||
+ | } |
||
+ | |||
+ | .fpplainbox { |
||
+ | padding: 5px 8px 10px 8px; |
||
+ | margin: 0 5px 10px 5px; |
||
+ | vertical-align: top; |
||
+ | } |
||
+ | |||
+ | .fplinks { |
||
+ | margin: -2px -3px; |
||
+ | } |
||
+ | |||
+ | .fplinks .linkslabel { |
||
+ | border-bottom: 2px solid #505050; |
||
+ | margin: 6px 3px 0 3px; |
||
+ | } |
||
+ | |||
+ | .fplink { |
||
+ | display: inline-block; |
||
+ | vertical-align: middle; |
||
+ | width: 100%; |
||
+ | } |
||
+ | |||
+ | /* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */ |
||
+ | .fplink .box { |
||
+ | display: table; |
||
+ | width: 100%; |
||
+ | border-spacing: 2px 3px; |
||
+ | border-collapse: separate; |
||
+ | } |
||
+ | |||
+ | .fplink .box .row { |
||
+ | display: table-row; |
||
+ | } |
||
+ | |||
+ | .fplink .box .row .cell { |
||
+ | background: rgba(0, 0, 0, 0) none repeat scroll 0 0; |
||
+ | border: 2px solid #505050; |
||
+ | border-radius: 2px; |
||
+ | box-shadow: 0 0 0 2px #505050 inset; |
||
+ | /* color: #e0e0e0; */ |
||
+ | display: table-cell; |
||
+ | font-weight: bold; |
||
+ | position: relative; |
||
+ | text-align: center; |
||
+ | text-transform: uppercase; |
||
+ | vertical-align: middle; |
||
+ | } |
||
+ | |||
+ | .fplink.wide .box .row .cell { |
||
+ | padding: 0 5px; |
||
+ | } |
||
+ | |||
+ | .fplink.image { |
||
+ | width: 78px; |
||
+ | height: 78px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell { |
||
+ | width: 70px; |
||
+ | height: 70px; |
||
+ | vertical-align: bottom; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell .image img { |
||
+ | width: 70px; |
||
+ | height: 70px; |
||
+ | } |
||
+ | |||
+ | @media (min-width: 188px) { |
||
+ | .fplink { |
||
+ | width: 50%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 100%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 294px) { |
||
+ | .fplink { |
||
+ | width: 33.333%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 66.666%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 400px) { |
||
+ | .fplink { |
||
+ | width: 25%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 50%; |
||
+ | } |
||
+ | |||
+ | .fplink.image { |
||
+ | width: 108px; |
||
+ | height: 108px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell { |
||
+ | width: 100px; |
||
+ | height: 100px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell .image img { |
||
+ | width: 100px; |
||
+ | height: 100px; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 506px) { |
||
+ | .fplink { |
||
+ | width: 20%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 40%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 612px) { |
||
+ | .fplink { |
||
+ | width: 16.666%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 33.333%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 718px) { |
||
+ | .fplink { |
||
+ | width: 14.285%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 28.571%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 824px) { |
||
+ | .fplink { |
||
+ | width: 12.5%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 25%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 930px) { |
||
+ | .fplink { |
||
+ | width: 11.111%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 22.222%; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | @media (min-width: 1036px) { |
||
+ | .fplink { |
||
+ | width: 10%; |
||
+ | } |
||
+ | |||
+ | .fplink.wide { |
||
+ | width: 20%; |
||
+ | } |
||
+ | |||
+ | .fplink.image { |
||
+ | width: 128px; |
||
+ | height: 128px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell { |
||
+ | width: 120px; |
||
+ | height: 120px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .box .row .cell .image img { |
||
+ | width: 120px; |
||
+ | height: 120px; |
||
+ | } |
||
+ | } |
||
+ | |||
+ | .fplink.image .image { |
||
+ | position: absolute; |
||
+ | top: 0; |
||
+ | right: 0; |
||
+ | bottom: 0; |
||
+ | left: 0; |
||
+ | font-size: 75%; |
||
+ | z-index: 1; |
||
+ | } |
||
+ | |||
+ | .fplink.image a { |
||
+ | z-index: 2; |
||
+ | } |
||
+ | |||
+ | .fplink a { |
||
+ | display: block; |
||
+ | position: relative; |
||
+ | top: 0; |
||
+ | right: 0; |
||
+ | bottom: 0; |
||
+ | left: 0; |
||
+ | padding: 3px 5px; |
||
+ | } |
||
+ | |||
+ | .fplink.image .image a { |
||
+ | padding: 0; |
||
+ | } |
||
+ | |||
+ | .fplink.image .link a { |
||
+ | border-top: 2px solid #505050; |
||
+ | background: #ddddb7 !important; |
||
+ | } |
||
+ | |||
+ | .fplink.wide a { |
||
+ | margin: 0 -5px; |
||
+ | } |
||
+ | |||
+ | .fplink.image a { |
||
+ | top: auto; |
||
+ | } |
||
+ | |||
+ | .fpvideos { |
||
+ | margin: 0 auto; |
||
+ | overflow: hidden; |
||
+ | text-align: center; |
||
+ | max-width: 480px; |
||
+ | } |
||
+ | |||
+ | .fpvideo { |
||
+ | position: relative; |
||
+ | padding-top: 25px; |
||
+ | padding-bottom: 56.25%; |
||
+ | height: 0; |
||
+ | } |
||
+ | |||
+ | .fpvideo iframe { |
||
+ | position: absolute; |
||
+ | top: 0; |
||
+ | left: 0; |
||
+ | width: 100%; |
||
+ | height: 100%; |
||
} |
} |
Version du 21 février 2017 à 17:18
/* Le CSS placé ici n’affectera que les utilisateurs du site mobile */
.nomobile {
display: none;
}
/* search header */
.overlay {
background: rgba(0, 0, 0, 0.85);
}
.overlay .overlay-header-container {
background: rgba(0, 0, 0, 0.85) !important;
}
.search-overlay .overlay-header,
.search-overlay .results {
background-color: rgba(0, 0, 0, 0.85) !important;
color: #E0E0E0;
}
.search-overlay {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5) !important;
}
ul.suggestions-results,
ul.suggestions-results li {
background: rgba(0, 0, 0, 0.85);
color: #E0E0E0;
}
ul.suggestions-results li.suggestions-result {
color: #E0E0E0;
}
/* general header */
#mw-mf-header form,
#mw-mf-sq {
background: rgba(0, 0, 0, 0.85);
}
/* non-content area */
body {
background-attachment: fixed;
background-color: #07090e;
background-image: url(http://hydra-media.cursecdn.com/bannersaga.gamepedia.com/b/bd/Backgroundbg.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #111111;
}
#footer {
border-top: 1px solid #1a1a1a;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#footer a {
color: #6d8db3;
text-shadow: 1px 1px #000000;
}
#footer h2 {
color: #6d8db3;
text-shadow: 1px 1px #000000;
}
/* content area */
div#content_wrapper {
background-color: unset;
border: 1px solid #1a1a1a;
}
body.mediawiki #mw-mf-page-center {
background: transparent url(http://hydra-media.cursecdn.com/bannersaga.gamepedia.com/3/3e/Stoic_background.png) repeat scroll 0 0;
box-shadow: rgba(26, 26, 26, 1) 0 0.1em 0.75em;
}
a,
a:visited,
a.external {
color: #6d8db3;
}
a:visited {
color: #06362e;
}
.content table th {
background-color: rgba(0, 0, 0, 0);
}
.content table td,
.content table th {
border: medium none;
padding: 3px;
}
h1,
h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #6d8db3;
color: #6d8db3;
}
h3, h4, h5, h6 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #6d8db3;
}
.thumb,
#content_wrapper .thumb {
background: transparent;
border: 2px solid #1a1a1a;
}
table.wikitable {
border: none;
border-collapse: separate !important;
border-spacing: 2px !important;
margin: auto;
margin-bottom: 1em;
}
table.wikitable td {
border: none;
padding: 3px;
background: rgba(0, 0, 0, 0);
}
table.wikitable th {
background: #a61800;
border: none;
padding: 3px;
}
.mwm-notice,
#searchbox {
background: rgba(0, 0, 0, 0);
border: 2px solid #1a1a1a;
border-radius: 5px 5px 5px 5px;
}
.divclearable,
a.watch-this-article,
.jsEnabled #mw-mf-main-menu-button {
background-color: rgba(0, 0, 0, 0);
}
a.back_to_top,
a.back_to_top:visited {
margin-top: 7px;
}
.BannerSaga {
background:#bfbfbf;
background:-moz-linear-gradient(top, #bfbfbf, #868585 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop (0% #bfbfbf), color-stop(100%,#868585 ));
background:-webkit-linear-gradient(top, #bfbfbf 0%, #868585 100%);
background:-o-linear-gradient(top, #bfbfbf 0%, #868585 100%);
background:-ms-linear-gradient(top, #bfbfbf 0%, #868585 100%);
background:linear-gradient(to bottom, #bfbfbf 0%, #868585 100%);
border: 1px solid #868585;
box-shadow: rgba(104, 116, 120, 1) 0 0.1em 0.75em;
}
/* Responsive main page stuff */
/********************
/* Main menu styles *
/********************/
.primary-navigation-enabled {
border-left: 12px solid #505050 !important;
background: #101010 !important;
}
#mw-mf-page-left {
border-left: 12px solid #505050;
background: transparent;
}
#mw-mf-page-left ul {
background: transparent;
}
#mw-mf-page-left ul:first-child {
border-bottom: 12px solid #505050;
}
#mw-mf-page-left ul li {
border-top: 1px solid #505050;
border-bottom: 1px solid #505050;
background: transparent;
text-shadow: none;
}
#mw-mf-page-left ul li a,
#mw-mf-page-left ul.hlist li a {
border: none;
color: #3674b3;
}
#mw-mf-page-left ul li:hover {
border-left: 12px solid #aaaaaa;
background: #505050;
}
#mw-mf-page-left ul.hlist li:hover {
border: none;
}
#mw-mf-page-left ul li:hover a,
#mw-mf-page-left ul.hlist li:hover a {
color: #ffffff;
}
/*********************
/* Front page styles *
/*********************/
.fpbox {
border-radius: 5px;
border: 2px solid #505050;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset;
background: transparent;
color: inherit;
margin: 5px;
padding: 5px;
}
.fpbox .welcome {
border-bottom: 1px solid #505050;
background: transparent;
/* color: #e0e0e0; */
font-size: 150%;
text-transform: uppercase;
text-align: center;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading {
border-bottom: 1px solid #505050;
background: transparent;
/* color: #e0e0e0; */
font-size: 132%;
font-variant: small-caps;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading .smalllink {
color: #3674b3;
font-weight: bold;
font-size: 75%;
}
.fpbox hr {
border: none;
border-bottom: 2px solid #505050;
}
.fpplainbox {
padding: 5px 8px 10px 8px;
margin: 0 5px 10px 5px;
vertical-align: top;
}
.fplinks {
margin: -2px -3px;
}
.fplinks .linkslabel {
border-bottom: 2px solid #505050;
margin: 6px 3px 0 3px;
}
.fplink {
display: inline-block;
vertical-align: middle;
width: 100%;
}
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
display: table;
width: 100%;
border-spacing: 2px 3px;
border-collapse: separate;
}
.fplink .box .row {
display: table-row;
}
.fplink .box .row .cell {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #505050;
border-radius: 2px;
box-shadow: 0 0 0 2px #505050 inset;
/* color: #e0e0e0; */
display: table-cell;
font-weight: bold;
position: relative;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
}
.fplink.wide .box .row .cell {
padding: 0 5px;
}
.fplink.image {
width: 78px;
height: 78px;
}
.fplink.image .box .row .cell {
width: 70px;
height: 70px;
vertical-align: bottom;
}
.fplink.image .box .row .cell .image img {
width: 70px;
height: 70px;
}
@media (min-width: 188px) {
.fplink {
width: 50%;
}
.fplink.wide {
width: 100%;
}
}
@media (min-width: 294px) {
.fplink {
width: 33.333%;
}
.fplink.wide {
width: 66.666%;
}
}
@media (min-width: 400px) {
.fplink {
width: 25%;
}
.fplink.wide {
width: 50%;
}
.fplink.image {
width: 108px;
height: 108px;
}
.fplink.image .box .row .cell {
width: 100px;
height: 100px;
}
.fplink.image .box .row .cell .image img {
width: 100px;
height: 100px;
}
}
@media (min-width: 506px) {
.fplink {
width: 20%;
}
.fplink.wide {
width: 40%;
}
}
@media (min-width: 612px) {
.fplink {
width: 16.666%;
}
.fplink.wide {
width: 33.333%;
}
}
@media (min-width: 718px) {
.fplink {
width: 14.285%;
}
.fplink.wide {
width: 28.571%;
}
}
@media (min-width: 824px) {
.fplink {
width: 12.5%;
}
.fplink.wide {
width: 25%;
}
}
@media (min-width: 930px) {
.fplink {
width: 11.111%;
}
.fplink.wide {
width: 22.222%;
}
}
@media (min-width: 1036px) {
.fplink {
width: 10%;
}
.fplink.wide {
width: 20%;
}
.fplink.image {
width: 128px;
height: 128px;
}
.fplink.image .box .row .cell {
width: 120px;
height: 120px;
}
.fplink.image .box .row .cell .image img {
width: 120px;
height: 120px;
}
}
.fplink.image .image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 75%;
z-index: 1;
}
.fplink.image a {
z-index: 2;
}
.fplink a {
display: block;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 3px 5px;
}
.fplink.image .image a {
padding: 0;
}
.fplink.image .link a {
border-top: 2px solid #505050;
background: #ddddb7 !important;
}
.fplink.wide a {
margin: 0 -5px;
}
.fplink.image a {
top: auto;
}
.fpvideos {
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 480px;
}
.fpvideo {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
height: 0;
}
.fpvideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}