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 }