Guest User

Untitled

a guest
Dec 15th, 2018
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.39 KB | None | 0 0
  1. /* =============================================================================
  2. Primary styles
  3. ========================================================================== */
  4.  
  5. /* ================ Sprites ================ */
  6.  
  7. .flag-mini{
  8. float:left;
  9. .image-replaces-text('layered/flags-mini.png', 27px, 27px);
  10. }
  11. .flag-mini.england, .flag-mini.England{
  12. background-position: 0px 0px;
  13. }
  14. .flag-mini.france, .flag-mini.France{
  15. background-position: -38px -37px;
  16. }
  17. .flag-mini.germany, .flag-mini.Germany{
  18. background-position: -75px -75px;
  19. }
  20. .flag-mini.italy, .flag-mini.Italy{
  21. background-position: -161px -161px;
  22. }
  23. .flag-mini.spain, .flag-mini.Spain{
  24. background-position: -112px -113px;
  25. }
  26.  
  27. .social-mini{
  28. line-height:13px;
  29. padding-left:15px;
  30. .bg-image('layered/social-icons-mini.png');
  31. }
  32. .social-mini.twitter{
  33. color:@twitterfontcolor;
  34. background-position:0 0;
  35. }
  36. .social-mini.facebook{
  37. color:@facebookfontcolor;
  38. background-position:-13px -13px;
  39. }
  40.  
  41. .social-medium{
  42. .image-replaces-text('layered/social-icons.png', 32px, 32px);
  43. }
  44. .social-medium.twitter{
  45. background-position:-32px -31px;
  46. }
  47. .social-medium.facebook{
  48. background-position:0 0;
  49. }
  50.  
  51.  
  52. .social-white span{
  53. .image-replaces-text('layered/social-icons-white.png', 32px, 32px);
  54. }
  55. .social-white.facebook span{
  56. background-position:0 0;
  57. }
  58. .social-white.twitter span{
  59. background-position:-30px -29px;
  60. }
  61.  
  62.  
  63. .shirt{
  64. width:147px;
  65. height:173px;
  66. text-align:center;
  67. font-weight:bold;
  68. font-size:1.2em;
  69. line-height:1.3em;
  70. .bg-image('layered/team-shirts.png', no-repeat, scroll);
  71. }
  72.  
  73. .lt-ie9 .shirt{
  74. font-weight:normal;
  75. }
  76.  
  77. .shirt h2{
  78. color:inherit;
  79. line-height:1em;
  80. font-size:1.8em;
  81. padding-top:50px;
  82. margin:0;
  83. }
  84.  
  85. .lt-ie9 .shirt h2{
  86. font-size: 1.5em;
  87. }
  88. .shirt strong{
  89. display:block;
  90. }
  91. .shirt.france, .shirt.italy, .shirt.spain{
  92. color:white;
  93. }
  94. .shirt.england, .shirt.germany{
  95. .text-shadow(0, 0, 3px);
  96. }
  97.  
  98. .shirt.england{
  99. background-position: 0px 0px;
  100. }
  101. .shirt.france{
  102. background-position: -292px -344px;
  103. }
  104. .shirt.germany{
  105. background-position: -439px -516px;
  106. }
  107. .shirt.italy{
  108. background-position: -146px -172px;
  109. }
  110. .shirt.spain{
  111. background-position: -586px -688px;
  112. }
  113.  
  114. .shirt-medium{
  115. .image-replaces-text('layered/team-shirts-medium.png', 75px, 88px);
  116. }
  117. .shirt-medium.spain{
  118. background-position: 0px 0px;
  119. }
  120. .shirt-medium.england{
  121. background-position: -287px -338px;
  122. }
  123. .shirt-medium.france{
  124. background-position: -217px -255px;
  125. }
  126. .shirt-medium.germany{
  127. background-position: -146px -172px;
  128. }
  129. .shirt-medium.italy{
  130. background-position: -75px -88px;
  131. }
  132.  
  133.  
  134. .shirt-mini{
  135. .image-replaces-text('layered/team-shirts-mini.png', 52px, 60px);
  136. }
  137. .shirt-mini.england{
  138. background-position: -102px -122px;
  139. }
  140. .shirt-mini.france{
  141. background-position: 0px 0px;
  142. }
  143. .shirt-mini.germany{
  144. background-position: -153px -183px;
  145. }
  146. .shirt-mini.italy{
  147. background-position: -51px -61px;
  148. }
  149. .shirt-mini.spain{
  150. background-position: -205px -242px;
  151. }
  152.  
  153. .flag-event{
  154. .image-replaces-text('layered/flags-pointers.png', 30px, 47px);
  155. }
  156. .flag-event.england{
  157. background-position: 0px 0px;
  158. }
  159. .flag-event.italy{
  160. background-position: -31px 0px;
  161. }
  162. .flag-event.germany{
  163. background-position: -91px 0px;
  164. }
  165. .flag-event.spain{
  166. background-position: -61px 0px;
  167. }
  168. .flag-event.france{
  169. background-position: -122px 0px;
  170. }
  171.  
  172.  
  173.  
  174.  
  175. /* ================ Misc reusable styles ================ */
  176.  
  177. /* general nice buttons*/
  178. .button{
  179. .inline-block;
  180. text-transform:uppercase;
  181. font-family:@headingfont;
  182. color:@white;
  183. background-color:@basefontcolor;
  184. .box-shadow-white(0, 0, 10px, 1);
  185. .border-radius(10px,10px,10px,10px);
  186. padding:5px 15px;
  187. font-size:2em;
  188. cursor:pointer;
  189. }
  190. .button:hover{
  191. color:@white;
  192. }
  193.  
  194. .lt-ie9 .button {
  195. font-family:@ieheadingfont;
  196. }
  197.  
  198. /* the little ribbon thing that shows your current country's place*/
  199. .ribbon{
  200. padding:8px 15px;
  201. width:75px;
  202. height:27px;
  203. color:white;
  204. font-weight:bold;
  205. font-size:1.8em;
  206. line-height:27px;
  207. .bg-image('ribbon.png');
  208. }
  209. .ribbon sup{
  210. font-size:0.5em;
  211. }
  212.  
  213. /* display method for the details of a square takeover*/
  214. .activity .content{
  215. width:140px;
  216. font-size:0.7em;
  217. }
  218.  
  219. .activity .flag-mini.loser-country{
  220. position: relative;
  221. left: 8px;
  222. top: -35px;
  223. }
  224.  
  225. .activity img{
  226. border:1px solid @white;
  227. .box-shadow(2px, 2px, 2px, 0.25);
  228. }
  229. .activity img.won{
  230. position:relative;
  231. margin-top:-10px;
  232. }
  233. .activity img.lost{
  234. position:relative;
  235. margin:-20px 0 0 -5px;
  236. }
  237.  
  238. .activity p{
  239. margin:10px 10px 5px 0 !important;
  240. }
  241. .activity strong{
  242. font-size:1.1em;
  243. }
  244. .activity em{
  245. font-style:italic;
  246. font-family:@metafont;
  247. .opacity(0.7);
  248. display:block;
  249. padding:3px 0;
  250. }
  251. .activity .social-mini{
  252. font-style:italic;
  253. font-family:@metafont;
  254. }
  255.  
  256. strong.country-loser-name{
  257. text-transform: capitalize;
  258. }
  259.  
  260. .social{}
  261. .social li{
  262. float:left;
  263. margin-right:5px;
  264. }
  265.  
  266. /* ================ z-indexes: all listed together to make comparison easier ================ */
  267.  
  268. @zindexLivery:10;
  269. @zindexYourModal: 9;
  270. @zindexMostModals: 7;
  271. @zindexLesserModals: 4;
  272.  
  273. header, footer{
  274. z-index:@zindexLivery;
  275. }
  276.  
  277. .shirtstandings li{
  278. z-index:3;
  279. }
  280.  
  281. .sidebar{
  282. z-index:4;
  283. }
  284.  
  285. .activity img.won{
  286. z-index:2;
  287. }
  288. .activity img.lost{
  289. z-index:1;
  290. }
  291.  
  292. .activity .flag-mini.loser-country{
  293. z-index: 1;
  294. }
  295.  
  296. .activity .flag-mini{
  297. position: relative;
  298. z-index: 2;
  299. }
  300.  
  301. #flagcontainer{
  302. z-index:0;
  303. }
  304. .flag-event{
  305. z-index:2;
  306. }
  307.  
  308. .modal{
  309. z-index:@zindexMostModals;
  310. }
  311.  
  312. .modal.squareinfo{
  313. z-index:@zindexLesserModals;
  314. }
  315. .modalarrow{
  316. z-index:@zindexLesserModals;
  317. }
  318.  
  319. .modal.yoursquare{
  320. z-index:@zindexYourModal;
  321. }
  322. .modalarrow.yoursquarearrow{
  323. z-index: @zindexYourModal;
  324. }
  325.  
  326. .intro-overlay{
  327. z-index: @zindexLivery - 1;
  328. }
  329.  
  330. .activity .flag-mini.loser-country{
  331. z-index: 0;
  332. }
  333.  
  334. .activity .flag-mini{
  335. position: relative;
  336. z-index: 1;
  337. }
  338.  
  339. .activity .flag-mini.loser-country{
  340. z-index: 0;
  341. }
  342.  
  343.  
  344. /* ================ Header ================ */
  345. header{
  346. min-width:980px;
  347. .clearfix;
  348. position:absolute;
  349. .bg-image('header-bg.png', repeat-x, scroll, -45px, 0px);
  350. width:100%;
  351. height: 72px;
  352. }
  353. .yahoologo, header .title, header em, header h1, header h2, header ul{
  354. float:left;
  355. }
  356.  
  357. .yahoologo{
  358. .image-replaces-text("yahoo-eurosport-logos.png", 204px, 55px);
  359. margin:5px 20px 0 30px;
  360. }
  361.  
  362. .fr .yahoologo{
  363. .image-replaces-text("yahoo-logo.png", 100px, 55px);
  364. }
  365. header .title{
  366. width:555px;
  367. }
  368. header em, header h1{
  369. line-height:67px;
  370. letter-spacing:-1px;
  371. }
  372. header em{
  373. font-family:@metafont;
  374. font-size:0.8em;
  375. }
  376. header h1{
  377. font-size:2.3em;
  378. margin:0 20px 0 15px;
  379. }
  380.  
  381. .lt-ie9 header h1{
  382. font-weight:normal;
  383. font-size: 1.6em;
  384. letter-spacing: normal;
  385. }
  386.  
  387. header h1 a{
  388. color:@yahooaccentcolor !important;
  389. .text-shadow();
  390. }
  391. header h2{
  392. color:@yahooaccentcolor !important;
  393. .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  394. margin:0 8px 0 0 ;
  395. letter-spacing:-1px;
  396. font-size:1.4em;
  397. }
  398.  
  399. .lt-ie9 header h2{
  400. font-weight:normal;
  401. font-size: 1.1em;
  402. letter-spacing: normal;
  403. }
  404.  
  405. .share ul, .share li, .standings ul, .standings li{
  406. float:left;
  407. }
  408.  
  409. .standings, .share{
  410. line-height:44px;
  411. }
  412.  
  413. .standings{
  414. float:left;
  415. margin-left: 10px;
  416. }
  417. .standings li{
  418. margin-right:10px;
  419. font-weight:bold;
  420. }
  421. .standings .flag-mini{
  422. margin:9px 3px 0 0;
  423. }
  424.  
  425. header .share{
  426. display:none; /* enabled at > 1280 res with media queries*/
  427. }
  428. .share{
  429. float:right;
  430. }
  431. .share li{
  432. padding-top:10px;
  433. margin-right:10px;
  434. line-height:1em;
  435. }
  436. .twitter-share-button{
  437. //margin-top:11px;
  438. width:90px !important;
  439. }
  440. .fb-like{
  441. width:75px !important;
  442. overflow:hidden;
  443. }
  444.  
  445.  
  446. /* ================ Content ================ */
  447.  
  448. .contentwrapper{
  449. padding-top:0px;
  450. }
  451.  
  452. .sidebar{
  453. position:fixed;
  454. right:-35px;
  455. top:0;
  456. width:210px;
  457. height:100%;
  458. transition: right 0.5s;
  459. -webkit-transition: right 0.5s;
  460. -moz-transition: right 0.5s;
  461. -o-transition: right 0.5s;
  462.  
  463. &:hover{
  464. right: 0;
  465. }
  466. }
  467.  
  468. .lt-ie8 .sidebar{
  469. .bg-image('ie7-sidebar-bg.png', repeat-y);
  470. }
  471. .sidebar h2{
  472. color:@backgroundcolor;
  473. font-size:1.5em;
  474. padding-left:15px;
  475. padding-top:80px;
  476. line-height:57px;
  477. margin:-20px 0 0 0;
  478. .bg-image('sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
  479. }
  480.  
  481. .lt-ie8 .sidebar h2{
  482. .bg-image('ie7-sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
  483. }
  484.  
  485. .lt-ie9 .sidebar h2{
  486. font-weight:normal;
  487. font-size: 1.1em;
  488. }
  489. .sidebar h2:before{
  490. content:" ";
  491. float:left;
  492. width:12px;
  493. height:53px;
  494. margin-right:15px;
  495. .bg-image('arrow-right.png', no-repeat, scroll, 0, 50%);
  496. }
  497. .sidebar li{
  498. width:100%;
  499. display:none; /* js used to change display into block mode*/
  500. .bg-image('sidebar-bg-tabbed.png');
  501. overflow:hidden;
  502. padding:44px 0 0 12px;
  503. color:@white;
  504. }
  505.  
  506. .lt-ie8 .sidebar li{
  507. .bg-image('ie7-sidebar-bg-tabbed.png');
  508. }
  509.  
  510. .ie7 .sidebar li{
  511. margin-bottom:-3px;
  512. }
  513. .sidebar li.empty{
  514. display:block;
  515. .bg-image('sidebar-bg.png', repeat-y);
  516. height:1000px;
  517. }
  518. .lt-ie8 .sidebar li.empty {
  519. .bg-image('ie7-sidebar-bg-tabbed.png');
  520. }
  521. .sidebar h3{
  522. margin:0;
  523. float:left;
  524. color:@white;
  525. width: 35px;
  526. }
  527.  
  528. .sidebar .activity .content{
  529. float:left;
  530. margin-left:5px;
  531. }
  532.  
  533.  
  534.  
  535. #flagcontainer{ /* this is only an ID to speed up any javascript that needs doing inside it. Otherwise: DO NOT USE IDS!!! */
  536. position:relative;
  537. overflow:hidden;
  538. width:100%; /* width set to 100% to prevent scroll bars. Exact width calculated with JS*/
  539. height:600px;
  540. background-color:black;
  541.  
  542. .right-edge {
  543. position: fixed;
  544. right:0;
  545. height:100%;
  546. width: 30px;
  547. .bg-image("right-edge.png", repeat-y)
  548. }
  549. }
  550. .cell{
  551. display:inline-block;
  552. position: absolute;
  553. width:@gridwidth;
  554. height:@gridwidth;
  555. cursor:pointer;
  556. /*background-size: 100%;*/
  557.  
  558. &:hover{
  559. .cell-hover-glow;
  560. }
  561. }
  562.  
  563. .cell.user-square{
  564. .cell-hover-glow;
  565. }
  566.  
  567. /* the body class below is set to signify the country the user has chosen (or is assumed to have chosen)*/
  568.  
  569. /* these default flags are for <=1024*/
  570. .cell.spain{
  571. .flag-bg('flags/spain-dark-1250x781.jpg');
  572. &:hover {
  573. .flag-bg('flags/spain-1250x781.jpg');
  574. }
  575. }
  576. body.spain .cell.spain{
  577. .flag-bg('flags/spain-1250x781.jpg');
  578. &:hover {
  579. .flag-bg('flags/spain-dark-1250x781.jpg');
  580. }
  581. }
  582. body.spain .cell.spain.user-square{
  583. .flag-bg('flags/spain-dark-1250x781.jpg');
  584. }
  585.  
  586. .cell.germany{
  587. .flag-bg('flags/germany-dark-1250x781.jpg');
  588. &:hover {
  589. .flag-bg('flags/germany-1250x781.jpg');
  590. }
  591. }
  592. body.germany .cell.germany{
  593. .flag-bg('flags/germany-1250x781.jpg');
  594. &:hover {
  595. .flag-bg('flags/germany-dark-1250x781.jpg');
  596. }
  597. }
  598. body.germany .cell.germany.user-square{
  599. .flag-bg('flags/germany-dark-1250x781.jpg');
  600. }
  601.  
  602. .cell.england{
  603. .flag-bg('flags/england-dark-1250x781.jpg');
  604. &:hover {
  605. .flag-bg('flags/england-1250x781.jpg');
  606. }
  607. }
  608. body.england .cell.england{
  609. .flag-bg('flags/england-1250x781.jpg');
  610. &:hover {
  611. .flag-bg('flags/england-dark-1250x781.jpg');
  612. }
  613. }
  614. body.england .cell.england.user-square{
  615. .flag-bg('flags/england-dark-1250x781.jpg');
  616. }
  617.  
  618. .cell.italy{
  619. .flag-bg('flags/italy-dark-1250x781.jpg');
  620. &:hover {
  621. .flag-bg('flags/italy-1250x781.jpg');
  622. }
  623. }
  624. body.italy .cell.italy{
  625. .flag-bg('flags/italy-1250x781.jpg');
  626. &:hover {
  627. .flag-bg('flags/italy-dark-1250x781.jpg');
  628. }
  629. }
  630. body.italy .cell.italy.user-square{
  631. .flag-bg('flags/italy-dark-1250x781.jpg');
  632. }
  633.  
  634. .cell.france{
  635. .flag-bg('flags/france-dark-1250x781.jpg');
  636. &:hover {
  637. .flag-bg('flags/france-1250x781.jpg');
  638. }
  639. }
  640. body.france .cell.france{
  641. .flag-bg('flags/france-1250x781.jpg');
  642. &:hover {
  643. .flag-bg('flags/france-dark-1250x781.jpg');
  644. }
  645. }
  646. body.france .cell.france.user-square{
  647. .flag-bg('flags/france-dark-1250x781.jpg');
  648. }
  649.  
  650.  
  651. .lt-ie9 .cell.spain{
  652. .flag-bg('flags/spain-dark-1920x1200.jpg');
  653. &:hover {
  654. .flag-bg('flags/spain-1920x1200.jpg');
  655. }
  656. }
  657. .lt-ie9 body.spain .cell.spain{
  658. .flag-bg('flags/spain-1920x1200.jpg');
  659. &:hover {
  660. .flag-bg('flags/spain-1920x1200.jpg');
  661. }
  662. }
  663. .lt-ie9 body.spain .cell.spain.user-square{
  664. .flag-bg('flags/spain-1920x1200.jpg');
  665. }
  666.  
  667. .lt-ie9 .cell.germany{
  668. .flag-bg('flags/germany-dark-1920x1200.jpg');
  669. &:hover {
  670. .flag-bg('flags/germany-1920x1200.jpg');
  671. }
  672. }
  673. .lt-ie9 body.germany .cell.germany{
  674. .flag-bg('flags/germany-1920x1200.jpg');
  675. &:hover {
  676. .flag-bg('flags/germany-dark-1920x1200.jpg');
  677. }
  678. }
  679. .lt-ie9 body.germany .cell.germany.user-square{
  680. .flag-bg('flags/germany-1920x1200.jpg');
  681. }
  682.  
  683. .lt-ie9 .cell.england{
  684. .flag-bg('flags/england-dark-1920x1200.jpg');
  685. &:hover {
  686. .flag-bg('flags/england-1920x1200.jpg');
  687. }
  688. }
  689. .lt-ie9 body.england .cell.england{
  690. .flag-bg('flags/england-1920x1200.jpg');
  691. &:hover {
  692. .flag-bg('flags/england-dark-1920x1200.jpg');
  693. }
  694. }
  695. .lt-ie9 body.england .cell.england.user-square{
  696. .flag-bg('flags/england-1920x1200.jpg');
  697. }
  698.  
  699. .lt-ie9 .cell.italy{
  700. .flag-bg('flags/italy-dark-1920x1200.jpg');
  701. &:hover {
  702. .flag-bg('flags/italy-1920x1200.jpg');
  703. }
  704. }
  705. .lt-ie9 body.italy .cell.italy{
  706. .flag-bg('flags/italy-1920x1200.jpg');
  707. &:hover {
  708. .flag-bg('flags/italy-dark-1920x1200.jpg');
  709. }
  710. }
  711. .lt-ie9 body.italy .cell.italy.user-square{
  712. .flag-bg('flags/italy-1920x1200.jpg');
  713. }
  714.  
  715. .lt-ie9 .cell.france{
  716. .flag-bg('flags/france-dark-1920x1200.jpg');
  717. &:hover {
  718. .flag-bg('flags/france-1920x1200.jpg');
  719. }
  720. }
  721. .lt-ie9 body.france .cell.france{
  722. .flag-bg('flags/france-1920x1200.jpg');
  723. &:hover {
  724. .flag-bg('flags/france-dark-1920x1200.jpg');
  725. }
  726. }
  727. .lt-ie9 body.france .cell.france.user-square{
  728. .flag-bg('flags/france-1920x1200.jpg');
  729. }
  730.  
  731.  
  732.  
  733. .cell.black{
  734. background-image: none;
  735. background-color: black;
  736. }
  737.  
  738. .cell.top{
  739. border-top: 1px solid #CCC;
  740. height:@gridwidth - 1;
  741. }
  742. .cell.right{
  743. border-right: 1px solid #CCC;
  744. }
  745. .cell.bottom{
  746. border-bottom: 1px solid #CCC;
  747. }
  748. .cell.left{
  749. border-left: 1px solid #CCC;
  750. width:@gridwidth - 1;
  751. }
  752. .cell.flagged{
  753. box-shadow: 0 0 10px 0 white;
  754. }
  755.  
  756. .flag-event{
  757. margin:10px 0 0 -7px;
  758. opacity: 0;
  759. position:absolute;
  760. display:block;
  761. }
  762.  
  763.  
  764. .shirtstandings{
  765. position:absolute;
  766. top:0;
  767. left:0;
  768. width:0;
  769. height:0;
  770. pointer-events: none;
  771. }
  772.  
  773. .shirtstandings .shirt{
  774. position:absolute;
  775. left:-200px;
  776. pointer-events: auto;
  777. }
  778.  
  779. .modal{
  780. position:absolute;
  781. display:none;
  782. }
  783. /* Generic screen-centered modals */
  784. .modal.centered{
  785. .bg-image('modal-bg.png');
  786. position:fixed;
  787. width:@modal-width;
  788. height:@modal-height;
  789. margin-top:-@modal-height / 2;
  790. margin-left:-@modal-width / 2;
  791. top:50%;
  792. left:50%;
  793. text-align:center;
  794. }
  795.  
  796. .modal > .content{
  797. padding:40px;
  798. }
  799.  
  800. .modal .ribbon{
  801. margin:0 auto;
  802. }
  803.  
  804. .modal h1{
  805. margin:0;
  806. .text-shadow();
  807. letter-spacing:-1px;
  808. color: @yahooaccentcolor;
  809. }
  810. .modal h1.large{
  811. font-size:6.5em;
  812. margin:5px 0;
  813. line-height:0.9em;
  814. }
  815.  
  816. .lt-ie9 .modal h1.large{
  817. font-weight:normal;
  818. font-size: 4em;
  819. }
  820.  
  821. .modal h2{
  822. font-size: 1.2em;
  823. margin:10px 0;
  824. color: @yahooaccentcolor;
  825. }
  826. .modal p{
  827. margin:0 0 0.7em 0;
  828. }
  829.  
  830. /* .shirts output in several modals, be warned */
  831. .modal .shirts{
  832. text-align:center;
  833. }
  834. .modal .shirts li{
  835. text-align:center;
  836. .inline-block;
  837. margin:0 15px;
  838. }
  839. .modal .shirts a{
  840. font-family:@headingfont;
  841. color:@basefontcolor;
  842. text-transform:uppercase;
  843. text-align: center;
  844. margin: 0 auto;
  845. .text-shadow();
  846. }
  847. .lt-ie9 .modal .shirts a{
  848. font-family: Arial, sans-serif;
  849. font-size: 0.7em;
  850. }
  851.  
  852. .modal .shirts.buttons .button{
  853. .border-radius(15px,15px,15px,15px);
  854. .box-shadow(0, 0, 3px, 1);
  855. .vertical-gradient(#FFFFFF,#CCCCCC);
  856. background-color:white;
  857. font-size:1em;
  858. max-width: 50px;
  859. padding:5px 13px;
  860.  
  861. &:hover{
  862. .vertical-gradient(darken(#FFFFFF, 10%), darken(#CCCCCC, 10%);
  863. }
  864. }
  865. .lt-ie9 .modal .shirts.buttons .button{
  866. max-width: none;
  867. font-size:0.7em;
  868. padding-left:10px;
  869. padding-right:10px;
  870. }
  871. .lt-ie9 .modal .shirts .shirt-mini{
  872. margin:0 auto;
  873. }
  874.  
  875. .modal .shirts.buttons li{
  876. margin:3px;
  877. }
  878.  
  879.  
  880. .modalarrow{
  881. position:absolute;
  882. margin-top:-2px;
  883. margin-left:10px;
  884. .image-replaces-text("modal-arrows.png", 14px, 26px);
  885. }
  886. .modalarrow.right{
  887. background-position:-14px 0;
  888. margin-left:-10px;
  889. }
  890.  
  891.  
  892. /* Specific modals */
  893.  
  894. .modal.home{
  895. @modal-width: 600px;
  896. @modal-height: 475px;
  897.  
  898. width:@modal-width;
  899. height:@modal-height;
  900. margin-top:-@modal-height / 2;
  901. margin-left:-@modal-width / 2;
  902. .bg-image('modal-bg-home.png');
  903. }
  904. .modal.home .content{
  905. padding:40px 22px;
  906. }
  907. .lt-ie9 .modal.home .content{
  908. padding:60px 22px;
  909. }
  910. .modal.home .yahoologo{
  911. float:none;
  912. margin:auto;
  913. width:204px;
  914. }
  915. .modal.home h1{
  916. margin:10px 0;
  917. color: @yahooaccentcolor;
  918. font-size: 6em;
  919. margin: 0.1em 0 0.1em;
  920. line-height:1em;
  921. //.image-replaces-text('text-flag-your-support.png', 100%, 95px, 50%);
  922. }
  923.  
  924. .lt-ie9 .modal.home h1{
  925. font-weight:normal;
  926. font-size: 4em;
  927. line-height: 1em;
  928. padding-bottom: 20px;
  929. }
  930.  
  931. .modal.home h2{
  932. text-transform:none;
  933. margin:0;
  934. width: 500px;
  935. margin: auto;
  936. margin-bottom:0.3em;
  937. font-size:2em;
  938. line-height: 1em;
  939. letter-spacing:-1px;
  940. color:@basefontcolor;
  941. }
  942.  
  943. .lt-ie9 .modal.home h2{
  944. font-weight:bold;
  945. font-size: 1.3em;
  946. line-height: 1.1em;
  947. font-family: @arial;
  948. padding-bottom: 15px;
  949. }
  950.  
  951. .modal.home .button{
  952. margin:15px 0 0 0;
  953. padding-left:90px;
  954. font-size:2em;
  955. border:2px solid black;
  956. .text-shadow(1px, 1px, 0px, black);
  957. .box-shadow-white(0, 0, 20px, 1, 10px);
  958. .vertical-gradient(@yahooaccentcolor, #a74baf);
  959.  
  960. &:hover{
  961. .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  962. }
  963. }
  964.  
  965. .modal.home .button .shirt-medium{
  966. position:absolute;
  967. margin:-20px 0 0 -80px;
  968. }
  969.  
  970. .modal.home p {
  971. margin-top: 1em;
  972. }
  973.  
  974. .home .shirt-mini{
  975. .opacity(0.5);
  976. transition: opacity 0.3s;
  977. -webkit-transition: opacity 0.3s;
  978. -moz-transition: opacity 0.3s;
  979. -o-transition: opacity 0.3s;
  980. &:hover{
  981. .opacity(1);
  982. }
  983. }
  984.  
  985. .modal.support{
  986.  
  987. }
  988. .modal.support .encouragement{
  989. display:none;
  990. }
  991. .england .modal.support .take-england{
  992. display: none;
  993. }
  994. .spain .modal.support .take-spain{
  995. display: none;
  996. }
  997. .france .modal.support .take-france{
  998. display: none;
  999. }
  1000. .italy .modal.support .take-italy{
  1001. display: none;
  1002. }
  1003. .germany .modal.support .take-germany{
  1004. display: none;
  1005. }
  1006.  
  1007. .modal.connect .content{
  1008. padding-left:50px;
  1009. padding-right:50px;
  1010. }
  1011. .modal.connect h1{
  1012. font-size:2.6em;
  1013. line-height:1em;
  1014. margin-bottom:0;
  1015. }
  1016. .lt-ie9 .modal.connect h1{
  1017. font-weight:normal;
  1018. font-size: 2em;
  1019. }
  1020. .modal.connect li{
  1021. padding:5px 0 5px 0;
  1022. }
  1023. .modal.connect label{
  1024. font-weight:bold;
  1025. display:block;
  1026. padding:0 0 5px 0;
  1027. }
  1028. .modal.connect label span{
  1029. font-size:0.75em;
  1030. }
  1031. .modal.connect input[type="text"],
  1032. .modal.connect textarea{
  1033. padding:5px;
  1034. border:1px solid #666;
  1035. background-color:white;
  1036. width:300px;
  1037. text-align:center;
  1038. }
  1039. .modal.connect .small label{
  1040. font-size:0.8em;
  1041. }
  1042. .modal.connect .loginbutton{
  1043. cursor: pointer;
  1044. .image-replaces-text('button-connect-with-facebook.png');
  1045. margin-left: 25px;
  1046. width: 299px;
  1047. height: 40px;
  1048. line-height:40px;
  1049. }
  1050.  
  1051. .it .modal.connect .loginbutton{
  1052. .image-replaces-text('fb_italian.png');
  1053. margin-left: 50px;
  1054. width: 259px;
  1055. }
  1056.  
  1057. .es .modal.connect .loginbutton{
  1058. .image-replaces-text('fb_spanish.png');
  1059. }
  1060.  
  1061. .fr .modal.connect .loginbutton{
  1062. .image-replaces-text('fb_french.png');
  1063. }
  1064.  
  1065. .de .modal.connect .loginbutton{
  1066. margin-left:0;
  1067. .image-replaces-text('fb_german.png');
  1068. }
  1069.  
  1070. /* note that modal.squareinfo matches the .yoursquare elements too, so changes must be careful*/
  1071. .modal.squareinfo{
  1072. .bg-image('modal-small-bg.png');
  1073. @modal-width: 381px;
  1074. @modal-height: 269px;
  1075.  
  1076. width:@modal-width;
  1077. height:@modal-height;
  1078.  
  1079. margin-top:-30px; /* counteracts height of shadow */
  1080. }
  1081. .modal.squareinfo.right{
  1082. margin-left:15px; /* countacts width of shadow when in right configuration*/
  1083. }
  1084. .modal.squareinfo > .content{
  1085. padding-bottom:0;
  1086. padding-left:35px;
  1087. }
  1088. .modal.squareinfo h1{
  1089. color:@secondaryfontcolor;
  1090. }
  1091. .modal.squareinfo h2{
  1092. color:@secondaryfontcolor;
  1093. margin:0;
  1094. }
  1095. .modal.squareinfo .activity{
  1096. float:left;
  1097. border-right:1px solid #CCC;
  1098. .box-shadow-white(1px, 0px, 0px, 0.5);
  1099. }
  1100. .modal.squareinfo .colset{
  1101. .clearfix;
  1102. }
  1103. .modal.squareinfo .col{
  1104. float:left;
  1105. }
  1106. .modal.squareinfo .activity{
  1107. margin-top:10px;
  1108. }
  1109. .modal.squareinfo .message{
  1110. width:154px;
  1111. padding:10px 0 0 10px;
  1112. font-size:1em;
  1113. }
  1114. .modal.squareinfo ul.socialbuttons{
  1115. .clearfix;
  1116. }
  1117. .modal.squareinfo .socialbuttons li{
  1118. float:left;
  1119. margin-right:10px;
  1120. }
  1121. .modal.squareinfo .button{
  1122. font-size:1.7em
  1123. }
  1124. .fr.lt-ie9 .modal.squareinfo .button{
  1125. font-size: 1.1em;
  1126. }
  1127. .modal.squareinfo .button.facebook{
  1128. .vertical-gradient(#3B5A9A,#273D6C);
  1129.  
  1130. &:hover{
  1131. .dark-vertical-gradient(#3B5A9A, #273D6C);
  1132. }
  1133. }
  1134. .modal.squareinfo .button.twitter{
  1135. .vertical-gradient(#3DC7F4,#24A2CC);
  1136.  
  1137. &:hover{
  1138. .dark-vertical-gradient(#3DC7F4, #24A2CC);
  1139. }
  1140. }
  1141. .modal.squareinfo .button span{
  1142. float:left;
  1143. margin:2px 5px 0 0;
  1144. }
  1145.  
  1146. .modal.squareinfo .take-square-mini{
  1147. display:none; //toggled based on log in state (below)
  1148. position: absolute;
  1149. bottom: 45px;
  1150. font-size: 1.2em;
  1151. text-align:center;
  1152. width:135px;
  1153. .vertical-gradient(@yahooaccentcolor, #a74baf);
  1154.  
  1155. &:hover{
  1156. .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1157. }
  1158. }
  1159.  
  1160. .modal.squareinfo .euro-link{
  1161. display:none; //toggled based on log in state (below)
  1162. text-align:center;
  1163. font-size: 1em;
  1164. margin-top: 10px;
  1165. width:155px;
  1166. position: absolute;
  1167. bottom: 45px;
  1168. border-top:1px solid #CCC;
  1169. padding-top:10px;
  1170.  
  1171. .button {
  1172. font-size:1.2em;
  1173. margin: 0;
  1174. .vertical-gradient(@yahooaccentcolor, #a74baf);
  1175.  
  1176. &:hover{
  1177. .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1178. }
  1179. }
  1180.  
  1181. a {
  1182. color: white;
  1183. }
  1184. }
  1185. .lt-ie9 .modal.squareinfo .euro-link{
  1186. font-size:0.8em;
  1187. }
  1188. .ie7 .modal.squareinfo .euro-link{
  1189. right: 20px;
  1190. }
  1191. .ie7 .modal.squareinfo.yoursquare .euro-link{
  1192. right: auto;
  1193. }
  1194. .ie7 .modal.squareinfo .euro-link{
  1195. right: 20px;
  1196. }
  1197.  
  1198. body.loggedout .modal.squareinfo .take-square-mini{
  1199. display:block;
  1200. }
  1201. body.loggedin .modal.squareinfo .euro-link{
  1202. display:block;
  1203. }
  1204.  
  1205. .modal.squareinfo.yoursquare{
  1206. .bg-image('modal-bg.png');
  1207. width:@modal-width;
  1208. height:@modal-height;
  1209. }
  1210. .modal.squareinfo.yoursquare > .content{
  1211. padding-top:30px;
  1212. }
  1213.  
  1214. .modal.squareinfo.yoursquare h1{
  1215. font-size: 1.5em;
  1216. }
  1217.  
  1218. .modal.yoursquare .colset{
  1219. margin-bottom:5px;
  1220. }
  1221. .modal.yoursquare .euro-link{
  1222. width:370px;
  1223. }
  1224. .modal.yoursquare .euro-link .button{
  1225. font-size:1.5em;
  1226. }
  1227. .modal.yoursquare .activity{
  1228. padding-top:10px;
  1229. }
  1230. .modal.yoursquare .message{
  1231. width:189px;
  1232. padding:10px;
  1233. font-size:1.1em;
  1234. }
  1235.  
  1236. .modal.squareinfo.yoursquare.no-loser{
  1237. .bg-image('modal-bg.png');
  1238. width:@modal-width;
  1239. }
  1240.  
  1241. .modal.docked {
  1242. position: fixed;
  1243. top: 40%;
  1244. left: 0;
  1245. margin: 0;
  1246. .border-radius(20px, 20px, 0, 0);
  1247. transition: all 0.5s;
  1248. height: 200px;
  1249. width: 65px;
  1250. background-color: #d5dde4;
  1251. background-image: none;
  1252.  
  1253. .content {
  1254. display: none;
  1255. }
  1256.  
  1257. .docked-content {
  1258. .clearfix;
  1259. display: block;
  1260. height:200px;
  1261.  
  1262. .dockbutton {
  1263. .button;
  1264. .vertical-gradient(@yahooaccentcolor, #a74baf);
  1265. display: block;
  1266. width: 180px;
  1267. height: 40px;
  1268. padding: 5px 0;
  1269. overflow:visible;
  1270. font-size: 1.8em;
  1271. letter-spacing: 1px;
  1272. // explicit line-height to override any modal specific line-heights
  1273. line-height: 1.4em;
  1274. cursor: pointer;
  1275.  
  1276. -webkit-transform: rotate(-90deg);
  1277. -moz-transform: rotate(-90deg);
  1278. zoom: 1;
  1279. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  1280. transform: rotate(-90deg);
  1281. margin: 75px 0 0 -58px;
  1282.  
  1283. &:hover{
  1284. .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1285. }
  1286. }
  1287. }
  1288. }
  1289.  
  1290. .ie .modal.docked .docked-content .dockbutton {
  1291. margin: 10px 0 0 5px;
  1292. }
  1293. .ie7 .modal.docked .docked-content .dockbutton{
  1294. margin:10px 0 0 0;
  1295. }
  1296. .lt-ie9 .modal.docked .docked-content .dockbutton{
  1297.  
  1298. }
  1299.  
  1300. .docked-content {
  1301. display: none;
  1302. }
  1303.  
  1304. /* Initial overlays */
  1305.  
  1306. .intro-overlay {
  1307. width: 100%;
  1308. height: 100%;
  1309. position: absolute;
  1310. top: 0;
  1311. left: 0;
  1312. .bg-image('overlay-bg.png');
  1313. background-repeat: repeat;
  1314.  
  1315. h2.loading {
  1316. width: 220px;
  1317. .bg-image('spinner.gif', no-repeat, scroll, 50%);
  1318. font-size: 3em;
  1319. color: white;
  1320. position: relative;
  1321. display: block;
  1322. text-align: center;
  1323. top: 40%;
  1324. padding-top: 30px;
  1325. margin: auto;
  1326. }
  1327.  
  1328. ul {
  1329. padding-top: 150px;
  1330. margin: auto;
  1331. .clearfix;
  1332. width: 915px;
  1333.  
  1334. li {
  1335. float: left;
  1336. width: 305px;
  1337. height: 370px;
  1338. margin: 0;
  1339. //.bg-image('modal-tiny-bg.png', no-repeat);
  1340. .opacity(0);
  1341. -webkit-transition: opacity 0.2s;
  1342. -moz-transition: opacity 0.2s;
  1343. -o-transition: opacity 0.2s;
  1344. transition: opacity 0.2s;
  1345. text-align: center;
  1346.  
  1347. h2 {
  1348. padding: 120px 10px 10px;
  1349. color: white;
  1350. font-family: @arial;
  1351. text-transform: none;
  1352. }
  1353. }
  1354.  
  1355. li.introduced {
  1356. .opacity(1);
  1357. }
  1358.  
  1359. li.first {
  1360. .bg-image('intro/arrow-1.png', no-repeat);
  1361. }
  1362.  
  1363. li.second {
  1364. .bg-image('intro/arrow-2.png', no-repeat);
  1365. margin-top: 100px;
  1366. }
  1367.  
  1368. li.third {
  1369. margin-right: 0;
  1370. .bg-image('intro/arrow-3.png', no-repeat);
  1371.  
  1372. h2{
  1373. padding-top: 120px;
  1374. }
  1375. }
  1376. }
  1377. }
  1378.  
  1379. .ie7 .intro-overlay {
  1380. background: none;
  1381. }
  1382.  
  1383. .lt-ie9 .intro-overlay li h2{
  1384. font-size: 1.5em;
  1385. }
  1386.  
  1387. /* ================ Footer ================ */
  1388.  
  1389. footer{
  1390. position:fixed;
  1391. bottom:0;
  1392. width:100%;
  1393. .bg-image('footer-bg.png', no-repeat, scroll, 50%, 0px);
  1394. padding-top:26px;
  1395. }
  1396. footer .content{
  1397. .clearfix;
  1398. padding:10px 30px;
  1399. }
  1400.  
  1401. footer .euro-link{
  1402. float: left;
  1403. height: 1.6em;
  1404. h2{
  1405. margin:0;
  1406. }
  1407. a {
  1408. color: @yahooaccentcolor;
  1409. }
  1410. }
  1411.  
  1412. .lt-ie9 footer .euro-link{
  1413. h2 {
  1414. font-size: 1em;
  1415. }
  1416. }
  1417.  
  1418. footer .tellmemore{
  1419. cursor:pointer;
  1420. position:absolute;
  1421. top:30px;
  1422. left:50%;
  1423. width:100px;
  1424. text-align:left;
  1425. margin:-15px 0 0 -50px;
  1426. color:@yahooaccentcolor !important;
  1427. .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  1428. letter-spacing:-1px;
  1429. font-size:1.4em;
  1430. }
  1431.  
  1432. .lt-ie9 footer .tellmemore{
  1433. font-size: 1em;
  1434. letter-spacing: normal;
  1435. width: 120px;
  1436. left: 49%;
  1437. }
  1438. footer .tellmemore span{
  1439. float:right;
  1440. margin-top:7px;
  1441. .image-replaces-text('arrow-up-down.png', 18px, 14px);
  1442. }
  1443. footer.open .tellmemore span{
  1444. background-position:0 -16px;
  1445. }
  1446. footer .info{
  1447. .clearfix;
  1448. display:none;
  1449. }
  1450.  
  1451. footer .info p{
  1452. margin:0;
  1453. padding:30px 2% 30px 5%;
  1454. width:19%;
  1455. float:left;
  1456. .bg-image('footer-arrow.png', no-repeat, scroll, 0%, 50%);
  1457. }
  1458. footer .info p:first-child{
  1459. background-image:none;
  1460. padding-left:0;
  1461. }
  1462. footer .info p:last-child{
  1463. padding-right:0;
  1464. }
  1465. .copyright{
  1466. color:@lightgreyfontcolor;
  1467. font-size:0.6em;
  1468. margin: auto;
  1469. text-align: center;
  1470. margin-top: 15px;
  1471. width: 500px;
  1472. }
  1473.  
  1474. footer .share h2{
  1475. color:@yahooaccentcolor !important;
  1476. .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  1477. margin:0 15px 0 0 ;
  1478. letter-spacing:-1px;
  1479. font-size:1.4em;
  1480. line-height:1em;
  1481. float:left;
  1482. }
  1483.  
  1484. .lt-ie9 footer .share h2{
  1485. font-weight:normal;
  1486. font-size: 1.2em;
  1487. letter-spacing: normal;
  1488. }
  1489. footer .share ul, footer .share li{
  1490. line-height:1em;
  1491. padding:0;
  1492. }
  1493. footer .twitter-share-button{
  1494. margin:0;
  1495. }
Add Comment
Please, Sign In to add comment