mise à jour cours 0_intro (html css)
This commit is contained in:
bonnebulle
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
3
public/0_assets/style_basics.css
Normal file
3
public/0_assets/style_basics.css
Normal file
@@ -0,0 +1,3 @@
|
||||
p {
|
||||
color: darkgreen;
|
||||
}
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
/* h3 {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
} */
|
||||
2
public/0_assets/vide.js
Normal file
2
public/0_assets/vide.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// pas si vide
|
||||
// alert("coucou")
|
||||
@@ -1,18 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
<title>0_index_empty.html</title>
|
||||
|
||||
<!-- Fiche de styles presque vide -->
|
||||
<link rel="stylesheet" href="./0_assets/style_basics.css">
|
||||
<!-- styles de bases du projet d'ateliers -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- styles (dans le document) -->
|
||||
<style>
|
||||
a { background: red; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="display: none;">Display me not !</div>
|
||||
|
||||
<p>Je peux voir le code source de la page en faisant <code class="key">CTRL+U</code> ou <code class="key">CTRL+MAJ+I</code></p>
|
||||
<a href="0_intro.html#back_from_index_empty">Retour à 0_intro.html</a>
|
||||
|
||||
|
||||
<!-- <p>text commenté</p> -->
|
||||
|
||||
<p>Nisi commodo irure labore esse cillum culpa et proident. Proident ea non officia tempor deserunt sint in eu cillum eu laborum ipsum ut aliquip exercitation. Exercitation incididunt sint minim occaecat irure fugiat sunt non anim. Sunt ad velit et sit commodo magna. Exercitation nisi magna aute voluptate. Consectetur irure sunt id reprehenderit. Ea enim ipsum aliqua incididunt duis eu magna occaecat ea dolor pariatur esse. Lorem eu duis do et irure cupidatat dolor occaecat culpa.</p>
|
||||
<p>In aute ullamco labore. Est veniam voluptate nisi tempor voluptate ex dolore ad exercitation officia veniam non consequat culpa est. Dolore sunt consectetur cupidatat. Do sunt minim proident dolor adipisicing magna occaecat nostrud elit occaecat exercitation eiusmod dolor proident veniam. Laboris Lorem ad eiusmod do ipsum reprehenderit nostrud labore qui mollit adipisicing eu. Ea ex nisi consequat magna fugiat nostrud deserunt veniam adipisicing irure proident amet id magna mollit.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Pour commenter, seletionner du text, et faire CTRL+MAJ+/ -->
|
||||
|
||||
<!-- l'espace ci-dessus est visible à l'écran, mais est visible dans l'édieur.... -->
|
||||
<!-- le navigateur ne tient compte que des propriétés dans les éléments, les espaces/marges qu'on leur ajoute -->
|
||||
|
||||
|
||||
<p>Je suis là</p>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<center>
|
||||
<a href="0_intro.html#">Retour à 0_intro.html</a> (# haut de page)<br>
|
||||
<a href="0_intro.html#back_from_index_empty">Retour à 0_intro.html</a> (# stylesheet)
|
||||
</center>
|
||||
<script src="./0_assets/vide.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
1027
public/0_intro.html
1027
public/0_intro.html
File diff suppressed because it is too large
Load Diff
156
public/0_min_max_width.html
Normal file
156
public/0_min_max_width.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>0_min_max_width.html</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- IMPORTANT pour que la taille de l'écran soit concidérée -->
|
||||
<!-- https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/meta/name/viewport -->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--maxw: 600px;
|
||||
--maxw_extra: 900px;
|
||||
}
|
||||
#width_full_page,
|
||||
#width_bloc_textarea,
|
||||
#width_part_vw
|
||||
{
|
||||
padding: 10px; border: 1px solid;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.min_max_width {
|
||||
min-width: 500px;
|
||||
max-width: var(--maxw_extra);
|
||||
}
|
||||
|
||||
/* vue adaptative aka. responsive design */
|
||||
@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */
|
||||
/* == Si l'écran a une largeur max de 638px */
|
||||
/* ..... ok .... ok .... 638px || non */
|
||||
#width_full_page {
|
||||
background: rgb(34, 255, 0);
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
|
||||
/* non || 700px ..... ok .... ok .... */
|
||||
#width_full_page {
|
||||
background: rgb(255, 102, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* EXTRA/bonus ":has".... */
|
||||
/* Si xxx:has(yyy) == "SI xxx contient yyy" */
|
||||
/* Ici, on garde la taille fixe si le bloc contient une textarea */
|
||||
.min_max_width:has(textarea) {
|
||||
min-width: var(--maxw);
|
||||
max-width: var(--maxw);
|
||||
}
|
||||
textarea {
|
||||
width: var(--maxw); /* initial */
|
||||
max-width: calc(var(--maxw) - 10px);
|
||||
min-width: 400px;
|
||||
min-height: 100px;
|
||||
max-height: 300px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* On peut utiliser des unités de mesure relatives aux dimensions de l'écran */
|
||||
/* vw pour widht (largeure) -- vh pour height (hauteur) */
|
||||
/* MDN === https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#utiliser_les_unités_relatives_à_la_zone_daffichage_pour_la_typographie_adaptative*/
|
||||
/* Pas tres pratique pour faire des colonnes fixes, on utilisera plutôt flexbox */
|
||||
#width_part_vw {
|
||||
width: 30vw;
|
||||
margin: auto;
|
||||
margin-top: 4rem;;
|
||||
}
|
||||
.flexible_vw {
|
||||
width: 32vw;
|
||||
padding: 10px; border: 1px solid;
|
||||
background: yellow;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#flexible_vw_wrapper {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="./0_intro.html#width_details_max_min"><- Retour</a><br><br>
|
||||
|
||||
|
||||
<div style="white-space: pre-line;"><kdb class="key">CTRL+MAJ+I</kdb> outils de dev.
|
||||
<kdb class="key">CTRL+MAJ+M</kdb> -> Vue adaptative
|
||||
|
||||
<div class="resume">MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries#cibler_des_caractéristiques_média" target="_blank">CSS_media_queries</a>
|
||||
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:has" target="_blank">:has</a>
|
||||
MDN html <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/textarea" target="_blank">textarea</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="width_full_page" class="min_max_width">
|
||||
#width_full_page
|
||||
</div>
|
||||
|
||||
<div id="width_bloc_textarea" class="min_max_width">
|
||||
#width_bloc_textarea
|
||||
<textarea>Ecire un truc</textarea>
|
||||
</div>
|
||||
|
||||
<div id="width_part_vw" class="">
|
||||
#width_part_vw
|
||||
</div>
|
||||
|
||||
<div id="flexible_vw_wrapper">
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* pour +de lisibilité je le met style ici... */
|
||||
|
||||
kdb.key {
|
||||
background: gray;
|
||||
color: #fff !important;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
kdb.key {
|
||||
font-size: 1em;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.resume {
|
||||
white-space: pre-line;
|
||||
border: 1px solid #aaf;
|
||||
border-radius: 0;
|
||||
padding: 0px;
|
||||
line-height: 1.8em;
|
||||
background: #f2f2ff;
|
||||
padding: 15px 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
// Création de la boîte d'information
|
||||
const infoBox = document.createElement('div');
|
||||
infoBox.id = 'info-box';
|
||||
infoBox.innerHTML = `
|
||||
<div id="info-toggle">
|
||||
<label>
|
||||
<input type="checkbox" id="toggle-display"> <span id="toggle_hide_text">Masquer</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="info-content">
|
||||
<div><strong>Parent :</strong> <span id="element-parent"></span></div>
|
||||
<div><strong>Enfant :</strong> <span id="element-info"></span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Ajout des styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
#info-box {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
min-width: 250px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#info-box.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#info-box div {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#info-box strong {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
#info-toggle {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
#info-box.no_infos {
|
||||
max-width: 200px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
#info-box.no_infos {
|
||||
#info-toggle {
|
||||
border-bottom: 0px solid #555;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#toggle_hide_text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#info-toggle label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#info-content.hidden {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
// Injection dans le DOM
|
||||
document.head.appendChild(style);
|
||||
document.body.appendChild(infoBox);
|
||||
|
||||
// Récupération des éléments d'affichage
|
||||
const elementInfo = document.getElementById('element-info');
|
||||
const elementParent = document.getElementById('element-parent');
|
||||
const toggleCheckbox = document.getElementById('toggle-display');
|
||||
const infoContent = document.getElementById('info-content');
|
||||
|
||||
// Clé pour le localStorage
|
||||
const STORAGE_KEY = 'info-box-hidden-state';
|
||||
|
||||
// Fonction pour appliquer l'état
|
||||
function applyToggleState(isHidden) {
|
||||
if (isHidden) {
|
||||
infoContent.classList.add('hidden');
|
||||
infoBox.classList.add('no_infos');
|
||||
toggleCheckbox.checked = true;
|
||||
} else {
|
||||
infoContent.classList.remove('hidden');
|
||||
infoBox.classList.remove('no_infos');
|
||||
toggleCheckbox.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Charger l'état depuis localStorage au démarrage
|
||||
const savedState = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedState !== null) {
|
||||
applyToggleState(savedState === 'true');
|
||||
}
|
||||
|
||||
// Gestion du toggle
|
||||
toggleCheckbox.addEventListener('change', function() {
|
||||
const isHidden = this.checked;
|
||||
applyToggleState(isHidden);
|
||||
// Sauvegarder l'état dans localStorage
|
||||
localStorage.setItem(STORAGE_KEY, isHidden);
|
||||
});
|
||||
|
||||
// Écouter l'événement mouseover sur tout le document
|
||||
document.addEventListener('mouseover', function(e) {
|
||||
const el = e.target;
|
||||
|
||||
// Ignorer la boîte d'info elle-même
|
||||
if (el.closest('#info-box')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Récupérer les informations
|
||||
const tag = el.tagName.toLowerCase();
|
||||
const id = el.id;
|
||||
const classes = el.className;
|
||||
|
||||
// Construire la chaîne au format element#id.class
|
||||
let infoStr = tag;
|
||||
if (id) {
|
||||
infoStr += '#' + id;
|
||||
}
|
||||
if (classes) {
|
||||
// Remplacer les espaces par des points pour les classes multiples
|
||||
infoStr += '.' + classes.trim().replace(/\s+/g, '.');
|
||||
}
|
||||
|
||||
// Construire la chaîne parent au format element#id.class
|
||||
let parentStr = '(aucun)';
|
||||
if (el.parentElement) {
|
||||
const parentTag = el.parentElement.tagName.toLowerCase();
|
||||
const parentId = el.parentElement.id;
|
||||
const parentClasses = el.parentElement.className;
|
||||
|
||||
parentStr = parentTag;
|
||||
if (parentId) {
|
||||
parentStr += '#' + parentId;
|
||||
}
|
||||
if (parentClasses) {
|
||||
parentStr += '.' + parentClasses.trim().replace(/\s+/g, '.');
|
||||
}
|
||||
}
|
||||
|
||||
// Afficher les informations
|
||||
elementInfo.textContent = infoStr;
|
||||
elementParent.textContent = parentStr;
|
||||
|
||||
// Rendre la boîte visible
|
||||
infoBox.classList.add('visible');
|
||||
});
|
||||
|
||||
// Optionnel : cacher la boîte quand on quitte la page
|
||||
document.addEventListener('mouseout', function(e) {
|
||||
if (e.relatedTarget === null) {
|
||||
infoBox.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
248
public/style.css
248
public/style.css
@@ -1,7 +1,83 @@
|
||||
:root {
|
||||
--property: #b77804;
|
||||
--value: #0451A5;
|
||||
--attr_value: #2aa198;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #800000 !important;
|
||||
font-weight:400;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #800000 !important;
|
||||
font-weight: 480;
|
||||
}
|
||||
.token.property,
|
||||
.color.property {
|
||||
color: var(--property) !important;
|
||||
}
|
||||
|
||||
.token.value,
|
||||
.color.value {
|
||||
color: var(--value) !important;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-value {
|
||||
color: var(--attr_value) !important;
|
||||
font-weight: 480;
|
||||
}
|
||||
|
||||
|
||||
.language-markup .token.attr-name {
|
||||
color: #E50000 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
.language-markup .token.value {
|
||||
color: #0451A5 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code[class*="language-markup"] {
|
||||
color: #595959 !important;
|
||||
}
|
||||
code[class*="language-markup"]:hover {
|
||||
color: #898989 !important;
|
||||
}
|
||||
|
||||
code[class*="language-css"] {
|
||||
color: var(--value) !important;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #FF0095 !important;
|
||||
}
|
||||
.token.unit {
|
||||
color: #7400DA;
|
||||
}
|
||||
.token.hexcode.color {
|
||||
color: #00c3ff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #4A8147 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.token.comment {
|
||||
color: #008000b3 !important;
|
||||
}
|
||||
pre[class*="language-"]:hover
|
||||
.token.comment {
|
||||
color: #04008017 !important;
|
||||
}
|
||||
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
counter-reset: compteListe;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
@@ -9,14 +85,14 @@ body {
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
/* h1 { */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
|
||||
#navbar {
|
||||
background-color: #fff !important;
|
||||
border-radius: 2px;
|
||||
position: sticky;
|
||||
/* position: sticky; */
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
@@ -49,12 +125,15 @@ h1 {
|
||||
background: #f2f2ff;
|
||||
padding: 15px 10px 20px 20px;
|
||||
}
|
||||
/* .resume + .wrap_css_html {
|
||||
margin-top: -20px;
|
||||
} */
|
||||
|
||||
.code-toolbar + .code-toolbar {
|
||||
margin-top: -30px !important;
|
||||
}
|
||||
|
||||
.exemple,
|
||||
/* .exemple, */
|
||||
.code-content {
|
||||
/* border: 1px solid #e8cf8b; */
|
||||
border-radius: 0 0 3px 3px;
|
||||
@@ -82,20 +161,67 @@ pre[class*="language-"] {
|
||||
margin-top: 0 !important;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
.exemple {
|
||||
/* .exemple {
|
||||
padding-top: 22px;
|
||||
}
|
||||
} */
|
||||
pre.language-css {
|
||||
background: #f5fde3 !important;
|
||||
}
|
||||
|
||||
|
||||
codecss,
|
||||
codescaped {
|
||||
background-color: #fdf6e3;
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 3px;
|
||||
color: #000 !important;
|
||||
}
|
||||
codecss {
|
||||
background-color: #f5fde3;
|
||||
}
|
||||
codescaped.espace {
|
||||
white-space: pre;
|
||||
display: block;
|
||||
border: 1px solid #e8cf8b;
|
||||
padding: 15px 20px 22px 20px;
|
||||
}
|
||||
|
||||
.wrap_css_html_button {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
float: right;
|
||||
margin-left: -310px;
|
||||
right: -11px;
|
||||
top: -12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: darkgreen;
|
||||
border: 2px solid darkgreen;
|
||||
border-radius: 0 4px 0px 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap_anchor_link {
|
||||
float: left;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
text-decoration: none;
|
||||
z-index: 999;
|
||||
margin-right: 13px;
|
||||
font-size: 16px;
|
||||
margin-top: -11px;
|
||||
background: rgb(161, 255, 161);
|
||||
color: #000000;
|
||||
padding: 1px 7px;
|
||||
|
||||
float: right;
|
||||
margin-right: 33px;
|
||||
position: sticky !important;
|
||||
margin-left: -570px;
|
||||
}
|
||||
.anchor_link {
|
||||
color: rgb(60, 99, 171);
|
||||
}
|
||||
|
||||
.file {
|
||||
background: #e3eafd;
|
||||
font-style: normal;
|
||||
@@ -104,15 +230,19 @@ codescaped {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.wrap_css_html div.code-toolbar[data-type="language-css"] > .toolbar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
font-size: 1.3em;
|
||||
color: #000;
|
||||
background: #fdf6e3;
|
||||
padding: 0 5px;
|
||||
}
|
||||
:is(.code-toolbar) + :not(.exemple) {
|
||||
/* :is(.code-toolbar) + :not(.exemple) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
} */
|
||||
:is(.exemple, .code-content) p {
|
||||
color: #000;
|
||||
}
|
||||
@@ -122,7 +252,7 @@ div.code-toolbar > .toolbar {
|
||||
}
|
||||
.toolbar-item:first-child span {
|
||||
border-radius: 0 !important;
|
||||
background: #FFF !important;
|
||||
background: #fff !important;
|
||||
box-shadow: none !important;
|
||||
left: -10px !important;
|
||||
position: relative !important;
|
||||
@@ -133,15 +263,34 @@ div.code-toolbar > .toolbar {
|
||||
white-space: break-spaces !important;
|
||||
}
|
||||
|
||||
code.key {
|
||||
/* code.language-css::before {
|
||||
content: attr(id) " -- " attr(data-num_css);
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-right: 100px;
|
||||
margin-top: -12px;
|
||||
font-size: 12px;
|
||||
} */
|
||||
|
||||
code.term,
|
||||
code.key,
|
||||
kdb.key {
|
||||
background: gray;
|
||||
color: #fff !important;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
kdb.key {
|
||||
font-size: 1em;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
code.term {
|
||||
background: rgb(237, 221, 221);
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
hr.space {
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
@@ -151,3 +300,76 @@ hr.visible {
|
||||
height: 10px;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.copy-notification {
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
/* width: 150px; */
|
||||
margin-top: -30px;
|
||||
margin-left: -85px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap_css_html {
|
||||
border: 2px solid #59b2a5;
|
||||
padding: 10px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.wrap_css_html .code-toolbar:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wrap_css_html + .wrap_css_html {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.wrap_css_html + *:not(.wrap_css_html) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.wrap_css_html:target {
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
|
||||
.color.property {
|
||||
color: var(--property) !important;
|
||||
font-weight: 550 !important;
|
||||
}
|
||||
.color.value {
|
||||
color: var(--value) !important;
|
||||
}
|
||||
|
||||
|
||||
:not(.code-content) > :is(h1,h2,h3,h4,h5,h6) {
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#next_flexbox {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.hash_title {
|
||||
position: absolute;
|
||||
margin-left: -110px;
|
||||
text-decoration: none;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hash_title::before {
|
||||
counter-increment: compteListe 1;
|
||||
content: counter(compteListe) " ";
|
||||
font-size: 13px;
|
||||
}
|
||||
Reference in New Issue
Block a user