css:slides

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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:23] avillepreuxcss: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:
 #plugin_include__css__slides #plugin_include__css__slides
  
- height: 0; + height: 0 !important
- display: none; + display: none !important
 } }
  
Ligne 78: Ligne 81:
     padding: 0;     padding: 0;
     margin: 0;     margin: 0;
-} 
- 
-.wrap_img, 
-.wrap_img > p,  
-.wrap_img > p img,  
-.wrap_img > p img.mediacenter { 
-    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: 0;     flex-shrink: 0;
     scroll-snap-align: start;     scroll-snap-align: start;
 +}
 +.wrap_slide > * {
 +    max-height: 100vh;
 } }
  
Ligne 139: Ligne 154:
 } }
  
-.h1, h1 { font-size: var(--font-size-h1, 3em); text-transform: var(--text-h1, uppercase); text-border: var(--text-border-h1, none); } +.h1, h1 { font-size: var(--font-size-h1, 3rem); text-transform: var(--text-h1, uppercase); text-border: var(--text-border-h1, none); } 
-.h2, h2 { font-size: var(--font-size-h2, 2em); text-transform: var(--text-h2, normal);    text-border: var(--text-border-h2, none); }+.h2, h2 { font-size: var(--font-size-h2, 2rem); text-transform: var(--text-h2, normal);    text-border: var(--text-border-h2, none); }
 .h3, h3, .h3, h3,
 .h4, h4, .h4, h4,
Ligne 147: Ligne 162:
  ul, p { font-size: var(--font-size, 1em); }  ul, p { font-size: var(--font-size, 1em); }
  
-.wrap_txt :is(.h1, h1) { margin: var(--margin-h1, .4em 1rem .6em 1rem) !important; } +.wrap_txt :is(.h1, h1) { margin: var(--margin-h1, .4rem 1rem .6rem 1rem) !important; } 
-.wrap_txt :is(.h2, h2) { margin: var(--margin-h2, .3em 1rem .5em 1rem) !important; }+.wrap_txt :is(.h2, h2) { margin: var(--margin-h2, .3rem 1rem .5rem 1rem) !important; }
 .wrap_txt :is(.h3, h3, .wrap_txt :is(.h3, h3,
        .h4, h4,        .h4, h4,
        .h5, h5,        .h5, h5,
        .h6, h6,        .h6, h6,
-         ul, p) { margin: var(--margin, .2em 1rem .4em 1rem) !important; }+         ul, p, table) { margin: var(--margin, .2rem 1rem .4rem 1rem) !important; }
  
 .wrap_txt { .wrap_txt {
Ligne 177: Ligne 192:
 } }
  
-body { +html, body { 
- +    font-size: min(3vw, 3vh) !important;
-    font-size: min(3vw, 3vh); +
- +
-    --font-size: 1em; +
-    --background-color: white; +
-    --margin: .2em 1rem .4em 1rem; +
-     +
-    --text-max-width: calc(4 * 100vh / 3); +
-    --txt-area-aspect-ratio: 4 / 3; +
- +
-    --color-h1: var(--color-theme, black); +
-    --font-size-h1: 3em; +
-    --margin-h1: .4em 1rem .6em 1rem; +
-    --text-h1: uppercase; +
-    --text-border-h1: none; +
- +
-    --color-h2: black; +
-    --font-size-h2: 2em; +
-    --margin-h2: .3em 1rem .5em 1rem; +
-    --text-h2: normal; +
-    --text-border-h2: none; +
 } }
  
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>tbody>tr:nth-of-type(odd),
 +
 +.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: var(--background-color);
 +    line-height: 1.5;
 +    font-size: var(--font-size);
 +}
  
  
Ligne 233: Ligne 246:
 } }
 */ */
 +
 +/* ---------------------------------------------------------------------------------------------- */
 +/* CONFIG */
 +
 +body {
 +    
 +    --txt-area-aspect-ratio: 4 / 3;
 +
 +    --font-size: 1.5rem;
 +    --background-color: white;
 +    --margin: .2rem 1rem .4rem 1rem;
 +
 +    --color-h1: var(--color-theme, black);
 +    --font-size-h1: 3rem;
 +    --margin-h1: .4rem 1rem .6rem 1rem;
 +    --text-h1: uppercase;
 +    --text-border-h1: none;
 +
 +    --color-h2: black;
 +    --font-size-h2: 2rem;
 +    --margin-h2: .3rem 1rem .5rem 1rem;
 +    --text-h2: normal;
 +    --text-border-h2: none;
 +
 +}
 +
 </CSS> </CSS>
  
Ligne 239: Ligne 278:
 jQuery(() => { if (typeof slides === "undefined") { var slides = true; jQuery(() => { if (typeof slides === "undefined") { var slides = true;
  
- jQuery("body").append('<a id="slide-edit" href="?do=edit">✎</a>');+  /* Add edit button */ 
 +  jQuery("body").append('<a id="slide-edit" href="?do=edit">✎</a>');
  
 } }); } });
  
 </JS> </JS>
  • css/slides.1717683835.txt.gz
  • Dernière modification : 2024/06/06 16:23
  • de avillepreux