/*
_____________________________________________________

CSS-SIDETOC + THEME-XYZ



Table of Contents
1 *** _____ RECENT DEVELOPMENT (20200527)
2 *** _____ DOCS
2.1 Testing
2.2 Usage
2.3 For devs
2.4 TODO
2.4.1     NEXT
2.4.2     ALSO
2.5 HISTORY
3 *** _____ TEMPLATE DEFAULTS
3.1 :root {
4 *** _____ GENERAL
4.1 body {
5 *** _____ TOC / TABLE OF CONTENTS
5.1 .etherpad_toc {
5.1.1     /* TOC: POSITIONING */
5.1.2     /* TOC: HEIGHTS */
5.1.3     /* ###### TOC SIZE AND SLIDER POSITION */
5.2 .ett {
5.3 .ett_num {
5.4 .ett_lvl1 {
5.5 .ett_lvl2 {
5.6 .ett_lvl3 {
5.7 .ett_lvl4 {
5.8 td>a {
5.9 td {
5.10 .etherpad_toc>strong {
5.11 #TOC {
6 *** _____ MAIN CONTAINER
6.1 .etherpad_container {
6.1.1     /* MAIN: POSITIONING */
6.1.2     /* MAIN: WIDTH */
6.1.3     /* MAIN: HEIGHT */
6.1.4     /* ###### MAIN PART POSITION .... (=etherpad_container) */
7 *** _____ SIDEBTNs
7.1 hr, p {
7.2 p {
7.3 .btn_esite, .btn_ecss {
7.3.1     /* ROTATED PART */
7.4 .btn_esite:hover, .btn_ecss:hover {
7.5 .btn_esite {
7.6 .btn_ecss {
7.7 .btn_esite:hover {
7.8 .btn_ecss:hover {
7.9 .buttons>a,.buttons>a {
8 *** _____ merging: css-sideexpand
8.1 /* <-------------------------- (now) */
9 *** _____ merging: ??? sidebtns, nuh
9.1 .ett {
9.2 .ett_lvl0 {
9.3 .ett_lvl1 {
10 *** _____ THROWN OUT



*** _____ RECENT DEVELOPMENT (20200527)

The two points with ###### !
Look at those! Main points for setting sizes and positions.



*** _____ DOCS

Read:
    https://e2h.totalism.org/e2h.php?_=css-sidetoc-css

Updates:
    * 2018-06-23 0556 : MOVING PART OF STYLE OUT
    * 2018-07-31 : merging a lot
    * [...]


Testing
:
    * main test page @:
        https://e2h.totalism.org/e2h.php?_=theme-xyz-css&CSSPAD=theme-test
        https://e2h.totalism.org/e2h.php?_=theme-tests&CSSPAD=theme-test
    * lesser test page! --> 🔗theme-tests
    * levels : 🔗test-levels !


Usage
:
    * "@import url("e2t.php?_=theme-xyz-css&mime=css");"
    * [...]


For devs
:
    * make sure all parametrised statements, are set to "!important" !!!
    * [...]



TODO

    NEXT
:
    * merge/move this AS 🔗theme-default !!!
    ------------------------------------------------------
    * lvl0 top border optional
    * lvl's colors and sizes
    * "full" toc bg
    * edit buttons styling (.btn_esite .btn_ecss)
    * probably merge more styles to default:
        * this one
        * side-expand
        * [...]
    * [...]


    ALSO
:
    * more padding on TOC (see nindex)
    * missing paramters: ?
    * [...]



HISTORY
:
    0) david-restauran
    1) theme-restauran
    2) theme-restauranX
    3) css-sidetoc, css-sidebtns, ...
    4) theme-default -> ...
    5) all merged !



*/




/*

==================================================================


==================================================================


==================================================================


*** _____ TEMPLATE DEFAULTS
*/


:root {

/*
________________________________
Divider settings!
Defaults:
    * normal: 16%
    * expand: 26%
________________________________
*/

/*** Setting defaults! ***/
  --DIVP_: var(--DIVP, 26%);
  --DIVPbreak_: var(--DIVPbreak, 0.8%);

/*** These are used ***/
  --DIVP2: calc(var(--DIVP_) + 0.5%); /* actual position of main_container */
  --DIVPb: calc(var(--DIVP_) - 1.5%); /* actual position of buttons */
  --BTNleft: var(--DIVPb); /* well... this one */
}





/*

==================================================================


==================================================================


==================================================================


*** _____ GENERAL
*/


body {
  margin: 0px !important;
/*
  text-transform: capitalize;
  ******** DOESNT WORK TO GIVE SOME BOTTOM AT END OF OVERFLOW ???
  ******** TODO
  margin-bottom: 30px !important;
  padding: 10px !important;
*/
/*
  background: black !important;
  background: white !important;
*/
}






/*

==================================================================


==================================================================


==================================================================


*** _____ TOC / TABLE OF CONTENTS
*/


.etherpad_toc {

/*
20211117: huh? disabling (after E2H updates, this came out) :D
  text-align: right !important;
*/

/* 20200421 : this one works. 55% is good at 1em */
  font-size: 0.4em;
  font-size: 55%;
  font-size: 0.55em;

  letter-spacing: -0.5px;
  word-spacing: -2px;
  z-index: 4000;
  z-index: 1 !important;


    /* TOC: POSITIONING */
  position: fixed;

  overflow-x: scroll;
  overflow-x: hidden;
  overflow-y: auto;

  left: -10px;
  top: -5px;

  left: 10px;
  top: 10px;


    /* TOC: HEIGHTS */
  max-height: 98%;
  height: 98%;

  padding: 0px !important;
  margin: 0px !important;

/*
20211117 TRYING SETTING TO THWART WEIRD TOC SUPER-WIDE AFTER HTML5 CLEANUP
  line-height: 155% !important;
THIS WORKS BUT NOT RIGHT SPOT. better straight at 🔗css-sparse-css etc
*/

/*
_________________________________________________________________
TODO: find a way to just shorten/cut it off, not break lines!
  overflow: none;
  overflow: scroll;
  transform: rotate(270deg);
_________________________________________________________________
*/


    /* ###### TOC SIZE AND SLIDER POSITION */

/*
  width: 16% !important;
  min-width: 220px;
*/

    width: var(--DIVP_) !important;

}





/* WHOLE TOC TABLE */


.ett {
    padding: 10px;
    padding-top: 0px;
    margin: 0px !important;

    border: 3px solid silver;
    border: none;

    background: white;
    
    /*
    font-size: 200%;
    <------------------------ (now) 20200424
    */
    font-size: 166%;

/*
#
# STRANGE ROUNDED CORNERS THING!
#
  text-overflow: ellipsis;
  overflow: auto !important;
  white-space: nowrap;
  opacity: 0.7;
*/

}



/********************************************************* TOC NUMBERS <td> */



.ett_num {
  font-size: 68%;
  margin: 0px !important;

  font-style: italic;
  font-style: normal;

/*
#TODO: INTERESTING but should change HTML too
  left: 3px;
  top: -8px;
  position: relative;
*/

  padding: 2px 4px 2px 2px !important;

  left: -1px;
  left: 0px;
  z-index: 9999;
  position: fixed;
  position: absolute;

  background: #999;
  color: black;
  background: #333;
  color: white;

  white-space: nowrap;

  border: 1px solid black;
  border: none;

/*
#
# DOES NOT WORK BUT WOULD BE COOL ........ #e2h #feature !
# (needs a div)
#
    transform: rotate(270deg) !important;
    position: fixed;
*/

/*
#
# HOW SHOULD TOC NUMBERS BE?
#
    display: inline-block; ...GOES LEFT
    display: inline; ...LEFT
    display: block; ...RIGHT
*/
    display: block;
}




.ett_lvl1 {
/*
    border-top: 2px dashed yellow !important;
(changed from "//" 20211208 ### remove if all okay)
*/
    padding-left: 8px;
}
.ett_lvl1 > a {
    color: #444;
}

.ett_lvl2 {
    padding-left: 20px;
    font-size: 83% !important;
}
.ett_lvl2 > a {
    color: #666;
}

.ett_lvl3 {
    padding-left: 28px;
    font-size: 83% !important;
}
.ett_lvl3 > a {
    color: #888;
}

.ett_lvl4 {
    padding-left: 48px;
    font-size: 75% !important;
}
.ett_lvl4 > a {
    color: #999;
}




td>a {

/* TRYING 20191109 ........ but abort ...... try again (now)*/
    text-decoration: single !important;

    text-decoration: none !important;

/*
20210427 — this would disable the borders on TOC... but also on TOCx ...
    border: none !important;
*/

}



td {

/* TOC ENTRY BREAKS (line spacing, etc) */
    text-decoration: none !important;
    border-bottom: none !important;

/*
    padding: 2px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
*/
    padding: 0px 0px 0px 0px;
}


/*
td:hover {
    background: none !important;
    background: #EEE !important;
    font-size: 80% !important;
    background: PINK !important;
    background: black !important;
    background: #EBFBBB !important;
    color: white !important;
}
*/



.etherpad_toc>strong {
    display: none;
/*
    float: left;
    margin: 20px;
*/
}



#TOC {
/*
    font-weight: none;
    margin: none !important;
    padding: none !important; 
    font-size: 200% !important;
    font-size: 22px;
    display: none;
*/
}





/*

==================================================================


==================================================================


==================================================================


*** _____ MAIN CONTAINER
*/



.etherpad_container {


    /* MAIN: POSITIONING */
/*
THE PROBLEM ARE GRAPHS!
OFCOURSE THEY ARE WIDER. SO IT MEANS, ESP ON MOBILE, IT NEEDS TO:
    * BE VIEWABLE BY MOVING THERE (overflow)
    * STILL FLOW TEXT LIMITED IRREGARDLESS!
*/
  position: fixed;


/*
  top: 10px;
  left: 175px;
  margin: 0px 500px 50px 100px !important;
  padding: 20px 20px 20px 20px !important;
  z-index: 5000;
  top: 0%;
*/
  top: 10px;
  margin: 10px !important;
  margin-top: 0px !important;
  padding: 20px !important;



    /* MAIN: WIDTH */
/*
  width: 75% !important;
*/
  max-width: 77% !important;

/*
20211221
auto→scroll
(trying to solve MAC OSX toc bug(
*/
overflow: auto !important;


    /* MAIN: HEIGHT */

  /*
    91% found just enough to have tiny bit of border on bottom at 100% zoom on desktop!? somehow
    #TODO check this : https://www.brunildo.org/test/scroll-child-marginV.html
    Maybe setting margin might help?
  */
  max-height: 91%;

/*
$$$ TEST 20211221
HIDING THIS:
    1) FIXES MAC OS PROBLEMS WITH HIDING IT SEEMS
    2) FUCKS UP SCROLL ?!

  overflow-y: auto;
*/



    /* ###### MAIN PART POSITION .... (=etherpad_container) */

    max-width: calc(95% - var(--DIVP_) - var(--DIVPbreak_)) !important;
    left: calc(var(--DIVP2) + var(--DIVPbreak_)) !important;

    background: var(--BG3) !important;
    color: var(--FG) !important;

}






/*

==================================================================


==================================================================


==================================================================


*** _____ SIDEBTNs
*/


/*
=====================================================
Hides lines and authorship (footer text).
#TODO: this is a bit messed up ??? Display none for "p" ???
=====================================================
*/
hr, p {
    display: none;
}
p {
    color: black;
    background: none;
    border: white;
}



.btn_esite, .btn_ecss {
/*
text-transform: uppercase;
*/
font-family: Helvetica, Arial, sans-serif;

color: black;
background: white;


/************** STYLING */
  text-shadow: 2px 2px #111, -2px -2px #333;
  text-shadow: black 1px 1px, black -1px -1px;
  text-shadow: none;

  border: 2px solid black;


    /* ROTATED PART */
  position: sticky;
  position: absolute;
  position: fixed;

  transform: rotate(270deg);

  padding: 7px 40px 7px 20px;
  padding: 15px 40px 15px 20px !important;
  padding: 12px 35px 12px 25px !important;
  margin: auto;

/*
THIS MARGIN NEEDS TO BE THERE TO ACCOUNT FOR ROTATION FUCKUP
OTHERWISE IT ALL STARTS TO BE REALLY SHIT!
*/
  margin-left: -90px;
}


.btn_esite:hover, .btn_ecss:hover {
    background: gray;
    color: white;
}


.btn_esite {
    top: calc(var(--BTNtop,  70%) + 10px);
    left: calc(var(--BTNleft, 16%) + 15px);
    z-index: 1101;
}
.btn_ecss {
    top: calc(var(--BTNtop, 70%) + 0px);
    left: calc(var(--BTNleft, 16%) + 5px);
    z-index: 1100;
}


.btn_esite:hover {
}
.btn_ecss:hover {
    z-index: 2000;
}

.buttons>a,.buttons>a {
    border: 0px !important;
}



/*

==================================================================


==================================================================


==================================================================


*** _____ merging: css-sideexpand
*/


/* <-------------------------- (now) */





/*

==================================================================


==================================================================


==================================================================


*** _____ merging: ??? sidebtns, nuh
*/



.ett {
    background: var(--BG2) !important;
}



/************** TOC LEVEL STYLES (only resetting colors here) *************/



/* TOC SEPARATOR */
.ett_lvl0 {
    /*
    TODO:
        1) move to CSS-default & check if it looks OK on non-sidetoc TOCs
        2) deprecate "Tdiv"
    */
    border-top: 2px solid var(--TOCdiv, var(--Tdiv, var(--A))) !important;
}

/*
.ett_lvl0 > a
MOVED TO THEME-DEFAULT
so it also work on non-sidetoc stuff !
*/

/* Disabled, could be re-enabled? #TODO */
.ett_lvl1 {
/*
    border-top: 2px dashed yellow !important;
*/
}




/*

==================================================================


==================================================================


==================================================================


*** _____ THROWN OUT

MAKE THIS KIND OF FREAKY DISABLED STUFF INTO NEW "cssart-X" STYLES !!!!!!
*/

/*
THESE <td> BORDERS ARE PRETTY COOL

td {
    border-bottom: 2px outset silver;
    border-bottom: 2px dashed silver;
    border-bottom: 5px solid black;

    background: gold !important;
    margin: 1000px !important;
}
*/


(Site generated by E2H, an "Etherpad hypermedia" project by @dcht00).
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.


Edit Site

Edit CSS