, 1rem;
has no default font-size value; it simply inherits the value specified within the body. * https://developer.mozilla.org/en-US/docs/Web/CSS/font-size * rem values were invented in order to sidestep the compounding problem. rem values are * relative to the root html element, not the parent element. In other words, it lets you * specify a font size in a relative fashion without being affected by the size of the parent, * thereby eliminating compounding. * Echoed here (StackOverflow): https://stackoverflow.com/a/51756111/1904943 * The rem unit is based on the font size of the HTML element, not the BODY element. * So you should set base font size this way: ... * .. and here (StackOverflow): * https://stackoverflow.com/questions/16460990/change-text-font-size-of-whole-page-content * You can use rem, which is better than em in some places because em cascades * and rem does not. With all lengths specified in rem, you can adjust the sizes * by changing the font-size of the element. * https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ * https://snook.ca/archives/html_and_css/font-size-with-rem * https://stackoverflow.com/questions/51745779/setting-the-font-size-of-a-body-tag * https://bootstrapcreative.com/bootstrap-text-sizes/#Bootstrap_4_Text_Sizes * https://tutorial.techaltum.com/cssfontproperties.html */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ATKINSON HYPERLEGIBLE FONT */ /* ------------------------------------------------------------------------- */ /* /mnt/Vancouver/domains/persagen/public/css/pg-solr.css */ /* [bookmark: aelohf8u] */ /* * Atkinson Hyperlegible font * https://www.brailleinstitute.org/freefont/ * https://news.ycombinator.com/item?id=41550211 * https://www.w3schools.com/howto/tryit.asp?font=Atkinson%20Hyperlegible * Google Fonts: * * * * font-family: 'Atkinson Hyperlegible'; * font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif'; * font-family: "Arial", "Verdana", sans-serif; * font-family: 'Atkinson Hyperlegible'; * font-family: 'Courier', 'sans-serif'; * font-family: 'Verdana', 'sans-serif'; * Include this in HEAD on each HTML webpage: * * * Test: *
B 8 O 0 l 1
*/ /* ------------------------------------------------------------------------- */ /* [end] ATKINSON HYPERLEGIBLE FONT /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* [end] FONT PROPERTIES */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* CURSORS: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* CLEAR * clear: { none | both | left | right }; * https://developer.mozilla.org/en-US/docs/Web/CSS/clear * https://stackoverflow.com/questions/5671519/arranging-div-one-below-the-other * The clear CSS property sets whether an element must be moved below * (cleared) floating elements that precede it. The clear property applies * to floating and non-floating elements. */ /* DISPLAY * display { none | block | flex | grid | inline | inline-block }; * https://developer.mozilla.org/en-US/docs/Web/CSS/display * The display CSS property sets whether an element is treated as a block or * inline box and the layout used for its children, such as flow layout * grid or flex. */ /* FLOAT * float: { none | left | right }; * https://developer.mozilla.org/en-US/docs/Web/CSS/float * The float CSS property places an element on the left or right side of its * container, allowing text and inline elements to wrap around it. The * element is removed from the normal flow of the page, though still * remaining a part of the flow (in contrast to absolute positioning). * * Note: place at top of CSS style entries; some styles (e.g. "padding") placed above * "float" may cause unintended CSS styling artefacts (see, e.g. bookmark: ueh9phie). */ /* POSITION * position: { static | absolute | relative | sticky }; * https://developer.mozilla.org/en-US/docs/Web/CSS/position * The position CSS property sets how an element is positioned in a document. * The top, right, bottom, and left properties determine the final location * of positioned elements. */ /* Z-INDEX * z-index: { auto |** * /mnt/Vancouver/domains/persagen/public/css/pg-solr.css * https://highlightjs.org/ * https://cdnjs.com/libraries?q=hghlght.js * https://stackoverflow.com/questions/62029757/nicely-formatted-python-code-in-html-files */ pre code { white-space: pre-wrap; /* ---------------------------------------- */ /* Negative values here to eliminate non-code, non-shaded (background) space; * bottom larger, to accommodate different program languagedate; pwd*def fib(n):. ...*
sections.
* date; pwd
* def fib(n):. ...
*/
/* order (below): top right bottom left */
margin: -2.0rem 0.0rem -3.0rem 0.0rem;
/* ---------------------------------------- */
/* Overflow: */
/* "overflow: auto;" here works (globally): */
/* overflow: auto; */
/* overflow-y: visible; */
/* overflow-y: hidden; */
/* overflow-y: scroll; */
/* overflow-y: auto; */
/* ---------------------------------------- */
}
/* pre code:hover { */
pre:hover {
height: auto;
max-height: 600px;
}
/* ------------------------------------------------------------------------- */
blockquote {
font: 0.95rem normal sans-serif;
width: 60%;
margin-top: 1.0rem;
margin-bottom: 1.0rem;
margin-left: 2.0rem;
padding-left: 1.0rem;
/* border-left: 3px solid #ccc; */
/* border-left: 3px solid lightgray; */
border-left: 3px solid darkgray;
}
/* Need this to not have other -tag styles override blockquote
-tag text. */
blockquote p {
font: 0.95rem normal sans-serif;
display: inline;
}
li h2 {
margin: 1.75rem 1.0rem 1.0rem 0.0rem;
}
li h3 {
margin: 1.75rem 1.0rem 1.0rem 0.0rem;
}
li h4 {
margin: 1.5rem 1.0rem 1.0rem 0.0rem;
}
ul {
/* margin: 1.0rem 0.0rem 1.0rem 2.0rem; */
margin: 0.25rem 0.0rem 0.25rem 2.0rem;
}
/* ------------------------------------------------------------------------- */
/* hr [HORIZONTAL RULE] */
/* My Vim snippet "hrr" sets these horizontal rules.*/
/* https://stackoverflow.com/questions/13466136/styling-additional-hr-tag */
/* ISSUE: like my table row shading,
* tr:nth-child(even) {background-color: red;}
* I was getting alternate
styling slightly differently. Applying that
* observation this confirmed it,
* hr:nth-child(even) {background-color: red;}
* hr:nth-child(odd) {background-color: green;}
*
* https://www.w3schools.com/cssref/sel_nth-child.asp
* https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
*
* SOLUTION: using fractional heights (1.5px; 0.2rem; ...) apparently
* auto-enables "nth-child() {}" behavior. Use integer values.
*
* https://stackoverflow.com/questions/28406582/hr-breaks-nth-child-selector
* "Peripherally related, although I didn't code it I was getting "nth-child" styling applied to successive
elements, giving alternating line weights (as viewed in Firefox). I chased this behavior down to the use of fractional, e.g. 1.5px; 0.2rem; -- not integer, e.g. 1px; -- values for the "height" of the
defined in my CSS stylesheet." - Victoria Stuart 2 mins ago [2021-02-09]
*
* ISSUE: first use in a section or DIV may appear with height: 2px, not 1px.
*/
/*
*/
/* hr color: https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element */
hr {
height: 1px;
border-width: 0px;
color: #949494;
background-color: #949494;
/* Automatically adjust width if there is an element (e.g. an entity_infobox)
* to the right: */
/* width: 95%; */
width: auto;
text-align: left;
/* Adding "!important" here forces these margins for all "hr" DI variants,
* e.g. "hr#two", "hr#three" ...*/
margin: 2.0rem 0.0rem 0.75rem 0.0rem;
/* margin-top: 1.5rem; */
/* margin-right: 2.0rem; */
/* margin-bottom: 1.5rem; */
/* margin-left: 2.0rem; */
}
/*
*/
/* hr.green {} */
/*
*/
hr#green {
height: 1px;
border-width: 0px;
color: green;
/* "background-color" actually colors the line: */
background-color: green;
width: auto;
text-align: left;
/* margin-top: 1.5rem; */
/* margin-bottom: 1.5rem; */
/* margin-left: 2.0rem; */
}
/*
*/
hr#two {
height: 1px;
border-width: 0px;
color: #949494;
/* "background-color" actually colors the line: */
background-color: #949494;
width: 75%;
text-align: left;
/* margin-top: 1.5rem; */
/* margin-bottom: 1.5rem; */
/* margin-left: 2.0rem; */
}
hr#three {
height: 1px;
border-width: 0px;
color: #949494;
/* "background-color" actually colors the line: */
/* background-color: magenta; */
background-color: #949494;
width: 50%;
text-align: left;
/* margin-top: 1.5rem; */
/* margin-bottom: 1.5rem; */
/* margin-bottom: 1.25rem; */
/* margin-left: 2.0rem; */
}
hr#four {
height: 1px;
border-width: 0px;
color: #949494;
/* "background-color" actually colors the line: */
background-color: #949494;
width: 25%;
text-align: left;
/* margin-top: 1.5rem; */
/* margin-bottom: 1.5rem; */
/* margin-left: 2.0rem; */
}
hr#five {
height: 1px;
border-width: 0px;
color: #949494;
/* "background-color" actually colors the line: */
background-color: #949494;
width: 15%;
text-align: left;
/* margin-top: 1.5rem; */
/* margin-bottom: 1.5rem; */
/* margin-left: 2.0rem; */
}
/* ------------------------------------------------------------------------- */
/* TABLES */
/* https://stackoverflow.com/questions/8498005/thin-black-border-for-a-table
* https://www.sitepoint.com/community/t/cellpadding-only-horizontal/1264
* https://stackoverflow.com/questions/47775948/i-want-to-alternate-shading-of-table-rows-in-html-but-only-apply-it-to-one-of-mu
*
* : header content
* : footer content
* elements are "tabular headers"
* elements are "tabular rows"
* elements are "tabular data"
*/
table {
font-size: 0.9rem;
margin: 1.0rem 1.0rem 1.0rem 1.0rem;
border: 1px solid darkgray;
border-collapse: collapse;
/* #f8f9f9; is the Pg-Solr body background */
background-color: #f8f9f9;
}
/* #add8e6 : lightblue */
/* #cbe6ef : lighter lightblue */
table td {
border: 1px solid darkgray;
/* order (below): top right bottom left */
/* margin: 0.25rem 0.25rem 0.25rem 0.25rem !important; */
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
}
/* https://stackoverflow.com/questions/48857605/increase-width-of-first-column-in-html-css-table-only */
/* https://stackoverflow.com/questions/11984767/how-to-apply-text-align-left-in-the-first-column-and-text-align-right-in-the-oth */
table td:first-child {
/* width: auto; */
white-space: nowrap;
/* text-align: center; */
}
table th {
border: 1px solid darkgray;
/* text-align: left; */
}
table a {
font-size: 0.9rem;
}
table a:hover {
/* font-size: 0.9rem; */
border-bottom: 1px solid blue;
}
/* Persagen hyperlink styling: see also bookmark iex8oobo */
table a.persagen {
font-size: 0.9rem;
}
table a.persagen:hover {
/* font-size: 0.9rem; */
border-bottom: 1px solid green;
}
table ul {
margin: 0.0rem 0.0rem 0.0rem 1.0rem;
/* list-style-type: circle; */
}
/* https://stackoverflow.com/questions/46832156/how-to-set-first-table-column-as-bold-css/46832266 */
table tr:nth-child(odd) { background-color: #edf0f0; }
/* ---------------------------------------- */
/* #f8f9f9; is the Pg-Solr body background */
/* background-color: #f8f9f9; */
/* ---------------------------------------- */
/* The following did not work in "public/css/pg-solr-reveal_js.css" so moved
* here, "public/css/pg-solr.css":
* Why? "reveal_jss.css" called before "pg-solr.css" in "public/html/intro_01a.html" ??
*/
table#sei5arai tr:nth-child(odd) { background-color: #f8f9f9; }
table thead td {
/* background: #b0c4de; */
background: #cbe6ef;
font-weight: bold;
text-align: left !important;
}
table tfoot td {
/* font-size: 0.8rem; */
font-size: 1.0rem;
font-weight: normal;
text-align: left !important;
}
table tfoot td a {
font-size: 0.8rem;
font-weight: normal;
}
table tfoot td a.persagen_ext {
color:magenta;
font-size: 1.0rem;
font-weight: normal;
}
table tfoot td a:hover {
/* font-size: 0.8rem; */
/* color: red; */
/* text-decoration: underline; */
/* text-decoration: normal; */
/* font-weight: bold; */
border-bottom: 1px solid blue;
}
/* Persagen hyperlink styling: see also bookmark iex8oobo */
/* .persagen links are green */
table tfoot td a.persagen {
font-size: 0.8rem;
font-weight: normal;
}
/* a.persagen:hover { */
table tfoot td a.persagen:hover {
/* font-size: 0.8rem; */
/* color: red; */
/* text-decoration: underline; */
/* text-decoration: normal; */
/* font-weight: bold; */
border-bottom: 1px solid green;
}
/* [end TABLES] */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* IMAGES */
/* Not currently used [2021-01-12], other than the following. */
/* Ctrl-r to see changes here: */
img {
border: none;
/* border: 1px solid magenta; */
}
/* No space between "#" and "search_bar", here: */
img#search_bar {
border: none;
/* border: 1px solid magenta; */
vertical-align: middle;
/* top right bottom left */
/* margin: 0.0rem 0.0rem 0.0rem 0.25rem; */
}
/* ---------------------------------------- */
/* I underline URLs when hovered over; however, this was also underlining images, */
/* as I include those in a "" links, so that they can be opened, as a link. */
/* The ".image" class CSS below prevents the underlining of those images/links. */
/* https://www.w3schools.com/cssref/pr_border-bottom_style.asp */
a.image:hover {
/* color: blue; */
/* https://stackoverflow.com/questions/22674633/text-that-shows-an-underline-on-hover */
/* text-decoration: underline; */
/* text-decoration: normal; */
/* font-weight: bold; */
/* font-size: 1.0rem; */
/* border-bottom: 1px solid blue; */
/* ---------------------------------------- */
/* See comment, style immediately following. */
border-bottom: none;
/* ---------------------------------------- */
}
/* Per CSS immediately above, images in #entity_infobox were still underlined on hover; */
/* I could use the "!important" override (above), or add this CSS style.) */
#article_infobox_tab_div {
/* top right bottom left */
margin-top: 0.5rem;
}
#article_infobox a.image:hover {
border-bottom: none;
}
#article_infobox_no_entity_infobox a.image:hover {
border-bottom: none;
}
#entity_infobox a.image:hover {
border-bottom: none;
}
/* ---------------------------------------- */
/* https://stackoverflow.com/questions/10769016/display-image-on-text-link-hover-css-only */
/* MOUSEOVER IMAGE WITH IMAGE ICON */
.hover_img a {
/* background: url(../images/picture-icon.svg) no-repeat 0 40%; */
background: url(../images/picture-icon.svg) no-repeat;
padding-left: 25px;
position:relative;
}
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }
/* Usage (e.g.): TITLE */
/* ---------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* DOCUMENT-SPECIFIC ELEMENTS */
/* ---------------------------------------- */
/* DOCUMENT TITLES */
/* My document titles are hyperlinks () created / embedded by
* Ajax ("ResultWidget.js") inside a -element. Hence, the -element specifies
* the font size, and here I override the index.html file -element (hyperlink
* color) to color those titles by embedding the ResultWidget.js Ajax
* construct within a element containing an id tag,
*
* ' + doc.title + '
';
*
* statement in
*
* /mnt/Vancouver/apps/solr/ajax-solr-bt/examples/reuters/widgets/ResultWidget.js
*/
/* PUFFIN: DELETE THIS (index.html TOO): */
/* #result { */
/* display: inline; */
/* } */
/* [bookmark] uom2haac */
/* This will set the font size for document titles returned by Solr: */
/* #titles a.doc_title { */
#titles a {
display: block;
/* color: #6998f0; */
/* color: #4e4eff; */
/* font-size: 0.8rem; */
font-size: 0.9rem;
font-weight: normal;
/* line-height: 1.335; */
/* top right bottom left */
margin: 0.0rem 0.25rem -0.25rem 0.25rem;
/* margin-bottom: -1.0rem !important; */
}
/* Here, I set the same color for the unvisited | visited title links, with a
* different hover color. Note: no space after "a:" */
#titles a.doc_title:link {color: #4e4eff;}
#titles a.doc_title:visited{color: #4e4eff;}
#titles a.doc_title:hover{
/* color: blue; */
/* color: #0000b1; */
color: #4e4eff;
/* #3b78ec " lighter blue than "blue": */
/* color: #3b78ec; *3
/* font-weight: bold; */
/* This will make the bolded title occupy the same length as the non-bold,
* font-size 1.0 rem title. I also tweaked the line-height (default 1.5)
* so that the remaining text didn't (subtly) shift vertically on hover. */
/* font-size: 1.1rem; */
/* font-weight: bold; */
/* text-decoration: underline; */
border-bottom: 1px solid #4e4eff;
}
/* If needed, these override the above. NOTE THE ORDER (see notes, link above):
* unvisited | visited | hover | active
*
* #titles a:link {color: green;}
* #titles a:visited{color: #ff99ff;}
* #ff00ff : magenta
* #titles a:hover{color: cyan;}
* #titles a:active {color: blue;} */
/* [2021-04-26] Title, keywords + named entities links, and ontologies all appear
* within the var output = '...' variable specified near the end of ResultWidget.js ;
* hence, I can style the "Ontologies: " prefix to the ,
* formatted elsewhere in this stylesheet. */
/*
#titles {
font-size: 1.8rem;
}
*/
/* ***************************************************************************
* CAN STYLE TITLES AT bookmark rohzahm1 in: public/widgets/ResultWidget.js
* ***************************************************************************/
#titles {
/* ---------------------------------------- */
/* No effect (titles are hyperlinks): */
/* color: magenta !important; */
/* ---------------------------------------- */
/* display: inline; */
/* ---------------------------------------- */
/* margin-bottom: 4.0rem !important; */
}
/* ---------------------------------------- */
/* ---------------------------------------- */
/* DOCUMENT SNIPPETS: */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details */
/* These are for the "snippets" ("fq_snippet") - coded ~83% down in "ResultWidget.js".
* "margin" sets "outside" spacing
* "padding" sets "inside" spacing */
/* I was getting an annoying auto-styled, shadowed border around the Search input,
* that was overlaying the "#search input {}" styling, above. Solution:
* https://stackoverflow.com/questions/12297600/how-to-remove-default-chrome-style-for-select-input
*
* textarea, input { outline: none; }
*
* Ditto here: when I navigated away and returned, I was often getting a shaded
* "placeholder | outline" line around the -element.
*/
/* ---------------------------------------- */
/* Aside: since [date] is constructed with the snippets via Ajax at line ~1060
* in ResultWidget.js - e.g.:
*
* fq_snippet += '[' + doc.date.substr(0,10) + '] ' +
* fq_snippets_arr.slice(0,2).join('
');
*
* I need to style (gray; size) that portion of the snippets in that file.
* Likewise, the "more | less" that follows multiple snippets (if present) is
* hard-coded in that portion of ResultWidget.js, so I need to set that font
* size there, as well.
*/
#snippets {
display: none;
/* display: inline; */
/* color: magenta; */
}
#preview_div #snippets {
/* display: none; */
display: inline;
/* color: magenta !important; */
}
/* Hanging indent:
* "text-indent" indents the first line; I also need to move that content to
* the right (margin-left: 1.0rem;).
* https://css-tricks.com/almanac/properties/t/text-indent/
*/
#preview_div #snippets p {
/* color: magenta; */
/* color: brown !important; */
/* order (below): top right bottom left */
margin: 0.0rem 1.0rem -1.2rem 1.0rem;
text-indent: -0.8rem;
font-size: 0.9rem;
}
/*
#preview_div #snippets {
margin: 0.0rem 1.0rem -1.5rem 1.0rem;
text-indent: -0.8rem;
font-size: 0.9rem;
}
*/
/* ------------------------------------------------------------------------- */
/** DETAILS DISCLOSURE ELEMENT [DETAILS / SUMMARY]
* Demo / template: /mnt/Vancouver/programming/html/examples/details-summary-css.html
*/
/* ---------------------------------------- */
/* Details disclosure element CSS - "untagged" DIV */
details {
/* ---------------------------------------- */
/* "color" here colors both "summary" (title) and "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
/* "font-size" is not needed here (set in "details[open] {}" style, below): */
/* font-size: 2.0rem; */
/* ---------------------------------------- */
/* width: 95vw; */
width: 95%;
/* border: 2px solid red; */
border: 1px solid #c6c6c6;
outline: none;
border-radius: 4px;
padding: 0.0rem 0.0rem 0.0rem 0.5rem;
background-color: #f7f7f7;
}
summary {
/* ---------------------------------------- */
/* "color" here colors "summary" (title) only, not "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
/* font-size: 0.9rem; */
line-height: 1.5rem;
font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif';
font-size: 1.25rem;
padding: 0.0rem;
cursor: pointer;
}
summary a {
/* font-size: 0.9rem; */
font-size: 1.25rem;
}
summary:hover {
/* font-weight: bold; */
color: green;
}
details[open] {
/* color: brown; */
/* font-size: 0.9rem; */
/* font-size: 0.9rem; */
line-height: 1.5rem;
font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif';
font-size: 1.25rem;
/* font-weight: bold; */
}
details .inner {
margin: 0.0rem 0.0rem -1.0rem 0.0rem;
}
details .inner[open] {
/* border: 1px solid brown !important; */
border: none !important;
/* color: brown; */
/* font-size: 0.9rem; */
font-size: 1.25rem;
/* font-weight: bold; */
}
details .inner[open] summary {
/* border-bottom: 2px solid magenta !important; */
border-bottom: none !important;
}
details[open] summary {
/* ---------------------------------------- */
/* When opened, "color" here colors "summary" (title) only - not "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
color: green;
/* Larger "summary" font, when opened: */
font-size: 1.25rem !important;
border-bottom: 1px solid #c6c6c6;
}
/* [end] Details disclosure element CSS - "untagged" DIV */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* Details disclosure element CSS - "#faq" DIV: */
#faq {
/* order (below): top right bottom left */
margin: 0.5rem 0.0rem 0.5rem 0.0rem;
}
#faq details {
/* ---------------------------------------- */
/* "color" here colors both "summary" (title) and "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
/* "font-size" is not needed here (set in "details[open] {}" style, below): */
/* font-size: 2.0rem; */
/* ---------------------------------------- */
border: 1px solid #c6c6c6;
outline: none;
border-radius: 4px;
padding: 0.0rem 0.0rem 0.0rem 0.5rem;
background-color: #f7f7f7;
}
#faq summary {
/* ---------------------------------------- */
/* "color" here colors "summary" (title) only, not "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
font-size: 1.25rem;
padding: 0.0rem;
cursor: pointer;
}
#faq summary:hover {
/* font-weight: bold; */
color: green;
}
/* Whereas "#faq details[open] {}" sufficed in my HTML details disclose element demo,
* /mnt/Vancouver/programming/html/examples/details-summary-css.html
*due to p-element styles elsewhere in this CSS stylesheet, here I need to also include
* the p-element tag. */
#faq details[open] div {
/* color: magenta; */
/* color: brown; */
/* font-size: 0.95rem; */
/* font-size: 1.0rem; */
font-size: 1.25rem;
/* font-weight: bold; */
}
#faq details[open] a {
/* font-size: 1.0rem; */
font-size: 1.25rem;
}
/* Persagen hyperlink styling: see also bookmark iex8oobo */
#faq details[open] a.persagen {
color: green;
/* font-size: 1.0rem; */
font-size: 1.25rem;
font-weight: normal;
}
#faq details[open] a.persagen:hover {
background-color: transparent;
text-decoration: underline;
border-bottom: none !important;
}
#faq details[open] a.persagen:visited {color: green}
#faq details[open] summary {
/* ---------------------------------------- */
/* When opened, "color" here colors "summary" (title) only - not "details" (contents): */
/* color: magenta; */
/* ---------------------------------------- */
color: green;
/* Larger "summary" font, when opened: */
/* font-size: 1.0rem; */
border-bottom: 1px solid #c6c6c6;
}
/* [end] Details disclosure element CSS - "#faq" DIV: */
/* ---------------------------------------- */
/* [end] details disclosure element CSS subsection */
/* ------------------------------------------------------------------------- */
/* This is for instances where there are <=2 snippets. */
/* PUFFIN [2022-04-03] replaced, ResultWidget, "snippet_summary" ID with "snippets" */
/* FOLLOWING NOW DEPRECATED - DELETE: */
.snippet_summary {
/* display: none: */
font-size: 0.9rem;
border: 1px solid #c6c6c6;
border-radius: 4px;
padding: 0.0rem 0.0rem 0.0rem 0.5rem;
/* background-color: #ededed; */
background-color: #f7f7f7;
}
/* ---------------------------------------- */
/* ---------------------------------------- */
/* PUFFIN [2022-04-03] DEPRECATED - REMOVE: */
#ontology_links {
font-size: 0.8rem;
margin-bottom: 0.0rem;
}
/* ---------------------------------------- */
/* [end] DOCUMENT-SPECIFIC ELEMENTS */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* CLEAR */
/* Although I don't use "" in index.html, I'm leaving
* this here for reference.
* https://developer.mozilla.org/en-US/docs/Web/CSS/clear
* "The clear CSS property sets whether an element must be moved below (cleared)
* floating elements that precede it. The clear property applies to floating and
* non-floating elements. When applied to non-floating blocks, it moves the border
* edge of the element down until it is below the margin edge of all relevant floats.
* The non-floated block's top margin collapses. ..."
* The MDN page also has a very helpful demo.
*/
.clear {
clear: both;
padding-top: 0.4rem;
}
/* ------------------------------------------------------------------------- */
/* BANNER */
/* Banner is the two-line header ("Persagen knowledge engine")
* at the top of the page.
*
* DIV structure (HTML file):
*
* ...
* .banner
* | .banner-left
* | | .subnav : "Home" button
* | | | .homeButtonSubnav : "About" | "Blog" | "Contact" | ... | "Sources" pages
* | | .subnav : "Help" button
* | | .subnav : { "Login" button (Persagen "index.html" page only)
* | | .subnav : "Login" button (Persagen "index.php" page only) }
* | .banner-right : "Persagen.com ..." at the far-right of the "banner-left" DIV
* .split : DEPRECATED: "split" DIV removed in
* public/css/pg-solr.css v06 (this file) and
* /public/index.html v08
* ...
*/
/* This ("banner {}") does not appear t be used: */
.banner {
position: relative;
background-color: #f8f9f9;
margin-top: 0.2rem;
margin-bottom: 0.0rem;
}
/* [end] banner
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* BANNER-LEFT DIV */
/* The margin above the "Home About ..." menu is set in the "body {}" style. */
.banner-left {
float: left;
/* https://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set */
width: 100%;
position: absolute;
/* https://stackoverflow.com/questions/10451445/two-div-blocks-on-same-line */
display: inline-block;
border-width: 0px;
/* background: linear-gradient(to bottom, #f8f9f9, #e7e7e7); */
/* background-color: #f8f9f9; */
/* background-color: yellow; */
background-color: #f8f9f9;
border: none;
border-bottom: 1px solid darkgray;
/* ---------------------------------------- */
/* NOTE [bookmark: ueh9phie]: the ordering here matters: placing this padding above "float" (above)
* breaks the banner CSS placement in the web page. */
/* padding: 0px; */
/* padding-left: 0.5rem; */
/* padding: { top right bottom left }: */
padding: 0.0rem 0.0rem 0.2rem 0.5rem;
/* ---------------------------------------- */
}
.banner-left a {
/* font-size: 0.9rem; */
font-size: 1.0rem;
/* color: magenta; */
color: #646464;
text-align: center;
/* padding: { top right bottom left }: */
padding: 0.0rem 0.5rem;
text-decoration: none;
}
.banner-left a:hover:not(.active) {
/* background-color: #111; */
/* font-size: 1.5rem; */
/* font-weight: bold; */
/* color: magenta; */
color: black;
/* background-color: #ccc; */
background-color: #ddd;
/* text-decoration: none; */
border-bottom: 1px solid black;
}
.banner-left .active {
/* background-color: #4CAF50; */
background: #f8f9f9;
font-weight: bold;
color: black;
}
.subnav span {
font-size: 0.9rem;
color: #646464;
text-align: center;
padding: 0.0rem 0.5rem;
text-decoration: none;
/* font-weight: bold; */
/* color: magenta; */
/* color: black; */
}
/* [2023-08-04] Not used? */
/*
.subnav span:hover .guest_user_help {
// background-color: #ddd;
// background-color: #eee;
color: magenta;
// color: black;
visibility: visible;
}
*/
/* { Home | Help | Guest login / Login help | Login } in upper pane. */
.subnav {
float: left;
overflow: hidden;
margin-left: 0.5rem;
}
.subnav a {
/* color: white; */
text-decoration: none;
}
/* 2022-03-23: #ddd (sl. darker than #eee) is used in my { Ontology | Documents | Graph } tabs hover shading */
.subnav a:hover {
/* background-color: #ddd; */
/* background-color: #eee; */
/* font-weight: bold; */
/* color: magenta; */
color: black;
}
.subnav:hover .homeButtonSubnav {
display: inline-block;
/* background: linear-gradient(to bottom, #f8f9f9, #e7e7e7); */
background-color: #f8f9f9;
/* This colors the entire width of the "banner-left" DIV's subnav menu: */
/* border: 1px solid magenta; */
/* border: 1px solid darkgray; */
border: 1px solid lightgray;
/* border-bottom: none; */
padding-left: 0.5rem;
}
/* ---------------------------------------- */
/* (display: inline) https://stackoverflow.com/questions/10540446/how-do-i-keep-two-divs-on-the-same-line */
div.login_help {
/* width: auto; */
/* margin-left: 0.5rem; */
display: inline;
}
/* https://www.colorhexa.com/a52a2a
* brown: #a52a2a
* lighter brown: #d14a4a
*/
/* a #login_help { */
div.login_help a {
font-size: 0.9rem;
/* font-weight: bold; */
/* color: magenta; */
/* color: brown; */
color: green;
}
/* a #login_help:hover { */
div.login_help a:hover {
/* font-weight: bold; */
/* color: magenta; */
/* color: brown; */
/* color: green; */
color: brown;
}
/* ---------------------------------------- */
/* ----------------------------------------- */
/* "BANNER-LEFT" DIV "HOME" BUTTON SUBMENU ENTRY: */
/* HOME BUTTON: */
/* .subnav .homeButton {} affects (only) the "Home" button, which is the entry to the */
/* "subnav" 2022-03-23: { About | Blog | Contact | Glossary | ... } menu. */
.subnav .homeButton {
/* font-size: 1.0rem; */
font-size: 0.9rem;
border: none;
outline: none;
/* background: linear-gradient(to bottom, #f8f9f9, #e7e7e7); */
background-color: #f8f9f9;
/* color: magenta; */
color: #646464;
/* padding: { top right bottom left }: */
padding: 0.0rem 1.0rem 0rem 0rem;
/* This will move the beginning of "Home" under the beginning of "Persagen knowledge engine": */
/* padding: 0.0rem 0.5rem; */
font-family: inherit;
margin: 0;
}
/* Currently (2022-03-23) affects "Help" "BANNER-LEFT" DIV's button only (hard page reload needed): */
/* 2022-03-23: #ddd (sl. darker than #eee) is used in my { Ontology | Documents | Graph } tabs hover shading */
.banner-left a:hover, .subnav:hover .homeButton {
/* background-color: red !important; */
/* background-color: #ddd; */
/* ---------------------------------------- */
/* Affects all elements on LHS (only) of the "BANNER-LEFT" DIV: */
/* font-weight: bold; */
/* ---------------------------------------- */
/* color: black; */
/* padding: { top right bottom left }: */
/* padding: 0.0rem 0.5rem; */
/* -------------------- */
/* This affects the bottom border of both the "BANNER-LEFT" DIV and "BANNER-LEFT" subnav menu: */
/* border-bottom: 2px solid red !important; */
/* border-bottom: 1px solid black; */
/* This "!important" override removes that bottom border: */
border-bottom: none !important;
/* -------------------- */
}
/* ---------------------------------------- */
/* ---------------------------------------- */
.homeButtonSubnav {
/* The following "height" attribute increases the space under the "Home" button
* subnav items - making it easier to mouseover the { About | Blog | Contact | ... }
* submenu items, without accidentally losing that focus due to mouse movement. */
height: 3rem;
display: none;
position: absolute;
left: 0;
width: auto;
/* z-index: 1; */
}
.homeButtonSubnav a {
/* color: white; */
text-decoration: none;
}
/* 2022-03-23: #ddd (sl. darker than #eee) is used in my { Ontology | Documents | Graph } tabs hover shading */
.homeButtonSubnav a:hover {
/* background-color: #ddd; */
/* background-color: #eee; */
color: black;
}
/* [end] banner-left DIV */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* "BANNER-RIGHT" DIV: */
/* This is the "Persagen.com" at the far-right of the "BANNER-LEFT" DIV: */
/* https://stackoverflow.com/questions/7693224/how-do-i-right-align-div-elements */
.banner-right {
float: right;
position: relative;
/* font-size: 0.9rem; */
font-size: 1.0rem;
padding-right: 1.5rem;
}
/* Persagen hyperlink styling: see also bookmark iex8oobo */
/* Font size here >1.0rem interferes disrupts seamless bottom border, when the "Home"
* button is moused over. "Persagen.com" is a Persagen link, so colored green via
* "a.persagen {}" CSS (below). Need a "!important" overrides (below), if you want to
* locally change that ("Persagen.com") color, size, ... here ("BANNER-LEFT" DIV). */
.banner-right a.persagen {
color: green;
/* font-size: 0.9rem; */
font-size: 1.1rem;
font-weight: normal;
}
/* https://stackoverflow.com/questions/22674633/text-that-shows-an-underline-on-hover */
/* https://stackoverflow.com/questions/44860766/how-to-create-underline-effect-on-hovered-links-in-css */
.banner-right a.persagen:hover {
/* Nope: "none" not valid for "background-color"; use "transparent": */
/* https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css */
background-color: transparent;
/* background-color: #ddd; */
/* font-weight: bold; */
text-decoration: underline;
/* -------------------- */
/* border-bottom: 1px solid #4e4eff; */
/* This removes the underlining of the "Persagen.com" "BANNER-LEFT" DIV item itself (the underlining */
/* of hyperlinks is preserved): */
border-bottom: none !important;
/* border-bottom: 1px solid green !important; */
/* -------------------- */
}
/* .banner-right a:visited{color: #4e4eff;} */
/* Persagen hyperlink styling: see also bookmark iex8oobo */
.banner-right a.persagen:visited {color: green}
/* [end] banner-right DIV */
/* ------------------------------------------------------------------------- */
/* ========================================================================= */
/* PERSAGEN LINKS */
/* ========================================================================= */
/* [bookmark: iex8oobo] */
a.persagen {
font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif';
font-size: 1.25rem;
/* font-size: 1.0rem; */
/* No underline: */
text-decoration: none;
color: green;
}
/* https://stackoverflow.com/questions/22674633/text-that-shows-an-underline-on-hover */
/* https://stackoverflow.com/questions/44860766/how-to-create-underline-effect-on-hovered-links-in-css */
a.persagen:hover {
/* color: green; */
/* color: magenta !important; */
/* text-decoration: underline; */
/* text-decoration: none; */
/* font-weight: normal; */
/* font-size: 1.0rem; */
/* font-weight: bold; */
border-bottom: 1px solid green;
}
a.persagen:visited{color: green;}
/* ========================================================================= */
/* [end] PERSAGEN LINKS */
/* ========================================================================= */
/* ---------------------------------------- */
/* [bookmark: ub2laith] */
/* ISSUE [2023-10-25 but preexisting many months] There is a issue with links
* containing 'class="persagen"' e.g.
*
* Those fail to open properly, for some (yet) undetermined reason.
* WORKAROUND. As a temporary solution I will define a new ".persagen-ext" class
* that will open Persagen links / content in an external page but will continue
* to color those links green.
*/
a.persagen_ext {
/* font-size: 1.0rem; */
font-size: 1.25rem;
/* No underline: */
text-decoration: none;
color: green;
}
/* Re: "!important" below: there is likely an "infobox" a-link style elsewhere
* in this "public/css/pg-solr.css" stylesheet that is overriding the followinf
* style.
*/
a.persagen_ext:hover {
/* border-bottom: 1px solid magenta !important; */
border-bottom: 1px solid green !important;
}
a.persagen_ext:visited{color: green;}
/* ========================================================================= */
/* Note: no space before ID tag in "span" (e.g. "span#sc {}" not "span #sc {}")" */
/* sc: Small caps */
span#sc {
font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif';
/* font-size: 1.25rem; */
font-variant: small-caps;
/* font-family: courier; */
/* font-weight: bold; */
/* color: magenta; */
}
/* */
span#pgsc {
font-family: 'Atkinson Hyperlegible', 'Arial', 'Verdana', 'sans-serif';
/* font-size: 1.25rem; */
font-variant: small-caps;
/* color: green; */
color: brown;
}
/* */
span#green {
color: green;
}
span#comment {
color: green;
/* font-weight: bold; */
}
/* Used in sources.html */
span#red_flag {
color: yellow;
font-weight: bold;
}
/* Used in sources.html */
span#red_flag {
color: red;
/* background-color: black; */
font-weight: bold;
}
/* Used in sources.html */
span#yellow_flag {
/* color: yellow; */
/* background-color: black; */
/* color: brown; */
/* color: orange; */
/* #ff4c00 : darker orange */
color: #ff4c00;
font-weight: bold;
}
li.body {
/* order (below): top right bottom left */
margin: 0.25rem 0.0rem 0.25rem 2.5rem;
/* color: brown; */
}
li.body p {
/* color: brown; */
/* order (below): top right bottom left */
/* margin: 0.0rem 1.0rem 0.0rem 0.25rem; */
margin: 0.5rem 1.0rem 0.0rem 0.25rem;
}
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* PAGER NAVIGATION ELEMENT */
/* The "pager" DIV (which resides in the "navigation" DIV) contains the
* -elements that comprise the "... <#> Displaying # to # of #" that
* appears at the upper right-hand side of the Pg-Solr main page.
*
* While the relevant code is found in
* /mnt/Vancouver/domains/persagen/05/widgets/jquery/PagerWidget.js
* that "pager" string is constructed near the top of
* /mnt/Vancouver/domains/persagen/05/js/pg-solr.js
*/
/* #navigation{} is needed to place the bottom border across the .split DIV: */
#navigation {
/* border-bottom: 1px solid #000; */
/* border: 1px solid magenta; */
border-bottom: 1px solid lightgray;
margin-top: -0.25rem;
margin-bottom: 0.25rem;
}
/* This -element styles the right-most page number decades (groups of 10 documents
* and the "[next]" text - all of which precedes the "[Displaying x to y of z items.]"
* (which itself is styled in #pager-top, #pager-header-top {}", further below. */
#navigation a {
margin-right: 0.0rem;
margin-left: 0.0rem;
font-size: 0.8rem;
/* color: magenta; */
color: green;
}
#navigation a:hover {
margin-right: 0.0rem;
margin-left: 0.0rem;
font-size: 1.0rem;
color: green;
/* color: magenta; */
/* background-color: transparent; */
/* font-weight: bold; */
border-bottom: none;
}
/* This includes the (e.g.) "[Displaying 1 to 10 of 747 items.]" text. */
#pager,
#pager-header {
display: inline;
font-size: 0.8rem;
/* color: magenta !important; */
/* color: gray; */
/* Darker gray: */
color: #646464;
margin-left: 0.0rem;
}
#pager li:hover {
/* border: 1px solid #949494; */
/* Lighter border than gray, https://www.colorhexa.com/808080 : */
/* background-color: magenta; */
/* background-color: #bcdfeb; */
}
#pager li {
/* https://www.w3schools.com/jsref/prop_style_liststyletype.asp */
/* https://www.w3schools.com/css/css_list.asp */
/* Problem: cannot style contents of (list) items! */
list-style-type: none;
font-size: 0.8rem;
/* Colors, here, affects the "<#>" that appears in "<#> displaying # to # of #" */
/* color: red; */
/* color: brown; */
color: green;
display: inline;
}
#pager li:hover {
/* color: brown; */
/* color: green; */
/* font-weight: bold; */
}
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* DOCUMENTS */
/* COMMENT [2022-04-03] "docs" DIV is deprecated in index.html v05. */
/* #docs { */
/* margin-top: 0.5rem; */
/* } */
/* PUFFIN - per COMMENT ABOVE, THESE ARE DEPRECATED IN index.html v04 - DELETE: */
/* color: red; */
/* #docs p { */
/* font-size: 0.8rem; */
/* } */
/* color: magenta; */
/* font-weight: bold; */
/* #docs a.more:hover { */
/* color: brown; */
/* border-bottom: 1px solid brown; */
/* } */
/* ---------------------------------------- */
/* ========================================================================= */
/* ONTOLOGY d3.js + RELATED DOM STYLES */
/* ------------------------------------------------------------------------- */
/* d3.js COLLAPSIBLE TREE */
.node {
cursor: pointer;
}
/* nodes in d3.js are called "circles"; the size attribute, .attr()
* is set via "r" (radius). */
/* #fff : white */
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.0px;
}
/* JavaScript-scripted attributes [ .style(... d.class...)] override these. */
/* #ff4136 : red */
.found {
fill: #ff4136;
stroke: #ff4136;
}
.node text {
font: 10px sans-serif;
/* font: 11px sans-serif; */
/* font: 12px sans-serif; */
}
/* Link, i.e. edge: */
.link {
fill: none;
/* stroke: #ccc;
* #ccc is slightly darker than lightgray, https://www.colorhexa.com/d3d3d3
* stroke: lightgray; */
stroke: #d3d3d3;
stroke-width: 2.0px;
}
/* ========================================================================= */
/* ========================================================================= */
/* ONTOLOGY | ONTOLOGY "select2" SEARCH */
/* This is the d3.js collapsible tree visualization - with search, pan, and
* zoom - for my ontology. */
/* This is the element that contains all ontology visualization-related objects: */
.ontology_d3_viz {
/* ---------------------------------------- */
/* "height", below, needs to be set to "500px" for the
*
* and
* $("#ontologyDivToggle").on("click", function () {...}
* JavaScript code to execute properly in index.html .
*/
/* ---------------------------------------- */
width: 98%;
/* height: 500px; */
height: 80vh;
border: 1px solid darkgray;
/* border: 4px solid magenta; */
background-color: #f8f9f9;
/* order (below): top right bottom left */
margin: 0.5rem 0.5rem 1.0rem 0.25rem;
/* transition: width 0.25s; */
overflow: auto;
position: relative;
}
.ontology_d3_viz p {
font-size: 0.7rem;
color: gray;
/* Darker gray: */
/* color: #646464; */
/* NO EFFECT?! */
/* color: magenta; */
/* order (below): top right bottom left */
margin: 0.0rem 0.5rem 0.5rem 0.5rem;
}
/* Increase font size and darken on hover: */
.ontology_d3_viz p:hover {
font-size: 0.9rem;
color: #454545;
}
#d3_object_div {
/* border: 2px solid magenta; */
/* This holds the d3.js collapsible tree visualization. */
/* ---------------------------------------- */
height: 70vh;
/* height, width of d3.js SVG visualization set in ontology.js. */
/* ---------------------------------------- */
/* To have the SVG bounded on all sides by a border, I need to add this: */
/* border-bottom: 1px solid #c6c6c6; */
/* ---------------------------------------- */
/* order (below): top right bottom left */
/* margin: 0.0rem 0.0rem 0.0rem 0.5rem; */
/* Right Bottom margins set via SVG size in ontology.js;
* Left margin set here:
*/
/* margin-left: 0.5rem; */
/* order (below): top right bottom left */
margin: 0.0rem 0.5rem 0.5rem 0.5rem;
/* ---------------------------------------- */
/* overflow: auto; */
}
/* ----------------------------------------------------------------------------
* These to adjust spacing (margins) for H4 header, comment in d3.js VIZ:
*/
h4#ont {
/* color: magenta; */
/* color: green; */
/* order (below): top right bottom left */
margin: 0.0rem 0.0rem 0.0rem 0.5rem;
}
/* Needed "!important" here to force styling of this URL font size: */
#ont-comment a {
/* color: magenta; */
font-size: 0.8rem !important;
/* order (below): top right bottom left */
margin: 0.0rem 0.0rem 0.0rem 0.5rem;
}
#ont-comment p {
/* color: magenta; */
font-size: 0.8rem;
/* order (below): top right bottom left */
margin: 0.0rem 0.0rem 0.0rem 0.5rem;
}
/* ------------------------------------------------------------------------- */
/* INPUT element for the d3.js ontology visualization: */
#ont_input {
/* order (below): top right bottom left */
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#ontologyDivToggle {
/* order (below): top right bottom left */
margin: 0.0rem 0.0rem 0.0rem -1.8rem;
}
/* This is the width of the dropdown menu selector, and the dropdown list: */
.dropdown_item_all {
/* width: 90%; */
width: 50%;
/* order (below): top right bottom left */
margin: 0.0rem 0.0rem 0.0rem 1.8rem;
/* margin-left: 0.5rem !important; */
}
/* This is the width of the document-specific (fq) dropdown menu selector, and the dropdown list: */
.dropdown_item_fq {
width: 90%;
/* margin-left: 0.5rem !important; */
}
/* https://stackoverflow.com/questions/42788525/how-can-i-change-the-font-size-of-one-select-box-option-text-select2-with-css
* ... added
* dropdownCssClass: "select2Font"
* to
* $(".dropdown_item_all").select2({...})
* in: /mnt/Vancouver/domains/persagen/04/js/ontology.js
*/
.select2Font {
font-size: 12px;
}
/* select2 placeholder text style:
* How to change the css of default select2 placeholder color?
* https://codepen.io/josephting/pen/LsDbG
* #f00 : red
*/
.dropdown_item_all .select2-default {
/* font-size: 12px; */
font-size: 0.8rem;
/* color: #f00 !important; */
/* color: red !important; */
}
.dropdown_item_fq .select2-default {
/* font-size: 12px; */
font-size: 0.8rem;
/* color: #f00 !important; */
/* color: red !important; */
}
/* https://stackoverflow.com/questions/3063167/css-content-not-staying-inside-border */
/* Originally if I set a height anywhere below,
* height: 30rem;
* then the d3.js object (the ontology visualization) is bounded by the
*