dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

reduce fragment style specificity, add custom class to reset fragment styles #2927

This commit is contained in:
Hakim El Hattab 2023-03-07 10:22:52 +07:00
parent 0c9bdeab70
commit 006b348e6b
1 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
css/reveal.scss
View File

@ -48,11 +48,14 @@ html.reveal-full-page {
* VIEW FRAGMENTS * VIEW FRAGMENTS
*********************************************/ *********************************************/
.reveal .slides section .fragment { .reveal .fragment {
opacity: 0;
visibility: hidden;
transition: all .2s ease; transition: all .2s ease;
will-change: opacity;
&:not(.custom) {
opacity: 0;
visibility: hidden;
will-change: opacity;
}
&.visible { &.visible {
opacity: 1; opacity: 1;
@ -64,7 +67,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.grow { .reveal .fragment.grow {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
@ -73,7 +76,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.shrink { .reveal .fragment.shrink {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
@ -82,7 +85,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.zoom-in { .reveal .fragment.zoom-in {
transform: scale( 0.1 ); transform: scale( 0.1 );
&.visible { &.visible {
@ -90,7 +93,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-out { .reveal .fragment.fade-out {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
@ -100,7 +103,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.semi-fade-out { .reveal .fragment.semi-fade-out {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
@ -110,7 +113,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.strike { .reveal .fragment.strike {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
@ -119,7 +122,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-up { .reveal .fragment.fade-up {
transform: translate(0, 40px); transform: translate(0, 40px);
&.visible { &.visible {
@ -127,7 +130,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-down { .reveal .fragment.fade-down {
transform: translate(0, -40px); transform: translate(0, -40px);
&.visible { &.visible {
@ -135,7 +138,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-right { .reveal .fragment.fade-right {
transform: translate(-40px, 0); transform: translate(-40px, 0);
&.visible { &.visible {
@ -143,7 +146,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-left { .reveal .fragment.fade-left {
transform: translate(40px, 0); transform: translate(40px, 0);
&.visible { &.visible {
@ -151,8 +154,8 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-in-then-out, .reveal .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible { .reveal .fragment.current-visible {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -162,7 +165,7 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.fade-in-then-semi-out { .reveal .fragment.fade-in-then-semi-out {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -177,32 +180,32 @@ html.reveal-full-page {
} }
} }
.reveal .slides section .fragment.highlight-red, .reveal .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red, .reveal .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green, .reveal .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green, .reveal .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue, .reveal .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue { .reveal .fragment.highlight-current-blue {
opacity: 1; opacity: 1;
visibility: inherit; visibility: inherit;
} }
.reveal .slides section .fragment.highlight-red.visible { .reveal .fragment.highlight-red.visible {
color: #ff2c2d color: #ff2c2d
} }
.reveal .slides section .fragment.highlight-green.visible { .reveal .fragment.highlight-green.visible {
color: #17ff2e; color: #17ff2e;
} }
.reveal .slides section .fragment.highlight-blue.visible { .reveal .fragment.highlight-blue.visible {
color: #1b91ff; color: #1b91ff;
} }
.reveal .slides section .fragment.highlight-current-red.current-fragment { .reveal .fragment.highlight-current-red.current-fragment {
color: #ff2c2d color: #ff2c2d
} }
.reveal .slides section .fragment.highlight-current-green.current-fragment { .reveal .fragment.highlight-current-green.current-fragment {
color: #17ff2e; color: #17ff2e;
} }
.reveal .slides section .fragment.highlight-current-blue.current-fragment { .reveal .fragment.highlight-current-blue.current-fragment {
color: #1b91ff; color: #1b91ff;
} }