-
-
Save polymerist/e415e98464cd238e7666 to your computer and use it in GitHub Desktop.
Allows for using symbols as footnote placeholders in WP-Bigfoot plugin.
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
.footnote-button { | |
position: relative; | |
z-index: 5; | |
top: -0.3em; | |
box-sizing: border-box; | |
display: inline-block; | |
padding: 0.4em; | |
margin: 0 0.1em 0 none; | |
border: none; | |
border-radius: 0.3em; | |
cursor: pointer; | |
opacity: 1; | |
background-color: none; | |
line-height: 0; | |
vertical-align: middle; | |
text-decoration: none; | |
-webkit-transition-property: opacity; | |
-moz-transition-property: opacity; | |
-ms-transition-property: opacity; | |
transition-property: opacity; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
-ms-transition-duration: 0.25s; | |
transition-duration: 0.25s; } | |
.footnote-button:hover { | |
opacity: 1; } | |
.footnote-button:active { | |
opacity: 1; } | |
.footnote-button.active { | |
opacity: 1; | |
-webkit-transition-delay: 0.15s; | |
-moz-transition-delay: 0.15s; | |
-ms-transition-delay: 0.15s; | |
transition-delay: 0.15s; } | |
@font-awesome { | |
font-family: FontAwesome; | |
src: url(/wp-content/plugins/font-awesome-4-menus/css/font-awesome.css); | |
} | |
.footnote-button:before { | |
content: "\f0c3"; | |
position: absolute; | |
bottom: 0.6em; | |
left: 0; | |
right: 0; | |
display: block; | |
font-size: none; | |
color: black; | |
font-family: FontAwesome; | |
font-weight: normal; | |
font-style: normal; | |
line-height: 0; | |
text-align: center; } | |
.footnote-button:hover:before { | |
color: #448844; } | |
.footnote-content { | |
position: fixed; | |
z-index: 10; | |
bottom: auto; | |
left: auto; | |
font-size: 100%; | |
box-sizing: border-box; | |
max-width: 90%; | |
margin: 1.21924em auto; | |
display: inline-block; | |
-webkit-transform: scale(0.1) translateZ(0); | |
-moz-transform: scale(0.1) translateZ(0); | |
-ms-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; | |
transform-origin: 50% 0; | |
background: #f3fef3; | |
opacity: 0; | |
border-radius: 0.5em; | |
border: 1px solid #c3c3c3; | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
-webkit-transition-property: opacity, -webkit-transform; | |
-moz-transition-property: opacity, -moz-transform; | |
-ms-transition-property: opacity, -ms-transform; | |
transition-property: opacity, transform; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
-ms-transition-duration: 0.25s; | |
transition-duration: 0.25s; } | |
.footnote-content.active { | |
-webkit-transform: scale(1) translateZ(0); | |
-moz-transform: scale(1) translateZ(0); | |
-ms-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; | |
transform-origin: top; } | |
.footnote-content.top { | |
-webkit-transform-origin: bottom; | |
-moz-transform-origin: bottom; | |
-ms-transform-origin: bottom; | |
transform-origin: bottom; } | |
.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: #f3fef3; | |
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-property: opacity; | |
-moz-transition-property: opacity; | |
-ms-transition-property: opacity; | |
transition-property: opacity; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
-ms-transition-duration: 0.25s; | |
transition-duration: 0.25s; | |
-webkit-transition-delay: 0.4s; | |
-moz-transition-delay: 0.4s; | |
-ms-transition-delay: 0.4s; | |
transition-delay: 0.4s; } | |
.footnote-content.scrollable.fully-scrolled:after { | |
opacity: 0; | |
-webkit-transition-delay: 0s; | |
-moz-transition-delay: 0s; | |
-ms-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: #f3fef3; | |
background: -moz-linear-gradient(top, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3fef3), color-stop(50%, #f3fef3), color-stop(100%, rgba(243, 254, 243, 0))); | |
background: -webkit-linear-gradient(top, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -o-linear-gradient(top, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -ms-linear-gradient(top, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: linear-gradient(to bottom, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 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: #f3fef3; | |
background: -moz-linear-gradient(bottom, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #f3fef3), color-stop(50%, #f3fef3), color-stop(100%, rgba(243, 254, 243, 0))); | |
background: -webkit-linear-gradient(bottom, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -o-linear-gradient(bottom, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: -ms-linear-gradient(bottom, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); | |
background: linear-gradient(to top, #f3fef3 0%, #f3fef3 50%, rgba(243, 254, 243, 0) 100%); } | |
.footnote-content ::-webkit-scrollbar { | |
display: none; } | |
.footnote-main-wrapper { | |
position: relative; | |
z-index: 14; | |
box-sizing: border-box; | |
overflow: hidden; | |
margin: 0; | |
max-width: 22em; | |
background-color: #f3fef3; | |
border-radius: 0.5em; | |
-webkit-transition-property: max-height; | |
-moz-transition-property: max-height; | |
-ms-transition-property: max-height; | |
transition-property: max-height; | |
-webkit-transition-duration: 0.25s; | |
-moz-transition-duration: 0.25s; | |
-ms-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; | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
background: #f3fef3; | |
border-radius: 0.5em; } | |
.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; | |
margin-left: -0.65em; | |
width: 1.3em; | |
height: 1.3em; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(45deg); | |
background: #f3fef3; | |
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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment