162 lines
3.0 KiB
SCSS
162 lines
3.0 KiB
SCSS
// Barefoot footnotes
|
|
//-------------------------------
|
|
|
|
.footnote-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
text-indent: 0;
|
|
}
|
|
|
|
.footnote-backdrop {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.footnote-button {
|
|
// background: rgba(110, 110, 110, .2);
|
|
background: var(--code-bg-color);
|
|
box-shadow: 0 1px 1px var(--shadow-color);
|
|
border: 0;
|
|
border-radius: .475em;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 1.5rem;
|
|
height: .95em;
|
|
line-height: 0;
|
|
margin: .2em .2em 0 .2em;
|
|
padding: .35em;
|
|
position: relative;
|
|
top: -.2em;
|
|
transition-duration: .25s;
|
|
transition-property: background;
|
|
/* vertical-align: super; */
|
|
vertical-align: middle;
|
|
width: 1.5em;
|
|
z-index: 5;
|
|
|
|
&:after {
|
|
font-family: 'icomoon';
|
|
content: "\e5d3";
|
|
/* numbered footnotes
|
|
content: attr(data-fn-number); */
|
|
// color: rgba(110, 110, 110, .5);
|
|
color: var(--text-color-light);
|
|
display: block;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: color .25s ease;
|
|
}
|
|
|
|
/* fix focus */
|
|
&:focus{
|
|
outline: none
|
|
}
|
|
&:hover {
|
|
// background: rgba(110, 110, 110, .5);
|
|
background: var(--table-header-color);
|
|
outline: none;
|
|
&:after {
|
|
color: var(--text-color);
|
|
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&.is-active {
|
|
// background: rgba(110, 110, 110, 1);
|
|
background: var(--table-border-color);
|
|
transition-delay: .1s;
|
|
&:after {
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bf-footnote {
|
|
background: var(--code-bg-color);
|
|
// border: 1px solid var(--code-border);
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
/* border-radius: .25em; */
|
|
left: 0;
|
|
margin: $magic 0;
|
|
max-width: 90vw;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transform-origin: 50% 0;
|
|
transition-duration: .25s;
|
|
transition-property: opacity;
|
|
transition-timing-function: ease;
|
|
z-index: 10;
|
|
|
|
&.footnote-is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.footnote-is-top {
|
|
bottom: 0;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
.footnote-wrapper {
|
|
background: inherit;
|
|
border-radius: .25em;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 22em;
|
|
z-index: 14;
|
|
/* nie dziala ??*/
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.footnote-tooltip {
|
|
background: inherit;
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
// border: 1px solid var(--code-border);
|
|
height: 1.3em;
|
|
position: absolute;
|
|
top: -.49em;
|
|
transform: rotate(45deg);
|
|
width: 1.3em;
|
|
z-index: 12;
|
|
|
|
.footnote-is-top & {
|
|
bottom: -.49em;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
.footnote-content {
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
line-height: $magic - .2em;
|
|
max-height: 15em;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 1em;
|
|
position: relative;
|
|
z-index: 8;
|
|
outline: none;
|
|
|
|
*:first-child {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
*:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
/* font-size for footnote content*/
|
|
p {
|
|
font-size: $footnote-font-size;
|
|
}
|
|
}
|