css:slides [Cyanide]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
<CSS>

/* ---------------------------------------------------------------------------------------------- */
/* RESET */

/* Hide everything that is not content + unstyle everything */
/*
*:not(style, script, head) { all: unset } */

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.docInfo, 
.secedit,
.dw-toc,
.dw-page-icons,
.hidden-print,
.screen__mode,
.wrap_tooltip,
.wrap_comment,
#dw__pagetools, 
#dw__header, 
#dw__footer, 
#dw__navbar, 
#dw__breadcrumbs,
#dokuwiki__header,
#dokuwiki__pageheader,
body > .dokuwiki > img:last-of-type,
#plugin_include__css__slides
{ 
	height: 0 !important;
	display: none !important; 
}

.dokuwiki article .page {
    min-height: initial;
}

*, .panel-body {
    padding: 0;
}
.pt-2, .py-2, .pt-3, .py-3, .pt-4, .py-4, .pt-5, .py-5,
.pb-2, .py-2, .pb-3, .py-3, .pb-4, .py-4, .pb-5, .py-5,
.pr-2, .px-2, .pr-3, .px-3, .pr-4, .px-4, .pr-5, .px-5,
.pl-2, .px-2, .pl-3, .px-3, .pl-4, .px-4, .pl-5, .px-5,
.mt-5, .my-5,
.mb-5, .my-5,
.mr-5, .mx-5,
.ml-5, .mx-5
 {
    padding: 0 !important;
    margin:  0 !important;
}

body {
    margin: 0;
}

.panel {
    margin: 0;
    background-color: unset;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding: 0;
    margin: 0;
}
.row {
    padding: 0;
    margin: 0;
}

.container {
    padding: 0;
    margin: 0;
    width: 100%;
}

.dw-content {
      min-height: 100vh;
}

.panel-default {
    background-color: unset !important;
}


/* ---------------------------------------------------------------------------------------------- */
/* 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 {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
    	cursor: pointer;
}


.dw-content {
    display: flex;
    width: initial;
    overflow: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}
.wrap_slide {
    width: 100svw;
    max-height: 100vh;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.wrap_slide > * {
    max-height: 100vh;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.dw-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.dw-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.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, 2rem); text-transform: var(--text-h2, normal);    text-border: var(--text-border-h2, none); }
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6,
 ul, p { font-size: var(--font-size, 1em); }

.wrap_txt :is(.h1, h1) { margin: var(--margin-h1, .4rem 1rem .6rem 1rem) !important; }
.wrap_txt :is(.h2, h2) { margin: var(--margin-h2, .3rem 1rem .5rem 1rem) !important; }
.wrap_txt :is(.h3, h3,
	      .h4, h4,
	      .h5, h5,
	      .h6, h6,
 	       ul, p, table) { margin: var(--margin, .2rem 1rem .4rem 1rem) !important; }

.wrap_txt {

	height: 100%; 
	max-height: 100vh; 
	width: auto; 
	aspect-ratio: var(--txt-area-aspect-ratio, calc(4 / 3)); 
}

.page-header {
	border-bottom: none;
}

a.media {
    display: block;
    height: 100%;
}
a.media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

html, body {
    font-size: min(3vw, 3vh) !important;
}

.wrap_slide {
    display: grid;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas: "a";
}

/* pages counter */

.dw-content {
	counter-reset: page 0;
}
.wrap_slide {
	position: relative;
}
.wrap_slide:before {
    counter-increment: page 1;
    content: counter(page) " ";
    display: block;
    position: absolute;
    bottom: .2rem;
    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);
}


/* Debug */
/*
.wrap_slide {
    border: 3px solid red;
}
*/

/* ---------------------------------------------------------------------------------------------- */
/* 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>

<JS>

jQuery(() => { if (typeof slides === "undefined") { var slides = true;

  /* Add edit button */
  jQuery("body").append('<a id="slide-edit" href="?do=edit">✎</a>');

} });

</JS>