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

De Guide de l'Installation Electrique
Aller à :navigation, rechercher
(improve image galleries on mobile (copied from PPR-EN))
(MW1.35 - emptied - moved to common.scss)
Balise : Blanchiment
 
(6 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :


/**********************************************************
* Style Dokit for Schneider  -    issu de style.css Dokit
*********************************************************/
/******* global elements */
.containerBodyWithoutSS.col-lg-12,
.footer-main.col-lg-12,
.contentContainer.col-lg-12 {
    padding-left: 0;
    padding-right: 0;
    float: unset;
}
.containerBodyWithoutSS .container {
    max-width: 1600px;
    width: 100%;
}
.ns-0 .containerBodyWithoutSS .container {
    max-width: 1170px;
    width: 100%;
}
.contentContainer {
    overflow-y: hidden;
}
/******* header */
#mw-navigation {
    border:0 ;
}
#mw-navigation .container {
    width:100%;
}
#p-logo {
    padding: 0;
    border: 0;
    margin-left: 0;
}
#p-logo img {
    max-height: none;
}
.navbar-userloggedin .glyphicon-user {
    display: none !important;
}
/******* Sidemenu  -  merged with my css (only part)  */
.SchneiderMenuChapter {
padding-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
color: #000000;
font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;
}
.SchneiderMenuTitle {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 20px;
    margin-top: 5px;
    padding: 0 15px 10px 30px;
}
.vertical-sidebar .MainCurrentChapter {
background-color: #f2f4f8;
}
.vertical-sidebar .MainCurrentChapter > a {
    font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;
}
.vertical-sidebar li a {
font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
.vertical-sidebar a:active {
    color: #0087cd;
}
.vertical-sidebar li .selflink {
font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
}
/* commented ... ce max-width est appliqué sur toutes les pages, pas seulement celles avec un sidemenu
body .pushBodyLeft.HasSideSummary .container {
    width: 100%;
    max-width: 1170px;
}
*/
/******* page toolbar  -  merged  */
.p-tb.navbar {
    z-index: 0;
    margin-top: 48px;
    padding-left: 5px;
    border: 1px solid #cbcbcb;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.p-tb .navbar-nav > li > a, .p-tb .navbar-nav > li > a:hover {
    padding: 5px 10px;
    font-size: 12px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
.p-tb .navbar-nav > li > a {
    color: #9fa0a4;
}
/*  commented as not useful or managed elsewhere ... also already managed by chameleon (class = .img-responsive etc ...)
.responsive-img img {
    width: 100%;
    height: 100%;
}
.thumbinner {
max-width: 100%;
}
*/
/*********************
* Style of Schneider Footer
*********************/
.footer-main {
    padding-bottom: 30px;
    background-color: #444;
}
.footer-main .container .row {
    padding-top: 30px;
    color: #fff;
}
.schneider-logo img {
    min-height: 40px;
}
.footer-info {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    /* font-size:12px; */
    float: none;
    width: 100%;
    margin-top:48px;
    margin-bottom: 0;
    padding: 0 15px 10px 0;
    color: #9fa0a4;
    background: #fff;
}
.footer-main li {
    line-height: 1.7em;
}
.footer-main .footer-info li {
    width: 100%;
    padding: 0 15px;
}
.footer-main a, .footer-main a:visited, .footer-main a.new {
    color: #9fa0a4;  /* medium grey  */
}
/* Dokit version, kept temporarily as memory
.footer-main a:link,
.footer-main a:visited {
    color: #aaa;
}
*/
.footer-main a:visited:hover,
.footer-main a:hover,
.footer-main a:active {
    color: #ffffff;
    text-decoration: none;
}
#footer-icons {
    margin-bottom: 30px;
}
.footer-main h4 {
    color: inherit;
    font-size: 18px;
    font-weight: normal;
}
.footer-main p {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    color: #9fa0a4;  /* medium grey  */
}
/* ========= Comment & share ===========*/
#share-prev-next {
margin-top: 48px;
    padding: 0 2em;
    /*  to disable text selection - for mobile */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
.add-a-comment {
    display: inline-block;
font-size: 16px;
margin-bottom: 15px;
}
.add-a-comment a {
    color: #219bfd;
}
.add-a-comment a:before {
content:'\F1A7';
font-family:"se-icon";
font-size:24px;
line-height:20px;
vertical-align: text-top;
    display: inline-block;
    padding-right: 10px;
}
#share-prev-next a.a2a_dd {
    color: inherit;
}
a.a2a_dd:before {
content:'\F135';
font-family:"se-icon";
font-size:24px;
line-height:20px;
vertical-align: text-top;
    display: inline-block;
    padding-right: 15px;
}
a.a2a_dd:after {
content:'\F159';
font-family:"se-icon";
font-size:24px;
line-height:20px;
vertical-align: text-top;
    display: inline-block;
    padding-left: 10px;
}
.comment-share {
width:100%;
text-align: left;
margin-bottom: 48px;
border-top: 1px solid #cbcbcb;
border-bottom: 1px solid #cbcbcb;
}
.comment-share .btn {
    font-size: 16px;
    margin: 15px 32px 15px 0;
}
.comment-share .se-icon {
    font-size: 24px;
    margin: -5px 8px 0;
    top: 4px;
}
a:hover .se-icon {
    text-decoration: none;
}
/* ========= Previous Next ===========*/
.prev-next {
/*    margin-bottom: 48px;    */
}
/* ul.pager {padding-left:0!important;}  a priori pas/plus utile  */
.pager { margin: 0; }
li.previous a, li.next a {height:160px;width:160px;padding-top:100px;font-variant: small-caps;color:#999999;font-size:20px;letter-spacing: 1px;line-height:1;border-radius:0;border:0;}
li.previous a:link, li.previous a:visited {background-image: url("extensions/DokitSchneider/img/BUTTON_PREVIOUS_NORMAL.svg"); color:#9fa0a4;}
li.next a:link, li.next a:visited {background-image: url("extensions/DokitSchneider/img/BUTTON_NEXT_NORMAL.svg"); color:#9fa0a4;}
li.previous a:hover, li.previous a:active {background-image: url("extensions/DokitSchneider/img/BUTTON_PREVIOUS_SELECTED.svg");color:white;background-color:#3dcd58;}
li.next a:hover, li.next a:active {background-image: url("extensions/DokitSchneider/img/BUTTON_NEXT_SELECTED.svg");color:white;background-color:#3dcd58;}
/*********************
* Tablet style
*********************/
.navbar-default .navbar-toggle {
    border:none;
    padding: 5px 10px;
    margin-right: 0px;
    font-size: 1.4em;
    margin-top: 6px;
    margin-bottom: 6px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active {
    background-color: transparent;
}
/*  not useful, I think
.navbar-default .navbar-toggle .icon-bar {
    width: 5px;
    height: 5Px;
    background-color: #fff;
    border-radius: 5px;
}
*/
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:none !important;
}
/* == header - brought == */
.subnavbar {
    background-color: #3dcd58;
    color: #fff;
}
.subnavbar-label {
    padding-top: 6px;  /* modifié */
    height: 32px;
    padding-left: 15px;
}
#mw-navigation-collapse {
    float: right;
}
@media (min-width: 1024px) {
input#searchInput {
width: 250px;
}
#mw-navigation-collapse .nav.navbar-nav {
    display: none;
}
/* not useful ? already exists in bootstrap, just -16px, no visual difference (or better with -16px)
.navbar-right-aligned .navbar-tools:last-child {
    margin-right: -15px !important;
}
*/
}
@media (min-width: 992px) {
.footer-main p {
    padding-right: 60px;
}
}
@media (min-width: 1024px) {
#mw-navigation-collapse .nav.navbar-nav {
    display:block;
    }
}
/* added by me, reco Joost vs distance between sidemenu and content */
/* no more needed or not working, I think */
/*
@media only screen and (min-width: 1024px) and (max-width: 1830px) {
body .pushBodyLeft.HasSideSummary > .container {
    padding-left: 44px;
    padding-right: 44px;
}
}
*/
@media (min-width: 1440px) {
input#searchInput {
width: 400px; }
}
@media (min-width: 1830px) {
.pushBodyLeft {
    margin-left: 0px;
    width: 100%;
}
}
@media (max-width: 1023px) {
.navbar-default .navbar-collapse .navbar-nav {
    display: none;
}
}
/*********************
* Mobile style
*********************/
@media (max-width: 1023px) {
#p-logo {
    height: 50px !important;
    margin-left: 10px;
}
#p-logo img {
    max-height: 50px;
}
.toggle.hookButtonOpenTop, .toggle {    /*  à supprimer après modif css wikifa-side-summary  */
    color: initial !important;
}
body .navbar-default .navbar-collapse .navbar-form {
    box-shadow: none;
}
.mw-body, #share-prev-next  {
    padding: 0px;
}
}
/* =========================================================================*/
/* DEV - COMMON.CSS - Le CSS placé ici sera appliqué à tous les habillages. */
/* avoid impacts of parser DIV added in latest MW version */
/* .mw-parser-output { display: inline; } */
/* Default Schneider Electric web font - to be moved to style.less*/
@font-face{
    font-family:'Arial Rounded MT Std';
    src:url("/webfonts/ArialRoundedMTStd.otf");
}
@font-face{
    font-family:'Arial Rounded MT Std Light';
    src:url("/webfonts/ArialRoundedMTStd-Light.otf");
}
@font-face{
    font-family:'Arial Rounded MT Std Bold';
    src:url("/webfonts/ArialRoundedMTStd-Bold.otf");
}
/* version Emmanuel
@font-face {
  font-family: 'se-icon';
  src: url('/webfonts/se-icon.eot?') format('embedded-opentype'),
      url('/webfonts/se-icon.woff') format('woff'),
      url('/webfonts/se-icon.woff2') format('woff2'),
      url('/webfonts/se-icon.ttf') format('truetype'),
      url('/webfonts/se-icon.svg') format('svg');
}
*/
/* SE-ICONS  -  css récupéré dans l'outil de sélection de se-icon */
@font-face {
  font-family: "se-icon";
  src: url("/webfonts/se-icon.eot");
  src: url("/webfonts/se-icon.eot?#iefix") format("embedded-opentype"), url("/webfonts/se-icon.woff") format("woff"), url("/webfonts/se-icon.ttf") format("truetype"), url("/webfonts/se-icon.svg#se-icon") format("svg");
  font-weight: normal;
  font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "se-icon";
    src: url("/webfonts/se-icon.svg#se-icon") format("svg"); } }
[class*="se-icon"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "se-icon";
  speak: none;
  font-style: normal;
  line-height: 1;
  position: relative;
  top: 1px;
  display: inline-block;
  font-size: 24px;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  font-stretch: normal;
  text-transform: none;
  font-size: inherit;
  text-rendering: auto;
  /* Better Font Rendering =========== */
  font-smoothing: antialiased;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-display: block; }
.se-icon-action_share:before {
  content: ""; }
.se-icon-arrow2_down:before {
  content: ""; }
.se-icon-communication_bubbles3:before {
  content: ""; }
.se-icon-action_download_stroke:before {
  content: ""; }
.se-icon-open_book:before {
  content: ""; }
.se-icon-solar_panel1:before {
  content: ""; }
.se-icon-action_search_stroke:before {
  content: ""; }
.se-icon-action_search:before {
  content: ""; }
/* =======================================================  */
body { font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif; color:#434343;}  /* when moving to style.less, replace fixed color value by variable */
/* ================= Links =====================
/* kept for memory, for now, while testing mixin added in style.less
a, a:link, a:visited, a.new:link, a.new:visited, a.external:link, a.external:visited {
color: #0087cd;
}
a:hover, a:focus, a:visited:hover, a:visited:focus, a.new:hover, a.new:focus, a.external:hover, a.external:focus  {
color: #219bfd;
}
a:active, a.new:active, a.external:active {
color: #b10043;
}
*/
/* =========== Breadcrumbs =============*/
.sbl-breadcrumb-bootstrap, .sbl-breadcrumb-bootstrap a, .sbl-breadcrumb-slash-location  { color: #9fa0a4; background-color: white; font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif; font-size: 12px; }
.sbl-breadcrumb-bootstrap a:hover  { color: #219bfd; }
#sbl-breadcrumbs {position:absolute;top:-8px;padding:0px;display:block;overflow:hidden;text-overflow: ellipsis;height:17px;}
#firstHeading {padding-top: 64px;padding-bottom:32px;margin: 0 0 .2em;}
@media only screen and (max-width: 767px) {
#sbl-breadcrumbs {display: none;}
#firstHeading { padding-top: 20px; }
}
/* ============ Content ==============*/
.mw-body {
/* padding: 0px;  */
}
p {
    margin: 0.6em 0;
}
pre {
    margin: 10px 0;
}
.mw-body ol, .mw-body ul {
margin: 0.2em 0 0 1em;
padding-left: 0;
}
.mw-body ul {
list-style: outside disc url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%2214%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%229%22%20r%3D%223%22%20fill%3D%22%23cbcbcb%22/%3E%3C/svg%3E");
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAJCAYAAAARml2dAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABUSURBVAiZdY4xDsAgFELB2J0DdnbwQI5OHvDfgC62SY0yvhAetI1dWEq5JN0kKwDYbhEx8oT9a5JdEtLb/M2QNW0FAJLttkLbLUfEkIRVztPdo+MBm8UkW9Zxc20AAAAASUVORK5CYII=") \9;
}
.mw-body li {
    margin-bottom: .1em;
    padding-left: 0.5em;
}
.mw-body ul ul ul, .mw-body ol ol ul, .mw-body ul ol ul, .mw-body ol ul ul, .mw-body dl dl ul {
  list-style: none;
}
.mw-body ul ul ul li:before, .mw-body ol ol ul li:before, .mw-body ul ol ul li:before, .mw-body ol ul ul li:before, .mw-body dl dl ul li:before  {
  content: '\2013';
  position: absolute;
  margin-left: -1.3em;
}
.mw-content-ltr dd, .mw-content-rtl .mw-content-ltr dd {
    margin-left: 1em;
    padding-left: 0.5em;
}
/* ============ titles h1, h2 ... ==============*/
h1 { font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif; font-size: 32px;}
.firstHeading {border-bottom: 1px solid #cbcbcb;}
.firstHeading .titleicon {vertical-align: text-top; margin-right:0.4em;}  /* First heading icons */
h1, h2, h3 { color:#000}
h4, h5 { color:#333333;}
h3, h4, h5 { font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;}
h2 { font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif; font-size: 24px; padding-bottom: 0.4em; border-bottom: 1px solid #cbcbcb; }
h3 { font-size: 18px}
h4, h5 { font-size: 14px}
h1,h2,h3,h4,h5 {margin-top: 1.6em; margin-bottom: 0.8em;}
/* ============ Sidemenu  -  transféré dans css de l'extension  ==============*/
/* ============ end of Sidemenu ========================================================================*/
/* ============ Table ==============*/
.table-title+table.wikitable > tr > th, .table-title+table.wikitable > * > tr > th {background-color: #9ee6ab;color:black;text-align:left; border-color: #f9f9f9;padding: 0.4em 0.6em; vertical-align:top;}
table.wikitable > tr > td.table_title_level_1, table.wikitable > * > tr > td.table_title_level_1 {background-color: #cbcbcb!important; }
table.wikitable > tr > td.table_title_level_2, table.wikitable > * > tr > td.table_title_level_2 {background-color: #ededed!important; border-color: #9fa0a4!important; }
.table-title+table.wikitable > tr > td, .table-title+table.wikitable > * > tr > td {background-color: white; border-color: #9fa0a4; padding-left:0.6em; padding-right:0.6em; }
/* adjust the "external" borders around the table, for headers, normal cells, and for sub-headers */
.table-title+table.wikitable > * > tr > th:first-child { border-left-color: #9ee6ab; }
.table-title+table.wikitable > * > tr > td:first-child, .table-title+table.wikitable > * > tr > td.table_title_level_1:first-child, .table-title+table.wikitable > * > tr > td.table_title_level_2:first-child { border-left-color: #9fa0a4; }
.table-title+table.wikitable > * > tr > th:last-child { border-right-color: #9fa0a4; }
.table-title+table.wikitable > * > tr > td:last-child, .table-title+table.wikitable > * > tr > td.table_title_level_1:last-child, .table-title+table.wikitable > * > tr > td.table_title_level_2:last-child { border-right-color: #9fa0a4; }
.table-title+table.wikitable > * > tr:first-child > th, .table-title+table.wikitable > * > tr:first-child > td {
    border-top-color: #9ee6ab;
}
/*  add shadow, change top and bottom margins, change font size to 12px (same as wiki PROD), table caption font weight to standard, and text color back to initial */
.table-title+table.wikitable {
box-shadow: 3px 3px 3px -1px rgba(159,160,164,0.4);
margin: 32px 0 32px;
font-size: 12px;
color: inherit;
border: none;
box-sizing: content-box;
}
/* table title (no more integrated as table caption, but a div before the table */
.table-title {margin-top: 32px; margin-bottom: -24px; }
span.title-num {font-weight: bold; }
/* span.title-sep::before {content: "\00a0\002013\00a0"; }    no more needed, added the dash in the html rather than css */
/* specific case of table legends, created with template tb-legend */
.table-title.no-title+table.wikitable {
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0 5px;
    background-color: #fff;
}
.table-title.no-title+table.wikitable td {
    border: none;
}
.legend-white {
border: 1px solid #9fa0a4!important;
}
/* table notes */
.tb-notes {font-size: 12px; margin-top: -20px; margin-left: 5px; margin-bottom: 32px;}
.tb-txt-notes ul {
list-style: none;
    margin-left: 1px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid #9fe6ac;
}
.tb-ref-notes {
    margin-top: 12px;
}
/* Enable custom list style types like lower-alpha (copied from wikipedia) */
div.reflist ol.references {
list-style-type: inherit; /* Enable custom list style types */
}
/* Format reference tooltips and table notes on mouseover - commented - styling done in ReferenceTooltip.css
.referencetooltip > li {
    background: #def;
    border: 1px solid #219bfd;
    -webkit-box-shadow: 0 0 10px rgba(0,135,205,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,135,205,0.4);
    box-shadow: 0 0 10px rgba(0,135,205,0.4);
}
ol.references li:target, .RTTarget {
    background-color: #d7edff;
}
.referencetooltip > li + li {
    border-top-color: #219bfd;
}
.referencetooltip > li + li::after {
    border-top-color: #d7edff;
}
.referencetooltip.RTflipped > li + li {
    border-bottom-color: #219bfd;
}
.referencetooltip.RTflipped > li + li::after {
    border-bottom-color: #d7edff;
}
.RTflipped {
padding-top: 11px;
}
*/
/* table vertical align */
td {vertical-align: top;}
/* no border for empty cells */
.ns-0 table {empty-cells: hide;}
/* font-size for footnotes */
h2.footnotes-intro + .mw-references-wrap { font-size: 90%; }
/* ==================== responsive tables ===================== */
@media only screen and (max-width: 1024px) {
    /* modify look of table scrollbar, when table is too large for screen (mobile) and has its own horiz scrollbar */
    table::-webkit-scrollbar { height: 5px; }
    table::-webkit-scrollbar-thumb { background-color: #333333; }
    table::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }
    /* ============== images in tables ================ */
    .table-title+table.wikitable td a img {
        max-width: 30vw;
        height: auto;
    }
   
}
/* for each "standardized" table width (class .cols-2 ... 5), apply responsive CSS if screen size below max width, and standard max-width table CSS if screen is larger */
/* WARNING : might not be OK as it does not take into account if navigation menu is visible or not ... */
/* === .cols-2 === */
@media only screen and (max-width: 340px) {
.table-title.cols-2+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 341px) {
.table-title.cols-2 + table {
    max-width: 340px;
}
}
/* === .cols-3 === */
@media only screen and (max-width: 510px) {
.table-title.cols-3+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 511px) {
.table-title.cols-3+table {
    max-width: 510px;
}
}
/* === .cols-4 === */
@media only screen and (max-width: 680px) {
.table-title.cols-4+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 681px) {
.table-title.cols-4+table {
    max-width: 680px;
}
}
/* === .cols-5 === */
@media only screen and (max-width: 850px) {
.table-title.cols-5+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 851px) {
.table-title.cols-5+table {
    max-width: 850px;
}
}
/* highlights */
.hl-box {
    margin-top: 32px;
    margin-bottom: 32px;
    background: #F7F7F7;
    border-left: 3px solid #3DCD58;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 15px;
    width: 100%;
    border-radius: 0;
    padding: 16px;
}
/* local specific contents */
.local-specific-section {
/*    margin-left: -15px;            */
/*    padding: 3px 0px 3px 10px;    */
/*    border-left:5px solid #c96fff; */
    margin-left: -15px;
    margin-right: -15px;
    padding: 3px 15px;
    background-color: #f2edfe;
}
.local-specific-text {
    background-color: #f2edfe;
    padding: 2px 3px;
}
.local-specific {
    background-color: #f2edfe!important;
}
/* test ajout icône dans la marge
.local-specific-text:before, .local-specific-section:before {
    content: "\F1E2";
    font-family: "se-icon";
    font-size: 20px;
    position: absolute;
    left: -25px;
    margin-top: -5px;
    color: rgba(165, 111, 255, 1);
}
*/
/* ============== page TOC (generated by mediawiki) ================ */
#toc {
    display: table;
    padding: 16px;
    background-color: #f7f7f7;
    border-radius: 0;
    margin-top: 32px;
    margin-bottom: 32px;
}
#toc h2 {
    display: inline;
    font-size: 20px;
    border: none;
    color: #333333;
}
/*  span.toctext, #toc li a {  */
#toc ul {
margin-left:0;
margin-top:15px;
}
#toc li {
padding-left:0;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
#toc .tocnumber { display: none; }
/* ============== images with titles ('figures') ================ */
.img_anchor {
    margin-top: 32px;
    margin-bottom: 32px;
}
.thumbinner {
    background-color: white;
    border: none;
    padding: 0px;
    box-sizing: content-box;
    border-radius: 0;
}
.thumbinner { max-width:100%; }
.thumbcaption {
    border: none;
    background-color: #ededed;
    color: #434343;
    padding: 0px;
}
.thumbcaption p {margin:0;}
.thumbinner > img, .thumbinner a > img {
    border: 1px solid #ededed;
    border-bottom: none;
    background-color: white;
    max-width: calc(100% - 2px);
}
.figure-title {
    padding: 10px;
}
.figure-notes {
    font-size: 12px;
    border: 1px solid #ededed;
    border-top: none;
    padding: 10px 18px;
    background-color: white;
}
/*=================== new gallery ===============*/
.EIG-gallery {
    margin-left: -4px;
    margin-top: 30px;
}
.gallery-title { padding: 0 0 5px 6px; }
.EIG-gallery ul.gallery {
    margin: 2px;
    padding: 2px;
    display: block;
}
.EIG-gallery li.gallerybox {
margin-bottom: 10px;
padding-left: 0;
max-width: 100%;
}
.EIG-gallery li.gallerybox > div {
    max-width: 100%;
}
.EIG-gallery li.gallerybox div.thumb {
    border: 1px solid #ededed;
    background-color: white;
    max-width: calc(100% - 5px);
}
.EIG-gallery li.gallerybox div.thumb img {
    max-width: calc(100% - 10px);
}
.EIG-gallery li.gallerybox div.gallerytext {
    font-size: 12px;
    padding: 0;
    word-wrap: break-word;
    background-color: #ededed;
    margin: -2px 3px 0 2px;
/*    min-height: 55px;  */
}
.EIG-gallery div.gallerytext p { margin: 5px 0 5px; padding: 5px 10px;}
/* ============ math formulas ==============*/
.mwe-math-element { margin: 0 7px; }
/* Video embedded as a float right */
.video-float-right {
float:right;
margin-left:20px;
margin-bottom:20px;
padding:0;
}
/* Video embedded as a float left */
.video-float-left {
float:left;
margin-right:20px;
margin-bottom:20px;
padding:0;
}
.clearfix {clear: both;}
/* ================ CSS specific to Home Page (HP)  -  merged between Dokit css and my css =========================================================================== */
.eig-main-page .contentHeader {
    display: none;
}
.eig-main-page #content {
    margin-top: 0;
}
.eig-main-page .containerBodyWithoutSS > .container {
    max-width: none;
}
.eig-main-page .mw-body {
    padding: 0;
}
.eig-main-page div.patrollink {
    max-width: 1170px;
    margin: auto;
    margin-top: 20px;
}
/******************************
* HP  -  Carousel  -  Merged
*****************************/
.hp-slider {
    margin-top:-1px;
}
.hp-slider ol.carousel-indicators {
    width: 100%;
    left: auto;
    margin: auto;
    text-align: center;
    bottom: 5px;
    padding-left: 0;
}
/* commented, seems unneeded
.hp-slider .carousel {
    border: none;
}
*/
.hp-slider .carousel-caption {
    float: left;
    text-align: left;
    padding: 24px;
    max-width: 520px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 10%;
    left:25%;  /*  modifié pour carousel sur toute la largeur de la page */
    right:15%;
    bottom: auto;
}
.hp-slider .carousel-caption h4 {
font-family:'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 2em;
color:inherit;
margin-top: 0;
margin-bottom: 15px;
}
.hp-slider p.text {
    font-size: 1.05em;
    margin-bottom: 1em;
    line-height: 1.5em;
}
.carousel-caption p {
    margin: 0;
}
.hp-slider .carousel-indicators li {
    width: 14px;
    height: 14px;
    background-color: #e6e6e6;
    -webkit-transition: opacity 200ms cubic-bezier(0.19,1,0.22,1);
    transition: opacity 200ms cubic-bezier(0.19,1,0.22,1);
    margin:0 1px;
    border: 0px;
}
.hp-slider .carousel-indicators li.active {
    background-color: #3dcd58;
}
.hp-slider .carousel-inner {
    max-height: 300px;
}
.hp-slider .carousel-inner + p {
    margin: 0px;
}
/*****************************************
* HP  -  Blog Post  -  Merged
****************************************/
.hp-blogpost {
    padding-top: 5px;
    padding-bottom: 13px;
    border-bottom: 1px solid #cbcbcb;
}
.hp-blogpost .btn {
    float: left;
    font-size: 16px;
    max-width: 230px;
margin-top: 10px;
    padding: 5px 12px 5px 38px;
background-image: url("extensions/DokitSchneider/img/ICON_BLOG_ALPHA75_24.png");
background-position: 6px 4px;
    background-size: 24px;
    background-repeat: no-repeat;
}
.hp-blogpost .btn-info:hover, .hp-blogpost .btn-info a:hover, .hp-blogpost .btn-info a.new:visited:hover, .hp-blogpost .btn-info a:visited:hover {
    background-color: #0087cd;
    border-color: #0087cd;
}
.hp-blogpost dl {
    float: left;
    width: calc(100% - 245px);    /* should be ok for other languages - tested in FR  */
    margin-left: 15px;
    margin-bottom: 0;
    margin-top: -2px;
}
.mw-body .hp-blogpost .plainlinks a {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    float: left;
    vertical-align: baseline;
color: #3dcd58;
font-size: 15px;
}
.blog-author {
    float: left;
    margin: 0px 15px;
    color:#505559;    /* Joost reco */
    font-size: 15px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
/*********************
* HP - Intro
*********************/
.intro-section h1 {        /*  Joost reco  */
    font-size: 32px;
color: #000;
margin-bottom: 20px;
}
.intro-section .intro-description, .chapter-section .subtitle {    /*  Joost reco  */
font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 18px;
    color: #333333;
}
.intro-section {
    margin-top: 44px;    /*  in total, vertical space (below blog border) OK vs reco Joost - replace by 24px if no blog border  */
}
.intro-description a {
    display: inline-block;    /* ensure that the link "Read more ..." is never broken between 2 lines  */
}
/*********************
* HP - Table of Contents  -  css reviewed/merged according to my version of TOC (internal links, not external links as in Dokit version)
*********************/
.chapter-section {
    margin-top: 20px;
}
.chapter-section h3, .book-section h3, .highlight-section-block h3, .help-section h3 {    /* copied from isee-eig  -  chameleon.css  */
    text-align: left;
    font-family: "Arial Rounded MT Std",Helvetica,Verdana,sans-serif;
    font-size: 24px;
}
.chapter-section h3 {
font-size: 28px;
color: #3dcd58;
}
.chapter-section .subtitle {
    text-align: left;
    margin: 20px 0;
    font-size: 18px;    /*  responsive size to check ....  */
color: #333333;
}
.hp-chapter {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    float: left;
    width: 100%;
    margin-bottom: 2em;
    border-left: 5px solid #3dcd58;
}
.hp-chapter:hover {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.hp-chapter:hover h4 span {
    color: #219bfd;
    text-decoration: underline;
}
.hp-chapter > a {
float:left;
width:96px;
    height: 91px;
    padding-top: 15px;
}
.hp-chapter-img {margin: auto; display:block; }
.hp-chapter h4 {
margin:0;
padding: 0 15px 0 0;
    float: left;
    line-height: 21px;
width: calc(100% - 96px);
font-family:'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
font-size: 16px;
}
.hp-chapter-letter {font-weight: bold;}
.mw-body .hp-chapter h4 a {
color:#333333;
padding: 15px 0 13px;
display:block;
}
.mw-body .hp-chapter h4 a:hover, .mw-body .hp-chapter h4 a:focus {color:#219bfd;}  /*  color as per Joost reco  */
/* added in case a chapter title would take more than 3 lines, to hide the text overflow  */
/* to be tested again when migrating German wiki, as titles are normally quite long  */
.mw-body .hp-chapter h4 a > span {
    height: 63px;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*********************
* Book section block  -  Merged
*********************/
.book-section {
    background-image: url('extensions/DokitSchneider/img/hp-book-bg.png');
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: 10px;
    padding: 0 30px 10px 30px;
}
.book-section h3 {
margin-top: 20px;
margin-bottom: 20px;
color: #333333;
padding-top: 120px;
}
.book-section-text {
padding: 0 15px;
}
.book-section .subtitle {
margin: 0 0 20px;
font-size: 15px;
font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
color:#333333;
}
.book-section-img {
    text-align: center;
}
/*************************
* Highlight section block  (no merging here as it did not exist as such in Dokit css - was "help-section-left" in Dokit homepage)
*************************/
.highlight-section {
    margin-top: 64px;
}
.highlight-section p {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
.highlight-section-block {
    padding: 0 30px;
    max-width: 585px;
}
.highlight-section-block .subtitle {
    text-align: left;
    font-size: 16px;
    color: #3dcd58;
    margin: 0 0 10px;
}
.highlight-section-block:nth-child(odd) {
border-right: 1px solid #cbcbcb;
}
.highlight-section-block h3 {
    margin: 0 0 25px;
    color: #333333;
}
.highlight-section-block img {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
.highlight-section-block a {
    font-family: "Arial Rounded Mt Std",Helvetica,Verdana,sans-serif;
/*    color: #219bfd;    a priori pas utile  */
}
.highlight-link {margin-top: 15px;}
/*******************************
* Help section block  -  Merged
*******************************/
.help-section { margin-top: 64px;}
.help-section .row { background-color: #f7f7f7; }
.help-section h3 { margin-top: 0; color:#fff; }
.help-section-text {
    color: #fff;
    background-color: #626469;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    padding: 30px;
}
.help-section-action {
    text-align: center;
    padding: 30px 15px 20px;
}
.help-section-action a, .help-section-action a.new {
    color: #333333;
}
.help-section-action a:hover, .help-section-action a.new:hover {
    color: #219bfd;
}
.help-section-action h4 {
font-size: 16px;
margin-top: 15px;
color: inherit;
}
.help-section-action p {
margin:0;
font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
/*******************************
* Other languages section
*******************************/
.lang-section {
    padding: 0 30px;
margin-top: 64px;
}
.lang-section.container h3 {
    font-size: 24px;
    font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
    margin-top: 0;
}
.hp-lang {
    padding: 15px;
    background-color: #f7f7f7;
}
.hp-lang:hover, .hp-lang:hover h4 {
    background-color: #e6e6e6;  /* Super Light Grey */
}
.hp-lang h4 {
    padding: 15px;
    background-color: inherit;
    color: #333333;
    margin: 0;
    text-align: center;
    font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
    font-size: 20px;
}
.lang-section .subtitle {
    font-size: 15px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    color: #333333;
}
.lang-section.container h3:before {
    content: "\F1E2";
    font-family: "se-icon";
    font-size: 32px;
    vertical-align: sub;
    padding-right: 10px;
    margin-left: -4px;
    color: #9fa0a4;
}
.lang-section .row > div {
    margin-top: 10px;
}
.hp-lang a:hover {
    text-decoration: none;
}
@media (max-width: 767px) {
.lang-section {
    padding: 0;
}
}
/*********************
* Tablet style  -  from Dokit  -  only HomePage parts  -  to be merged with mine
*********************/
/*  commented for now  -  check if useful to do something, like smaller icon size + larger space for title + smaller font, possibly
    also keep in mind that I re-used class .hp-chapter-img but it is different than in Dokit version of chapter TOC
    so ALL css related to .hp-chapter-img MUST BE REVIEWED
@media (max-width: 1200px) {
.hp-chapter-img {
    width: 87px;
    padding: 15px 10px !important;
    height: 90px;
    }
.hp-chapter h4 {
    width: calc(100% - 88px);
    font-size: 16px;
    padding-top: 23px;
    max-height: 75px;
    overflow: hidden;
    }
}
*/
/*********************
* Mobile style  -  merged
*********************/
@media (max-width: 991px) {
.book-section {
    background-repeat: repeat;
    padding-top: 25px;
}
.book-section h3 {
    padding-top: 15px;
}
.book-section-img img {
    max-width: 100%;
    height: auto;
}
.hp-slider p.text {
display: none;
}
}
@media (max-width: 767px) {
.intro-section {
    margin-top: 24px;
}
.intro-section h1 {
    font-size: 28px;
}
.chapter-section h3 {
    font-size: 24px;
}
.intro-section .intro-description, .chapter-section .subtitle {
    font-size: 16px;
}
.book-section {
    margin-top: 50px;
}
.book-section h3 {
    padding-top: 0px;
}
.book-section-text {
    padding: 0;
}
.book-section-img {
    margin-top: 30px;
    padding-left: 50px;
}
.highlight-section-block {
    padding: 24px 15px;
}
.highlight-section-block:nth-child(odd) {
border-right: none;
border-bottom: 1px solid #cbcbcb;
}
}
@media (max-width: 768px) {
.hp-slider, .hp-blogpost {
    display: none;
}
.p-tb.navbar { display:none; }
}
@media (max-width: 360px) {
.hp-chapter > a {
width:80px;
    height: 75px;
    padding-top: 18px;
}
.hp-chapter img {
    width: 65%;
    height: auto;
}
.hp-chapter h4 {
    width: calc(100% - 80px);
    font-size: 14px;
}
.book-section-img {
    padding-left: 0;
}
li.previous a, li.next a {
    height: 132px;
    width: 132px;
    padding-top: 80px;
    font-size: 16px;
}
}
@media (max-width: 319px) {
.hp-chapter h4 {
    font-size: 12px;
}
}
/*****************************************************************************************
* ajustements UI mediawiki  vs  chameleon qui impose "box-sizing = border-box" par défaut 
****************************************************************************************/
.wikiEditor-ui {
    box-sizing: content-box;
}
/*****************************************************************************************
* ajustements look&feel pages spéciales 
****************************************************************************************/
.ns--1 #firstHeading {
    padding-top: 20px;
}
/* make "new" links appear in red in special namespace */
body.ns--1 a.new {
    color: #b10043;
}
.action-edit #share-prev-next {
    display: none;
}
/* ============ CSS for chapter TOC pages ==============*/
#chapter-toc { padding: 0 15px 15px; background-color: #f9f9f9; }
#chapter-toc h2 { margin-top: 0; }
#chapter-toc > ul { list-style: none; padding: 0; margin-left:0; }
#chapter-toc > ul > li { font-size: 18px; padding: 0.8em 0 0; font-family:'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;}
#chapter-toc a {color: #333333;}
#chapter-toc > ul ul { padding: 0.2em 0 0.2em 0.3em; }
#chapter-toc > ul ul li { font-size: 14px; }
#chapter-toc ul ul a { color: #626469; font-family:'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;}
#chapter-toc a:hover { color: #219bfd; }
/* commented for now - test other chapter toc intro format
body.Chapter-TOC h1.firstHeading, body.Chapter-TOC #sbl-breadcrumbs { display:none; }
*/
.chapter-toc-title {
margin: 48px 0 16px;
}
.chapter-toc-chapter {
    color: #3dcd58;
}
.chapter-banner-img {
    max-width: 100%;
    height: auto;
}
.chapter-banner + .hl-box {
    margin-top: 0;
    border:none;
}
/* TOC toggle (show-hide) in page tocs */
.toctoggle {
    float: right;
    padding-left: 10px;
}
/* Hide Share and Prev-Next when editing a page */
.action-edit #share-prev-next, .ve-active #share-prev-next {
display: none;
}
/* Tables "squares" to show functions and options */
.tb-squares {
    font-size: 15px;
    line-height: 17px;
}
/* figure number format, in texts like "see Fig. xxx" */
.FigRef {
    font-weight: bold;
}
/* Hide category links in namespace 0 */
.ns-0 #catlinks {
    display: none;
}
/*===========================================================================*/
/* Adjustments to UI elements that are not OK vs skin Chameleon and MW 1.31 */
/* Correction of bug in Chameleon skin */
@media (min-width: 1024px) {
.skin-chameleon .navbar-tools > li, .skin-chameleon .navbar-tools li.open {
    float: none;
}
}
.mw-echo-ui-crossWikiUnreadFilterWidget-subtitle {
    display: block!important;
}
/* pb in advanced search options format, because chameleon uses .mw-body ul, which takes precedence over .search-types ul */
.mw-body .search-types ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* position of notifications when watching / unwatching pages */
.mw-notification-area { position: fixed; top: 100px; }
/* add "video" capsule at the end of a page title */
/* in pages including a video, and in search results */
.vd0 #firstHeading:after, .mw-search-results a[title*=Eig-pages-with-video]+a:after {
    content: "video";
    display: inline-block;
    font-family: Arial;
    font-size: 9px;
    color: #fff;
    background-color: #9fa0a4;
    padding: 2px 4px;
    border-radius: 3px;
    position: relative;
    top: -17px;
    left: 4px;
}
.mw-search-results a[title*=Eig-pages-with-video]+a:after {
    top: -7px;
}
/* hide the VIDEO TitleIcon (replaced by capsule after page title) */
#firstHeading img[src*=media_player], .mw-search-results a[title*=Eig-pages-with-video] { display: none; }
/* Search results - adjust look&feel */
.mw-body .mw-search-results { max-width: 50em; padding: 0; margin:0;}
.searchresult { max-width: 40em; }
.searchalttitle { display:none; }
.mw-search-results .titleicon { margin-right:0.3em;}
/* Create account form - adjust for captcha size */
div#userloginForm form, div#userlogin form#userlogin2 {min-width: 302px;}
/* editorial pages */
.mw-parser-output .helpContents-section {
    position: relative;
    margin: 1em 0;
    padding-left: 65px;
    padding-right: 30px;
}
.mw-parser-output .helpContents-icon {
    position: absolute;
    left: 0;
    line-height: 1;
}
.mw-parser-output .helpContents-section h2 {
    font-size: 21px;
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    line-height: 1.5;
}
/* related guides blocks - chapter landing pages */
.related-guide {
    padding: 20px 0;
}
.related-guide+.related-guide {
    border-top: 1px solid #e6e6e6;
}
h2+.related-guide {
    margin-top: -10px;
}
.related-guide-image {
    display: table-cell;
    width: 140px;
}
.related-guide-image:hover {
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.related-guide-details {
    display: table-cell;
    vertical-align: top;
    padding-left: 15px;
}
.related-guide-title {font-family: Arial Rounded MT Std Bold; font-size: 16px; margin-bottom: 0.6em; }
@media (max-width: 360px) {
.related-guide-details {
    display: block;
    padding: 16px 0 0;
}
}

Dernière version du 30 juin 2022 à 15:55