Skip to content

GitLab

Commit 254b7060 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

Mise à jour copier/coller anglais + optimisation

parent 73729dbf
Hide whitespace changes
Inline Side-by-side
static/scripts/bicol2colcol.js 0 → 100644
View file @ 254b7060
var bicol2colcol = {
"phon_a_majr":["--phon_a_maj","--phon_r_slash"],
"phon_ai_maj":["--phon_a","--phon_i_maj"],
"phon_ai_majarobase":["--phon_a","--phon_i_maj","--phon_schwa"],
"phon_au_maj":["--phon_a","--phon_u_maj"],
"phon_au_majwarobase":["--phon_a","--phon_u_maj","--phon_w","--phon_schwa"],
"phon_arobasel":["--phon_schwa","--phon_l"],
"phon_arobasem":["--phon_schwa","--phon_m"],
"phon_arobasen":["--phon_schwa","--phon_n"],
"phon_arobaseu_maj":["--phon_schwa","--phon_u_maj"],
"phon_dz":["--phon_d","--phon_z"],
"phon_dz_maj":["--phon_d","--phon_z_maj"],
"phon_dz_retr":["--phon_d","--phon_z_retr"],
"phon_dz_slash":["--phon_d","--phon_z_slash"],
"phon_ef":["--phon_e","--phon_f"],
"phon_ei_maj":["--phon_e","--phon_i_maj"],
"phon_earobase":["--phon_e","--phon_schwa"],
"phon_er":["--phon_e","--phon_r_slash"],
"phon_i_majarobase":["--phon_i_maj","--phon_schwa"],
"phon_ju_majarobase":["--phon_j","--phon_u_maj","--phon_schwa"],
"phon_gb":["--phon_g","--phon_b"],
"phon_gz":["--phon_g","--phon_z"],
"phon_gz_maj":["--phon_g","--phon_z_maj"],
"phon_h_maj_i":["--phon_h_maj","--phon_i"],
"phon_ij":["--phon_i","--phon_j"],
"phon_i_majr":["--phon_i_maj","--phon_r_slash"],
"phon_j_maj":["--phon_n","--phon_j"],
"phon_jarobase":["--phon_j","--phon_schwa"],
"phon_ju_long":["--phon_j","--phon_u_long"],
"phon_ju_majr":["--phon_j","--phon_u_maj","--phon_r_slash"],
"phon_kp":["--phon_k","--phon_p"],
"phon_ks":["--phon_k","--phon_s"],
"phon_ks_maj":["--phon_k","--phon_s_maj"],
"phon_kx":["--phon_k","--phon_x"],
"phon_kw":["--phon_k","--phon_w"],
"phon_lj":["--phon_l","--phon_j"],
"phon_nj":["--phon_n","--phon_j"],
"phon_ou_maj":["--phon_o","--phon_u_maj"],
"phon_o_maji_maj":["--phon_o_maj","--phon_i_maj"],
"phon_o_majr":["--phon_o_maj","--phon_r_slash"],
"phon_pf":["--phon_p","--phon_f"],
"phon_sz":["--phon_s","--phon_z"],
"phon_tk_maj":["--phon_t","--phon_k_maj"],
"phon_tk_maj_slash":["--phon_t","--phon_k_maj_slash"],
"phon_ts":["--phon_t","--phon_s"],
"phon_ts_chev2":["--phon_t","--phon_s_chev2"],
"phon_ts_maj":["--phon_t","--phon_s_maj"],
"phon_ts_maj_chev2":["--phon_t","--phon_s_maj_chev2"],
"phon_ts_retr":["--phon_t","--phon_s_retr"],
"phon_ts_slash":["--phon_t","--phon_s_slash"],
"phon_tt_maj":["--phon_t","--phon_t_maj"],
"phon_u_majarobase":["--phon_u_maj","--phon_schwa"],
"phon_u_majr":["--phon_u_maj","--phon_r_slash"],
"phon_wa":["--phon_w","--phon_a"],
"phon_war":["--phon_w","--phon_a","--phon_r_slash"],
"phon_wa_maj":["--phon_w","--phon_a_maj"],
"phon_wa_maj_long":["--phon_w","--phon_a_maj_long"],
"phon_wai_maj":["--phon_w","--phon_a","--phon_i_maj"],
"phon_we_maj_nas":["--phon_w","--phon_e_maj_nas"],
"phon_wv_maj":["--phon_w","--phon_v_maj"],
"phon_schwju":["--phon_j","--phon_schwu"],
"phon_schwiz":["--phon_schwi","--phon_z"],
"phon_schwaz":["--phon_schwa","--phon_z"]
}
\ No newline at end of file
static/scripts/main.js
View file @ 254b7060
......@@ -4,6 +4,14 @@ $(document).ready(function(){
txtarea.focus();
});
var boolBold = true;
function toggleBold() {
document.getElementById('output').classList.toggle('outputBold');
boolBold = !boolBold;
console.log("boolBold to",boolBold);
}
const thisURL = window.location.href;
console.log("url:",thisURL);
var thisPageLang = "";
......@@ -28,7 +36,7 @@ function selectLang(lang){
if (lang=="en"){
interface("en");
document.getElementById('choixLang').value = 'en';
document.getElementById('output').classList.remove('outputBold');
if (boolBold) toggleBold();
document.getElementById('monochromeLabel').style.display="";
document.getElementById('monochrome').style.display="";
......@@ -41,7 +49,7 @@ function selectLang(lang){
} else if (lang=="fr"){
interface("fr");
document.getElementById('choixLang').value = 'fr';
document.getElementById('output').classList.add('outputBold');
if (boolBold == false) toggleBold();
document.getElementById('monochromeLabel').style.display="none";
document.getElementById('monochrome').style.display="none";
......@@ -418,10 +426,6 @@ function toMonochrome() {
};
}
function toggleBold() {
document.getElementById('output').classList.toggle('outputBold');
}
// Initialisation couleur background (par défaut black)
// if (document.getElementById('defaultBg').value == 'white') {
// document.getElementById('outputDiv').classList.toggle('win-white');
......@@ -472,79 +476,112 @@ var span = document.getElementsByClassName("close")[0];
// Fonction pour ouvrir le PopUp
function getPopUp() {
var outputContent = document.getElementById('output').innerHTML;
// <span> </span><span class="tokens" id="tok1" onclick="changeAlign(this.id)"><span class="phon phon_b">B</span><span class="phon phon_o_maj_nas">on</span><span class="phon phon_z_maj">j</span><span class="phon phon_u">ou</span><span class="phon phon_r_maj">r</span></span><span> </span><span class="tokens transMult" id="tok2" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_neutre">à</span></span><span> </span><span class="tokens transMult" id="tok3" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_t">t</span><span class="phon phon_u">ous</span></span>
var outputContent = document.getElementById('output').innerHTML;
var finalOutput = ""; // contiendra la chaîne de caractères à copier coller
function phon2color(correspondance, p1, decalage, chaine){
if (p1 == 'phon_wa'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_a');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_we_maj_nas'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_e_maj_nas');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_ij'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_i');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_h_maj_i'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_h_maj');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_i');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_nj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_n');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_ts_maj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s_maj');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_dz_maj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_d');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z_maj');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_ks'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_k');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_gz'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_g');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else if (p1 == 'phon_ts'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
} else {
var expFonte = "font-family: Palatino, Times, Calibri;";
var expCoulBase = "color:#cccccc;"
var expSizeBase = "font-size:30pt;";
var expSizeStress1 = "font-size:45pt;";
var expSizeStress2 = "font-size:36pt;";
var expSizeSchwa = "font-size:20pt;";
var expBold = "font-weight: bold;";
var expNoBold = "font-weight: normal;";
var expLong = "text-decoration: underline;";
// On récupère la liste des <span>
const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)/gm;
// group1: word in colors
// group2: punctuation
// group3: space
// group4: <br>
let m;
while ((m = regexSpan.exec(outputContent)) !== null) {
// parses each result of the regex
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regexSpan.lastIndex) {
regexSpan.lastIndex++;
}
console.log("group1:",m[1],"group2:",m[2],"group3:",m[3],"group4:",m[4]);
if (m[4]) {
finalOutput += "<br>"
} else if (m[3]) {
finalOutput += '<span style="'+expFonte+expCoulBase+expSizeBase+'"> </span>';
} else if (m[2]) {
if (boolBold) finalOutput += m[2].replace('class="phon_neutre"','style="'+expFonte+expCoulBase+expSizeBase+expBold+'"');
else finalOutput += m[2].replace('class="phon_neutre"','style="'+expFonte+expCoulBase+expSizeBase+expNoBold+'"');
} else if (m[1]) {
// Dans cette situation on a une suite de span de phono-graphèmes comme <span class="phon phon_au_maj stress1">hou</span><span class="phon phon_arobase_rho schwa">r</span>
// On va la transformer en liste de spans pour les traiter une par une
const phonographiesRegex = /<span class="phon (.*?)">(.*?)<\/span>/gm;
while ((n = phonographiesRegex.exec(m[1])) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (n.index === phonographiesRegex.lastIndex) {
phonographiesRegex.lastIndex++;
}
// The result can be accessed through the `n`-variable.
//console.log('RESULT:',n[1],n[2]);
var newOutputSpan = "<span style='";
if (n[1].includes("unstressed")) newOutputSpan += expFonte + expSizeBase + expNoBold;
else if (n[1].includes("schwa")) newOutputSpan += expFonte + expSizeSchwa + expNoBold;
else if (n[1].includes("stress1")) newOutputSpan += expFonte + expSizeStress1 + expBold;
else if (n[1].includes("stress2")) newOutputSpan += expFonte + expSizeStress2 + expBold;
else {
if (boolBold) newOutputSpan += expFonte + expSizeBase + expBold;
else newOutputSpan += expFonte + expSizeBase + expNoBold;
}
// COULEURS
n[1] = n[1].split(" ");
var phonClass = "";
for (i=0; i<n[1].length; i++) {
if (n[1][i].match(/phon_.*/)) phonClass = n[1][i];
}
if (phonClass.match(/.*_long/)) newOutputSpan += expLong;
if (phonClass != "") newOutputSpan += phon2color(phonClass);
newOutputSpan += "'>"+n[2]+"</span>";
finalOutput += newOutputSpan;
}
}
}
console.log("finalOutput :",finalOutput);
function phon2color(p1){
if (p1 in bicol2colcol) {
var col1 = getComputedStyle(document.documentElement).getPropertyValue(bicol2colcol[p1][0]);
var col2 = getComputedStyle(document.documentElement).getPropertyValue(bicol2colcol[p1][1]);
var res = 'background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;';
} else {
var col = getComputedStyle(document.documentElement).getPropertyValue('--'+p1);
var res = '<span style="color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
}
console.log(p1+' → '+col);
console.log(res);
return res;
}
function bicol2color(correspondance, p1, decalage, chaine){
var col = getComputedStyle(document.documentElement).getPropertyValue('--phon_'+p1);
var res = '<span style="color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
console.log(p1+' → '+col);
console.log(res);
var res = 'color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;';
}
return res;
}
// outputContent = outputContent.replace('<span> </span>',''); // suppr du premier span vide
outputContent = outputContent.replace(/<span class="phon_neutre">/g, '<span style="color:#cccccc">')
outputContent = outputContent.replace(/<span class="phon (\w+)">/g, phon2color);
outputContent = outputContent.replace(/<span class="phon \w+ (\w+)">/g, bicol2color);
outputContent = outputContent.replace(/onclick="changeAlign\(this\.id\)"/g,'');
outputContent = outputContent.replace(/title="changer de prononciation"/g,'');
outputContent = outputContent.replace(/class="tokens( transMult)*" /g,'');
outputContentWhite = outputContent.replace(/#ffffff/g,'#000000');
document.getElementById('pLienDiv').innerHTML = outputContent;
document.getElementById('pLienDivWhite').innerHTML = outputContentWhite;
}
// Remplacement des blancs par des noirs pour le fond blanc
finalOutputWhite = finalOutput.replace(/#ffffff/g,'#000000');
finalOutput = finalOutput.replace(/-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;/g,''); // on vire les strokes pour fond noir
// Insertion des résultats dans les div associées du popup
document.getElementById('pLienDiv').innerHTML = finalOutput;
document.getElementById('pLienDivWhite').innerHTML = finalOutputWhite;
// Affichage popup
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
......
static/styles/phonochromie_alem_v3.css
View file @ 254b7060
/* CSS ALeM-APP v3 */
/* https://alem.hypotheses.org/ */
/* Last update: 2020/06/27 */
/* Last update: 2020/08/20 */
:root {
--phon_bicolor1: #ff0000;
......@@ -207,30 +207,45 @@ svg {
.phon_ij { background:-webkit-linear-gradient(var(--phon_i) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_h_maj_i { background:-webkit-linear-gradient(var(--phon_h_maj) 62%, var(--phon_i) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_nj { background:-webkit-linear-gradient(var(--phon_n) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_j_maj { background:-webkit-linear-gradient(var(--phon_n) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_ef {background:-webkit-linear-gradient(var(--phon_e) 62%, var(--phon_f) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_ju { background: -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_long { background: -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline var(--phon_u);}
.phon_ju_maj { background: -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwju { background: -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasel { background: -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_l) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasem { background: -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_m) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasen { background: -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_n) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasel { background: -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_l) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasem { background: -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_m) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasen { background: -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_n) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwiz { background: -webkit-linear-gradient(var(--phon_schwi) 62%, var(--phon_z) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwaz { background: -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_z) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_lj { background: -webkit-linear-gradient(var(--phon_l) 62%, var(--phon_j) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_sz { background: -webkit-linear-gradient(var(--phon_s) 62%, var(--phon_z) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_tt_maj { background: -webkit-linear-gradient(var(--phon_t) 62%, var(--phon_t_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_jarobase { background: -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradient 70% */
.phon_ei_maj { background: -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_i_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majarobase { background: -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_arobase) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majr { background: -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_earobase { background: -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_arobase) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majarobase { background: -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_schwa) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_earobase { background: -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_schwa) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_au_maj { background: -webkit-linear-gradient(var(--phon_a) 60%, var(--phon_u_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj { background: -webkit-linear-gradient(var(--phon_arobase) 60%, var(--phon_u_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majarobase { background: -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_arobase) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj { background: -webkit-linear-gradient(var(--phon_schwa) 60%, var(--phon_u_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majarobase { background: -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_schwa) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maji_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_i_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_maj { background: -webkit-linear-gradient(var(--phon_a) 60%, var(--phon_i_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_er { background: -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majr { background: -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majr { background: -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_a_majr { background: -webkit-linear-gradient(var(--phon_a_maj) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_majr { background: -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maju_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_u_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradients triples */
.phon_ju_majarobase { background: -webkit-linear-gradient(var(--phon_j) 55%, var(--phon_u_maj) 65%, var(--phon_arobase) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_majarobase { background: -webkit-linear-gradient(var(--phon_j) 55%, var(--phon_u_maj) 65%, var(--phon_schwa) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wai_maj { background: -webkit-linear-gradient(var(--phon_w) 58%, var(--phon_a) 58%, var(--phon_i_maj) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_war { background: -webkit-linear-gradient(var(--phon_w) 58%, var(--phon_a) 58%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_majr { background: -webkit-linear-gradient(var(--phon_j) 58%, var(--phon_u_maj) 58%, var(--phon_r_slash) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_majarobase { background: -webkit-linear-gradient(var(--phon_a) 58%, var(--phon_i_maj) 58%, var(--phon_arobase) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/*STYLES DES TRANSCRIPTIONS GRAPHIQUES*/
.tran {
......
templates/coloriseur.html
View file @ 254b7060
......@@ -68,11 +68,11 @@
</div>
<div class="modal-body">
<p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
<div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
<div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
<div class="copyButton">
<button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
</div>
<div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="font-weight: bold;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
<div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
<div class="copyButton">
<button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
</div>
......@@ -103,6 +103,7 @@
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script src="{% static 'scripts/loc2stand.js' %}"></script>
<script src="{% static 'scripts/bicol2colcol.js' %}"></script>
<script src="{% static 'scripts/main.js' %}"></script>
<script src="{% static 'scripts/keyboard.js' %}"></script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment