E2H DEFAULT CSS

¶TODO
:
    * bg @ links (black bg, white fg looks good on CHT:TRUCO + krazy colors)
    * bg @ actually all text (so "FGb") ...:
        so you can have "white on black" text, on a colorful backgrounds
    * [...]

¶PAD (DOCUMENTATION)

* https://clrs.cc/ says black is #111 now ... trying 20190701 :D

* todo !!! set defaults for all empty "var" definitions !!!

* NAMING EMPHASIS !!!:
    NEW:
        add to css
        EM0b EM0f = STRONG styling
        EM1b EM0f = ITALIC styling
    __________
    TODO:
        * EM{"","2","3"}bg/fg→b/f
        * make order:
            A) EM 1=B 2=I 3=U 4=S:
                EM1, EM2, EM12, EM23, EM123
            B) keep current compromise:
                b = 0
                i = 1
                b+i = "just EM" ("strong em")
                i+u = 2
                b+i+u = 3

<-------------------------- (new) DOCS ABOVE


______________________________________________________________

¶:root {
    --ETTf: 0,0,0;
    --ETTb: 0,0,0;
    --ETTb: none;

/*
20211117 : first, neither has effect ... then it stars to! lol
    --LINE-HEIGHT: 100px;
*/
    --LINE-HEIGHT: 142%;


/*
20211117 : all have effect (only for line height...) [!]
*/
    --HEADING-SCALE: 1;
    --TEXT-SCALE: 1;
    --TOC-SCALE: 3;
    --TITLE-SCALE: 1.1;

    --Lx_DEF: #CCC;
    --Lf_DEF: #777;


/*
new 20200817:
    Check that it is implemented all across!
    LOL seems only for strong+em+u :D
    [!]
*/
    --TEXT-SIZE: 178%;


/*
____________________________________
"fonts" or "typographies" should be the cool new stuff to import [!*]
like "style:font-blabla"
____________________________________
*/


}

¶body {
    font: normal 12pt/14pt 'Ubuntu Mono', helvetica, sans-serif;

/* 20201112 trying to remove important, hope no problems */
    background: var(--BG, white);

    color: var(--FG, #111) !important;

}

¶.main_container {
    margin: 50px 10px 50px 10px;
    margin: 20px 5px 20px 5px;
    margin: 20px 5px 40px 5px;
    margin: 25px;
    text-align: center;   

/*
justify-content: center !important; 
align-items: center !important;
background: yellow !important;
*/
}

¶.etherpad_container {

/*

___________________________________________________
________________________________________________________
_____________________________________________________________

    """display: inline-block;"""

ATTENTION !!! @20190923 
THIS MAKES #PRINTING #E2H PROBLEM !!!!!!!! 

UPDATE:
    20191022 testing new ! rolled to default
    20191109 reverting back - made an extra slider ... problems

SEE:
    https://stackoverflow.com/questions/4609007/firefox-printing-only-1st-page

AND EXP SETUP:
    https://totalism.org/x/print.html !

______________________________________

WHAT TO DO:

    A) disabling it:
        * no difference to "theme-default" pages
        * normal loose margins (CAN BE FIXED - DO A TEMPLATE !!!!!!)
        -----------------
        DO MORE TESTING !!!
        --------
        UPDATE: 

    B) making an alt template for printing that disables it:
        NOW !!!!!!

    C) ###


TECHNICAL:
    A) display: block; ???
    B) ???


_____________________________________________________________
________________________________________________________
___________________________________________________

WAS BEFORE TRYING TO CHANGE
    display: inline-block;

TRYING ...
    display: block;

JUST TO MAKE SURE:
    background: lime !important;
_________________________________________________________
*/

    word-wrap: break-word;
    text-align: left !important; 


/* HAS IMPACT 20200421 */
    font-size: 120%;
    font-size: 19px;
    font-size: 1em;
    font-size: 1.2em;


/*
_________________________________________________________

REALLY IMPORTANT

WORKS:
    * YES: sidetoc non-neo
    * YES TOO: sidetoc neo 

_________________________________________________________
*/

    line-height: var(--LINE-HEIGHT);
    line-height: calc(var(--LINE-HEIGHT) * var(--TEXT-SCALE)) !important;

    letter-spacing: -0.8px;


/*
___________________________________________

2020-04-21
SET HERE, BUT NEO OVER-RUNS !

LETTER-SPACING:
    * YES: non-neo sidetoc
    * YES : non-neo flat
    * NO: neo sidetoc
    * NO : neo flat
    * [...]

LINE-HEIGHT:
    * YES: non-neo sidetoc
    * YES : non-neo flat
    * NO: neo sidetoc
    * NO : neo flat
    * [...]

SEE 🔗theme-neo ?
______________________________
*/


/*
    margin: 10px 80px 10px 80px !important;
    margin: auto !important;
*/


/*
20191109 using both ... first it was 85%, then max 1000px now trying both
*/

    width: 85% !important;
    max-width: 1000px !important;

    padding: 15px;


/*
20191022 this centers it!
*/
    margin: auto !important;

/*
20220512 fixing for portrait mode with dyes. VERIFY[!!]
    background: none;
*/
    background: var(--BG3, none);


/*
20200706 moved here from theme-neo !
*/
    color: var(--FG, #111) !important;

/*
20211221 fixed SAFARI "NO TOC shown" bug!
    https://stackoverflow.com/questions/44948735/overflow-hidden-is-not-working-with-absolute-element-in-safari
    in my case it is OVERFLOW:SCROLL
*/
    position: relative !important;

}


/*
2021-11-17
after making focus onload by default on this, getting rid of visibility of it
*/

¶.etherpad_container:focus-visible {
  outline: none !important;
}

¶.etherpad_container:focus {
/*
20211221 this solves ugly safari "active" outline
*/
    outline: none !important;
}




/* moved 20191003 from theme-neo */

¶strong>u, u>strong {
  text-decoration: none !important;
  border-bottom: 3px solid black;

    font-size: 140%;
    line-height: calc(var(--LINE-HEIGHT) * var(--HEADING-SCALE)) !important;

    color: black;
    color: var(--Afg, var(--A, #111)) !important;

    background: var(--Abg) !important;
    border-color: var(--Ax, var(--A3, var(--A))) !important;

/* trying 20201010 */
    text-shadow: 0px 1px 0px var(--Afg, var(--A, #111)) !important;
    text-shadow: 1px 0px 0px var(--Afg, var(--A, #111)) !important;



}

¶strong {

    padding: 1px;
    margin: 1px;

    color: var(--EM0f, var(--FG)) !important;
    background: var(--EM0b, transparent) !important;
}

¶p {
    color: var(--FG) !important;
}

¶em {
    display: inline;
    font-style: italic;

/* TODO 20201210 → LET US MAKE THIS ONLY A SLIGHT BOLD !!! */
    font-weight: bold;

/* TODO: could all this FG declarations */
    color: var(--EM1f, var(--FG)) !important;
    background: var(--EM1b, transparent) !important;
}

¶u {
    display: inline;
    font-weight: bold;
/*
maybe TODO
    color: var(--EM1f, var(--FG)) !important;
    background: var(--EM1b, transparent) !important;
*/
}



/************************************/
/*

¶.btn_esite, .btn_ecss {
    font-size: 2em;
    font-weight: bolder;
    padding: 8px 25px 8px 25px;
    display: inline;
    text-decoration: none !important;

    background: var(--BTb, white) !important;
    color: var(--BTf, #111) !important;
    border: 3px solid var(--BTx, #666) !important;

    opacity: 1;
}

/*
why this does not work !!! TODO

¶.btn_esite>a, .btn_ecss>a {
    text-decoration: none !important;
}
*/

¶.btn_esite:hover, .btn_ecss:hover {
    background: var(--BTHb, gray) !important;
    color: var(--BTHf, white) !important;
    border: 3px solid var(--BTHx, gray) !important;
}





/************************************/
/*

¶strong em u {

/*
    background: white !important;
    color: black !important;
    opacity: 0.85;
#_________________________
#TODO: bring this back ???
text-shadow: 3px 3px 3px #red !important;
#______________________
*/

    letter-spacing: 10px;
    padding: 8px !important;
/* 
line-height: calc(var(--LINE-HEIGHT) * var(--TITLE-SCALE)) !important;
20200822 : do not multiply this one.
*/
line-height: calc(var(--TEXT-SIZE) * var(--TITLE-SCALE)) !important;



/*
____________ for comparison, theme-nuclear old title _______
    letter-spacing: 30px !important;
    font-size: 340% !important;
    padding: 7px !important;
    line-height: 120% !important;
________________________________________
*/

/* i set this to important 20190730, hope it solves the "title became small" bugs! */
    font-size: var(--TEXT-SIZE) !important;

    margin: 0px !important;

/* 20191018: doing EM3 , others are at 🔗css-emphasis-css */
/* 20210619: Tx → EM3x */
    background: var(--Tb, var(--EM3bg, var(--At, var(--A, #111)))) !important;
    color: var(--Tf, var(--EM3fg, var(--Af, var(--Afg, var(--FG, white))))) !important;
/* IF CHANGING ALSO 1) below for links ....... 2) css-emphasis */

/*
    opacity: 0.7 !important;
*/

/* 20200803 no need, now with the border */
/*
    text-decoration-color: blue !important;
*/
text-decoration: none;

/* ### 20210217 SEEMS OVERRIDDEN BY --EM2x , DOESN'T WORK ### */
  border-bottom: 10px solid var(--Tx, silver) !important;
  border-right: 4px solid var(--Tx, silver) !important;
  border-bottom-width: 10px !important;

    background-clip: padding-box;

/*
*/
}

¶strong em u a {
    background: var(--Tb, var(--EM3bg, var(--At, var(--A, #111)))) !important;
    color: var(--Tf, var(--EM3fg, var(--Af, var(--Afg, var(--FG, white))))) !important;
}
/* reversed colors */

¶strong em u a:hover {
    color: var(--Tb, var(--EM3bg, var(--At, var(--A, #111)))) !important;
    background: var(--Tf, var(--EM3fg, var(--Af, var(--Afg, var(--FG, white))))) !important;
}








/************************************/
/*

¶s, s+a, s+br, br+s, em+s, em>s, strong>em>s, strong>s, strong>s>u>br, strong+s+u, s>u {
    line-height: 0px !important;
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;

/*
trying 20211117 — it helps (maybe)
*/
    display: none !important;
    visibility: hidden !important;

/*
also trying 20211117 — did nothing
*/
    padding: 0px !important;
    margin: 0px !important;


/*
    display: inline !important;
    position: static !important;
    box-sizing: border-box;
    font-size: 0px !important;
    background: none !important;
    text-indent: -9999px;
*/
}

/*

¶(strikes test)
20201020 → TRYING: REMOVE STRIKETHROUGH LEFTOVERS
20201108 → MERGING TO CSS-DEFAULT

TEST:
    THIS SHOULD NOT LEAVE TRACES:
    (nothing between the lines)
_____________
    NO TRACE
_
    NO TRACE
_
    NO TRACE
_
    NO TRACE
_
    NO TRACE
_____________
*/




/************************************/
/*

¶a, a>em, a>strong, a:link, a:link>em, a:link>strong, a>strong>em, a>em>strong {

/* 20200719 removed important */
/* 20210426 deprecating --L for --Lf !!! remove all olde references ASAP */
    color: var(--Lf, var(--L, var(--Lf_DEF))) !important;
    background: var(--Lb) !important;

    text-decoration: none;

    text-shadow: none !important;

/*
[!!**] PUT THIS BACK
*/

    border: 1px dotted var(--Lx, var(--A, var(--Lx_DEF))) !important;
    border-bottom: 2px solid var(--Lx, var(--A, var(--Lx_DEF))) !important;
    border-right: 1px solid var(--Lx, var(--A, var(--Lx_DEF))) !important;

    font-weight: bold;
}

¶a:visited, a:visited>em, a:visited>strong {

    border: 1px dotted var(--Lx, var(--A, var(--Lx_DEF))) !important;
    border-bottom: 2px solid var(--Lx, var(--A, var(--Lx_DEF))) !important;
    border-right: 1px solid var(--Lx, var(--A, var(--Lx_DEF))) !important;

    text-shadow: none !important;
/*
    color: #009c9C;
    color: #00AACC;
    color: var(--L, #666) !important;
    font-weight: bold;
    border-bottom: 1px solid #777;
*/
    color: var(--Lf, var(--L, var(--Lf_DEF)));
    background: var(--Lb);

    text-decoration: none;
}

¶a:hover, a:hover>em, a:hover>strong {
    font-weight: bold;

/* !!! 20210426 DEPRECATED --LH , please remove ASAP */

    color: var(--LHf, var(--LH, #333)) !important;
    background: var(--LHb) !important;

    text-shadow: none !important;
    
/*
    border-bottom-color: var(--LHx, var(--FG, #333)) !important;
    border-bottom: 2px solid var(--Lx, var(--B, var(--Lx_DEF)));
*/

/*
    font-weight: bold;
    text-decoration: none;
    border: 1px dotted var(--Lx, var(--B, var(--Lx_DEF)));
    border-right: 1px solid var(--Lx, var(--B, var(--Lx_DEF)));
*/
}





/* --------------------- */
/*

¶.etherpad_toc > li {
    font-size: 70%;
    line-height: 70%;
}





/************************************/
/*

¶.ett_num {
    text-align: center;
    text-align: left;
    text-align: right;

    text-decoration: underline;
    font-style: italic;
    font-weight: bold;

/*
    padding: 0px !important;
    padding-right: 15px !important;
    padding: 0px 15px 0px 0px;
*/
    padding: 3px;
    padding-right: 15px;
}

¶.ett {
    font-size: 100%;
    margin: 10px !important;
}





/*

¶::-moz-selection {
    background: black;
    background: #111;
    background: blue;
    color: white;
}

¶::selection {
    background: black;
    background: #111;
    color: white;
}





/************************************/
/*

¶.ett_lvl0 > a {

    background: var(--TOCb, var(--A)) !important;
    color: var(--TOCf, var(--A_)) !important;
    border: 2px solid var(--TOCx, var(--A)) !important;

/*
    border: 2px solid ORANGE !important;
*/

    font-weight: bolder;

/*
__________________
TODO: document and rename --TOCx (after 20191003)
update 20201029 pushing TOCx
___________________
*/
/* TODO: as a matter of fact, rename all A=>Ab ........ A_=>Af ........ */
/* TODO: Asize or something would be cool too !!! */
}

¶.ett_lvl1 > a {
    color: rgba(var(--ETTf,0),0.75) !important;
    background: rgba(var(--ETTb,0),0.75) !important;
}

¶.ett_lvl2 > a {
    color: rgba(var(--ETTf,0),0.65) !important;
    background: rgba(var(--ETTb,0),0.65) !important;
}

¶.ett_lvl3 > a {
    color: rgba(var(--ETTf,0),0.45) !important;
    background: rgba(var(--ETTb,0),0.45) !important;
}

¶.ett_lvl4 > a {
    color: rgba(var(--ETTf,0),0.32) !important;
    background: rgba(var(--ETTb,0),0.32) !important;
}






/************************************/
/************************************/
/************************************/
/************************************/


/*

¶(DOCS)

FOR FUTURE DEVELOPMENT, SEE:
    * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS
    * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts : 
        svg fonts are majorly unsupported
    * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
    * http://tutorials.jenkov.com/svg/svg-and-css.html
        "using external style sheets" !
    * [...]

-------------------------------------------

SVG Fonts are currently supported only in Safari and Android Browser.
Internet Explorer hasn't considered implementing this, the functionality has been removed from Chrome 38 (and Opera 25) and Firefox has postponed its implementation indefinitely to concentrate on WOFF. Other tools however like the Adobe SVG Viewer plugin, Batik and parts of Inkscape support SVG font embedding.


_______________________________

*/

/************************************/

¶.DOWNSCALED {
/*
You can put general graph stuff here.
*/

/*
    (DEPRECATED by "DPI" directive!)
    zoom: 0.55;
    -moz-transform: scale(0.55);
    background: black !important;
    background: #111 !important;
*/

    z-index: 9999;
}

¶g {
}

¶text {

/***** THIS IS FOR THE GRAPH ! *****/

    font-family: "Ubuntu Mono" !important;
    font-family: "Georgia" !important;
    font-family: sans-serif !important;
    font-family: "Georgia" !important;
    font-family: helvetica !important;

/* disable italic */
    font-style: normal !important;

font-size: 13.5px;

    font-weight: bold;

/*
    stroke: #444;
*/
}

¶svg {

/*-----___-----___-----___-----___-----___-----___ NEW 2018-06 -----___-----___-----___-----___-----___*/

/******** TRYING CSS FILTERS ........... TODO, USE F12 (or JS sliders...) TO LIVE-CHANGE ! *******************************/
/*    
  filter: sepia(1);
  filter: saturate(8);
  filter: saturate(10);
  filter: drop-shadow(1px -1px 1px rgba(0,0,0,1));
  filter: hue-rotate(40deg);

*/

  filter: brightness(2);
  filter: saturate(4);
  opacity: 0.8;

/*
  filter: blur(1px);
  filter: blur(10);
  -webkit-filter: blur(5px);
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.9));
*/

/*-----___-----___-----___-----___-----___-----___-----___-----___-----___-----___*/

/*
  background-color: black;
  font-size: 44px;
  font: sans-serif;
  stroke: white;
  fill: white;
*/

/*
    font-family: sans-serif !important;
    font-family: "Ubuntu Mono" !important;

    font-family: "Courier New" !important;

  font-weight: bold;
  font-family: 'Ubuntu Mono';
  */

}

¶polygon {
/*
    font-family: sans-serif !important;
    font-family: "Ubuntu Mono" !important;
    font-family: "Courier New" !important;
*/
}

¶@font-face {
    font-family: "Ubuntu Mono";
/*
this is wrong
[!] revisit what i wanted to do there
[!!] also "ubuntu mono" is not really a font family
*/
}

¶polygon, polyline, path {
    fill-opacity: 0.2 !important;

    fill-opacity: 0.9 !important;
    stroke-opacity: 0.2 !important;
    stroke-opacity: 0.9 !important;
}

¶polygon:hover, polyline:hover, path:hover {
/*
via matic, ne štekam
    stroke-opacity: 1 !important;
    fill-opacity: 1 !important;
*/
}




/* _________________________ NEW _________________________ */

/*

¶TITLED
titled mode!
activate by adding "&TITLED"
*/

¶.titled {
    position: fixed !important;
    background: black !important;
    bottom: 0px !important;
    left: 0px !important;
    width: 90% !important;
    height: 10% !important;
    z-index: 9001 !important;

    padding: 25px;
    padding: 1.5vw;

    font-family: Helvetica, Arial, sans-serif;
    line-height: normal !important;

/*
display: flex;
justify-content: space-around;
*/

display: grid !important;
grid-template-areas:
    "t_link t_title"
    "t_link t_sub";
grid-gap: 10px 30px;
}

.titled-main {
    grid-area: t_link;

    padding: 0px !important;
    font-style: italic;

    font-size: 32px !important;
    font-size: 2.5vw !important;

    color: #EEE !important;
    text-transform: lowercase;
}
.titled-main-title {
/*
    font-weight: bold;
    font-size: 32px !important;
*/
}
.titled a, .titled em, .titled u, .titled strong, .titled strong em, .titled em strong {
    background: black !important;
    color: #EEE !important;
    letter-spacing: 0px !important;
    line-height: normal !important;
    font-style: normal !important;
}
.titled-title {
    grid-area: t_title;

    font-size: 22px !important;
    font-size: 1.5vw !important;

    background: black !important;
    color: #EEE !important;
    letter-spacing: 0px !important;
    font-weight: bold !important;
}
.titled-sub {
    grid-area: t_sub;

    padding: 0px !important;

    font-size: 14px !important;
    font-size: 1.3vw !important;


    letter-spacing: 1px;
    color: #DDD !important;
/*
    text-transform: uppercase;
*/
    font-weight: bold;
    font-style: italic;
}

¶.ett_num {

/*
moved here 20201030 from css-sidetoc
so:
    * now it's also going to be coloured on portrait
    * also pushing consistency on markers
-----------
!!! also probably move in --Tdiv !!!
*/

/*
was
    background: var(--B, var(--A)) !important;
    color: var(--B_, var(--A_)) !important;
*/

    background: var(--Bb, var(--B, var(--A))) !important;
    color: var(--Bf, var(--B_, var(--A_))) !important;

/*
    border: 2px solid var(--Bx, var(--B, var(--A))) !important;
    #TODO !!!
*/

    font-size: 60% !important;
}




/*

¶.extra {
    border-bottom: 2px dashed gray;
    display: inline;
    cursor: help;
    cursor: zoom-in;
    cursor: crosshair;
}


/********************* DEVICE SPECIFIC MEDIA QUERY IMPORTS ***********/

/*
[!!] this is not really in use, revisit if multi-pane gets back in style
Force single column on portrait devices
@import url("e2t.php?_=pane-1-css&mime=css") screen and (orientation:portrait);
*/


.pilcrow , .pilcrow:hover {
    font-size: 0% !important;
    color: var(--BG) !important;
    background: var(--BG) !important;
    border: 0px !important;
    height: 0px;
    display: block;
}



/*

¶.tf_cl {
    background: transparent;
    color: inherit;
    padding: 2px;
    padding-left: 3px;
    padding-right: 4px;
    margin-left: -2px;
    margin-right: 2px;

    border: 0px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;

    border-radius: 0%;
    border: 1px solid currentColor;
    white-space: nowrap;
}

¶.tf_tags {
    margin-left: 2px;
    margin-right: 6px;
}

¶.tf_tag {
    background: transparent;
    color: inherit;
    padding-left: 3px;
    padding-right: 2px;
    margin-right: 3px;
    font-size: 80%;
    letter-spacing: 1px;
    font-weight: normal;
    border: 0px;
    border-right: 1px solid currentColor;
    border-radius: 0%;
}

¶.tf_tag_pinned {
/*
    font-size: 95% !important;
*/
    font-style: italic;
}

¶.tf_post {
    background: transparent;
    color: inherit;
    padding-right: 3px;
    padding-left: 4px;
    margin-left: 6px;
    font-size: 80%;
    letter-spacing: 1px;
    font-weight: normal;
    border-left: 1px solid currentColor;
}




/*
<----------------------------- (new) ↑↑↑
Fin!
*/