Created
August 31, 2012 11:27
-
-
Save davecranwell/3551678 to your computer and use it in GitHub Desktop.
Not indented CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ============================================================================= | |
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment