git.sur5r.net Git - bacula/bacula/blob - gui/baculum/themes/Baculum-v1/opentip.css

   1 .opentip-container,
   2 .opentip-container * {
   3   -webkit-box-sizing: border-box;
   4   -moz-box-sizing: border-box;
   5   box-sizing: border-box;
   6 }
   7 .opentip-container {
   8   position: absolute;
   9   max-width: 300px;
  10   z-index: 100;
  11   -webkit-transition: -webkit-transform 1s ease-in-out;
  12   -moz-transition: -moz-transform 1s ease-in-out;
  13   -o-transition: -o-transform 1s ease-in-out;
  14   -ms-transition: -ms-transform 1s ease-in-out;
  15   transition: transform 1s ease-in-out;
  16   pointer-events: none;
  17   -webkit-transform: translateX(0) translateY(0);
  18   -moz-transform: translateX(0) translateY(0);
  19   -o-transform: translateX(0) translateY(0);
  20   -ms-transform: translateX(0) translateY(0);
  21   transform: translateX(0) translateY(0);
  22 }
  23 .opentip-container.ot-fixed.ot-hidden.stem-top.stem-center,
  24 .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-center,
  25 .opentip-container.ot-fixed.ot-hiding.stem-top.stem-center {
  26   -webkit-transform: translateY(-5px);
  27   -moz-transform: translateY(-5px);
  28   -o-transform: translateY(-5px);
  29   -ms-transform: translateY(-5px);
  30   transform: translateY(-5px);
  31 }
  32 .opentip-container.ot-fixed.ot-hidden.stem-top.stem-right,
  33 .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-right,
  34 .opentip-container.ot-fixed.ot-hiding.stem-top.stem-right {
  35   -webkit-transform: translateY(-5px) translateX(5px);
  36   -moz-transform: translateY(-5px) translateX(5px);
  37   -o-transform: translateY(-5px) translateX(5px);
  38   -ms-transform: translateY(-5px) translateX(5px);
  39   transform: translateY(-5px) translateX(5px);
  40 }
  41 .opentip-container.ot-fixed.ot-hidden.stem-middle.stem-right,
  42 .opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-right,
  43 .opentip-container.ot-fixed.ot-hiding.stem-middle.stem-right {
  44   -webkit-transform: translateX(5px);
  45   -moz-transform: translateX(5px);
  46   -o-transform: translateX(5px);
  47   -ms-transform: translateX(5px);
  48   transform: translateX(5px);
  49 }
  50 .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-right,
  51 .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-right,
  52 .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-right {
  53   -webkit-transform: translateY(5px) translateX(5px);
  54   -moz-transform: translateY(5px) translateX(5px);
  55   -o-transform: translateY(5px) translateX(5px);
  56   -ms-transform: translateY(5px) translateX(5px);
  57   transform: translateY(5px) translateX(5px);
  58 }
  59 .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-center,
  60 .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-center,
  61 .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-center {
  62   -webkit-transform: translateY(5px);
  63   -moz-transform: translateY(5px);
  64   -o-transform: translateY(5px);
  65   -ms-transform: translateY(5px);
  66   transform: translateY(5px);
  67 }
  68 .opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-left,
  69 .opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-left,
  70 .opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-left {
  71   -webkit-transform: translateY(5px) translateX(-5px);
  72   -moz-transform: translateY(5px) translateX(-5px);
  73   -o-transform: translateY(5px) translateX(-5px);
  74   -ms-transform: translateY(5px) translateX(-5px);
  75   transform: translateY(5px) translateX(-5px);
  76 }
  77 .opentip-container.ot-fixed.ot-hidden.stem-middle.stem-left,
  78 .opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-left,
  79 .opentip-container.ot-fixed.ot-hiding.stem-middle.stem-left {
  80   -webkit-transform: translateX(-5px);
  81   -moz-transform: translateX(-5px);
  82   -o-transform: translateX(-5px);
  83   -ms-transform: translateX(-5px);
  84   transform: translateX(-5px);
  85 }
  86 .opentip-container.ot-fixed.ot-hidden.stem-top.stem-left,
  87 .opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-left,
  88 .opentip-container.ot-fixed.ot-hiding.stem-top.stem-left {
  89   -webkit-transform: translateY(-5px) translateX(-5px);
  90   -moz-transform: translateY(-5px) translateX(-5px);
  91   -o-transform: translateY(-5px) translateX(-5px);
  92   -ms-transform: translateY(-5px) translateX(-5px);
  93   transform: translateY(-5px) translateX(-5px);
  94 }
  95 .opentip-container.ot-fixed .opentip {
  96   pointer-events: auto;
  97 }
  98 .opentip-container.ot-hidden {
  99   display: none;
 100 }
 101 .opentip-container .opentip {
 102   position: relative;
 103   font-size: 13px;
 104   line-height: 120%;
 105   padding: 9px 14px;
 106   color: #4f4b47;
 107   text-shadow: -1px -1px 0px rgba(255,255,255,0.2);
 108 }
 109 .opentip-container .opentip .header {
 110   margin: 0;
 111   padding: 0;
 112 }
 113 .opentip-container .opentip .ot-close {
 114   pointer-events: auto;
 115   display: block;
 116   position: absolute;
 117   top: -12px;
 118   left: 60px;
 119   color: rgba(0,0,0,0.5);
 120   background: rgba(0,0,0,0);
 121   text-decoration: none;
 122 }
 123 .opentip-container .opentip .ot-close span {
 124   display: none;
 125 }
 126 .opentip-container .opentip .ot-loading-indicator {
 127   display: none;
 128 }
 129 .opentip-container.ot-loading .ot-loading-indicator {
 130   width: 30px;
 131   height: 30px;
 132   font-size: 30px;
 133   line-height: 30px;
 134   font-weight: bold;
 135   display: block;
 136 }
 137 .opentip-container.ot-loading .ot-loading-indicator span {
 138   display: block;
 139   -webkit-animation: otloading 2s linear infinite;
 140   -moz-animation: otloading 2s linear infinite;
 141   -o-animation: otloading 2s linear infinite;
 142   -ms-animation: otloading 2s linear infinite;
 143   animation: otloading 2s linear infinite;
 144   text-align: center;
 145 }
 146 .opentip-container.style-dark .opentip,
 147 .opentip-container.style-alert .opentip {
 148   color: #f8f8f8;
 149   text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
 150 }
 151 .opentip-container.style-glass .opentip {
 152   padding: 15px 25px;
 153   color: #317cc5;
 154   text-shadow: 1px 1px 8px rgba(0,94,153,0.3);
 155 }
 156 .opentip-container.ot-hide-effect-fade {
 157   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 158   -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 159   -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 160   -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 161   transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
 162   opacity: 1;
 163   -ms-filter: none;
 164   filter: none;
 165 }
 166 .opentip-container.ot-hide-effect-fade.ot-hiding {
 167   opacity: 0;
 168   filter: alpha(opacity=0);
 169   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 170 }
 171 .opentip-container.ot-show-effect-appear.ot-going-to-show,
 172 .opentip-container.ot-show-effect-appear.ot-showing {
 173   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 174   -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 175   -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 176   -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
 177   transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
 178 }
 179 .opentip-container.ot-show-effect-appear.ot-going-to-show {
 180   opacity: 0;
 181   filter: alpha(opacity=0);
 182   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 183 }
 184 .opentip-container.ot-show-effect-appear.ot-showing {
 185   opacity: 1;
 186   -ms-filter: none;
 187   filter: none;
 188 }
 189 .opentip-container.ot-show-effect-appear.ot-visible {
 190   opacity: 1;
 191   -ms-filter: none;
 192   filter: none;
 193 }
 194 @-moz-keyframes otloading {
 195   0% {
 196     -webkit-transform: rotate(0deg);
 197     -moz-transform: rotate(0deg);
 198     -o-transform: rotate(0deg);
 199     -ms-transform: rotate(0deg);
 200     transform: rotate(0deg);
 201   }
 202
 203   100% {
 204     -webkit-transform: rotate(360deg);
 205     -moz-transform: rotate(360deg);
 206     -o-transform: rotate(360deg);
 207     -ms-transform: rotate(360deg);
 208     transform: rotate(360deg);
 209   }
 210 }
 211 @-webkit-keyframes otloading {
 212   0% {
 213     -webkit-transform: rotate(0deg);
 214     -moz-transform: rotate(0deg);
 215     -o-transform: rotate(0deg);
 216     -ms-transform: rotate(0deg);
 217     transform: rotate(0deg);
 218   }
 219
 220   100% {
 221     -webkit-transform: rotate(360deg);
 222     -moz-transform: rotate(360deg);
 223     -o-transform: rotate(360deg);
 224     -ms-transform: rotate(360deg);
 225     transform: rotate(360deg);
 226   }
 227 }
 228 @-o-keyframes otloading {
 229   0% {
 230     -webkit-transform: rotate(0deg);
 231     -moz-transform: rotate(0deg);
 232     -o-transform: rotate(0deg);
 233     -ms-transform: rotate(0deg);
 234     transform: rotate(0deg);
 235   }
 236
 237   100% {
 238     -webkit-transform: rotate(360deg);
 239     -moz-transform: rotate(360deg);
 240     -o-transform: rotate(360deg);
 241     -ms-transform: rotate(360deg);
 242     transform: rotate(360deg);
 243   }
 244 }
 245 @-ms-keyframes otloading {
 246   0% {
 247     -webkit-transform: rotate(0deg);
 248     -moz-transform: rotate(0deg);
 249     -o-transform: rotate(0deg);
 250     -ms-transform: rotate(0deg);
 251     transform: rotate(0deg);
 252   }
 253
 254   100% {
 255     -webkit-transform: rotate(360deg);
 256     -moz-transform: rotate(360deg);
 257     -o-transform: rotate(360deg);
 258     -ms-transform: rotate(360deg);
 259     transform: rotate(360deg);
 260   }
 261 }
 262 @keyframes otloading {
 263   0% {
 264     -webkit-transform: rotate(0deg);
 265     -moz-transform: rotate(0deg);
 266     -o-transform: rotate(0deg);
 267     -ms-transform: rotate(0deg);
 268     transform: rotate(0deg);
 269   }
 270
 271   100% {
 272     -webkit-transform: rotate(360deg);
 273     -moz-transform: rotate(360deg);
 274     -o-transform: rotate(360deg);
 275     -ms-transform: rotate(360deg);
 276     transform: rotate(360deg);
 277   }
 278 }