Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| (16 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* Le CSS placé ici sera appliqué à tous les habillages. */ | /* Le CSS placé ici sera appliqué à tous les habillages. */ | ||
/* Couleurs et variables de mise en forme */ | |||
:root { | |||
--exo-red: #811B12; | |||
--exo-lightred: #D43A5E1e; | |||
--exo-yellow: #FF9D00; | |||
--exo-shadow: 0 0 .3em #00000099; | |||
--exo-transparent: #00; | |||
} | |||
/* Infobulles*/ | /* Infobulles*/ | ||
| Ligne 18 : | Ligne 27 : | ||
transition: all 0.2s; | transition: all 0.2s; | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
background-color: var(-- | background-color: var(--color-surface-4); | ||
} | } | ||
| Ligne 48 : | Ligne 57 : | ||
from { width: 0; } | from { width: 0; } | ||
} | } | ||
/* Responsive flex boxes */ | |||
.flex-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
.flex-item { | |||
flex: 15%; | |||
} | |||
@media (max-width: 800px) { | |||
.flex-item { | |||
flex: 30%; | |||
} | |||
} | |||
/* Spoilerbox*/ | |||
.spoilerbox { | |||
position: relative; | |||
} | |||
.spoilerbox-content { | |||
filter: blur( 8px ); | |||
pointer-events: none; | |||
user-select: none; | |||
transition-property: filter; | |||
transition-duration: var( --transition-duration-medium ); | |||
transition-timing-function: var( --transition-timing-function-ease ); | |||
} | |||
.spoilerbox-details { | |||
position: absolute; | |||
inset: 0; | |||
display: grid; | |||
place-content: center; | |||
} | |||
.spoilerbox-summary { | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
gap: var( --space-xs ); | |||
padding: var( --space-xs ) var( --space-md ); | |||
border: 1px solid var( --border-color-interactive ); | |||
border-radius: var( --border-radius-medium ); | |||
color: var( --color-emphasized ); | |||
font-size: var( --font-size-small ); | |||
font-weight: var( --font-weight-medium ); | |||
z-index: 1; | |||
} | |||
.spoilerbox-summary:hover { | |||
background-color: var( --background-color-button-quiet--hover ); | |||
} | |||
.spoilerbox-summary:active { | |||
background-color: var( --background-color-button-quiet--active ); | |||
} | |||
.spoilerbox-details[ open ] { | |||
display: none; | |||
} | |||
.spoilerbox-details[ open ] + .spoilerbox-content { | |||
filter: none; | |||
pointer-events: initial; | |||
user-select: initial; | |||
} | |||
/* Collapsible elements. Toggle-link moved to left. | |||
/* Margin around it adjusted. */ | |||
/* .mw-collapsible .mw-collapsible-toggle { | |||
/* float: left; | |||
/* margin-left: 0; | |||
/* margin-right: 1em; | |||
/* } */ | |||