blallo
/
presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
Hakim El Hattab 2 years ago
parent
f04a00672c
commit
30cd9a8d3b
13 changed files with 95 additions and 219 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      css/theme/template/theme.scss
  2. 6
      demo.html
  3. 24
      dist/theme/beige.css
  4. 24
      dist/theme/black.css
  5. 24
      dist/theme/blood.css
  6. 24
      dist/theme/league.css
  7. 24
      dist/theme/moon.css
  8. 24
      dist/theme/night.css
  9. 24
      dist/theme/serif.css
  10. 24
      dist/theme/simple.css
  11. 24
      dist/theme/sky.css
  12. 24
      dist/theme/solarized.css
  13. 24
      dist/theme/white.css

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 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;
.reveal a .r-frame {
transition: all .15s linear;
}
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
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
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
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
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
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
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
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
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
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
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
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); }
/*********************************************

Write Preview
Loading…
Cancel
Save