You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
659 lines
13 KiB
659 lines
13 KiB
body{ |
|
background-color: transparent; |
|
font-family: Sans-Serif; |
|
} |
|
table tr td{ |
|
padding: 0px; |
|
} |
|
|
|
/* Widget background */ |
|
html, body{ |
|
height: 100%; |
|
margin: 0px; |
|
} |
|
|
|
#background{ |
|
width: 100%; |
|
height: 100%; |
|
border-spacing: 0; |
|
border-collapse: collapse; |
|
} |
|
.background-border-x{ |
|
height: 14px; |
|
padding: 0px; |
|
background-color: "black"; |
|
} |
|
.background-border-y{ |
|
width: 14px; |
|
padding: 0px; |
|
background-color: "black"; |
|
} |
|
#background-top-left{ |
|
background-image: url('../Images/darkblue/top-left.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-top{ |
|
background-image: url('../Images/darkblue/top.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-top-right{ |
|
background-image: url('../Images/darkblue/top-right.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-bottom-left{ |
|
background-image: url('../Images/darkblue/bottom-left.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-bottom{ |
|
background-image: url('../Images/darkblue/bottom.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-bottom-right{ |
|
background-image: url('../Images/darkblue/bottom-right.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-left{ |
|
background-image: url('../Images/darkblue/left.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-right{ |
|
background-image: url('../Images/darkblue/right.png'); |
|
background-size: 100% 100%; |
|
} |
|
#background-center{ |
|
background-image: url('../Images/darkblue/center.png'); |
|
background-size: 100% 100%; |
|
height: 100%; |
|
padding-top: 30px; |
|
position: relative; |
|
} |
|
|
|
/* Widget center */ |
|
#widgetCenter{ |
|
height: 100%; |
|
position: relative; |
|
} |
|
|
|
/* Zone d'affichage des fonctions */ |
|
#eventAffichage{ |
|
height: 100%; |
|
position: relative; |
|
} |
|
#eventAffichage canvas{ |
|
display: block; |
|
} |
|
#affichage{ |
|
height: 100%; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
border: 1px solid rgba(255,255,255,0.5); |
|
border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
} |
|
#affichageOutils{ |
|
position: absolute; |
|
top: 0px; |
|
box-sizing: border-box; |
|
height: 100%; |
|
width: 100%; |
|
} |
|
|
|
#divInputRapide{ |
|
display: none; |
|
position: absolute; |
|
top: 11px; |
|
left: 108px; |
|
padding: 3px; |
|
color: white; |
|
text-align: center; |
|
border: 1px solid rgba(255,255,255,0.2); |
|
border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.5); |
|
background-image: url('../Images/gradient3.png'); |
|
background-color: rgba(255,255,255,0.1); |
|
background-size: 100% 100%; |
|
z-index: 2; |
|
} |
|
#inputRapide{ |
|
width: 270px; |
|
} |
|
|
|
#menuFonctions3D{ |
|
position: absolute; |
|
top: 11px; |
|
left: 108px; |
|
padding: 3px; |
|
color: white; |
|
text-align: center; |
|
border: 1px solid rgba(255,255,255,0.2); |
|
border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.5); |
|
background-image: url('../Images/gradient3.png'); |
|
background-color: rgba(255,255,255,0.1); |
|
background-size: 100% 100%; |
|
z-index: 2; |
|
} |
|
#input3D{ |
|
width: 265px; |
|
} |
|
|
|
/* Messages */ |
|
#divMessages div{ |
|
position: absolute; |
|
background-image: url('../Images/cursor.png'); |
|
background-repeat: no-repeat; |
|
z-index: 4; |
|
pointer-events: none; |
|
min-height: 24px; |
|
} |
|
#divMessages div span{ |
|
position: relative; |
|
left: 19px; |
|
top: 20px; |
|
padding: 2px; |
|
color: white; |
|
font-size: 11px; |
|
text-align: center; |
|
border: 1px solid rgba(255,255,255,0.2); |
|
border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.5); |
|
text-shadow: 0px 0px 3px rgba(0,165,255,0.7); |
|
background-image: url('../Images/gradient2.png'); |
|
background-color: rgba(0,86,134,0.6); |
|
pointer-events: auto; |
|
} |
|
#divMessages div span a{ |
|
color : rgb(135,210,255); |
|
cursor: pointer; |
|
} |
|
#divMessages div span a:hover{ |
|
color : rgb(110,200,255); |
|
text-decoration: underline; |
|
text-decoration-style: dotted; |
|
} |
|
|
|
|
|
/* Taille standard des boutons*/ |
|
.bouton{ |
|
/*width: 100px;*/ |
|
height: 25px; |
|
font-size: 12px; |
|
} |
|
|
|
/* Boutons qui sont dans la partie gauche et qui ouvrent les différents menus */ |
|
.boutonGauche{ |
|
width: 100%; |
|
height: 32px; |
|
text-align: center; |
|
} |
|
|
|
/* Aperçu couleur 3D*/ |
|
#apercuCouleur3D{ |
|
border: 1px solid rgba(0, 0, 0, 0.7); |
|
border-radius: 4px; |
|
-webkit-border-radius: 4px; |
|
} |
|
|
|
/* Taille des champs contenant seulement 2 ou 3 caractères */ |
|
.smallInput{ |
|
width: 35px; |
|
} |
|
.mediumInput{ |
|
width: 45px; |
|
} |
|
|
|
|
|
/* Boutons qui ouvrent le ColorPicker */ |
|
.boutonCouleur{ |
|
position: relative; |
|
left: 2px; |
|
top: 4px; |
|
width: 15px; |
|
height: 15px; |
|
border: 1px solid rgba(0,0,0,0.5); |
|
border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
background-color: rgba(0,128,255,0.8); |
|
display: inline-block; |
|
cursor:pointer; |
|
opacity: 0.7; |
|
} |
|
.boutonCouleur:hover{ |
|
box-shadow: 0px 0px 2px rgba(0,128,255,1); |
|
opacity: 1; |
|
} |
|
|
|
/* Texte d'information (plus petit) */ |
|
.texteSecondaire{ |
|
font-size: 11px; |
|
color: rgba(0,0,0,0.5); |
|
margin-left: 10px; |
|
} |
|
|
|
/* Style pour le texte où on peut cliquer dessus */ |
|
.survol{ |
|
cursor: pointer; |
|
color: rgb(0,70,120); |
|
} |
|
.survol:hover{ |
|
color: rgb(0,110,150); |
|
opacity: 0.7; |
|
/* text-shadow: 0px 0px 3px white; */ |
|
} |
|
|
|
/* Texte en gras */ |
|
.gras{ |
|
font-weight: bold; |
|
} |
|
|
|
/* Flèches permettant de deplacer l'affichage */ |
|
.flecheDeplacement{ |
|
color: black; |
|
text-shadow: 0px 0px 20px rgba(255,255,255,1); |
|
opacity: 0; |
|
font-size: 56px; |
|
text-align: center; |
|
cursor: pointer; |
|
z-index: 1; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
.flecheDeplacement:hover{ |
|
opacity: 0.4; |
|
} |
|
.flecheDeplacement:active{ |
|
opacity: 0.3; |
|
} |
|
#flecheHaut{ |
|
position: absolute; |
|
top: 15px; |
|
left: 50%; |
|
margin-left: -35px; |
|
width: 70px; |
|
height: 55px; |
|
} |
|
#flecheBas{ |
|
position: absolute; |
|
bottom: 20px; |
|
left: 50%; |
|
margin-left: -35px; |
|
width: 70px; |
|
height: 55px; |
|
} |
|
#flecheGauche{ |
|
position: absolute; |
|
top: 50%; |
|
margin-top: -36px; |
|
left: 15px; |
|
width: 55px; |
|
height: 70px; |
|
} |
|
#flecheDroite{ |
|
position: absolute; |
|
top: 50%; |
|
margin-top: -36px; |
|
right: 15px; |
|
width: 55px; |
|
height: 70px; |
|
} |
|
|
|
|
|
/* Boutons permettant de choisir l'action de la souris dans le menu des outils */ |
|
.choixOutil{ |
|
width: 125px; |
|
height: 40px; |
|
font-size: 14px; |
|
cursor: pointer; |
|
} |
|
|
|
|
|
/* Petits boutons plus et moins dans les options */ |
|
.boutonPlus{ |
|
position: relative; |
|
top: -7px; |
|
left: -5px; |
|
width: 10px; |
|
height: 10px; |
|
font-size: 9px; |
|
text-align: center; |
|
background-color: rgba(0, 140, 255, 0.2); |
|
border: 1px rgba(0,0,0,0.5) solid; |
|
border-radius: 3px; |
|
-webkit-border-radius: 3px; |
|
cursor: pointer; |
|
display: inline-block; |
|
} |
|
.boutonMoins{ |
|
position: relative; |
|
top: 6px; |
|
left: -17px; |
|
width: 10px; |
|
height: 10px; |
|
font-size: 9px; |
|
text-align: center; |
|
background-color: rgba(0, 140, 255, 0.2); |
|
border: 1px rgba(0,0,0,0.5) solid; |
|
border-radius: 3px; |
|
-webkit-border-radius: 3px; |
|
cursor: pointer; |
|
display: inline-block; |
|
} |
|
.boutonPlus:hover{ |
|
border: 1px rgba(0,0,0,0.7) solid; |
|
background-color: rgba(0, 140, 255, 0.5); |
|
} |
|
.boutonMoins:hover{ |
|
border: 1px rgba(0,0,0,0.7) solid; |
|
background-color: rgba(0, 140, 255, 0.5); |
|
} |
|
|
|
|
|
|
|
/* Menu etudes fonctions*/ |
|
#menuEtude p{ |
|
margin-top: 7px; |
|
margin-bottom: 0px; |
|
/* font-weight: bold; */ |
|
} |
|
#menuEtude span{ |
|
/* font-weight : normal; */ |
|
} |
|
/* Tableau du signe dans le menu d'étude de la fonction*/ |
|
#etudeSigne{ |
|
/* border-collapse: collapse; */ |
|
border-spacing: 0px; |
|
} |
|
#etudeSigne td{ |
|
min-width: 25px; |
|
text-align: center; |
|
padding: 0px; |
|
} |
|
#etudeSigne td.premier{ |
|
font-weight: bold; |
|
} |
|
#etudeSigne td.bordure{ |
|
border: 1px solid black; |
|
border-radius: 3px; |
|
-webkit-border-radius: 3px; |
|
} |
|
#etudeSigne td.fondNoir{ |
|
background-color: rgba(0,0,0,0.5); |
|
} |
|
|
|
/* Titres des menus */ |
|
h1{ |
|
font-size: 16px; |
|
font-weight: 600; |
|
text-align: center; |
|
/*font-style: italic;*/ |
|
margin-top: 15px; |
|
margin-bottom: 25px; |
|
} |
|
h2{ |
|
font-size: 14px; |
|
font-weight: normal; |
|
font-style: italic; |
|
margin-top: 30px; |
|
} |
|
h3{ |
|
font-size: 16px; |
|
font-weight: 600; |
|
text-align: left; |
|
/*font-style: italic;*/ |
|
margin-top: 7px; |
|
margin-bottom: 20px; |
|
} |
|
h4{ |
|
font-size: 16px; |
|
font-weight: 600; |
|
text-align: center; |
|
/*font-style: italic;*/ |
|
margin-top: 15px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
|
|
/* Menu Mise à Jour */ |
|
#mAj{ |
|
text-align: center; |
|
font-size: 14px; |
|
} |
|
#mAj h1{ |
|
font-size: 22px; |
|
margin-top: 5px; |
|
margin-bottom: 15px; |
|
} |
|
#mAj span object{ |
|
position: relative; |
|
bottom: 4px; |
|
width: 150px; |
|
height: 27px; |
|
overflow: hidden; |
|
} |
|
#mAj input{ |
|
min-height: 27px; |
|
} |
|
|
|
.boutonSauvegarde{ |
|
width: 100px; |
|
height: 32px; |
|
} |
|
#cacheCookies{ |
|
position: absolute; |
|
top: 150px; |
|
left: 10px; |
|
width: 93%; |
|
height: 150px; |
|
background-color: rgba(255,255,255,0.7); |
|
border: 1px rgba(255,255,255,0.8) solid; |
|
border-radius: 3px; |
|
-webkit-border-radius: 3px; |
|
text-align: center; |
|
display: none; |
|
} |
|
#cacheMaJ{ |
|
position: absolute; |
|
padding-top: 20px; |
|
padding-bottom: 10px; |
|
top: 250px; |
|
left: 14px; |
|
width: 93%; |
|
height: 25px; |
|
background-color: rgba(255,255,255,0.8); |
|
border: 1px rgba(255,255,255,0.8) solid; |
|
border-radius: 3px; |
|
-webkit-border-radius: 3px; |
|
text-align: center; |
|
font-weight: bold; |
|
display: none; |
|
} |
|
|
|
/* Menu clique droite sur le graphique */ |
|
#ctxMenu{ |
|
position: absolute; |
|
border: 1px solid black; |
|
border-radius: 5px; |
|
background-color: rgba(255,255,255,0.8); |
|
box-shadow: 0px 0px 5px rgba(0,64,126,0.5); |
|
font-size: 12px; |
|
padding: 2px; |
|
z-index: 2; |
|
display: none; |
|
} |
|
#ctxMenu input.bouton{ |
|
width: 140px; |
|
height: 25px; |
|
} |
|
#ctxMenu h1{ |
|
font-size: 14px; |
|
text-align: center; |
|
text-decoration: underline; |
|
text-shadow: 0px 0px 4px rgba(0,100,200,0.7); |
|
margin: 3px; |
|
} |
|
#ctxMenu div.fermer{ |
|
position: absolute; |
|
right: 0px; |
|
top: 0px; |
|
width: 10px; |
|
height: 10px; |
|
font-size: 10px; |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
#ctxMenu div.fermer:hover{ |
|
text-shadow: 0px 0px 2px rgba(0,128,255,1); |
|
opacity: 1; |
|
} |
|
.miniCouleur{ |
|
display: inline-block; |
|
width: 10px; |
|
height: 10px; |
|
border: 1px solid rgba(0,0,0,0.5); |
|
border-radius: 3px; |
|
background-color: rgba(0,128,255,0.8); |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
.miniCouleur:hover{ |
|
box-shadow: 0px 0px 2px rgba(0,128,255,1); |
|
opacity: 1; |
|
} |
|
|
|
/* Editeur de fonctions dans le menu + */ |
|
#functionMenuRight{ |
|
position: absolute; |
|
right: 15px; |
|
width: 45%; |
|
box-sizing: border-box; |
|
} |
|
#functionMenuLeft{ |
|
max-width: 50%; |
|
/* min-height: 400px; */ |
|
box-sizing: border-box; |
|
} |
|
#fonctionsSupp{ |
|
width: 100%; |
|
min-height: 305px; |
|
/* height: 245px; */ |
|
/* border: 1px solid blue; */ |
|
overflow: auto; |
|
} |
|
.spanFonction{ |
|
/* width: 320px; */ |
|
border: 1px solid rgba(0,0,0,0.3); |
|
border-radius: 5px; |
|
background-color: rgba(255,255,255,0.2); |
|
background-image: url('../Images/gradient2.png'); |
|
background-position: 0px -2px; |
|
box-shadow: 0px 0px 4px rgba(0,64,126,0.2); |
|
padding: 2px; |
|
margin: 4px; |
|
font-weight: bold; |
|
text-align: center; |
|
overflow: hidden; |
|
cursor: pointer; |
|
} |
|
.spanFonction:hover{ |
|
background-color: rgba(164,228,255,0.2); |
|
box-shadow: 0px 0px 2px rgba(0,150,255,0.6); |
|
} |
|
.spanFonctionSelect{ |
|
background-color: rgba(118,214,255,0.4); |
|
border-color: rgba(0,63,126,0.3); |
|
} |
|
.spanFonctionSelect:hover{ |
|
background-color: rgba(118,214,255,0.6); |
|
} |
|
#editeurFonction{ |
|
/* position: absolute; */ |
|
/* right: 15px; */ |
|
/* top: 45px; */ |
|
min-width: 300px; |
|
/* height: 75%; */ |
|
border: 1px solid rgba(255,255,255,0.7); |
|
/* border-top: 1px solid rgba(255,255,255,0.3); */ |
|
border-radius: 5px; |
|
background-color: rgba(255,255,255,0.2); |
|
background-image: url('../Images/gradient2.png'); |
|
background-size: 100% 100%; |
|
box-shadow: 0px 0px 4px rgba(0,64,126,0.2); |
|
font-size: 12px; |
|
padding: 2px; |
|
} |
|
#editeurApercu{ |
|
position: relative; |
|
display : block; |
|
margin : auto; |
|
width: 100px; |
|
height : 80px; |
|
border: 1px solid white; |
|
border-radius: 3px; |
|
background-color: rgba(255,255,255,0.8); |
|
box-shadow: 0px 0px 2px rgba(0,64,126,0.5); |
|
font-size: 12px; |
|
padding: 2px; |
|
} |
|
.editeurOnglets{ |
|
position: relative; |
|
bottom: 3px; |
|
width: 100%; |
|
text-align: center; |
|
} |
|
.editeurOnglets span{ |
|
display: inline-block; |
|
min-width: 70px; |
|
width: 40%; |
|
padding: 5px; |
|
margin: 0px 2px; |
|
text-align: center; |
|
font-weight: normal; |
|
background-color: rgba(255, 255, 255, 0.7); |
|
background-image: url('../Images/gradient3.png'); |
|
border: 1px solid rgba(255, 255, 255, 0.9); |
|
border-top: 1px solid white; |
|
border-bottom-left-radius: 6px; |
|
border-bottom-right-radius: 6px; |
|
-webkit-border-bottom-left-radius: 6px; |
|
-webkit-border-bottom-right-radius: 6px; |
|
box-shadow: 0px 0px 3px rgba(0,0,0,0.5); |
|
opacity: 0.5; |
|
cursor: pointer; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
.editeurOnglets span.ongletActuel{ |
|
opacity: 0.8; |
|
font-weight: bold; |
|
} |
|
.editeurOnglets span:hover{ |
|
opacity: 1; |
|
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,1); |
|
} |
|
.editeurOnglets span:active{ |
|
opacity: 0.7; |
|
font-weight: bold; |
|
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,0.5); |
|
} |
|
|
|
#divSuppOutil div{ |
|
position: absolute; |
|
width: 10px; |
|
height: 10px; |
|
font-size: 10px; |
|
cursor: pointer; |
|
opacity: 1; |
|
z-index: 1; |
|
} |
|
#divSuppOutil div:hover{ |
|
color: rgb(200,0,0); |
|
}
|
|
|