BODY { /* CSS file imported by some/many of my HTML files (pm \@\ phmartin \.\ info ; 30/5/2019) ========================================================================================================== */ font-size:11pt; /*counter-reset:h1n 0; //or: -1*/ width:56em/*=99cIn11ptCode=124'_'In11ptP=94'_'in14.5ptH3 */ /* https://validator.w3.org/#validate_by_upload+with_options https://jigsaw.w3.org/css-validator/#validate_by_upload */ /* DIV { margin-top:0 } */ /*bef2023-04-22*/ } /* ===================================== Section - Header =========================================================== */ /* As for "DL - DT - DD" below */ .withSectionContractionSymbols section h2::after { content:" \00A0 \00A0 \25be "; color:green } .withSectionContractionSymbols section h3::after { content:" \00A0 \00A0 \25be "; color:green } .withSectionContractionSymbols section h4::after { content:" \00A0 \00A0 \25be "; color:green } .withSectionContractionSymbols section h5::after { content:" \00A0 \00A0 \25be "; color:green } .withSectionContractionSymbols section.avoidContracting h2::after { color:darkOrange } .withSectionContractionSymbols section.avoidContracting h3::after { color:darkOrange } .withSectionContractionSymbols section.avoidContracting h4::after { color:darkOrange } .withSectionContractionSymbols section.avoidContracting h5::after { color:darkOrange } .withSectionContractionSymbols section.contracted h2::after {content:" \00A0 \00A0 \25b8 ..."; color:green} .withSectionContractionSymbols section.contracted h3::after {content:" \00A0 \00A0 \25b8 ..."; color:green} .withSectionContractionSymbols section.contracted h4::after {content:" \00A0 \00A0 \25b8 ..."; color:green} .withSectionContractionSymbols section.contracted h5::after {content:" \00A0 \00A0 \25b8 ..."; color:green} section.contracted * { display:none } section.contracted h2 { display:block } section.contracted h2 a { display:inline} section.contracted h3 { display:block } section.contracted h3 a { display:inline} section.contracted h4 { display:block } section.contracted h4 a { display:inline} section.contracted h5 { display:block } section.contracted h5 a { display:inline} H1 { font-size:19pt; counter-reset:h2n; margin-top:30%} H1.firstInHserie { margin-top:6%} H1.smallTopMargin { margin-top:20%} H1.smallTopMargin.firstInHserie {margin-top:5%} H1.title {font-size:17pt; margin-top:0; margin-left:7%} H1.center { margin-left:0 } H2 { font-size:16.5pt; counter-reset:h3n; margin-top:20%} H2.firstInHserie { margin-top:5%} H2.smallTopMargin { margin-top:12%} H2.smallTopMargin.firstInHserie {margin-top:4%} H3 { font-size:14.5pt; counter-reset:h4n; margin-top:10%} H3.firstInHserie { margin-top:4%} H3.smallTopMargin { margin-top: 8%} H3.smallTopMargin.firstInHserie {margin-top:3%} H4 { font-size:12.5pt; counter-reset:h5n; margin-top: 6%} H4.firstInHserie { margin-top:3%} H4.smallTopMargin { margin-top: 5%} H4.smallTopMargin.firstInHserie {margin-top:2%} H5 { font-size:11pt; counter-reset:h6n; margin-top: 3%} H5.firstInHserie { margin-top:2%} H5.smallTopMargin { margin-top: 3%} H5.smallTopMargin.firstInHserie {margin-top:1%} H5.smallTopMargin {margin-bottom:0%} H1,H2,H3,H4,H5,H6 { white-space:pre; /* To generate section numbers (which unfortunately are not searchable in browsers+editors): H1::before { counter-increment:h1n; content:counter(h1n)". " } H2::before { counter-increment:h2n; content:counter(h1n)"."counter(h2n)". " } H3::before { counter-increment:h3n; content:counter(h1n)"."counter(h2n)"."counter(h3n)". " } H4::before { counter-increment:h4n; content:counter(h1n)"."counter(h2n)".";counter(h3n)"."counter(h4n)". " } H5::before { counter-increment:h5n; content:counter(h1n)"."counter(h2n)".";counter(h3n)"."counter(h4n)". "counter(h5n)". " } */ } .spanH1, .spanLev1 { } .spanH2, .spanLev2 { } .spanH3, .spanLev3 { } .spanH4, .spanLev4, .tocH4 { font-size:smaller } .spanH5, .spanLev5, .tocH5 { font-size:smaller } .pTableOfContents { white-space:pre; margin-top:0 } .TOCtitlesOfSubsectionLevel_hideOrReveal { color:blue /* .nextSiblingIsTemporarilyHidden { display:inline }; .temporarilyHidden { display:none }; .spanThatWasClickedOn { } .spanThatWasNotClickedOn { } */ } /* ===================================== Detail - Summary =========================================================== */ /* reminder: this CSS is NOT used in slides nor in index.html pages */ summary { /* text-align:justify; //white-space:pre; margin-bottom:0; display:inline */ } details summary > * /* hence for any element having summary as direct parent */ { display:inline; /* thus arrow on left, not above, BUT header top margin LOST */ } /* css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */ details p { margin-top:0; /*just for 1st P: !discriminate, !important; rm if pbs with previous rule */ margin-left:1.48%/*=.9em; for all P */ } /* p::first-line { margin-top:-2%; margin-left:10% } //margin does not work on ::first-line */ .upOnTopOf1lineSummary { margin-top:-2.22%;/*-2.22% (-1.4em)*/ margin-left:1.48%;/*orig: 1.42%*/ background-color:white; filter:opacity(100%); } /* the next rule use percentages that work on Firefox but not on Chrome */ .upOnTopOf2linesSummary { margin-top:-4.6%;/*11pt:-4.6%(-2.9em), 21pt:4.44%*/ margin-left:1.84%;/*1.84%*/ background-color:white; filter:opacity(100%); /* z-index:10; background-clip:text; text-decoration: underline; */ } /* [open] summary { text-decoration: underline dotted; } */ /*display:none; or opacity:0 //remove symbol too */ /* ===================================== DL - DT - DD =============================================================== */ /* old: DT:first-of-type {display:inline-block; min-width:100px; font-weight:bold} DT {display:block; //pb: then dd is below DT min-width:100px; font-weight:bold; clear:left} DT+DD::before{content:":= "} DD::before {content:", "} DD {display:inline-block; margin:0} //DD::after {display:block; content:''} */ dl { /*display:grid;//default:block;"inline":storedBut!effect*/ margin-top:3.42%;/*or 2.1% as P*/ /*useless: margin-bottom:0;*/ } dt { /*display: default:block";inline":storedBut!effect; margin:0 //dt::first-line !recognized */ } /* no: https://bloycey.medium.com/how-to-style-dl-dt-and-dd-html-tags-ced1229deda0 */ dd { margin-left:0/*1.5%*/; /* margin-top:0; margin-bottom:0; */ } dd.wLeftM { margin-left:1.5% } .wDLsymb1st dd{ margin-left:2% } dl.inline { display:inline;/*no effect: align-items:baseline//2024-10-12:to unify with w3c-blue2.css*/} dl.inline dt { display:inline } dl.inline dd { display:inline; margin-left:0 } dl.allInline { display:inline } /* block from w3c-blue2.css */ dl.allInline dt { display:inline } dl.allInline dd { display:inline; margin-left:-0.75% } /* Expanded: Black Down-Pointing Triangle Normal: DecimalCode: ▼ HexCode: ▼ "\25bc" Small: DecimalCode: ▾ HexCode: ▾ "\25be" Contracted: Black Right-Pointing Triangle DecimalCode: ▲ HexCode: ▶ "\25b6" Small: DecimalCode: ▸ HexCode: ▸ "\25b8" font-size:larger; \00A0 =   display:inline; transform:rotate(90deg); dl dt::before { content:"\25be"; color:green; margin-right:.5% } dl.avoidContracting dt::before { color:darkOrange } dl.contracted dt::before { content:"\25b8" } dl.contracted dt::after { content:" ..."; margin-left:.2% } */ dl dt::after { content:" \00A0 \00A0 \25be "; color:green; font-size:smaller } dl.avoidContracting dt::after { /* still small down triangle */ color:darkOrange } dl.contracted dt::after { content:" \00A0 \00A0 \25b8 ..."; color:green; /*margin-left:1%*/ } pre dl dt::after { content:" \25bc "; /* 1+ space assumed before
*/ } pre dl.contracted dt::after { content:" \25b6 ..."; /* bigger since 97% below */ } .KR dl dt::after { content:" \25bc "; /* (large) black down-pointing triangle */ } .KR dl.contracted dt::after { content:" \25b6 ..."; /* (large) black right-pointing triangle */ } .wDLsymb1st dt::after {content:""}/*JS added hyperlinked symbol, !pseudo-element*/ .woDLsymb dt::after {content:""} .wDLsymb1st dl.contracted dt::after {content:""}/*!need for avoidContracting; CSSadding"contracted"":!effect*/ .woDLsymb dl.contracted dt::after {content:""} .woDLsymb .KR dl dt::after, .woDLsymb pre dl dt::after {content:""} .woDLsymb .KR dl.contracted dt::after, .woDLsymb pre dl.contracted dt::after {content:""} dl dd { } dl.contracted dd { display:none } .wDLsymb1st dl a.visibleOnlyInExpandedDL { display:inline; color:green } .wDLsymb1st dl a.hiddenOnlyInExpandedDL { display:none } .wDLsymb1st dl.contracted a.visibleOnlyInExpandedDL { display:none } .wDLsymb1st dl.contracted a.hiddenOnlyInExpandedDL { display:inline; color:green } .wDLsymb1st dl.contracted dt::after { content:"..." } .wDLsymb1st dl.contracted dt.woDotDotDotAfterIfContracted::after { content:"" } dt p { /*2024-06-07out: margin-top:0; margin-left:20%; margin-bottom:0//!work: dt p !inline */ } dd p { /*2024-06-07out: margin:0 //!work with dt p !inline*/ } /* ===================================== UL - OL - MENUS ============================================================ */ /* .visibleOnlyWhenHovered { display:none } .visibleOnlyWhenHovered:hover, .hovered { display:block } */ ul, ol { margin-top:0; margin-bottom:0; /*or(slides to avoid "p"?): margin-bottom:1em;*/ } li { text-align:justify; margin-top:0.1em; /*or: 0.2em; */ margin-bottom:0.2em; margin-left:0 } ul.noTopMargin li { margin-top:0 } /* li li { margin-top:0 } */ ul.smallTopMargin li { margin-top:0.4em } /* ulMenu: class of my no-JS multi-level dropdown-like menu (v1.html): */ .ulMenu { /*height:100% //old: in this menu, the navBar disappears if no height */ } .ulMenu li { list-style:none; position:relative;/*align submenu with parent item*/ } .ulMenu li a { display:block; padding:2% 1rem; white-space:nowrap } .ulMenu li a:hover /*, .ulMenu li:hover li a:hover*/ { background:orange } .ulMenu > .liWithSubmenu > a::after { content:"v"; margin-left:8px; font-size:10px } .ulMenu li ul { display:none; margin:0; padding:0%; }/*".ulMenu " just for scope*/ .ulMenu li:hover > ul { display:block; position:absolute;/*for no overlap*/ /*bottom:100%;/*dropup|popup at 1st level; only diff; here or above rule*/ /*right:0; //right-aligned 1st level but no further submenus*/ } .ulMenu li:hover li { background-color:LightYellow; box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)/*old: border:.1rem solid*/} .ulMenu ul ul { top:0; left:100%; /*needed for indenting submenus*/ } .liWithSubmenu > a:after { content:"+"; margin-left:8px; font-size:10px } /* ulAsSelect: class of a multi-level UL looking+behaving like a form SELECT */ /*.divAroundUlAsSelect {display:inline-block; position:relative; width:max-content;}*/ .selOfUlAsSelect { display:inline-block;/*!inline*/ position:relative;/*!abs!!!*/ width:min-content; vertical-align:baseline; /*margin:0; no: float:left; //align with preceding text */ font-size:83%; /* cursor:pointer; user-select:none; */ box-sizing:border-box; border:1px solid black;/*lightGray;*/ border-radius:4px; padding:3px; background-color:Gainsboro;/*between whitesmoke and lightGray*/ /*font-family:Arial, sans-serif;*/ white-space:nowrap; padding-right:0.5rem; /*space for the "v" symbol after //no effect since calculated */ } .selOfUlAsSelect:focus { outline:2px solid deepskyblue; } .selOfUlAsSelect:hover { background-color:lightGray; } .selOfUlAsSelect::after /*cannot be followed by ":hover"*/ { content:"v"; font-family:Arial; /* pointer-events:none; */ position:absolute; /*from*/right:6%; top:50%; transform:translateY(-50%) } .ulAsSelect { font-size:83%; } .ulAsSelect, .ulAsSelect li > ul {/*all:unset;*/display:none;/*later:block*/ min-width:min-content;/*no effect*/ position:absolute;/*!rel!!soDropdownOnTopOfOthers*/ /*box-sizing:border-box;*/ /*left:0 putsItMostLeft(!left-aligned), so calc in EvntEnterOnHiddenUL_handle*/ margin:0; padding:0; list-style:none; white-space:nowrap; border:1px solid lightGray; border-radius:4px; background-color:whitesmoke; /*font-family:Arial, sans-serif;*/ z-index:1000; } /* main styling; https://www.rapidtables.com/web/css/css-color.html#blue */ .ulAsSelect:focus, .ulAsSelect li > ul:focus { outline:2px solid transparent; } .ulAsSelect li/*,.ulAsSelect li > ul li*/ { padding:7px; position:relative; } .ulAsSelect li:hover { background-color:skyblue; } .ulAsSelect li[data-s-is-key-navigated="true"] { background-color:powderblue; } .ulAsSelect li[data-s-is-selected="true"] { background-color:deepskyblue; } /* previous line: css:[data-s-is-selected] <-> js:.sIsSelected; class better? */ /* below: extension for ULs in LIs (and symbols after LIs containing ULs) */ .ulAsSelect li.has-children > ul { position:absolute;left:100%;top:0; /*display:none;*/ } .ulAsSelect li.has-children.open > ul { display:block; } /* show nested UL */ .ulAsSelect li.has-children { padding-right:2.2rem; } .ulAsSelect li.has-children::after { content:"v"; font-family:Arial; position:absolute; right:6%; top:50%; transform:translateY(-50%); /*transition:transform 0.1s*/ } .ulAsSelect li.has-children.open::after { transform:translateY(-50%) rotate(-90deg); } /* rotate arrow */ /* ===================================== DRAG / RESIZE ============================================================== */ .moveable { border:thin dotted; /*width:20%*/; } .draggable { border:thin dashed; /* dotted / dashed / outset */ min-width:fit-content/*or: 65%*/; min-height:2.5%; position:absolute; /* necessary to support moves; removes margins specif. */ background-color:white; /*no effect: z-index:9; float:left; */ } .dragAnchor{ cursor:move } .resizable {resize:both/*horizontally+vertically*/; overflow:auto/*scroll woUnnecessaryBars*/} /* but no horizontal resize nor scrollbar if wrapping not allowed */ /* ===================================== Other stuff ================================================================ */ p { margin-top:2.1%/*=1.3em*/; margin-bottom:0 } /*bef2024-05-14: was margin-top:1.25em; margin-bottom:0.5em//e.g. for PRE (so changed too there) */ /* old (useless now with margin-bottom:0 on P): the next rules would be interesting if they worked on P instead of UL (-> margin-bottom:0 for P followed by UL): P UL { margin-bottom:0 } // UL with ancestor P P > UL { margin-bottom:0 } // UL with parent P P + UL { margin-bottom:0 } // UL just after P P ~ UL { margin-bottom:0 } // UL after P */ .withJustifiedParagraphs p { text-align:justify } .centered{ text-align:center } .center { text-align:center; /* does not work: .center TD { text-align:center; vertical-align:middle } .center TABLE { margin-left:auto; margin-right:auto; //or: margin: 0 auto 0 auto } */ } TABLE { /*2020-12, no more: border: 0px solid; border-spacing:0.1em; padding:0em; */ } TABLE.centered, TABLE.center{ margin-left:auto; margin-right:auto; /*or: margin: 0 auto 0 auto; */ } TR.no-entry, TD.no-entry { background-color:WhiteSmoke } TH, TD { border:0; /* the default */ } TABLE.center { text-align:center; vertical-align:middle } TABLE.woBorder{ border: 0px solid; border-spacing:0.1em;/*near default*/ padding:0em; /*no more: margin-top: 0em; margin-bottom: 0.5em; //no: border-collapse:collapse; */ } TABLE.wB { border: 1px solid black; border-spacing:0; /*new:2020-12-16 */ } TABLE.wBorder { border: 1px solid black; border-spacing:0; padding:6px; /*new */ margin: 0 0 1.5em 0; /*no: border-collapse:collapse; */ } TABLE.wBorder0{ border: 1px solid black; border-spacing:0; padding:0px; /*new */ margin: 0 0 1.5em 0; border-collapse:collapse;/*otherwise big borders*/ } TH.woBorder, TD.woBorder {border:0; /* the default */ } TH.wBorder, TD.wBorder {border:1px solid; border-spacing:0em; padding:10px } TH.wBorder0, TD.wBorder0 {border:1px solid; border-spacing:0em; padding: 5px } TH.wBorder0c, TD.wBorder0c {border:1px solid; border-spacing:0em; padding: 5px; text-align:center} .wP5 .wPadding5 { padding:5px } .wP6 .wPadding6 { padding:6px } .c0 {text-align:center; padding:0} .c5 {text-align:center; padding:5px } .margin0,.m0{ margin: 0 0 0 0 } .mt0{margin-top:0;} .mt6{margin-top:6px;} .mt9{margin-top:9px;} .mb0{margin-bottom:0;} .mL0{margin-left:0} .mL10pc{margin-left:10%} .mL15pc{margin-left:15%} .mL18pc{margin-left:18%} .mL20pc{margin-left:20%} .noMargin { margin:0 } .noTopMargin, .noTop { margin-top:0 } .noBottomMargin, .noBot { margin-bottom:0 } .rule { font-size:smaller } CODE { font-family:monospace; font-size:97% } PRE, XMP, .KR { font-size:97%; margin-top:2%;/*bef2024-05-14:0, orig:1em *; 2023-08-25:2%not1%*/ /* margin-bottom:0% //the default; was the orig (then 0.6em): any change/better? */ /* 93%forBodyOf10.5pt = 89%forBodyOf11pt = 9.8ptInHeight(widthDoesNotChange!) 2023-12-31: 89% -> 96.75% -> 97% */ } .KR { text-align:left; font-family:monospace; white-space:pre; /* actually possible: PRE P { margin-top:1em; margin-bottom:0% } */ } .pre-ed, pre { white-space:pre } .nowrap { white-space:nowrap } .pre { white-space:pre } .preSmaller { font-size:smaller; font-size:89% } .smaller { font-size:smaller; /*"small" is absolute and biggerThanTheSmallerOf11pt */ /* line-height:100% !important //if inline, useless */ } /* //else ignored: surrounding div(!dl,!small) followed */ /* Warning: unlike , "smaller" also reduces the interlign */ .hidden { display:none } .BOOK { display:none } .nowrap { white-space:nowrap } .A { display:inline } .M { display:inline } .exModif { } .modif { } .newForStudents { color:DarkGreen } .newest{ color:red } .newer { color:DarkSalmon /*DarkGreen*/ } .red { color:red } .green { color:DarkGreen /* https://htmlcolorcodes.com/color-names/ */ } .olive { color:Olive } .lime { color:Lime /*light green*/} .teal { color:Teal /*blue green*/ } .navy { color:Navy /*dark blue*/ } .salmon{ color:DarkSalmon } .mostImportant { color:IndianRed } .mandatory { color:Fuchsia; /*Navy:tooLight Blue:unclickedLlink Purple:clickedlink*/} .big { font-size:larger } .bigger { font-size:larger } .highlighted { background-color:Yellow } .highlightedAndSelected { background-color:Orange !important /* OrangeRed / Tomato / Coral*/ } .vr1 { border-left:1px solid; display:inline-block; width:1% } .vrSet1 { border-left:1px solid; border-top:1px solid; border-bottom:1px solid; display:inline-block; width:1% } .vrSet2 { border-left:1px solid; border-top:1px solid; border-bottom:1px solid; display:inline-block; width:100% } /* no:
*/ /* no (hr in black, ...):
...
no: flex: 0 0 100%; */ .ib { display:inline-block } /* https://stackoverflow.com/questions/68078976/how-to-make-a-cross-sign-red-circle-with-css */ .crossSign { display:inline-grid; place-content:center; aspect-ratio:0.5; min-inline-size:.5em; border-radius:99%; background-color:black; } .crossSign::before { content: "\D7"; color:white; font-weight: bold; } .lightCrossSign::before { content:"\D7"; color:black; font-weight: bold; } [contenteditable] { outline:1px solid green } /* "border":slightly closer; "cursor:text" by default */ [contenteditable]:focus { outline:1px solid blue /*0 solid transparent */ } [contenteditable][previousInnerHTML] { outline:1px solid orange } [contenteditable][previousInnerHTML]:focus { outline:1px solid red } [placeholder]:empty:before{ content:attr(placeholder); color:blue; opacity:0.5; cursor:text } [placeholder]:empty:focus:before{ content:"" } /* cursor:pointer */ @media screen { A {text-decoration: none} /* Firefox bug: decoration only for local links */ } A.generatedTypeAnchor {color:black} @media print { BODY { font-size:11pt; counter-reset:sectionNumber } code,pre { page-break-inside:avoid; font-size:10pt } table,li { page-break-inside:avoid } H1, H2 { page-break-before:always } .pageBreakBefore { page-break-before:always } .pageBreakAfter { page-break-after: always } /* A:link {text-decoration:none} A:visited {text-decoration:none} */ }