Verified Commit d7a01908 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Update buttons CSS

parent 83876cc2
......@@ -71,6 +71,28 @@ a {
color: white;
}
.white-button, .blue-button {
display: inline-block;
cursor: pointer;
height: 50px;
text-align: center;
padding-left: 2em;
padding-right: 2em;
font-weight: normal;
line-height: 50px;
}
.blue-button {
background-color: #497ed5;
color: white;
}
.white-button {
background-color: white;
color: #497ed5;
border: 1px solid #497ed5;
}
div#inputs {
background-color: white;
}
......@@ -140,35 +162,6 @@ div.navButtons {
margin-top: 2em;
}
div.navButtons > a, a#save-image, a#tweet-button, button {
display: inline-block;
cursor: pointer;
height: 50px;
line-height: 50px;
text-align: center;
background-color: white;
color: inherit;
font-size: inherit;
border: 1px solid #497ed5;
}
a.nextButton, a#tweet-button {
color: white !important;
background-color: #497ed5 !important;
width: 200px;
}
a#tweet-button {
width: auto;
padding-left: 1em;
padding-right: 1em;
font-weight: normal;
}
a.prevButton {
width: 50px;
}
main {
background-color: #ebf3ff;
min-height: 100%;
......
......@@ -24,7 +24,7 @@
<div id="body">
<div id="inputs">
<div>
<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
<button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
</div>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
......@@ -94,15 +94,15 @@
</label>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<a href="#step2" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step2">
<h2>Remplissez le texte à trou</h2>
<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
<div class="navButtons">
<a href="#step1" class="prevButton">&lsaquo;</a>
<a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<a href="#step1" class="white-button">&lsaquo;</a>
<a href="#step3" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step3">
......@@ -121,8 +121,8 @@
<input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
</div>
<div class="navButtons">
<a href="#step2" class="prevButton">&lsaquo;</a>
<a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<a href="#step2" class="white-button">&lsaquo;</a>
<a href="#step4" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step4">
......@@ -202,23 +202,23 @@
<label for="radio-icon-36" style="background-position: 100% 100%"></label>
</div>
<div class="navButtons">
<a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<a href="#step3" class="white-button">&lsaquo;</a>
<a href="#step5" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step5">
<h2>Signez votre création ! (optionnel)</h2>
<input type="text" id="signature" />
<div class="navButtons">
<a href="#step4" class="prevButton">&lsaquo;</a>
<a href="#step4" class="white-button">&lsaquo;</a>
</div>
</div>
</div>
<main>
<div>
<canvas id="output" width="600" height="413"></canvas>
<a id="tweet-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
<a id="tweet-button" class="blue-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
<a id="save-image" class="white-button" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
</div>
<div id="credits">
<p><strong>Site hébergé par La Quadrature du Net</strong></p>
......
Markdown is supported
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