« MediaWiki:Vector.css » : différence entre les versions

Aucun résumé des modifications
Balise : Révoqué
Aucun résumé des modifications
 
(24 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
/**
/* ---------------------------------------------------------
  * AtlasMuseum artwork layout
  * AtlasMuseum styling layered on top of Vector (MediaWiki 1.39)
* Responsive-friendly adjustments for MediaWiki 1.39+
  * --------------------------------------------------------- */
  */
*, *::before, *::after {
box-sizing: border-box;
}
 
#bodyContent {
line-height: 1.42em;
/*padding-left: 43px;
padding-right: 43px;*/
color: #505b61;
}
 
#artwork_top,
#artwork_main,
#artwork_atlas {
margin-left: -1em;
margin-right: -1em;
border-top: 1px solid #e4e8ea;
padding:24px;
clear:both;
}


#artwork_top {
/* Load original AtlasMuseum CSS files from the skin directory */
min-height:268px;
@import url("/skins/AtlasMuseum/resources/screen.css");
}
@import url("/skins/AtlasMuseum/resources/atlasmuseum.css");
@import url("/skins/AtlasMuseum/resources/artwork.css");
@import url("/skins/AtlasMuseum/resources/edit.css");


#artwork_image,
#artwork_map {
float:left;
width:50%;
padding:5px;
box-sizing:border-box;
text-align:center;
}


#artwork_image > p {
/* =========================================================
margin-top:0;
* HEADER FIXES & LAYOUT CORRECTIONS
}
* ========================================================= */
 
#artwork_image img {
max-width:100%;
max-height:258px;
}


#artwork_map {
/* 1) Reset legacy AtlasMuseum rule that pushed all header links out of place */
height:268px;
div#mw-head-base a {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline !important;
    height: auto !important;
    line-height: normal !important;
    background: none;
}
}


#map {
/* 2) Position the personal tools neatly in the top-right corner */
background-color:#cccccc;
#p-personal {
height:100%;
    position: absolute !important;
text-align: center;
    top: 10px !important;        /* tweak if needed */
vertical-align: middle;
    right: 40px !important;     /* tweak if needed */
line-height:238px;  
    background: none;
    padding: 0;
    margin: 0;
    z-index: 5;
}
}


#artwork_artwork,
#p-personal ul {
#artwork_site,
    margin: 0;
#artwork_artist {
    padding: 0;
float:left;
width:33%;
padding:5px;
box-sizing:border-box;
}
}


#artwork_site {
#p-personal li {
width:34%;
    display: inline-block;
    border-right: 1px solid #505B61;
    margin: 0 6px 0 0;
    padding: 0 6px 0 0;
    background: transparent;
}
}


#artwork_main h2 {
#p-personal li:last-child {
font-size: 18px;
    border-right: none;
color: white;
background-color: #FBE023;
padding:8px;
border:none;
position:relative;
overflow:visible;
margin-bottom:2em;
}
}


#artwork_main h2::after {
#p-personal a,
content:'';
#p-personal a:visited {
position:absolute;
    background: none !important;
bottom:0;
    color: #ffffff;
left:8px;
    font-family: "ITCFranklinGothicW02-Bk 812924";
width:10px;
    font-size: 11px;
height:10px;
    text-decoration: none;
background-color: #FBE023;
transform:translate(0,50%) rotate(45deg);
}
}


#artwork_main ul {
#p-personal a:hover {
list-style-type:none;
    text-decoration: underline;
margin:0;
padding:0;
}
}


#artwork_main li {
/* 3) Position the search bar below the personal tools */
border-bottom: solid 1px #ececeb;
#p-search {
padding-bottom:3px;
    position: absolute !important;
font-size:14px;
    top: 40px !important;      /* tweak if needed */
    right: 40px !important;
    margin: 0;
    padding: 0;
}
}


#artwork_main li .left_column,
#simpleSearch {
#artwork_main li .right_column {
    background: none;
display:inline-block;
width:50%;
box-sizing:border-box;
}
}


#artwork_main li .two_columns_title,
#artwork_main li .two_columns_text {
display:inline-block;
width:100%;
box-sizing:border-box;
}


#artwork_main li .two_columns_title {
/* =========================================================
font-weight:bold;
* ATLASMUSEUM LOGO (TEXT VERSION)
}
* ========================================================= */


#artwork_main li .left_column {
/* Hide the default Vector logo image */
float:left;
#p-logo a > img {
font-weight:bold;
    display: none !important;
}
}


#artwork_artist h3 {
/* Allow positioning inside the logo container */
font-size:16px;
#p-logo {
    position: relative;
}
}


#artwork_artist a {
/* Add the textual AtlasMuseum logo */
font-size:16px;
#p-logo::after {
    content: "AtlasMuseum";
    font-family: "FranklinGothicW01-Extra 692515";
    font-size: 58px;
    text-transform: lowercase;
    color: #ffffff;
    position: absolute;
    top: 0px;      /* tweak if needed */
    left: 30px;    /* tweak if needed */
    pointer-events: none; /* link underneath remains clickable */
}
}


#artwork_artist img {
/* Make the whole area clickable (link to homepage) */
width:262px;
#p-logo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 80px;
    z-index: 5;
    background: none !important;
}
}


#artwork_atlas h2 {
font-size: 22px;
background-color: #505b61;
text-transform:uppercase;
color:white;
padding:8px;
position:relative;
overflow:visible;
}


#artwork_atlas h2::after {
/* =========================================================
content:'';
* SPECIAL PAGES (Login, Preferences, Account Creation)
position:absolute;
* ========================================================= */
bottom:0;
left:8px;
width:10px;
height:10px;
background-color: #505b61;
transform:translate(0,50%) rotate(45deg);
}


#artwork_atlas > div h3 {
/* General font fix for all special pages */
border-bottom:1px solid #FBE023;
body.mw-specialpage {
padding-bottom:10px;
    font-family: "ITCFranklinGothicW02-Bk 812924";
font-size: 28px;
color: #505b61;
font-weight:normal;
padding-left:20px;
}
#artwork_atlas > div:first-of-type h3 {
border-top:1px solid #FBE023;
}
}


#artwork_atlas ul {
/* Main container for Special:UserLogin */
list-style-type: none;
body.mw-special-Userlogin #content,
body.mw-special-Userlogin .mw-body,
body.mw-special-Userlogin .mw-body-content {
    max-width: 1050px;
    margin: 0 auto;
    border-left: 1px solid #e4e8ea;
    padding: 40px 55px;
    background: #ffffff;
}
}


#artwork_atlas li {
/* Login page heading */
display:inline-block;
body.mw-special-Userlogin #firstHeading {
width:24%;
    font-size: 32px;
padding-top:24%;
    font-family: "FranklinGothicW01-Extra 692515";
position:relative;
    border: none;
    margin-bottom: 24px;
}
}


.atlas_wrap {
body.mw-special-Userlogin #firstHeading > span {
position:absolute;
    border-bottom: 8px solid #fbe023;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid #ccc;
padding:2px;
text-align:center;
}
}


.atlas_image {
/* Login form layout */
position:absolute;
body.mw-special-Userlogin .mw-htmlform,
top:2px;
body.mw-special-Userlogin .mw-htmlform-ooui-wrapper {
left:2px;
    border: 1px solid #e4e8ea;
right:2px;
    padding: 24px 32px;
bottom:25%;
    background: #ffffff;
}
}


.atlas_image img {
body.mw-special-Userlogin .mw-htmlform fieldset {
max-width:100%;
    border: none;
width:auto;
    margin: 0 0 16px 0;
height:100%;
}
}


.atlas_legend {
body.mw-special-Userlogin .mw-htmlform label,
position:absolute;
body.mw-special-Userlogin .mw-htmlform .mw-label {
top:76%;
    font-size: 13px;
left:2px;
    margin-bottom: 4px;
right:2px;
bottom:2px;
overflow:hidden;
font-size:80%;
}
}


/**
/* Input fields */
* CSS spÈcifique pour les úuvres provenant de Wikidata
body.mw-special-Userlogin .mw-htmlform input[type="text"],
**/
body.mw-special-Userlogin .mw-htmlform input[type="password"] {
 
    border: 1px solid #d5dbdb;
h1.wikidata > span {
    padding: 6px 8px;
border-bottom: 8px solid #006699;
    width: 260px;
    font-size: 13px;
}
}


.wikidata #artwork_main h2 {
/* Submit button in AtlasMuseum yellow */
background-color: #006699;
body.mw-special-Userlogin .mw-htmlform input[type="submit"],
body.mw-special-Userlogin .oo-ui-buttonElement-button {
    background: #fbe023;
    border: 1px solid #e0d200;
    color: #505b61;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
}
}


.wikidata #artwork_main h2::after {
body.mw-special-Userlogin .mw-htmlform input[type="submit"]:hover,
content:'';
body.mw-special-Userlogin .oo-ui-buttonElement-button:hover {
position:absolute;
    background: #ffe94b;
bottom:0;
left:8px;
width:10px;
height:10px;
background-color: #006699;
transform:translate(0,50%) rotate(45deg);
}
}


/* Responsive tweaks for narrow screens */
/* Login page links */
@media (max-width: 768px) {
body.mw-special-Userlogin .mw-htmlform a {
#artwork_top,
    color: #00B9EE;
#artwork_main,
#artwork_atlas {
margin-left: 0;
margin-right: 0;
padding: 16px;
}
 
#artwork_image,
#artwork_map,
#artwork_artwork,
#artwork_site,
#artwork_artist {
float: none;
width: 100%;
padding: 8px 0;
}
 
#artwork_artist img {
width: 100%;
max-width: 320px;
height: auto;
}
 
#artwork_atlas li {
width: 48%;
padding-top: 48%;
margin-bottom: 12px;
}
 
#map {
line-height: normal;
}
}
}

Dernière version du 9 décembre 2025 à 04:43

/* ---------------------------------------------------------
 * AtlasMuseum styling layered on top of Vector (MediaWiki 1.39)
 * --------------------------------------------------------- */

/* Load original AtlasMuseum CSS files from the skin directory */
@import url("/skins/AtlasMuseum/resources/screen.css");
@import url("/skins/AtlasMuseum/resources/atlasmuseum.css");
@import url("/skins/AtlasMuseum/resources/artwork.css");
@import url("/skins/AtlasMuseum/resources/edit.css");


/* =========================================================
 * HEADER FIXES & LAYOUT CORRECTIONS
 * ========================================================= */

/* 1) Reset legacy AtlasMuseum rule that pushed all header links out of place */
div#mw-head-base a {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline !important;
    height: auto !important;
    line-height: normal !important;
    background: none;
}

/* 2) Position the personal tools neatly in the top-right corner */
#p-personal {
    position: absolute !important;
    top: 10px !important;        /* tweak if needed */
    right: 40px !important;      /* tweak if needed */
    background: none;
    padding: 0;
    margin: 0;
    z-index: 5;
}

#p-personal ul {
    margin: 0;
    padding: 0;
}

#p-personal li {
    display: inline-block;
    border-right: 1px solid #505B61;
    margin: 0 6px 0 0;
    padding: 0 6px 0 0;
    background: transparent;
}

#p-personal li:last-child {
    border-right: none;
}

#p-personal a,
#p-personal a:visited {
    background: none !important;
    color: #ffffff;
    font-family: "ITCFranklinGothicW02-Bk 812924";
    font-size: 11px;
    text-decoration: none;
}

#p-personal a:hover {
    text-decoration: underline;
}

/* 3) Position the search bar below the personal tools */
#p-search {
    position: absolute !important;
    top: 40px !important;      /* tweak if needed */
    right: 40px !important;
    margin: 0;
    padding: 0;
}

#simpleSearch {
    background: none;
}


/* =========================================================
 * ATLASMUSEUM LOGO (TEXT VERSION)
 * ========================================================= */

/* Hide the default Vector logo image */
#p-logo a > img {
    display: none !important;
}

/* Allow positioning inside the logo container */
#p-logo {
    position: relative;
}

/* Add the textual AtlasMuseum logo */
#p-logo::after {
    content: "AtlasMuseum";
    font-family: "FranklinGothicW01-Extra 692515";
    font-size: 58px;
    text-transform: lowercase;
    color: #ffffff;
    position: absolute;
    top: 0px;      /* tweak if needed */
    left: 30px;    /* tweak if needed */
    pointer-events: none; /* link underneath remains clickable */
}

/* Make the whole area clickable (link to homepage) */
#p-logo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 80px;
    z-index: 5;
    background: none !important;
}


/* =========================================================
 * SPECIAL PAGES (Login, Preferences, Account Creation)
 * ========================================================= */

/* General font fix for all special pages */
body.mw-specialpage {
    font-family: "ITCFranklinGothicW02-Bk 812924";
}

/* Main container for Special:UserLogin */
body.mw-special-Userlogin #content,
body.mw-special-Userlogin .mw-body,
body.mw-special-Userlogin .mw-body-content {
    max-width: 1050px;
    margin: 0 auto;
    border-left: 1px solid #e4e8ea;
    padding: 40px 55px;
    background: #ffffff;
}

/* Login page heading */
body.mw-special-Userlogin #firstHeading {
    font-size: 32px;
    font-family: "FranklinGothicW01-Extra 692515";
    border: none;
    margin-bottom: 24px;
}

body.mw-special-Userlogin #firstHeading > span {
    border-bottom: 8px solid #fbe023;
}

/* Login form layout */
body.mw-special-Userlogin .mw-htmlform,
body.mw-special-Userlogin .mw-htmlform-ooui-wrapper {
    border: 1px solid #e4e8ea;
    padding: 24px 32px;
    background: #ffffff;
}

body.mw-special-Userlogin .mw-htmlform fieldset {
    border: none;
    margin: 0 0 16px 0;
}

body.mw-special-Userlogin .mw-htmlform label,
body.mw-special-Userlogin .mw-htmlform .mw-label {
    font-size: 13px;
    margin-bottom: 4px;
}

/* Input fields */
body.mw-special-Userlogin .mw-htmlform input[type="text"],
body.mw-special-Userlogin .mw-htmlform input[type="password"] {
    border: 1px solid #d5dbdb;
    padding: 6px 8px;
    width: 260px;
    font-size: 13px;
}

/* Submit button in AtlasMuseum yellow */
body.mw-special-Userlogin .mw-htmlform input[type="submit"],
body.mw-special-Userlogin .oo-ui-buttonElement-button {
    background: #fbe023;
    border: 1px solid #e0d200;
    color: #505b61;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
}

body.mw-special-Userlogin .mw-htmlform input[type="submit"]:hover,
body.mw-special-Userlogin .oo-ui-buttonElement-button:hover {
    background: #ffe94b;
}

/* Login page links */
body.mw-special-Userlogin .mw-htmlform a {
    color: #00B9EE;
}