finally a real fix - just set overflow on code, not pre
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
diff --git a/prism-coy.css b/prism-coy.css
index 4b17aec..2450826 100644
--- a/prism-coy.css
+++ b/prism-coy.css
@@ -3,6 +3,7 @@
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
* @author Tim Shedor
*/
+
code[class*="language-"],
pre[class*="language-"] {
color: black;
@@ -20,8 +21,6 @@ pre[class*="language-"] {
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
- display: block;
- overflow: auto;
}
/* Code blocks */
@@ -29,28 +28,41 @@ pre[class*="language-"] {
position:relative;
padding: 1em;
margin: .5em 0;
- -webkit-box-shadow: 0px 14px 29px -21px gray;
- -moz-box-shadow: 0px 14px 29px -21px gray;
- box-shadow: 0px 14px 29px -21px gray;
+ -webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+ -moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+ box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
border-left: 10px solid #358ccb;
- display: block;
background-color: #fdfdfd;
+ background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+ background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+ background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+ background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
- background-size: 48px 48px;
+ background-size: 3em 3em;
background-origin:content-box;
- display: block;
+ overflow:visible;
+ max-height:30em;
+}
+
+code[class*="language"] {
+ max-height:29em;
+ display:block;
+ overflow:scroll;
}
+/* Margin bottom to accomodate shadow */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color:#fdfdfd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+ margin-bottom: 1em;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
+ position:relative;
padding: .2em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
@@ -61,6 +73,37 @@ pre[class*="language-"] {
border: 1px solid rgba(0, 0, 0, 0.1);
}
+pre[class*="language-"]:before,
+pre[class*="language-"]:after {
+ content: '';
+ z-index: -2;
+ display:block;
+ position: absolute;
+ bottom: 0.75em;
+ left: 0.18em;
+ width: 40%;
+ height: 20%;
+ -webkit-box-shadow: 0px 13px 8px #979797;
+ -moz-box-shadow: 0px 13px 8px #979797;
+ box-shadow: 0px 13px 8px #979797;
+ -webkit-transform: rotate(-2deg);
+ -moz-transform: rotate(-2deg);
+ -ms-transform: rotate(-2deg);
+ -o-transform: rotate(-2deg);
+ transform: rotate(-2deg);
+}
+
+:not(pre) > code[class*="language-"]:after,
+pre[class*="language-"]:after {
+ right: 0.75em;
+ left: auto;
+ -webkit-transform: rotate(2deg);
+ -moz-transform: rotate(2deg);
+ -ms-transform: rotate(2deg);
+ -o-transform: rotate(2deg);
+ transform: rotate(2deg);
+}
+
.token.comment,
.token.block-comment,
.token.prolog,
@@ -136,14 +179,8 @@ pre[class*="language-"] {
}
/* Plugin styles */
-
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
color: #e0d7d1;
-}
-
-pre[data-line] {
- position: relative;
- padding: 1em 0 1em 3em;
}
\ No newline at end of file