Common.css : Différence entre versions
De erg
(aa) |
|||
(61 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. | /* une media query qui permet de prendre en compte la préférence de couleur du navigateur. | ||
− | Tout ce qui est en | + | 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; | |
− | |||
− | |||
− | |||
− | color: | ||
− | |||
} | } | ||
− | + | code { | |
− | + | background-color: #111; | |
− | color: | + | 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; | ||
} | } | ||
− | pre{ | + | 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 { | + | 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 { | + | table.infobox th.head { |
− | + | text-align: center; | |
− | + | background-color:#ccccff; | |
− | } | + | } |
− | /* Flexgal */ | + | /* Flexgal */ |
− | div.flexgal { | + | div.flexgal { |
− | + | box-sizing: border-box; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | } | + | } |
− | div.flexgal div.item { | + | div.flexgal div.item { |
− | + | display: flexbox; | |
− | } | + | } |
− | div.flexgal div.item p { | + | div.flexgal div.item p { |
− | + | margin: 0; | |
− | + | padding: 0; /* padding + margin seem to conflict with the grid layout */ | |
− | } | + | } |
− | a img { | + | a img { |
− | + | border: none; | |
− | + | vertical-align: top; /* magically this cancels the containing anchor's bottom border */ | |
− | } | + | } |
− | div.pubdate { | + | div.pubdate { |
− | + | clear: both; | |
− | } | + | } |
− | .Media { | + | .Media { |
− | + | display: flex; | |
− | + | align-items: flex-start; | |
− | + | margin-bottom: 1em; | |
− | } | + | } |
− | .Media-figure { | + | .Media-figure { |
− | + | margin-right: 1em; | |
− | } | + | } |
− | .Media-body { | + | .Media-body { |
− | + | flex: 1; | |
− | } | + | } |
− | /* simplify the footer links */ | + | /* simplify the footer links */ |
− | ul#poweredby, li#footer-disclaimer { display: none; } | + | ul#poweredby, li#footer-disclaimer { display: none; } |
− | .snowflake { | + | .snowflake { |
− | position:absolute; | + | position:absolute; |
− | color:blue; | + | color:blue; |
− | transition: top 5s linear; | + | transition: top 5s linear; |
− | + | -webkit-text-stroke-width: 1px; | |
− | + | -webkit-text-stroke-color: rgba(0,0,0,0.01); | |
− | } | + | } |
− | #content { | + | #content { |
− | max-width: 80ch; | + | max-width: 80ch; |
− | margin: auto; | + | margin: auto; |
− | } | + | } |
− | /* -- External Image Template -- */ | + | /* -- External Image Template -- */ |
− | .externalimage-holder { | + | .externalimage-holder { |
display:inline-block; | display:inline-block; | ||
position: relative; | position: relative; | ||
− | } | + | } |
− | .externalimage-holder img { | + | .externalimage-holder img { |
width: 100%; | width: 100%; | ||
height: auto; | 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;} |
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;}