frag results from the CPAN

frag

App-revealup

view release on metacpan or search on metacpan

share/revealjs/css/reveal.scss view on Meta::CPAN

@use "sass:math";

/**
 * reveal.js
 * http://revealjs.com
 * MIT licensed
 *
 * Copyright (C) Hakim El Hattab, https://hakim.se
 */

@import 'layout';

/*********************************************
 * GLOBAL STYLES
 *********************************************/

html.reveal-full-page {
	width: 100%;
	height: 100%;
	height: 100vh;
	height: calc( var(--vh, 1vh) * 100 );
	overflow: hidden;
}

.reveal-viewport {
	height: 100%;
	overflow: hidden;
	position: relative;
	line-height: 1;
	margin: 0;

	background-color: #fff;
	color: #000;
}

// Force the presentation to cover the full viewport when we
// enter fullscreen mode. Fixes sizing issues in Safari.
.reveal-viewport:fullscreen {
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}


/*********************************************
 * VIEW FRAGMENTS
 *********************************************/

.reveal .slides section .fragment {
	opacity: 0;
	visibility: hidden;
	transition: all .2s ease;
	will-change: opacity;

	&.visible {
		opacity: 1;
		visibility: inherit;
	}

	&.disabled {
		transition: none;
	}
}

.reveal .slides section .fragment.grow {
	opacity: 1;
	visibility: inherit;

	&.visible {
		transform: scale( 1.3 );
	}
}

.reveal .slides section .fragment.shrink {
	opacity: 1;
	visibility: inherit;

	&.visible {
		transform: scale( 0.7 );
	}
}

.reveal .slides section .fragment.zoom-in {
	transform: scale( 0.1 );

	&.visible {
		transform: none;
	}
}

.reveal .slides section .fragment.fade-out {
	opacity: 1;
	visibility: inherit;

	&.visible {
		opacity: 0;
		visibility: hidden;
	}
}

.reveal .slides section .fragment.semi-fade-out {
	opacity: 1;
	visibility: inherit;

	&.visible {
		opacity: 0.5;
		visibility: inherit;
	}
}

.reveal .slides section .fragment.strike {
	opacity: 1;
	visibility: inherit;

	&.visible {
		text-decoration: line-through;
	}
}

.reveal .slides section .fragment.fade-up {
	transform: translate(0, 40px);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-down {
	transform: translate(0, -40px);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-right {
	transform: translate(-40px, 0);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-left {
	transform: translate(40px, 0);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
	opacity: 0;
	visibility: hidden;

	&.current-fragment {
		opacity: 1;
		visibility: inherit;
	}
}

.reveal .slides section .fragment.fade-in-then-semi-out {
	opacity: 0;
	visibility: hidden;

	&.visible {
		opacity: 0.5;
		visibility: inherit;
	}

	&.current-fragment {
		opacity: 1;
		visibility: inherit;
	}
}

.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
	opacity: 1;
	visibility: inherit;
}
	.reveal .slides section .fragment.highlight-red.visible {
		color: #ff2c2d
	}
	.reveal .slides section .fragment.highlight-green.visible {
		color: #17ff2e;
	}
	.reveal .slides section .fragment.highlight-blue.visible {
		color: #1b91ff;
	}

.reveal .slides section .fragment.highlight-current-red.current-fragment {
	color: #ff2c2d
}
.reveal .slides section .fragment.highlight-current-green.current-fragment {
	color: #17ff2e;
}
.reveal .slides section .fragment.highlight-current-blue.current-fragment {
	color: #1b91ff;
}


/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/

/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
.reveal:after {
  content: '';
  font-style: italic;
}

.reveal iframe {
	z-index: 1;
}

/** Prevents layering issues in certain browser/transition combinations */
.reveal a {
	position: relative;
}


/*********************************************
 * CONTROLS
 *********************************************/

@keyframes bounce-right {
	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
	20% {transform: translateX(10px);}
	30% {transform: translateX(-5px);}
}

@keyframes bounce-left {
	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
	20% {transform: translateX(-10px);}
	30% {transform: translateX(5px);}
}

@keyframes bounce-down {
	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
	20% {transform: translateY(10px);}
	30% {transform: translateY(-5px);}
}

$controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;
$controlsArrowAngle: 45deg;
$controlsArrowAngleHover: 40deg;
$controlsArrowAngleActive: 36deg;

@mixin controlsArrowTransform( $angle ) {
	&:before {
		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
	}

	&:after {

share/revealjs/css/reveal.scss view on Meta::CPAN

			transform: rotate( 180deg );
		}

		&.highlight {
			animation: bounce-right 2s 50 both ease-out;
		}
	}

	.navigate-up {
		right: $controlArrowSpacing + $controlArrowSize*0.5;
		bottom: $controlArrowSpacing*2 + $controlArrowSize;
		transform: translateY( -10px );

		.controls-arrow {
			transform: rotate( 90deg );
		}
	}

	.navigate-down {
		right: $controlArrowSpacing + $controlArrowSize*0.5;
		bottom: -$controlArrowSpacing;
		padding-bottom: $controlArrowSpacing;
		transform: translateY( 10px );

		.controls-arrow {
			transform: rotate( -90deg );
		}

		&.highlight {
			animation: bounce-down 2s 50 both ease-out;
		}
	}

	// Back arrow style: "faded":
	// Deemphasize backwards navigation arrows in favor of drawing
	// attention to forwards navigation
	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

	// Back arrow style: "hidden":
	// Never show arrows for backwards navigation
	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
		opacity: 0;
		visibility: hidden;
	}

	// Any control button that can be clicked is "enabled"
	.enabled {
		visibility: visible;
		opacity: 0.9;
		cursor: pointer;
		transform: none;
	}

	// Any control button that leads to showing or hiding
	// a fragment
	.enabled.fragmented {
		opacity: 0.5;
	}

	.enabled:hover,
	.enabled.fragmented:hover {
		opacity: 1;
	}
}

.reveal:not(.rtl) .controls {
	// Back arrow style: "faded":
	// Deemphasize left arrow
	&[data-controls-back-arrows="faded"] .navigate-left.enabled {
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

	// Back arrow style: "hidden":
	// Never show left arrow
	&[data-controls-back-arrows="hidden"] .navigate-left.enabled {
		opacity: 0;
		visibility: hidden;
	}
}

.reveal.rtl .controls {
	// Back arrow style: "faded":
	// Deemphasize right arrow in RTL mode
	&[data-controls-back-arrows="faded"] .navigate-right.enabled  {
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

	// Back arrow style: "hidden":
	// Never show right arrow in RTL mode
	&[data-controls-back-arrows="hidden"] .navigate-right.enabled {
		opacity: 0;
		visibility: hidden;
	}
}

.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
	display: none;
}

// Adjust the layout when there are no vertical slides
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-left {
	bottom: $controlArrowSpacing;
	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
}

.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
.reveal:not(.has-vertical-slides) .controls .navigate-right {
	bottom: $controlArrowSpacing;
	right: 0.5em;
}

share/revealjs/css/reveal.scss view on Meta::CPAN

		transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.2);
}


/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
	transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
	transition-duration: 1200ms;
}


/*********************************************
 * AUTO ANIMATE
 *********************************************/

.reveal [data-auto-animate-target^="unmatched"] {
	will-change: opacity;
}

.reveal section[data-auto-animate]:not(.stack):not([data-auto-animate="running"]) [data-auto-animate-target^="unmatched"] {
	opacity: 0;
}


/*********************************************
 * OVERVIEW
 *********************************************/

.reveal.overview {
	perspective-origin: 50% 50%;
	perspective: 700px;

	.slides {
		// Fixes overview rendering errors in FF48+, not applied to
		// other browsers since it degrades performance
		-moz-transform-style: preserve-3d;
	}

	.slides section {
		height: 100%;
		top: 0 !important;
		opacity: 1 !important;
		overflow: hidden;
		visibility: visible !important;
		cursor: pointer;
		box-sizing: border-box;
	}
	.slides section:hover,
	.slides section.present {
		outline: 10px solid rgba(150,150,150,0.4);
		outline-offset: 10px;
	}
	.slides section .fragment {
		opacity: 1;
		transition: none;
	}
	.slides section:after,
	.slides section:before {
		display: none !important;
	}
	.slides>section.stack {
		padding: 0;
		top: 0 !important;
		background: none;
		outline: none;
		overflow: visible;
	}

	.backgrounds {
		perspective: inherit;

		// Fixes overview rendering errors in FF48+, not applied to
		// other browsers since it degrades performance
		-moz-transform-style: preserve-3d;
	}

	.backgrounds .slide-background {
		opacity: 1;
		visibility: visible;

		// This can't be applied to the slide itself in Safari
		outline: 10px solid rgba(150,150,150,0.1);
		outline-offset: 10px;
	}

	.backgrounds .slide-background.stack {
		overflow: visible;
	}
}

// Disable transitions transitions while we're activating
// or deactivating the overview mode.
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
	transition: none;
}

.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
	transition: none;
}


/*********************************************
 * RTL SUPPORT
 *********************************************/

.reveal.rtl .slides,
.reveal.rtl .slides h1,
.reveal.rtl .slides h2,
.reveal.rtl .slides h3,
.reveal.rtl .slides h4,
.reveal.rtl .slides h5,

share/revealjs/css/reveal.scss view on Meta::CPAN

		padding: 14px;
		border: 1px solid #fff;
		vertical-align: middle;
	}

	.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
		padding-top: 20px;
		padding-bottom: 20px;
	}


/*********************************************
 * PLAYBACK COMPONENT
 *********************************************/

.reveal .playback {
	position: absolute;
	left: 15px;
	bottom: 20px;
	z-index: 30;
	cursor: pointer;
	transition: all 400ms ease;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.reveal.overview .playback {
	opacity: 0;
	visibility: hidden;
}


/*********************************************
 * CODE HIGHLGIHTING
 *********************************************/

.reveal .hljs {
	min-height: 100%;
}

.reveal .hljs table {
	margin: initial;
}

.reveal .hljs-ln-code,
.reveal .hljs-ln-numbers {
	padding: 0;
	border: 0;
}

.reveal .hljs-ln-numbers {
	opacity: 0.6;
	padding-right: 0.75em;
	text-align: right;
	vertical-align: top;
}

.reveal .hljs.has-highlights tr:not(.highlight-line) {
	opacity: 0.4;
}

.reveal .hljs:not(:first-child).fragment {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
}

.reveal pre[data-auto-animate-target] {
	overflow: hidden;
}
.reveal pre[data-auto-animate-target] code {
	height: 100%;
}


/*********************************************
 * ROLLING LINKS
 *********************************************/

.reveal .roll {
	display: inline-block;
	line-height: 1.2;
	overflow: hidden;

	vertical-align: top;
	perspective: 400px;
	perspective-origin: 50% 50%;
}
	.reveal .roll:hover {
		background: none;
		text-shadow: none;
	}
.reveal .roll span {
	display: block;
	position: relative;
	padding: 0 2px;

	pointer-events: none;
	transition: all 400ms ease;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}
	.reveal .roll:hover span {
	    background: rgba(0,0,0,0.5);
	    transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
	}
.reveal .roll span:after {
	content: attr(data-title);

	display: block;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 2px;
	backface-visibility: hidden;
	transform-origin: 50% 0%;
	transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
}

( run in 0.689 second using v1.01-cache-2.11-cpan-b16cb0d3907 )