Modified examples display & Add theme options

nzbin · Mar 25, 2018 · f66875b · f66875b
1 parent 61c419a
commit f66875b
Show file tree

Hide file tree

Showing 4 changed files with 388 additions and 273 deletions.
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -4,8 +4,12 @@
 
 .header {
   background-color: #2b2b2b;
-  background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), 
-                    linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
+  background-image: -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)),
+  -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25));
+  background-image: -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)),
+  -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25));
+  background-image: linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)),
+  linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25));;
   background-position: 0 0, 2px 2px;
   background-size: 4px 4px;
 }
@@ -37,8 +41,6 @@
   border-color: #aaa;
 }
 
-
-
 /* prettify style */
 
 pre ul,

diff --git a/docs/css/magnify-simple-theme.css b/docs/css/magnify-simple-theme.css
@@ -0,0 +1,30 @@
+.magnify-modal {
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);
+}
+
+.magnify-header .magnify-toolbar {
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.magnify-stage {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-width: 0;
+}
+
+.magnify-footer .magnify-toolbar {
+  background-color: rgba(0, 0, 0, .5);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.magnify-header,
+.magnify-footer {
+  pointer-events: none;
+}
+
+.magnify-button {
+  pointer-events: auto;
+}
diff --git a/docs/css/magnify-white-theme.css b/docs/css/magnify-white-theme.css
@@ -0,0 +1,62 @@
+.magnify-modal {
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, .85);
+  box-shadow: 0 0 1px 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 1px 10px 2px rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+.magnify-header {
+  height: 30px;
+}
+
+.magnify-title {
+  padding: 8px 10px;
+}
+
+.magnify-stage {
+  top: 30px;
+  right: 5px;
+  left: 5px;
+  background-color: #fff;
+  border-color: #666;
+}
+
+.magnify-title {
+  color: #333
+}
+
+.magnify-header .magnify-toolbar {
+  margin-right: 5px;
+}
+
+.magnify-header .magnify-button {
+  height: 22px;
+  padding: 0;
+  background-color: #eee;
+  color: #fff;
+  text-shadow: 0 0 1px #000;
+}
+
+.magnify-header .magnify-button:hover {
+  background-color: #ccc;
+}
+
+.magnify-header .magnify-button-close {
+  background-color: #ff6e6e;
+}
+
+.magnify-header .magnify-button-close:hover {
+  background-color: #ff4545;
+}
+
+.magnify-footer .magnify-button {
+  color: #666;
+}
+
+.magnify-footer .magnify-button:hover {
+  color: #333;
+}
+
+.magnify-loader {
+  background: transparent;
+}