koha-tmpl/opac-tmpl/prog/en/css/persona-buttons.css

   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 }