ad.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. /*!
  2. * # Semantic UI 2.4.2 - Ad
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Advertisement
  13. *******************************/
  14. .ui.ad {
  15. display: block;
  16. overflow: hidden;
  17. margin: 1em 0em;
  18. }
  19. .ui.ad:first-child {
  20. margin: 0em;
  21. }
  22. .ui.ad:last-child {
  23. margin: 0em;
  24. }
  25. .ui.ad iframe {
  26. margin: 0em;
  27. padding: 0em;
  28. border: none;
  29. overflow: hidden;
  30. }
  31. /*--------------
  32. Common
  33. ---------------*/
  34. /* Leaderboard */
  35. .ui.leaderboard.ad {
  36. width: 728px;
  37. height: 90px;
  38. }
  39. /* Medium Rectangle */
  40. .ui[class*="medium rectangle"].ad {
  41. width: 300px;
  42. height: 250px;
  43. }
  44. /* Large Rectangle */
  45. .ui[class*="large rectangle"].ad {
  46. width: 336px;
  47. height: 280px;
  48. }
  49. /* Half Page */
  50. .ui[class*="half page"].ad {
  51. width: 300px;
  52. height: 600px;
  53. }
  54. /*--------------
  55. Square
  56. ---------------*/
  57. /* Square */
  58. .ui.square.ad {
  59. width: 250px;
  60. height: 250px;
  61. }
  62. /* Small Square */
  63. .ui[class*="small square"].ad {
  64. width: 200px;
  65. height: 200px;
  66. }
  67. /*--------------
  68. Rectangle
  69. ---------------*/
  70. /* Small Rectangle */
  71. .ui[class*="small rectangle"].ad {
  72. width: 180px;
  73. height: 150px;
  74. }
  75. /* Vertical Rectangle */
  76. .ui[class*="vertical rectangle"].ad {
  77. width: 240px;
  78. height: 400px;
  79. }
  80. /*--------------
  81. Button
  82. ---------------*/
  83. .ui.button.ad {
  84. width: 120px;
  85. height: 90px;
  86. }
  87. .ui[class*="square button"].ad {
  88. width: 125px;
  89. height: 125px;
  90. }
  91. .ui[class*="small button"].ad {
  92. width: 120px;
  93. height: 60px;
  94. }
  95. /*--------------
  96. Skyscrapers
  97. ---------------*/
  98. /* Skyscraper */
  99. .ui.skyscraper.ad {
  100. width: 120px;
  101. height: 600px;
  102. }
  103. /* Wide Skyscraper */
  104. .ui[class*="wide skyscraper"].ad {
  105. width: 160px;
  106. }
  107. /*--------------
  108. Banners
  109. ---------------*/
  110. /* Banner */
  111. .ui.banner.ad {
  112. width: 468px;
  113. height: 60px;
  114. }
  115. /* Vertical Banner */
  116. .ui[class*="vertical banner"].ad {
  117. width: 120px;
  118. height: 240px;
  119. }
  120. /* Top Banner */
  121. .ui[class*="top banner"].ad {
  122. width: 930px;
  123. height: 180px;
  124. }
  125. /* Half Banner */
  126. .ui[class*="half banner"].ad {
  127. width: 234px;
  128. height: 60px;
  129. }
  130. /*--------------
  131. Boards
  132. ---------------*/
  133. /* Leaderboard */
  134. .ui[class*="large leaderboard"].ad {
  135. width: 970px;
  136. height: 90px;
  137. }
  138. /* Billboard */
  139. .ui.billboard.ad {
  140. width: 970px;
  141. height: 250px;
  142. }
  143. /*--------------
  144. Panorama
  145. ---------------*/
  146. /* Panorama */
  147. .ui.panorama.ad {
  148. width: 980px;
  149. height: 120px;
  150. }
  151. /*--------------
  152. Netboard
  153. ---------------*/
  154. /* Netboard */
  155. .ui.netboard.ad {
  156. width: 580px;
  157. height: 400px;
  158. }
  159. /*--------------
  160. Mobile
  161. ---------------*/
  162. /* Large Mobile Banner */
  163. .ui[class*="large mobile banner"].ad {
  164. width: 320px;
  165. height: 100px;
  166. }
  167. /* Mobile Leaderboard */
  168. .ui[class*="mobile leaderboard"].ad {
  169. width: 320px;
  170. height: 50px;
  171. }
  172. /*******************************
  173. Types
  174. *******************************/
  175. /* Mobile Sizes */
  176. .ui.mobile.ad {
  177. display: none;
  178. }
  179. @media only screen and (max-width: 767px) {
  180. .ui.mobile.ad {
  181. display: block;
  182. }
  183. }
  184. /*******************************
  185. Variations
  186. *******************************/
  187. .ui.centered.ad {
  188. margin-left: auto;
  189. margin-right: auto;
  190. }
  191. .ui.test.ad {
  192. position: relative;
  193. background: #545454;
  194. }
  195. .ui.test.ad:after {
  196. position: absolute;
  197. top: 50%;
  198. left: 50%;
  199. width: 100%;
  200. text-align: center;
  201. -webkit-transform: translateX(-50%) translateY(-50%);
  202. transform: translateX(-50%) translateY(-50%);
  203. content: 'Ad';
  204. color: #FFFFFF;
  205. font-size: 1em;
  206. font-weight: bold;
  207. }
  208. .ui.mobile.test.ad:after {
  209. font-size: 0.85714286em;
  210. }
  211. .ui.test.ad[data-text]:after {
  212. content: attr(data-text);
  213. }
  214. /*******************************
  215. Theme Overrides
  216. *******************************/
  217. /*******************************
  218. User Variable Overrides
  219. *******************************/