footnotes/css/dev-common.css

/*<?php for docblocks
/**
 * Created by Stefan Herndler.
 * User: Stefan
 * Created-Date: 15.05.14
 * Created-Time: 16:21
 * Since: 1.0
 * 
 * @version 2.5.6
 * @lastmodified 2021-02-19T1523+0100
 *
 *     Classes recommended for Custom CSS:
 *     @see templates/dashboard/customize-css-new.html
 *
 * System of unified minified style sheets tailored to the needs of the instance.
 * 
 * - Update: Stylesheets: increase speed and energy efficiency by tailoring stylesheets to the needs of the instance, thanks to @docteurfitness design contribution.
 * - Bugfix: Stylesheets: minify to shrink the carbon footprint, increase speed and implement best practice, thanks to @docteurfitness issue report.
 *
 * @since 2.5.5
 * @date 2021-02-14T1543+0100
 *
 * @contributor @docteurfitness
 * @link https://wordpress.org/support/topic/simply-speed-optimisation/
 *
 * @reporter @docteurfitness
 * @link https://wordpress.org/support/topic/simply-speed-optimisation/
 *
 * Six development stylesheets are concatenated to 12 unified stylesheets.
 * @see development/csscat.sh
 * Once these are minified, the temporary files are deleted to streamline 
 * the plugin’s codebase.
 * The stylesheet file names consist of "footnotes-" and a code showing 
 * which additional stlesheets enter into its composition:
 * 
 * The first part of the code contains 4 letters showing whether tooltips
 * are enabled, and if so, which implementation: jQuery or alternative:
 *  nott  ➜ no tooltips           ➜ -
 *  jqtt  ➜ jQuery tooltips       ➜ dev-tooltips.css
 *  altt  ➜ alternative tooltips  ➜ dev-tooltips.css & dev-tooltips-alternative.css
 * 
 * The second part of the code consists of the 4 letters "brpl", for 
 * Basic Responsive Page Layout, followed by a digit showing if a fix 
 * is applied, and if so, which one:
 *  0  ➜ -
 *  1  ➜ dev-layout-reference-container.css  ➜ (only)
 *  2  ➜ dev-layout-entry-content.css        ➜ article without the title
 *  3  ➜ dev-layout-main-content.css         ➜ the article with its title
 * 
 * The dashboard stylesheet is minified as-is.
 * @see class/dashboard/layout.php
 * 
 * @since 2.0.0  various.
 * @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
 */

/**
 * 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.
 *
 * The span is wrapped around URLs that are not values
 * of HTML arguments, parameters or folder names.
 * @see class/task.php
 *
 * These rules aren’t cross-browser compatible:
 * word-break: break-word;
 * overflow-wrap: anywhere;
 * word-wrap: anywhere;
 * word-break: break-all;
 *
 *
 * - 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
 *
 * These rules turn out useless for the purpose and are commented out:
 * word-wrap: break-word;
 * overflow-wrap: break-word;
 */

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

/**
 * Optional hard links: anchors with scroll offset
 *
 * - Adding: Referrers and backlinks: optional hard links for AMP compatibility, thanks to @psykonevro bug report, thanks to @martinneumannat code contribution.
 *
 * @since 2.3.0
 * @contributor @martinneumannat
 * @link https://wordpress.org/support/topic/making-it-amp-compatible/
 * @reporter @psychonevro
 * @link https://wordpress.org/support/topic/footnotes-is-not-amp-compatible/
 *
 * Although often skipped as unstraightforward, or believed impossible,
 * an offset hard link anchor can be coded out of a fragment identifier
 * span with absolute position nested in a span with relative position.
 */

.footnote_item_base,
.footnote_referrer_base {
	position: absolute;
}

.footnote_item_anchor,
.footnote_referrer_anchor {
	position: relative;
}

/**
 * Footnote referrers and tooltips
 *
 * @see templates/public/footnote.html
 * @see templates/public/footnote-alternative.html
 *
 * .footnote_referrer            = enclosing <span>
 * .footnote_plugin_tooltip_text = inner <sup>
 * .footnote_tooltip             = inner <span>
 */

.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 referrer (not “tooltip text”)
 *
 * - Bugfix: Referrers: line height 0 to fix superscript, thanks to @cwbayer bug report.
 *
 * @since 2.1.1
 * @reporter @cwbayer
 * @link https://wordpress.org/support/topic/footnote-number-in-text-superscript-disrupts-leading/
 *
 * - Bugfix: Tooltips: fix jQuery positioning bug moving tooltips out of view and affecting (TablePress tables in) some themes, thanks to @wisenilesh bug report.
 *
 * @since 2.5.4
 * @reporter @wisenilesh
 * @link https://wordpress.org/support/topic/footnotes-not-working-properly-inside-the-tables-of-tablepress-plugin/
 */

.footnote_plugin_tooltip_text {
	line-height: 0;
	position: relative !important;
	cursor: pointer;
}

/**
 * Tooltips
 * 
 * - Bugfix: Tooltips: set z-index to maximum 2147483647 to address display issues with overlay content, thanks to @russianicons bug report.
 * 
 * @since 2.1.6
 * @reporter @russianicons
 * @link 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 tooltips
 * 
 * These default position values may be overridden by internal CSS.
 */

.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
stylesheets:
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,
	.footnote_container_prepare > p > span:nth-child(3) {
	text-align: start !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;
	}
}

/**
 * MCI Footnotes logo
 *
 * The classes with 'heading' fixing display in dashboard
 * have all their rules moved to settings.css so as to alleviate
 * the common stylesheet. Still these rules are only used if the
 * Footnotes ad link logo is present in the page footer per user
 * dashboard setting. Making these rules conditional like those 
 * pertaining to tooltips, either jQuery or alternative, would 
 * double the number of united minified stylesheets shipped with
 * the plugin. Hence these are present by default at the bottom.
 *
 * @see class/config.php
 * @see css/settings.css
 */

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

.footnotes_logo_part1 {
	color: #2bb975;
}

.footnotes_logo_part2 {
	color: #545f5a;
}