Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* =============================================================================
- Primary styles
- ========================================================================== */
- /* ================ Sprites ================ */
- .flag-mini{
- float:left;
- .image-replaces-text('layered/flags-mini.png', 27px, 27px);
- }
- .flag-mini.england, .flag-mini.England{
- background-position: 0px 0px;
- }
- .flag-mini.france, .flag-mini.France{
- background-position: -38px -37px;
- }
- .flag-mini.germany, .flag-mini.Germany{
- background-position: -75px -75px;
- }
- .flag-mini.italy, .flag-mini.Italy{
- background-position: -161px -161px;
- }
- .flag-mini.spain, .flag-mini.Spain{
- background-position: -112px -113px;
- }
- .social-mini{
- line-height:13px;
- padding-left:15px;
- .bg-image('layered/social-icons-mini.png');
- }
- .social-mini.twitter{
- color:@twitterfontcolor;
- background-position:0 0;
- }
- .social-mini.facebook{
- color:@facebookfontcolor;
- background-position:-13px -13px;
- }
- .social-medium{
- .image-replaces-text('layered/social-icons.png', 32px, 32px);
- }
- .social-medium.twitter{
- background-position:-32px -31px;
- }
- .social-medium.facebook{
- background-position:0 0;
- }
- .social-white span{
- .image-replaces-text('layered/social-icons-white.png', 32px, 32px);
- }
- .social-white.facebook span{
- background-position:0 0;
- }
- .social-white.twitter span{
- background-position:-30px -29px;
- }
- .shirt{
- width:147px;
- height:173px;
- text-align:center;
- font-weight:bold;
- font-size:1.2em;
- line-height:1.3em;
- .bg-image('layered/team-shirts.png', no-repeat, scroll);
- }
- .lt-ie9 .shirt{
- font-weight:normal;
- }
- .shirt h2{
- color:inherit;
- line-height:1em;
- font-size:1.8em;
- padding-top:50px;
- margin:0;
- }
- .lt-ie9 .shirt h2{
- font-size: 1.5em;
- }
- .shirt strong{
- display:block;
- }
- .shirt.france, .shirt.italy, .shirt.spain{
- color:white;
- }
- .shirt.england, .shirt.germany{
- .text-shadow(0, 0, 3px);
- }
- .shirt.england{
- background-position: 0px 0px;
- }
- .shirt.france{
- background-position: -292px -344px;
- }
- .shirt.germany{
- background-position: -439px -516px;
- }
- .shirt.italy{
- background-position: -146px -172px;
- }
- .shirt.spain{
- background-position: -586px -688px;
- }
- .shirt-medium{
- .image-replaces-text('layered/team-shirts-medium.png', 75px, 88px);
- }
- .shirt-medium.spain{
- background-position: 0px 0px;
- }
- .shirt-medium.england{
- background-position: -287px -338px;
- }
- .shirt-medium.france{
- background-position: -217px -255px;
- }
- .shirt-medium.germany{
- background-position: -146px -172px;
- }
- .shirt-medium.italy{
- background-position: -75px -88px;
- }
- .shirt-mini{
- .image-replaces-text('layered/team-shirts-mini.png', 52px, 60px);
- }
- .shirt-mini.england{
- background-position: -102px -122px;
- }
- .shirt-mini.france{
- background-position: 0px 0px;
- }
- .shirt-mini.germany{
- background-position: -153px -183px;
- }
- .shirt-mini.italy{
- background-position: -51px -61px;
- }
- .shirt-mini.spain{
- background-position: -205px -242px;
- }
- .flag-event{
- .image-replaces-text('layered/flags-pointers.png', 30px, 47px);
- }
- .flag-event.england{
- background-position: 0px 0px;
- }
- .flag-event.italy{
- background-position: -31px 0px;
- }
- .flag-event.germany{
- background-position: -91px 0px;
- }
- .flag-event.spain{
- background-position: -61px 0px;
- }
- .flag-event.france{
- background-position: -122px 0px;
- }
- /* ================ Misc reusable styles ================ */
- /* general nice buttons*/
- .button{
- .inline-block;
- text-transform:uppercase;
- font-family:@headingfont;
- color:@white;
- background-color:@basefontcolor;
- .box-shadow-white(0, 0, 10px, 1);
- .border-radius(10px,10px,10px,10px);
- padding:5px 15px;
- font-size:2em;
- cursor:pointer;
- }
- .button:hover{
- color:@white;
- }
- .lt-ie9 .button {
- font-family:@ieheadingfont;
- }
- /* the little ribbon thing that shows your current country's place*/
- .ribbon{
- padding:8px 15px;
- width:75px;
- height:27px;
- color:white;
- font-weight:bold;
- font-size:1.8em;
- line-height:27px;
- .bg-image('ribbon.png');
- }
- .ribbon sup{
- font-size:0.5em;
- }
- /* display method for the details of a square takeover*/
- .activity .content{
- width:140px;
- font-size:0.7em;
- }
- .activity .flag-mini.loser-country{
- position: relative;
- left: 8px;
- top: -35px;
- }
- .activity img{
- border:1px solid @white;
- .box-shadow(2px, 2px, 2px, 0.25);
- }
- .activity img.won{
- position:relative;
- margin-top:-10px;
- }
- .activity img.lost{
- position:relative;
- margin:-20px 0 0 -5px;
- }
- .activity p{
- margin:10px 10px 5px 0 !important;
- }
- .activity strong{
- font-size:1.1em;
- }
- .activity em{
- font-style:italic;
- font-family:@metafont;
- .opacity(0.7);
- display:block;
- padding:3px 0;
- }
- .activity .social-mini{
- font-style:italic;
- font-family:@metafont;
- }
- strong.country-loser-name{
- text-transform: capitalize;
- }
- .social{}
- .social li{
- float:left;
- margin-right:5px;
- }
- /* ================ z-indexes: all listed together to make comparison easier ================ */
- @zindexLivery:10;
- @zindexYourModal: 9;
- @zindexMostModals: 7;
- @zindexLesserModals: 4;
- header, footer{
- z-index:@zindexLivery;
- }
- .shirtstandings li{
- z-index:3;
- }
- .sidebar{
- z-index:4;
- }
- .activity img.won{
- z-index:2;
- }
- .activity img.lost{
- z-index:1;
- }
- .activity .flag-mini.loser-country{
- z-index: 1;
- }
- .activity .flag-mini{
- position: relative;
- z-index: 2;
- }
- #flagcontainer{
- z-index:0;
- }
- .flag-event{
- z-index:2;
- }
- .modal{
- z-index:@zindexMostModals;
- }
- .modal.squareinfo{
- z-index:@zindexLesserModals;
- }
- .modalarrow{
- z-index:@zindexLesserModals;
- }
- .modal.yoursquare{
- z-index:@zindexYourModal;
- }
- .modalarrow.yoursquarearrow{
- z-index: @zindexYourModal;
- }
- .intro-overlay{
- z-index: @zindexLivery - 1;
- }
- .activity .flag-mini.loser-country{
- z-index: 0;
- }
- .activity .flag-mini{
- position: relative;
- z-index: 1;
- }
- .activity .flag-mini.loser-country{
- z-index: 0;
- }
- /* ================ Header ================ */
- header{
- min-width:980px;
- .clearfix;
- position:absolute;
- .bg-image('header-bg.png', repeat-x, scroll, -45px, 0px);
- width:100%;
- height: 72px;
- }
- .yahoologo, header .title, header em, header h1, header h2, header ul{
- float:left;
- }
- .yahoologo{
- .image-replaces-text("yahoo-eurosport-logos.png", 204px, 55px);
- margin:5px 20px 0 30px;
- }
- .fr .yahoologo{
- .image-replaces-text("yahoo-logo.png", 100px, 55px);
- }
- header .title{
- width:555px;
- }
- header em, header h1{
- line-height:67px;
- letter-spacing:-1px;
- }
- header em{
- font-family:@metafont;
- font-size:0.8em;
- }
- header h1{
- font-size:2.3em;
- margin:0 20px 0 15px;
- }
- .lt-ie9 header h1{
- font-weight:normal;
- font-size: 1.6em;
- letter-spacing: normal;
- }
- header h1 a{
- color:@yahooaccentcolor !important;
- .text-shadow();
- }
- header h2{
- color:@yahooaccentcolor !important;
- .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
- margin:0 8px 0 0 ;
- letter-spacing:-1px;
- font-size:1.4em;
- }
- .lt-ie9 header h2{
- font-weight:normal;
- font-size: 1.1em;
- letter-spacing: normal;
- }
- .share ul, .share li, .standings ul, .standings li{
- float:left;
- }
- .standings, .share{
- line-height:44px;
- }
- .standings{
- float:left;
- margin-left: 10px;
- }
- .standings li{
- margin-right:10px;
- font-weight:bold;
- }
- .standings .flag-mini{
- margin:9px 3px 0 0;
- }
- header .share{
- display:none; /* enabled at > 1280 res with media queries*/
- }
- .share{
- float:right;
- }
- .share li{
- padding-top:10px;
- margin-right:10px;
- line-height:1em;
- }
- .twitter-share-button{
- //margin-top:11px;
- width:90px !important;
- }
- .fb-like{
- width:75px !important;
- overflow:hidden;
- }
- /* ================ Content ================ */
- .contentwrapper{
- padding-top:0px;
- }
- .sidebar{
- position:fixed;
- right:-35px;
- top:0;
- width:210px;
- height:100%;
- transition: right 0.5s;
- -webkit-transition: right 0.5s;
- -moz-transition: right 0.5s;
- -o-transition: right 0.5s;
- &:hover{
- right: 0;
- }
- }
- .lt-ie8 .sidebar{
- .bg-image('ie7-sidebar-bg.png', repeat-y);
- }
- .sidebar h2{
- color:@backgroundcolor;
- font-size:1.5em;
- padding-left:15px;
- padding-top:80px;
- line-height:57px;
- margin:-20px 0 0 0;
- .bg-image('sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
- }
- .lt-ie8 .sidebar h2{
- .bg-image('ie7-sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
- }
- .lt-ie9 .sidebar h2{
- font-weight:normal;
- font-size: 1.1em;
- }
- .sidebar h2:before{
- content:" ";
- float:left;
- width:12px;
- height:53px;
- margin-right:15px;
- .bg-image('arrow-right.png', no-repeat, scroll, 0, 50%);
- }
- .sidebar li{
- width:100%;
- display:none; /* js used to change display into block mode*/
- .bg-image('sidebar-bg-tabbed.png');
- overflow:hidden;
- padding:44px 0 0 12px;
- color:@white;
- }
- .lt-ie8 .sidebar li{
- .bg-image('ie7-sidebar-bg-tabbed.png');
- }
- .ie7 .sidebar li{
- margin-bottom:-3px;
- }
- .sidebar li.empty{
- display:block;
- .bg-image('sidebar-bg.png', repeat-y);
- height:1000px;
- }
- .lt-ie8 .sidebar li.empty {
- .bg-image('ie7-sidebar-bg-tabbed.png');
- }
- .sidebar h3{
- margin:0;
- float:left;
- color:@white;
- width: 35px;
- }
- .sidebar .activity .content{
- float:left;
- margin-left:5px;
- }
- #flagcontainer{ /* this is only an ID to speed up any javascript that needs doing inside it. Otherwise: DO NOT USE IDS!!! */
- position:relative;
- overflow:hidden;
- width:100%; /* width set to 100% to prevent scroll bars. Exact width calculated with JS*/
- height:600px;
- background-color:black;
- .right-edge {
- position: fixed;
- right:0;
- height:100%;
- width: 30px;
- .bg-image("right-edge.png", repeat-y)
- }
- }
- .cell{
- display:inline-block;
- position: absolute;
- width:@gridwidth;
- height:@gridwidth;
- cursor:pointer;
- /*background-size: 100%;*/
- &:hover{
- .cell-hover-glow;
- }
- }
- .cell.user-square{
- .cell-hover-glow;
- }
- /* the body class below is set to signify the country the user has chosen (or is assumed to have chosen)*/
- /* these default flags are for <=1024*/
- .cell.spain{
- .flag-bg('flags/spain-dark-1250x781.jpg');
- &:hover {
- .flag-bg('flags/spain-1250x781.jpg');
- }
- }
- body.spain .cell.spain{
- .flag-bg('flags/spain-1250x781.jpg');
- &:hover {
- .flag-bg('flags/spain-dark-1250x781.jpg');
- }
- }
- body.spain .cell.spain.user-square{
- .flag-bg('flags/spain-dark-1250x781.jpg');
- }
- .cell.germany{
- .flag-bg('flags/germany-dark-1250x781.jpg');
- &:hover {
- .flag-bg('flags/germany-1250x781.jpg');
- }
- }
- body.germany .cell.germany{
- .flag-bg('flags/germany-1250x781.jpg');
- &:hover {
- .flag-bg('flags/germany-dark-1250x781.jpg');
- }
- }
- body.germany .cell.germany.user-square{
- .flag-bg('flags/germany-dark-1250x781.jpg');
- }
- .cell.england{
- .flag-bg('flags/england-dark-1250x781.jpg');
- &:hover {
- .flag-bg('flags/england-1250x781.jpg');
- }
- }
- body.england .cell.england{
- .flag-bg('flags/england-1250x781.jpg');
- &:hover {
- .flag-bg('flags/england-dark-1250x781.jpg');
- }
- }
- body.england .cell.england.user-square{
- .flag-bg('flags/england-dark-1250x781.jpg');
- }
- .cell.italy{
- .flag-bg('flags/italy-dark-1250x781.jpg');
- &:hover {
- .flag-bg('flags/italy-1250x781.jpg');
- }
- }
- body.italy .cell.italy{
- .flag-bg('flags/italy-1250x781.jpg');
- &:hover {
- .flag-bg('flags/italy-dark-1250x781.jpg');
- }
- }
- body.italy .cell.italy.user-square{
- .flag-bg('flags/italy-dark-1250x781.jpg');
- }
- .cell.france{
- .flag-bg('flags/france-dark-1250x781.jpg');
- &:hover {
- .flag-bg('flags/france-1250x781.jpg');
- }
- }
- body.france .cell.france{
- .flag-bg('flags/france-1250x781.jpg');
- &:hover {
- .flag-bg('flags/france-dark-1250x781.jpg');
- }
- }
- body.france .cell.france.user-square{
- .flag-bg('flags/france-dark-1250x781.jpg');
- }
- .lt-ie9 .cell.spain{
- .flag-bg('flags/spain-dark-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/spain-1920x1200.jpg');
- }
- }
- .lt-ie9 body.spain .cell.spain{
- .flag-bg('flags/spain-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/spain-1920x1200.jpg');
- }
- }
- .lt-ie9 body.spain .cell.spain.user-square{
- .flag-bg('flags/spain-1920x1200.jpg');
- }
- .lt-ie9 .cell.germany{
- .flag-bg('flags/germany-dark-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/germany-1920x1200.jpg');
- }
- }
- .lt-ie9 body.germany .cell.germany{
- .flag-bg('flags/germany-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/germany-dark-1920x1200.jpg');
- }
- }
- .lt-ie9 body.germany .cell.germany.user-square{
- .flag-bg('flags/germany-1920x1200.jpg');
- }
- .lt-ie9 .cell.england{
- .flag-bg('flags/england-dark-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/england-1920x1200.jpg');
- }
- }
- .lt-ie9 body.england .cell.england{
- .flag-bg('flags/england-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/england-dark-1920x1200.jpg');
- }
- }
- .lt-ie9 body.england .cell.england.user-square{
- .flag-bg('flags/england-1920x1200.jpg');
- }
- .lt-ie9 .cell.italy{
- .flag-bg('flags/italy-dark-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/italy-1920x1200.jpg');
- }
- }
- .lt-ie9 body.italy .cell.italy{
- .flag-bg('flags/italy-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/italy-dark-1920x1200.jpg');
- }
- }
- .lt-ie9 body.italy .cell.italy.user-square{
- .flag-bg('flags/italy-1920x1200.jpg');
- }
- .lt-ie9 .cell.france{
- .flag-bg('flags/france-dark-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/france-1920x1200.jpg');
- }
- }
- .lt-ie9 body.france .cell.france{
- .flag-bg('flags/france-1920x1200.jpg');
- &:hover {
- .flag-bg('flags/france-dark-1920x1200.jpg');
- }
- }
- .lt-ie9 body.france .cell.france.user-square{
- .flag-bg('flags/france-1920x1200.jpg');
- }
- .cell.black{
- background-image: none;
- background-color: black;
- }
- .cell.top{
- border-top: 1px solid #CCC;
- height:@gridwidth - 1;
- }
- .cell.right{
- border-right: 1px solid #CCC;
- }
- .cell.bottom{
- border-bottom: 1px solid #CCC;
- }
- .cell.left{
- border-left: 1px solid #CCC;
- width:@gridwidth - 1;
- }
- .cell.flagged{
- box-shadow: 0 0 10px 0 white;
- }
- .flag-event{
- margin:10px 0 0 -7px;
- opacity: 0;
- position:absolute;
- display:block;
- }
- .shirtstandings{
- position:absolute;
- top:0;
- left:0;
- width:0;
- height:0;
- pointer-events: none;
- }
- .shirtstandings .shirt{
- position:absolute;
- left:-200px;
- pointer-events: auto;
- }
- .modal{
- position:absolute;
- display:none;
- }
- /* Generic screen-centered modals */
- .modal.centered{
- .bg-image('modal-bg.png');
- position:fixed;
- width:@modal-width;
- height:@modal-height;
- margin-top:-@modal-height / 2;
- margin-left:-@modal-width / 2;
- top:50%;
- left:50%;
- text-align:center;
- }
- .modal > .content{
- padding:40px;
- }
- .modal .ribbon{
- margin:0 auto;
- }
- .modal h1{
- margin:0;
- .text-shadow();
- letter-spacing:-1px;
- color: @yahooaccentcolor;
- }
- .modal h1.large{
- font-size:6.5em;
- margin:5px 0;
- line-height:0.9em;
- }
- .lt-ie9 .modal h1.large{
- font-weight:normal;
- font-size: 4em;
- }
- .modal h2{
- font-size: 1.2em;
- margin:10px 0;
- color: @yahooaccentcolor;
- }
- .modal p{
- margin:0 0 0.7em 0;
- }
- /* .shirts output in several modals, be warned */
- .modal .shirts{
- text-align:center;
- }
- .modal .shirts li{
- text-align:center;
- .inline-block;
- margin:0 15px;
- }
- .modal .shirts a{
- font-family:@headingfont;
- color:@basefontcolor;
- text-transform:uppercase;
- text-align: center;
- margin: 0 auto;
- .text-shadow();
- }
- .lt-ie9 .modal .shirts a{
- font-family: Arial, sans-serif;
- font-size: 0.7em;
- }
- .modal .shirts.buttons .button{
- .border-radius(15px,15px,15px,15px);
- .box-shadow(0, 0, 3px, 1);
- .vertical-gradient(#FFFFFF,#CCCCCC);
- background-color:white;
- font-size:1em;
- max-width: 50px;
- padding:5px 13px;
- &:hover{
- .vertical-gradient(darken(#FFFFFF, 10%), darken(#CCCCCC, 10%);
- }
- }
- .lt-ie9 .modal .shirts.buttons .button{
- max-width: none;
- font-size:0.7em;
- padding-left:10px;
- padding-right:10px;
- }
- .lt-ie9 .modal .shirts .shirt-mini{
- margin:0 auto;
- }
- .modal .shirts.buttons li{
- margin:3px;
- }
- .modalarrow{
- position:absolute;
- margin-top:-2px;
- margin-left:10px;
- .image-replaces-text("modal-arrows.png", 14px, 26px);
- }
- .modalarrow.right{
- background-position:-14px 0;
- margin-left:-10px;
- }
- /* Specific modals */
- .modal.home{
- @modal-width: 600px;
- @modal-height: 475px;
- width:@modal-width;
- height:@modal-height;
- margin-top:-@modal-height / 2;
- margin-left:-@modal-width / 2;
- .bg-image('modal-bg-home.png');
- }
- .modal.home .content{
- padding:40px 22px;
- }
- .lt-ie9 .modal.home .content{
- padding:60px 22px;
- }
- .modal.home .yahoologo{
- float:none;
- margin:auto;
- width:204px;
- }
- .modal.home h1{
- margin:10px 0;
- color: @yahooaccentcolor;
- font-size: 6em;
- margin: 0.1em 0 0.1em;
- line-height:1em;
- //.image-replaces-text('text-flag-your-support.png', 100%, 95px, 50%);
- }
- .lt-ie9 .modal.home h1{
- font-weight:normal;
- font-size: 4em;
- line-height: 1em;
- padding-bottom: 20px;
- }
- .modal.home h2{
- text-transform:none;
- margin:0;
- width: 500px;
- margin: auto;
- margin-bottom:0.3em;
- font-size:2em;
- line-height: 1em;
- letter-spacing:-1px;
- color:@basefontcolor;
- }
- .lt-ie9 .modal.home h2{
- font-weight:bold;
- font-size: 1.3em;
- line-height: 1.1em;
- font-family: @arial;
- padding-bottom: 15px;
- }
- .modal.home .button{
- margin:15px 0 0 0;
- padding-left:90px;
- font-size:2em;
- border:2px solid black;
- .text-shadow(1px, 1px, 0px, black);
- .box-shadow-white(0, 0, 20px, 1, 10px);
- .vertical-gradient(@yahooaccentcolor, #a74baf);
- &:hover{
- .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
- }
- }
- .modal.home .button .shirt-medium{
- position:absolute;
- margin:-20px 0 0 -80px;
- }
- .modal.home p {
- margin-top: 1em;
- }
- .home .shirt-mini{
- .opacity(0.5);
- transition: opacity 0.3s;
- -webkit-transition: opacity 0.3s;
- -moz-transition: opacity 0.3s;
- -o-transition: opacity 0.3s;
- &:hover{
- .opacity(1);
- }
- }
- .modal.support{
- }
- .modal.support .encouragement{
- display:none;
- }
- .england .modal.support .take-england{
- display: none;
- }
- .spain .modal.support .take-spain{
- display: none;
- }
- .france .modal.support .take-france{
- display: none;
- }
- .italy .modal.support .take-italy{
- display: none;
- }
- .germany .modal.support .take-germany{
- display: none;
- }
- .modal.connect .content{
- padding-left:50px;
- padding-right:50px;
- }
- .modal.connect h1{
- font-size:2.6em;
- line-height:1em;
- margin-bottom:0;
- }
- .lt-ie9 .modal.connect h1{
- font-weight:normal;
- font-size: 2em;
- }
- .modal.connect li{
- padding:5px 0 5px 0;
- }
- .modal.connect label{
- font-weight:bold;
- display:block;
- padding:0 0 5px 0;
- }
- .modal.connect label span{
- font-size:0.75em;
- }
- .modal.connect input[type="text"],
- .modal.connect textarea{
- padding:5px;
- border:1px solid #666;
- background-color:white;
- width:300px;
- text-align:center;
- }
- .modal.connect .small label{
- font-size:0.8em;
- }
- .modal.connect .loginbutton{
- cursor: pointer;
- .image-replaces-text('button-connect-with-facebook.png');
- margin-left: 25px;
- width: 299px;
- height: 40px;
- line-height:40px;
- }
- .it .modal.connect .loginbutton{
- .image-replaces-text('fb_italian.png');
- margin-left: 50px;
- width: 259px;
- }
- .es .modal.connect .loginbutton{
- .image-replaces-text('fb_spanish.png');
- }
- .fr .modal.connect .loginbutton{
- .image-replaces-text('fb_french.png');
- }
- .de .modal.connect .loginbutton{
- margin-left:0;
- .image-replaces-text('fb_german.png');
- }
- /* note that modal.squareinfo matches the .yoursquare elements too, so changes must be careful*/
- .modal.squareinfo{
- .bg-image('modal-small-bg.png');
- @modal-width: 381px;
- @modal-height: 269px;
- width:@modal-width;
- height:@modal-height;
- margin-top:-30px; /* counteracts height of shadow */
- }
- .modal.squareinfo.right{
- margin-left:15px; /* countacts width of shadow when in right configuration*/
- }
- .modal.squareinfo > .content{
- padding-bottom:0;
- padding-left:35px;
- }
- .modal.squareinfo h1{
- color:@secondaryfontcolor;
- }
- .modal.squareinfo h2{
- color:@secondaryfontcolor;
- margin:0;
- }
- .modal.squareinfo .activity{
- float:left;
- border-right:1px solid #CCC;
- .box-shadow-white(1px, 0px, 0px, 0.5);
- }
- .modal.squareinfo .colset{
- .clearfix;
- }
- .modal.squareinfo .col{
- float:left;
- }
- .modal.squareinfo .activity{
- margin-top:10px;
- }
- .modal.squareinfo .message{
- width:154px;
- padding:10px 0 0 10px;
- font-size:1em;
- }
- .modal.squareinfo ul.socialbuttons{
- .clearfix;
- }
- .modal.squareinfo .socialbuttons li{
- float:left;
- margin-right:10px;
- }
- .modal.squareinfo .button{
- font-size:1.7em
- }
- .fr.lt-ie9 .modal.squareinfo .button{
- font-size: 1.1em;
- }
- .modal.squareinfo .button.facebook{
- .vertical-gradient(#3B5A9A,#273D6C);
- &:hover{
- .dark-vertical-gradient(#3B5A9A, #273D6C);
- }
- }
- .modal.squareinfo .button.twitter{
- .vertical-gradient(#3DC7F4,#24A2CC);
- &:hover{
- .dark-vertical-gradient(#3DC7F4, #24A2CC);
- }
- }
- .modal.squareinfo .button span{
- float:left;
- margin:2px 5px 0 0;
- }
- .modal.squareinfo .take-square-mini{
- display:none; //toggled based on log in state (below)
- position: absolute;
- bottom: 45px;
- font-size: 1.2em;
- text-align:center;
- width:135px;
- .vertical-gradient(@yahooaccentcolor, #a74baf);
- &:hover{
- .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
- }
- }
- .modal.squareinfo .euro-link{
- display:none; //toggled based on log in state (below)
- text-align:center;
- font-size: 1em;
- margin-top: 10px;
- width:155px;
- position: absolute;
- bottom: 45px;
- border-top:1px solid #CCC;
- padding-top:10px;
- .button {
- font-size:1.2em;
- margin: 0;
- .vertical-gradient(@yahooaccentcolor, #a74baf);
- &:hover{
- .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
- }
- }
- a {
- color: white;
- }
- }
- .lt-ie9 .modal.squareinfo .euro-link{
- font-size:0.8em;
- }
- .ie7 .modal.squareinfo .euro-link{
- right: 20px;
- }
- .ie7 .modal.squareinfo.yoursquare .euro-link{
- right: auto;
- }
- .ie7 .modal.squareinfo .euro-link{
- right: 20px;
- }
- body.loggedout .modal.squareinfo .take-square-mini{
- display:block;
- }
- body.loggedin .modal.squareinfo .euro-link{
- display:block;
- }
- .modal.squareinfo.yoursquare{
- .bg-image('modal-bg.png');
- width:@modal-width;
- height:@modal-height;
- }
- .modal.squareinfo.yoursquare > .content{
- padding-top:30px;
- }
- .modal.squareinfo.yoursquare h1{
- font-size: 1.5em;
- }
- .modal.yoursquare .colset{
- margin-bottom:5px;
- }
- .modal.yoursquare .euro-link{
- width:370px;
- }
- .modal.yoursquare .euro-link .button{
- font-size:1.5em;
- }
- .modal.yoursquare .activity{
- padding-top:10px;
- }
- .modal.yoursquare .message{
- width:189px;
- padding:10px;
- font-size:1.1em;
- }
- .modal.squareinfo.yoursquare.no-loser{
- .bg-image('modal-bg.png');
- width:@modal-width;
- }
- .modal.docked {
- position: fixed;
- top: 40%;
- left: 0;
- margin: 0;
- .border-radius(20px, 20px, 0, 0);
- transition: all 0.5s;
- height: 200px;
- width: 65px;
- background-color: #d5dde4;
- background-image: none;
- .content {
- display: none;
- }
- .docked-content {
- .clearfix;
- display: block;
- height:200px;
- .dockbutton {
- .button;
- .vertical-gradient(@yahooaccentcolor, #a74baf);
- display: block;
- width: 180px;
- height: 40px;
- padding: 5px 0;
- overflow:visible;
- font-size: 1.8em;
- letter-spacing: 1px;
- // explicit line-height to override any modal specific line-heights
- line-height: 1.4em;
- cursor: pointer;
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- zoom: 1;
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
- transform: rotate(-90deg);
- margin: 75px 0 0 -58px;
- &:hover{
- .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
- }
- }
- }
- }
- .ie .modal.docked .docked-content .dockbutton {
- margin: 10px 0 0 5px;
- }
- .ie7 .modal.docked .docked-content .dockbutton{
- margin:10px 0 0 0;
- }
- .lt-ie9 .modal.docked .docked-content .dockbutton{
- }
- .docked-content {
- display: none;
- }
- /* Initial overlays */
- .intro-overlay {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- .bg-image('overlay-bg.png');
- background-repeat: repeat;
- h2.loading {
- width: 220px;
- .bg-image('spinner.gif', no-repeat, scroll, 50%);
- font-size: 3em;
- color: white;
- position: relative;
- display: block;
- text-align: center;
- top: 40%;
- padding-top: 30px;
- margin: auto;
- }
- ul {
- padding-top: 150px;
- margin: auto;
- .clearfix;
- width: 915px;
- li {
- float: left;
- width: 305px;
- height: 370px;
- margin: 0;
- //.bg-image('modal-tiny-bg.png', no-repeat);
- .opacity(0);
- -webkit-transition: opacity 0.2s;
- -moz-transition: opacity 0.2s;
- -o-transition: opacity 0.2s;
- transition: opacity 0.2s;
- text-align: center;
- h2 {
- padding: 120px 10px 10px;
- color: white;
- font-family: @arial;
- text-transform: none;
- }
- }
- li.introduced {
- .opacity(1);
- }
- li.first {
- .bg-image('intro/arrow-1.png', no-repeat);
- }
- li.second {
- .bg-image('intro/arrow-2.png', no-repeat);
- margin-top: 100px;
- }
- li.third {
- margin-right: 0;
- .bg-image('intro/arrow-3.png', no-repeat);
- h2{
- padding-top: 120px;
- }
- }
- }
- }
- .ie7 .intro-overlay {
- background: none;
- }
- .lt-ie9 .intro-overlay li h2{
- font-size: 1.5em;
- }
- /* ================ Footer ================ */
- footer{
- position:fixed;
- bottom:0;
- width:100%;
- .bg-image('footer-bg.png', no-repeat, scroll, 50%, 0px);
- padding-top:26px;
- }
- footer .content{
- .clearfix;
- padding:10px 30px;
- }
- footer .euro-link{
- float: left;
- height: 1.6em;
- h2{
- margin:0;
- }
- a {
- color: @yahooaccentcolor;
- }
- }
- .lt-ie9 footer .euro-link{
- h2 {
- font-size: 1em;
- }
- }
- footer .tellmemore{
- cursor:pointer;
- position:absolute;
- top:30px;
- left:50%;
- width:100px;
- text-align:left;
- margin:-15px 0 0 -50px;
- color:@yahooaccentcolor !important;
- .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
- letter-spacing:-1px;
- font-size:1.4em;
- }
- .lt-ie9 footer .tellmemore{
- font-size: 1em;
- letter-spacing: normal;
- width: 120px;
- left: 49%;
- }
- footer .tellmemore span{
- float:right;
- margin-top:7px;
- .image-replaces-text('arrow-up-down.png', 18px, 14px);
- }
- footer.open .tellmemore span{
- background-position:0 -16px;
- }
- footer .info{
- .clearfix;
- display:none;
- }
- footer .info p{
- margin:0;
- padding:30px 2% 30px 5%;
- width:19%;
- float:left;
- .bg-image('footer-arrow.png', no-repeat, scroll, 0%, 50%);
- }
- footer .info p:first-child{
- background-image:none;
- padding-left:0;
- }
- footer .info p:last-child{
- padding-right:0;
- }
- .copyright{
- color:@lightgreyfontcolor;
- font-size:0.6em;
- margin: auto;
- text-align: center;
- margin-top: 15px;
- width: 500px;
- }
- footer .share h2{
- color:@yahooaccentcolor !important;
- .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
- margin:0 15px 0 0 ;
- letter-spacing:-1px;
- font-size:1.4em;
- line-height:1em;
- float:left;
- }
- .lt-ie9 footer .share h2{
- font-weight:normal;
- font-size: 1.2em;
- letter-spacing: normal;
- }
- footer .share ul, footer .share li{
- line-height:1em;
- padding:0;
- }
- footer .twitter-share-button{
- margin:0;
- }
Add Comment
Please, Sign In to add comment