refactor: split stylesheets into admin/public
This commit is contained in:
parent
ca3b283356
commit
67059b45cd
8 changed files with 0 additions and 0 deletions
68
src/public/css/dev-amp-tooltips.css
Normal file
68
src/public/css/dev-amp-tooltips.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Additional stylesheet for AMP compatible tooltips.
|
||||
*
|
||||
* - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 code contribution.
|
||||
* - Bugfix: Tooltips: enable accessibility by keyboard navigation, thanks to @westonruter code contribution.
|
||||
*
|
||||
* @since 2.5.11 (draft)
|
||||
* @since 2.6.0 (release)
|
||||
*
|
||||
* @contributor @milindmore22
|
||||
* @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
|
||||
*
|
||||
* @contributor @westonruter
|
||||
* @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
|
||||
*
|
||||
* To streamline internal CSS, immutable rules are in external stylesheet.
|
||||
* Property values of settings are internal CSS.
|
||||
* @see class/task.php
|
||||
*
|
||||
* System of unified minified style sheets tailored to the instance.
|
||||
* @see dev-common.css.
|
||||
*/
|
||||
|
||||
span.footnote_referrer > span.footnote_tooltip {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition-property: visibility, opacity;
|
||||
|
||||
/*
|
||||
transition-delay: 500ms;
|
||||
transition-duration: 1s;
|
||||
*/
|
||||
}
|
||||
|
||||
span.footnote_referrer:focus-within > span.footnote_tooltip,
|
||||
span.footnote_referrer:hover > span.footnote_tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-property: visibility, opacity;
|
||||
|
||||
/*
|
||||
transition-delay: 0;
|
||||
transition-duration: 200ms;
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Position.
|
||||
*
|
||||
* Values are defined by internal CSS.
|
||||
* @see class/task.php
|
||||
*/
|
||||
|
||||
.footnote_referrer.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footnote_tooltip.position {
|
||||
position: absolute;
|
||||
display: unset;
|
||||
|
||||
/*
|
||||
bottom: 24px;
|
||||
left: -50px;
|
||||
width: 400px;
|
||||
*/
|
||||
}
|
||||
609
src/public/css/dev-common.css
Normal file
609
src/public/css/dev-common.css
Normal file
|
|
@ -0,0 +1,609 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Created by Stefan Herndler.
|
||||
* User: Stefan
|
||||
* Created-Date: 15.05.14
|
||||
* Created-Time: 16:21
|
||||
* Since: 1.0
|
||||
*
|
||||
* Classes recommended for Custom CSS:
|
||||
* @see admin/partials/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.
|
||||
*
|
||||
* @reporter @docteurfitness
|
||||
* @link https://wordpress.org/support/topic/simply-speed-optimisation/
|
||||
*
|
||||
* @contributor @docteurfitness
|
||||
* @link https://wordpress.org/support/topic/simply-speed-optimisation/
|
||||
*
|
||||
* @since 2.5.5
|
||||
*
|
||||
* Six development stylesheets are concatenated to 12 unified stylesheets.
|
||||
* The unminified development stylesheets are distributed for reference.
|
||||
* Their minified versions are included for consistency and convenience.
|
||||
*
|
||||
* A production stylesheet file name consists 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, of which implementation:
|
||||
* ampt ➜ AMP compatible tooltips ➜ dev-tooltips.css & dev-amp-tooltips.css
|
||||
* altt ➜ alternative tooltips ➜ dev-tooltips.css & dev-tooltips-alternative.css
|
||||
* jqtt ➜ jQuery tooltips ➜ dev-tooltips.css
|
||||
* nott ➜ no tooltips ➜ -
|
||||
*
|
||||
* The second part of the code consists of the initialism of
|
||||
* 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 ➜ footnote list only
|
||||
* 2 ➜ dev-layout-entry-content.css ➜ post without title
|
||||
* 3 ➜ dev-layout-main-content.css ➜ title and post
|
||||
*
|
||||
* @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
|
||||
* @since 2.5.11 Bugfix: Reference container: apply web semantics to improve readability for assistive technologies, thanks to @derivationfr issue report and code contribution.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
margin: 20px 0;
|
||||
padding: 20px 40px;
|
||||
text-align: start;
|
||||
background: #f005;
|
||||
border: 4px solid red;
|
||||
}
|
||||
|
||||
.footnotes_validation_error p:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footnotes_validation_error p:nth-child(2) {
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.footnotes_validation_error p:nth-child(3) {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
word-break: break-all;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/**
|
||||
* Optional hard links: anchors with scroll offset.
|
||||
*
|
||||
* - Adding: Referrers and backlinks: optional hard links for AMP compatibility, thanks to @psykonevro issue report, thanks to @martinneumannat issue report and code contribution.
|
||||
*
|
||||
* @reporter @psychonevro
|
||||
* @link https://wordpress.org/support/topic/footnotes-is-not-amp-compatible/
|
||||
*
|
||||
* @contributor @martinneumannat
|
||||
* @link https://wordpress.org/support/topic/making-it-amp-compatible/
|
||||
*
|
||||
* @since 2.3.0
|
||||
*
|
||||
* - Bugfix: Referrers: Hard links: enforce scroll offset with '!important' property for surroundings specifying otherwise, thanks to @bogosavljev bug report.
|
||||
*
|
||||
* @reporter @bogosavljev
|
||||
* @link https://wordpress.org/support/topic/compatibility-issue-with-wpforms/
|
||||
*
|
||||
* @since 2.5.12
|
||||
*
|
||||
* 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: relative !important;
|
||||
}
|
||||
|
||||
.footnote_item_anchor,
|
||||
.footnote_referrer_anchor {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footnote referrers and tooltips
|
||||
*
|
||||
* @see public/partials/footnote.html
|
||||
* @see public/partials/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,
|
||||
.footnote_referrer,
|
||||
.footnote_referrer:link,
|
||||
.footnote_referrer:focus,
|
||||
.footnote_referrer > a,
|
||||
.footnote_referrer > a:link,
|
||||
.footnote_referrer > a:focus,
|
||||
.footnote_plugin_tooltip_text,
|
||||
.footnote_plugin_tooltip_text:focus,
|
||||
.main-content .footnote_referrer,
|
||||
.main-content .footnote_referrer:link,
|
||||
.main-content .footnote_referrer:focus,
|
||||
.main-content .footnote_referrer > a,
|
||||
.main-content .footnote_referrer > a:link,
|
||||
.main-content .footnote_referrer > a:focus,
|
||||
.main-content .footnote_plugin_tooltip_text,
|
||||
.main-content .footnote_plugin_tooltip_text:focus {
|
||||
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.
|
||||
*
|
||||
* @reporter @cwbayer
|
||||
* @link https://wordpress.org/support/topic/footnote-number-in-text-superscript-disrupts-leading/
|
||||
*
|
||||
* @since 2.1.1
|
||||
*
|
||||
* - Bugfix: Tooltips: fix jQuery positioning bug moving tooltips out of view and affecting (TablePress tables in) some themes, thanks to @wisenilesh bug report.
|
||||
*
|
||||
* @reporter @wisenilesh
|
||||
* @link https://wordpress.org/support/topic/footnotes-not-working-properly-inside-the-tables-of-tablepress-plugin/
|
||||
*
|
||||
* @since 2.5.4
|
||||
*/
|
||||
|
||||
.footnote_plugin_tooltip_text {
|
||||
position: relative !important;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************
|
||||
Footnote reference container
|
||||
|
||||
Templates:
|
||||
public/partials/reference-container.html
|
||||
public/partials/reference-container-body.html
|
||||
public/partials/reference-container-combi.html
|
||||
public/partials/reference-container-switch.html
|
||||
public/partials/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;
|
||||
}
|
||||
|
||||
.footnotes_reference_container .collapsed,
|
||||
.footnote_reference_container_collapse_button.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reference container label.
|
||||
*
|
||||
* - Bugfix: Layout: support right-to-left writing direction by replacing remaining CSS values 'left' with 'start', thanks to @arahmanshaalan bug report.
|
||||
*
|
||||
* @reporter @arahmanshaalan
|
||||
* @link https://wordpress.org/support/topic/right-to-left-text-problem/
|
||||
*
|
||||
* @since 2.5.8
|
||||
*/
|
||||
|
||||
.footnote_container_prepare {
|
||||
display: block !important;
|
||||
padding-top: 24px !important;
|
||||
}
|
||||
|
||||
.footnote_container_prepare > p {
|
||||
|
||||
/* bottom border optional since 2.2.5 */
|
||||
display: block !important;
|
||||
margin-top: 1em !important;
|
||||
margin-bottom: 0.25em !important;
|
||||
padding: 0 !important;
|
||||
font-weight: normal !important;
|
||||
line-height: 1.3 !important;
|
||||
text-align: start !important;
|
||||
vertical-align: middle;
|
||||
-webkit-margin-before: 0.83em !important;
|
||||
-webkit-margin-after: 0.83em !important;
|
||||
-webkit-margin-start: 0 !important;
|
||||
-webkit-margin-end: 0 !important;
|
||||
}
|
||||
|
||||
.footnote_container_prepare > p > span:first-child,
|
||||
.footnote_container_prepare > p > span:nth-child(3) {
|
||||
font-size: 1.5em !important;
|
||||
text-align: start !important;
|
||||
}
|
||||
|
||||
/*
|
||||
collapse button
|
||||
fully clickable, not sign only
|
||||
*/
|
||||
|
||||
.footnote_reference_container_collapse_button {
|
||||
padding: 0 0.5em;
|
||||
font-size: 1.3em !important;
|
||||
text-decoration: none !important;
|
||||
vertical-align: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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
|
||||
*/
|
||||
|
||||
.footnotes_table,
|
||||
.footnote-reference-container {
|
||||
width: 100% !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table caption for accessibility.
|
||||
*
|
||||
* - Bugfix: Reference container: apply web semantics to improve readability for assistive technologies, thanks to @derivationfr issue report and code contribution.
|
||||
*
|
||||
* @contributor @derivationfr
|
||||
* @link https://wordpress.org/support/topic/enhance-accesibility-by-using-instead-of/
|
||||
* @link https://a11y-101.com/development/tables
|
||||
*
|
||||
* @since 2.5.11
|
||||
*
|
||||
* The table caption must be present for screen readers but may be hidden to sighted users.
|
||||
*/
|
||||
|
||||
.footnotes_table caption.accessibility {
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin-top: -2px !important;
|
||||
overflow: hidden !important;
|
||||
color: #fff0 !important;
|
||||
white-space: nowrap !important;
|
||||
text-align: start;
|
||||
background-color: #fff0 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footnotes list, table header cells.
|
||||
*
|
||||
* - Bugfix: Reference container: debug footnotes number text color in the table header cells required for accessibility, thanks to @spaceling bug report.
|
||||
*
|
||||
* @reporter @spaceling
|
||||
* @link https://wordpress.org/support/topic/footnote-numbers-not-visible-in-2-6-0/
|
||||
*
|
||||
* @since 2.6.3
|
||||
* The background was fixed but not the text color.
|
||||
* The color mustn’t be inherited as that would disable link color.
|
||||
*/
|
||||
|
||||
.footnotes_table .footnotes_plugin_reference_row th {
|
||||
color: unset !important;
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footnotes list, table cell borders.
|
||||
*
|
||||
* - Bugfix: Reference container: no borders around footnotes, thanks to @ragonesi bug report.
|
||||
*
|
||||
* @reporter @ragonesi
|
||||
* @link https://wordpress.org/support/topic/thin-box-around-notes-in-reference-container/
|
||||
*
|
||||
* @since 2.0.0
|
||||
*
|
||||
* - Bugfix: Reference container: enforce borderless table cells, thanks to @ragonesi bug report.
|
||||
*
|
||||
* @reporter @ragonesi
|
||||
* @link https://wordpress.org/support/topic/box-around-c-references-container/
|
||||
*
|
||||
* @since 2.0.1
|
||||
*
|
||||
* - 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.
|
||||
*
|
||||
* @reporter @arahmanshaalan
|
||||
* @link https://wordpress.org/support/topic/right-to-left-text-problem/
|
||||
*
|
||||
* @since 2.5.8
|
||||
*/
|
||||
|
||||
.footnote_plugin_index,
|
||||
.footnote_plugin_index_combi,
|
||||
.footnote_plugin_symbol,
|
||||
.footnote_plugin_text {
|
||||
padding: 5px 6px 10px 0 !important;
|
||||
text-align: start !important;
|
||||
vertical-align: top !important;
|
||||
border: none !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,
|
||||
.footnote_backlink:focus,
|
||||
.footnote_plugin_link:focus,
|
||||
.footnote_plugin_text a:focus {
|
||||
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 {
|
||||
width: 2.5em;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
/*
|
||||
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,
|
||||
.footnotes_logo,
|
||||
.footnotes_logo:focus {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footnotes_logo_part1 {
|
||||
color: #2bb975;
|
||||
}
|
||||
|
||||
.footnotes_logo_part2 {
|
||||
color: #545f5a;
|
||||
}
|
||||
99
src/public/css/dev-layout-entry-content.css
Normal file
99
src/public/css/dev-layout-entry-content.css
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Basic responsive layout for the entry content div
|
||||
*
|
||||
* Based on Hello Elementor v2.3.0 Basic responsive layout
|
||||
* themes/hello-elementor/theme.css:8..31
|
||||
* Licensed under GNU General Public License v3 or later;
|
||||
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
|
||||
*
|
||||
* Since v2.1.4 of Footnotes
|
||||
*
|
||||
* Modified for 2.2.2
|
||||
* Modified for 2.2.5
|
||||
* Modified for 2.3.0
|
||||
*
|
||||
* The enqueuing of this stylesheet is optional and can be
|
||||
* enabled in the dashboard under General settings >
|
||||
* Reference container > Apply basic responsive page layout.
|
||||
**/
|
||||
|
||||
/***********************************************************
|
||||
Rationale
|
||||
|
||||
In Hello Elementor Theme, this applies to .site-header, and
|
||||
also to .site-main, which is a class of the <main> element,
|
||||
at the condition that the page is not built with Elementor:
|
||||
body:not([class*="elementor-page-"])
|
||||
Therefore, in pages built with Elementor, proper layout is
|
||||
applied only to features managed by Elementor, not others.
|
||||
|
||||
Footnotes reference containers are near the bottom of main.
|
||||
This stylesheet lets Footnotes’ reference containers come
|
||||
into the benefit of the basic responsive layout style rules
|
||||
that would apply if the page were not built with Elementor.
|
||||
|
||||
This is mainly useful with Hello Elementor, but it may help
|
||||
fix also other themes like Twenty Twenty-One for display in
|
||||
older browsers not yet supporting CSS variables.
|
||||
|
||||
Sources:
|
||||
.entry .entry-content <= Twenty Nineteen
|
||||
*/
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry .entry-content,
|
||||
main .entry .entry-content {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
93
src/public/css/dev-layout-main-content.css
Normal file
93
src/public/css/dev-layout-main-content.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Basic responsive layout for the main element
|
||||
*
|
||||
* Based on Hello Elementor v2.3.0 Basic responsive layout
|
||||
* themes/hello-elementor/theme.css:8..31
|
||||
* licensed under GNU General Public License v3 or later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
|
||||
*
|
||||
* Since v2.1.4 of Footnotes
|
||||
*
|
||||
* Last modified for v2.2.4
|
||||
*
|
||||
* The enqueuing of this stylesheet is optional and can be
|
||||
* enabled in the Reference container settings.
|
||||
**/
|
||||
|
||||
/***********************************************************
|
||||
Rationale
|
||||
|
||||
In Hello Elementor Theme, this applies to .site-header, and
|
||||
also to .site-main, which is a class of the <main> element,
|
||||
at the condition that the page is not built with Elementor:
|
||||
body:not([class*="elementor-page-"])
|
||||
Therefore, in pages built with Elementor, proper layout is
|
||||
applied only to features managed by Elementor, not others.
|
||||
|
||||
Footnotes reference containers are near the bottom of main.
|
||||
This stylesheet lets Footnotes’ reference containers come
|
||||
into the benefit of the basic responsive layout style rules
|
||||
that would apply if the page were not built with Elementor.
|
||||
|
||||
This is mainly useful with Hello Elementor, but it may help
|
||||
fix also other themes like Twenty Twenty-One for display in
|
||||
older browsers not yet supporting CSS variables.
|
||||
*/
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
main,
|
||||
.main-content,
|
||||
.site-main,
|
||||
div.hentry {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
87
src/public/css/dev-layout-reference-container.css
Normal file
87
src/public/css/dev-layout-reference-container.css
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Basic responsive layout for the reference container
|
||||
*
|
||||
* Based on Hello Elementor v2.3.0 Basic responsive layout
|
||||
* themes/hello-elementor/theme.css:8..31
|
||||
* licensed under GNU General Public License v3 or later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
|
||||
*
|
||||
* Since v2.1.4 of Footnotes
|
||||
*
|
||||
* Last modified for v2.2.4
|
||||
*
|
||||
* The enqueuing of this stylesheet is optional and can be
|
||||
* enabled in the Reference container settings.
|
||||
**/
|
||||
|
||||
/***********************************************************
|
||||
Rationale
|
||||
|
||||
In Hello Elementor Theme, this applies to .site-header, and
|
||||
also to .site-main, which is a class of the <main> element,
|
||||
at the condition that the page is not built with Elementor:
|
||||
body:not([class*="elementor-page-"])
|
||||
Therefore, in pages built with Elementor, proper layout is
|
||||
applied only to features managed by Elementor, not others.
|
||||
|
||||
Footnotes reference containers are near the bottom of main.
|
||||
This stylesheet lets Footnotes’ reference containers come
|
||||
into the benefit of the basic responsive layout style rules
|
||||
that would apply if the page were not built with Elementor.
|
||||
|
||||
This is mainly useful with Hello Elementor, but it may help
|
||||
fix also other themes like Twenty Twenty-One for display in
|
||||
older browsers not yet supporting CSS variables.
|
||||
*/
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.entry-content div.footnotes_reference_container,
|
||||
.entry-content > .footnotes_reference_container,
|
||||
main div.footnotes_reference_container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
64
src/public/css/dev-tooltips-alternative.css
Normal file
64
src/public/css/dev-tooltips-alternative.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Additional stylesheet for alternative tooltips.
|
||||
*
|
||||
* @since 2.5.5
|
||||
|
||||
* System of unified minified style sheets tailored to the instance.
|
||||
*
|
||||
* @see full header in dev-common.css.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Alternative tooltips
|
||||
*
|
||||
* These default position values may be overridden by internal CSS.
|
||||
*/
|
||||
|
||||
.footnote_referrer.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footnote_tooltip.position {
|
||||
position: absolute;
|
||||
display: unset;
|
||||
|
||||
/*
|
||||
bottom: 24px;
|
||||
left: -50px;
|
||||
width: 400px;
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Timing; fade-in/fade-out parameters.
|
||||
*
|
||||
* To streamline internal CSS, immutable rules are in external stylesheet.
|
||||
* Property values of settings are internal CSS.
|
||||
* @see class/task.php
|
||||
*/
|
||||
|
||||
.footnote_tooltip.shown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-timing-function: linear;
|
||||
transition-property: visibility, opacity;
|
||||
|
||||
/*
|
||||
transition-delay: 0ms;
|
||||
transition-duration: 200ms;
|
||||
*/
|
||||
}
|
||||
|
||||
.footnote_tooltip.hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition-timing-function: linear;
|
||||
transition-property: visibility, opacity;
|
||||
|
||||
/*
|
||||
transition-delay: 400ms;
|
||||
transition-duration: 200ms;
|
||||
*/
|
||||
}
|
||||
54
src/public/css/dev-tooltips.css
Normal file
54
src/public/css/dev-tooltips.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/*<?php for docblocks
|
||||
/**
|
||||
* Additional stylesheet needed when tooltips (jQuery or alternative) are enabled.
|
||||
*
|
||||
* @version 2.5.8
|
||||
* System of unified minified style sheets tailored to the instance.
|
||||
* @since 2.5.5
|
||||
* @see full header in dev-common.css.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
* - 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_tooltip {
|
||||
z-index: 2147483647 !important;
|
||||
display: none;
|
||||
padding: 12px !important;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.2;
|
||||
text-align: start !important;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Read-on button
|
||||
*/
|
||||
|
||||
.footnote_tooltip_continue {
|
||||
color: green;
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footnote_tooltip_continue:hover,
|
||||
.footnote_tooltip_continue:focus {
|
||||
color: blue;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
Reference in a new issue