footnotes/css/public.css

/**
 * Created by Stefan Herndler.
 * User: Stefan
 * Created-Date: 15.05.14
 * Created-Time: 16:21
 * Since: 1.0
 */

/* Version: 2.5.4

Last modified: 2021-02-12T1709+0100


        Classes recommended for Custom CSS are listed in
        templates/dashboard/customize-css-new.html


Edited:

@since 2.0.0  Referrers: vertical align: lower from top: 0.4em to top: 0.6em
@since 2.0.0  Tooltips: Font size: set to inherit instead of 13px
@since 2.0.0  Tooltips: Continue button: apply distinctive font color and font style
@since 2.0.0  Tooltips: fix bug displaying content inline when page is printed, thanks to @gernsheim bug report
@since 2.0.0  Reference container: Collapse button: fix text decoration
@since 2.0.1  enforce borderless table cells through !important property, thanks to @ragonesi bug report
@since 2.1.1  Referrers: line height 0 to fix superscript, thanks to @cwbayer bug report
@since 2.1.1  Bugfix: Tooltips: fix line breaking for hyperlinked URLs in Unicode-non-compliant user agents, thanks to @andreasra bug report.
@since 2.1.6  set z-index to maximum 2147483647 to address display issues with overlay content, thanks to @russianicons bug report
@since 2.3.0  offset anchors for optional hard links, thanks to @psychonevro @martinneumannat bug reports
@since 2.4.0  validation error warning box
@since 2.5.0  validation error warning box more paragraphs
*/


/*****************************************************
MCI Footnotes logo

The classes with 'heading' fix display in dashboard,
where since WordPress 5.5 settings box labels with
spans are displayed as justified and not last line.

class/config.php
css/settings.css
*/

.footnotes_logo,
.footnotes_logo:hover,
.footnotes_logo_heading {
    text-decoration: none;
    font-weight: normal;
}

.footnotes_logo_part1,
.footnotes_logo_part1_heading {
    color: #2bb975;
}

.footnotes_logo_part2,
.footnotes_logo_part2_heading {
    color: #545f5a;
}

/*****************************************************
Validation error warning displayed below post title

The presence of unbalanced footnote start short codes
significantly alters the post display and may cause an
issue with missing content or footnotes, while it may
be hard to detect in long posts and under deadline.

A validation check displays a warning box below the
post title, populated with 300 characters of content
preceded by the first unbalanced start tag short code.

@since 2.4.0
@since 2.5.0  improvement increased paragraph number
*/

.footnotes_validation_error {
    border: 4px solid red;
    padding: 20px 40px;
    margin: 20px 0;
    background: #ff000055;
    text-align: start;
}

.footnotes_validation_error p:first-child {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.footnotes_validation_error p:nth-child(2) {
    font-size: 16px;
    font-style: italic;
}

.footnotes_validation_error p:nth-child(3) {
    font-size: 14px;
    font-weight: bold;
}

.footnotes_validation_error p:last-child {
    font-size: 12px;
}

/*****************************************************
Long URLs in Unicode-non-compliant user agents

Unicode recommends to break URLs at slashes, but
some browsers don’t, so we need to prevent URLs
from expanding the reference container in mobile view,
or from hanging out of the tooltip even on desktop.

Based on pattern, not link element, since some URLs
are not hyperlinked, while often the hyperlink text
is common language, that mustn’t be broken anywhere.

class/task.php

These rules aren’t cross-browser compatible:
word-break: break-word;
overflow-wrap: anywhere;
word-wrap: anywhere;
word-break: break-all;

These rules turn out useless for the purpose and are commented out:
word-wrap: break-word;
overflow-wrap: break-word;


- Bugfix: Reference container, tooltips: URL wrap: enable the 'word-wrap: anywhere' rule, thanks to @rebelc0de bug report.

@since 2.5.4

@reporter @rebelc0de
@link https://wordpress.org/support/topic/footnotes-on-mobile-phones/#post-14037101
*/

.footnote_url_wrap {
	word-wrap: anywhere;
	overflow-wrap: anywhere;
	word-break: break-all;
}

/*****************************************************
Optional hard links

Anchors with scroll offset

@since 2.3.0  offset anchors for optional hard links, thanks to @psychonevro @martinneumannat bug reports
@see <https://wordpress.org/support/topic/making-it-amp-compatible/>
@see <https://wordpress.org/support/topic/footnotes-is-not-amp-compatible/>
*/

.footnote_item_base,
.footnote_referrer_base {
    position: absolute;
}

.footnote_item_anchor,
.footnote_referrer_anchor {
    position: relative;
}

/*****************************************************
Footnote referrers and tooltips

Templates:
templates/public/footnote.html
templates/public/footnote-alternative.html

Classes:
.footnote_referrer            = enclosing <span>
.footnote_plugin_tooltip_text = inner <sup>
.footnote_tooltip             = inner <span>

@since 2.1.1  Referrers: line height 0 to fix superscript, thanks to @cwbayer bug report
@see <https://wordpress.org/support/topic/footnote-number-in-text-superscript-disrupts-leading/>
*/

.footnote_referrer,
.footnote_referrer:link,
.footnote_referrer:hover,
.footnote_referrer > a,
.footnote_referrer > a:link,
.footnote_referrer > a:hover,
.footnote_plugin_tooltip_text,
.footnote_plugin_tooltip_text:hover,
.main-content .footnote_referrer,
.main-content .footnote_referrer:link,
.main-content .footnote_referrer:hover,
.main-content .footnote_referrer > a,
.main-content .footnote_referrer > a:link,
.main-content .footnote_referrer > a:hover,
.main-content .footnote_plugin_tooltip_text,
.main-content .footnote_plugin_tooltip_text:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.footnote_plugin_tooltip_text {
    line-height: 0;
    cursor: pointer;
}

/*
tooltips

@since 2.1.6  set z-index to maximum 2147483647 to address display issues with overlay content, thanks to @russianicons bug report
@see <https://wordpress.org/support/topic/counter-styles-not-working/#post-13767299>
*/

.footnote_tooltip {
    display: none;
    z-index: 2147483647 !important;
    cursor: auto;
    text-align: left;
    padding: 12px;
    line-height: 1.2;
    font-weight: normal;
    font-style: normal;
}

/*
alternative tooltip implementation
*/

.footnote_referrer.relative {
    position: relative;
}

.footnote_tooltip.position {
    display: unset;
    position: absolute;
    bottom: 24px;
    left: -50px;
    width: 400px;
}

/*
fade-in parameters
*/

.footnote_tooltip.shown {
    visibility: visible;
    opacity: 1;
    transition-property: visibility opacity;
    transition-timing-function: linear;
/*
property values of settings are inline CSS
    transition-delay: 0ms;
    transition-duration: 200ms;
*/
}

/*
fade-out parameters
*/

.footnote_tooltip.hidden {
    visibility: hidden;
    opacity: 0;
    transition-property: visibility opacity;
    transition-timing-function: linear;
/*
property values of settings are inline CSS
    transition-delay: 400ms;
    transition-duration: 200ms;
*/
}

/*
Read-on button
*/

.footnote_tooltip_continue {
    font-style: italic;
    color: green;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}

.footnote_tooltip_continue:hover {
    color: blue;
    text-decoration: underline !important;
}


/*****************************************************
Footnote reference container

Templates:
templates/public/reference-container.html
templates/public/reference-container-body.html
templates/public/reference-container-combi.html
templates/public/reference-container-switch.html
templates/public/reference-container-3column.html

Optional responsive basic page layout support
style sheets:
css/layout-reference-container.css
css/layout-main-content.css
css/layout-page-content.css

Classes:
.footnotes_reference_container                = enclosing <div>
.footnote_container_prepare                   = label <div>
.footnote_reference_container_label           = <span>
.footnote_reference_container_collapse_button = sibling <span>
.footnote-reference-container                 = misleading and inconsistent; alias:
.footnotes_table                              = <table>
.footnotes_plugin_reference_row               = <tr>
.footnote_plugin_index_combi                  = first <td> if identical footnotes are combined
.footnote_plugin_index                        = first <td> if not
.footnote_index                               = <a> or <span> in first <td> in 3-column table
.footnote_plugin_symbol                       = second <td> in 3-column table
.footnote_plugin_link                         = <a> or <span> (identical footnotes not combined)
.footnote_backlink                            = <a> or <span>
.footnote_index_arrow                         = nested <span>, symbol only
.footnote_plugin_text                         = second <td>, or third <td> in 3-column table
*/

.footnotes_reference_container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
label
*/

.footnote_container_prepare {
    display: block !important;
    padding-top: 24px !important;
}

.footnote_container_prepare > p {
    line-height: 1.3 !important;
    margin-top: 1em !important;
    margin-bottom: 0.25em !important;
    padding: 0 !important;
    font-weight: normal !important;
    /* bottom border optional since 2.2.5 */
    display: block !important;
    -webkit-margin-before: 0.83em !important;
    -webkit-margin-after: 0.83em !important;
    -webkit-margin-start: 0px !important;
    -webkit-margin-end: 0px !important;
    text-align: left !important;
    vertical-align: middle;
}

.footnote_container_prepare > p > span:first-child {
    text-align: left !important;
    font-size: 1.5em !important;
}

/*
collapse button
fully clickable, not sign only
*/

.footnote_reference_container_collapse_button {
    cursor: pointer;
    padding: 0 0.5em;
    font-size: 1.3em !important;
    vertical-align: 2px;
    text-decoration: none !important;
}

h2 > .footnote_reference_container_collapse_button,
h3 > .footnote_reference_container_collapse_button,
h4 > .footnote_reference_container_collapse_button,
h5 > .footnote_reference_container_collapse_button,
h6 > .footnote_reference_container_collapse_button {
    font-size: inherit !important;
}

.footnote_container_prepare > p > span:last-child a,
.footnote_reference_container_collapse_button a {
    text-decoration: none !important;
}

/*
table
*/

.footnote-reference-container,
.footnotes_table {
    width: 100%;
    border: none;
}

/*
footnotes

@since 2.0.0  borderless table cells, thanks to @ragonesi bug report
@see <https://wordpress.org/support/topic/thin-box-around-notes-in-reference-container/>
@since 2.0.1  enforce borderless text cells through !important property, thanks to @ragonesi bug report
@see <https://wordpress.org/support/topic/box-around-c-references-container/>
*/

.footnote_plugin_index,
.footnote_plugin_index_combi,
.footnote_plugin_symbol,
.footnote_plugin_text {
    border: none !important;
    text-align: left !important;
    vertical-align: top !important;
    padding: 5px 6px 10px 0 !important;
}

.footnote_backlink,
.footnote_backlink:link,
.footnote_plugin_link,
.footnote_plugin_link:link,
.main-content .footnote_backlink,
.main-content .footnote_backlink:link,
.main-content .footnote_plugin_link,
.main-content .footnote_plugin_link:link {
    text-decoration: none !important;
    border-bottom: none !important;
}

.footnote_backlink,
.footnote_plugin_link {
    white-space: nowrap;
}

.pointer,
.footnote_index,
.footnote_backlink {
    cursor: pointer;
}

/*
These rules when enabled cause the backlink to take an overline
when hovered in some themes, not in others:
.footnote_plugin_index:hover,
.footnote_plugin_index_combi:hover,
.footnote_plugin_index.pointer:hover,
.footnote_plugin_index_combi.pointer:hover,
*/

.footnote_backlink:hover,
.footnote_plugin_link:hover,
.footnote_plugin_text a:hover {
    text-decoration: unset;
    text-decoration: underline; /*deprioritized to ease customization*/
}

.footnote_plugin_text {
    width: unset;        /*unset width of text column to fix site issues*/
}

/*
These rules are just defaults preventing the table from filling the width.
They are not very effective by lack of table-layout: fixed;
since 2.1.4 settings are optionally available, with table-layout: fixed;

By default, the backlink column is auto-expanding to fit widest.
Not using 'max-content' as that causes no-wrap and overflows.
These are overridden if settings are enabled.
*/

.footnote_plugin_index,
.footnote_plugin_index_combi {
    max-width: 100px;
    width: 2.5em;
}

/*
Responsive
*/

@media only screen and (max-width: 768px) {

    .footnote_plugin_index,
    .footnote_plugin_index_combi {
        max-width: 80px;
    }
}


/****************************************************************
Footnotes printing style rules

Printing a table, browsers tend to avoid page breaks inside,
but it takes a wrapper to avoid a page break before the table
just after the reference container headline.

UI elements (expand/collapse button, backlink arrows) are hidden.

Link color set to inherit, so referrers/numbers are not grayed out.

@since 2.0.0  Tooltips: fix bug displaying content inline when page is printed, thanks to @gernsheim bug report
@see <https://wordpress.org/support/topic/printing-pdf-with-footnotes-generated-by-footnotes/>
 */

.footnotes_reference_container {
    page-break-inside: avoid;
}

@media print {

    .footnote_tooltip,
    .footnote_reference_container_collapse_button,
    .footnote_index_arrow {
        display: none;
    }

    .footnote_plugin_tooltip_text {
        color: inherit;
    }

    .footnote_plugin_index a,
    .footnote_plugin_index_combi a {
        color: inherit;
        text-decoration: none !important;
    }

    /* Edit button in WP2020 (added as a service) */
    div.post-meta-edit-link-wrapper {
        display: none;
    }
}