From 30cd9a8d3bd62806b05bfb12748d5c0730b7eb11 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 14 May 2020 12:39:45 +0200 Subject: [PATCH] remove default border around images, now available via img.r-frame --- css/theme/template/theme.scss | 44 ++++++++++++----------------------- demo.html | 6 ++--- dist/theme/beige.css | 24 ++++++------------- dist/theme/black.css | 24 ++++++------------- dist/theme/blood.css | 24 ++++++------------- dist/theme/league.css | 24 ++++++------------- dist/theme/moon.css | 24 ++++++------------- dist/theme/night.css | 24 ++++++------------- dist/theme/serif.css | 24 ++++++------------- dist/theme/simple.css | 24 ++++++------------- dist/theme/sky.css | 24 ++++++------------- dist/theme/solarized.css | 24 ++++++------------- dist/theme/white.css | 24 ++++++------------- 13 files changed, 95 insertions(+), 219 deletions(-) diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 1ec1b8c..7c88b3f 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -237,6 +237,10 @@ vertical-align: top; } +.reveal img { + margin: $blockMargin 0; +} + /********************************************* * LINKS @@ -245,14 +249,10 @@ .reveal a { color: $linkColor; text-decoration: none; - - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: $linkColorHover; - text-shadow: none; border: none; } @@ -264,34 +264,22 @@ /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255,255,255,0.12); +.reveal .r-frame { border: 4px solid $mainColor; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } - .reveal section img.plain { - border: 0; - box-shadow: none; - } +.reveal a .r-frame { + transition: all .15s linear; +} - .reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; - transition: all .15s linear; - } - - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: $linkColor; - - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } +.reveal a:hover .r-frame { + border-color: $linkColor; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* @@ -312,9 +300,7 @@ color: $linkColor; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } /********************************************* diff --git a/demo.html b/demo.html index a2a1927..cd073d2 100644 --- a/demo.html +++ b/demo.html @@ -51,7 +51,7 @@

Use the Space key to navigate through all slides.


- Down arrow + Down arrow
@@ -63,7 +63,7 @@

That's it, time to go back up.


- Up arrow + Up arrow
@@ -230,7 +230,7 @@ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

- Down arrow + Down arrow
diff --git a/dist/theme/beige.css b/dist/theme/beige.css index 579770e..af10d17 100644 --- a/dist/theme/beige.css +++ b/dist/theme/beige.css @@ -234,14 +234,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #8b743d; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -254,25 +255,16 @@ background: #564826; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #8b743d; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -290,8 +282,6 @@ color: #8b743d; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/black.css b/dist/theme/black.css index 51498a5..2dcbfb5 100644 --- a/dist/theme/black.css +++ b/dist/theme/black.css @@ -230,14 +230,15 @@ section.has-light-background, section.has-light-background h1, section.has-light .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #42affa; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -250,25 +251,16 @@ section.has-light-background, section.has-light-background h1, section.has-light background: #068de9; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #42affa; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -286,8 +278,6 @@ section.has-light-background, section.has-light-background h1, section.has-light color: #42affa; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/blood.css b/dist/theme/blood.css index 396d632..18a37a8 100644 --- a/dist/theme/blood.css +++ b/dist/theme/blood.css @@ -233,14 +233,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #a23; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -253,25 +254,16 @@ background: #6a1520; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #a23; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -289,8 +281,6 @@ color: #a23; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/league.css b/dist/theme/league.css index 6878bca..abf2846 100644 --- a/dist/theme/league.css +++ b/dist/theme/league.css @@ -236,14 +236,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #13DAEC; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -256,25 +257,16 @@ background: #0d99a5; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #13DAEC; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -292,8 +284,6 @@ color: #13DAEC; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/moon.css b/dist/theme/moon.css index de4a02c..cc005e3 100644 --- a/dist/theme/moon.css +++ b/dist/theme/moon.css @@ -234,14 +234,15 @@ html * { .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -254,25 +255,16 @@ html * { background: #1a6091; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #93a1a1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #268bd2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -290,8 +282,6 @@ html * { color: #268bd2; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/night.css b/dist/theme/night.css index 278bb7f..a2324e9 100644 --- a/dist/theme/night.css +++ b/dist/theme/night.css @@ -228,14 +228,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #e7ad52; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -248,25 +249,16 @@ background: #d08a1d; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #e7ad52; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -284,8 +276,6 @@ color: #e7ad52; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/serif.css b/dist/theme/serif.css index e4deebd..886a1cb 100644 --- a/dist/theme/serif.css +++ b/dist/theme/serif.css @@ -230,14 +230,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #51483D; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -250,25 +251,16 @@ background: #25211c; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #51483D; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -286,8 +278,6 @@ color: #51483D; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/simple.css b/dist/theme/simple.css index 5b0da04..80fd683 100644 --- a/dist/theme/simple.css +++ b/dist/theme/simple.css @@ -233,14 +233,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #00008B; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -253,25 +254,16 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba background: #00003f; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #00008B; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -289,8 +281,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba color: #00008B; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/sky.css b/dist/theme/sky.css index 77786e2..1c81c76 100644 --- a/dist/theme/sky.css +++ b/dist/theme/sky.css @@ -237,14 +237,15 @@ .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #3b759e; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -257,25 +258,16 @@ background: #264c66; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #3b759e; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -293,8 +285,6 @@ color: #3b759e; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/solarized.css b/dist/theme/solarized.css index 09d6e89..5b6f085 100644 --- a/dist/theme/solarized.css +++ b/dist/theme/solarized.css @@ -234,14 +234,15 @@ html * { .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -254,25 +255,16 @@ html * { background: #1a6091; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #657b83; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #268bd2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -290,8 +282,6 @@ html * { color: #268bd2; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/dist/theme/white.css b/dist/theme/white.css index 6cc5511..03348e8 100644 --- a/dist/theme/white.css +++ b/dist/theme/white.css @@ -230,14 +230,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba .reveal small * { vertical-align: top; } +.reveal img { + margin: 20px 0; } + /********************************************* * LINKS *********************************************/ .reveal a { color: #2a76dd; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { @@ -250,25 +251,16 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba background: #1a53a1; } /********************************************* - * IMAGES + * Frame helper *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); +.reveal .r-frame { border: 4px solid #222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } -.reveal section img.plain { - border: 0; - box-shadow: none; } - -.reveal a img { - -webkit-transition: all .15s linear; - -moz-transition: all .15s linear; +.reveal a .r-frame { transition: all .15s linear; } -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); +.reveal a:hover .r-frame { border-color: #2a76dd; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } @@ -286,8 +278,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba color: #2a76dd; } .reveal .progress span { - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /*********************************************