This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#looks like something broke when upgrading WP or PHP will need to revisit this to get it working with latest releases... | |
.footnote-button { | |
position: relative; | |
z-index: 5; | |
top: -0.2em; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
display: inline-block; | |
padding: 0.325em; | |
margin: 0 0.1em 0 0.2em; | |
height: .9em; | |
width: 1.78em; | |
border: none; | |
border-radius: 0.6em; | |
cursor: pointer; | |
opacity: 0.3; | |
background-color: #464646; | |
-webkit-backface-visibility: hidden; | |
line-height: 0; | |
vertical-align: middle; | |
text-decoration: none; | |
font-smoothing: antialiased; | |
-webkit-transition: opacity; | |
-moz-transition: opacity; | |
-ms-transition: opacity; | |
transition: opacity; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
} | |
.footnote-button:hover { | |
opacity: 0.6; | |
} | |
.footnote-button:active { | |
opacity: 0.6; | |
} | |
.footnote-button.active { | |
opacity: 0.9; | |
-webkit-transition-delay: 0.15s; | |
-moz-transition-delay: 0.15s; | |
transition-delay: 0.15s; | |
} | |
.footnote-button:before { | |
content: attr(data-footnote-number); | |
position: absolute; | |
bottom: 0.73em; | |
left: 0; | |
right: 0; | |
display: block; | |
font-size: 0.67em; | |
color: white; | |
font-family: inherit; | |
font-weight: bold; | |
font-style: normal; | |
line-height: 0; | |
text-align: center; | |
-webkit-backface-visibility: hidden; | |
} | |
@media not print { | |
.footnote-print-only { | |
display: none !important; | |
} | |
} | |
@media print { | |
.footnote-button { | |
display: none !important; | |
} | |
} | |
.footnote-content { | |
position: fixed; | |
z-index: 10; | |
bottom: auto; | |
left: auto; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
max-width: 90%; | |
margin: 1.21924em auto; | |
display: inline-block; | |
background: #fafafa; | |
opacity: 0; | |
border-radius: 0.5em; | |
border: 1px solid #c3c3c3; | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
-webkit-transition: opacity, -webkit-transform; | |
-moz-transition: opacity, -moz-transform; | |
-ms-transition: opacity, -ms-transform; | |
transition: opacity, transform; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
} | |
.footnote-content:not(.fixed-bottom) { | |
-webkit-transform: scale(0.1) translateZ(0); | |
-moz-transform: scale(0.1) translateZ(0); | |
-ms-transform: scale(0.1) translateZ(0); | |
-o-transform: scale(0.1) translateZ(0); | |
transform: scale(0.1) translateZ(0); | |
-webkit-transform-origin: 50% 0; | |
-moz-transform-origin: 50% 0; | |
-ms-transform-origin: 50% 0; | |
-o-transform-origin: 50% 0; | |
transform-origin: 50% 0; | |
} | |
.footnote-content.active:not(.fixed-bottom) { | |
-webkit-transform: scale(1) translateZ(0); | |
-moz-transform: scale(1) translateZ(0); | |
-ms-transform: scale(1) translateZ(0); | |
-o-transform: scale(1) translateZ(0); | |
transform: scale(1) translateZ(0); | |
opacity: 0.97; | |
} | |
.footnote-content.bottom { | |
-webkit-transform-origin: top; | |
-moz-transform-origin: top; | |
-ms-transform-origin: top; | |
-o-transform-origin: top; | |
transform-origin: top; | |
} | |
.footnote-content.top { | |
-webkit-transform-origin: bottom; | |
-moz-transform-origin: bottom; | |
-ms-transform-origin: bottom; | |
-o-transform-origin: bottom; | |
transform-origin: bottom; | |
} | |
.footnote-content.fixed-bottom { | |
bottom: 0 !important; | |
top: auto !important; | |
left: 0 !important; | |
width: 100%; | |
max-width: 100%; | |
margin: 0; | |
-webkit-transform: translateY(105%); | |
-moz-transform: translateY(105%); | |
-ms-transform: translateY(105%); | |
-o-transform: translateY(105%); | |
transform: translateY(105%); | |
border-radius: 0; | |
opacity: 1; | |
-webkit-transition: -webkit-transform; | |
-moz-transition: -moz-transform; | |
-ms-transition: -ms-transform; | |
transition: transform; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
} | |
.footnote-content.fixed-bottom.active { | |
-webkit-transform: translateY(0); | |
-moz-transform: translateY(0); | |
-ms-transform: translateY(0); | |
-o-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.footnote-content.fixed-bottom .footnote-main-wrapper { | |
max-width: 90%; | |
width: 22em; | |
margin: 0 auto; | |
} | |
.footnote-content.fixed-bottom .tooltip { | |
display: none; | |
} | |
.footnote-content.scrollable:after { | |
content: '...'; | |
position: fixed; | |
bottom: 0.45em; | |
right: 50%; | |
z-index: 20; | |
width: 1.5em; | |
margin-right: -0.75em; | |
opacity: 1; | |
background-color: #fafafa; | |
font-family: Georgia; | |
font-weight: bold; | |
font-size: 1.8em; | |
text-align: center; | |
color: rgba(0, 0, 0, 0.08); | |
line-height: 0; | |
-webkit-transition: opacity; | |
-moz-transition: opacity; | |
-ms-transition: opacity; | |
transition: opacity; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
-webkit-transition-delay: 0.4s; | |
-moz-transition-delay: 0.4s; | |
transition-delay: 0.4s; | |
} | |
.footnote-content.scrollable.fully-scrolled:after { | |
opacity: 0; | |
-webkit-transition-delay: 0s; | |
-moz-transition-delay: 0s; | |
transition-delay: 0s; | |
} | |
.footnote-content.scrollable .footnote-main-wrapper:before, .footnote-content.scrollable .footnote-main-wrapper:after { | |
content: ' '; | |
position: absolute; | |
width: 100%; | |
z-index: 12; | |
} | |
.footnote-content.scrollable .footnote-main-wrapper:before { | |
top: -1px; | |
left: 0; | |
height: 1.1em; | |
border-radius: 0.5em 0.5em 0 0; | |
background: #fafafa; | |
background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); | |
background: -webkit-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -o-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -ms-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: linear, to bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%; | |
} | |
.footnote-content.scrollable .footnote-main-wrapper:after { | |
bottom: -1px; | |
left: 0; | |
height: 1.2em; | |
border-radius: 0 0 0.5em 0.5em; | |
background: #fafafa; | |
background: -moz-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); | |
background: -webkit-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -o-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: -ms-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); | |
background: linear, to top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%; | |
} | |
.footnote-content ::-webkit-scrollbar { | |
display: none; | |
} | |
.footnote-main-wrapper { | |
position: relative; | |
z-index: 14; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
overflow: hidden; | |
margin: 0; | |
max-width: 22em; | |
background-color: #fafafa; | |
border-radius: 0.5em; | |
-webkit-transition: max-height; | |
-moz-transition: max-height; | |
-ms-transition: max-height; | |
transition: max-height; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
} | |
.footnote-content-wrapper { | |
position: relative; | |
z-index: 8; | |
max-height: 15em; | |
padding: 1.1em 1.3em 1.2em; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
background: #fafafa; | |
border-radius: 0.5em; | |
-webkit-font-smoothing: subpixel-antialiased; | |
} | |
.footnote-content-wrapper img { | |
max-width: 100%; | |
} | |
.footnote-content-wrapper *:last-child { | |
margin-bottom: 0; | |
} | |
.footnote-content-wrapper *:first-child { | |
margin-top: 0; | |
} | |
.tooltip { | |
position: absolute; | |
z-index: 12; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
margin-left: -0.65em; | |
width: 1.3em; | |
height: 1.3em; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
background: #fafafa; | |
border: 1px solid #c3c3c3; | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
border-top-left-radius: 0; | |
} | |
.bottom .tooltip { | |
top: -0.65em; | |
bottom: auto; | |
} | |
.top .tooltip { | |
bottom: -0.65em; | |
top: auto; | |
} | |
.footnotes{ | |
font-size: .75em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment