static/css/buttons/buttons.dataTables.css

   1 div.dt-button-info {
   2   position: fixed;
   3   top: 50%;
   4   left: 50%;
   5   width: 400px;
   6   margin-top: -100px;
   7   margin-left: -200px;
   8   background-color: white;
   9   border: 2px solid #111;
  10   box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  11   border-radius: 3px;
  12   text-align: center;
  13   z-index: 21;
  14 }
  15 div.dt-button-info h2 {
  16   padding: 0.5em;
  17   margin: 0;
  18   font-weight: normal;
  19   border-bottom: 1px solid #ddd;
  20   background-color: #f3f3f3;
  21 }
  22 div.dt-button-info > div {
  23   padding: 1em;
  24 }
  25
  26 button.dt-button,
  27 div.dt-button,
  28 a.dt-button {
  29   position: relative;
  30   display: inline-block;
  31   box-sizing: border-box;
  32   margin-right: 0.333em;
  33   padding: 0.5em 1em;
  34   border: 1px solid #999;
  35   border-radius: 2px;
  36   cursor: pointer;
  37   font-size: 0.88em;
  38   color: black;
  39   white-space: nowrap;
  40   overflow: hidden;
  41   background-color: #e9e9e9;
  42   /* Fallback */
  43   background-image: -webkit-linear-gradient(top, white 0%, #e9e9e9 100%);
  44   /* Chrome 10+, Saf5.1+, iOS 5+ */
  45   background-image: -moz-linear-gradient(top, white 0%, #e9e9e9 100%);
  46   /* FF3.6 */
  47   background-image: -ms-linear-gradient(top, white 0%, #e9e9e9 100%);
  48   /* IE10 */
  49   background-image: -o-linear-gradient(top, white 0%, #e9e9e9 100%);
  50   /* Opera 11.10+ */
  51   background-image: linear-gradient(to bottom, white 0%, #e9e9e9 100%);
  52   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='white', EndColorStr='#e9e9e9');
  53   -webkit-user-select: none;
  54   -moz-user-select: none;
  55   -ms-user-select: none;
  56   user-select: none;
  57   text-decoration: none;
  58   outline: none;
  59 }
  60 button.dt-button.disabled,
  61 div.dt-button.disabled,
  62 a.dt-button.disabled {
  63   color: #999;
  64   border: 1px solid #d0d0d0;
  65   cursor: default;
  66   background-color: #f9f9f9;
  67   /* Fallback */
  68   background-image: -webkit-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
  69   /* Chrome 10+, Saf5.1+, iOS 5+ */
  70   background-image: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
  71   /* FF3.6 */
  72   background-image: -ms-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
  73   /* IE10 */
  74   background-image: -o-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
  75   /* Opera 11.10+ */
  76   background-image: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
  77   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f9f9f9');
  78 }
  79 button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled),
  80 div.dt-button:active:not(.disabled),
  81 div.dt-button.active:not(.disabled),
  82 a.dt-button:active:not(.disabled),
  83 a.dt-button.active:not(.disabled) {
  84   background-color: #e2e2e2;
  85   /* Fallback */
  86   background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  87   /* Chrome 10+, Saf5.1+, iOS 5+ */
  88   background-image: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  89   /* FF3.6 */
  90   background-image: -ms-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  91   /* IE10 */
  92   background-image: -o-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  93   /* Opera 11.10+ */
  94   background-image: linear-gradient(to bottom, #f3f3f3 0%, #e2e2e2 100%);
  95   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f3f3f3', EndColorStr='#e2e2e2');
  96   box-shadow: inset 1px 1px 3px #999999;
  97 }
  98 button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled),
  99 div.dt-button:active:not(.disabled):hover:not(.disabled),
 100 div.dt-button.active:not(.disabled):hover:not(.disabled),
 101 a.dt-button:active:not(.disabled):hover:not(.disabled),
 102 a.dt-button.active:not(.disabled):hover:not(.disabled) {
 103   box-shadow: inset 1px 1px 3px #999999;
 104   background-color: #cccccc;
 105   /* Fallback */
 106   background-image: -webkit-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
 107   /* Chrome 10+, Saf5.1+, iOS 5+ */
 108   background-image: -moz-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
 109   /* FF3.6 */
 110   background-image: -ms-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
 111   /* IE10 */
 112   background-image: -o-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
 113   /* Opera 11.10+ */
 114   background-image: linear-gradient(to bottom, #eaeaea 0%, #cccccc 100%);
 115   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#cccccc');
 116 }
 117 button.dt-button:hover,
 118 div.dt-button:hover,
 119 a.dt-button:hover {
 120   text-decoration: none;
 121 }
 122 button.dt-button:hover:not(.disabled),
 123 div.dt-button:hover:not(.disabled),
 124 a.dt-button:hover:not(.disabled) {
 125   border: 1px solid #666;
 126   background-color: #e0e0e0;
 127   /* Fallback */
 128   background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
 129   /* Chrome 10+, Saf5.1+, iOS 5+ */
 130   background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
 131   /* FF3.6 */
 132   background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
 133   /* IE10 */
 134   background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
 135   /* Opera 11.10+ */
 136   background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
 137   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e0e0e0');
 138 }
 139 button.dt-button:focus:not(.disabled),
 140 div.dt-button:focus:not(.disabled),
 141 a.dt-button:focus:not(.disabled) {
 142   border: 1px solid #426c9e;
 143   text-shadow: 0 1px 0 #c4def1;
 144   outline: none;
 145   background-color: #79ace9;
 146   /* Fallback */
 147   background-image: -webkit-linear-gradient(top, #bddef4 0%, #79ace9 100%);
 148   /* Chrome 10+, Saf5.1+, iOS 5+ */
 149   background-image: -moz-linear-gradient(top, #bddef4 0%, #79ace9 100%);
 150   /* FF3.6 */
 151   background-image: -ms-linear-gradient(top, #bddef4 0%, #79ace9 100%);
 152   /* IE10 */
 153   background-image: -o-linear-gradient(top, #bddef4 0%, #79ace9 100%);
 154   /* Opera 11.10+ */
 155   background-image: linear-gradient(to bottom, #bddef4 0%, #79ace9 100%);
 156   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#bddef4', EndColorStr='#79ace9');
 157 }
 158
 159 .dt-button embed {
 160   outline: none;
 161 }
 162
 163 div.dt-buttons {
 164   position: relative;
 165   float: left;
 166 }
 167 div.dt-buttons.buttons-right {
 168   float: right;
 169 }
 170
 171 div.dt-button-collection {
 172   position: absolute;
 173   top: 0;
 174   left: 0;
 175   width: 150px;
 176   margin-top: 3px;
 177   padding: 8px 8px 4px 8px;
 178   border: 1px solid #ccc;
 179   border: 1px solid rgba(0, 0, 0, 0.4);
 180   background-color: white;
 181   overflow: hidden;
 182   z-index: 2002;
 183   border-radius: 5px;
 184   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 185   z-index: 2002;
 186   -webkit-column-gap: 8px;
 187   -moz-column-gap: 8px;
 188   -ms-column-gap: 8px;
 189   -o-column-gap: 8px;
 190   column-gap: 8px;
 191 }
 192 div.dt-button-collection button.dt-button,
 193 div.dt-button-collection div.dt-button,
 194 div.dt-button-collection a.dt-button {
 195   position: relative;
 196   left: 0;
 197   right: 0;
 198   display: block;
 199   float: none;
 200   margin-bottom: 4px;
 201   margin-right: 0;
 202 }
 203 div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled),
 204 div.dt-button-collection div.dt-button:active:not(.disabled),
 205 div.dt-button-collection div.dt-button.active:not(.disabled),
 206 div.dt-button-collection a.dt-button:active:not(.disabled),
 207 div.dt-button-collection a.dt-button.active:not(.disabled) {
 208   background-color: #dadada;
 209   /* Fallback */
 210   background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
 211   /* Chrome 10+, Saf5.1+, iOS 5+ */
 212   background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
 213   /* FF3.6 */
 214   background-image: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
 215   /* IE10 */
 216   background-image: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
 217   /* Opera 11.10+ */
 218   background-image: linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);
 219   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#dadada');
 220   box-shadow: inset 1px 1px 3px #666;
 221 }
 222 div.dt-button-collection.fixed {
 223   position: fixed;
 224   top: 50%;
 225   left: 50%;
 226   margin-left: -75px;
 227   border-radius: 0;
 228 }
 229 div.dt-button-collection.fixed.two-column {
 230   margin-left: -150px;
 231 }
 232 div.dt-button-collection.fixed.three-column {
 233   margin-left: -225px;
 234 }
 235 div.dt-button-collection.fixed.four-column {
 236   margin-left: -300px;
 237 }
 238 div.dt-button-collection > * {
 239   -webkit-column-break-inside: avoid;
 240   break-inside: avoid;
 241 }
 242 div.dt-button-collection.two-column {
 243   width: 300px;
 244   padding-bottom: 1px;
 245   -webkit-column-count: 2;
 246   -moz-column-count: 2;
 247   -ms-column-count: 2;
 248   -o-column-count: 2;
 249   column-count: 2;
 250 }
 251 div.dt-button-collection.three-column {
 252   width: 450px;
 253   padding-bottom: 1px;
 254   -webkit-column-count: 3;
 255   -moz-column-count: 3;
 256   -ms-column-count: 3;
 257   -o-column-count: 3;
 258   column-count: 3;
 259 }
 260 div.dt-button-collection.four-column {
 261   width: 600px;
 262   padding-bottom: 1px;
 263   -webkit-column-count: 4;
 264   -moz-column-count: 4;
 265   -ms-column-count: 4;
 266   -o-column-count: 4;
 267   column-count: 4;
 268 }
 269
 270 div.dt-button-background {
 271   position: fixed;
 272   top: 0;
 273   left: 0;
 274   width: 100%;
 275   height: 100%;
 276   background: rgba(0, 0, 0, 0.7);
 277   /* Fallback */
 278   background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
 279   /* IE10 Consumer Preview */
 280   background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
 281   /* Firefox */
 282   background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
 283   /* Opera */
 284   background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
 285   /* Webkit (Safari/Chrome 10) */
 286   background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
 287   /* Webkit (Chrome 11+) */
 288   background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
 289   /* W3C Markup, IE10 Release Preview */
 290   z-index: 2001;
 291 }
 292
 293 @media screen and (max-width: 640px) {
 294   div.dt-buttons {
 295     float: none !important;
 296     text-align: center;
 297   }
 298 }