css-emphasis-css

¶TYPES:
    EM = EM+STRONG ("concepts")
    EM2 = EM+U ("sections")
    EM3 = main titles (STRONG+EM+U)  <-- doing 20191018

¶HOW TO USE:
    * see defaults colors !
    * change EMbg, EMfg, EMsize !

¶#TODO:
    * clean this up
    * make more configurable
    * MAKE IT CORRELATE TO COMMON/SELECT THEMES (like bicolor)
    * rename to EMb & EMf like customary

#TODO SOLVE BUGS:
    * default do NOT get applied
    * [...]

____________________________________________
*/


/*
____________________________________

¶DEFAULTS
*/
:root {
    --EMsizeDEF: 105%;
    --EMsp: 5.5px;

    --EM2bgDEF: white;
    --EM2fgDEF: #333;
    --EM2xDEF: 110%;

    --EMbgDEF: silver;
    --EMfgDEF: white;
    --EMbgDEF: #ececdb;
    --EMbgDEF: #ececec;
    --EMfgDEF: #222;

    --EM3bgDEF: #ececec;
    --EM3fgDEF: #222;
}


/*
____________________________________

¶EMPHASIS 1 - "SECTIONS" [EM+STRONG]
*/

/*
[!!]:
    PROBLEMATIC
    "strong em u" ALSO GETS PICKED UP?
    —20210811: confirmed
*/

/* strong > em > :not(u) {*/
/*strong > em > :empty {*/
/*
strong>em> :not(s) , em>strong> :not(s) {
strong>em> :empty , em>strong> :empty {
strong>em , em>strong{

strong>em:not(s) , em>strong:not(s) {
THIS WORKS!:
    but fucks up STRONG-EM-U !

20210811:
    AS FAR AS I AM LOOKING AT THIS, "NOT()" only works with CLASSES not ELEMENTS !
    https://developer.mozilla.org/en-US/docs/Web/CSS/:not BUT THIS SAYS YES?
strong>em:not(u) {
strong>em:not(u):not(s) {
strong>em>:not(u) {
*/

strong>em:not(s) , em>strong:not(s) {
    background: var(--EMbg, var(--EMbgDEF)) !important;
    color: var(--EMfg, var(--EMfgDEF)) !important;
    font-size: var(--EMsize, var(--EMsizeDEF)) !important;
    letter-spacing: var(--EMsp, var(--EMspDEF)) !important;
    line-height: 200% !important;
    padding: 2px;
    margin: 2px;
}
/*
*/


/*
____________________________________

¶EMPHASIS 2 - "CONCEPTS" [EM+U]
*/
/*** AWESOME STYLE B - "sandwich" ***/
/*
    border-top-width: 1px !important;
    border-right-width: 0px !important;
    border-bottom-width: 3px !important;
    border-left-width: 0px !important;
*/
/*** AWESOME STYLE C - "box" ***/
/*
    border-top-width: 2px !important;
    border-left-width: 2px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
*/

em>u, u>em {
    background: var(--EM2bg, var(--EM2bgDEF)) !important;
    color: var(--EM2fg, var(--EM2fgDEF)) !important;
    border-color: var(--EM2x, var(--EM2xDEF)) !important;

    font-size: var(--EMsize, var(--EMsizeDEF)) !important;
    letter-spacing: 5px !important;
    line-height: 200% !important;
    padding: 2px !important;
    margin: 2px !important;

/*** AWESOME STYLE A - "sideburns" ***/
/*
### #tocheckout - what's up?
*/
    border-top-width: 0px !important;
    border-right-width: 1px !important;
    border-bottom-width: 0px !important;
    border-left-width: 2px !important;
}


/*

#####################################################################################################
#####################################################################################################
#####################################################################################################

¶COLORING LINKS INSIDE EMs

REVISIONS:
    * 20201013 fixed coloring EM links
    * 20201019:
        merging together (TRYING ... !!! REMOVE EXPLODED BELOW IF WORKS)
        also applying for u+em
    * 20210619 trying to reverse link colors → 🔗test-themex
*/

/*
Stuff like this link or 🔗css-emphasis-css
*/
strong>em>a:link, em>strong>a:link, strong>em>a:visited, em>strong>a:visited, strong>em>a:hover, em>strong>a:hover {
    background: var(--EMbg, var(--EMbgDEF)) !important;
    color: var(--EMfg, var(--EMfgDEF)) !important;

    color: var(--EMbg, var(--EMbgDEF)) !important;
    background: var(--EMfg, var(--EMfgDEF)) !important;
}

/*
Stuff like this link or 🔗css-emphasis-css
### TODO: CONSIDER:
    A) INVERSE SCHEME
    B) MORE PRONOUNCED BORDER
*/

u>em>a:link, em>u>a:link, u>em>a:visited, em>u>a:visited, u>em>a:hover, em>u>a:hover {

    background: var(--EM2bg, var(--EM2bgDEF)) !important;
    color: var(--EM2fg, var(--EM2fgDEF)) !important;

    color: var(--EM2bg, var(--EM2bgDEF)) !important;
    background: var(--EM2fg, var(--EM2fgDEF)) !important;
}


/* 20210316 setting, let's see... */
/* 20210619 adding Tx definitions */
/* 20210823 adding stroke settings (@khg-programme on mobile problems) */


strong>em>u>a:link, strong>em>u>a:visited, strong>em>u>a:hover {

    color: var(--Tb, var(--EM3bg, var(--EM3bgDEF))) !important;
    background: var(--Tf, var(--EM3fg, var(--EM3fgDEF))) !important;

    -webkit-text-stroke: 2px var(--BG) !important;

}


/*
#####################################################################################################
#####################################################################################################
#####################################################################################################
*/