footnotes/css/public.css

/**
 * Created by Stefan Herndler.
 * User: Stefan
 * Created-Date: 15.05.14
 * Created-Time: 16:21
 * Since: 1.0
 *
 * Version: 2.2.0d0
 *
 * Last modified: 2020-12-09T1608+0100
 */


/*****************************************************
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;
}

/*****************************************************
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;
*/

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

/*****************************************************
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>
*/

.footnote_referrer,
.footnote_referrer a,
.footnote_referrer:link,
.footnote_referrer a:link,
.main-content .footnote_referrer,
.main-content .footnote_referrer a,
.main-content .footnote_referrer:link,
.main-content .footnote_referrer a:link,
.footnote_plugin_tooltip_text {
    text-decoration: none !important;
    border-bottom: none !important;
    line-height: 0;
    cursor: pointer;
}
.footnote_referrer:hover,
.footnote_referrer a:hover,
.footnote_plugin_tooltip_text:hover {
    text-decoration: none;
    font-weight: inherit;
}

.footnote_tooltip {
    display: none;
    z-index: 99999;
    cursor: auto;
    text-align: left;
    padding: 12px;
    line-height: 1.2;
    /*font-size: inherit; moved to settings since 2.1.4 */
    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-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 0ms;
}
/*
fade-out parameters
*/
.footnote_tooltip.hidden {
    visibility: hidden;
    opacity: 0;
    transition-property: visibility opacity;
    transition-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 400ms;
}

/*
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>
.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_link                         = <a> or <span> if identical footnotes are not combined, or second <td> in 3-column table
.footnote_backlink                            = <a> or <span> if identical footnotes are combined, or in second <td> in 3-column table
.footnote_index_arrow                         = nested <span>, symbol only
.footnote_plugin_text                         = second <td>, or third <td> in 3-column table


*/

/*
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;
    border-bottom: 1px solid #aaaaaa !important;
    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;
}
.footnote_container_prepare > p > span:last-child a {
    text-decoration: none !important;
}

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

/*
footnotes
*/
.footnote_plugin_index,
.footnote_plugin_index_combi,
.footnote_plugin_link,
.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;
}

.footnote_index,
.footnote_backlink,
.footnote_plugin_index.pointer,
.footnote_plugin_index_combi.pointer {
    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 defauls 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,
but it takes a wrapper to avoid a page break before the table.

UI elements - expand button, arrows - are hidden in print;
link styling is reverted so as to not gray out referrers/numbers.
 */

.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;
    }
    div.post-meta-edit-link-wrapper { /*Edit button in WP2020*/
        display: none;  /*(added as a service)*/
    }
}