auth_fc: update FC connect button and add hover effect (#52612)

This commit is contained in:
Serghei Mihai 2021-04-01 11:10:30 +02:00
parent 931e5b2a61
commit 98c1ffc220
5 changed files with 132 additions and 235 deletions

View File

@ -1,39 +1,42 @@
div#fc-registration-user-info, div#fc-button-wrapper, div#fc-explanation-text {
margin: 20px 0px 20px 0px;
text-align: center;
width: 100%;
}
div#fc-explanation-text p:first-child {
margin-top: 8px;
}
div#fc-button-wrapper {
margin-top: 20px;
}
div#fc-button {
display: inline-block;
box-sizing: border-box;
width: 320px;
max-width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 1px rgba(0, 0, 0, 0.05) inset, -1px 0px rgba(0, 0, 0, 0.3) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
transition: background 0.3s linear;
}
div#fc-button-wrapper.small div#fc-button {
width: 180px;
}
div#fc-button:hover {
background: none repeat scroll 0% 0% rgba(3, 78, 162, 0.2);
}
div#fc-button:active {
box-shadow: 0px 1px rgba(0, 0, 0, 0.6) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.3) inset, 0px -1px rgba(0, 0, 0, 0.05) inset;
}
div#fc-button a.button {
text-decoration: none;
width: 230px;
height: 60px;
background-image: url('../img/FC-connect-button.svg');
display: block;
}
div#fc-button a.button div {
width: 100%;
div#fc-button a.button:hover {
background: url('../img/FC-connect-button-hover.svg');
}
div#fc-button-wrapper.small div#fc-button a.button div img {

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -7,9 +7,6 @@
<div id="fc-button">
<a href="{{ login_url }}"
class="button connexion{% if popup %} js-fc-popup{% endif %}">
<div>
<img alt="{% trans 'Log in with FranceConnect' %}" src="{% static "authentic2_auth_fc/img/FC-connect-button.svg" %}">
</div>
</a>
</div>
</div>

View File

@ -15,9 +15,6 @@
<div id="fc-button">
<a href="{{ registration_url }}"
class="button connexion{% if popup %} js-fc-popup{% endif %}">
<div>
<img alt="{% trans 'Create your account with FranceConnect' %}" src="{% static 'authentic2_auth_fc/img/FC-register-button.svg' %}">
</div>
</a>
</div>
</div>