Rumperuu/footnotes
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
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/dev-common.css

533 lines
16 KiB
CSS
Raw Normal View History

Convert EOL from CRLF to LF. to make footnotes/trunk/ diffable against the standardised codebase on GitHub markcheret/footnotes/. Stable Tag remains 2.5.10. git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2483994 b8457f37-d9ea-0310-8a92-e5e31aec5664
2021-03-02 03:09:34 +00:00
/*<?php for docblocks
/**
* Created by Stefan Herndler.
* User: Stefan
* Created-Date: 15.05.14
* Created-Time: 16:21
* Since: 1.0
*
* @version 2.5.8
* @lastmodified 2021-02-28T1320+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;
}
/*****************************************************
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;
}
/**
* Reference container label.
*
* - Bugfix: Layout: support right-to-left writing direction by replacing remaining CSS values 'left' with 'start', thanks to @arahmanshaalan bug report.
*
* @since 2.5.8
* @reporter @arahmanshaalan
* @link https://wordpress.org/support/topic/right-to-left-text-problem/
*/
.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: start !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 list.
*
* - Bugfix: Reference container: no borders around footnotes, thanks to @ragonesi bug report.
*
* @since 2.0.0
* @reporter @ragonesi
* @link https://wordpress.org/support/topic/thin-box-around-notes-in-reference-container/
*
* - Bugfix: Reference container: enforce borderless table cells, thanks to @ragonesi bug report.
*
* @since 2.0.1
* @reporter @ragonesi
* @link https://wordpress.org/support/topic/box-around-c-references-container/
*
* - Bugfix: Layout: support right-to-left writing direction by replacing remaining CSS values 'left' with 'start', thanks to @arahmanshaalan bug report.
* - Bugfix: Layout: support right-to-left writing direction by enabling mirrored paddings on HTML dir="rtl" pages, thanks to @arahmanshaalan bug report.
*
* @since 2.5.8
* @reporter @arahmanshaalan
* @link https://wordpress.org/support/topic/right-to-left-text-problem/
*/
.footnote_plugin_index,
.footnote_plugin_index_combi,
.footnote_plugin_symbol,
.footnote_plugin_text {
border: none !important;
text-align: start !important;
vertical-align: top !important;
padding: 5px 6px 10px 0 !important;
}
html[dir="rtl"] .footnote_plugin_index,
html[dir="rtl"] .footnote_plugin_index_combi,
html[dir="rtl"] .footnote_plugin_symbol,
html[dir="rtl"] .footnote_plugin_text {
padding: 5px 0 10px 6px !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;
}
Reference in a new issue Copy permalink