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/public.css

325 lines
7.6 KiB
CSS
Raw Normal View History

/**
* Created by Stefan Herndler.
* User: Stefan
* Created-Date: 15.05.14
* Created-Time: 16:21
* Since: 1.0
*
* Version: 2.1.4
*
* Last modified: 2020-12-06T1649+0100
*/
/*****************************************************
MCI Footnotes logo
The classes with 'heading' fix display in dashboard
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
prevent URLs from expanding the reference container
in mobile view, or from hanging out of the tooltip
based on pattern, not link element
class/task.php
not 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/public/footnote.html
templates/public/footnote-alternative.html
.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: 999;
cursor: auto;
text-align: left;
padding: 12px;
line-height: 1.2;
/*font-size: inherit; moved to settings since 2.1.4 */
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 references container
templates/public/reference-container.html
Also optional responsive basic page layout support:
public-container.css
public-main.css
*/
/*
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 {
width: 100%;
border: none;
}
/*
footnotes
reference-container-body.html
*/
.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)*/
}
}