Bug 12464 - Bootstrap XSLT view no longer displaying 505 correctly formatted
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / css / persona-buttons.css
1 /* Link body */
2 a.persona-button {
3   color : #FFF;
4 }
5
6 .persona-button{
7   color: #fff;
8   display: inline-block;
9   font-size: 14px;
10   font-family: Helvetica, Arial, sans-serif;
11   font-weight: bold;
12   line-height: 1.1;
13   overflow: hidden;
14   position: relative;
15   text-decoration: none;
16   text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
17
18   background: #297dc3;
19   background: -moz-linear-gradient(top, #43a6e2, #287cc2);
20   background: -ms-linear-gradient(top, #43a6e2, #287cc2);
21   background: -o-linear-gradient(top, #43a6e2, #287cc2);
22   background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
23   background: linear-gradient(to bottom, #43a6e2 0%,#287cc2 100%); /* W3C */
24
25   -moz-border-radius:   3px;
26   -ms-border-radius:     3px;
27   -o-border-radius:     3px;
28   -webkit-border-radius:   3px;
29   border-radius:       3px;
30
31   -moz-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
32   -ms-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
33   -o-box-shadow:     0 1px 0 rgba(0,0,0,0.2);
34   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
35   box-shadow:     0 1px 0 rgba(0,0,0,0.2);
36 }
37
38 .persona-button:hover{
39   background: #21669f;
40   background: -moz-linear-gradient(top, #3788b9, #21669f);
41   background: -ms-linear-gradient(top, #3788b9, #21669f);
42   background: -o-linear-gradient(top, #3788b9, #21669f);
43   background: -webkit-linear-gradient(top, #3788b9, #21669f);
44   background: linear-gradient(to bottom, #3788b9 0%,#21669f 100%); /* W3C */
45 }
46
47 .persona-button:active, .persona-button:focus{
48   top: 1px;
49   -moz-box-shadow:   none;
50   -ms-box-shadow:   none;
51   -o-box-shadow:     none;
52   -webkit-box-shadow: none;
53   box-shadow:     none;
54 }
55
56 .persona-button span{
57   display: inline-block;
58   padding: 5px 10px 5px 40px;
59 }
60
61 /* Icon */
62 .persona-button span:after{
63   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
64   content: '';
65   display: block;
66   width: 31px;
67
68   position: absolute;
69   bottom: 0;
70   left: -3px;
71   top: 0;
72   z-index: 10;
73 }
74
75 /*  Icon background */
76 .persona-button span:before{
77   content: '';
78   display: block;
79   height: 100%;
80   width: 20px;
81
82   position: absolute;
83   bottom: 0;
84   left: 0;
85   top: 0;
86   z-index: 1;
87
88   background: #42a9dd;
89   background: -moz-linear-gradient(top, #50b8e8, #3095ce);
90   background: -ms-linear-gradient(top, #50b8e8, #3095ce);
91   background: -o-linear-gradient(top, #50b8e8, #3095ce);
92   background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
93   background: linear-gradient(to bottom, #50b8e8 0%,#3095ce 100%); /* W3C */
94
95   -moz-border-radius:   3px 0 0 3px;
96   -ms-border-radius:     3px 0 0 3px;
97   -o-border-radius:     3px 0 0 3px;
98   -webkit-border-radius:   3px 0 0 3px;
99   border-radius:       3px 0 0 3px;
100 }
101
102 /* Triangle */
103 .persona-button:before{
104   background: #42a9dd;
105   content: '';
106   display: block;
107   height: 26px;
108   width: 26px;
109
110   position: absolute;
111   left: 2px;
112   top: 50%;
113   margin-top: -13px;
114   z-index: 0;
115
116   background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
117   background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
118   background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
119   background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
120   background: linear-gradient(to bottom, #50b8e8 0%,#3095ce 100%); /* W3C */
121
122   -moz-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
123   -ms-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
124   -o-box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
125   -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
126   box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
127
128   -moz-transform:   rotate(45deg);
129   -ms-transform:     rotate(45deg);
130   -o-transform:     rotate(45deg);
131   -webkit-transform:   rotate(45deg);
132   transform:       rotate(45deg);
133 }
134
135 /* Inset shadow (required here because the icon background clips it when on the `a` element) */
136 .persona-button:after{
137   content: '';
138   display: block;
139   height: 100%;
140   width: 100%;
141
142   position: absolute;
143   left: 0;
144   top: 0;
145   bottom: 0;
146   right: 0;
147   z-index: 10;
148
149   -moz-border-radius:   3px;
150   -ms-border-radius:     3px;
151   -o-border-radius:     3px;
152   -webkit-border-radius:   3px;
153   border-radius:       3px;
154
155   -moz-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
156   -ms-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
157   -o-box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
158   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
159   box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
160 }
161
162 /* ========================================================
163  *    Dark button
164  * ===================================================== */
165 .persona-button.dark{
166   background: #3c3c3c;
167   background: -moz-linear-gradient(top, #606060, #3c3c3c);
168   background: -ms-linear-gradient(top, #606060, #3c3c3c);
169   background: -o-linear-gradient(top, #606060, #3c3c3c);
170   background: -webkit-linear-gradient(top, #606060, #3c3c3c);
171   background: linear-gradient(top, #606060, #3c3c3c);
172 }
173 .persona-button.dark:hover{
174   background: #2d2d2d;
175   background: -moz-linear-gradient(top, #484848, #2d2d2d);
176   background: -ms-linear-gradient(top, #484848, #2d2d2d);
177   background: -o-linear-gradient(top, #484848, #2d2d2d);
178   background: -webkit-linear-gradient(top, #484848, #2d2d2d);
179   background: linear-gradient(top, #484848, #2d2d2d);
180 }
181 .persona-button.dark span:before{ /* Icon BG */
182   background: #d34f2d;
183   background: -moz-linear-gradient(top, #ebac45, #d34f2d);
184   background: -ms-linear-gradient(top, #ebac45, #d34f2d);
185   background: -o-linear-gradient(top, #ebac45, #d34f2d);
186   background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
187   background: linear-gradient(top, #ebac45, #d34f2d);
188 }
189 .persona-button.dark:before{ /* Triangle */
190   background: #d34f2d;
191   background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
192   background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
193   background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
194   background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
195   background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
196 }
197
198 /* ========================================================
199  *    Orange button
200  * ===================================================== */
201 .persona-button.orange{
202   background: #ee731a;
203   background: -moz-linear-gradient(top, #ee731a, #d03116);
204   background: -ms-linear-gradient(top, #ee731a, #d03116);
205   background: -o-linear-gradient(top, #ee731a, #d03116);
206   background: -webkit-linear-gradient(top, #ee731a, #d03116);
207   background: linear-gradient(top, #ee731a, #d03116);
208 }
209 .persona-button.orange:hover{
210   background: #cb6216;
211   background: -moz-linear-gradient(top, #cb6216, #b12a13);
212   background: -ms-linear-gradient(top, #cb6216, #b12a13);
213   background: -o-linear-gradient(top, #cb6216, #b12a13);
214   background: -webkit-linear-gradient(top, #cb6216, #b12a13);
215   background: linear-gradient(top, #cb6216, #b12a13);
216 }
217 .persona-button.orange span:before{ /* Icon BG */
218   background: #e84a21;
219   background: -moz-linear-gradient(top, #f7ad27, #e84a21);
220   background: -ms-linear-gradient(top, #f7ad27, #e84a21);
221   background: -o-linear-gradient(top, #f7ad27, #e84a21);
222   background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
223   background: linear-gradient(top, #f7ad27, #e84a21);
224 }
225 .persona-button.orange:before{ /* Triangle */
226   background: #e84a21;
227   background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
228   background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
229   background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
230   background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
231   background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
232 }