/*******************************************************************************
main.css | nicolas grosfort | 11.2021
*******************************************************************************/
/*------------------------------------------------------------------------------
FONT
------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
/*font-family: 'Space Mono', monospace;*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
/*font-family: 'PT Serif', serif;*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');
/*font-family: 'M PLUS Rounded 1c', sans-serif;*/

/*------------------------------------------------------------------------------
VARIABLES
------------------------------------------------------------------------------*/
:root {
    --white : #f5f5f5;
    --black : #232323;
    --yellow : #F7FF0C;
    --pink : #F40EC7;
    
    --m1: 42px;
    --m2: 35px;
    --m3: 21px;
    --m4: 14px;
    --m5: 10.5px;
    --m6: 7px;

    --t0 : 70px;
    --t1 : 35px;
    --t2 : 28px;
    --t3 : 21px;
    --t4 : 16px;
    --t5 : 14px;
    --t6 : 12px;


    --ratio : 1.2;

    --border : 2px;

    --light : var(--white);
    --dark : var(--dark);
    --paper : var(--white);
    --stroke : var(--dark);

    --mono : 'Space Mono', monospace;
    --rounded : 'M PLUS Rounded 1c', sans-serif;
    --serif : 'PT Serif', serif;

    --font : var(--mono);
  
    --device: desktop;
  }


/*------------------------------------------------------------------------------
THEMES
------------------------------------------------------------------------------*/
html[data-color="day"] {--light: var(--white); --dark: var(--black); --paper: var(--white); --stroke: var(--black);}
html[data-color="night"] {--light: var(--black); --dark: var(--white); --paper: var(--black); --stroke: var(--white);}
html[data-color="fun"] {--light: var(--yellow); --dark: var(--pink); --paper: var(--white); --stroke: var(--black);}

html[data-font="mono"] {--font : var(--mono);}
html[data-font="serif"] {--font : var(--serif);}
html[data-font="rounded"] {--font : var(--rounded); }


/*------------------------------------------------------------------------------
PLACEHOLDER
------------------------------------------------------------------------------*/
::placeholder {color: var(--dark); opacity: 1; text-transform: none;}
::-ms-input-placeholder {color: var(--dark); text-transform: none;}


/*------------------------------------------------------------------------------
SELECTION
------------------------------------------------------------------------------*/
::-moz-selection {color: var(--pink); background: var(--yellow);}
::selection {color: var(--pink); background: var(--yellow);}


/*------------------------------------------------------------------------------
GLOBAL
------------------------------------------------------------------------------*/
* {
    -ms-overflow-style: none;  
    scrollbar-width: none;
    user-select: none;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    touch-action: manipulation !important;
}

*::-webkit-scrollbar {display: none;}

html, body {
    margin : 0;
    top: 0; right: 0; bottom: 0; left: 0;
    position : fixed;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--light);
    font-family: var(--mono);
}



main {
    padding : 0 var(--m1) var(--m1) var(--m1);
    box-sizing: border-box;
    height : 85%;
    display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    position : relative;
}

h1 {font-size: var(--t0); line-height: calc(var(--t0) * var(--ratio)); margin: 0;}
h2 {font-size: var(--t1); line-height: calc(var(--t1) * var(--ratio)); margin: 0;}
h3 {font-size: var(--t3); line-height: calc(var(--t3) * var(--ratio)); margin: 0; font-weight: 700; cursor: auto;}
h4 {font-size: var(--t4); line-height: calc(var(--t4) * var(--ratio)); margin: 0; font-weight: 400; cursor: auto;}
p {font-size: var(--t5); line-height: calc(var(--t5) * var(--ratio)); margin: var(--m2) 0; cursor: auto;}

q {font-style: italic;}

/*------------------------------------------------------------------------------
CLASSES
------------------------------------------------------------------------------*/
.saved {text-decoration: underline !important;}
.excluded {text-decoration: line-through !important;}
.hidden {display : none !important; visibility: hidden !important;}
.selectable, .selectable * {
    user-select: text;
   -webkit-user-select: text; 
   -khtml-user-select: text; 
   -moz-user-select: text; 
   -ms-user-select: text; 
}

.no-selectable {
    user-select: none;
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
}


/*------------------------------------------------------------------------------
NAV
------------------------------------------------------------------------------*/
header {
    padding : var(--m1) var(--m1) var(--m3) var(--m1);
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: stretch;
    box-sizing: border-box;
    height : 15%;
}

nav {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;
    position : relative;
}

nav#theme, nav#filter {width : 40%; padding : 0 14px; box-sizing: border-box;}
nav#theme {justify-content: flex-start;}

nav#filter {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: stretch;
	align-content: flex-start;
    gap : calc(var(--m6) + var(--border) + var(--border));
}

nav#filter a {
    font-weight: 700;
    width : auto;
    white-space: nowrap;
    overflow: visible;
    height : var(--t2);
    padding : 0 var(--m6);
    font-size :  var(--t5);
    line-height: var(--t5);
    box-shadow: 0 0 0 var(--border) var(--dark);
    box-sizing: border-box;
    text-decoration: none;
    color : var(--dark);
    background-color: var(--light);
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: center;
    position : relative;
}

nav#filter a#filter-txt {font-style: italic;}


nav#search {width : 20%; position : relative;}

nav#search div#search-result {
    position : absolute;
    top : var(--m2);
    gap: var(--m6);
    width : calc(100% - 70px);
    max-height : calc(100vh - 88.5px);
    box-sizing: border-box;
    overflow: scroll;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
    z-index: 2;
}
nav#search div#search-result a {
    font-weight: 700;
    width : auto;
    white-space: nowrap;
    overflow: scroll;
    height : var(--t2);
    padding : 0 var(--m6);
    font-size :  var(--t5);
    line-height: var(--t5);
    box-shadow: 0 0 0 var(--border) var(--dark);
    box-sizing: border-box;
    text-decoration: none;
    color : var(--dark);
    background-color: var(--light);
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: center;
    margin : var(--border);
}

nav#search div#search-result a#search-txt {font-style: italic;}

nav#theme {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
}

div#font {margin-right : var(--m3);}
div#statut {margin-left : var(--m3);}

nav#theme a {
    font-weight: 700;
    height : var(--t2);
    width : var(--t1);
    margin : 0px var(--border) 0 0;
    font-size :  var(--t5);
    line-height: var(--t5);
    box-shadow: 0 0 0 var(--border) var(--dark);
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    color : var(--dark);
    background-color: var(--light);
}

nav#theme a svg {
    width : var(--t3);
    height : var(--t3);
    fill: var(--dark);
    background-color: transparent;
}

nav#theme a#mono {font-family: var(--mono) !important;}
nav#theme a#serif {font-family: var(--serif) !important;}
nav#theme a#rounded {font-family: var(--rounded) !important;}

nav#theme a.selected, #filter a.selected {
    background-color : var(--dark);
    color : var(--light);
}

nav#theme a.selected svg {
    fill: var(--light);
}


/*------------------------------------------------------------------------------
SEARCH
------------------------------------------------------------------------------*/
input[type=text]#search-tips {
    padding : var(--m4) var(--m3) var(--m4) var(--m2);
    color : var(--dark);
    background-color: var(--light);
    border-radius : var(--t2);
    box-shadow: 0 0 0 var(--border) var(--dark);
    border : none;
    font-weight: 700;
    outline: none;
    font-size: var(--t4);
    line-height: var(--t4);
    width : 100%;
    height : var(--t2);
    display : block; 
    margin: 0 auto;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--mono);
    text-transform: lowercase;
}

input[type=text]#search-tips + label {
    position : absolute; 
    left : var(--m6);
    top : 3.5px;
    width : var(--t3);
    height : var(--t3);
}

input[type=text]#search-tips + label svg {
    width : var(--t3);
    height : var(--t3);
    fill: var(--dark);
    background-color :transparent;
}


/*------------------------------------------------------------------------------
TIPS
------------------------------------------------------------------------------*/
article.tips, div#tips_empty_left, div#tips_empty_right {
    box-shadow: 0 0 0 var(--border) var(--stroke);
    background-color : var(--paper);
    color : var(--stroke);
    width : 378px;
    height : 532px;
    overflow: visible;
    padding : var(--m1) var(--m4) var(--m4) var(--m4);
    box-sizing: border-box;
    margin : var(--m1);
    color : var(--stroke) !important;
    position: relative;
}

article.tips::before, div#tips_empty_left::before, div#tips_empty_right::before {
    content : attr(data-count);
    position : absolute; 
    top : calc((var(--m1) + var(--border)) * -1);
    left : 50%;
    transform: translate(-50%, -100%);
    font-size: var(--t5); 
    line-height: calc(var(--t5) * var(--ratio));
    font-weight: 700;
    width : auto;
    white-space: nowrap;
    overflow: scroll;
    height : var(--t2);
    padding : 0 var(--m6);
    box-shadow: 0 0 0 var(--border) var(--dark);
    box-sizing: border-box;
    text-decoration: none;
    color : var(--dark);
    background-color: var(--light);
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: center;
    pointer-events: none;
    overflow : hidden;
}

article.right {cursor: w-resize;}
article.left {cursor: e-resize;}


article.tips::after, div#tips_empty_left::after, div#tips_empty_right::after  {
    content : '';
    position : absolute; 
    top : calc(var(--m3) * -1);
    left : 50%;
    transform: translate(-50%, -100%);
    border-left : var(--m5) solid transparent;
    border-right : var(--m5) solid transparent;
    border-top : var(--m4) solid var(--dark);
    height : 0px; 
    width : 0px;
    pointer-events: none;
}

article.tips.saved .id {text-decoration: underline !important;}

div#tips_empty_left, div#tips_empty_right {
    box-shadow: none;
    outline : var(--border) dashed var(--dark);
    background-color: transparent;
}

article.tips div.header {
    height : 154px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font);
    padding : 0 var(--m6);
}

article.tips div.header h3::first-letter {
    font-size: var(--t1);
    line-height: calc(var(--t1) * var(--ratio));
}

article.tips div.main {
    height : 287px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: var(--font);
    padding : 0 var(--m6);
}


article.tips div.main div.media {
    display : flex;
    flex-direction: column;
    margin : 0;
}
article.tips div.main div.media span.player {
    border : 0px solid var(--stroke);
    vertical-align: middle;
    font-weight: 400;
    padding : 1.5px 0;
    height : 32px;
    width : 100%;
    box-sizing: border-box;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

article.tips div.main div.media span.player span {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
    padding : 0 var(--m6);
}

article.tips div.main div.media span.player span.title {
    max-width : 168px; 
    overflow: scroll; 
    white-space: nowrap;
    cursor : auto;
    font-size: var(--t5);
    font-family: var(--mono);
    cursor: default;
}

article.tips div.main div.media span.player span.play, article.tips div.main div.media span.player span.pause  {padding-left :0;}


article.tips div.main div.media span.player span.duration {cursor: default; font-family: var(--mono); font-size: var(--t5);}
article.tips div.main div.media span.player svg
{
    width : var(--t3);
    height : var(--t3);
    fill: var(--stroke);
    background-color: transparent;
    cursor:pointer;
}

article.tips div.main .img, article.tips div.main .audio, article.tips div.main .video {width : 55%; border : var(--border) solid var(--stroke);}
article.tips div.main .video {border-bottom: none;}
article.tips div.main a {color : var(--stroke);}
article.tips div.main ul { padding : 0; margin : 0; }
article.tips div.main ul li {font-size: var(--t5); margin: 0; margin-left : var(--m4); list-style-type: "-";}
article.tips div.main h4 ul li {font-size: var(--t4); }
article.tips div.main h4 ul  {margin : 7px;}


article.tips div.footer {
    height : 35px;
    overflow: visible;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	align-content: stretch;
    padding : 0 var(--m6);
}

article.tips div.tag {
    width : 301px; 
    overflow-x: scroll;
}

article.tips div.tag a {
    font-weight: 700;
    font-size: var(--t5);
    text-decoration: none;
    margin-right : var(--m4);
    color : var(--stroke);
    white-space: nowrap;
}

article.tips div.id {
    font-size: var(--t5);
    font-weight: 400;
    display : block; 
    border : 0px solid var(--stroke);
    box-sizing: border-box;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    z-index: 1;
    cursor: default;

}


article.tips.selected div.id {
    background-color: var(--stroke);
    color : var(--paper)   
}


article.tips div.meta {
    display : none;
    visibility: hidden;
}


/*------------------------------------------------------------------------------
ANIMATIONS
------------------------------------------------------------------------------*/
@keyframes pulse {
    0%, 100% {transform: scale(1);}
    40% {transform: scale(1.2);}
}

.pulse {
    animation-name: pulse;
    animation-duration: .3s;
    animation-timing-function: ease-out;
}














@media screen and (max-width: 1200px), (max-height: 800px){
    :root {
        --device: tablet;

        --m1: 38.5px;
        --m2: 31.5px;
        --m3: 17.5px;
        --m4: 10.5px;
        --m5: 7px;
        --m6: 3.5px;
    
        --t0 : 70px;
        --t1 : 32px;
        --t2 : 25px;
        --t3 : 18px;
        --t4 : 14px;
        --t5 : 12px;
        --t6 : 10px;
    }

    nav#theme, nav#filter {width : 37.5%;}
    nav#search {width : 25%;}

    article.tips, div#tips_empty_left, div#tips_empty_right {width : 336px; height : 455px;}
    article.tips::before, div#tips_empty_left::before, div#tips_empty_right::before {top : calc((var(--m2) + var(--border)) * -1);}
    article.tips::after, div#tips_empty_left::after, div#tips_empty_right::after  {top : calc((var(--m4) + var(--border) * 2) * -1);}
    article.tips div.header {height : 119px;}
    article.tips div.main {height : 259px;}
    article.tips div.footer {height : 28px;}
    article.tips div.tag {width : 280px;}

}

@media screen and (max-width: 950px), (max-height: 400px){
    :root {
        --device: mobile;
    }

    header, main {display : none;}

    #infos {
        position : fixed; 
        margin : 0;
        top: 0; right: 0; bottom: 0; left: 0;
        position : fixed;
        overflow: hidden;
        background-color: var(--light);
        font-family: var(--mono);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: center;
        z-index: 3;
        color: var(--dark);
    }
}