cours_NSI/xtra/stylesheets/pyoditeur.css
2022-05-09 17:34:16 +02:00

232 lines
4.0 KiB
CSS

/* https://pustelto.com/blog/optimizing-css-for-faster-page-loads/ */
:root{
--main-color : 87,147,240;
--main-theme : rgb(var(--main-color));
--gutter-theme : rgba(46,48,63,0);
--background-theme : rgba(0,35,48,0);
--red : rgb(250, 0, 0);
}
/* Extra CSS for mkdocs-enumerate-headings-plugin */
.enumerate-headings-plugin {
filter: opacity(35%);
}
.wrapper_h {
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
}
.wrapper {
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
}
.wrapper > * {
flex: 1 1 300px;
}
.interior_wrapper {
border-right: 1px solid ;
width:50%;
}
.line{
border-bottom : 1px solid var(--main-theme);
}
.ace_editor {
font-size:1em;
margin: 4px 4px;
height: 200px;
background: var(--background-theme);
}
.term_editor {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 205px;
}
.term_editor_h {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 150px;
}
/* First apply terminal CSS */
.terminal {
width: 50%;
}
/* Then change width to 100% */
.terminal_f {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
height: 205px;
width: 100%;
}
/* Test to decide which REPL is best */
.terminal_f_h {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 150px;
width: 100%;
}
textarea {
width: 100%;
resize: vertical;
}
textarea:focus {
outline: none;
}
.hide {
display:none;
}
.blinking {
width: 8px;
height: 20.84375px;
background-color: var(--main-theme);
animation-name: blinking;
animation-duration: 1s;
animation-iteration-count: infinite;
display: inline-block;
}
/* overloading ace gutters to hide them behind navbar */
.ace_gutter {
z-index: 1; /* might be a bit drastic */
}
.ace_gutter > .ace_layer {
color: var(--main-theme);
background-color: var(--gutter-theme);
border-right: solid 1px var(--main-theme);
}
/* modification of ace-tomorrow-night-bright theme */
.ace-tomorrow-night-bright .ace_gutter {
background-color: var(--gutter-theme);
color: #DEDEDE;
}
.ace-crimson-editor .ace_gutter {
background-color: var(--gutter-theme);
color: #DEDEDE;
}
.compteur {
float: right;
color: var(--main-theme);
font-size : 1.2em
}
.compteur::before {
content: "Evaluations restantes : ";
color: var(--main-theme);
font-size : 0.8em
}
.if>rect {
/*fill: var(--main-theme) !important;*/
stroke: #ff3838 !important;
stroke-width: 1.5px !important;
}
.admonition.hint.inline.end {
min-width: 30em;
height: auto;
}
.can_wrapper {
position: relative;
width: 100%;
height: 400px;
}
.can_wrapper canvas {
position: absolute;
top: 0;
left: 0;
}
.tooltip {
padding: 5px 4px 0px 0px;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 90px;
background-color: var(--main-theme);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
font-size: 0.9em;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--main-theme) transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip > img {
width: 32px;
border: 1px solid rgba(85,119,196);
padding: 3px;
border-radius: 9px;
box-shadow: 2px 2px var(--main-theme);
background-image: linear-gradient(to bottom, rgb(191, 255, 255), 15%, rgba(var(--main-color),0.8));
}
.tooltip:hover > img {
text-shadow: 0px 0px rgba(87,147,240,0);
position:relative;
left: 1px;
top: 1px;
cursor: pointer;
font-size : 2em;
box-shadow: 0px 0px rgba(87,147,240,0);
}
/*
[data-md-color-scheme="slate"] {
--md-primary-fg-color: var(--red);
} */