Common.css : Différence entre versions
De erg
(87 révisions intermédiaires par 6 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
+ | /* 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) { | @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 { | + | |
+ | .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; | |
− | |||
− | |||
} | } | ||
− | + | .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;} | |
− | |||
− | position: | ||
− | |||
− | |||
− | |||
− | |||
− | } | ||
− | |||
− | # | ||
− | |||
− | |||
− | } |
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;}