View | Details | Raw Unified | Return to bug 9704
Collapse All | Expand All

(-)a/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css (+228 lines)
Line 0 Link Here
1
/* Link body */
2
.persona-button{
3
  color: #fff;
4
  display: inline-block;
5
  font-size: 14px;
6
  font-family: Helvetica, Arial, sans-serif;
7
  font-weight: bold;
8
  line-height: 1.1;
9
  overflow: hidden;
10
  position: relative;
11
  text-decoration: none;
12
  text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
13
14
  background: #297dc3;
15
  background: -moz-linear-gradient(top, #43a6e2, #287cc2);
16
  background: -ms-linear-gradient(top, #43a6e2, #287cc2);
17
  background: -o-linear-gradient(top, #43a6e2, #287cc2);
18
  background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
19
  background: linear-gradient(top, #43a6e2, #287cc2);
20
21
  -moz-border-radius:   3px;
22
  -ms-border-radius:     3px;
23
  -o-border-radius:     3px;
24
  -webkit-border-radius:   3px;
25
  border-radius:       3px;
26
27
  -moz-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
28
  -ms-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
29
  -o-box-shadow:     0 1px 0 rgba(0,0,0,0.2);
30
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
31
  box-shadow:     0 1px 0 rgba(0,0,0,0.2);
32
}
33
34
.persona-button:hover{
35
  background: #21669f;
36
  background: -moz-linear-gradient(top, #3788b9, #21669f);
37
  background: -ms-linear-gradient(top, #3788b9, #21669f);
38
  background: -o-linear-gradient(top, #3788b9, #21669f);
39
  background: -webkit-linear-gradient(top, #3788b9, #21669f);
40
  background: linear-gradient(top, #3788b9, #21669f);
41
}
42
43
.persona-button:active, .persona-button:focus{
44
  top: 1px;
45
  -moz-box-shadow:   none;
46
  -ms-box-shadow:   none;
47
  -o-box-shadow:     none;
48
  -webkit-box-shadow: none;
49
  box-shadow:     none;
50
}
51
52
.persona-button span{
53
  display: inline-block;
54
  padding: 5px 10px 5px 40px;
55
}
56
57
/* Icon */
58
.persona-button span:after{
59
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
60
  content: '';
61
  display: block;
62
  width: 31px;
63
64
  position: absolute;
65
  bottom: 0;
66
  left: -3px;
67
  top: 0;
68
  z-index: 10;
69
}
70
71
/*  Icon background */
72
.persona-button span:before{
73
  content: '';
74
  display: block;
75
  height: 100%;
76
  width: 20px;
77
78
  position: absolute;
79
  bottom: 0;
80
  left: 0;
81
  top: 0;
82
  z-index: 1;
83
84
  background: #42a9dd;
85
  background: -moz-linear-gradient(top, #50b8e8, #3095ce);
86
  background: -ms-linear-gradient(top, #50b8e8, #3095ce);
87
  background: -o-linear-gradient(top, #50b8e8, #3095ce);
88
  background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
89
  background: linear-gradient(top, #50b8e8, #3095ce);
90
91
  -moz-border-radius:   3px 0 0 3px;
92
  -ms-border-radius:     3px 0 0 3px;
93
  -o-border-radius:     3px 0 0 3px;
94
  -webkit-border-radius:   3px 0 0 3px;
95
  border-radius:       3px 0 0 3px;
96
}
97
98
/* Triangle */
99
.persona-button:before{
100
  background: #42a9dd;
101
  content: '';
102
  display: block;
103
  height: 26px;
104
  width: 26px;
105
106
  position: absolute;
107
  left: 2px;
108
  top: 50%;
109
  margin-top: -13px;
110
  z-index: 0;
111
112
  background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
113
  background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
114
  background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
115
  background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
116
  background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */
117
118
  -moz-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
119
  -ms-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
120
  -o-box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
121
  -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
122
  box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
123
124
  -moz-transform:   rotate(45deg);
125
  -ms-transform:     rotate(45deg);
126
  -o-transform:     rotate(45deg);
127
  -webkit-transform:   rotate(45deg);
128
  transform:       rotate(45deg);
129
}
130
131
/* Inset shadow (required here because the icon background clips it when on the `a` element) */
132
.persona-button:after{
133
  content: '';
134
  display: block;
135
  height: 100%;
136
  width: 100%;
137
138
  position: absolute;
139
  left: 0;
140
  top: 0;
141
  bottom: 0;
142
  right: 0;
143
  z-index: 10;
144
145
  -moz-border-radius:   3px;
146
  -ms-border-radius:     3px;
147
  -o-border-radius:     3px;
148
  -webkit-border-radius:   3px;
149
  border-radius:       3px;
150
151
  -moz-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
152
  -ms-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
153
  -o-box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
154
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
155
  box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
156
}
157
158
/* ========================================================
159
 *    Dark button
160
 * ===================================================== */
161
.persona-button.dark{
162
  background: #3c3c3c;
163
  background: -moz-linear-gradient(top, #606060, #3c3c3c);
164
  background: -ms-linear-gradient(top, #606060, #3c3c3c);
165
  background: -o-linear-gradient(top, #606060, #3c3c3c);
166
  background: -webkit-linear-gradient(top, #606060, #3c3c3c);
167
  background: linear-gradient(top, #606060, #3c3c3c);
168
}
169
.persona-button.dark:hover{
170
  background: #2d2d2d;
171
  background: -moz-linear-gradient(top, #484848, #2d2d2d);
172
  background: -ms-linear-gradient(top, #484848, #2d2d2d);
173
  background: -o-linear-gradient(top, #484848, #2d2d2d);
174
  background: -webkit-linear-gradient(top, #484848, #2d2d2d);
175
  background: linear-gradient(top, #484848, #2d2d2d);
176
}
177
.persona-button.dark span:before{ /* Icon BG */
178
  background: #d34f2d;
179
  background: -moz-linear-gradient(top, #ebac45, #d34f2d);
180
  background: -ms-linear-gradient(top, #ebac45, #d34f2d);
181
  background: -o-linear-gradient(top, #ebac45, #d34f2d);
182
  background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
183
  background: linear-gradient(top, #ebac45, #d34f2d);
184
}
185
.persona-button.dark:before{ /* Triangle */
186
  background: #d34f2d;
187
  background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
188
  background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
189
  background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
190
  background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
191
  background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
192
}
193
194
/* ========================================================
195
 *    Orange button
196
 * ===================================================== */
197
.persona-button.orange{
198
  background: #ee731a;
199
  background: -moz-linear-gradient(top, #ee731a, #d03116);
200
  background: -ms-linear-gradient(top, #ee731a, #d03116);
201
  background: -o-linear-gradient(top, #ee731a, #d03116);
202
  background: -webkit-linear-gradient(top, #ee731a, #d03116);
203
  background: linear-gradient(top, #ee731a, #d03116);
204
}
205
.persona-button.orange:hover{
206
  background: #cb6216;
207
  background: -moz-linear-gradient(top, #cb6216, #b12a13);
208
  background: -ms-linear-gradient(top, #cb6216, #b12a13);
209
  background: -o-linear-gradient(top, #cb6216, #b12a13);
210
  background: -webkit-linear-gradient(top, #cb6216, #b12a13);
211
  background: linear-gradient(top, #cb6216, #b12a13);
212
}
213
.persona-button.orange span:before{ /* Icon BG */
214
  background: #e84a21;
215
  background: -moz-linear-gradient(top, #f7ad27, #e84a21);
216
  background: -ms-linear-gradient(top, #f7ad27, #e84a21);
217
  background: -o-linear-gradient(top, #f7ad27, #e84a21);
218
  background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
219
  background: linear-gradient(top, #f7ad27, #e84a21);
220
}
221
.persona-button.orange:before{ /* Triangle */
222
  background: #e84a21;
223
  background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
224
  background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
225
  background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
226
  background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
227
  background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
228
}
(-)a/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc (+4 lines)
Lines 26-31 Link Here
26
<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="[% themelang %]/css/mobile.css" />
26
<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="[% themelang %]/css/mobile.css" />
27
[% IF ( OPACMobileUserCSS ) %]<style type="text/css" media="screen and (max-width:700px)">[% OPACMobileUserCSS %]</style>[% END %]
27
[% IF ( OPACMobileUserCSS ) %]<style type="text/css" media="screen and (max-width:700px)">[% OPACMobileUserCSS %]</style>[% END %]
28
[% IF ( OPACUserCSS ) %]<style type="text/css">[% OPACUserCSS %]</style>[% END %]
28
[% IF ( OPACUserCSS ) %]<style type="text/css">[% OPACUserCSS %]</style>[% END %]
29
[% IF persona %]
30
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/persona-buttons.css" />
31
[% END %]
32
29
<!-- yui js -->
33
<!-- yui js -->
30
<script type="text/javascript" src="[% yuipath %]/utilities/utilities.js"></script>
34
<script type="text/javascript" src="[% yuipath %]/utilities/utilities.js"></script>
31
<script type="text/javascript" src="[% yuipath %]/container/container-min.js"></script>
35
<script type="text/javascript" src="[% yuipath %]/container/container-min.js"></script>
(-)a/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc (-1 / +40 lines)
Lines 87-91 $(function() { Link Here
87
87
88
<!-- /ADD JQUERY PLUGIN JQTRANSFORM - LIBÉO -->
88
<!-- /ADD JQUERY PLUGIN JQTRANSFORM - LIBÉO -->
89
89
90
[% IF persona %]
91
<script src="https://login.persona.org/include.js"></script>
92
<script type="text/javascript" language="javascript">
93
94
navigator.id.watch({
95
    loggedInUser: [% IF emailaddress && loggedinpersona %]'[% emailaddress %]'[% ELSE %]null[% END %],
96
    onlogin: function (assertion) {
97
        $.post('/cgi-bin/koha/svc/login',
98
        { assertion: assertion },
99
        function (data) {
100
            window.location = '/cgi-bin/koha/opac-user.pl';
101
        }
102
        )
103
        .fail(function() { 
104
            var errstr = _("Could not login, perhaps your Persona email does not match your Koha one");
105
            alert(errstr);
106
        });
107
    },
108
    onlogout: function () {
109
        window.location = '/cgi-bin/koha/opac-main.pl?logout.x=1';
110
    }
111
});
112
113
var signinLink = document.getElementById('browserid');
114
115
if (signinLink) {
116
    signinLink.onclick = function(evt) {
117
        // Requests a signed identity assertion from the user.
118
        navigator.id.request({
119
            siteName: "[% LibraryName | html %]",
120
            returnTo: '/cgi-bin/koha/opac-user.pl',
121
            oncancel: function() { alert('user refuses to share identity.'); }
122
        });
123
    };
124
}
125
126
</script>
127
[% END %]
128
129
90
</body>
130
</body>
91
</html>
131
</html>
92
- 

Return to bug 9704