2014-07-31 10:17:38 +00:00
/ * *
* Created by Stefan Herndler .
* User : Stefan
2020-10-29 13:17:36 +00:00
* Created-Date : 15 . 05 . 14
* Created-Time : 16 : 21
2014-10-01 20:57:16 +00:00
* Since : 1 . 0
2020-11-05 02:34:35 +00:00
*
2021-01-07 21:21:29 +00:00
* Version : 2 . 5 . 0
2021-01-03 20:03:51 +00:00
*
2021-01-07 21:21:29 +00:00
* Last modified : 2021-01-07T0851 + 0100
2021-01-03 20:03:51 +00:00
*
2020-12-04 22:51:29 +00:00
*
2020-12-12 21:07:24 +00:00
* Classes added to public . css may be added to the
* list documenting CSS classes for Custom CSS if
* recommended for general use .
2020-12-18 16:31:09 +00:00
* List in templates / dashboard / customize-css-new . html
2020-12-12 21:07:24 +00:00
*
2020-12-23 03:34:51 +00:00
* Edited for 2 . 0 . 0
* @ since 2 . 0 . 1 enforced borderless table cells with ! important property , thanks to @ ragonesi
* @ see < https : / / wordpress . org / support / topic / box-around-c-references-container / >
* @ since 2 . 1 . 1 line height 0 for ( superscript ) referrers , thanks to @ cwbayer
* @ see < https : / / wordpress . org / support / topic / footnote-number-in-text-superscript-disrupts-leading / >
* @ since 2 . 1 . 6 set z-index to maximum 2147483647 to address display issues with overlay content , thanks to @ russianicons
* @ see < https : / / wordpress . org / support / topic / counter-styles-not-working / >
2020-12-31 11:45:10 +00:00
* @ since 2 . 3 . 0 offset anchors for optional hard links
2021-01-03 20:03:51 +00:00
* @ since 2 . 4 . 0 validation error warning box
2014-07-31 10:17:38 +00:00
* /
2020-11-20 05:40:03 +00:00
2020-11-24 09:22:27 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2020-11-09 19:09:54 +00:00
MCI Footnotes logo
2020-12-09 15:12:37 +00:00
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 .
2020-11-11 20:49:44 +00:00
class / config . php
css / settings . css
2020-11-09 19:09:54 +00:00
* /
2020-10-28 01:25:08 +00:00
2020-11-01 05:41:22 +00:00
. footnotes_logo ,
. footnotes_logo : hover ,
. footnotes_logo_heading {
2014-10-01 20:57:16 +00:00
text-decoration : none ;
font-weight : normal ;
}
2020-11-01 05:41:22 +00:00
. footnotes_logo_part1 ,
. footnotes_logo_part1_heading {
2014-10-01 20:57:16 +00:00
color : # 2bb975 ;
}
2020-11-01 05:41:22 +00:00
. footnotes_logo_part2 ,
. footnotes_logo_part2_heading {
2014-10-01 20:57:16 +00:00
color : # 545f5a ;
}
2021-01-01 05:52:49 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
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
2021-01-07 21:21:29 +00:00
post title , populated with 300 characters of contente
preceded by the first unbalanced start tag short code .
2021-01-01 05:52:49 +00:00
2021-01-03 20:03:51 +00:00
@ since 2 . 4 . 0
2021-01-07 21:21:29 +00:00
@ since 2 . 5 . 0 improvement increased paragraph number
2021-01-01 05:52:49 +00:00
* /
. footnotes_validation_error {
2021-01-07 21:21:29 +00:00
border : 4px solid red ;
padding : 20px 40px ;
margin : 20px 0 ;
background : # ff000055 ;
text-align : start ;
2021-01-01 05:52:49 +00:00
}
. footnotes_validation_error p : first-child {
2021-01-07 21:21:29 +00:00
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 ;
2021-01-01 05:52:49 +00:00
}
. footnotes_validation_error p : last-child {
2021-01-07 21:21:29 +00:00
font-size : 12px ;
2021-01-01 05:52:49 +00:00
}
2020-11-25 07:47:45 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Long URLs in Unicode-non-compliant user agents
2020-12-09 15:12:37 +00:00
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 .
2020-11-25 07:47:45 +00:00
class / task . php
2020-12-09 15:12:37 +00:00
These rules aren ’ t cross-browser compatible :
2020-11-25 07:47:45 +00:00
word-break : break-word ;
overflow-wrap : anywhere ;
word-wrap : anywhere ;
2020-11-26 09:54:41 +00:00
word-break : break-all ;
2020-11-25 07:47:45 +00:00
* /
. footnote_url_wrap {
2020-11-26 09:54:41 +00:00
overflow-wrap : break-word ;
2020-11-25 07:47:45 +00:00
word-wrap : break-word ;
}
2020-12-31 11:45:10 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Optional hard links
Anchors with scroll offset
* /
. footnote_item_base ,
. footnote_referrer_base {
position : absolute ;
}
. footnote_item_anchor ,
. footnote_referrer_anchor {
position : relative ;
}
2020-11-24 09:22:27 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2020-11-11 20:49:44 +00:00
Footnote referrers and tooltips
2020-11-09 19:09:54 +00:00
2020-12-09 15:12:37 +00:00
Templates :
2020-11-11 20:49:44 +00:00
templates / public / footnote . html
templates / public / footnote-alternative . html
2020-12-09 15:12:37 +00:00
Classes :
2020-11-11 20:49:44 +00:00
. footnote_referrer = enclosing < span >
. footnote_plugin_tooltip_text = inner < sup >
. footnote_tooltip = inner < span >
* /
2020-10-28 01:25:08 +00:00
2020-11-09 19:09:54 +00:00
. footnote_referrer ,
. footnote_referrer : link ,
2020-12-31 11:45:10 +00:00
. footnote_referrer : hover ,
. footnote_referrer > a ,
. footnote_referrer > a : link ,
. footnote_referrer > a : hover ,
. footnote_plugin_tooltip_text ,
. footnote_plugin_tooltip_text : hover ,
2020-11-09 19:09:54 +00:00
. main-content . footnote_referrer ,
. main-content . footnote_referrer : link ,
2020-12-31 11:45:10 +00:00
. 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 {
2020-11-09 19:09:54 +00:00
text-decoration : none ! important ;
2020-11-20 05:40:03 +00:00
border-bottom : none ! important ;
2020-12-31 11:45:10 +00:00
box-shadow : none ! important ;
}
. footnote_plugin_tooltip_text {
2020-11-20 05:40:03 +00:00
line-height : 0 ;
2020-11-26 09:54:41 +00:00
cursor : pointer ;
2020-11-09 19:09:54 +00:00
}
2014-10-01 20:57:16 +00:00
2020-12-23 03:34:51 +00:00
/ *
tooltips
@ since 2 . 1 . 6 set z-index to maximum 2147483647 to address display issues with overlay content , thanks to @ russianicons
@ see < https : / / wordpress . org / support / topic / counter-styles-not-working / >
* /
2020-11-11 20:49:44 +00:00
. footnote_tooltip {
display : none ;
2020-12-12 21:07:24 +00:00
z-index : 2147483647 ! important ;
2020-11-12 18:17:28 +00:00
cursor : auto ;
2020-11-01 05:41:22 +00:00
text-align : left ;
2020-11-11 20:49:44 +00:00
padding : 12px ;
2020-12-03 07:55:27 +00:00
line-height : 1 . 2 ;
2020-11-11 20:49:44 +00:00
font-weight : normal ;
font-style : normal ;
2020-10-28 01:25:08 +00:00
}
2020-11-11 20:49:44 +00:00
2020-11-12 18:17:28 +00:00
/ *
alternative tooltip implementation
* /
. footnote_referrer . relative {
position : relative ;
2020-11-11 20:49:44 +00:00
}
2020-11-12 18:17:28 +00:00
. footnote_tooltip . position {
2020-11-13 16:54:31 +00:00
display : unset ;
2020-11-12 18:17:28 +00:00
position : absolute ;
2020-11-11 20:49:44 +00:00
bottom : 24px ;
2020-11-13 16:54:31 +00:00
left : -50px ;
width : 400px ;
2020-11-12 18:17:28 +00:00
}
/ *
fade-in parameters
* /
. footnote_tooltip . shown {
2020-11-13 16:54:31 +00:00
visibility : visible ;
opacity : 1 ;
transition-property : visibility opacity ;
transition-timing-function : linear ;
2020-12-18 16:31:09 +00:00
/ *
property values of settings are inline CSS
2020-11-13 16:54:31 +00:00
transition-delay : 0ms ;
2020-12-18 16:31:09 +00:00
transition-duration : 200ms ;
* /
2020-11-12 18:17:28 +00:00
}
/ *
fade-out parameters
* /
. footnote_tooltip . hidden {
2020-11-13 16:54:31 +00:00
visibility : hidden ;
opacity : 0 ;
transition-property : visibility opacity ;
transition-timing-function : linear ;
2020-12-18 16:31:09 +00:00
/ *
property values of settings are inline CSS
2020-11-13 16:54:31 +00:00
transition-delay : 400ms ;
2020-12-18 16:31:09 +00:00
transition-duration : 200ms ;
* /
2020-11-11 20:49:44 +00:00
}
/ *
Read-on button
* /
. footnote_tooltip_continue {
2020-11-01 05:41:22 +00:00
font-style : italic ;
color : green ;
text-decoration : none ! important ;
2020-11-05 02:34:35 +00:00
cursor : pointer ;
2020-11-26 09:54:41 +00:00
white-space : nowrap ;
2020-10-28 01:25:08 +00:00
}
2020-11-11 20:49:44 +00:00
. footnote_tooltip_continue : hover {
2020-11-01 05:41:22 +00:00
color : blue ;
text-decoration : underline ! important ;
2020-10-28 01:25:08 +00:00
}
2020-11-11 20:49:44 +00:00
2020-11-24 09:22:27 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2020-12-09 15:12:37 +00:00
Footnote reference container
2020-11-11 20:49:44 +00:00
2020-12-09 15:12:37 +00:00
Templates :
2020-11-11 20:49:44 +00:00
templates / public / reference-container . html
2020-12-09 15:12:37 +00:00
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 >
2020-12-31 11:45:10 +00:00
. footnotes_plugin_reference_row = < tr >
2020-12-09 15:12:37 +00:00
. 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
2021-01-03 20:03:51 +00:00
. footnote_plugin_symbol = second < td > in 3-column table
. footnote_plugin_link = < a > or < span > ( identical footnotes not combined )
. footnote_backlink = < a > or < span >
2020-12-09 15:12:37 +00:00
. footnote_index_arrow = nested < span > , symbol only
. footnote_plugin_text = second < td > , or third < td > in 3-column table
2020-11-09 19:09:54 +00:00
* /
2020-10-28 01:25:08 +00:00
2020-11-09 19:09:54 +00:00
/ *
label
* /
2020-11-01 05:41:22 +00:00
. footnote_container_prepare {
display : block ! important ;
padding-top : 24px ! important ;
}
2014-07-31 10:17:38 +00:00
. footnote_container_prepare > p {
2020-11-01 05:41:22 +00:00
line-height : 1 . 3 ! important ;
margin-top : 1em ! important ;
margin-bottom : 0 . 25em ! important ;
padding : 0 ! important ;
font-weight : normal ! important ;
2020-12-18 16:31:09 +00:00
/* bottom border optional since 2.2.5 */
2020-11-01 05:41:22 +00:00
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 ;
2014-07-31 10:17:38 +00:00
}
. footnote_container_prepare > p > span : first-child {
2020-11-01 05:41:22 +00:00
text-align : left ! important ;
font-size : 1 . 5em ! important ;
2014-07-31 10:17:38 +00:00
}
2020-10-29 13:17:36 +00:00
2020-11-09 19:09:54 +00:00
/ *
collapse button
fully clickable , not sign only
* /
2020-11-05 02:34:35 +00:00
. footnote_reference_container_collapse_button {
2020-11-01 05:41:22 +00:00
cursor : pointer ;
2020-12-06 12:46:45 +00:00
padding : 0 0 . 5em ;
2020-11-09 19:09:54 +00:00
font-size : 1 . 3em ! important ;
vertical-align : 2px ;
2020-12-18 16:31:09 +00:00
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 ;
2020-10-29 13:17:36 +00:00
}
2020-12-18 16:31:09 +00:00
. footnote_container_prepare > p > span : last-child a ,
. footnote_reference_container_collapse_button a {
2020-11-05 02:34:35 +00:00
text-decoration : none ! important ;
2020-10-28 01:25:08 +00:00
}
2014-07-31 10:17:38 +00:00
2020-11-09 19:09:54 +00:00
/ *
table
* /
2020-12-09 15:12:37 +00:00
. footnote-reference-container ,
. footnotes_table {
2020-11-05 02:34:35 +00:00
width : 100 % ;
border : none ;
}
2020-11-09 19:09:54 +00:00
/ *
footnotes
2020-12-23 03:34:51 +00:00
enforced borderless table cells with ! important property , thanks to @ ragonesi
@ since 2 . 0 . 1
@ see < https : / / wordpress . org / support / topic / box-around-c-references-container / >
2020-11-09 19:09:54 +00:00
* /
2020-10-28 01:25:08 +00:00
. footnote_plugin_index ,
2020-11-25 07:47:45 +00:00
. footnote_plugin_index_combi ,
2021-01-03 20:03:51 +00:00
. footnote_plugin_symbol ,
2020-10-28 01:25:08 +00:00
. footnote_plugin_text {
2020-12-25 23:00:23 +00:00
border : none ! important ;
2020-11-05 02:34:35 +00:00
text-align : left ! important ;
vertical-align : top ! important ;
2020-11-16 20:57:15 +00:00
padding : 5px 6px 10px 0 ! important ;
2014-07-31 10:17:38 +00:00
}
2020-11-14 21:40:09 +00:00
. footnote_backlink ,
. footnote_backlink : link ,
2020-11-09 19:09:54 +00:00
. footnote_plugin_link ,
. footnote_plugin_link : link ,
2020-11-14 21:40:09 +00:00
. main-content . footnote_backlink ,
. main-content . footnote_backlink : link ,
2020-11-09 19:09:54 +00:00
. main-content . footnote_plugin_link ,
. main-content . footnote_plugin_link : link {
2020-11-05 02:34:35 +00:00
text-decoration : none ! important ;
2020-11-09 19:09:54 +00:00
border-bottom : none ! important ;
2020-10-28 15:58:58 +00:00
}
2020-12-03 07:55:27 +00:00
. footnote_backlink ,
. footnote_plugin_link {
white-space : nowrap ;
}
. footnote_index ,
. footnote_backlink ,
. footnote_plugin_index . pointer ,
. footnote_plugin_index_combi . pointer {
cursor : pointer ;
}
2020-11-18 00:47:53 +00:00
/ *
These rules when enabled cause the backlink to take an overline
when hovered in some themes , not in others :
2020-11-05 02:34:35 +00:00
. footnote_plugin_index : hover ,
2020-11-25 07:47:45 +00:00
. footnote_plugin_index_combi : hover ,
2020-11-18 00:47:53 +00:00
. footnote_plugin_index . pointer : hover ,
2020-11-25 07:47:45 +00:00
. footnote_plugin_index_combi . pointer : hover ,
2020-11-18 00:47:53 +00:00
* /
. footnote_backlink : hover ,
. footnote_plugin_link : hover ,
2020-10-28 15:58:58 +00:00
. footnote_plugin_text a : hover {
2020-11-20 05:40:03 +00:00
text-decoration : unset ;
2020-11-26 17:15:21 +00:00
text-decoration : underline ; /*deprioritized to ease customization*/
2020-10-29 13:17:36 +00:00
}
2020-11-14 21:40:09 +00:00
2020-11-05 02:34:35 +00:00
. footnote_plugin_text {
width : unset ; /*unset width of text column to fix site issues*/
}
2020-12-03 07:55:27 +00:00
/ *
2020-12-03 17:38:14 +00:00
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 ;
2020-12-03 07:55:27 +00:00
2020-12-03 17:38:14 +00:00
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 .
* /
2020-12-03 07:55:27 +00:00
. footnote_plugin_index ,
. footnote_plugin_index_combi {
2020-12-03 17:38:14 +00:00
max-width : 100px ;
width : 2 . 5em ;
2020-12-03 07:55:27 +00:00
}
2020-11-09 19:09:54 +00:00
/ *
Responsive
* /
2020-10-29 13:17:36 +00:00
@ media only screen and ( max-width : 768px ) {
2020-11-25 07:47:45 +00:00
. footnote_plugin_index ,
. footnote_plugin_index_combi {
2020-12-03 17:38:14 +00:00
max-width : 80px ;
2020-11-01 05:41:22 +00:00
}
2020-10-27 11:56:49 +00:00
}
2020-12-03 17:38:14 +00:00
2020-11-24 09:22:27 +00:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2020-11-09 19:09:54 +00:00
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 .
2020-11-01 05:41:22 +00:00
* /
2020-10-28 15:58:58 +00:00
2020-11-16 20:57:15 +00:00
. footnotes_reference_container {
2020-11-01 05:41:22 +00:00
page-break-inside : avoid ;
2020-10-29 13:17:36 +00:00
}
2020-11-05 02:34:35 +00:00
2020-10-28 15:58:58 +00:00
@ media print {
2020-11-01 05:41:22 +00:00
. footnote_tooltip ,
2020-11-05 02:34:35 +00:00
. footnote_reference_container_collapse_button ,
2020-11-05 18:00:18 +00:00
. footnote_index_arrow {
2020-11-01 05:41:22 +00:00
display : none ;
}
. footnote_plugin_tooltip_text {
color : inherit ;
}
2020-11-25 07:47:45 +00:00
. footnote_plugin_index a ,
. footnote_plugin_index_combi a {
2020-11-01 05:41:22 +00:00
color : inherit ;
text-decoration : none ! important ;
}
2020-11-09 19:09:54 +00:00
div . post-meta-edit-link-wrapper { /*Edit button in WP2020*/
2020-11-01 05:41:22 +00:00
display : none ; /*(added as a service)*/
}
2020-10-27 11:56:49 +00:00
}