6c7854352b
git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2439670 b8457f37-d9ea-0310-8a92-e5e31aec5664
362 lines
9.4 KiB
CSS
Executable file
362 lines
9.4 KiB
CSS
Executable file
/**
|
||
* Created by Stefan Herndler.
|
||
* User: Stefan
|
||
* Created-Date: 15.05.14
|
||
* Created-Time: 16:21
|
||
* Since: 1.0
|
||
*
|
||
* Version: 2.2.2
|
||
*
|
||
* Classes added to public.css may be added to the
|
||
* list documenting CSS classes for Custom CSS if
|
||
* recommended for general use.
|
||
* List in templates/dashboard/customize-css.html
|
||
*
|
||
* Last modified: 2020-12-15T0844+0100
|
||
*/
|
||
|
||
|
||
/*****************************************************
|
||
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;
|
||
}
|
||
|
||
/*****************************************************
|
||
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.
|
||
|
||
class/task.php
|
||
|
||
These rules aren’t 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;
|
||
}
|
||
|
||
/*****************************************************
|
||
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>
|
||
*/
|
||
|
||
.footnote_referrer,
|
||
.footnote_referrer a,
|
||
.footnote_referrer:link,
|
||
.footnote_referrer a:link,
|
||
.main-content .footnote_referrer,
|
||
.main-content .footnote_referrer a,
|
||
.main-content .footnote_referrer:link,
|
||
.main-content .footnote_referrer a:link,
|
||
.footnote_plugin_tooltip_text {
|
||
text-decoration: none !important;
|
||
border-bottom: none !important;
|
||
line-height: 0;
|
||
cursor: pointer;
|
||
}
|
||
.footnote_referrer:hover,
|
||
.footnote_referrer a:hover,
|
||
.footnote_plugin_tooltip_text:hover {
|
||
text-decoration: none;
|
||
font-weight: inherit;
|
||
}
|
||
|
||
.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-duration: 200ms;
|
||
transition-timing-function: linear;
|
||
transition-delay: 0ms;
|
||
}
|
||
/*
|
||
fade-out parameters
|
||
*/
|
||
.footnote_tooltip.hidden {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition-property: visibility opacity;
|
||
transition-duration: 200ms;
|
||
transition-timing-function: linear;
|
||
transition-delay: 400ms;
|
||
}
|
||
|
||
/*
|
||
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>
|
||
.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_link = <a> or <span> if identical footnotes are not combined, or second <td> in 3-column table
|
||
.footnote_backlink = <a> or <span> if identical footnotes are combined, or in second <td> in 3-column table
|
||
.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;
|
||
border-bottom: 1px solid #aaaaaa !important;
|
||
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;
|
||
}
|
||
.footnote_container_prepare > p > span:last-child a {
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
/*
|
||
table
|
||
*/
|
||
.footnote-reference-container,
|
||
.footnotes_table {
|
||
width: 100%;
|
||
border: none;
|
||
}
|
||
|
||
/*
|
||
footnotes
|
||
*/
|
||
.footnote_plugin_index,
|
||
.footnote_plugin_index_combi,
|
||
.footnote_plugin_link,
|
||
.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;
|
||
}
|
||
|
||
.footnote_index,
|
||
.footnote_backlink,
|
||
.footnote_plugin_index.pointer,
|
||
.footnote_plugin_index_combi.pointer {
|
||
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,
|
||
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.
|
||
*/
|
||
|
||
.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;
|
||
}
|
||
div.post-meta-edit-link-wrapper { /*Edit button in WP2020*/
|
||
display: none; /*(added as a service)*/
|
||
}
|
||
}
|