Actions

MediaWiki

Common.css : Différence entre versions

De erg

 
(107 révisions intermédiaires par 8 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
/* Le CSS placé ici sera appliqué à tous les habillages. */
+
/* C O M M O N . c s s
.rssicon {
+
*
display: inline-block;
+
* # dark mode
width: 32px;
+
* # templates
height: 32px;
+
* ## badges
background-image: url(/mw/resources/assets/Feed-icon.png);
+
 
 +
/* une media query qui permet de prendre en compte la préférence de couleur du navigateur.  
 +
Tout ce qui est en dehors de cette @media est pour le thème blanc et dans le @media (prefers-color-scheme: dark)  */
 +
 
 +
/* Liste des éléments à inverser
 +
* div.thumbcaption /* image "thumb"
 +
* button.button.search /* lien externes
 +
* a.external.free /* lien externes
 +
* table.wikitable /* Table wiki ex : En construction Pika
 +
*/
 +
 
 +
/*
 +
@media (prefers-color-scheme: dark) {
 +
 
 +
.page-Bienvenue_à_l’erg h1 {
 +
display:inline=block;
 +
color:red !important;
 
}
 
}
 +
code {
 +
    background-color: #111;
 +
    border-radius: 4px;
 +
    border: 2px solid #666;
 +
    color: #999;
 +
    font-size: .9em; 
 +
}
 +
.title {
 +
    color: #9557b5;
 +
}
 +
.mw-headline {
 +
    color: #3c856b;
 +
}
 +
body.action-view #page-content a {
 +
color: white;
 +
}
 +
  html {
 +
    background-color: #222;
 +
    background-color: #222;
 +
    color: white;
 +
  }     
 +
  body{.
 +
    background-color:inherit;
 +
    color:inherit;
 +
    background: #222;
 +
  }
 +
  }
  
.hidden {
+
*/
 +
  pre{
 +
 
 +
    border-radius: 10px;
 +
  }
 +
  .rssicon {
 +
    display: inline-block;
 +
    width: 32px;
 +
    height: 32px;
 +
    background-image: url(/mw/resources/assets/Feed-icon.png);
 +
  }
 +
 
 +
 
 +
 
 +
  .hidden {
 
     display: none;
 
     display: none;
 +
  }
 +
 +
  table.infobox {
 +
    width: 30em;
 +
    font-size: 90%;
 +
    border: 1px solid #aaaaaa;
 +
    background-color: #f9f9f9;
 +
    color: black;
 +
    margin-bottom: 0.5em;
 +
    margin-left: 1em;
 +
    padding: 0.2em;
 +
    float: right;
 +
    clear: right;
 +
    text-align:left;
 +
  }
 +
 +
  table.infobox th.head {
 +
    text-align: center;
 +
    background-color:#ccccff;
 +
  }
 +
 +
  /* Flexgal */
 +
  div.flexgal {
 +
    box-sizing: border-box;
 +
    margin: 0;
 +
    padding: 0;
 +
  }
 +
 +
  div.flexgal div.item {
 +
    display: flexbox;
 +
  }
 +
  div.flexgal div.item p {
 +
    margin: 0;
 +
    padding: 0; /* padding + margin seem to conflict with the grid layout */
 +
  }
 +
  a img {
 +
    border: none;
 +
    vertical-align: top; /* magically this cancels the containing anchor's bottom border */
 +
  }
 +
 +
  div.pubdate {
 +
    clear: both;
 +
  }
 +
 +
  .Media {
 +
    display: flex;
 +
    align-items: flex-start;
 +
    margin-bottom: 1em;
 +
  }
 +
 +
  .Media-figure {
 +
    margin-right: 1em;
 +
  }
 +
 +
  .Media-body {
 +
    flex: 1;
 +
  }
 +
 +
  /* simplify the footer links */
 +
  ul#poweredby, li#footer-disclaimer { display: none; }
 +
 +
  .snowflake {
 +
    position:absolute;
 +
    color:blue;
 +
    transition: top 5s linear;
 +
    -webkit-text-stroke-width: 1px;
 +
    -webkit-text-stroke-color: rgba(0,0,0,0.01);
 +
  }
 +
 +
  #content {
 +
    max-width: 80ch;
 +
    margin: auto;
 +
  }
 +
 +
 +
  /* -- External Image Template -- */
 +
  .externalimage-holder {
 +
    display:inline-block;
 +
    position: relative;
 +
  }
 +
  .externalimage-holder img {
 +
    width: 100%;
 +
    height: auto;
 +
  }
 +
 +
  /* -- Captcha Page Edition -- */
 +
  label[for=wpCaptchaWord] {
 +
    background-color:#FFCCCB;
 +
    color:white;
 +
    border:2px solid white;
 +
  }
 +
 +
/* -- Badges -- */
 +
.badge {
 +
margin:10px;
 +
display:inline-block;
 +
box-sizing:border-box;
 +
padding:0;
 +
margin:0;
 +
 +
border:2px solid red;
 +
width:300px;
 +
height:75px;
 +
 +
overflow:hidden;
 
}
 
}
  
table.infobox {
+
.badge p {
  width: 30em;
+
margin:0;
  font-size: 90%;
+
text-align:center;
  border: 1px solid #aaaaaa;
+
 
  background-color: #f9f9f9;
+
   font-size: 8pt;
  color: black;
+
   line-height: 9pt;
  margin-bottom: 0.5em;
 
  margin-left: 1em;
 
  padding: 0.2em;
 
  float: right;
 
   clear: right;
 
   text-align:left;
 
 
}
 
}
  
table.infobox th.head {
+
.badge .b-icon {
  text-align: center;
+
padding:5px;
  background-color:#ccccff;
+
border-right:1px solid black;
 +
position:relative;
 +
display:inline-block;
 +
width:25%;
 +
height:100%;
 +
 
 +
vertical-align:top;
 
}
 
}
  
/* Flexgal */
+
.badge .b-infos {
div.flexgal {
+
position:relative;
  box-sizing: border-box;
+
display:inline-block;
  margin: 0; padding: 0;
+
width:70%;
 
}
 
}
  
div.flexgal div.item {
+
.badge h6 {
}
+
text-align:center;
div.flexgal div.item p {
+
margin:0;
  margin: 0;
+
padding:0;
  padding: 0; /* padding + margin seem to conflict with the grid layout */
 
}
 
a img {
 
  border: none;
 
  vertical-align: top; /* magically this cancels the containing anchor's bottom border */
 
 
}
 
}
  
div.pubdate {
+
#content li:not(#toc ul li) {list-style: none; margin-bottom: 10px; position: relative; }
  clear: both;
+
#content li:not(#toc ul li)::before {content: "\22C6 \00a0"; }
}
+
#toc {z-index: 100;}

Version actuelle datée du 2 février 2024 à 16:49

/* C O M M O N . c s s
 *
 * # dark mode
 * # templates
 * ## badges

/* une media query qui permet de prendre en compte la préférence de couleur du navigateur. 
Tout ce qui est en dehors de cette @media est pour le thème blanc et dans le @media (prefers-color-scheme: dark)  */

/* Liste des éléments à inverser
* div.thumbcaption /* image "thumb" 
* button.button.search /* lien externes 
* a.external.free /* lien externes 
* table.wikitable /* Table wiki ex : En construction Pika
*/

/*
@media (prefers-color-scheme: dark) {

.page-Bienvenue_à_l’erg h1 {
display:inline=block;
color:red !important;
}
code {
    background-color: #111;
    border-radius: 4px;
    border: 2px solid #666;
    color: #999;
    font-size: .9em;  
}
.title {
    color: #9557b5;
}
.mw-headline {
    color: #3c856b;
}
body.action-view #page-content a {
color: white;
}
  html {
    background-color: #222;
    background-color: #222;
    color: white;
  }      
  body{.
    background-color:inherit;
    color:inherit;
    background: #222;
  }
  } 

*/
  pre{

    border-radius: 10px;
  }
  .rssicon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(/mw/resources/assets/Feed-icon.png);
  }



  .hidden {
    display: none;
  }

  table.infobox {
    width: 30em;
    font-size: 90%;
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    color: black;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    text-align:left;
  }

  table.infobox th.head {
    text-align: center;
    background-color:#ccccff;
  }

  /* Flexgal */
  div.flexgal {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  div.flexgal div.item {
    display: flexbox;
  }
  div.flexgal div.item p {
    margin: 0;
    padding: 0; /* padding + margin seem to conflict with the grid layout */
  }
  a img {
    border: none;
    vertical-align: top; /* magically this cancels the containing anchor's bottom border */
  }

  div.pubdate {
    clear: both;
  }

  .Media {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
  }

  .Media-figure {
    margin-right: 1em;
  }

  .Media-body {
    flex: 1;
  }

  /* simplify the footer links */
  ul#poweredby, li#footer-disclaimer { display: none; }

  .snowflake {
    position:absolute;
    color:blue;
    transition: top 5s linear;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(0,0,0,0.01);
  }

  #content {
    max-width: 80ch;
    margin: auto;
  }


  /* -- External Image Template -- */
  .externalimage-holder {
    display:inline-block;
    position: relative;
  }
  .externalimage-holder img {
    width: 100%;
    height: auto;
  }

  /* -- Captcha Page Edition -- */
  label[for=wpCaptchaWord] {
    background-color:#FFCCCB;
    color:white;
    border:2px solid white;
  }

/* -- Badges -- */
.badge {
margin:10px;
display:inline-block;
box-sizing:border-box;
padding:0;
margin:0;

border:2px solid red;
width:300px;
height:75px;

overflow:hidden;
}

.badge p {
margin:0;
text-align:center;

  font-size: 8pt;
  line-height: 9pt;
}

.badge .b-icon {
padding:5px;
border-right:1px solid black;
position:relative;
display:inline-block;
width:25%;
height:100%;

vertical-align:top;
}

.badge .b-infos {
position:relative;
display:inline-block;
width:70%;
}

.badge h6 {
text-align:center;
margin:0;
padding:0;
}

#content li:not(#toc ul li) {list-style: none; margin-bottom: 10px; position: relative; }
#content li:not(#toc ul li)::before {content: "\22C6 \00a0"; }
#toc {z-index: 100;}