/* * Document : mc.main.less * Created on : 31/08/2013, 12:30:00 * Author : Cynthia Juanilla * $Revision: 1979 $ * $LastChangedDate: 2014-03-11 15:40:41 -0300 (mar, 11 mar 2014) $ * $LastChangedBy: lganga $ * Description: * Main styles for the app */ @import "mc.mixins.less"; @import "mc.configuration.less"; @import "mc.reset.less"; @md: 991px; @sm: 767px; @xs: 479px; .container{ width: 100% !important; padding: 0; } .dfMc-Model{ .ie8{ .lineUpFull{ position: relative; min-height: 427px; .column{ position: absolute; } .fieldPosition{ position: absolute; left: 0; right: 0; margin: 0 auto; } .container-substitutes{ position: absolute; left: 0; right: 0; margin: 283px auto; } @media (max-width: @md) { .fieldPosition{ position: relative; } .container-substitutes{ position: relative; margin: 0 auto; } } } .navbar{ &.mobile{ .navbar-collapse{ &.in{ display: block; } } } } } } /* footer */ .dfMc-GameCast .footerCtn, .dfMc-Module .footerCtn, .dfMc-Components .footerCtn, .dfMc-Model .footerCtn, .dfMc-Page .footerCtn{ #gradient .vertical-three-colors(darken(@bg,10%), @bg, 28%,@bg ); height:20px; width:100%; height: 32px; /*margin-bottom: 5px; margin-top: 5px;*/ float:left; border-color:darken(@bg,25); .logo{ background: url("../images/creditoDF.png") no-repeat top center transparent; height:16px; margin-top: 8px; width:100%; line-height:26px; float: left; .tipoCredito(@bg); span{ display: none; } } } .dfMc-GameCast .dfMc-Module .footerCtn,.dfMc-GameCast .dfMc-Components .footerCtn,.dfMc-GameCast .dfMc-Page .footerCtn{ display: none; } @media (max-width: @xs) { .single .footerCtn{ display: none; } } /* fin footer */ .dfMc-Module, .dfMc-Components, .dfMc-Page, .dfMc-Model{ .dfReset; *{ .dfReset; } body{ background: @bg; } .loaderCtn, .moduleCtn, .templatesCtn, .errorCtn { display: none; } .modulePreloader { height:30px; width:30px; margin:5px auto; position:relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left:6px solid fadeout(@bg_dest_type, 75%); border-right:6px solid fadeout(@bg_dest_type, 75%); border-bottom:6px solid fadeout(@bg_dest_type, 75%); border-top:6px solid @bg_dest_type; border-radius:100%; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(359deg);} } .dfMc-noCssAnimations .modulePreloader{ background: url('./../images/ajax-loader2.gif') no-repeat scroll center center rgba(0, 0, 0, 0); height: 5px; margin: 0px auto; position: relative; width: 40px; } /* ESTILOS GENERICOS */ /* Cabecera */ .header { background-color: @color01; margin-bottom: 0; margin-top: 0; text-align: left; height:auto; overflow:visible; text-indent:0px; border-bottom:1px solid lighten(@bg,15%); line-height: 30px; height:auto; small{ padding:7px; line-height: 20px; color:@color01_type; line-height:30px; text-transform: uppercase; font: 14px @baseFontFamily; font-weight: bold; float:left; width:60%; } .navbar-nav.navbar-right:last-child{ margin-right:0; } } &.single .header.page-header{ .tipoIso(@color01); background-position: right center; background-repeat: no-repeat; } /* Fin Cabecera */ /* Copa confederaciones */ .copaconfederaciones{ .header { height: 60px; background: url("../images/head_gr.png") no-repeat scroll center left @color01; span{ padding-left:7px; height: 60px; width: 100%; line-height: 18px; text-indent: 0px; span{ background-color:@color01_type; color: @color01; padding-right:10px; } } } } /* Fin copa confederaciones */ /* Dropdown Navegacion torneo */ .dropdown.tournaments{ line-height: 10px; a{ padding: 1px 15px; color: @color01_type; text-transform: uppercase; font-weight: bold; span { padding: 7px; line-height: 20px; } &:hover, &:focus, &:hover .caret, &:focus .caret{ background:transparent; color:lighten(@bg_type,20%); border-bottom-color: @bg; border-top-color: @bg; } } &.open{ > a, > a:hover, > a:focus{ background-color: transparent; } .dropdown-toggle{ background-color: transparent; color:@color02_type; } &.active{ .dropdown-toggle{ background-color: transparent; color:@color01_h_type; } } > .dropdown-menu{ display: block; z-index: 9999; } } &.active{ .dropdown-toggle{ background-color: transparent; color:@color01_h_type; } } .dropdown-toggle{ .caret{ margin-left: 2px; margin-top: 7px; border-width: 4px 4px 0; border-bottom-color: @bg; border-top-color: @bg; border-right-color: transparent; border-left-color: transparent; vertical-align: top; &:hover, &:focus{ border-bottom-color: @bg; border-top-color: @bg; } } &:hover span{ color: @color01_h_type; } span, &:focus span{ color: @color01_type; } } .dropdown-menu{ width: auto; background-color: @bg; border-radius: 0px; right: 0; left: auto; top: 100%; z-index: 1000; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; border: 1px solid @color01; box-shadow: 0 5px 10px @color01; background-clip: padding-box; position: absolute; li{ a{ font-weight: bold; color:lighten(@bg_type,25%); &:hover, &:focus{ background: @color01 !important; color:@color01_type !important; outline: 0; } } } &:before { position: absolute; top: -7px; right: 12px; left: auto; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid @color01; border-left: 7px solid transparent; border-bottom-color: @color01; content: ''; } &:after { position: absolute; top: -6px; right: 13px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid @bg; border-left: 6px solid transparent; content: ''; } } } /* Fin Dropdown Navegacion torneo */ /* Navegacion */ .navbar{ min-height: 30px; .navbar-toggle { background: lighten(@color02,90%); padding: 10px 15px; color: @bg_type; text-transform: uppercase; &:hover{ color:@color01_h_type; background-color: @color02; text-decoration: none; cursor: pointer; } } .navbar-brand{ padding: 11px; color: @color01_type; font-size: 17px; text-transform: uppercase; font-weight: bold; line-height: 37px; text-decoration: none; cursor: default; display: none; } .first-level{ color: @color02_type; background: @color02; width: 100%; display:block; z-index: 999; >li{ line-height: 30px; text-transform: uppercase; font-weight:bold; margin-right:4px; >a{ text-decoration: none; color: @color02_type; line-height: 30px; padding: 0px 5px; position: relative; &:after{ content: ""; width: 1px; height: 40%; position: absolute; top: 30%; right: 0; background: @bg; //border-left: 1px solid @color02_type; } } >a:hover, &:hover >a{ color: @color01_type; background-color:@color01; text-transform:uppercase; cursor: pointer; position: relative; overflow: hidden; &:before{ border-radius: 50%; bottom: -30px; box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65); content: ""; height: 30px; left: 0; position: absolute; width: 100%; } } .second-level{ &.dsk.current{ display: block; } } >.subnav{ position: absolute; left: 0; width: 100%; } &.active{ background-color:@color01; &.spacing{ margin-bottom: 30px; } &:after{ width: 0px; background: none; } >a, >a:hover, >a:focus{ color: @color01_type; background-color:@color01; text-transform:uppercase; position: relative; overflow: hidden; &:before{ border-radius: 50%; bottom: -30px; box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65); content: ""; height: 30px; left: 0; position: absolute; width: 100%; } } >a:hover{ cursor: pointer; } .second-level{ //display: block; } >.subnav{ //display: block; } } } } .second-level{ color: @color01_type; background: @color01; width: 100%; &.hide-show{ position: absolute; top: -9999px; left: -9999px; } &.dsk{ display: none; &.current{ display: block; } } >li{ position: static; font-weight:bold; height: 30px; line-height: 30px; padding: 0 10px; &:hover{ color: @color01_type; background: @color01; >a{ color: @color01_type; background-color:@color01; } } >a{ text-decoration: none; color: @color01_type; line-height: 26px; padding: 0; &:after{ content: ""; width: 1px; height: 60%; position: absolute; top: 20%; right: -10px; border-right: 1px solid; } &:hover, &:focus{ color: @color01_type; background-color:@color01; border-bottom: 4px solid; cursor: pointer; } } &.active{ >a, >a:hover, >a:focus{ color: @color01_type; background-color:@color01; border-bottom: 4px solid; &:after{ //border-right: 0px solid; } } >.subnav{ // display: block; } } } .subnav{ float: left; width: 100%; li{ display: inline; float: left; } &:after{ .G_divider_horizontal; } } } .subnav{ color: @bg_type; margin-top: 5px; float: left; width: 100%; &.hide-show{ position: absolute; top: -9999px; left: -9999px; } &.dsk{ display: none; position: relative; &.current{ display: block; } } #gradient .vertical-three-colors( @bg, @bg, 20%,darken(@bg,10%)); >li{ text-transform: uppercase; font-size: 10px; float: left; line-height: 12px; font-weight:bold; height: 30px; line-height: 30px; position: relative; &:hover{ color:@color02_type; background:@color02; a{ color:@color02_type; background:@color02; &:after{ border: none; } } } a{ text-decoration: none; cursor: pointer; color:@bg_type; line-height: 30px; padding: 0; padding: 0 10px; display:block; height:100%; &:after{ content: ""; width: 1px; height: 60%; position: absolute; top: 20%; border-right: 1px solid; padding-right:10px; } &:hover{ cursor:pointer; color:@color02_type; background:@color02; } } &:last-child{ a:after{ border: none; } } &.active{ color:@color02_type; background:@color02; a, a:hover, a:focus{ background:@color02; color:@color02_type; } a:after{ border: none; } } } &:after{ .G_divider_horizontal; } @media (max-width: @xs) { li{float: none;} } } .dropdown-submenu{ position:relative; > .dropdown-menu{ top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } > a:after{ content:" "; width:0 !important; border-left: 4px solid transparent; border-right: 4px solid transparent !important; border-top: 8px solid @bg; margin-top:5px; display: block; margin-right: 16px; position: absolute; height: 0 !important; } &.open { > .dropdown-menu{ display:block; } > a:after{ border-left: 4px solid transparent; border-right: 4px solid transparent !important; border-bottom: 8px solid @bg; border-top: 0; } } .pull-left{ float:none; } &.pull-left > .dropdown-menu{ left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } } } .navbar-right{ float:right; margin-top: 5px; margin-bottom: 2px; } .navbar-top { font-family: @baseFontFamily; font-size: 12px; text-transform: uppercase; font-weight: bold; padding-left: 0px; line-height: 30px; text-indent: 0px; margin-bottom: 0; border-radius: 0; min-height: 30px; .dropdown-menu{ li{ a{ color:@color01_type; } } } #gradient .vertical-three-colors( @bg, @bg, 20%,darken(@bg,10%)); li{ line-height: 12px; margin: 0px; border-right: 0px; height: 30px; } .menu li{ border-right: 1px solid lighten(@bg_type,85%); } li > a{ color: @bg_type; padding: 0px 5px; line-height: 30px; &:hover,&:focus{ color: @color01_h_type; background: @color01_h; position: relative; overflow: hidden; &:after{ border-radius: 50%; bottom: -30px; box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65); content: ""; height: 30px; left: 0; position: absolute; width: 100%; } } } .active{ a,:hover,:focus { color: @color01_h_type; background: @color01_h; text-transform:uppercase; background-repeat:no-repeat; background-position:center bottom; position: relative; overflow: hidden; &:after{ border-radius: 50%; bottom: -30px; box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65); content: ""; height: 30px; left: 0; position: absolute; width: 100%; } } } } .btn{ border-radius:0px; border-color:@color01; background-image:none; background-color: @color01; height: 38px; line-height: 38px; color: @color01_type; font-family: @baseFontFamily; text-shadow:none; padding:0px; width: 100%; &:focus, &:hover{ background-color: lighten(@color01, 5%); } @media (max-width: @xs) { .mas{ font-size: 24px; } } } .dis .btn{ background-color: desaturate(@color01, 50%); .opacity(50); cursor: default; } .collapse.in { height: auto; } .menu-coord{ .subnav{ position: relative; width: 100%; &:after{ .G_divider_horizontal; } } } @media only screen and (max-width: 350px){ .ie8 #mainHeader .navbar.torneos .navbar .nav .dropdown-menu { right:120px; } #mainHeader{ .navbar{ } } .navbar-right a span{ display:none; } .dropdown.tournaments{ > a{ padding: 8px 15px 0; &:hover{ padding: 8px 15px 0; background:@color02; } } &.open{ > a, > a:hover, > a:focus{ background-color: @color02; } .dropdown-toggle{ background-color: @color02; } &.active{ .dropdown-toggle{ background-color:@color02; } } } } .content-style ul { width: 78% !important; } } @media (max-width: @xs) { .navbar.mobile{ border-bottom:1px solid @bg; /* Navbar Header*/ .navbar-header{ background: @color02; } /* Navbar Brand*/ .navbar-brand{ display: inline-block; padding: 0 0 0 20px; color: @color02_type; } /* Navbar Toogle*/ .navbar-toggle { background-color: @color02; .icon-bar{ border: 1px solid @bg; } &:focus{ outline: none; } } /* Navbar Collapse*/ .navbar-collapse.in{ overflow:visible; display: inline; } /* Navbar First level*/ .first-level{ >li{ /*position:relative; */ &:first-child{ a{ border-top: 1px solid lighten(@color02,75%); } } &.active{ &.spacing{ margin-bottom: 0 } } >a{ background: @color02; padding:5px 15px 5px 25px; line-height: 20px !important; border-bottom: 1px solid lighten(@color02,75%); font-size: 14px; color: @color02_type; .caret{ margin-left: 2px; margin-top: 7px; border-width: 8px 4px 0; border-bottom-color: @bg; border-top-color: @bg; border-right-color: transparent; border-left-color: transparent; vertical-align: top; float: right; } &:after{ background:none; } } &:hover > a{ &:before{ box-shadow: none; } .caret{ border-bottom-color: @bg; border-top-color: @bg; } } &.active >a{ background: @color01; color: @color01_h_type; outline: 0; &:before{ box-shadow: none; } .caret{ border-bottom-color: @bg; border-top-color: @bg; border-width: 0 4px 8px; border-bottom-color: @bg; border-top-color: @bg; border-right-color: transparent; border-left-color: transparent; } } .subnav{ position: relative; } } a.no-sub{ &:focus{ border-bottom:none; } } > li.dropdown.active{ > a{ background: @color02; color: @color02_type; } } } /* Navbar Second level*/ .second-level{ position:relative; top:0; font-size: 14px; float:none; left: 0; &.hide-show{ position: relative; top: 0; left: 0; } &.dsk.current{ display: none; } >li{ height:auto; padding: 0; &:hover:before, &:focus:before{ border-bottom-color: @color01_h; border-top-color: @color01_h; } >a{ padding:5px 15px 5px 35px; border-bottom:1px solid lighten(@color02,75%); line-height: 20px; background: no-repeat right center lighten(@color02, 30%); color:@color02_type; font-weight: bold; &:after{ border-right: 0px; width:0; right: 0; } } &.active{ >a, >a:hover, >a:focus{ border-bottom: 1px solid lighten(@color02,75%); outline: 0; background: @color01; color: @color01_h_type; } } } > li.dropdown-submenu.active{ > a{ background: lighten(@color02, 30%); color:@color02_type; } } &.mobile{ display: block !important; } } /* Navbar Subnav level*/ .subnav{ position: relative; float:none; margin-top: 0px; background: lighten(@color02,50%); &.dsk.current{ display: none; } &.hide-show{ position: relative; top: 0; left: 0; } li{ float:none; display:block; background:transparent; &:first-child{ a{ border-top: 0; } } a{ padding:5px 15px 5px 45px; display: block; color:@color02_type; line-height: 20px; font-size: 14px; background: lighten(@color02,50%); background-image: none; border-top: 1px solid #bfbfbf; font-weight: bold; &:after{ background-image: none; position:relative; border: none; } } &:focus a, &.active a{ background: @color01; color: @color01_h_type; outline: 0; } } &:after{ background-image: none; position:relative; border: none; } &.mobile{ // display: block; } } /* Navbar Suvnav Numbers*/ .subnav.numbers{ min-height:31px; overflow:auto; li{ float:left; min-width: 36px; text-align: center; &:hover a{ } &.active{ a{ } } a{ padding: 5px 0; border-top: 0; &:after{ width:auto; height:auto; position:relative; padding-right: 0 !important; border-right: none; } } } } .dropdown-submenu{ > .dropdown-menu{ margin-left: 0 !important; } > a:after{ height: auto; } } } } /* Fin navegacion */ /*---- Separador sub sub cabecera----*/ .G_subheader{ height:25px; text-transform:uppercase; text-align:center; font-size:12px; line-height:25px; background-color: @color02; color: @color02_type; clear:both; font-family:@baseFontFamily; } .subHeader{ .G_subheader; } &.single .subHeader{ .tipoIso(@color02); background-position: center right; background-repeat: no-repeat; } /*---- Línea Divisoria ----*/ .G_divider{ #gradient .vertical-three-colors( @bg, darken(@bg,20%), 70%, @bg); border-radius: 50%; content: ""; height: 80%; left: -10px; position: absolute; top: 10%; width: 3px; z-index: 2; } /*---- Línea Divisoria ----*/ .G_divider_horizontal{ #gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,40%)); height: 5px; width: 100%; border-top: 1px solid darken(@bg, 20%); border-bottom: 1px solid darken(@bg, 50%); content: ""; position: absolute; top: -5px; left: 0; } /*---- Barras comparativas----*/ .G_bars(@color){ background-image:url(../images/barra.png); background-position:top center; background-repeat:repeat-x; background-color:@color; } .G_comparisonBars{ height:14px; border-width:1px; position:relative; .awayBar,.homeBar{ position:absolute; top:0; height:100%; } .homeBar{ left:0; .G_bars(@homeColor); color:@homeColor_type; } .awayBar{ right:0; .G_bars(@awayColor); color:@awayColor_type; } } /*---- Titulo----*/ .GC_title { width: 100%; height:30px; #gradient .vertical-three-colors(@bg, @bg, 20%, darken(@bg,20%)); text-transform:uppercase; font:18px @type_Special; line-height:30px; text-align:center; display:block; color:@bg_type; border-top: 1px solid darken(@bg,20%); @media only screen and (max-width: 320px) { font-size: 12px; } } /*---- caption----*/ .caption { &.nav { height: 26px; .awayBar, .homeBar{ line-height: 26px; background-image: none; cursor: pointer; } .awayBar.on{ box-shadow: 4px 3px 6px lighten(@bg,50%) inset; } .homeBar.on{ box-shadow: 4px 3px 6px lighten(@bg,5%) inset; } } .G_comparisonBars; font-weight:bold; text-align:center; .awayBar, .homeBar { text-transform: uppercase; width: 50%; font-size: 12px; font-family:@baseFontFamily; line-height:14px; } .homeBar { color: @homeColor_type; } .awayBar { color: @awayColor_type; } } /*----10 Ranking----*/ .itemsRanking{ font-family:@baseFontFamily; margin-left: 0; &:after{ .G_divider; left:-1px; height:90%; } div.home, div.away { } span.title { line-height:20px; float:left; font-size: 12px; text-transform: uppercase; color: @bg_type; width: 80%; &.total{ display: none; } } .G_ranking{ float: left; height: 45px; width: 97%; margin-left: 3%; .player.title{ text-transform: uppercase; } .num{ color: @bg_dest_type; font-size: 20px; font-family:@type_Special; width: 15%; margin-left: 5%; text-align: left; line-height: 55px; } } .G_barsRanking{ height:14px; border-width:1px; position:relative; float: left; width:80%; #gradient .vertical(darken(@bg,10%),@bg); .box-shadow-inset(0, 1px, 4px, 1px, darken(@bg,20%)); .barraIn{ position:absolute; top:0; height:100%; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } } .home .G_barsRanking .barraIn{ left:0; .G_bars(@homeColor); } .away .G_barsRanking .barraIn{ left:0; .G_bars(@awayColor); } .top { margin-top: 15px; span.title { font-size: 20px; } .G_barsRanking{ height:20px; } span.title { line-height:30px; } &.G_ranking{ height: 60px } .num{ font-size: 35px; line-height: 70px; } } } /* Tablas */ .table{ font-family: @baseFontFamily; font-weight: normal; color: @bg_type; font-size: 11px; font-weight: bold; border-bottom:1px solid lighten(@bg_type,80%); thead > tr{ background-color:@color02; color:@color02_type; font-weight: normal; text-transform:uppercase; th{ font-weight: normal; text-align: center; &.name,&.team,{ text-align: left; } &.goals{ text-align: right; } } } tbody > tr { #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg); td{ text-align: center; padding: 2px 1px; line-height: 25px; &.pos{ font-size: 24px; color: @bg_dest_type; line-height: 24px; } &.name,&.team,{ text-align: left; text-indent: 5px; } .border{ border-right: 1px solid @bg_dest_type; margin-top: 0px; } &.goals{ text-align: right; } &.puntos.destacado, &.goals{ .border{ margin-top: 2px; .badge{ color: @color01_type; } } } .badge{ padding-left: 7px; padding-right: 7px; background-color: @color01; margin-right: 6px; line-height: 23px; text-align: center; min-width: 25px; border-radius: 15px; color:@color01_type; display: inline-block; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); vertical-align: baseline; white-space: nowrap; } } } } /* Fin Tablas */ /* Tooltip */ .tooltip{ z-index: 2000; } .tooltip-arrow{ border-bottom-color: transparent; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .tooltip-inner{ min-height:30px; font-size: 10px; padding-left: 5px; .tiempo{ float:left; } .guion{display:none;} .title{ float:left; width:8%; } .name{ float:left; width:100%; } .type{ width:100%; } .inc{ margin:0 18px; text-align:left; } } /* Fin Tooltip */ /* Bubble description*/ .description { margin:0 auto 0; .title{ background:@color01; width:95%; margin:0 auto; padding: 5px 22px; text-transform: uppercase; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 3px lighten(@color02, 70%); font-weight: bold; margin-top: 36px; } .data{ width: 95%; min-height:20px; background:@bg; margin:10px auto 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 3px darken(@bg, 60%); position: relative; color: @bg_type; .arrow-left { border-bottom: 12px solid transparent; border-right: 20px solid darken(@bg, 60%); border-top: 12px solid transparent; position: absolute; top: 7px; left: -20px; width: 0; height: 0; &:after{ content:""; width:0; height:0; border-bottom: 12px solid transparent; border-right: 20px solid @bg; border-top: 12px solid transparent; position:absolute; top: -12px; left: 0px; } } .arrow-right { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid darken(@bg, 60%); position: absolute; top: 7px; right: -20px; width: 0; height: 0; &:after{ content:""; width:0; height:0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid @bg; position:absolute; top: -12px; right: 0; } } .text span{ padding:15px 60px 0 22px; display:block; font-weight: bold; font-size: 18px; word-wrap: break-word; &:nth-child(2){ padding:0 84px 10px 12px; font-size: @baseFontSize; line-height: 16px; } } .social { display:none; border-top: 1px dotted @color01_type; } } @media (max-width: @xs) { .data{ .arrow-right { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid darken(@bg, 60%); right: -12px; &:after{ border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid @bg; position:absolute; top: -8px; } } .arrow-left { border-bottom: 8px solid transparent; border-right: 12px solid darken(@bg, 60%); border-top: 8px solid transparent; left: -12px; top: 7px; &:after{ border-bottom: 8px solid transparent; border-right: 12px solid @bg; border-top: 8px solid transparent; top: -8px; } } } } } /* Fin Bubble description */ /*Circle*/ .circle { display: block; width: 33px; height: 33px; -webkit-border-radius: 99em; -moz-border-radius: 99em; border-radius: 99em; box-shadow: 0px 0px 3px darken(@bg, 25%); background-color:#fff; font-size:18px; text-align: center; line-height: 34px; float:left; margin-right:18px; background: @refColor01; &.yellow{ background:@refColor02; } &.orange{ background:@refColor03; } &.red{ background:@refColor04; } &.blue{ background:@color01; } &.white{ background:@bg; } &.black{ background:@color02; } &.gray{ background: darken(@bg,5%); } &:last-child{ margin:0; } img{ vertical-align: middle; } img.no-vertical{ vertical-align:top; } } /* Fin Circle */ /* FIN ESTILOS GENERICOS*/ /* Esto no se donde ponerlo */ div.content div.scroll { width: inherit; position: relative; overflow: hidden; .headboard { width: 100%; position: absolute; z-index: 2; height: 30px; display:block; .browse { position: absolute; font:18px @type_Special; cursor: pointer; display: block; color: @color02_type; width: 50px; height: 0; border-top: 30px solid @color02; text-align: center; } .browse > span { position: absolute; top: -27px; } .left { border-right: 30px solid transparent; left:0; &.disabled{ display:none; } } .right { border-left: 30px solid transparent; right:0; &.disabled{ display:none; } } .browse:hover { border-top: 30px solid @color02_h; color: @color02_h_type; } } .items { width:100%; white-space: nowrap; position: absolute; } } div.content div.incidences.scroll { height: 90px; .comparing { clear: none !important; display: inline-block; width: inherit; } } .disabled { display: none; } /* Fin esto no se donde ponerlo */ /* MODULO MARCADOR ESTADOS*/ /* marcador */ .infoDate { font-family:@baseFontFamily; height:40px; line-height:20px; #gradient .vertical-three-colors( darken(@bg,15%) , @bg, 50%, @bg); .level { color: @bg_type; display:inline; margin-left:10px; font-size:11px; border-bottom:1px dotted @bg_type; } .date { color: @bg_dest_type; font-weight: bold; text-transform: uppercase; margin-left:10px; line-height:19px; span{ /*border-bottom:1px solid @bg_dest_type;*/ display:inline-block; } } } /* estados por default */ .infoDate{ .sb-level{ display:none;} .sb-status{ display:none;} .sb-time{ display: none;} .sb-aditionalTime{ display: none;} .sb-date{ display: none;} .sb-hour{ display: none;} } .status-notStarted { .infoDate{ .sb-level{ display: inline-block;} .sb-status{ display:none;} .sb-time{ display: none;} .sb-aditionalTime{ display: none;} .sb-date{ display: inline-block;} .sb-hour{ display: inline-block;} } } .status-finished { .infoDate{ .sb-level{ display: inline-block;} .sb-status{ display: inline-block;} .sb-time{ display: none;} .sb-aditionalTime{ display: inline-block;} .sb-date{ display: inline-block;} .sb-hour{ display: none;} } } .status-half { .infoDate{ .sb-level{ display: inline-block;} .sb-status{ display: inline-block;} .sb-time{ display: none;} .sb-aditionalTime{ display: none;} .sb-date{ display: none;} .sb-hour{ display: none;} } } .status-playing { .infoDate{ .sb-level{ display: inline-block;} .sb-status{ display: inline-block;} .sb-time{ display: inline-block;} .sb-aditionalTime{ display: inline-block;} .sb-date{ display: none;} .sb-hour{ display: none;} } } .infoScoreBoard { font-family:@baseFontFamily; #gradient .vertical(mix(@color01,@bg,15%),@bg); div.home, div.away { background:url(../images/degradeV_25-0.png) repeat-x top left; width:50%; padding:0; float:left; height:45px; line-height:45px; overflow:hidden; } div.name { line-height:45px; float: left; font-size: 15px; font-weight: bold; text-transform: uppercase; color: @bg_type; } div.away div.name{ float:right; text-align:right; width:auto; } div.score { font-weight: bold; padding:0 10px; .goals{ color: @bg_dest_type; font-size: 34px; font-family:@type_Special; float:right; } } div.home .score{border-right: 1px solid lighten(@bg,15%);} div.away div.score{ float:left; border-left-width: 1px; } div.shield { width:34px; height:100%; float:left; background-repeat:no-repeat; background-position:center center; } div.away div.shield{float:right;} .penalties{ background-color:@bg_type; color:@bg; display:block; height:18px; width:18px; line-height:18px; font-size:11px; text-align:center; float:left; .border-radius(50%); margin:10px 6px 0; position:relative; display:none; } .penalties:after{ content:""; top:0; left:1px; position:absolute; height:3px; width:16px; .border-radius(50%); .box-shadow(0px 22px 2px 0px darken(@bg,20%)); } div.away .penalties{ float:right; } } @media only screen and (max-width: 520px) { div.infoScoreBoard{ div.home { width:100%; border-bottom-width: 1px !important; border-right:0; } div.away { width:100%; border-top: 1px solid lighten(@bg,15%) !important; .name{ float:left; text-align:left; } .score{ float:right !important; border-left:0; } .shield{float:left;} .penalties{float:left;} } } .content-style ul { width: 85% !important; } } /* Fin Marcador */ /* Timeline */ &.single .timeLine{ padding-top: 35px; .tipoIso(@bg); background-position: right 10px; background-repeat: no-repeat; border-top: 1px solid lighten(@bg_type, 70%); } .timeLine { .descripcion{ display:none; height:10px; } margin-bottom: 10px; font-family:@baseFontFamily; font-size:12px; height: 50px; position: relative; background-color: @color01; color:@color01_type; box-shadow: inset 0 6px 4px -4px darken(@color01,50%), inset 0 -6px 4px -4px darken(@color01,50%); -moz-box-shadow: inset 0 6px 4px -4px darken(@color01,50%), inset 0 -6px 4px -4px darken(@color01,50%); -webkit-box-shadow: inset 0 6px 4px -4px darken(@color01,50%), inset 0 -6px 4px -4px darken(@color01,50%); .first, .second, .extratime1, .extratime2 { position:relative; } .line { position: absolute; margin-top: 22px; background-color: @color01_type; height: 7px; width: 100%; margin-left: 0; left: 0; clear:both; -webkit-border-radius: 0; border-radius: 0; } .time { position: absolute; top: 0; left: 50%; margin-left: -47.5%; width: 95%; .first { float: left; width: 50%; border-right: 1px solid darken(@color01,10%); height: 100%; margin-left:-1px; .progress .bar { #gradient .vertical(lighten(@color02,42.5%), @color02); } } .second { float: left; width: 50%; height: 100%; .progress .bar { #gradient .vertical(lighten(@color02,42.5%), @color02); } } .extratime1 { float: left; border-right: 1px solid darken(@color01,10%); .progress .bar { #gradient .vertical(lighten(@color02,42.5%), @color02); } } .extratime1,.extratime2 { float: left; width: 10.5%; height: 100%; display:none; .progress .bar { #gradient .vertical(lighten(@color02,42.5%), @color02); } } &.conAlargue{ .first,.second { width: 37.5%; border-right: 1px solid darken(@color01,10%); .progress .bar { #gradient .vertical(lighten(@color02,42.5%), @color02); } } .extratime1,.extratime2{ display:inline-block; } } .home, .away { height: 20px; line-height: 20px; margin-top: 4px; position: relative; .initials { float: left; color: @color01_type; text-transform: uppercase; } .incidences { position: absolute; float:left; width: 100%; height:20px; >div{ position: absolute; width: 12px; height: 18px; cursor: pointer; margin-left:-6px; background-repeat: no-repeat; } .change { width:16px; margin-left:-8px; } } } .home { .incidences { >div{ background-position: bottom; } .yellowCard {background-image: url(../images/amarilla_local.png); } .redCard {background-image: url(../images/roja_local.png);} .redByDoubleYellowCard {background-image: url(../images/roja_doble_amarilla_local.png);} .change {background-image: url(../images/cambio_local.png);} .goal {background-image: url(../images/gol_local.png);} .goal.own {background-image: url(../images/gol_local_encontra.png);} } } .away { .incidences { .yellowCard {background-image: url(../images/amarilla_visitante.png);} .redCard {background-image: url(../images/roja_visitante.png);} .redByDoubleYellowCard {background-image: url(../images/roja_doble_amarilla_visitante.png);} .change {background-image: url(../images/cambio_visitante.png);} .goal {background-image: url(../images/gol_visitante.png);} .goal.own {background-image: url(../images/gol_visitante_encontra.png);} } } } } .tooltip-arrow{ border-bottom-color: transparent; border-top-color: transparent; } .playerIn, .playerOut{ display: block; } @media only screen and (max-width: 520px) { .timeline{ .time{ .home .incidences{ .yellowCard {background-image: url(../images/amarilla_local_p.png);} .redCard {background-image: url(../images/roja_local_p.png);} .redByDoubleYellowCard {background-image: url(../images/roja_doble_amarilla_local_p.png);} .change {background-image: url(../images/cambio_local_p.png);} .goal {background-image: url(../images/gol_local_p.png);} .goal.own {background-image: url(../images/gol_local_encontra_p.png);} } .away .incidences{ .yellowCard {background-image: url(../images/amarilla_visitante_p.png);} .redCard {background-image: url(../images/roja_visitante_p.png);} .redByDoubleYellowCard {background-image: url(../images/roja_doble_amarilla_visitante_p.png);} .change {background-image: url(../images/cambio_visitante_p.png);} .goal {background-image: url(../images/gol_visitante_p.png);} .goal.own {background-image: url(../images/gol_visitante_encontra_p.png);} } div.tl-point-home, div.tl-point-away{ height: 11px; width: 9px;} div.tl-inc.goles { height: 15px; width: 10px;} } } } /* Fin Timeline */ /* Comparison */ .teamComparison{ width: 100%; .comparing{ clear:both; height:90px; //#gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,20%)); background: @bg; .title { .GC_title; } .num{ height: 60px; font:20px @type_Special; font-weight:bold; text-align:center; line-height: 60px; float:left; width:5%; //#gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,20%)); color:@bg_type; } .num1{ margin-right:0%; //.box-shadow(3px 0px 8px -2px darken(@bg,40%)); z-index:3; position:relative; } .num2{ margin-left:0%; //.box-shadow(-3px 0px 8px -2px darken(@bg,40%)); z-index:3; position:relative; } .bar{ margin-top: 25px; width:89.6%; float:left; .G_comparisonBars; #gradient .vertical(darken(@bg,10%),@bg); .box-shadow-inset(0, 1px, 4px, 1px, darken(@bg,20%)); } .center, .center:after{ width:0; height:0; position:absolute; bottom:0; left:50%; margin-left:-7px; border-top-color:transparent; border-right-color:transparent; border-left-color:transparent; border-style:solid; border-width:0 7px 10px; } .center:after{ content:""; border-bottom-color:@bg_type; bottom:-10px; border-width:0 6px 9px; margin-left:-6px; } } } @media only screen and (min-width: 700px){ .teamComparison{ .comparing{ .num{ width:4.9%; } } } } @media only screen and (max-width: 520px) { .teamComparison{ .comparing{ .num{ width:4.9%; } .bar { width:61%; } } .mensaje{ width:95%; } .num { width:18% !important; } } } /* Fin Fomparison */ /* LineUp */ .lineUpFull { margin-top: 1px; div.gameField { position: relative; div.shapes { div { position: absolute; top: 144.5px; border: 1px solid white; } div.centro { margin-top: -50px; height: 100px; width: 50px; } } div.positions { position: relative; div { position: absolute; width: 48px; top: 144.5px; span.container-player { display: block; width: 45px; span.player { display: block; margin-bottom: 10px; font: 13px @type_Special; height: 46px; line-height: 40px; text-align: center; cursor: pointer; &.hover-player { #translucent .background(@color02, .5); .border-radius(60px); } } } } } } .homeTeam > div.gameField { div.area-home { background:url(../images/area_loca2l.png) no-repeat transparent center center; position:absolute; top: 55px; left:0px; display:block; width:109px; height: 173px; } div.area-center-home { background:url(../images/media_cancha_loc2.png) no-repeat transparent center center; position:absolute; top: 0px; right:0px; width:45px; height: 283px; } div.shapes { div.center{ right: 0; .border-radius(70px 0 0 70px); border-right:none; } } div.positions { div.goalkeeper { left: 0; } div.defender { left: 20%; } div.midfielder { left: 45%; } div.playmaker { left: 62.5%; } div.forward { left: 80%; } span.player { background-image: url(../images/camiseta_negra.png); background-repeat:no-repeat; color: @homeColor_type; } } } .awayTeam > .gameField { div.area-away { background:url(../images/area_visitante2.png) no-repeat transparent center center; position:absolute; top: 55px; right:0px; display:block; width:109px; height: 173px; } div.area-center-away { background:url(../images/media_cancha_vis2.png) no-repeat transparent center center; position:absolute; top: 0px; left:0px; width:46px; height: 283px; } div.shapes { background-position: 290px 0; div.chica, div.ancha { right:0; } div.medialuna{ right: 81px; .border-radius(70px 0 0 70px); } div.centro{ left: 0; .border-radius(0 70px 70px 0); border-left:none; } } div.positions { div.goalkeeper { right:0; } div.defender { right: 20%; } div.midfielder { right: 45%; } div.playmaker { right: 62.5%; } div.forward { right: 80%; } span.player { background-image: url(../images/camiseta_blanca.png); background-repeat:no-repeat; color: @awayColor_type; } } } > .field3d { white-space: nowrap; position:relative; > .homeTeam, > .awayTeam { position: absolute; display: inline-block; width: 50%; height: 100%; } .gameField { height: 89%; div.positions { height:100%; div { top:0; height:100%; width:10%; } } } .homeTeam { right: 50%; div.positions { position: relative; position: relative; div { position: absolute; width: 48px; top: 0px; span.container-player { display: block; width: 48px; span.player { display: block; margin-bottom: 10px; font: 13px @type_Special; height: 40px; line-height: 40px; text-align: center; cursor: pointer; } } } div.goalkeeper { .skew(30deg, 0); right:83%; span.player { .skew(-30deg, 0); } } div.defender { right:70%; .skew(-19.5deg, 0); span.player { .skew(19.5deg, 0); } } div.midfielder { right:56%; .skew(-11.5deg, 0); span.player { .skew(11.5deg, 0); } } div.playmaker { right:36%; .skew(-9deg, 0); span.player { .skew(9deg, 0); } } div.forward { right:15%; .skew(-3deg, 0); span.player { .skew(3deg, 0); } } } } .awayTeam { right: 0; div.positions { div.goalkeeper { right:15%; .skew(-30deg, 0); span.player { .skew(30deg, 0); } } div.defender { right:36%; .skew(19.5deg, 0); span.player { .skew(-19.5deg, 0); } } div.midfielder { right:56%; .skew(11.5deg, 0); span.player { .skew(-11.5deg, 0); } } div.playmaker { right:70%; .skew(9deg, 0); span.player { .skew(-9deg, 0); } } div.forward { right:83%; .skew(3deg, 0); span.player { .skew(-3deg, 0); } } } } } .msjDatos{ color: @color02_type; height: 50px; left: 49%; margin-left: -168px; margin-top: -38px; position: absolute; top: 50%; background-color: fadeout(@color01_type, 30%); z-index: 9999; border: none; text-align: center; line-height: 45px; padding: 8px 14px 8px 14px; text-shadow:none; text-transform: uppercase; font-size: 12px; display: none; } .field { position:relative; white-space: nowrap; >.homeTeam, > .awayTeam { display: inline-block; width: 50%; } > .homeTeam { border-left: none; div.positions { height:100%; div { .tooltip{ height:auto; width: auto; .tooltip-inner{ width:100%; padding-right: 5px; line-height: 30px; } div{ &.tooltip-arrow{ position: inherit; top: 14px; width: 0px; } height:auto; position:relative; width: 100%; } } top:0; height:100%; } .tooltip{ height:auto; width: auto; .tooltip-inner{ width:100%; padding-right: 5px; line-height: 30px; } div{ &.tooltip-arrow{ position: inherit; top: 14px; width: 0px; } height:auto; position:relative; width: 100%; } } } } > .awayTeam { margin-left: -4px; z-index: 2; div.positions { height:100%; /*height: 283px;*/ div { .tooltip{ height:auto; width: auto; width: auto; div{ &.tooltip-arrow{ position: inherit; top: 14px; width: 0px; margin-right: 0px } height:auto; position:relative; width: 100%; &.tooltip-inner{ margin:0; padding-right: 5px; line-height: 30px; } } } top:0; height:100%; } } } div.gameField { height: 283px; background-image: url('../images/bg_canchita.jpg'); div.positions { height:100%; div { top:0; height:100%; } } } } > .starting, > .substitutes { > .home, > .away { float: left; width: 50%; > div { display: block; height: 28px; line-height: 28px; border: 1px solid lighten(@bg_type,80%); font-size: 12px; font-weight: bold; .number { float:left; text-align:center; color: @bg_type; width: 40px; } .name{ color:@bg_type; &.hover-name { color: @bg_dest_type; } } } .player { font-family:@baseFontFamily; position: relative; #gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,20%)); cursor: pointer; .incidences { position: absolute; div { width: 14px; height: 14px; display: inline-block; margin:0 5px; } .yellowCard { background: url(../images/ico_tarjeta_amarilla.gif) no-repeat; } .redCard { background: url(../images/ico_tarjeta_roja.gif) no-repeat; } .goal { background: url(../images/ico_pelota.png) no-repeat; } .goal.own { background: url(../images/ico_pelota_encontra.png) no-repeat; } .out { background: url(../images/sale.png) no-repeat; } .in { background: url(../images/entra.png) no-repeat; } } } .dt { background-color: #E7E7E7; padding:0 40px; } } > .home { .incidences { right: 10px; } } > .away { > div { text-align: right; .incidences { left: 10px; } .number { float: right; } } } } .scroll { height: 355px; width:100%; margin: 0 auto; border: 1px solid lighten(@color01_h,80%); .homeTeam, .awayTeam { width:100%; display: inline-block; span.title { .GC_title; } div.player { display: block; height: 25px; line-height: 26px; font-size: 12px; font-weight: bold; #gradient .vertical-three-colors(@bg, @bg, 40%, darken(@bg,20%)); span.position { padding: 0 10px; color: @bg_dest_type; text-transform: uppercase; } } div.gameField { border: 5px solid @bg; } } .homeTeam > .gameField { .box-shadow-inset(-10px, 0px, 15px, -2px, darken(@bg,80%)); } .awayTeam > .gameField { .box-shadow-inset(10px, 0px, 15px, -2px, darken(@bg,80%)); } } .team-name{ border:3px solid darken(@bg,15%); border-top: none; border-left: none; } .team-name{ position: absolute; &.last{ right: 0; } } .container-substitutes{ clear: none; } .column{ min-height: 290px; } .team-name.last{ border:3px solid darken(@bg,15%); border-top: none; border-right: none; } .team-name .caption.nav{ height: 30px; border:none; } .team-name .caption.nav .homeBar{ line-height: 30px; width: 100%; background-image:url(../images/barra.png); color:@homeColor_type; } .team-name .caption.nav .awayBar{ line-height: 30px; width: 100%; background-image:url(../images/barra.png); color:@awayColor_type; } .team-name .player, .substitutes-content .player{ background-color:@color02; font-weight: normal; text-transform:uppercase; #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg); padding: 4px 18px; cursor:pointer; position: relative; } .team-name .player:hover, .substitutes-content .player:hover, .team-name .player.hover-name, .substitutes-content .player.hover-name, { background: darken(@bg,15%); box-shadow:0px -1px 6px 0px darken(@bg,40%) inset; } .team-name .player .number, .substitutes-content .number{ padding-left: 7px; padding-right: 7px; background-color: @color01; margin-right: 6px; line-height: 23px; text-align: center; min-width: 25px; border-radius: 15px; color:@color01_type; display: inline-block; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); vertical-align: baseline; white-space: nowrap; font-size: 10px; } .team-name .away, .substitutes .away{ text-align: right; .player{ min-height: 31px; .number{ float:right; } .name{ margin-right: 12px; } } } .team-name .player .name, .substitutes-content .name{ font-size: 10px; font-weight: normal; color:@bg_type; &.hover-name{ color: @bg_type; } } .substitutes-content{ overflow-x: hidden; height:114px; border-bottom:1px solid lighten(@bg_type,85%); } .substitutes-content .mc-away-substitutes{ border-left:1px solid lighten(@bg_type,85%); } .hover-player { #translucent .background(@color02, .5); .border-radius(60px); color: @bg_type; } .away, .home{ .player{ .incidences{ position: absolute; top: 10px; div { width: 14px; height: 14px; display: inline-block; margin:0 5px; } .yellowCard { background: url(../images/ico_tarjeta_amarilla.gif) no-repeat; } .redCard { background: url(../images/ico_tarjeta_roja.gif) no-repeat; } .goal { background: url(../images/ico_pelota.png) no-repeat; } .goal.own { background: url(../images/ico_pelota_encontra.png) no-repeat; } .out { background: url(../images/sale.png) no-repeat; } .in { background: url(../images/entra.png) no-repeat; } } } } .away{ .incidences { left: 0; } } .home{ .incidences { right: 0; } } @media (max-width: @md) { .team-name{ position: relative; &.mobile{ border:none; &.last{ border-left:1px solid lighten(@bg_type,85%); } } &.last{ right: 0; } } .column{ min-height: 0; } .container-substitutes{ clear: left; } } @media only screen and (max-width: 520px) { div.gameField { div.positions { div { span.container-player { span.player { font: 9px @type_Special; line-height:45px; &.hover-player { #translucent .background(@color02, .5); .border-radius(60px); } } } } } } .homeTeam > div.gameField { div.area-home { background:url(../images/area_local_p.png) no-repeat transparent center center; } div.area-center-home { background:url(../images/media_cancha_loc_p.png) no-repeat transparent center center; } div.shapes { div.center{ .border-radius(50px 0 0 50px); } } .starting{ .home, .away{ width:100%; } } } .awayTeam > div.gameField { div.area-away { background:url(../images/area_visitante_p.png) no-repeat transparent center center; } div.area-center-away { background:url(../images/media_cancha_vis_p.png) no-repeat transparent center center; } div.shapes { div.center{ .border-radius(50px 0 0 50px); } } } > .starting > .home, > .substitutes > .home{ //display:block; width:100%; } > .starting > .away, > .substitutes > .away{ width:100%; } > .starting > .home.display, > .substitutes > .home.display{ display: none; } > .starting > .away.display, > .substitutes > .away.display{ display: none; } .caption{ display: block; } .field div.gameField, .field div.gameField{ height: 210px; } .homeTeam > div.gameField div.area-center-home{ height: 210px; background: url(../images/media_cancha_loc_pp.png) center center transparent no-repeat; } .homeTeam > div.gameField div.area-center-away, .awayTeam > div.gameField div.area-center-away{ height: 210px; background: url(../images/media_cancha_vis_pp.png) center center transparent no-repeat; } .awayTeam > div.gameField div.area-away,{ top:18.5px; background: url(../images/area_visitante_pp.png) no-repeat center center transparent; } .homeTeam > div.gameField div.area-home{ top:18.5px; background: url(../images/area_local_pp.png) no-repeat center center transparent; } .awayTeam > div.gameField div.positions span.player{ background: url("../images/camiseta_visitante_p.png") no-repeat center center transparent; } .homeTeam > div.gameField div.positions span.player{ background: url("../images/camiseta_local_p.png") no-repeat center center transparent; } div.gameField div.positions div{ width: 20%; } div.gameField div.positions div span.container-player{ width:34px; } .substitutes{ .home{ width:100%; &.display{ display: none; } } .away{ width:100%; &.display{ display: none; } } } .team-name{ .team-name{ .name{ &.hover-name{ color: @bg_dest_type; } } } } } @media only screen and (max-width: @xs) { .starting{ .home{ width:100%; &.display{ display: none; } } .away{ width:100%; text-align: right; &.display{ display: none; } } } .substitutes{ .home{ width:100%; &.display{ display: none; } } .away{ width:100%; &.display{ display: none; } } } .team-name{ .team-name{ .name{ &.hover-name{ color: @bg_dest_type; } } } } div.gameField { div.positions{ div span{ &.container-player{ width: 100%; } } } } } } @media(max-width: 244px){ .timeline{ .time{ margin-left: -48.5%; } } } /* Fin LineUp */ /* Coordinates */ .coordinates { .gameField { img{width: 100%;} white-space: nowrap; position: relative; margin: 50px 20px; .incidences { position: absolute; width: 55.5%; height: 82.8%; top: 5%; left: 22.5%; .point-home, .point-away{ position: absolute; height:25px; width:20px; margin:-20px 0 0 -10px; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-position: center top, center bottom; background-repeat: no-repeat; } .point-home { background-image: url(../images/ico_disparos_loc.png), url(../images/ico-shadow.png); &.goal{ background-image: url(../images/ico_disparos_loc.png), url(../images/ico-mark-gol.png); } } .point-away { background-image: url(../images/ico_disparos_vis.png), url(../images/ico-shadow.png); &.goal{ background-image: url(../images/ico_disparos_vis.png), url(../images/ico-mark-gol.png); } } &.incHide .point-home, &.incHide .point-away, .point-home.newPoint, .point-away.newPoint{ .opacity(0); pointer-events:none; height:65px; margin-top:-60px; } } &:after, &:before{ content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:7%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } &:after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } } .contentCoordinates{ position: relative; top: 38px; margin-bottom: 22px; } @media only screen and (max-width: 520px) { .gameField { margin: 15px 5px; .incidences { .point-home,.point-away{ height:15px; width:12px; margin:-12px 0 0 -6px; } .point-home { background-image: url(../images/ico_disparos_loc_p.png), url(../images/ico-shadow-small.png); &.goal{ background-image: url(../images/ico_disparos_loc_p.png), url(../images/ico-mark-gol-small.png); } } .point-away { background-image: url(../images/ico_disparos_vis_p.png), url(../images/ico-shadow-small.png); &.goal{ background-image: url(../images/ico_disparos_vis_p.png), url(../images/ico-mark-gol-small.png); } } &.incHide .point-home, &.incHide .point-away{ height:230px; margin-top:-27px; } } } } @media (max-width: @xs) { padding-bottom: 22px; } } /* Fin Coordinates */ /* Planteles */ .planteles{ .nav-pills{ padding: 5px; background-color:@bg; >li{ cursor: pointer; &.active >a,&.active >a:hover,&.active >a:focus, { background-color:@bg; } a{ padding: 5px; &:hover{ background: none; .teamLogo{ border: 3px solid @color02; } } } &.active{ .teamLogo{ border: 3px solid @color02; } } } } .show .teamLogo{ border: 3px solid @color02; } .teamLogo{ background-color: #FFFFFF; border: 3px solid transparent; border-radius: 50%; box-shadow: 0 0 5px 0 darken(@bg, 10%); display: inline-block; height: 40px; line-height: 40px; position: relative; text-align: center; width: 40px; img{ margin: 5px auto; } } .head{ float: left; width: 100%; .title{ float: left; width: 100%; text-align: center; font-size: 14px; text-transform: uppercase; background-color: @color01; color: @color01_type; font-weight: normal; height: 20px; line-height: 20px; } .country{ #gradient .vertical(mix(@color01,@bg,15%),@bg); text-align: center; width: 100%; float: left; height: 60px; line-height: 60px; padding: 10px 0; } .name{ color:@bg_type; font-size: 14px; text-transform: uppercase; } } .table{ float: left; th{ font-size: 11px; background-color:@color02; color:@color02_type; font-weight: normal; text-transform:uppercase; text-align: center; &.jugador{ text-align: left; } } tbody > tr{ td{ &.nombre{ text-align: left; padding: 2px 0; } } &.cabezal{ background-color:@color02; color:@color02_type; th{ &.ocultar{ display: none; } } } } } div.table-wrapper div.scrollable table.responsive th.ocultar { display: block; width: 232%; } .button-style{display:none;} } @media (max-width: @xs) { .plantel{ table { border-collapse: separate; &.responsive{ margin-bottom: 0px; td,th{ position: relative; white-space: nowrap; overflow: hidden; } th:first-child, td:first-child, &.pinned td{ display: none; } } } .pinned{ padding-bottom: 16px; position: absolute; left: 0; top:0; background: @color01_h_type; width: 210px; overflow: hidden; overflow-x:hidden; table{ border-right: none; border-left: none; width: 100%; th, td{ white-space: nowrap; } } td:last-child { border-bottom: 0; } } .table-wrapper{ position: relative; margin-bottom: 20px; overflow: hidden; float: left; width: 100%; .scrollable{ overflow: scroll; overflow-y:hidden; .responsive{ th.ocultar{ display: block; } } table{ margin-left: 210px; tr.cabezal{ th{ display: none; span{ color:@color02; } } } } } } } .fase{ margin-top: 5px; } .table tbody > tr td .border{ border-right: none !important; position:relative } .button-style{ display:block !important; position:absolute; right:0; top:0; box-shadow:0px -1px 6px 0px darken(@color01,30%) inset; background:@color01; width: 27px; height: 25px; padding: 0 8px !important; vertical-align: middle !important; cursor: pointer; color: @color01_type; text-align: center; font-size: 18px !important; line-height: 23px !important; &.active{ background:@color01_h; color: @color01_h_type; box-shadow:0px -1px 6px 0px darken(@color01_h,30%) inset; } } .content-style{ background:darken(@bg,10%); padding:12px 0 !important; margin-top: 3px !important; box-shadow:0px -1px 6px 0px darken(@bg,20%) inset; width: 100%; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .content-style ul{ margin:0 0 0 30px; width:90%; } .content-style li{ border-bottom: 1px solid darken(@bg,20%); line-height: 24px; border-top: 1px solid @bg; } .content-style li:first-child{ border-top: none; } .content-style li:last-child{ border-bottom: none; } .select-menu { display: none; width: 100%; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; background: url("../images/arrow_select.png") no-repeat scroll right center @color02; color: @color02_type; height: 30px; line-height: 23px; margin-bottom: 1px !important; padding-left: 10px !important; font-weight: bold; text-align: left; -moz-appearance: none; -webkit-appearance: none; appearance: none; text-transform: uppercase; cursor:pointer; font-weight: bold; padding-top: 5px !important; border-radius: 0; } .select-menu option{ background: @bg; color:@bg_type; cursor:pointer; } .select-menu:focus{ outline:none; } } @media (max-width: 290px){ .content-style ul { width: 75% !important; } } /* Fin Planteles */ /* Fixture */ .fixture{ font-size: 11px; .fase{ display: none; margin-top:5px; } .show, .fase.active{ display: block; } background: darken(@bg,5%); .fechas{ background: @color02_h} .space{ margin-top: 35px; } .fecha{ color:@color01_type; text-align: center; line-height: 30px; text-transform: uppercase; font-weight: bold; display: none; .subHeader{ margin: 0 4px; } .penales{ .badge{ background-color: @color02; width: 24px; color: @color02_type; } } .match{ .match-inner{ #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg); margin: 4px; } } .match, .detalles{ .local, .visitante{ #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg); .escudo{ float: left; line-height: 20px; //width: 20%; margin-top: 10px; } .equipo{ float: left; color: @bg_type; line-height: 34px; white-space: nowrap; margin-top: 4px; //width: 55%; } .penales{ float: left; line-height: 24px; margin-top: 9px; //width: 10%; } .resultado{ float: left; color:@bg_dest_type; font-size:34px; line-height: 40px; //width: 15%; } } @media (max-width: @xs) { .visitante{ .escudo{ float: left !important; } .resultado, .equipo, .penales{ float: right !important; } } .link{ height: 80px; margin-top: -40px; a, a span{ height: 100%; line-height: 80px; } } } } .detalles{ #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%,darken(@bg,10%)); font-weight: normal; text-transform: none; height: 20px; float: left; .arbitro, .dia, .hora, .estado{ color: @bg_type; height: 20px; line-height: 20px; overflow: hidden; } .estado{ font-weight: bold; } } } @media only screen and (min-width: @md) { .positionSection{ position: absolute; right: 0; } } } /* Fin Fixture */ /* Leaders*/ .leaders { @media only screen and (max-width: @xs) { .home.display{ display: none; } .away.display{ display: none; } .bar.display{ display: none; } .num.display{ display: none; } .teamComparison{ .comparing{ text-align: center; .num{ width: 100%; margin: 0 auto; float: none; } } } } } /* Fin Leaders*/ /*Relato*/ .commentary{ background: darken(@bg,5%); .lines{ background: url('./../images/linea-punteada.png') 10.8% 0 repeat-y, url('./../images/linea-punteada.png') 89% repeat-y; display:block; margin:0 auto; } .teams{ width: 78.7%; position: relative; margin: 10px auto; img{ padding: 4px 5px; vertical-align: top; } .local{ float:left; background-repeat: no-repeat !important; background-position: center !important; } .away{ float:right; background-repeat: no-repeat !important; background-position: center !important; } } .position-circle{ width:36px; display:block; margin:0 auto; position:relative; } .icons .circle{ margin:15px 0 0; &.teams{ width:36px; height:36px; } .goal{ background: url('./../images/ico_gol_afavor.png') no-repeat center center; display:block; width:16px; height:16px; padding: 17px; &.own{ background: url('./../images/ico_gol_encontra.png') no-repeat center center; display:block; width:16px; height:16px; padding: 17px; } } .change{ background: url('./../images/ico_cambios.png') no-repeat center center; display:block; width:23px; height:18px; padding: 17px; } .cornerKick{ background: url('./../images/ico_corner.png') no-repeat center center; display:block; width:24px; height:30px; padding: 17px; } .offside{ background: url('./../images/ico_offside.png') no-repeat center center; display:block; width:19px; height:23px; padding: 17px; } .yellowCard{ background: url('./../images/ico_t_amarilla.png') no-repeat center center; display:block; width:15px; height:18px; padding: 17px; } .redCard{ background: url('./../images/ico_t_roja.png') no-repeat center center; display:block; width:19px; height:22px; padding: 17px; } .redByDoubleYellowCard{ background: url('./../images/ico_t_roja_x2amarillas.png') no-repeat center center; display:block; width:23px; height:18px; padding: 17px; } } .time { position: relative; .data-small{ width: 100%; min-height:45px; background:@bg; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 3px darken(@bg, 60%); position: relative; margin-top: 10px; color: @bg_type; span{ font-size: 22px; font-weight: bold; display:block; padding: 8px 10px 0px 20px; line-height: 16px; font-family: @type_Special; &:nth-child(2){ padding: 2px 10px 0px 20px; font-size: 18px; } } .arrow-right { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid darken(@bg, 60%); position: absolute; top: 14px; right: -14px; width: 13px; height: 14px; &:after{ content:""; width:0; height:0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid @bg; position:absolute; top: -8px; right: 0px; } } .arrow-left { border-bottom: 8px solid transparent; border-right: 14px solid darken(@bg, 60%); border-top: 8px solid transparent; position: absolute; top: 14px; left: -14px; width: 13px; height: 14px; &:after{ content:""; width:0; height:0; border-bottom: 8px solid transparent; border-right: 14px solid @bg; border-top: 8px solid transparent; position:absolute; top: -8px; left: 0px; } } &.left{ position:absolute; right:0; } &.rigth{ position:absolute; left:0; } } } .commentaryItem{ &.hasMinHeight { .description { .data { background:@color02; color:@color02_type; } } } &.outstanding { .description { .data{ background:@color01; margin:10px auto 0; box-shadow: 0px 0px 3px lighten(@color02, 70%); .arrow-right { border-left: 20px solid lighten(@color02, 70%); &:after{ border-left: 20px solid @bg_dest_type; } } .arrow-left { border-right: 20px solid lighten(@color02, 70%); &:after{ border-right: 20px solid @bg_dest_type; } } } } } } .twitter{ width: 63%; min-height:20px; background:@color01; margin:10px auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin:10px auto; box-shadow: 0px 0px 3px lighten(@color02, 70%); padding:20px; word-wrap: break-word; .picture{ width:50px; height:50px; display:block; background:@bg; float:left; } .data{ color:@color01_type; padding-left: 14px; line-height: 16px; span{ display:block; } } } .circle.incTypeIcon{ width:12px; height:12px; margin: 24px 0 0 12px !important; } @media (max-width: 1200px) { .description .data{ width:90%; } .time{ .data-small{ &.left{ width: 90%; left: 0; } &.right{ width: 90%; right: 0; position: absolute; } span{ font-size: 16px; padding: 8px 0 0; text-align: center; &:nth-child(2) { font-size: 14px; padding: 2px 0 0; } } } } } @media (max-width: @md) { .time{ .data-small{ &.left{ width: 80%; left: 0; } &.right{ width: 80%; right: 0; position: absolute; } span{ font-size: 16px; padding: 8px 0 0; text-align: center; &:nth-child(2) { font-size: 14px; padding: 2px 0 0; } } } } .description{ .data{ .text{ span{ &:nth-child(2){ padding:0 12px 10px 12px; } } } } } } @media (max-width: @sm) { .lines{ background-position: 19.5% 0, 80.55% 0; } .teams{ width: 61.85%; } .description .data{ width:80%; } } @media (max-width: @xs) { .lines{ background-position: 0% 0, 96% 0; } .teams{ width: 97%; margin: 10px 0; } .time .data-small { width: 36px; margin: 18px auto 0; position: absolute; min-height: 48px; right: 0; .arrow-top{ border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid darken(@bg, 60%); position: absolute; top: -14px; left: 0; width: 13px; height: 14px; margin: 0 auto; right: 0; &:after{ content:""; width:0; height:0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid @bg; position:absolute; top: 1px; left: -8px; } } span { padding: 10px 0 0; &:nth-child(2){ padding: 2px 0 0; } } } .description { .data{ width: 90%; min-height: 100px; .text{ span{ &:nth-child(2){ font-size: 12px; } } } } &.expand-right{ width:78%; float: right; .data{ width: 83%; float: right; right: 38px; } } &.expand-left{ width:78%; float: left; .data{ width: 83%; float: left; left:5px; } } } .commentaryItem.hasMinHeight .description .data { min-height: 20px; } .commentaryItems:nth-child(odd) .description .data { width: 80%; } .icons.right{ .position-circle{ width:30px; right: -11px; .icons{ .incTypeIcon{ margin-left: 8px !important; } } } } .twitter{ width: 73%; } } @media (max-width: 390px) { .lines{ background-position: 0% 0, 97% 0; } .teams{ width: 97%; } .icons.right{ .position-circle{ right: -5px; } } } @media (max-width: 290px) { .lines{ background-position: 0% 0, 100% 0; } .teams{ width: 100%; } .description { &.expand-right{ width:80%; .data{ right: 28px; } } &.expand-left{ width:80%; } } .icons.right{ .position-circle{ right: 2px; } } } @media (max-width: 270px) { .description { &.expand-right{ width:76%; .data{ right: 31px; } } &.expand-left{ width:76%; .data{ width: 74%; left:11px; } } } .commentary{ .icons{ &.right{ .position-circle{ width: auto; } } } } } @media (max-width: 250px) { .commentary{ .icons{ &.right{ .position-circle{ width: auto; } } } } .icons.right{ .position-circle{ right: -2px; } } } } /*Fin Relato*/ /*Heat Map*/ .heatMap { position: relative; ul.time{ margin:10px 0; a{ color: @bg_type; padding: 5px 25px; font-size: 12px; text-decoration: none; display: block; &:hover, &.active, &:focus{ background: @color02; color: @color01_h_type; text-decoration: none; } } } .fields{ margin: 50px 0; .col-right{ &:after{ .G_divider; height:100%; top:0; } } .arrow-left{ width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 34.6px; border-color: transparent transparent transparent @bg_dest_type; margin: 8px 0 38px 30px; } .arrow-right{ width: 0px; height: 0px; border-style: solid; border-width: 20px 34.6px 20px 0; border-color: transparent @bg_dest_type transparent transparent; margin: 8px 0 38px 0; } .hm{ position: relative; svg.frames{ position: absolute; top: -6px; width: 84%; left: 0; right: 0; margin: 0 auto; height: 100%; filter:alpha(opacity=70); opacity:.70; .pl{ -webkit-animation: fadeInFromNone 3s 1; -moz-animation: fadeInFromNone 3s 1; animation: fadeInFromNone 3s 1; } @-webkit-keyframes fadeInFromNone{ 0%{ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7); opacity:1; } } @-moz-keyframes fadeInFromNone { 0%{ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7); opacity:1; } } @-o-keyframes fadeInFromNone { 0%{ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7); opacity:1; } } @keyframes fadeInFromNone { 0%{ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7); opacity:1; } } } } } .barHeatMap{ position: absolute; bottom: 0; left: 0; right: 0; margin:0 auto -42px; .content{ margin-left: 38%; .circle{ float: left; } ul{ margin: 10px 18px 0 0; float: left; li{ background: @refColor01; width: 30px; height: 12px; float: left; } } } @media (max-width: 1280px) { .content{ margin-left: 37%; } } @media (max-width: 1100px) { .content{ margin-left: 35%; } } @media (max-width: @md) { .content{ margin-left: 33%; } } @media (max-width: 840px) { .content{ margin-left: 31%; } } @media (max-width: @sm) { bottom: 46%; margin: 0; .content{ margin-left: 29%; } } @media (max-width: 670px) { .content{ margin-left: 27%; } } @media (max-width: 580px) { .content{ margin-left: 20%; } } @media (max-width: @xs) { bottom: 0; margin: 0 auto -41px; .content{ margin-left: 14%; } } @media (max-width: 390px) { .content{ margin-left: 6%; } } @media (max-width: 370px) { .content{ margin-left: 3%; ul{ li{ width: 28px; } } } } @media (max-width: 320px) { .content{ ul{ li{ width: 24px; } } } } @media (max-width: 290px) { .content{ ul{ li{ width: 22.5px; } } } } @media (max-width: 270px) { .content{ ul{ li{ width: 19px; } } } } @media (max-width: 250px) { .content{ ul{ li{ width: 16px; } } } } } @media (max-width: @sm) { .fields { .col-right{ margin-top: 80px; } .hm{ svg.frames{ top: -8px; } } } } @media (max-width: @xs) { .fields{ .col-right{ margin-top:0; } } } @media (max-width: 580px) { .fields{ .hm{ svg.frames{ top: -5px; } } } } @media (max-width: 390px) { .fields{ .hm{ svg.frames{ top: -3px; } } } } } /*Fin HeatMap*/ /*Passes*/ .passes{ .lineUpFull{ .field{ padding:20px; div.gameField{ height: 90%; background-image: none; div.positions{ height: 73%; position: absolute; top: 0; width: 100%; .goalkeeper{ left: 16%; top: 20%; } .defender{ left: 30%; } .playmaker { left: 57%; } .forward { left: 71%; } } } .homeTeam{ height: 210px; img{ position: absolute; width: 94%; } } .awayTeam{ height: 210px; img{ position: absolute; width: 94%; right: 0; } &:after{ .G_divider; top: 5%; left: 0; } } } } .players{ margin:20px 0; .itemsRanking { .dataBox{ background: @color02; font-size: 10px; border-radius: 18%; height: 40%; float: left; color:@color01_type; line-height: 18px; padding: 0 5px; margin: -3px 0 0 2%; .correct{ color:@refColor01_type; } .incorrect{ color:@refColor04_type; } } .num{ margin-left: 11%; } .away{ &:after{ .G_divider; } } } } @media (max-width: @md) { .lineUpFull{ .field{ .homeTeam{ height: 160px; } .awayTeam{ height: 160px; } } } .players{ .itemsRanking { .G_barsRanking{ width: 75%; } } } } @media (max-width: @sm) { .lineUpFull{ .field{ .homeTeam{ height:140px; } .awayTeam{ height: 140px; } } } .players{ .itemsRanking { .G_barsRanking{ width: 70%; } .num{ font-size: 15px; margin-left: 6%; } } } } @media (max-width: @xs) { .lineUpFull{ .field{ div.gameField{ height: 100px; } .homeTeam{ margin: 20px 0 0; width: 100%; height:140px; img{ width: 100%; } } .awayTeam{ width: 100%; height: 140px; margin: 20px 0 0; img{ width: 100%; } } } } .players{ .itemsRanking { .G_barsRanking{ width: 60%; } .num{ margin-left: 10%; } } } } @media (max-width: 550px) { .players{ .itemsRanking { .G_barsRanking{ width: 65%; } } } } @media (max-width: 390px) { .players{ .itemsRanking { .G_barsRanking{ width: 72%; } } } .lineUpFull{ .field{ .homeTeam{ height:120px; } .awayTeam{ height: 120px; } } } } @media (max-width: 270px) { .players{ .itemsRanking { .G_barsRanking{ width: 67%; } .num{ margin-left: 8%; } } } .lineUpFull{ .field{ .homeTeam{ height:100px; } .awayTeam{ height: 100px; } } } } } /*Fin Passes*/ /*Preview*/ .previews{ .lineUpFull{ .team-name{ position: relative; border: 0; } } .circle{ &.lost{ background: @refColor04; } &.tied{ background: lighten(@bg_type, 70%); } &.local{ background: url("../../escudos/233.gif") no-repeat center center; } &.away{ background: url("../../escudos/217.gif") no-repeat center center; } } .gamesContent{ .games{ padding:10px; .circle{ width: 16px; height: 16px; line-height: 16px; margin: 10px 0 0 5px; color:@color02_type; font-size: 11px; } .description{ .data{ min-height: 40px; margin:0; color: @bg_type; text-align: center; font-size: 11px; text-transform: uppercase; font-weight: bold; line-height: 12px; .namesTeam{ padding-top: 10px; } .won{ color:@refColor01_type; } .lost{ color:@refColor02_type; } .tied{ color: lighten(@bg_type, 70%); } .date{ text-align: center; line-height: 12px; font-size: 12px; padding-top: 8px; border-right: 1px solid darken(@bg,20%); min-height: 40px; span{ display: block; color: @bg_type; font-weight: normal; &:nth-child(2){ font-weight: bold; } } } } } } .visitant{ &:after{ .G_divider; } } } .evolution{ margin: 20px 0; .teams{ height: 35px; margin: 10px 0; .colRight{ position: relative; &:after{ .G_divider; } .position{ position: absolute; left: 0; } } .colLeft{ position: relative; .position{ position: absolute; right: 0; margin-right: 20px; } } .circle{ &.local{ margin-left: 18px; } &.black{ background: @color02; width: 20px; height: 20px; margin-top: 8px; margin-right: 10px; } &.gray{ background: lighten(@color02, 70%); width: 20px; height: 20px; margin-top: 8px; margin-left: 10px; } } } .graphicalArea{ margin-bottom: 10px; img{ margin: 0 auto; } span{ display: block; width: 70px; margin: 0 auto; background: @color02; color:@color02_type; padding: 3px 0; font-size: 12px; text-align: center; } } } .goalsPerMinute{ .home, .visitant{ padding: 20px 0; img{ margin:0 auto; } } .visitant{ &:after{ .G_divider; } } } .passes{ &.colLeft{ .effectivity{ .graphic{ float: right; } .data{ float: left; } } } &.colRight{ &:after{ .G_divider; } .effectivity{ .graphic{ float: left; } .data{ float: right; } } } &.colLeft, &.colRight{ .correct, .incorrect{ line-height: 100px; padding: 0; } .graphic{ img{ margin: 0 auto; } } } } @media (max-width: @sm) { .passes{ &.colLeft, &.colRight{ .effectivity{ .graphic{ float: none; } .data{ float: none; width: 50%; margin: 10px auto; } } .correct, .incorrect{ line-height: 20px; } } } .gamesContent{ .games{ .description{ .data{ font-size: 10px; } } .circle{ margin: 10px 0 0; } } } } @media (max-width: @xs) { .gamesContent{ >.local, >.visitant{ position: relative; height: 74px; .games{ position: absolute; width: 100%; .left{ width: 25%; margin-left: 20%; } .middle{ width: 25%; margin-left: 48%; } .right{ width: 25%; margin-left: 76%; } .description{ position: absolute; width: 96%; top: 100%; z-index: 999; .data{ width: 100%; } } .circle{ &.white{ width: 33px; height: 33px; line-height: 34px; margin: 0; } } } } .visitant{ padding-top: 25px; border-top: 1px solid darken(@bg,20%); } } .passes{ &.colLeft, &.colRight{ .effectivity{ .data{ width: 70%; } } } } } @media (max-width: 390px) { .passes{ &.colLeft, &.colRight{ .effectivity{ .data{ width: 90%; } } } } .gamesContent { .local, .visitant{ .games{ .description{ width: 93%; } } } } } @media (max-width: 270px) { .passes{ &.colLeft, &.colRight{ .effectivity{ .data{ width: 100%; .number{ font-size: 16px; } .text{ font-size: 10px; } } } } } .gamesContent { .local, .visitant{ .games{ .description{ width: 90%; } } } } } } /*Fin Preview*/ /*Historia*/ .history{ nav{ background: @color02; margin-bottom: 1px; overflow: hidden; height: 40px; position: relative; ul{ li{ float: left; a{ color: @color01_type; display: block; padding: 8px 12px; font-size: 18px; font-weight: bold; text-decoration: none; &:hover{ background:@color01; text-decoration: none; color: @color01_h_type; } } &.arrow{ &.left, &.right{ a{ width: 0px; height: 0px; border-style: solid; padding: 0; &:hover{ background:transparent; } } } &.left{ border-right: 1px solid @bg; a{ border-width:10px 16px 10px 0; border-color: transparent @color01 transparent transparent; margin: 10px 16px 10px 10px; &:hover{ border-color: transparent lighten(@color01, 5%) transparent transparent; } &.disable{ border-color: transparent lighten(@color02, 65%) transparent transparent; pointer-events:none; } } } &.right{ border-left: 1px solid @bg; position: absolute; right: 0; background: @color02; a{ border-width: 10px 0 10px 16px; border-color: transparent transparent transparent @color01; margin: 10px 10px 10px 16px; &:hover{ border-color: transparent transparent transparent lighten(@color01, 5%); } &.disable{ border-color: transparent transparent transparent lighten(@color02, 65%); pointer-events:none; } } } } &.active a{ background:@color01; text-decoration: none; color: @color01_h_type; } } } } .headerPicture{ width: 100%; img{ width: 100%; } } .teamsContent{ background: darken(@bg,5%); .row{ .data{ padding: 40px 0; line-height: 60px; div, span{ float: left; } .place{ font-size: 28px; font-weight: bold; color: @bg_type; width: 7%; } .name{ font-size: 60px; font-weight: bold; color: @bg_type; width: 50%; } .goals{ font-size: 60px; font-weight: bold; color:@bg_dest_type; width: 10%; } .flag{ padding: 4% 3% 0; } .circle{ &.black{ color: @color01_type; width: 38px; height: 38px; font-size: 22px; line-height: 38px; margin-top: 10px; } &.gray{ width: 55px; height: 55px; box-shadow: 0px 0px 6px darken(@bg, 35%); margin-right: 0; } img{ margin: 0 auto; padding: 14px 0 0; } } } &.firstPlace{ border-bottom: 1px solid darken(@bg,20%); } &.secondPlace{ border-top: 1px solid @bg; } @media (max-width: @xs) { .data{ padding: 20px 0; line-height: 30px; div, span{ float: left; } .place{ font-size: 18px; width: 10%; margin-left: 1%; } .name{ font-size: 20px; width: 40%; } .goals{ font-size: 30px; width: 8%; } .flag{ padding: 1% 2% 0; } .circle{ &.black{ width: 22px; height: 22px; font-size: 12px; line-height: 22px; margin-top: 1%; } &.gray{ width: 30px; height: 30px; img{ padding: 7px 0 0; width: 45%; } } } } } } } } /*Fin Historia*/ /*Previa de Enfrentamientos Historica*/ .historicalPreview{ .gamesContent{ >.local{ overflow: auto; height: 200px; } .games{ .description{ .arrow-left{ border-bottom-width: 8px; border-right-width: 12px; border-top-width: 8px; top: 10px; left: -12px; &:after{ border-bottom-width: 8px; border-right-width: 12px; border-top-width: 8px; top: -8px; } } .arrow-right{ border-top-width: 8px; border-left-width: 12px; border-bottom-width: 8px; top: 10px; right: -12px; &:after{ border-bottom-width: 8px; border-left-width: 12px; border-top-width: 8px; top: -8px; } } .namesTeam{ -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; -o-hyphens:auto; hyphens:auto; word-wrap:break-word; } } } .visitant{ &:after{ left: 4px; } } .evolution{ margin: 0; min-height: 200px; padding: 60px 0 0; .teams{ height: auto; .colLeft, .colRight{ padding-top: 12px; &:after{ width: 0; } } .local{ margin-left: 0; } .away{ margin-right: 0; } } .numbers{ padding-top: 22px; .circle{ &.black{ color:@color01_type; } &.second{ background: lighten(@color02, 40%); } &.third{ background: lighten(@color02, 70%); color: @bg_type; } } } } } @media (max-width: @md) { .gamesContent{ .games{ .description{ margin: 0 3% 0 5%; } } } } @media (max-width: @sm) { .gamesContent{ .visitant{ border-top: 1px solid darken(@bg,20%); padding: 30px 0 0; min-height: 170px; &:after{ left: -10px; } } } } @media (max-width: @xs) { .gamesContent{ >.local{ overflow: visible; height: 56px; .games{ height: 140px; .description{ margin: 0; top: 40%; } .shield{ &.visit{ position: absolute; bottom: 0; } } .position{ float: left; width: 10%; position: absolute; margin-left: 12%; &.bottom{ bottom: 2%; } } } } .visitant{ margin-top: 100px; min-height: 210px; } .evolution{ .numbers{ padding-bottom: 20px; .circle{ margin: 0 auto; float: none; } } } } } } /*Fin Previa de Enfrentamientos Historica*/ /*Jugadores*/ .playersCenter{ .top{ width: 100%; min-height:100px; #gradient .vertical-three-colors(@bg, @bg, 25%, darken(@bg,10%)); display:block; border-bottom: 2px solid @color01; } .content{ border-top: 1px solid darken(@bg,20%); border-bottom: 3px solid @color02; padding: 5% 0; .space{ width: 12%; float: left; min-height: 1px; } .colLeft, .colRight{ .data{ padding:6% 0 0; span{ display: block; color: @bg_dest_type; font-size: 16px; font-weight: bold; &:nth-child(2){ color: @bg_type; text-transform: uppercase; } } div{ background: @color01; color: @bg_type; min-height: 30px; width: 136px; line-height: 30px; text-transform: uppercase; text-align: center; font-size: 12px; font-weight: bold; margin: 5% 0 0; cursor: pointer; } } .positionCircle{ .circle{ margin: 50% auto 0; float: none; } img{ margin: 42% auto 0; } } } .colRight{ .data{ text-align: right; div{ float: right; } } } .colMiddle{ .circle{ float: none; margin: 20% auto 0; width: 80px; height: 80px; font-size: 40px; line-height: 80px; } img{ margin: 0 auto; } } @media (max-width: @md) { .space{ width: 10%; } .colMiddle{ .circle{ width: 60px; height: 60px; font-size: 30px; line-height: 60px; } } } @media (max-width: @sm) { .space{ width: 4%; } .colMiddle{ .circle{ width: 40px; height: 40px; font-size: 20px; line-height: 40px; } } } @media (max-width: @xs) { .space{ width: 0%; } .colMiddle{ .circle{ margin-top: 5%; } } } } .dialog{ width: 50%; min-height: 300px; background:@bg; display: none; position: absolute; top: 10%; left: 0; right: 0; margin: 0 auto; box-shadow: 0 0 8px 1px lighten(@color02,80%); border-radius: 5px; padding:5px; .caption{ height: 30px; border:0; .homeBar{ width: 100%; line-height: 30px; } } .lineUpFull{ .team-name{ border:0; position: relative; width: 48%; float: left; .starting{ border:1px solid darken(@bg,15%); border-top:0; } } .container-substitutes{ width: 48%; float: right; .substitutes-content{ border:1px solid darken(@bg,15%); border-top:0; height: auto; } } } .footer{ background: lighten(@color02, 80%); height: 30px; text-align: center; border-top: 1px solid lighten(@color02, 70%); span{ line-height: 30px; color: @bg_type; } } @media (max-width: @md) { width: 70%; .lineUpFull{ .container-substitutes{ clear: none; } } } @media (max-width: @sm) { .lineUpFull{ height: 250px; overflow: auto; .team-name{ width: 100%; float: none; } .container-substitutes{ width: 100%; float: none; } } } @media (max-width: @xs) { } } } /*Fin Jugadores */ /*Equipos*/ .teamsCenter{ .top{ width: 100%; min-height:50px; #gradient .vertical-three-colors(@bg, @bg, 25%, darken(@bg,10%)); display:block; border-bottom: 1px solid @color01; >span{ font-weight: bold; padding: 10px 0 0 20px; width: 60%; float: left; display: block; } div{ float: right; width: 30px; height: 30px; background: @color01; margin: 10px 30px; display: block; position: relative; cursor: pointer; span{ width: 0px; height: 0px; border-style: solid; border-width: 8px 6px 0 6px; border-color: @color02 transparent transparent transparent; position: absolute; top: 11px; left: 0; right: 0; margin: 0 auto; } } } .planteles{ border-bottom: 1px solid @color01; } .itemsRanking{ margin: 2%; .home{ margin-right:1%; margin-bottom: 2%; border: 1px solid darken(@bg,20%); border-top: 0; width: 24%; float: left; position: relative; img{ position: absolute; top: 0; right: 25%; } } .G_ranking{ } } .lineUpFull{ &.itemsRanking{ margin: 0; } .subHeader{ text-align: left; padding-left: 20px; } .team-name{ border:none; .player{ padding: 10px 20px; min-height: 62px; cursor: auto; &:hover, &:active{ background-color:@color02; #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg); box-shadow:none; } .G_ranking{ width: 30%; margin: 12px 0 0; height: 22px; .G_barsRanking{ div{ height: 100%; float: left; background: @color01; } .won{ background: @color01; } .empty{ background: @color02; } .lost{ background: lighten(@color02, 60%); } } .num{ float: right; line-height: 16px; font-size: 18px; small{ font-size: 14px; } } } .teamLogo { background-color:@bg; border: 3px solid transparent; border-radius: 50%; box-shadow: 0 0 5px 0 darken(@bg, 10%); display: block; height: 40px; line-height: 40px; position: relative; text-align: center; width: 40px; float: left; img{ margin: 5px auto; } } .name{ margin: 15px 12px 0; display: block; width: 20%; float: left; } } .content{ float: left; width: 30%; margin:15px 0 0 2%; .box{ float: left; width: 33%; .num{ width: 16px; height: 10%; display: block; float: left; font-size: 10px; color:@color02_type; border-radius: 4px; text-align: center; margin-right: 4px; background: @color01; &.won{ background: @color01; } &.empty{ background: @color02; } &.lost{ background: lighten(@color02, 60%); } } .text{ text-transform: uppercase; color: @bg_type; font-size: 10px; font-weight: bold; } } } } &.goals{ .team-name{ .content{ .box{ width: 50%; } } } } &.type{ .team-name{ .player{ .name{ width: auto; } .G_ranking{ margin-left: 8%; div{ &.second{ background: @color02; } &.third{ background: lighten(@color02, 60%) } &.fourth{ background: lighten(@color02, 80%) } &.fifth{ background: lighten(@color02, 40%) } } } } .content{ width: 45%; .box{ width: 20%; .num{ &.second{ background: @color02; } &.third{ background: lighten(@color02, 60%) } &.fourth{ background: lighten(@color02, 80%) } &.fifth{ background: lighten(@color02, 40%) } } } } } } } .graphical, .data{ .table { thead > tr th{ text-align: left; padding: 0; vertical-align: middle; width: 10%; &.team{ padding: 0 0 0 20px; width: 40%; } } tbody > tr td{ text-align: left; padding: 10px 0; } .minutes{ width: 40%; background: @color01; padding: 2px 0 8px; position: relative; margin: 0 auto; .num{ display: block; text-align: center; } .down{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid @bg; position: absolute; right: 10px; cursor: pointer; } .up{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid @bg; position: absolute; left: 10px; cursor: pointer; } &.second{ background: @color02; border-left: 1px solid @bg; border-right: 1px solid @bg; } &.third{ background: lighten(@color02, 60%) } &.fourth{ background: lighten(@color02, 80%) } &.fifth{ background: lighten(@color02, 40%) } &.sixth{ background: darken(@color01, 30%); } } .teamLogo{ background-color: @bg; border: 3px solid transparent; border-radius: 50%; box-shadow: 0 0 5px 0 darken(@bg, 10%); display: inline-block; height: 40px; line-height: 40px; position: relative; text-align: center; width: 40px; margin: 0 10px; float: left; img{ margin: 5px auto; } } .teamName{ display: block; float: left; margin-top: 6px; } .point{ background: @color01; width: 25px; border-radius: 50%; display: block; height: 25px; margin: 12px auto 0; &.second{ background: @color02; } &.third{ background: lighten(@color02, 60%) } &.fourth{ background: lighten(@color02, 80%) } &.fifth{ background: lighten(@color02, 40%) } &.sixth{ background: darken(@color01, 30%); } } .number{ text-align: center; span{ display: block; margin-top: 6px; } } } } @media (max-width: @md){ .lineUpFull{ .team-name{ .player{ .name{ width: 15%; } } .content{ width: 42%; } } } .graphical, .data{ .table { thead > tr th{ width: 12%; &.team{ width: 25%; } } } } } @media (max-width: @sm) { .itemsRanking{ .home{ width: 32%; } } .lineUpFull{ &.itemsRanking{ .G_ranking{ width: 50%; float: right; } } .team-name{ .player{ min-height: 90px; .name{ width: 20%; } } .content{ width: 70%; display: block; float: right; clear: both; } } } .graphical, .data{ .table { .minutes{ width: 80%; padding: 8px 0 14px; .down{ border-width: 8px; border-bottom-width: 0; } .up{ border-width: 8px; border-top-width: 0; } } } } } @media (max-width: @xs) { .itemsRanking{ .home{ width: 100%; margin-right:0%; } } .lineUpFull{ .team-name{ .content{ width: 100%; .box{ .text{ font-size: 8px; } } } } } .graphical, .data{ .table { thead > tr th{ width: 14%; &.team{ padding: 0; width: 10%; } } tbody > tr td{ text-align: center; line-height: 10px; } .teamLogo{ width: 15px; height: 15px; line-height: 15px; display: block; float: none; margin: 0 auto; img{ margin: 0 auto; } } .minutes{ width: 100%; .down{ right: 2px; } .up{ left:2px; } } } } } } /*Fin Equipos*/ /*Sedes y Estadios*/ .citiesStadiums{ background: lighten(@color02, 95%); .map{ white-space: nowrap; position: relative; background: @bg; img{ margin: 0 auto; width: 100%; } .content{ position: absolute; width: 50%; height: 100%; top: 0; left: 0; right: 0; margin: 0 auto; .pointer{ position: absolute; background: @color02; border: 2px solid @bg; width: 16px; height: 16px; box-shadow: 0 0 3px 0 lighten(@color02, 30%); border-radius: 50%; .tooltip-inner{ min-height: 20px; line-height: 20px; padding:0 5px; text-align: center; } } } } .subHeader{ text-align: left; span{ padding-left: 20px; } } .carousel-indicators{ left: 0; right: 0; margin: 0 auto; } .carousel-inner{ >.item{ >img{ width: 100%; } } } } /*Fin Sedes y Estadios*/ /*Slide*/ .slide{ .carousel-indicators{ li{ border: 2px solid @bg; background-color:@color02; width: 14px; height: 14px; } .active{ background-color:@color01; width: 14px; height: 14px; margin: 1px; } } } /*Fin Slide*/ /*Modulos en varias paginas*/ .blockCards{ .content{ .colLeft, .colRight{ margin: 10px 0; .position{ img{ float: left; } .circle{ float: none; margin: 8px 0 0 40px; } } } .colRight{ &:after{ .G_divider; } } } @media (max-width: @xs) { .content{ .colLeft, .colRight{ .position{ width: 20%; margin: 10px auto; } } } } @media (max-width: 290px) { .content{ .colLeft, .colRight{ .position{ width: auto; margin: 10px 24px; } } } } } .blockShots{ position:relative; .content{ .colLeft, .colRight{ margin: 40px 0 60px; .arc{ background:url('./../images/arco.png') no-repeat scroll 0 0; height:71px; margin: 30px auto 20px; width:100%; .color-cards{ padding: 18px 0 0 34%; } } .total{ margin: 0 auto; float: right; position: relative; img{ margin: 0 auto; } .tp-arc-top{ top: 27px; padding-left: 0; .tooltip{ float: none; margin: 0 auto; } } } .tp-arc-top{ top:45px; width: 100%; position: relative; padding-left: 34%; } } .colRight{ .total{ float: left; } &:after{ .G_divider; } } } @media (max-width: @md) { .content{ .colLeft, .colRight{ .arc { background-position: center center; } .total { float: none; margin:10px auto; } } } } @media (max-width: @sm) { .content{ .colLeft, .colRight{ .arc { .color-cards{ padding-left: 20%; } } .tp-arc-top { padding-left: 20%; } } } } @media (max-width: @xs) { .content{ position: relative; margin: 0; .colLeft, .colRight{ margin: 10px 0; .arc{ background-image: none; height: auto; .color-cards{ padding:0; width:33px; margin:0 auto; .circle{ margin-top: 10px; } } } .total{ width:100%; margin: 10px auto; img{ margin:0 auto; } &:after{ .G_divider; } } } .colRight{ &:after{ .G_divider; width: 0; } .arc{ margin-right:0; } } .colLeft{ .arc{ margin-left:0; } } .tp-arc{ position:absolute; left:0; right:0; margin:0 auto; top: 200px; } } .circle{ margin: 0; } } .tooltip-static{ background:@color02; height:30px; color:@color01_type; text-align: center; line-height: 30px; margin-top: 13px; position:relative; &:after{ content:""; position: absolute; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:20px solid @color02; right: -20px; top: 7px; } &:before { content:""; position: absolute; width: 0; height: 0; border-top: 8px solid transparent; border-right: 20px solid @color02; border-bottom: 8px solid transparent; left: -20px; top: 7px; } } .tooltip{ position:relative; width: 33px; float: left; margin-right: 18px; &:last-child{ margin-right: 0; } .tooltip-inner{ min-height: 22px; font-size: 9px; padding-left: 0; text-align: center; line-height: 22px; } } } .blockPasses{ .content{ .teamComparison{ border-top: 1px solid darken(@bg,20%); .comparing{ clear:none; height:80px; margin-left: 3%; .bar{ width: 80%; .homeBar{ background-color: darken(@refColor01, 25%); } .awayBar{ background-color: darken(@refColor04, 15%); } } .num{ margin-left: 3%; font-size: 24px; height: 40px; } .data{ width:80%; .correct{ color:@refColor01_type; .number{ font-size: 20px; font-weight: bold; float:left; display:block; } .text{ font-size: 10px; text-transform: uppercase; line-height: 30px; padding: 0 0 0 30px; display: block; } } .incorrect{ color:@refColor04_type; text-align: right; .number{ font-size: 20px; font-weight: bold; float:right; } .text{ font-size: 10px; text-transform: uppercase; line-height: 30px; padding: 0 8px 0 0; } } } } } .colRight{ &:after{ .G_divider; } } } @media (max-width: @sm) { .content { .mobileTablet{ .colLeft, .colRight{ margin: 30px auto; .graphic{ img{ margin: 0 auto; } } .data{ .correct{ padding:15px 0 0 0; .text{ color:@refColor01_type; font-size:12px; font-weight: bold; line-height: 24px; } } .incorrect { padding:20px 0 0 0; .text{ color:@refColor02_type; font-size:12px; font-weight: bold; line-height: 24px; } } .number{ color: @bg_dest_type; font-size: 20px; width: 30%; display: block; float: left; margin-right: 5%; text-align: right; } } } .colRight{ &:after{ .G_divider; top: 25%; } } .colLeft{ .graphic{ float: right; } } } } } } /*Fin Modulos*/ } /* Publicador */ .publisher{ h5{ color: @color01; text-transform: uppercase; font: 14px @baseFontFamily; font-weight: bold; } .panel-title{ position: relative; cursor: pointer; a{ background: @color02; width: 100%; height: 100%; display: block; color: @color02_type; padding:7px; line-height:30px; text-transform: uppercase; font: 12px @baseFontFamily; font-weight: bold; border-bottom: 1px solid @color02_type; &:hover{ text-decoration: none; } } span{ color: @color02_type; font: 25px @baseFontFamily; font-weight: bold; position: absolute; right: 10px; top: 2px; height: 26px; line-height: 30px; width: 20px; text-align: center; } &:hover{ a, span{ background-color: @color02_h; color: @color02_h_type; } span{ text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7); } } } .panel-body{ .panel-title{ a{ background: lighten(@color02, 50%); color: @color02_type; border-bottom: 1px solid @color02_type; } &:hover{ a, span{ background: lighten(@color02, 60%); color: lighten(@color02_type, 5%); } } } } .contentPublisher{ padding: 20px; display: none; position: relative; .section{ border: 1px solid lighten(@bg_type, 80%); padding: 10px; margin: 20px 0; color: @bg_type; text-transform: uppercase; font: 12px @baseFontFamily; font-weight: bold; min-height: 30px; label{ width: 25%; } .option{ height: 35px; line-height: 35px; span{ line-height: 20px; height: 20px; float: left; margin-left: 10px; } &.otpLineup, &.optTeamComparison, &.optCoordinates, &.optHeatMap, &.optLeaders{ display: none; } } } input{ border: 1px solid lighten(@bg_type, 80%); height: 25px; line-height: 25px; margin: 0 10px; } .loadPreview{ text-align: center; iframe{ margin: 0 auto; } } .roundedOne { background: -moz-linear-gradient(center top , #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 50px; box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5); height: 20px; position: relative; width: 20px; float: left; } .roundedOne .roundedIn:hover:after { .opacity(30); } .roundedOne .roundedIn:after { #gradient .vertical-three-colors(darken(@color01,10%), @color01, 28%,@color01 ); border-radius: 50px; box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5); content: ""; height: 9px; left: 2px; .opacity(0); position: absolute; top: 2px; width: 9px; } .roundedOne .roundedIn { background: -moz-linear-gradient(center top , #222222 0%, #45484D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 50px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #FFFFFF; cursor: pointer; height: 13px; left: 4px; position: absolute; top: 4px; width: 13px; } .roundedOne .roundedIn.selected:after { .opacity(100); } } .volver{ background: @color01; border-bottom: 2px solid darken(@color01, 10%); float: right; padding: 5px 20px; position: absolute; top: 10px; right: 20px; color: @color01_type; cursor: pointer; font-weight: bold; &:before{ content: ""; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right:16px solid @color01; position: absolute; left: -16px; top: 0px; } } } /* Fin Publicador */ .tipoCredito (@a) when (lightness(@a) >= 75%) { background-position: bottom center; } .tipoCredito (@a) when (lightness(@a) < 75%) { background-position: top center; } .tipoIso (@a) when (lightness(@a) >= 75%) { background-image: url(../images/iso_df_dark.png); } .tipoIso (@a) when (lightness(@a) < 75%) { background-image: url(../images/iso_df.png); }