Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
| css:slides [2024/06/06 16:16] – avillepreux | css:slides [2024/06/06 17:07] (Version actuelle) – avillepreux | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| <CSS> | <CSS> | ||
| + | |||
| + | /* ---------------------------------------------------------------------------------------------- */ | ||
| + | /* RESET */ | ||
| /* Hide everything that is not content + unstyle everything */ | /* Hide everything that is not content + unstyle everything */ | ||
| Ligne 35: | Ligne 38: | ||
| # | # | ||
| { | { | ||
| - | height: 0; | + | height: 0 !important; |
| - | display: none; | + | display: none !important; |
| } | } | ||
| Ligne 78: | Ligne 81: | ||
| padding: 0; | padding: 0; | ||
| margin: 0; | margin: 0; | ||
| - | } | ||
| - | |||
| - | |||
| - | .wrap_slide > .plugin_wrap > p, | ||
| - | .wrap_slide > .plugin_wrap > p img, | ||
| - | .wrap_slide > .plugin_wrap > p .dokuwiki img.mediacenter { /* how to target p's that are around images ? */ | ||
| - | padding: 0; | ||
| - | margin: 0; | ||
| - | width: 100%; | ||
| - | height: 100%; | ||
| - | object-fit: cover; | ||
| } | } | ||
| Ligne 105: | Ligne 97: | ||
| } | } | ||
| + | |||
| + | /* ---------------------------------------------------------------------------------------------- */ | ||
| /* SLIDES */ | /* SLIDES */ | ||
| + | |||
| + | /* image section */ | ||
| + | |||
| + | .wrap_img, | ||
| + | .wrap_img > p, | ||
| + | .wrap_img > p img, | ||
| + | .wrap_img > p img.mediacenter, | ||
| + | .dokuwiki .wrap_img > p img.media, | ||
| + | .dokuwiki .wrap_img > p img.mediacenter { | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | object-fit: cover; | ||
| + | } | ||
| + | |||
| + | /* Edit buttons */ | ||
| #slide-edit { | #slide-edit { | ||
| Ligne 124: | Ligne 135: | ||
| .wrap_slide { | .wrap_slide { | ||
| width: 100svw; | width: 100svw; | ||
| + | max-height: 100vh; | ||
| flex-shrink: | flex-shrink: | ||
| scroll-snap-align: | scroll-snap-align: | ||
| + | } | ||
| + | .wrap_slide > * { | ||
| + | max-height: 100vh; | ||
| } | } | ||
| Ligne 139: | Ligne 154: | ||
| } | } | ||
| - | .h1, h1 { font-size: var(--font-size-h1, | + | .h1, h1 { font-size: var(--font-size-h1, |
| - | .h2, h2 { font-size: var(--font-size-h2, | + | .h2, h2 { font-size: var(--font-size-h2, |
| .h3, h3, | .h3, h3, | ||
| .h4, h4, | .h4, h4, | ||
| Ligne 147: | Ligne 162: | ||
| ul, p { font-size: var(--font-size, | ul, p { font-size: var(--font-size, | ||
| - | .wrap_txt :is(.h1, h1) { margin: var(--margin-h1, | + | .wrap_txt :is(.h1, h1) { margin: var(--margin-h1, |
| - | .wrap_txt :is(.h2, h2) { margin: var(--margin-h2, | + | .wrap_txt :is(.h2, h2) { margin: var(--margin-h2, |
| .wrap_txt :is(.h3, h3, | .wrap_txt :is(.h3, h3, | ||
| .h4, h4, | .h4, h4, | ||
| .h5, h5, | .h5, h5, | ||
| .h6, h6, | .h6, h6, | ||
| - | | + | |
| .wrap_txt { | .wrap_txt { | ||
| Ligne 177: | Ligne 192: | ||
| } | } | ||
| - | body { | + | html, body { |
| - | + | font-size: min(3vw, 3vh) !important; | |
| - | font-size: min(3vw, 3vh); | + | |
| - | + | ||
| - | --font-size: | + | |
| - | --background-color: | + | |
| - | --margin: .2em 1rem .4em 1rem; | + | |
| - | + | ||
| - | --text-max-width: | + | |
| - | --txt-area-aspect-ratio: | + | |
| - | + | ||
| - | --color-h1: var(--color-theme, | + | |
| - | --font-size-h1: | + | |
| - | --margin-h1: | + | |
| - | --text-h1: uppercase; | + | |
| - | --text-border-h1: | + | |
| - | + | ||
| - | --color-h2: black; | + | |
| - | --font-size-h2: | + | |
| - | --margin-h2: | + | |
| - | --text-h2: normal; | + | |
| - | --text-border-h2: | + | |
| } | } | ||
| Ligne 222: | Ligne 216: | ||
| display: block; | display: block; | ||
| position: absolute; | position: absolute; | ||
| - | bottom: .2em; | + | bottom: .2rem; |
| left: 50%; | left: 50%; | ||
| } | } | ||
| + | | ||
| + | /* Tables */ | ||
| + | |||
| + | .table, | ||
| + | .table *, | ||
| + | .table-striped> | ||
| + | |||
| + | .table > tbody > tr > td, | ||
| + | .table > tbody > tr > th, | ||
| + | .table > tfoot > tr > td, | ||
| + | .table > tfoot > tr > th, | ||
| + | .table > thead > tr > td, | ||
| + | .table > thead > tr > th { | ||
| + | |||
| + | color: var(--color-text); | ||
| + | background-color: | ||
| + | line-height: | ||
| + | font-size: var(--font-size); | ||
| + | } | ||
| Ligne 233: | Ligne 246: | ||
| } | } | ||
| */ | */ | ||
| + | |||
| + | /* ---------------------------------------------------------------------------------------------- */ | ||
| + | /* CONFIG */ | ||
| + | |||
| + | body { | ||
| + | | ||
| + | --txt-area-aspect-ratio: | ||
| + | |||
| + | --font-size: | ||
| + | --background-color: | ||
| + | --margin: .2rem 1rem .4rem 1rem; | ||
| + | |||
| + | --color-h1: var(--color-theme, | ||
| + | --font-size-h1: | ||
| + | --margin-h1: | ||
| + | --text-h1: uppercase; | ||
| + | --text-border-h1: | ||
| + | |||
| + | --color-h2: black; | ||
| + | --font-size-h2: | ||
| + | --margin-h2: | ||
| + | --text-h2: normal; | ||
| + | --text-border-h2: | ||
| + | |||
| + | } | ||
| + | |||
| </ | </ | ||
| Ligne 239: | Ligne 278: | ||
| jQuery(() => { if (typeof slides === " | jQuery(() => { if (typeof slides === " | ||
| - | jQuery(" | + | /* Add edit button */ |
| + | | ||
| } }); | } }); | ||
| </JS> | </JS> | ||