@import "libs/less/elements.less"; @azul: #4c9ac1; @azulClaro: #d9eef2; @lightenAzul: lighten(@azulClaro, 1%); ul { list-style-type: none !important; } div.header { width: 100%; color: #fff; background: lighten(@azul, 20%); .box-shadow(0 3px 5px #000); &:div { background: @azul; overflow: auto; } text-align: center; } span#message_legacy { margin-top: 20px; font-size: 20px; } body { background: lighten(@azulClaro, 2%); } div#spinner { background-color: #000; color: #f0f0f0; position: fixed; padding: 0; text-align: center; top: 0px; left: 0px; font-size: 25px; font-weight: bold; width: 100%; height: 100%; visibility: hidden; z-index: 2000; .opacity(0.2); } div#ui-datepicker-div { font-size: 9px !important; } div.titulocontenido, div.seccionopciones { .gradient(@azulClaro, #fff, @azulClaro, ); .bordered(@azulClaro, #E5E5E5, #DDD, #E5E5E5); margin-top: 10px; .rounded(5px); padding: 8px 25px 8px 25px; .box-shadow(0 1px 2px #222); color: #1C1C1C; } div.footer { position: fixed; bottom: 0; right: 0; left: 0; overflow: auto; .box-shadow(0 3px 15px #000); text-align: center; background: lighten(@azul, 20%); padding: 8px 5px 2px 25px; } div.contenedor-sombra { background: #fff; .rounded(5px); .box-shadow(0 3px 5px #000); padding: 5px 25px 50px 25px; margin-top: 30px; } div.contenedor { background: #fff; .box-shadow(0 3px 5px #000); padding: 5px 5px 2px 25px; } /* Single-direction drop shadow */ hr { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); } /* Tablas */ table.table { &:not(.widthFull){ width: auto !important; } background-color: #fff; border: solid 1px #525252; border-collapse: collapse; margin: 0 auto; &:not(.widthFull) td{ width: auto !important; } &.widthFull td{ white-space: nowrap; width: 100%; } td{ padding: 5px; border: solid 1px #c1c1c1; color: #717171; vertical-align: middle !important; } } table.table th { width: auto !important; padding: 4px 2px; color: #fff; background: #424242 url(grd_head.png) repeat-x top; border-left: solid 1px #525252; font-size: 0.9em; } /* Estilo Zebra */ table.table tbody tr:nth-child(even) { background-color: #f0f0f0; color: #000; } table.table tbody tr.alert-error { background-color: #f2dede; color: #000; } table.tablehover tbody tr:hover *, div.tablehover tbody tr:hover * { background: lighten(#98c5db, 15%); color: #000; } table.table th, table.table th:hover { border-left: 1px solid #555; border-bottom: 1px solid #828282; padding: 20px; background-color: #151515 !important; background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important; background-image: -webkit-linear-gradient(top, #151515, #404040) !important; background-image: -moz-linear-gradient(top, #151515, #404040) !important; background-image: -ms-linear-gradient(top, #151515, #404040) !important; background-image: -o-linear-gradient(top, #151515, #404040) !important; background-image: linear-gradient(top, #151515, #404040) !important; color: #fff !important; font-weight: normal; } table.pedido_cabecera th, table.movimiento_mp_cabecera th { background-color: lighten(@azul, 37%); border-top: 1px solid #BFCDD4; border-bottom: 1px solid #BFCDD4; border-right: 1px solid #BFCDD4; border-left: 1px solid #BFCDD4; color: #6190AA; font-weight: bold; text-align: center !important; } table.pedido_detalle td, table.pedido_cabecera td, table.movimiento_mp_cabecera td, table.movimiento_mp_detalle td { background-color: #fff; border-bottom: 1px solid #6190AA; border-left: 1px solid #BFCDD4; border-right: 1px solid #BFCDD4; color: #000; text-align: center; padding: 5px; } table.pedido_detalle th, table.movimiento_mp_detalle th { background-color: #EEF3F6; border-top: 1px solid #BFCDD4; border-bottom: 1px solid #BFCDD4; border-right: 1px solid #BFCDD4; border-left: 1px solid #BFCDD4; color: #6190AA; font-weight: bold; text-align: center; } /* Fin tablas*/ /* Widgets*/ /* Datepicker*/ div#ui-datepicker-div { font-size: 10px !important; } *.lowercase { text-transform: lowercase; } *.capitalize { text-transform: capitalize; } *.uppercase { text-transform: uppercase; } /* Fin datepicker*/ /* Fin Widgets*/ /* Estilos para tablas con scroll (tableScroll) */ div.tablescroll { font: 13px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; } div.tablescroll td, div.tablescroll th { border: 1px solid; padding: 5px; border: solid 1px #c1c1c1; color: #717171; } /* Estilo Zebra */ div.tablescroll tbody tr:nth-child(even) { background: #f0f0f0 !important; color: #000; } div.tablescroll thead td, div.tablescroll tfoot td, div.tablescroll thead th { border: 1px solid #ccc; background-color: #151515 !important; background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important; background-image: -webkit-linear-gradient(top, #151515, #404040) !important; background-image: -moz-linear-gradient(top, #151515, #404040) !important; background-image: -ms-linear-gradient(top, #151515, #404040) !important; background-image: -o-linear-gradient(top, #151515, #404040) !important; background-image: linear-gradient(top, #151515, #404040) !important; color: #fff !important; text-align: center; } div.tablescroll tbody tr.first td { border-top: 0; } /* Fin de estilos para tablas con scroll (tableScroll) */ form.center { overflow: auto; text-align: center; div { display: inline-table; table { text-align: left; display: inline-table; } .span1{ display: inline-table; } } } div.center, table.center td, td.center{ text-align: center; } /* Outer */ .popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); z-index: 1031 !important; overflow: auto; } /* Inner */ .popup-inner { max-width:700px; width:90%; padding:40px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:rgba(255,255,255,0.8); } /* Close Button */ .popup-close { width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; &:hover { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none; } } td[contenteditable=true] { outline: 2px solid #0af; } .panel-heading { background-color: lighten(@azul, 37%); } table.read-only { input:read-only, textarea:read-only{ outline: none; background-color: transparent; border: none; box-shadow: none; } } table.center{ margin:0 auto; } select.colores > option:hover{ box-shadow: inset 20px 20px #f00; } td.nobreak, th.nobreak{ white-space: nowrap; overflow: auto; } .table th.center { text-align: center; } .form-inline > * { margin:5px 10px !important; } .clickable-row{ cursor: pointer; &:hover td:not(.notHighlight){ background-color: #98c5db; } } .clickable-cells{ cursor: pointer; td:hover, td:hover:not(.notHighlight) ~ td{ background-color: #98c5db; } } tr.header { cursor:pointer; } .header{ .sign:after{ content:"+"; float:right; color: black; background: white; .rounded(50%); min-width: 1em; align-items: center; justify-content: center; vertical-align: middle; display: inline-flex; height: 20px; width: 20px; font-weight:bold; } &.expand{ padding-left: 2rem; .sign:after{ content: "-"; } } .icon-hand-down{ float:left; } } #overlay { background:rgba(0,0,0,0.3); display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99997; pointer-events:none } .highlight{ position: relative; } .table-responsive { overflow-x: auto; } #scrollingDiv{ overflow: auto } .progressBar { height: 100px; border: 2px solid #ccc; overflow: hidden; position: relative; -moz-border-radius: 4px; -webkit-border-radius: 4px; -border-radius: 4px; } .progress1 { background-color: green; text-align: center; width: 100%; overflow: hidden; position: absolute; bottom: 0; height: 0%; } .progress1>span{ position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { padding: 15px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-heading > .dropdown .dropdown-toggle { color: inherit; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel > .list-group, .panel > .panel-collapse > .list-group { margin-bottom: 0; } .panel > .list-group .list-group-item, .panel > .panel-collapse > .list-group .list-group-item { border-width: 1px 0; border-radius: 0; } .panel > .list-group:first-child .list-group-item:first-child, .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { border-top: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel > .list-group:last-child .list-group-item:last-child, .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { border-bottom: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .panel-heading + .list-group .list-group-item:first-child { border-top-width: 0; } .list-group + .panel-footer { border-top-width: 0; } .panel > .table, .panel > .table-responsive > .table, .panel > .panel-collapse > .table { margin-bottom: 0; } .panel > .table caption, .panel > .table-responsive > .table caption, .panel > .panel-collapse > .table caption { padding-right: 15px; padding-left: 15px; } .panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel > .table:first-child > thead:first-child > tr:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { border-top-left-radius: 3px; } .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { border-top-right-radius: 3px; } .panel > .table:last-child, .panel > .table-responsive:last-child > .table:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel > .table:last-child > tbody:last-child > tr:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { border-bottom-left-radius: 3px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { border-bottom-right-radius: 3px; } .panel > .panel-body + .table, .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body { border-top: 1px solid #ddd; } .panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td { border-top: 0; } .panel > .table-bordered, .panel > .table-responsive > .table-bordered { border: 0; } .panel > .table-bordered > thead > tr > th:first-child, .panel > .table-responsive > .table-bordered > thead > tr > th:first-child, .panel > .table-bordered > tbody > tr > th:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, .panel > .table-bordered > tfoot > tr > th:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, .panel > .table-bordered > thead > tr > td:first-child, .panel > .table-responsive > .table-bordered > thead > tr > td:first-child, .panel > .table-bordered > tbody > tr > td:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, .panel > .table-bordered > tfoot > tr > td:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .panel > .table-bordered > thead > tr > th:last-child, .panel > .table-responsive > .table-bordered > thead > tr > th:last-child, .panel > .table-bordered > tbody > tr > th:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, .panel > .table-bordered > tfoot > tr > th:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, .panel > .table-bordered > thead > tr > td:last-child, .panel > .table-responsive > .table-bordered > thead > tr > td:last-child, .panel > .table-bordered > tbody > tr > td:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, .panel > .table-bordered > tfoot > tr > td:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .panel > .table-bordered > thead > tr:first-child > td, .panel > .table-responsive > .table-bordered > thead > tr:first-child > td, .panel > .table-bordered > tbody > tr:first-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, .panel > .table-bordered > thead > tr:first-child > th, .panel > .table-responsive > .table-bordered > thead > tr:first-child > th, .panel > .table-bordered > tbody > tr:first-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { border-bottom: 0; } .panel > .table-bordered > tbody > tr:last-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .panel > .table-bordered > tfoot > tr:last-child > td, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, .panel > .table-bordered > tbody > tr:last-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .panel > .table-bordered > tfoot > tr:last-child > th, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { border-bottom: 0; } .panel > .table-responsive { margin-bottom: 0; border: 0; } .panel-group { margin-bottom: 20px; } .panel-group .panel { margin-bottom: 0; border-radius: 4px; } .panel-group .panel + .panel { margin-top: 5px; } .panel-group .panel-heading { border-bottom: 0; } .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group { border-top: 1px solid #ddd; } .panel-group .panel-footer { border-top: 0; } .panel-group .panel-footer + .panel-collapse .panel-body { border-bottom: 1px solid #ddd; } .panel-default { border-color: #ddd; } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; } .panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #333; } .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ddd; } .panel-primary { border-color: #337ab7; } .panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; } .panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #337ab7; } .panel-primary > .panel-heading .badge { color: #337ab7; background-color: #fff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #337ab7; } .panel-success { border-color: #d6e9c6; } .panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: #d6e9c6; } .panel-success > .panel-heading .badge { color: #dff0d8; background-color: #3c763d; } .panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #d6e9c6; } .panel-info { border-color: #bce8f1; } .panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .panel-info > .panel-heading + .panel-collapse > .panel-body { border-top-color: #bce8f1; } .panel-info > .panel-heading .badge { color: #d9edf7; background-color: #31708f; } .panel-info > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #bce8f1; } .panel-warning { border-color: #faebcc; } .panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: #faebcc; } .panel-warning > .panel-heading .badge { color: #fcf8e3; background-color: #8a6d3b; } .panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #faebcc; } .panel-danger { border-color: #ebccd1; } .panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ebccd1; } .panel-danger > .panel-heading .badge { color: #f2dede; background-color: #a94442; } .panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ebccd1; } table td form{ margin: 0 auto; } .clickable{ cursor: pointer; } .horizontal{ display: inline-flex; flex-direction: row; justify-content: space-around; align-items: flex-start; &>div{ display: flex; flex-direction: column; flex-grow: 1; flex-basis: 0; justify-content: space-around; margin: 0 10px; } &>div:first-child{ margin-left: 0; } &>div:last-child{ margin-right: 0; } } .horizontal2{ display: inline-flex; flex-direction: row; justify-content: space-around; &>div{ display: flex; flex-direction: column; } } .vertical{ display: inline-flex; flex-direction: column; justify-content: space-around; &>div{ display: flex; flex-direction: row; } } .fullwidth{ width: 100%; } .overflow{ overflow: auto; } .boxshadow{ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.26), 0px 2px 20px rgba(0, 0, 0, 0.22) } .redbox{ color: rgba(215, 27, 27, 0.7); } .yellow{ background-color: yellow; } .img-responsive { display: block; max-width: 100%; // Set a maximum relative to the parent max-height: 100%; // Set a maximum relative to the parent height: auto; // Scale the height according to the width, otherwise you get stretching } .img-small{ width: 64px; height: 64px; margin: 0 auto; } td.center{ vertical-align:middle !important; } .table-condensed{ font-size: 0.9rem; // td{ // padding: 4px 5px; // } .no-border{ tr{ background-color: transparent !important; } td{ border: none; } } } .max-overflow-y{ max-height: 400px; overflow: auto; } .ubicaciones{ text-align: left; ul{ -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } } .text-left{ text-align: left; } div.ul_style ul{ list-style-type: disc !important; } .pedido_detalle_input_align_right { text-align: right !important; } @media print { .print-small { body { height: 100%; width: 100%; } .table{ font-size: 60%; th{ padding: 5px; } td { padding: 1px; margin: 1px; } } } }