footnotes/css/public.css

/**
 * Created by Stefan Herndler.
 * User: Stefan
 * Created-Date: 15.05.14
 * Created-Time: 16:21
 * Since: 1.0
 *
 * Version: 2.1.4
 *
 * Last modified: 2020-12-06T1649+0100
 */


/*****************************************************
MCI Footnotes logo
The classes with 'heading' fix display in dashboard

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

prevent URLs from expanding the reference container
in mobile view, or from hanging out of the tooltip

based on pattern, not link element
class/task.php

not 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/public/footnote.html
templates/public/footnote-alternative.html

.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: 999;
    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 references container

templates/public/reference-container.html

Also optional responsive basic page layout support:
public-container.css
public-main.css
*/

/*
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 {
    width: 100%;
    border: none;
}

/*
footnotes
reference-container-body.html
*/
.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)*/
    }
}