diff --git a/examples/files/thumbnails.svg b/examples/files/thumbnails.svg
new file mode 100644
index 0000000000000000000000000000000000000000..640b294e773636a16a3e0ce9005680d8169e52f0
--- /dev/null
+++ b/examples/files/thumbnails.svg
@@ -0,0 +1,63 @@
+
+
diff --git a/examples/index.html b/examples/index.html
index 5197eea136ffc8aa0437eb2fafd2680371dd7d80..ca71ace28e77d70d17013988a930e3f82bf30f07 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -31,16 +31,10 @@
-
-
Previews
-
-
On
-
Off
+
+
-
-
-
@@ -60,9 +54,9 @@
var expandButton = document.getElementById( 'expandButton' );
var viewSrcButton = document.getElementById( 'button' );
var panelScrim = document.getElementById( 'panelScrim' );
- var toggleOn = document.getElementById( 'toggleOn' );
- var toggleOff = document.getElementById( 'toggleOff' );
- var previews = document.getElementsByClassName('cover');
+
+ var previewsToggler = document.getElementById( 'previewsToggler' );
+ var previewsVisible = true;
var links = {};
var selected = null;
@@ -161,23 +155,26 @@
};
- toggleOn.onclick = function ( event ) {
+ previewsToggler.onclick = function ( event ) {
event.preventDefault();
- toggleOff.classList.remove('selected');
- toggleOn.classList.add( 'selected' );
- for(i = 0; i< previews.length; i++){
- previews[i].style.display = 'block';
- }
- };
- toggleOff.onclick = function ( event ) {
+ var styles = document.styleSheets[ 0 ];
+
+ if ( previewsVisible ) {
+
+ styles.insertRule( '.cover { display: none } ', 0 );
+
+ previewsToggler.style.opacity = 1;
+ previewsVisible = false;
+
+ } else {
+
+ styles.deleteRule( 0 );
+
+ previewsToggler.style.opacity = 0.25;
+ previewsVisible = true;
- event.preventDefault();
- toggleOn.classList.remove('selected');
- toggleOff.classList.add( 'selected' );
- for(i = 0; i< previews.length; i++){
- previews[i].style.display = 'none';
}
};
diff --git a/files/main.css b/files/main.css
index f9f035436185e98d3955d6177e62bda2a8f213ab..2ca838b42aa774c2107cd0d2bf46c157b7d2fb01 100644
--- a/files/main.css
+++ b/files/main.css
@@ -30,6 +30,10 @@
--border-style: 1px solid #444;
}
+ #previewsToggler {
+ filter: invert(100%);
+ }
+
}
@font-face {
@@ -121,19 +125,6 @@ h1 a {
margin-left: 6px;
font-size: .9rem;
}
-#previewToggle {
- display: flex;
- height: var(--header-height);
- border-bottom: var(--border-style);
- align-items: center;
-}
-#previewToggle h2 {
- padding-left: var(--panel-padding);
- flex: 1;
- display: flex;
- align-items: center;
- color: var(--color-blue);
-}
#panel {
position: fixed;
z-index: 100;
@@ -294,8 +285,16 @@ h1 a {
overflow: hidden;
display: flex;
flex-direction: column;
- transform: translate3d(0,0,0);
}
+
+ #previewsToggler {
+ cursor: pointer;
+ float: right;
+ margin-top: 18px;
+ margin-bottom: -18px;
+ opacity: 0.25;
+ }
+
#panel #content {
flex: 1;
overflow-y: auto;
@@ -352,37 +351,6 @@ h1 a {
padding-top: 6px;
}
- #panel #toggles {
- display: flex;
- justify-content: center;
- z-index: 1000;
- position: relative;
- height: 100%;
- align-items: center;
- font-weight: 500;
- }
- #panel #toggles * {
- padding: 0 var(--panel-padding);
- height: 100%;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- #panel #toggles .selected:after {
- content: "";
- position: absolute;
- left: 0;
- right: 0;
- bottom: -1px;
- border-bottom: 1px solid var(--text-color);
- }
-
- #panel #toggles :hover,
- #panel #toggles .selected {
- color: var(--color-blue);
- }
-
.spacer {
color: var(--secondary-text-color);
margin-left: 2px;