buttons.semanticui.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. @charset "UTF-8";
  2. @keyframes dtb-spinner {
  3. 100% {
  4. transform: rotate(360deg);
  5. }
  6. }
  7. @-o-keyframes dtb-spinner {
  8. 100% {
  9. -o-transform: rotate(360deg);
  10. transform: rotate(360deg);
  11. }
  12. }
  13. @-ms-keyframes dtb-spinner {
  14. 100% {
  15. -ms-transform: rotate(360deg);
  16. transform: rotate(360deg);
  17. }
  18. }
  19. @-webkit-keyframes dtb-spinner {
  20. 100% {
  21. -webkit-transform: rotate(360deg);
  22. transform: rotate(360deg);
  23. }
  24. }
  25. @-moz-keyframes dtb-spinner {
  26. 100% {
  27. -moz-transform: rotate(360deg);
  28. transform: rotate(360deg);
  29. }
  30. }
  31. div.dt-button-info {
  32. position: fixed;
  33. top: 50%;
  34. left: 50%;
  35. width: 400px;
  36. margin-top: -100px;
  37. margin-left: -200px;
  38. background-color: white;
  39. border: 2px solid #111;
  40. box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  41. border-radius: 3px;
  42. text-align: center;
  43. z-index: 21;
  44. }
  45. div.dt-button-info h2 {
  46. padding: 0.5em;
  47. margin: 0;
  48. font-weight: normal;
  49. border-bottom: 1px solid #ddd;
  50. background-color: #f3f3f3;
  51. }
  52. div.dt-button-info > div {
  53. padding: 1em;
  54. }
  55. div.dt-button-collection {
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. width: 150px;
  60. margin-top: 3px !important;
  61. z-index: 2002;
  62. background: white;
  63. -webkit-column-gap: 8px;
  64. -moz-column-gap: 8px;
  65. -ms-column-gap: 8px;
  66. -o-column-gap: 8px;
  67. column-gap: 8px;
  68. }
  69. div.dt-button-collection.fixed {
  70. position: fixed;
  71. top: 50%;
  72. left: 50%;
  73. margin-left: -75px;
  74. border-radius: 0;
  75. }
  76. div.dt-button-collection.fixed.two-column {
  77. margin-left: -150px;
  78. }
  79. div.dt-button-collection.fixed.three-column {
  80. margin-left: -225px;
  81. }
  82. div.dt-button-collection.fixed.four-column {
  83. margin-left: -300px;
  84. }
  85. div.dt-button-collection > * {
  86. -webkit-column-break-inside: avoid;
  87. break-inside: avoid;
  88. }
  89. div.dt-button-collection.two-column {
  90. width: 300px;
  91. padding-bottom: 1px;
  92. -webkit-column-count: 2;
  93. -moz-column-count: 2;
  94. -ms-column-count: 2;
  95. -o-column-count: 2;
  96. column-count: 2;
  97. }
  98. div.dt-button-collection.three-column {
  99. width: 450px;
  100. padding-bottom: 1px;
  101. -webkit-column-count: 3;
  102. -moz-column-count: 3;
  103. -ms-column-count: 3;
  104. -o-column-count: 3;
  105. column-count: 3;
  106. }
  107. div.dt-button-collection.four-column {
  108. width: 600px;
  109. padding-bottom: 1px;
  110. -webkit-column-count: 4;
  111. -moz-column-count: 4;
  112. -ms-column-count: 4;
  113. -o-column-count: 4;
  114. column-count: 4;
  115. }
  116. div.dt-button-collection .dt-button {
  117. border-radius: 0;
  118. }
  119. button.buttons-collection.ui.button span:after {
  120. display: inline-block;
  121. content: "▾";
  122. padding-left: 0.5em;
  123. }
  124. div.dt-button-background {
  125. position: fixed;
  126. top: 0;
  127. left: 0;
  128. width: 100%;
  129. height: 100%;
  130. z-index: 2001;
  131. }
  132. @media screen and (max-width: 767px) {
  133. div.dt-buttons {
  134. float: none;
  135. width: 100%;
  136. text-align: center;
  137. margin-bottom: 0.5em;
  138. }
  139. div.dt-buttons a.btn {
  140. float: none;
  141. }
  142. }
  143. div.dt-buttons button.button.processing,
  144. div.dt-buttons div.button.processing,
  145. div.dt-buttons a.button.processing {
  146. position: relative;
  147. color: rgba(0, 0, 0, 0.2);
  148. }
  149. div.dt-buttons button.button.processing:after,
  150. div.dt-buttons div.button.processing:after,
  151. div.dt-buttons a.button.processing:after {
  152. position: absolute;
  153. top: 50%;
  154. left: 50%;
  155. width: 16px;
  156. height: 16px;
  157. margin: -8px 0 0 -8px;
  158. box-sizing: border-box;
  159. display: block;
  160. content: ' ';
  161. border: 2px solid #282828;
  162. border-radius: 50%;
  163. border-left-color: transparent;
  164. border-right-color: transparent;
  165. animation: dtb-spinner 1500ms infinite linear;
  166. -o-animation: dtb-spinner 1500ms infinite linear;
  167. -ms-animation: dtb-spinner 1500ms infinite linear;
  168. -webkit-animation: dtb-spinner 1500ms infinite linear;
  169. -moz-animation: dtb-spinner 1500ms infinite linear;
  170. }