minetestblog.github.io/_sass/_barefoot.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;
  }
}