github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/ad.css (about) 1 /*! 2 * # Semantic UI x.x - 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 13 /******************************* 14 Advertisement 15 *******************************/ 16 17 .ui.ad { 18 display: block; 19 overflow: hidden; 20 margin: 1em 0em; 21 } 22 .ui.ad:first-child { 23 margin: 0em; 24 } 25 .ui.ad:last-child { 26 margin: 0em; 27 } 28 .ui.ad iframe { 29 margin: 0em; 30 padding: 0em; 31 border: none; 32 overflow: hidden; 33 } 34 35 /*-------------- 36 Common 37 ---------------*/ 38 39 40 /* Leaderboard */ 41 .ui.leaderboard.ad { 42 width: 728px; 43 height: 90px; 44 } 45 46 /* Medium Rectangle */ 47 .ui[class*="medium rectangle"].ad { 48 width: 300px; 49 height: 250px; 50 } 51 52 /* Large Rectangle */ 53 .ui[class*="large rectangle"].ad { 54 width: 336px; 55 height: 280px; 56 } 57 58 /* Half Page */ 59 .ui[class*="half page"].ad { 60 width: 300px; 61 height: 600px; 62 } 63 64 /*-------------- 65 Square 66 ---------------*/ 67 68 69 /* Square */ 70 .ui.square.ad { 71 width: 250px; 72 height: 250px; 73 } 74 75 /* Small Square */ 76 .ui[class*="small square"].ad { 77 width: 200px; 78 height: 200px; 79 } 80 81 /*-------------- 82 Rectangle 83 ---------------*/ 84 85 86 /* Small Rectangle */ 87 .ui[class*="small rectangle"].ad { 88 width: 180px; 89 height: 150px; 90 } 91 92 /* Vertical Rectangle */ 93 .ui[class*="vertical rectangle"].ad { 94 width: 240px; 95 height: 400px; 96 } 97 98 /*-------------- 99 Button 100 ---------------*/ 101 102 .ui.button.ad { 103 width: 120px; 104 height: 90px; 105 } 106 .ui[class*="square button"].ad { 107 width: 125px; 108 height: 125px; 109 } 110 .ui[class*="small button"].ad { 111 width: 120px; 112 height: 60px; 113 } 114 115 /*-------------- 116 Skyscrapers 117 ---------------*/ 118 119 120 /* Skyscraper */ 121 .ui.skyscraper.ad { 122 width: 120px; 123 height: 600px; 124 } 125 126 /* Wide Skyscraper */ 127 .ui[class*="wide skyscraper"].ad { 128 width: 160px; 129 } 130 131 /*-------------- 132 Banners 133 ---------------*/ 134 135 136 /* Banner */ 137 .ui.banner.ad { 138 width: 468px; 139 height: 60px; 140 } 141 142 /* Vertical Banner */ 143 .ui[class*="vertical banner"].ad { 144 width: 120px; 145 height: 240px; 146 } 147 148 /* Top Banner */ 149 .ui[class*="top banner"].ad { 150 width: 930px; 151 height: 180px; 152 } 153 154 /* Half Banner */ 155 .ui[class*="half banner"].ad { 156 width: 234px; 157 height: 60px; 158 } 159 160 /*-------------- 161 Boards 162 ---------------*/ 163 164 165 /* Leaderboard */ 166 .ui[class*="large leaderboard"].ad { 167 width: 970px; 168 height: 90px; 169 } 170 171 /* Billboard */ 172 .ui.billboard.ad { 173 width: 970px; 174 height: 250px; 175 } 176 177 /*-------------- 178 Panorama 179 ---------------*/ 180 181 182 /* Panorama */ 183 .ui.panorama.ad { 184 width: 980px; 185 height: 120px; 186 } 187 188 /*-------------- 189 Netboard 190 ---------------*/ 191 192 193 /* Netboard */ 194 .ui.netboard.ad { 195 width: 580px; 196 height: 400px; 197 } 198 199 /*-------------- 200 Mobile 201 ---------------*/ 202 203 204 /* Large Mobile Banner */ 205 .ui[class*="large mobile banner"].ad { 206 width: 320px; 207 height: 100px; 208 } 209 210 /* Mobile Leaderboard */ 211 .ui[class*="mobile leaderboard"].ad { 212 width: 320px; 213 height: 50px; 214 } 215 216 217 /******************************* 218 Types 219 *******************************/ 220 221 222 /* Mobile Sizes */ 223 .ui.mobile.ad { 224 display: none; 225 } 226 @media only screen and (max-width: 767px) { 227 .ui.mobile.ad { 228 display: block; 229 } 230 } 231 232 233 /******************************* 234 Variations 235 *******************************/ 236 237 .ui.centered.ad { 238 margin-left: auto; 239 margin-right: auto; 240 } 241 .ui.test.ad { 242 position: relative; 243 background: #333333; 244 } 245 .ui.test.ad:after { 246 position: absolute; 247 top: 50%; 248 left: 50%; 249 width: 100%; 250 text-align: center; 251 -webkit-transform: translateX(-50%) translateY(-50%); 252 -ms-transform: translateX(-50%) translateY(-50%); 253 transform: translateX(-50%) translateY(-50%); 254 content: 'Ad'; 255 color: #ffffff; 256 font-size: 1em; 257 font-weight: bold; 258 } 259 .ui.mobile.test.ad:after { 260 font-size: 0.85714em; 261 } 262 .ui.test.ad[data-text]:after { 263 content: attr(data-text); 264 } 265 266 267 /******************************* 268 Theme Overrides 269 *******************************/ 270 271 272 273 /******************************* 274 User Variable Overrides 275 *******************************/ 276