« MediaWiki:Common.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
Aucun résumé des modifications |
Ajout de correctifs CSS pour les articles hors page d’accueil. |
||
| (47 versions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/*##### | /* BEGIN wikithionville-homepage */ | ||
/* | html { | ||
scroll-behavior: smooth; | |||
} | |||
@media (prefers-reduced-motion: reduce) { | |||
html { | |||
scroll-behavior: auto; | |||
} | |||
} | |||
body.page-Accueil { | |||
--home-accent: #f15234; | |||
--home-accent-2: #edaa7d; | |||
--home-bg: var(--color-surface-0); | |||
--home-text: var(--color-base); | |||
--home-card-bg: var(--color-surface-2); | |||
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-2) 82%, transparent); | |||
--home-card-text: var(--color-emphasized); | |||
--home-card-frame: var(--border-color-base); | |||
--home-border-muted: var(--border-color-subtle); | |||
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-0)); | |||
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent); | |||
--home-hero-text: var(--color-inverted-fixed); | |||
--home-hero-muted: color-mix(in srgb, var(--color-inverted-fixed) 78%, transparent); | |||
--home-hero-surface: rgb(33 38 48 / 82%); | |||
--home-hero-border: rgb(142 26 2 / 60%); | |||
--home-hero-shadow: rgb(0 0 0 / 10%); | |||
--home-hero-title-shadow: 2px 2px 50px rgb(17 17 17); | |||
--home-image-dark-source-filter: none; | |||
--home-image-light-source-filter: var(--filter-invert-fixed); | |||
--home-image-brand-filter: none; | |||
background: var(--home-bg); | |||
} | |||
html.skin-theme-clientpref-night body.page-Accueil { | |||
--home-bg: var(--color-surface-2); | |||
--home-card-bg: var(--color-surface-3); | |||
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-3) 82%, transparent); | |||
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-2)); | |||
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent); | |||
--home-image-dark-source-filter: var(--filter-invert-fixed); | |||
--home-image-light-source-filter: none; | |||
} | |||
@media (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os body.page-Accueil { | |||
--home-bg: var(--color-surface-2); | |||
--home-card-bg: var(--color-surface-3); | |||
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-3) 82%, transparent); | |||
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-2)); | |||
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent); | |||
--home-image-dark-source-filter: var(--filter-invert-fixed); | |||
--home-image-light-source-filter: none; | |||
} | |||
} | |||
body.page-Accueil .citizen-body-container { | |||
display: block; | |||
margin: 0!important; | |||
padding: 0; | |||
} | |||
body.page-Accueil .mw-body, | |||
body.page-Accueil .mw-body-content, | |||
body.page-Accueil .mw-parser-output { | |||
width: 100%; | |||
max-width: none; | |||
margin: 0!important; | |||
padding: 0; | |||
} | |||
body.page-Accueil .mw-body-header, | |||
body.page-Accueil .mw-body-footer, | |||
body.page-Accueil #citizen-body-header-sticky-sentinel, | |||
body.page-Accueil #contentSub, | |||
body.page-Accueil #contentSub2 { | |||
display: none; | |||
} | |||
body.page-Accueil .citizen-page-footer { | |||
display: none; | |||
} | |||
body.page-Accueil .citizen-footer { | |||
margin-top: 0; | |||
} | |||
.home-page h1:not(.home-section--plain-heading *), | |||
.home-page .mw-heading1:not(.home-section--plain-heading *), | |||
.home-page .home-card__title:not(.home-section--plain-heading *), | |||
.home-page .home-stat-card__value:not(.home-section--plain-heading *) { | |||
background: var(--home-accent); | |||
background: linear-gradient( | |||
311deg, | |||
var(--home-accent) 0%, | |||
var(--home-accent-2) 100% | |||
); | |||
background-clip: text; | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
-moz-background-clip: text; | |||
-moz-text-fill-color: transparent; | |||
} | |||
.home-page .home-card__text { | |||
display: -webkit-box; | |||
-webkit-line-clamp: 3; | |||
-webkit-box-orient: vertical; | |||
line-clamp: 3; | |||
} | |||
/* END wikithionville-homepage */ | |||
/* BEGIN wikithionville-article-fixes */ | |||
@media only screen and (max-width: 270px) { | @media only screen and (max-width: 270px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.2; | |||
} | |||
} | } | ||
@media only screen and (min-width: 270px) { | @media only screen and (min-width: 270px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.3; | |||
} | |||
} | } | ||
@media only screen and (min-width: 340px) { | @media only screen and (min-width: 340px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.4; | |||
} | |||
} | } | ||
@media only screen and (min-width: 415px) { | @media only screen and (min-width: 415px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.5; | |||
} | |||
} | } | ||
@media only screen and (min-width: 570px) { | @media only screen and (min-width: 570px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.7; | |||
} | |||
} | } | ||
@media only screen and (min-width: 730px) { | @media only screen and (min-width: 730px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 0.9; | |||
} | |||
} | } | ||
@media only screen and (min-width: 850px) { | @media only screen and (min-width: 850px) { | ||
body:not(.page-Accueil) #bodyContent { | |||
zoom: 1; | |||
} | |||
} | } | ||
/* | |||
/* Tables / Old HTML layouts */ | |||
body:not(.page-Accueil) #bodyContent table { | |||
border: none !important; | |||
overflow: hidden !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent table:not(.wikitable) tr { | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
- | |||
- | |||
justify-content: center; | justify-content: center; | ||
flex-wrap: wrap; | |||
} | } | ||
#bodyContent | body:not(.page-Accueil) #bodyContent .wikitable { | ||
width: 100% !important; | |||
} | } | ||
. | body:not(.page-Accueil) #bodyContent .wikitable tr { | ||
display: block !important; | |||
} | } | ||
#bodyContent table { | body:not(.page-Accueil) #bodyContent .citizen-table-wrapper { | ||
border-radius: 15px; | |||
} | } | ||
#bodyContent tr p{ | body:not(.page-Accueil) #bodyContent tr p { | ||
font-size: 1rem !important; | |||
} | } | ||
. | /* Old content with <font> tag */ | ||
body:not(.page-Accueil) #bodyContent font { | |||
color: var(--color-base--emphasized); | |||
} | } | ||
/* Mobile responsive for articles/pages */ | |||
@media only screen and (max-width: 570px) { | |||
body:not(.page-Accueil) #bodyContent tr td { | |||
width: 98%; | |||
} | |||
body:not(.page-Accueil) #bodyContent .citizen-section-collapsible { | |||
zoom: 1.5; | |||
} | |||
body:not(.page-Accueil) #bodyContent .citizen-table-wrapper { | |||
overflow: hidden !important; | |||
border-radius: 25px !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent font { | |||
font-size: 1.3rem !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent .mw-headline { | |||
font-size: 2.5rem !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent .citizen-overflow--right { | |||
-webkit-mask-image: none !important; | |||
mask-image: none !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent .mw-category-columns { | |||
display: grid; | |||
justify-content: center; | |||
zoom: 2; | |||
} | |||
body:not(.page-Accueil) #bodyContent p { | |||
font-size: 30px !important; | |||
} | |||
body:not(.page-Accueil) #bodyContent h2 { | |||
font-size: 45px !important; | |||
} | |||
} | |||
/* END wikithionville-article-fixes */ | |||
Dernière version du 3 juillet 2026 à 16:10
/* BEGIN wikithionville-homepage */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body.page-Accueil {
--home-accent: #f15234;
--home-accent-2: #edaa7d;
--home-bg: var(--color-surface-0);
--home-text: var(--color-base);
--home-card-bg: var(--color-surface-2);
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
--home-card-text: var(--color-emphasized);
--home-card-frame: var(--border-color-base);
--home-border-muted: var(--border-color-subtle);
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-0));
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent);
--home-hero-text: var(--color-inverted-fixed);
--home-hero-muted: color-mix(in srgb, var(--color-inverted-fixed) 78%, transparent);
--home-hero-surface: rgb(33 38 48 / 82%);
--home-hero-border: rgb(142 26 2 / 60%);
--home-hero-shadow: rgb(0 0 0 / 10%);
--home-hero-title-shadow: 2px 2px 50px rgb(17 17 17);
--home-image-dark-source-filter: none;
--home-image-light-source-filter: var(--filter-invert-fixed);
--home-image-brand-filter: none;
background: var(--home-bg);
}
html.skin-theme-clientpref-night body.page-Accueil {
--home-bg: var(--color-surface-2);
--home-card-bg: var(--color-surface-3);
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-3) 82%, transparent);
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-2));
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent);
--home-image-dark-source-filter: var(--filter-invert-fixed);
--home-image-light-source-filter: none;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.page-Accueil {
--home-bg: var(--color-surface-2);
--home-card-bg: var(--color-surface-3);
--home-card-bg-glass: color-mix(in srgb, var(--color-surface-3) 82%, transparent);
--home-surface-tint: color-mix(in srgb, var(--home-accent) 7%, var(--color-surface-2));
--home-card-tint: color-mix(in srgb, var(--home-accent) 10%, transparent);
--home-image-dark-source-filter: var(--filter-invert-fixed);
--home-image-light-source-filter: none;
}
}
body.page-Accueil .citizen-body-container {
display: block;
margin: 0!important;
padding: 0;
}
body.page-Accueil .mw-body,
body.page-Accueil .mw-body-content,
body.page-Accueil .mw-parser-output {
width: 100%;
max-width: none;
margin: 0!important;
padding: 0;
}
body.page-Accueil .mw-body-header,
body.page-Accueil .mw-body-footer,
body.page-Accueil #citizen-body-header-sticky-sentinel,
body.page-Accueil #contentSub,
body.page-Accueil #contentSub2 {
display: none;
}
body.page-Accueil .citizen-page-footer {
display: none;
}
body.page-Accueil .citizen-footer {
margin-top: 0;
}
.home-page h1:not(.home-section--plain-heading *),
.home-page .mw-heading1:not(.home-section--plain-heading *),
.home-page .home-card__title:not(.home-section--plain-heading *),
.home-page .home-stat-card__value:not(.home-section--plain-heading *) {
background: var(--home-accent);
background: linear-gradient(
311deg,
var(--home-accent) 0%,
var(--home-accent-2) 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.home-page .home-card__text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-clamp: 3;
}
/* END wikithionville-homepage */
/* BEGIN wikithionville-article-fixes */
@media only screen and (max-width: 270px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.2;
}
}
@media only screen and (min-width: 270px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.3;
}
}
@media only screen and (min-width: 340px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.4;
}
}
@media only screen and (min-width: 415px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.5;
}
}
@media only screen and (min-width: 570px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.7;
}
}
@media only screen and (min-width: 730px) {
body:not(.page-Accueil) #bodyContent {
zoom: 0.9;
}
}
@media only screen and (min-width: 850px) {
body:not(.page-Accueil) #bodyContent {
zoom: 1;
}
}
/* Tables / Old HTML layouts */
body:not(.page-Accueil) #bodyContent table {
border: none !important;
overflow: hidden !important;
}
body:not(.page-Accueil) #bodyContent table:not(.wikitable) tr {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
body:not(.page-Accueil) #bodyContent .wikitable {
width: 100% !important;
}
body:not(.page-Accueil) #bodyContent .wikitable tr {
display: block !important;
}
body:not(.page-Accueil) #bodyContent .citizen-table-wrapper {
border-radius: 15px;
}
body:not(.page-Accueil) #bodyContent tr p {
font-size: 1rem !important;
}
/* Old content with <font> tag */
body:not(.page-Accueil) #bodyContent font {
color: var(--color-base--emphasized);
}
/* Mobile responsive for articles/pages */
@media only screen and (max-width: 570px) {
body:not(.page-Accueil) #bodyContent tr td {
width: 98%;
}
body:not(.page-Accueil) #bodyContent .citizen-section-collapsible {
zoom: 1.5;
}
body:not(.page-Accueil) #bodyContent .citizen-table-wrapper {
overflow: hidden !important;
border-radius: 25px !important;
}
body:not(.page-Accueil) #bodyContent font {
font-size: 1.3rem !important;
}
body:not(.page-Accueil) #bodyContent .mw-headline {
font-size: 2.5rem !important;
}
body:not(.page-Accueil) #bodyContent .citizen-overflow--right {
-webkit-mask-image: none !important;
mask-image: none !important;
}
body:not(.page-Accueil) #bodyContent .mw-category-columns {
display: grid;
justify-content: center;
zoom: 2;
}
body:not(.page-Accueil) #bodyContent p {
font-size: 30px !important;
}
body:not(.page-Accueil) #bodyContent h2 {
font-size: 45px !important;
}
}
/* END wikithionville-article-fixes */