This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
footnotes/css/public.css

511 lines
14 KiB
CSS
Raw Normal View History

/**
* Created by Stefan Herndler.
* User: Stefan
* Created-Date: 15.05.14
* Created-Time: 16:21
* Since: 1.0
*/
/* Version: 2.5.2
Last modified: 2021-01-20T0007+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.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 dont, 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 mustnt be broken anywhere.
class/task.php
These rules arent 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;
}
/*****************************************************
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
*/
/*
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 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 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;
}
}