/* home */
:root
{ --show-back:#048;
--show-glass:transparent;
--show-glass:RGBA(0,0,0,.03);
--second:RGBA(0,70,140,1);
}
task.hosted main>menu { background-color:transparent; }
/* backsic */
task.themed
{ backdrop-filter:none;
}
task.themed page
{ background-color:RGBA(0,80,160,.75);
color:#CDE;
}
task.themed article s, task.themed article u { font-weight:bold; }
/* --- runtime --- */
/* à replacer @ wb */
task.by
{ backdrop-filter:none;
}
task.by main /* futur backdrop */
{ background-color:#000;
}
task.by page
{ /*height:auto; aspect-ratio:1.75; */
overflow:hidden;
display:flex;
justify-content:space-around;
align-items:center;
justify-content: center;
align-items: center;
}
task.by section /* centré, fit */
{ overflow:hidden; width:auto; margin:auto;
flex-grow:0;
flex-basis:auto;
width:100%;
display:block;
}
task.by article
{
display:block;
margin:auto;
position:relative; top:0px;
max-width:100%;
max-height:100%;
padding:0;
}
canvas
{ width:100%;
height:100%;
display:block;
max-width:100%;
max-height:100%;
margin:auto;
background:transparent; z-index:100;
font-family:inherit;
}
canvas>p { margin:0; border:1px solid #F80; /* usage ? */ }
canvas.d2
{ /* mix-blend-mode: screen;*/
/* z-index:120; */
position:absolute; top:0px;
}
canvas.d3
{ /* PAS via Layer */
/* z-index:110;*/
position:relative; top:0px;
image-rendering: pixelated;
}
/* --- coded --- */
task.coded page
{ background-color:RGBA(0,80,160,1);
width:100%; height:100%;
overflow:hidden !important;
}
task.coded section
{ padding:0; margin:0;
overflow:hidden;
/*height:100%; */
/*align-items:stretch; */
flex-grow:1;
flex-basis:100%;
flex-wrap:nowrap;
}
task.coded article
{ padding:0;
/*height:100%; surtout pas */
}
task.coded article.map
{ background-color:var(--second);
flex:0 0 15em; padding:1em;
overflow-y:scroll;
font-size:90%;
}
task.coded article.map a { display:block; }
/* task.coded section>aside
{ background-color:var(--second);
} */
task.coded section>form
{ flex:3 1 0;
height:100%;
overflow-x:scroll;
overflow-y:scroll;
position:relative; top:0; left:0; /* positionnement cursor hover */
z-index:0;
}
output.src
{ /* flex-grow:1; */
width:100%;
min-height:100%; /* important .hover() */
text-wrap:nowrap;
line-height:1.3em;
border:none;
padding:0 0 0 .5em;
border-radius:0;
/* z-index:10; */
text-align:left; /* pour smallable*/
}
code
{ display:block;
white-space:pre-wrap;
padding:.5em;
margin-bottom:.5em;
font-size:var(--small);
border:1px solid var(--line);
}
code.src
{ /* help, debug, tokenizer */
background-color:var(--hover);
}
code.result
{ background-color:var(--line0);
}
output.debug
{ display:block; background-color:var(--black);
height:auto; align-self: flex-start;
white-space:pre; /* pourquoi ? */
}
.src s, .src b, .src i
.src v, .src m, .src k, .src w, .src d
.src err, .src rgb, .src rem
{ text-decoration:none; font-style:normal; font-weight:normal; display:inline; margin:0;
}
.src w { color:RGBA(127,255,255,.65); /* word incertain, err line */ }
.src v { color:#AFF; /* Variable */ }
.src i { color:#8DF !important; /* Identity, enum_structure */ }
.src m { color:#FFF; /* Math - numeric, operator, assign */ }
.src s { color:#FFB; /* String */ }
.src k { color:#CFA; padding:0; margin:0; /* Keyword, eval, separator */ }
.src b { color:#4FA; border-left:1px solid #4FA; padding-left:.1em; /* block */ }
.src d { background-color:var(--line0); }
.src d.done { background-color:transparent; }
/* spé */
.src rgb { color:#DDD; border-left:.5em solid #000; /* RGB */ }
.src err { color:#FFF; background-color:var(--bad); border-radius:.1em; /* mot erreur */ }
.src rem { color:RGBA(255,255,255,.5); /* com (ex rem) */ }
/* TBD
.src dirty { position:absolute; backgorund-color:var(--hover); left:0; z-index:0; display:block; height:1em; width:100%;}
*/
div.hover
{ position:absolute; display:block; width:100%;
background-color:var(--hover);
pointer-events:none;
z-index:-5;
height:1.2em;
margin:0;
}