xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove default border around images, now available via img.r-frame

Browse Source
This commit is contained in:
Hakim El Hattab 2020-05-14 12:39:45 +02:00
parent f04a00672c
commit 30cd9a8d3b
13 changed files with 95 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/theme/template/theme.scss
View File

@ -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);
}
/*********************************************

6
demo.html
View File

@ -51,7 +51,7 @@
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
@ -63,7 +63,7 @@
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow">
</a>
</section>
</section>
@ -230,7 +230,7 @@
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
</p>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">

24
dist/theme/beige.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/black.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/blood.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/league.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/moon.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/night.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/serif.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/simple.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/sky.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/solarized.css vendored
View File

@ -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); }
/*********************************************

24
dist/theme/white.css vendored
View File

@ -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); }
/*********************************************