Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity
Koha/koha-tmpl/opac-tmpl/prog/en/css/persona-buttons.css
Chris Cormack 493dcede48 Bug 9587 : Mozilla Persona login 
Working on Mozilla Persona support (browser id)

    This will let a user log into Koha using browser id, if their email
    address used matches the email address inside Koha.

    Once an assertion is received, we simply need to find the user that
    matches that email address, and create a session for them.

    opac/svc/login handles this part.

    The nice thing about it is, the user doesn't have to do anything, like
    linking their account. As long as the email address they are using to
    identify themselves in browserid is the same as the one in Koha it
    will just work.

    This is covered by a systempreference, to allow people to do it, and
    is of course totally opt in, it works alongside normal Koha (or any
    other method) of login. So only those choosing to use it, need use it

Test Plan

1/ Make sure OPACBaseURL is set correctly
2/ Switch on the Persona syspref
3/ Make a borrower (or edit one) to have the email you plan to use as
the primary email
4/ Click sign in with email, make or use a persona account
5/ Logout
6/ Check you can still login and logout the normal way

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>

Comment: Works great.
It's not browser dependent, but tested with chrome, firefox, opera and safari.
Old an new login system works.
Minor errors, addresed in follow-up.

Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
2013-02-24 10:15:35 -05:00

228 lines
7.6 KiB
CSS
Raw Blame History

/* Link body */
.persona-button{
color: #fff;
display: inline-block;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.1;
overflow: hidden;
position: relative;
text-decoration: none;
text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
background: #297dc3;
background: -moz-linear-gradient(top, #43a6e2, #287cc2);
background: -ms-linear-gradient(top, #43a6e2, #287cc2);
background: -o-linear-gradient(top, #43a6e2, #287cc2);
background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
background: linear-gradient(top, #43a6e2, #287cc2);
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.persona-button:hover{
background: #21669f;
background: -moz-linear-gradient(top, #3788b9, #21669f);
background: -ms-linear-gradient(top, #3788b9, #21669f);
background: -o-linear-gradient(top, #3788b9, #21669f);
background: -webkit-linear-gradient(top, #3788b9, #21669f);
background: linear-gradient(top, #3788b9, #21669f);
}
.persona-button:active, .persona-button:focus{
top: 1px;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.persona-button span{
display: inline-block;
padding: 5px 10px 5px 40px;
}
/* Icon */
.persona-button span:after{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
content: '';
display: block;
width: 31px;
position: absolute;
bottom: 0;
left: -3px;
top: 0;
z-index: 10;
}
/* Icon background */
.persona-button span:before{
content: '';
display: block;
height: 100%;
width: 20px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
z-index: 1;
background: #42a9dd;
background: -moz-linear-gradient(top, #50b8e8, #3095ce);
background: -ms-linear-gradient(top, #50b8e8, #3095ce);
background: -o-linear-gradient(top, #50b8e8, #3095ce);
background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
background: linear-gradient(top, #50b8e8, #3095ce);
-moz-border-radius: 3px 0 0 3px;
-ms-border-radius: 3px 0 0 3px;
-o-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* Triangle */
.persona-button:before{
background: #42a9dd;
content: '';
display: block;
height: 26px;
width: 26px;
position: absolute;
left: 2px;
top: 50%;
margin-top: -13px;
z-index: 0;
background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */
-moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}
/* ========================================================
* Dark button
* ===================================================== */
.persona-button.dark{
background: #3c3c3c;
background: -moz-linear-gradient(top, #606060, #3c3c3c);
background: -ms-linear-gradient(top, #606060, #3c3c3c);
background: -o-linear-gradient(top, #606060, #3c3c3c);
background: -webkit-linear-gradient(top, #606060, #3c3c3c);
background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
background: #2d2d2d;
background: -moz-linear-gradient(top, #484848, #2d2d2d);
background: -ms-linear-gradient(top, #484848, #2d2d2d);
background: -o-linear-gradient(top, #484848, #2d2d2d);
background: -webkit-linear-gradient(top, #484848, #2d2d2d);
background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
background: #d34f2d;
background: -moz-linear-gradient(top, #ebac45, #d34f2d);
background: -ms-linear-gradient(top, #ebac45, #d34f2d);
background: -o-linear-gradient(top, #ebac45, #d34f2d);
background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
background: #d34f2d;
background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}
/* ========================================================
* Orange button
* ===================================================== */
.persona-button.orange{
background: #ee731a;
background: -moz-linear-gradient(top, #ee731a, #d03116);
background: -ms-linear-gradient(top, #ee731a, #d03116);
background: -o-linear-gradient(top, #ee731a, #d03116);
background: -webkit-linear-gradient(top, #ee731a, #d03116);
background: linear-gradient(top, #ee731a, #d03116);
}
.persona-button.orange:hover{
background: #cb6216;
background: -moz-linear-gradient(top, #cb6216, #b12a13);
background: -ms-linear-gradient(top, #cb6216, #b12a13);
background: -o-linear-gradient(top, #cb6216, #b12a13);
background: -webkit-linear-gradient(top, #cb6216, #b12a13);
background: linear-gradient(top, #cb6216, #b12a13);
}
.persona-button.orange span:before{ /* Icon BG */
background: #e84a21;
background: -moz-linear-gradient(top, #f7ad27, #e84a21);
background: -ms-linear-gradient(top, #f7ad27, #e84a21);
background: -o-linear-gradient(top, #f7ad27, #e84a21);
background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
background: linear-gradient(top, #f7ad27, #e84a21);
}
.persona-button.orange:before{ /* Triangle */
background: #e84a21;
background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
}
View git blame Copy permalink