Clément Fauconnier
3 years ago
parent
c656810b0a
commit
8a78441e79
@ -0,0 +1,20 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
xmlns:ub="" |
||||
id="https://openedu.fr/" |
||||
version="1.0" |
||||
width="750" |
||||
height="300" |
||||
ub:resizable="true" |
||||
ub:transparent="true" |
||||
> |
||||
|
||||
<name>Papier</name> |
||||
<author href="https://openedu.fr/" |
||||
email="contact@openedu.fr">Fanch Le Cléac'h</author> |
||||
<description>Affichage de différents types de papiers</description> |
||||
<preference name="skin" |
||||
value="uniboard"/> |
||||
<content src="papier.html"/> |
||||
</widget> |
||||
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@ |
||||
Licence CC-BY-NC |
||||
Attribution |
||||
Pas d'utilisation commerciale |
||||
|
||||
Attribution [BY] (Attribution) : l'oeuvre peut être librement utilisée, à la condition de l'attribuer à l'auteur en citant son nom. |
||||
|
||||
Pas d'utilisation commerciale [NC] (Noncommercial) : le titulaire de droits peut autoriser tous les types d'utilisation ou au contraire restreindre aux utilisations non commerciales (les utilisations commerciales restant soumises à son autorisation). |
||||
@ -0,0 +1,254 @@ |
||||
body {font-family: Verdana; |
||||
font-size:10pt; |
||||
background-color:white ; |
||||
} |
||||
/* Bloc figurant sur chaque onglet, comportant le bouton de Génération et les boutons radio du format de page ...*/ |
||||
.boite_droite{ |
||||
position:absolute; |
||||
margin-left:240px; |
||||
width:160px; |
||||
height:140px; |
||||
margin-top:5px; |
||||
} |
||||
/* Bloc sous le bouton de commande */ |
||||
.parametres { |
||||
border:solid 1px; |
||||
border-color:rgba(7,55,99,0.8); |
||||
font-size:inherit; |
||||
font-weight:bold; |
||||
color:white; |
||||
background-color:rgba(7,55,99,0.8); |
||||
text-align:center; |
||||
border-radius:5px; |
||||
line-height:1.6em; |
||||
margin-top:5px; |
||||
} |
||||
/* Options de réglage du papier dans chaque onglet */ |
||||
.boite_gauche { |
||||
border:solid 1px; |
||||
border-color:rgba(7,55,99,0.8); |
||||
font-size:inherit; |
||||
font-weight:bold; |
||||
color:white; |
||||
background-color:rgba(7,55,99,0.8); |
||||
text-align:center; |
||||
border-radius:5px; |
||||
width:230px; |
||||
height:auto; |
||||
padding-bottom:5px; |
||||
} |
||||
/* Étiquettes des blocs internes de l'onglet */ |
||||
.etiquette{ |
||||
background-color:lightblue; |
||||
font-size:inherit; |
||||
width:100%; |
||||
color:rgba(7,55,99,0.8); |
||||
text-align:left; |
||||
} |
||||
/* Intitulé des rubriques des boites*/ |
||||
span {padding-left:5px;} /* Marge à gauche de l'intitulé de l'étiquette */ |
||||
|
||||
/* Adaptation des angles de l'étiquette en fonction de sa position */ |
||||
.haut{ |
||||
border-radius:5px 5px 0px 0px; |
||||
} |
||||
.milieu{ |
||||
border-radius:0px; |
||||
} |
||||
.bas{ |
||||
border-radius:0px 0px 5px 5px; |
||||
} |
||||
/* Mise en forme du texte */ |
||||
h1{ |
||||
color:rgba(7,55,99,0.8); |
||||
font-size:14pt; |
||||
text-align:center;} |
||||
h2{ |
||||
color:lightblue; |
||||
font-size:12pt; |
||||
text-align:center; |
||||
} |
||||
|
||||
li{ |
||||
margin-left:10px;} |
||||
|
||||
/* Adaptattion de l'onglet Aide (pas d'aperçu) */ |
||||
#aide{ |
||||
width:700px; |
||||
height:190px; |
||||
} |
||||
|
||||
/* Mise en forme générale du widget*/ |
||||
#widget{ |
||||
width:720px; |
||||
height:260px; |
||||
border:2px solid rgba(7,55,99,0.8); |
||||
border-radius:10px; |
||||
padding-bottom:5px; |
||||
border-top:none; |
||||
background-color:white; |
||||
} |
||||
/* Feuille générée et transférée vers OpenBoard */ |
||||
#feuille{ |
||||
} |
||||
/* Fenêtre d'aperçu du papier dans les onglets */ |
||||
#aperçu{ |
||||
position: relative; |
||||
float:right; |
||||
margin:5px; |
||||
border-style: dashed; |
||||
border:dashed 2px rgba(7,55,99,0.8); |
||||
} |
||||
|
||||
/* Barre des onglets */ |
||||
.onglet { |
||||
overflow: hidden; |
||||
border: none; |
||||
border-radius:10px 10px 0px 0px; |
||||
width:100%; |
||||
height:50px; |
||||
background-color:white; |
||||
} |
||||
|
||||
/* Bouton de l'onglet */ |
||||
.onglet button { |
||||
width:80px; |
||||
height:100%; |
||||
border-radius:10px 10px 0px 0px; |
||||
background-color: lightblue; |
||||
border:1px solid rgba(7,55,99,0.8); |
||||
color:rgba(7,55,99,0.8); |
||||
font-weight:bold; |
||||
float: left; |
||||
cursor: pointer; |
||||
padding: 2px 2px; |
||||
transition: 0.5s; |
||||
font-size: inherit; |
||||
} |
||||
|
||||
/* Onglet survolé */ |
||||
.onglet button:hover { |
||||
color:white; |
||||
background-color:rgba(7,55,99,0.8); |
||||
} |
||||
|
||||
/* Onglet actif */ |
||||
.onglet button.active { |
||||
background-color: rgba(7,55,99,0.8); |
||||
color:white; |
||||
} |
||||
.onglet button.active:hover { |
||||
color:lightblue; |
||||
} |
||||
|
||||
/* Contenu de l'onglet */ |
||||
.contenu_onglet { |
||||
display: none; |
||||
margin-top:5px; |
||||
margin-left:5px; |
||||
border: none; |
||||
width:290px; |
||||
border-top: none; |
||||
float:left; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
/* Palettes dans les onglets */ |
||||
.palette { |
||||
margin:10px 0px; |
||||
text-align:left; |
||||
padding:0px 5px; |
||||
|
||||
} |
||||
/* Curseur dans les onglets*/ |
||||
.potentiometre{ |
||||
margin:10px; |
||||
width:130px; |
||||
} |
||||
/* Affichage de la taille des carreaux, maillage... */ |
||||
.taille{ |
||||
border:none; |
||||
color:white; |
||||
background-color:rgba(0,0,0,0); |
||||
font-weight:bold; |
||||
width:70px; |
||||
text-align:center; |
||||
position:relative; |
||||
float:right; |
||||
margin:5pt; |
||||
} |
||||
|
||||
|
||||
/* Bouton miniature générer Onglet ? */ |
||||
.petit_bouton_commande{ |
||||
position:relative; |
||||
color:white; |
||||
border:solid 1px; |
||||
border-color:rgba(7,55,99,0.8); |
||||
border-radius:50%; |
||||
background-color: lightblue; |
||||
font-size: 12px; |
||||
width: 25px; |
||||
height:25px; |
||||
text-align: center; |
||||
vertical-align:middle |
||||
transition-duration: 1s; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
cursor: pointer; |
||||
} |
||||
.petit_bouton_commande:before{ |
||||
content:"\2713"; |
||||
} |
||||
|
||||
/* Bouton de Génération de la feuille */ |
||||
.bouton_commande { |
||||
position:relative; |
||||
display:block; |
||||
margin:auto; |
||||
border:solid 1px; |
||||
border-color:rgba(7,55,99,0.8); |
||||
border-radius:50%; |
||||
background-color: lightblue; |
||||
font-size: 28px; |
||||
width: 50px; |
||||
height:50px; |
||||
text-align: center; |
||||
vertical-align:middle |
||||
transition-duration: 1s; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.bouton_commande:before { |
||||
content:"\2713"; |
||||
color:white; |
||||
} |
||||
.bouton_commande:after { |
||||
content: ""; |
||||
background: #f1f1f1; |
||||
display: block; |
||||
position: absolute; |
||||
padding-top: 300%; |
||||
padding-left: 350%; |
||||
margin-left: -20px !important; |
||||
margin-top: -120%; |
||||
opacity: 0; |
||||
transition: all 0.8s |
||||
} |
||||
|
||||
.bouton_commande:active:after { |
||||
padding: 0; |
||||
margin: 0; |
||||
opacity: 1; |
||||
transition: 0s |
||||
} |
||||
|
||||
#curseur_position_marge_seyes, #curseur_position_marge_guide_ane { |
||||
width:80px; |
||||
} |
||||
#taille_marge_seyes, #taille_marge_guide_ane{ |
||||
width:20px; |
||||
} |
||||
@ -0,0 +1,322 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>Papier</title> |
||||
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui-base.min.css"> |
||||
<link rel="stylesheet" type="text/css" href="spectrum-1.8.1/spectrum.css"> |
||||
<link rel="stylesheet" type="text/css" href="papier.css"> |
||||
|
||||
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script> |
||||
<script type="text/javascript" src="jquery/jquery-ui-1.12.1.min.js"></script> |
||||
|
||||
<script type="text/javascript" src="spectrum-1.8.1/spectrum.js"></script> |
||||
<script type="text/javascript" src="spectrum-1.8.1/i18n/jquery.spectrum-fr.js"></script> |
||||
<script type="text/javascript" src="papier.js"></script> |
||||
|
||||
</head> |
||||
<body onload="initialisation();"> |
||||
<div id="widget"> |
||||
<div class="onglet"> |
||||
<!-- Définition des onglets !--> |
||||
<button class="lien_onglet" onclick="onglet(event, 'uni')">Uni</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'seyes')">Seyes</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'maternelle')">Maternelle</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'guide_ane')">Guide Âne</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'dys')">Dys</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'quadrillage')">Quadrillage</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'mm')">Millimétré</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'pointé')">Pointé</button> |
||||
<button class="lien_onglet" onclick="onglet(event, 'aide')">?</button> |
||||
</div> |
||||
<!-- Contenu de l'onglet 1 !--> |
||||
<div id="uni" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span><br></div> |
||||
<input type="radio" id="4/3" name="taille_page_uni" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_uni" value="16/9">16/9 |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Couleur</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id="palette_fond_uni"/> <!-- Couleur du fond !--> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- Contenu de l'onglet 2 !--> |
||||
<div id="seyes" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_seyes" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_seyes" value="16/9">16/9 |
||||
<!-- Marge ? !--> |
||||
<div class="etiquette milieu"><input type="checkbox" id="marge_seyes"><span>Marge</span></div> |
||||
<input type="text" id="taille_marge_seyes" class="taille"> |
||||
<div id="curseur_position_marge_seyes" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Interligne</span></div> |
||||
<input type="text" id="taille_carreau_seyes" class="taille"> |
||||
<div id="curseur_seyes" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id="palette_seyes_1"/> <!-- Ligne Horizontale !--> |
||||
<input type='text' id="palette_seyes_2"/><!-- Ligne Verticale !--> |
||||
<input type='text' id="palette_seyes_3"/><!-- Interligne !--> |
||||
<input type='text' id="palette_fond_seyes" class='palette'/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_seyes" readonly class="taille"> |
||||
<div id="curseur_épaisseur_seyes" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 3 !--> |
||||
<div id="maternelle" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_maternelle" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_maternelle" value="16/9">16/9 |
||||
<!-- Marge ? !--> |
||||
<div class="etiquette milieu"><input type="checkbox" id="marge_maternelle"><span>Marge</span></div> |
||||
<input type="text" id="taille_marge_maternelle" class="taille"> |
||||
<div id="curseur_position_marge_maternelle" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Interligne</span></div> |
||||
<input type="text" id="taille_carreau_maternelle" class="taille"> |
||||
<div id="curseur_maternelle" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id="palette_maternelle_1"/> <!-- Ligne Horizontale !--> |
||||
<input type='text' id="palette_maternelle_2"/><!-- Interligne !--> |
||||
<input type='text' id="palette_fond_maternelle" class='palette'/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_maternelle" readonly class="taille"> |
||||
<div id="curseur_épaisseur_maternelle" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 3 !--> |
||||
<div id="guide_ane" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_guide_ane" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_guide_ane" value="16/9">16/9 |
||||
|
||||
<div class="etiquette milieu"><input type="checkbox" id="marge_guide_ane"><span>Marge</span></div> |
||||
<input type="text" id="taille_marge_guide_ane" class="taille"> |
||||
<div id="curseur_position_marge_guide_ane" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Interligne</span></div> |
||||
<input type="text" id="interligne_guide_ane" class="taille"> |
||||
<div id="curseur_guide_ane" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id="palette_fond_guide_ane"/> <!-- Couleur du fond !--> |
||||
<input type='text' id="palette_ligne_guide_ane"/> <!-- Couleur des lignes !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_guide_ane" readonly class="taille"> |
||||
<div id="curseur_épaisseur_guide_ane" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 4 !--> |
||||
<div id="dys" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_dys" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_dys" value="16/9">16/9 |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Interligne centrale</span></div> |
||||
<input type="text" id="taille_carreau_dys" class="taille"> |
||||
<div id="curseur_dys" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleur du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id="palette_fond_dys" class='palette'/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_dys" readonly class="taille"> |
||||
<div id="curseur_épaisseur_dys" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 5 !--> |
||||
<div id="quadrillage" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_quadrillage" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_quadrillage" value="16/9">16/9 |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Quadrillage</span></div> |
||||
<input type="text" id="taille_carreau_quadrillage" class="taille"> |
||||
<div id="curseur_quadrillage" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id='palette_quadrillage'/><!-- Ligne !--> |
||||
<input type='text' id="palette_fond_quadrillage" class='palette'/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_quadrillage" readonly class="taille"> |
||||
<div id="curseur_épaisseur_quadrillage" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 6 !--> |
||||
<div id="mm" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_mm" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_mm" value="16/9">16/9 |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Interligne</span></div> |
||||
<input type="text" id="taille_carreau_mm" class="taille"> |
||||
<div id="curseur_mm" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id='palette_mm_ligne'/><!-- Ligne Horizontale et Verticale!--> |
||||
<input type='text' id='palette_mm_interligne'/><!-- Interligne !--> |
||||
<input type='text' id="palette_fond_mm" class='palette'/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div> |
||||
<input type="text" id="épaisseur_mm" readonly class="taille"> |
||||
<div id="curseur_épaisseur_mm" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 7 !--> |
||||
<div id="pointé" class="contenu_onglet"> |
||||
<!-- Boîte de commandes à droite !--> |
||||
<div class="boite_droite"> |
||||
<!-- Bouton générateur !--> |
||||
<button id="bouton_générer" class="bouton_commande"></button> |
||||
<!-- Paramètres de la page !--> |
||||
<div class="parametres"> |
||||
<!-- Choix du format de page !--> |
||||
<div class="etiquette haut"><span>Format de page</span></div> |
||||
<input type="radio" id="4/3" name="taille_page_pointé" value="4/3">4/3 |
||||
<input type="radio" checked id="16/9" name="taille_page_pointé" value="16/9">16/9 |
||||
<!-- Choix du type de point !--> |
||||
<div class="etiquette milieu"><span>Type de point</span></div> |
||||
<input type="radio" checked id="point" name="type_point_page_pointé" value="point"><span>•</span> |
||||
<input type="radio" id="plus" name="type_point_page_pointé" value="plus"><span>+</span> |
||||
<input type="radio" id="croix" name="type_point_page_pointé" value="croix"><span>x</span> |
||||
<!-- Choix du Maillage !--> |
||||
<div class="etiquette milieu"><span>Type de Maillage</span></div> |
||||
<input type="radio" checked id="pointé_carré" name="type_papier_pointé" value="pointé_carré"><span><b style="font-size:20pt">∷</b></span> |
||||
<input type="radio" id="pointé_iso" name="type_papier_pointé" value="pointé_iso"><span><b style="font-size:20pt">∴</b></span> |
||||
</div> |
||||
</div> |
||||
<!-- Boîte des options à gauche !--> |
||||
<div class="boite_gauche"> |
||||
<!-- Option 1 !--> |
||||
<div class="etiquette haut"><span>Maillage</span></div> |
||||
<input type="text" id="taille_pointé" class="taille"> |
||||
<div id="curseur_pointé" class="potentiometre" ></div> |
||||
<!-- Option 2 !--> |
||||
<div class="etiquette milieu"><span>Couleur des points/du fond</span></div> |
||||
<div class='palette'> |
||||
<input type='text' id='palette_pointé'/> <!-- Couleur des points !--> |
||||
<input type='text' id="palette_fond_pointé"/> <!-- Couleur du fond !--> |
||||
</div> |
||||
<!-- Option 3 !--> |
||||
<div class="etiquette milieu"><span>Épaisseur des points</span></div> |
||||
<input type="text" id="épaisseur_pointé" readonly class="taille"> |
||||
<div id="curseur_épaisseur_pointé" class="potentiometre" ></div> |
||||
</div> |
||||
</div> |
||||
<!-- Contenu de l'onglet 8 !--> |
||||
<div id="aide" class="contenu_onglet"> <!-- Aide ponctuelle !--> |
||||
<h1>PAPIER</h1> |
||||
<h2>Application pour Open-Sankoré / OpenBoard</h2> |
||||
|
||||
<p> |
||||
<li>Cliquer sur les onglets pour choisir le papier à mettre en fond de page.</li> |
||||
<li>Modifier les paramètres du papier et visualisez le résultat dans la fenêtre d'apeçu.</li> |
||||
<li>Cliquer sur le bouton <button class="petit_bouton_commande" width="10" height="10" disabled></button> pour générer le fond.</li> |
||||
</p> |
||||
<p style="text-align:center">Développée par <a href="https://openedu.fr/" target="blank">F. Le Cléac'h</a> |
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/fr/legalcode" target="blank"><img src="images/cc-by-nc-sa-min.svg"></a> |
||||
<a href="rev.txt" target="blank">Version 2.5.4</a> Novembre 2020 |
||||
</p> |
||||
</div> |
||||
<canvas id="aperçu" width="300px" height="200px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- fenêtre d'aperçu dans l'onglet !--> |
||||
<canvas id="feuille" width="1820px" height="1024px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- page finale 4/3 ou 16/9 !--> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@ |
||||
Copyright (c) Brian Grinstead |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining |
||||
a copy of this software and associated documentation files (the |
||||
"Software"), to deal in the Software without restriction, including |
||||
without limitation the rights to use, copy, modify, merge, publish, |
||||
distribute, sublicense, and/or sell copies of the Software, and to |
||||
permit persons to whom the Software is furnished to do so, subject to |
||||
the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be |
||||
included in all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE |
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION |
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
||||
@ -0,0 +1,17 @@ |
||||
// Spectrum Colorpicker
|
||||
// Arabic (ar) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["ar"] = { |
||||
cancelText: "إلغاء", |
||||
chooseText: "إختار", |
||||
clearText: "إرجاع الألوان على ما كانت", |
||||
noColorSelectedText: "لم تختار أي لون", |
||||
togglePaletteMoreText: "أكثر", |
||||
togglePaletteLessText: "أقل" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Catalan (ca) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["ca"] = { |
||||
cancelText: "Cancel·lar", |
||||
chooseText: "Escollir", |
||||
clearText: "Esborrar color seleccionat", |
||||
noColorSelectedText: "Cap color seleccionat", |
||||
togglePaletteMoreText: "Més", |
||||
togglePaletteLessText: "Menys" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,19 @@ |
||||
// Spectrum Colorpicker
|
||||
// Czech (cs) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
// author localization cs Pavel Laupe Dvorak pavel@pavel-dvorak.cz
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["cs"] = { |
||||
cancelText: "zrušit", |
||||
chooseText: "vybrat", |
||||
clearText: "Resetovat výměr barev", |
||||
noColorSelectedText: "Žádná barva nebyla vybrána", |
||||
togglePaletteMoreText: "více", |
||||
togglePaletteLessText: "méně" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// German (de) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["de"] = { |
||||
cancelText: "Abbrechen", |
||||
chooseText: "Wählen", |
||||
clearText: "Farbauswahl zurücksetzen", |
||||
noColorSelectedText: "Keine Farbe ausgewählt", |
||||
togglePaletteMoreText: "Mehr", |
||||
togglePaletteLessText: "Weniger" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,14 @@ |
||||
// Spectrum Colorpicker
|
||||
// Danish (dk) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["dk"] = { |
||||
cancelText: "annuller", |
||||
chooseText: "Vælg" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Spanish (es) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["es"] = { |
||||
cancelText: "Cancelar", |
||||
chooseText: "Elegir", |
||||
clearText: "Borrar color seleccionado", |
||||
noColorSelectedText: "Ningún color seleccionado", |
||||
togglePaletteMoreText: "Más", |
||||
togglePaletteLessText: "Menos" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Persian (fa) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["fa"] = { |
||||
cancelText: "لغو", |
||||
chooseText: "انتخاب", |
||||
clearText: "تنظیم مجدد رنگ", |
||||
noColorSelectedText: "هیچ رنگی انتخاب نشده است!", |
||||
togglePaletteMoreText: "بیشتر", |
||||
togglePaletteLessText: "کمتر" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,14 @@ |
||||
// Spectrum Colorpicker
|
||||
// Finnish (fi) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["fi"] = { |
||||
cancelText: "Kumoa", |
||||
chooseText: "Valitse" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// French (fr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["fr"] = { |
||||
cancelText: "Annuler", |
||||
chooseText: "Valider", |
||||
clearText: "Effacer couleur sélectionnée", |
||||
noColorSelectedText: "Aucune couleur sélectionnée", |
||||
togglePaletteMoreText: "Plus", |
||||
togglePaletteLessText: "Moins" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Greek (gr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["gr"] = { |
||||
cancelText: "Ακύρωση", |
||||
chooseText: "Επιλογή", |
||||
clearText: "Καθαρισμός επιλεγμένου χρώματος", |
||||
noColorSelectedText: "Δεν έχει επιλεχθεί κάποιο χρώμα", |
||||
togglePaletteMoreText: "Περισσότερα", |
||||
togglePaletteLessText: "Λιγότερα" |
||||
}; |
||||
|
||||
$.extend($.gr.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Hebrew (he) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["he"] = { |
||||
cancelText: "בטל בחירה", |
||||
chooseText: "בחר צבע", |
||||
clearText: "אפס בחירה", |
||||
noColorSelectedText: "לא נבחר צבע", |
||||
togglePaletteMoreText: "עוד צבעים", |
||||
togglePaletteLessText: "פחות צבעים" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Croatian (hr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["hr"] = { |
||||
cancelText: "Odustani", |
||||
chooseText: "Odaberi", |
||||
clearText: "Poništi odabir", |
||||
noColorSelectedText: "Niti jedna boja nije odabrana", |
||||
togglePaletteMoreText: "Više", |
||||
togglePaletteLessText: "Manje" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Indonesia/Bahasa Indonesia (id) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["id"] = { |
||||
cancelText: "Batal", |
||||
chooseText: "Pilih", |
||||
clearText: "Hapus Pilihan Warna", |
||||
noColorSelectedText: "Warna Tidak Dipilih", |
||||
togglePaletteMoreText: "tambah", |
||||
togglePaletteLessText: "kurangi" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,16 @@ |
||||
// Spectrum Colorpicker
|
||||
// Italian (it) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["it"] = { |
||||
cancelText: "annulla", |
||||
chooseText: "scegli", |
||||
clearText: "Annulla selezione colore", |
||||
noColorSelectedText: "Nessun colore selezionato" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,14 @@ |
||||
// Spectrum Colorpicker
|
||||
// Japanese (ja) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["ja"] = { |
||||
cancelText: "中止", |
||||
chooseText: "選択" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Korean (ko) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["ko"] = { |
||||
cancelText: "취소", |
||||
chooseText: "선택", |
||||
clearText: "선택 초기화", |
||||
noColorSelectedText: "선택된 색상 없음", |
||||
togglePaletteMoreText: "더보기", |
||||
togglePaletteLessText: "줄이기" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Lithuanian (lt) localization
|
||||
// https://github.com/liesislukas
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["lt"] = { |
||||
cancelText: "Atšaukti", |
||||
chooseText: "Pasirinkti", |
||||
clearText: "Išvalyti pasirinkimą", |
||||
noColorSelectedText: "Spalva nepasirinkta", |
||||
togglePaletteMoreText: "Daugiau", |
||||
togglePaletteLessText: "Mažiau" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,17 @@ |
||||
// Spectrum Colorpicker
|
||||
// Dutch (nl-nl) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["nl-nl"] = { |
||||
cancelText: "Annuleer", |
||||
chooseText: "Kies", |
||||
clearText: "Wis kleur selectie", |
||||
togglePaletteMoreText: 'Meer', |
||||
togglePaletteLessText: 'Minder' |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Polish (pl) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["pl"] = { |
||||
cancelText: "Anuluj", |
||||
chooseText: "Wybierz", |
||||
clearText: "Usuń wybór koloru", |
||||
noColorSelectedText: "Nie wybrano koloru", |
||||
togglePaletteMoreText: "Więcej", |
||||
togglePaletteLessText: "Mniej" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Brazilian (pt-br) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["pt-br"] = { |
||||
cancelText: "Cancelar", |
||||
chooseText: "Escolher", |
||||
clearText: "Limpar cor selecionada", |
||||
noColorSelectedText: "Nenhuma cor selecionada", |
||||
togglePaletteMoreText: "Mais", |
||||
togglePaletteLessText: "Menos" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Russian (ru) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["ru"] = { |
||||
cancelText: "Отмена", |
||||
chooseText: "Выбрать", |
||||
clearText: "Сбросить", |
||||
noColorSelectedText: "Цвет не выбран", |
||||
togglePaletteMoreText: "Ещё", |
||||
togglePaletteLessText: "Скрыть" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,14 @@ |
||||
// Spectrum Colorpicker
|
||||
// Swedish (sv) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["sv"] = { |
||||
cancelText: "Avbryt", |
||||
chooseText: "Välj" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,14 @@ |
||||
// Spectrum Colorpicker
|
||||
// Turkish (tr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["tr"] = { |
||||
cancelText: "iptal", |
||||
chooseText: "tamam" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Simplified Chinese (zh-cn) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["zh-cn"] = { |
||||
cancelText: "取消", |
||||
chooseText: "选择", |
||||
clearText: "清除", |
||||
togglePaletteMoreText: "更多选项", |
||||
togglePaletteLessText: "隐藏", |
||||
noColorSelectedText: "尚未选择任何颜色" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,18 @@ |
||||
// Spectrum Colorpicker
|
||||
// Traditional Chinese (zh-tw) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) { |
||||
|
||||
var localization = $.spectrum.localization["zh-tw"] = { |
||||
cancelText: "取消", |
||||
chooseText: "選擇", |
||||
clearText: "清除", |
||||
togglePaletteMoreText: "更多選項", |
||||
togglePaletteLessText: "隱藏", |
||||
noColorSelectedText: "尚未選擇任何顏色" |
||||
}; |
||||
|
||||
$.extend($.fn.spectrum.defaults, localization); |
||||
|
||||
})( jQuery ); |
||||
@ -0,0 +1,507 @@ |
||||
/*** |
||||
Spectrum Colorpicker v1.8.1 |
||||
https://github.com/bgrins/spectrum |
||||
Author: Brian Grinstead |
||||
License: MIT |
||||
***/ |
||||
|
||||
.sp-container { |
||||
position:absolute; |
||||
top:0; |
||||
left:0; |
||||
display:inline-block; |
||||
*display: inline; |
||||
*zoom: 1; |
||||
/* https://github.com/bgrins/spectrum/issues/40 */ |
||||
z-index: 9999994; |
||||
overflow: hidden; |
||||
} |
||||
.sp-container.sp-flat { |
||||
position: relative; |
||||
} |
||||
|
||||
/* Fix for * { box-sizing: border-box; } */ |
||||
.sp-container, |
||||
.sp-container * { |
||||
-webkit-box-sizing: content-box; |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ |
||||
.sp-top { |
||||
position:relative; |
||||
width: 100%; |
||||
display:inline-block; |
||||
} |
||||
.sp-top-inner { |
||||
position:absolute; |
||||
top:0; |
||||
left:0; |
||||
bottom:0; |
||||
right:0; |
||||
} |
||||
.sp-color { |
||||
position: absolute; |
||||
top:0; |
||||
left:0; |
||||
bottom:0; |
||||
right:20%; |
||||
} |
||||
.sp-hue { |
||||
position: absolute; |
||||
top:0; |
||||
right:0; |
||||
bottom:0; |
||||
left:84%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.sp-clear-enabled .sp-hue { |
||||
top:33px; |
||||
height: 77.5%; |
||||
} |
||||
|
||||
.sp-fill { |
||||
padding-top: 80%; |
||||
} |
||||
.sp-sat, .sp-val { |
||||
position: absolute; |
||||
top:0; |
||||
left:0; |
||||
right:0; |
||||
bottom:0; |
||||
} |
||||
|
||||
.sp-alpha-enabled .sp-top { |
||||
margin-bottom: 18px; |
||||
} |
||||
.sp-alpha-enabled .sp-alpha { |
||||
display: block; |
||||
} |
||||
.sp-alpha-handle { |
||||
position:absolute; |
||||
top:-4px; |
||||
bottom: -4px; |
||||
width: 6px; |
||||
left: 50%; |
||||
cursor: pointer; |
||||
border: 1px solid black; |
||||
background: white; |
||||
opacity: .8; |
||||
} |
||||
.sp-alpha { |
||||
display: none; |
||||
position: absolute; |
||||
bottom: -14px; |
||||
right: 0; |
||||
left: 0; |
||||
height: 8px; |
||||
} |
||||
.sp-alpha-inner { |
||||
border: solid 1px #333; |
||||
} |
||||
|
||||
.sp-clear { |
||||
display: none; |
||||
} |
||||
|
||||
.sp-clear.sp-clear-display { |
||||
background-position: center; |
||||
} |
||||
|
||||
.sp-clear-enabled .sp-clear { |
||||
display: block; |
||||
position:absolute; |
||||
top:0px; |
||||
right:0; |
||||
bottom:0; |
||||
left:84%; |
||||
height: 28px; |
||||
} |
||||
|
||||
/* Don't allow text selection */ |
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { |
||||
-webkit-user-select:none; |
||||
-moz-user-select: -moz-none; |
||||
-o-user-select:none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container { |
||||
display: none; |
||||
} |
||||
.sp-container.sp-buttons-disabled .sp-button-container { |
||||
display: none; |
||||
} |
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container { |
||||
display: none; |
||||
} |
||||
.sp-palette-only .sp-picker-container { |
||||
display: none; |
||||
} |
||||
.sp-palette-disabled .sp-palette-container { |
||||
display: none; |
||||
} |
||||
|
||||
.sp-initial-disabled .sp-initial { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ |
||||
.sp-sat { |
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); |
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); |
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); |
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; |
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); |
||||
} |
||||
.sp-val { |
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); |
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); |
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); |
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; |
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); |
||||
} |
||||
|
||||
.sp-hue { |
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); |
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
||||
} |
||||
|
||||
/* IE filters do not support multiple color stops. |
||||
Generate 6 divs, line them up, and do two color gradients for each. |
||||
Yes, really. |
||||
*/ |
||||
.sp-1 { |
||||
height:17%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); |
||||
} |
||||
.sp-2 { |
||||
height:16%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); |
||||
} |
||||
.sp-3 { |
||||
height:17%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); |
||||
} |
||||
.sp-4 { |
||||
height:17%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); |
||||
} |
||||
.sp-5 { |
||||
height:16%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); |
||||
} |
||||
.sp-6 { |
||||
height:17%; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); |
||||
} |
||||
|
||||
.sp-hidden { |
||||
display: none !important; |
||||
} |
||||
|
||||
/* Clearfix hack */ |
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; } |
||||
.sp-cf:after { clear: both; } |
||||
.sp-cf { *zoom: 1; } |
||||
|
||||
/* Mobile devices, make hue slider bigger so it is easier to slide */ |
||||
@media (max-device-width: 480px) { |
||||
.sp-color { right: 40%; } |
||||
.sp-hue { left: 63%; } |
||||
.sp-fill { padding-top: 60%; } |
||||
} |
||||
.sp-dragger { |
||||
border-radius: 5px; |
||||
height: 5px; |
||||
width: 5px; |
||||
border: 1px solid #fff; |
||||
background: #000; |
||||
cursor: pointer; |
||||
position:absolute; |
||||
top:0; |
||||
left: 0; |
||||
} |
||||
.sp-slider { |
||||
position: absolute; |
||||
top:0; |
||||
cursor:pointer; |
||||
height: 3px; |
||||
left: -1px; |
||||
right: -1px; |
||||
border: 1px solid #000; |
||||
background: white; |
||||
opacity: .8; |
||||
} |
||||
|
||||
/* |
||||
Theme authors: |
||||
Here are the basic themeable display options (colors, fonts, global widths). |
||||
See http://bgrins.github.io/spectrum/themes/ for instructions. |
||||
*/ |
||||
|
||||
.sp-container { |
||||
border-radius: 0; |
||||
background-color: #ECECEC; |
||||
border: solid 1px #f0c49B; |
||||
padding: 0; |
||||
} |
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { |
||||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
-ms-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
.sp-top { |
||||
margin-bottom: 3px; |
||||
} |
||||
.sp-color, .sp-hue, .sp-clear { |
||||
border: solid 1px #666; |
||||
} |
||||
|
||||
/* Input */ |
||||
.sp-input-container { |
||||
float:right; |
||||
width: 100px; |
||||
margin-bottom: 4px; |
||||
} |
||||
.sp-initial-disabled .sp-input-container { |
||||
width: 100%; |
||||
} |
||||
.sp-input { |
||||
font-size: 12px !important; |
||||
border: 1px inset; |
||||
padding: 4px 5px; |
||||
margin: 0; |
||||
width: 100%; |
||||
background:transparent; |
||||
border-radius: 3px; |
||||
color: #222; |
||||
} |
||||
.sp-input:focus { |
||||
border: 1px solid orange; |
||||
} |
||||
.sp-input.sp-validation-error { |
||||
border: 1px solid red; |
||||
background: #fdd; |
||||
} |
||||
.sp-picker-container , .sp-palette-container { |
||||
float:left; |
||||
position: relative; |
||||
padding: 10px; |
||||
padding-bottom: 300px; |
||||
margin-bottom: -290px; |
||||
} |
||||
.sp-picker-container { |
||||
width: 172px; |
||||
border-left: solid 1px #fff; |
||||
} |
||||
|
||||
/* Palettes */ |
||||
.sp-palette-container { |
||||
border-right: solid 1px #ccc; |
||||
} |
||||
|
||||
.sp-palette-only .sp-palette-container { |
||||
border: 0; |
||||
} |
||||
|
||||
.sp-palette .sp-thumb-el { |
||||
display: block; |
||||
position:relative; |
||||
float:left; |
||||
width: 24px; |
||||
height: 15px; |
||||
margin: 3px; |
||||
cursor: pointer; |
||||
border:solid 2px transparent; |
||||
} |
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { |
||||
border-color: orange; |
||||
} |
||||
.sp-thumb-el { |
||||
position:relative; |
||||
} |
||||
|
||||
/* Initial */ |
||||
.sp-initial { |
||||
float: left; |
||||
border: solid 1px #333; |
||||
} |
||||
.sp-initial span { |
||||
width: 30px; |
||||
height: 25px; |
||||
border:none; |
||||
display:block; |
||||
float:left; |
||||
margin:0; |
||||
} |
||||
|
||||
.sp-initial .sp-clear-display { |
||||
background-position: center; |
||||
} |
||||
|
||||
/* Buttons */ |
||||
.sp-palette-button-container, |
||||
.sp-button-container { |
||||
float: right; |
||||
} |
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */ |
||||
.sp-replacer { |
||||
margin:0; |
||||
overflow:hidden; |
||||
cursor:pointer; |
||||
padding: 4px; |
||||
display:inline-block; |
||||
*zoom: 1; |
||||
*display: inline; |
||||
border: solid 1px #91765d; |
||||
background: #eee; |
||||
color: #333; |
||||
vertical-align: middle; |
||||
} |
||||
.sp-replacer:hover, .sp-replacer.sp-active { |
||||
border-color: #F0C49B; |
||||
color: #111; |
||||
} |
||||
.sp-replacer.sp-disabled { |
||||
cursor:default; |
||||
border-color: silver; |
||||
color: silver; |
||||
} |
||||
.sp-dd { |
||||
padding: 2px 0; |
||||
height: 16px; |
||||
line-height: 16px; |
||||
float:left; |
||||
font-size:10px; |
||||
} |
||||
.sp-preview { |
||||
position:relative; |
||||
width:25px; |
||||
height: 20px; |
||||
border: solid 1px #222; |
||||
margin-right: 5px; |
||||
float:left; |
||||
z-index: 0; |
||||
} |
||||
|
||||
.sp-palette { |
||||
*width: 220px; |
||||
max-width: 220px; |
||||
} |
||||
.sp-palette .sp-thumb-el { |
||||
width:16px; |
||||
height: 16px; |
||||
margin:2px 1px; |
||||
border: solid 1px #d0d0d0; |
||||
} |
||||
|
||||
.sp-container { |
||||
padding-bottom:0; |
||||
} |
||||
|
||||
|
||||
/* Buttons: http://hellohappy.org/css3-buttons/ */ |
||||
.sp-container button { |
||||
background-color: #eeeeee; |
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); |
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); |
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); |
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc); |
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc); |
||||
border: 1px solid #ccc; |
||||
border-bottom: 1px solid #bbb; |
||||
border-radius: 3px; |
||||
color: #333; |
||||
font-size: 14px; |
||||
line-height: 1; |
||||
padding: 5px 4px; |
||||
text-align: center; |
||||
text-shadow: 0 1px 0 #eee; |
||||
vertical-align: middle; |
||||
} |
||||
.sp-container button:hover { |
||||
background-color: #dddddd; |
||||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); |
||||
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); |
||||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); |
||||
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); |
||||
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); |
||||
border: 1px solid #bbb; |
||||
border-bottom: 1px solid #999; |
||||
cursor: pointer; |
||||
text-shadow: 0 1px 0 #ddd; |
||||
} |
||||
.sp-container button:active { |
||||
border: 1px solid #aaa; |
||||
border-bottom: 1px solid #888; |
||||
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
||||
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
||||
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
||||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
||||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
||||
} |
||||
.sp-cancel { |
||||
font-size: 11px; |
||||
color: #d93f3f !important; |
||||
margin:0; |
||||
padding:2px; |
||||
margin-right: 5px; |
||||
vertical-align: middle; |
||||
text-decoration:none; |
||||
|
||||
} |
||||
.sp-cancel:hover { |
||||
color: #d93f3f !important; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active { |
||||
border-color: #000; |
||||
} |
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el { |
||||
position:relative; |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); |
||||
} |
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { |
||||
display:block; |
||||
position:absolute; |
||||
top:0;left:0;bottom:0;right:0; |
||||
} |
||||
|
||||
.sp-palette .sp-thumb-inner { |
||||
background-position: 50% 50%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); |
||||
} |
||||
|
||||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); |
||||
} |
||||
|
||||
.sp-clear-display { |
||||
background-repeat:no-repeat; |
||||
background-position: center; |
||||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==); |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue