footnotes/css/settings.css

/*<?php for docblocks
/**
 * Created by Stefan Herndler.
 * User: Stefan
 * Created-Date: 15.05.14
 * Created-Time: 16:21
 * Since: 1.0
 *
 * @version 2.5.5
 * @lastmodified 2021-02-18T2026+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 not last line.
 *
 * @see class/config.php
 * @see css/dev-common.css
 */

.footnotes_logo_heading {
	display: inline-block;
	float: left;
	position: absolute;
	text-decoration: none;
	font-weight: normal;
}
.footnotes_logo_part1_heading {
	left: 20px;
	color: #2bb975;
}
.footnotes_logo_part2_heading {
	left: 51px;
	color: #545f5a;
}
.footnotes_heart_heading {
	color:#ff6d3b;
	font-weight:bold;
	position: absolute;
	left: 96px;
}

/**
 * Metabox headings
 */

.postbox-header {
	position: relative;
	padding: 0 20px;
}

/************************************************************
Input fields

On User Request:
Limited to a number of IDs to not affect all dashboards
<https://wordpress.org/support/topic/all-input-have-width-80/>
*/
/*input[type=text], input[type=password], textarea, select*/
#footnote_inputfield_readon_label,
#footnote_inputfield_references_label,
#footnote_inputfield_love {
	padding-left: 8px !important;
	padding-right: 8px !important;
	width: 80% !important;
}

#footnote_inputfield_reference_container_place {
	width: 310px;
}

#footnote_inputfield_counter_style,
#footnotes_inputfield_page_layout_support {
	width: 505px;
}

#footnote_inputfield_placeholder_start,
#footnote_inputfield_placeholder_end,
#footnote_inputfield_custom_mouse_over_box_excerpt_length {
	width: 180px;
}
#footnote_inputfield_placeholder_start_user_defined,
#footnote_inputfield_placeholder_end_user_defined {
	width: 320px;
}

#footnote_inputfield_combine_identical,
#footnotes_inputfield_scroll_offset,
#footnotes_inputfield_scroll_duration,
#footnote_inputfield_custom_mouse_over_box_excerpt_enabled,
#footnote_inputfield_custom_mouse_over_box_offset_x,
#footnote_inputfield_custom_mouse_over_box_offset_y,
#footnote_inputfield_custom_mouse_over_box_max_width,
#footnotes_inputfield_alternative_mouse_over_box_offset_x,
#footnotes_inputfield_alternative_mouse_over_box_offset_y,
#footnotes_inputfield_alternative_mouse_over_box_width,
#footnotes_inputfield_mouse_over_box_fade_in_delay,
#footnotes_inputfield_mouse_over_box_fade_in_duration,
#footnotes_inputfield_mouse_over_box_fade_out_delay,
#footnotes_inputfield_mouse_over_box_fade_out_duration,
#footnote_inputfield_custom_mouse_over_box_border_width,
#footnote_inputfield_custom_mouse_over_box_border_radius {
	width: 80px;
}

#footnote_inputfield_custom_hyperlink_symbol,
#footnotes_inputfield_backlinks_terminator_option,
#footnotes_inputfield_backlinks_separator_option {
	width: 230px;
}

#footnotes_inputfield_reference_container_top_margin,
#footnotes_inputfield_reference_container_bottom_margin,
#footnotes_inputfield_backlinks_column_width_scalar,
#footnotes_inputfield_backlinks_column_max_width_scalar,
#footnotes_inputfield_mouse_over_box_font_size_scalar {
	width: 85px;
}

#footnotes_inputfield_backlinks_column_width_unit,
#footnotes_inputfield_backlinks_column_max_width_unit,
#footnotes_inputfield_mouse_over_box_font_size_unit {
	width: 140px;
}

/************************************************************
Headings and labels
*/

label {
	display: inline-block;
}

.postbox > h3 {
	height: 32px !important;
	line-height: 32px !important;
}

.postbox > h3 > span {
	padding: 0 10px;
}

.postbox > .inside > table {
	border: none !important;
}

.postbox > .inside >table > tbody > tr > td:first-child {
	width: 15% !important;
	font-weight: bold !important;
}

.footnote_placeholder_box_container {
	text-align: center !important;
}

span.footnote_highlight_placeholder {
	font-weight: bold !important;
	padding: 0 8px !important;
}

.footnote_placeholder_box_example {
	border: 2px solid #2bb975 !important;
	border-radius: 4px !important;
	padding: 16px 0 !important;
	width: 50% !important;
	display: block !important;
	margin: 20px auto !important;
	text-align: center !important;
}

/************************************************************
Special table layout

Hooks and priority levels:
initialized from style attributes in templates
IE doesn’t support nth child, but these are not critical
*/
.expert_lookup tr th:first-child,
.expert_lookup tr td:first-child {
	width: 170px !important;
}
.expert_lookup tr th:nth-child(2),
.expert_lookup tr td:nth-child(2) {
	width: 65px !important;
}
.expert_lookup tr th:nth-child(3),
.expert_lookup tr td:nth-child(3) {
	width: 200px !important;
}
.expert_lookup tr td:nth-child(3) input {
	width: 190px;
}
.expert_lookup tr th:last-child,
.expert_lookup tr td:last-child {
	white-space: nowrap;
}

/*
Custom CSS

The number of CSS classes recommended for customization
significantly increased from 4 to 18 as of v2.4.0.

Localized notices are dropped to ease translators’ task.
CSS classes are listed directly in the template
templates/dashboard/customize-css.html

For better maintainability and readability of the source
list, the </p> end tags are omitted per HTML5 standard:
<https://stackoverflow.com/questions/8460993/p-end-tag-p-is-not-needed-in-html>

The textarea has monospace font, but no other features 
helping edit CSS, like tab support and syntactic colors.
*/
#customize_css_new tr td:first-child {
	width: 38% !important;
	font-weight: normal !important;
}
.customize_css_new tr td:first-child span:first-child {
	font-weight: bold !important;
}
.customize_css_new .list {
	padding-top: 10px;
}
.customize_css_new .list p {
	font-family: monospace;
	padding: 0 10px;
	text-indent: -10px;
	margin: .5em 0;
}

#footnote_inputfield_custom_css_new {
	height: 500px;
}
#footnote_inputfield_custom_css,
#footnote_inputfield_custom_css_new {
	width: 96%;
	resize: both;
	overflow: scroll;
	font-family: monospace;
}

/************************************************************
Notices

These spans were previously formatted using the em element.
But the intended semantics was not emphasis.
In locales using boldface to emphasize, the effect is the
exact opposite of the intention.

So we must use spans with explicit italic font style.
Scripts not featuring italic fonts fall back to normal,
and that is just fine, as italic is only needed here for
scripts that do have italic, and failing to use it would
look weird.

since 2.1.4
*/
.footnotes_notice {
	font-style: italic;
	display: inline-block;
	text-align: end;
}

/************************************************************
Descriptions

padded div above or below a settings table

Use case: more extensive information not fitting into a brief
notice after the end of the settings box.
*/
.footnotes_description {
	padding: 0 4%;
}
.footnotes_description p {
	font-size: 1.06em;
	font-style: italic;
}