/* * # Semantic - Ad * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘view’; @element : ‘ad’;
@import ‘../../theme.config’;
/*******************************
Advertisement
*******************************/
.ui.ad {
display: block; overflow: @overflow; margin: @margin;
}
.ui.ad:first-child {
margin: 0em;
}
.ui.ad:last-child {
margin: 0em;
}
.ui.ad iframe {
margin: 0em; padding: 0em; border: none; overflow: hidden;
}
/*————–
Common
—————*/
/* Leaderboard */ .ui.leaderboard.ad {
width: 728px; height: 90px;
}
/* Medium Rectangle */ .ui[class*=“medium rectangle”].ad {
width: 300px; height: 250px;
}
/* Large Rectangle */ .ui[class*=“large rectangle”].ad {
width: 336px; height: 280px;
} /* Half Page */ .ui[class*=“half page”].ad {
width: 300px; height: 600px;
}
/*————–
Square
—————*/
/* Square */ .ui.square.ad {
width: 250px; height: 250px;
}
/* Small Square */ .ui[class*=“small square”].ad {
width: 200px; height: 200px;
}
/*————–
Rectangle
—————*/
/* Small Rectangle */ .ui[class*=“small rectangle”].ad {
width: 180px; height: 150px;
}
/* Vertical Rectangle */ .ui[class*=“vertical rectangle”].ad {
width: 240px; height: 400px;
}
/*————–
Button
—————*/
.ui.button.ad {
width: 120px; height: 90px;
} .ui[class*=“square button”].ad {
width: 125px; height: 125px;
} .ui[class*=“small button”].ad {
width: 120px; height: 60px;
}
/*————–
Skyscrapers
—————*/
/* Skyscraper */ .ui.skyscraper.ad {
width: 120px; height: 600px;
}
/* Wide Skyscraper */ .ui[class*=“wide skyscraper”].ad {
width: 160px;
}
/*————–
Banners
—————*/
/* Banner */ .ui.banner.ad {
width: 468px; height: 60px;
}
/* Vertical Banner */ .ui[class*=“vertical banner”].ad {
width: 120px; height: 240px;
}
/* Top Banner */ .ui[class*=“top banner”].ad {
width: 930px; height: 180px;
}
/* Half Banner */ .ui[class*=“half banner”].ad {
width: 234px; height: 60px;
}
/*————–
Boards
—————*/
/* Leaderboard */ .ui[class*=“large leaderboard”].ad {
width: 970px; height: 90px;
}
/* Billboard */ .ui.billboard.ad {
width: 970px; height: 250px;
}
/*————–
Panorama
—————*/
/* Panorama */ .ui.panorama.ad {
width: 980px; height: 120px;
}
/*————–
Netboard
—————*/
/* Netboard */ .ui.netboard.ad {
width: 580px; height: 400px;
}
/*————–
Mobile
—————*/
/* Large Mobile Banner */ .ui[class*=“large mobile banner”].ad {
width: 320px; height: 100px;
}
/* Mobile Leaderboard */ .ui[class*=“mobile leaderboard”].ad {
width: 320px; height: 50px;
}
/*******************************
Types
*******************************/
/* Mobile Sizes */ .ui.mobile.ad {
display: none;
}
@media only screen and (max-width : (@tabletBreakpoint - 1)) {
.ui.mobile.ad { display: block; }
}
/*******************************
Variations
*******************************/
.ui.centered.ad {
margin-left: auto; margin-right: auto;
}
.ui.test.ad {
position: relative; background: @testBackground;
} .ui.test.ad:after {
position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translateX(-50%) translateY(-50%); content: @testText; color: @testColor; font-size: @testFontSize; font-weight: @testFontWeight;
} .ui.mobile.test.ad:after {
font-size: @testMobileFontSize;
} .ui.test.ad:after {
content: attr(data-text);
}