mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-22 08:40:22 +00:00
modificados los colores segun telegram
This commit is contained in:
Jaime Jiménez
@ -4027,29 +4027,29 @@ code {
|
||||
clear: both;
|
||||
}
|
||||
.ribbon-box .ribbon-primary {
|
||||
background: #687cfe;
|
||||
background: #92b2a7;
|
||||
}
|
||||
.ribbon-box .ribbon-primary:before {
|
||||
border-color: #3550fe transparent transparent;
|
||||
}
|
||||
.ribbon-box .ribbon-primary.ribbon-shape::before {
|
||||
border-left-color: #687cfe;
|
||||
border-top-color: #687cfe;
|
||||
border-left-color: #92b2a7;
|
||||
border-top-color: #92b2a7;
|
||||
}
|
||||
.ribbon-box .ribbon-primary.ribbon-shape::after {
|
||||
border-left-color: #687cfe;
|
||||
border-bottom-color: #687cfe;
|
||||
border-left-color: #92b2a7;
|
||||
border-bottom-color: #92b2a7;
|
||||
}
|
||||
.ribbon-box.right .ribbon-primary {
|
||||
background: #687cfe;
|
||||
background: #92b2a7;
|
||||
}
|
||||
.ribbon-box.right .ribbon-primary.ribbon-shape::before {
|
||||
border-right-color: #687cfe;
|
||||
border-top-color: #687cfe;
|
||||
border-right-color: #92b2a7;
|
||||
border-top-color: #92b2a7;
|
||||
}
|
||||
.ribbon-box.right .ribbon-primary.ribbon-shape::after {
|
||||
border-right-color: #687cfe;
|
||||
border-bottom-color: #687cfe;
|
||||
border-right-color: #92b2a7;
|
||||
border-bottom-color: #92b2a7;
|
||||
}
|
||||
.ribbon-box .ribbon-secondary {
|
||||
background: #ff7f5d;
|
||||
@ -5866,7 +5866,7 @@ a {
|
||||
}
|
||||
|
||||
:is(.btn-primary, .btn-outline-primary, .btn-soft-primary).btn-border {
|
||||
border-bottom: 2px solid #3f59fe;
|
||||
border-bottom: 2px solid #e5745b;
|
||||
}
|
||||
|
||||
:is(.btn-secondary, .btn-outline-secondary, .btn-soft-secondary).btn-border {
|
||||
@ -6880,7 +6880,7 @@ a {
|
||||
}
|
||||
|
||||
.step-arrow-nav .nav {
|
||||
background-color: var(--vz-light);
|
||||
background-color: #4c5c6333;
|
||||
}
|
||||
.step-arrow-nav .nav .nav-link {
|
||||
border-radius: 0;
|
||||
@ -6905,8 +6905,8 @@ a {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.step-arrow-nav .nav .nav-link.active {
|
||||
background-color: rgba(104, 124, 254, 0.1);
|
||||
color: #687cfe;
|
||||
background-color: #4c5c6366;
|
||||
color: white;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -3367,36 +3367,36 @@ textarea.form-control-lg {
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--vz-btn-color: #687cfe;
|
||||
--vz-btn-border-color: #687cfe;
|
||||
--vz-btn-color: #e5745b;
|
||||
--vz-btn-border-color: #e5745b;
|
||||
--vz-btn-hover-color: #fff;
|
||||
--vz-btn-hover-bg: #687cfe;
|
||||
--vz-btn-hover-border-color: #687cfe;
|
||||
--vz-btn-hover-bg: #e5745b;
|
||||
--vz-btn-hover-border-color: #e5745b;
|
||||
--vz-btn-focus-shadow-rgb: 104, 124, 254;
|
||||
--vz-btn-active-color: #fff;
|
||||
--vz-btn-active-bg: #687cfe;
|
||||
--vz-btn-active-border-color: #687cfe;
|
||||
--vz-btn-active-bg: #e5745be;
|
||||
--vz-btn-active-border-color: #e5745b;
|
||||
--vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--vz-btn-disabled-color: #687cfe;
|
||||
--vz-btn-disabled-color: #e5745b;
|
||||
--vz-btn-disabled-bg: transparent;
|
||||
--vz-btn-disabled-border-color: #687cfe;
|
||||
--vz-btn-disabled-border-color: #e5745b;
|
||||
--vz-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--vz-btn-color: #ff7f5d;
|
||||
--vz-btn-border-color: #ff7f5d;
|
||||
--vz-btn-color: #92b2a733;
|
||||
--vz-btn-border-color: #92b2a733;
|
||||
--vz-btn-hover-color: #fff;
|
||||
--vz-btn-hover-bg: #ff7f5d;
|
||||
--vz-btn-hover-border-color: #ff7f5d;
|
||||
--vz-btn-hover-bg: #92b2a733;
|
||||
--vz-btn-hover-border-color: #92b2a733;
|
||||
--vz-btn-focus-shadow-rgb: 255, 127, 93;
|
||||
--vz-btn-active-color: #fff;
|
||||
--vz-btn-active-bg: #ff7f5d;
|
||||
--vz-btn-active-border-color: #ff7f5d;
|
||||
--vz-btn-active-bg: #92b2a733;
|
||||
--vz-btn-active-border-color: #92b2a733;
|
||||
--vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--vz-btn-disabled-color: #ff7f5d;
|
||||
--vz-btn-disabled-color: #92b2a733;
|
||||
--vz-btn-disabled-bg: transparent;
|
||||
--vz-btn-disabled-border-color: #ff7f5d;
|
||||
--vz-btn-disabled-border-color: #92b2a733;
|
||||
--vz-gradient: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,31 @@
|
||||
body {
|
||||
background-color: #fffbdd !important;
|
||||
}
|
||||
background-color: #A5A09133 !important;
|
||||
}
|
||||
|
||||
/* botón base */
|
||||
.btn-opcion-presupuesto {
|
||||
--vz-btn-color: #92b2a7; /* texto y borde */
|
||||
--vz-btn-border-color: #92b2a7;
|
||||
--vz-btn-hover-color: #fff;
|
||||
--vz-btn-hover-bg: #92b2a7;
|
||||
--vz-btn-hover-border-color: #92b2a7;
|
||||
--vz-btn-focus-shadow-rgb: 146, 178, 167;
|
||||
--vz-btn-active-color: #fff;
|
||||
--vz-btn-active-bg: #92b2a7;
|
||||
--vz-btn-active-border-color: #92b2a7;
|
||||
--vz-btn-disabled-color: #92b2a7;
|
||||
--vz-btn-disabled-bg: transparent;
|
||||
--vz-btn-disabled-border-color: #92b2a7;
|
||||
--vz-gradient: none;
|
||||
|
||||
background-color: rgba(146, 178, 167, 0.2); /* no seleccionado */
|
||||
color: #92b2a7;
|
||||
}
|
||||
|
||||
/* cuando el radio/checkbox está checked */
|
||||
.btn-check:checked + .btn-opcion-presupuesto,
|
||||
.btn-opcion-presupuesto.active {
|
||||
background-color: #92b2a7;
|
||||
color: #fff;
|
||||
border-color: #92b2a7;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
/* === Borde visible cuando está seleccionada === */
|
||||
.image-container.selected {
|
||||
border-color: #687cfe;
|
||||
border-color: #92b2a7;
|
||||
}
|
||||
|
||||
/* === Imagen interna === */
|
||||
@ -157,16 +157,16 @@
|
||||
min-height: 180px;
|
||||
padding: 1rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
color: #4b7bec;
|
||||
border: 1px solid #4b7bec;
|
||||
color: #92b2a7;
|
||||
border: 1px solid #92b2a7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* ESTILO CUANDO ESTÁ MARCADO */
|
||||
.btn-check-service:checked+.btn {
|
||||
background-color: #4b7bec;
|
||||
background-color: #92b2a7;
|
||||
color: #ffffff !important;
|
||||
border-color: #4b7bec;
|
||||
border-color: #92b2a7;
|
||||
}
|
||||
|
||||
/* Forzamos el color blanco en los subelementos */
|
||||
@ -180,7 +180,7 @@
|
||||
.btn-check-service+.btn .service-title,
|
||||
.btn-check-service+.btn .service-desc,
|
||||
.btn-check-service+.btn .service-price {
|
||||
color: #4b7bec;
|
||||
color: #92b2a7;
|
||||
}
|
||||
|
||||
/* ribbon-service */
|
||||
@ -199,7 +199,7 @@
|
||||
display: block;
|
||||
width: 120px;
|
||||
padding: 5px 0;
|
||||
background: #f25c5c;
|
||||
background: #e5745b;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
@ -213,7 +213,7 @@
|
||||
|
||||
/* ===== Tiradas (pricing cards) ===== */
|
||||
.tirada-card {
|
||||
--il-accent: #4b7bec;
|
||||
--il-accent: #92b2a7; /* verde grisáceo */
|
||||
--radius: 18px;
|
||||
--sel-scale-y: 1.12;
|
||||
/* cuánto más alta la seleccionada (crece arriba y abajo) */
|
||||
@ -223,24 +223,22 @@
|
||||
--arc-h: 190px;
|
||||
--arc-y: -23px;
|
||||
/* tu valor */
|
||||
--arc-stop: 74%;
|
||||
--arc-stop: 65%;
|
||||
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: var(--radius);
|
||||
background-color: #fff;
|
||||
background-image: radial-gradient(var(--arc-w) var(--arc-h) at 50% var(--arc-y),
|
||||
rgba(75, 126, 236, .24) 0 var(--arc-stop),
|
||||
rgba(146, 178, 167, .24) 0 var(--arc-stop),
|
||||
transparent calc(var(--arc-stop) + 1%));
|
||||
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
box-shadow: 0 4px 14px rgba(17, 24, 39, .06);
|
||||
box-shadow: 0 4px 14px rgba(146, 178, 167, .12);
|
||||
overflow: hidden;
|
||||
/* integra la línea inferior */
|
||||
transform-origin: center center;
|
||||
/* ⟵ crecer hacia arriba y hacia abajo */
|
||||
will-change: transform;
|
||||
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
|
||||
}
|
||||
@ -255,16 +253,21 @@
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
font-size: .9rem;
|
||||
color: #4b7bec;
|
||||
color: var(--il-accent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tirada-card .price-big {
|
||||
font-size: 2rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin: .35rem 0 .15rem;
|
||||
color: #4b7bec;
|
||||
color: var(--il-accent);
|
||||
}
|
||||
|
||||
.tirada-card .price-total {
|
||||
font-size: 1.8rem;
|
||||
color: #92b2a7;
|
||||
}
|
||||
|
||||
.tirada-card .per {
|
||||
@ -294,22 +297,20 @@
|
||||
transition: background .2s ease, color .2s ease;
|
||||
}
|
||||
|
||||
/* ===== Seleccionada (más alta en Y, sin elevar; crece arriba y abajo) ===== */
|
||||
/* ===== Seleccionada ===== */
|
||||
.tirada-card.selected {
|
||||
transform: scaleY(var(--sel-scale-y));
|
||||
/* ⟵ crecimiento simétrico vertical */
|
||||
z-index: 2;
|
||||
box-shadow: 0 18px 48px rgba(75, 126, 236, .32);
|
||||
box-shadow: 0 18px 48px rgba(146, 178, 167, .32);
|
||||
border-color: var(--il-accent);
|
||||
|
||||
/* círculo sólido */
|
||||
background-image: radial-gradient(var(--arc-w) var(--arc-h) at 50% var(--arc-y),
|
||||
#4b7bec 0 var(--arc-stop),
|
||||
#92b2a7 0 var(--arc-stop),
|
||||
transparent calc(var(--arc-stop) + 1%));
|
||||
}
|
||||
|
||||
.tirada-card.selected:hover {
|
||||
/* evita que :hover base anule la escala */
|
||||
transform: scaleY(var(--sel-scale-y));
|
||||
}
|
||||
|
||||
@ -325,14 +326,13 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ===== Línea inferior integrada (siempre visible en NO seleccionadas) ===== */
|
||||
/* Línea inferior integrada (solo en no seleccionadas) */
|
||||
.tirada-card:not(.selected)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
/* dentro del borde */
|
||||
height: 8px;
|
||||
background: var(--il-accent);
|
||||
border-bottom-left-radius: calc(var(--radius) - 1px);
|
||||
@ -347,4 +347,64 @@
|
||||
/* Oculta el radio */
|
||||
.tirada-card input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-link.active .bg-soft-primary {
|
||||
background-color: #ffffff33 !important; /* #4c5c63 al 20% */
|
||||
}
|
||||
|
||||
.nav-link.active .text-primary {
|
||||
color: #ffffff !important; /* #4c5c63 al 20% */
|
||||
}
|
||||
|
||||
.nav-link:not(.active) .bg-soft-primary {
|
||||
background-color: #4c5c6366 !important; /* #4c5c63 al 20% */
|
||||
}
|
||||
|
||||
.nav-link:not(.active) .text-primary {
|
||||
color: #000000 !important; /* #4c5c63 al 20% */
|
||||
}
|
||||
|
||||
/* base */
|
||||
.btn-service-option {
|
||||
background-color: rgba(146, 178, 167, 0.2);
|
||||
color: #92b2a7;
|
||||
border: 1px solid #92b2a7;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
/* hover no seleccionado */
|
||||
.btn-check-service + .btn-service-option:hover {
|
||||
background-color: rgba(146, 178, 167, 0.3);
|
||||
color: #92b2a7;
|
||||
}
|
||||
|
||||
/* seleccionado */
|
||||
.btn-check-service:checked + .btn-service-option {
|
||||
background-color: #92b2a7;
|
||||
color: #fff;
|
||||
border-color: #92b2a7;
|
||||
}
|
||||
|
||||
/* hover estando seleccionado (que no se aclare) */
|
||||
.btn-check-service:checked + .btn-service-option:hover {
|
||||
background-color: #92b2a7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* heredan color para textos internos */
|
||||
.btn-service-option .service-title,
|
||||
.btn-service-option .service-desc,
|
||||
.btn-service-option .service-price {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-switch-presupuesto .form-check-input:checked {
|
||||
border-color: #92b2a7;
|
||||
}
|
||||
|
||||
.form-switch-custom.form-switch-presupuesto .form-check-input:checked::before {
|
||||
color: #92b2a7;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 8.2 KiB |
@ -226,7 +226,7 @@ class PresupuestoCliente {
|
||||
|
||||
// Crear label
|
||||
const label = document.createElement('label');
|
||||
label.className = 'btn btn-outline-primary material-shadow gramaje-radio ' + name;
|
||||
label.className = 'btn btn-opcion-presupuesto material-shadow gramaje-radio ' + name;
|
||||
label.setAttribute('for', id);
|
||||
label.textContent = gramaje;
|
||||
|
||||
@ -663,7 +663,7 @@ class PresupuestoCliente {
|
||||
for (const opcion of data.opciones_acabados_cubierta) {
|
||||
const item = `
|
||||
<input type="radio" class="btn-check acabado-cubierta-check" id="acabado-cubierta-${opcion['sk-id']}" name="acabado-cubierta" sk-id="${opcion['sk-id']}">
|
||||
<label class="btn btn-outline-primary material-shadow" for="acabado-cubierta-${opcion['sk-id']}">
|
||||
<label class="btn btn-opcion-presupuesto material-shadow" for="acabado-cubierta-${opcion['sk-id']}">
|
||||
${opcion.name}
|
||||
</label>
|
||||
`;
|
||||
|
||||
@ -19,7 +19,7 @@ class ServiceOptionCard {
|
||||
const $card = $(`
|
||||
<div class="col-lg-2 col-md-3 col-sm-6 mb-3">
|
||||
<input type="checkbox" class="service-checkbox data-price=${this.price} btn-check-service" id="${this.id}" name="services[]" value="${this.id}" autocomplete="off" ${this.checked ? 'checked' : ''} />
|
||||
<label class="btn btn-outline-primary w-100 text-center py-3 px-2 d-flex flex-column align-items-center justify-content-center h-100" for="${this.id}">
|
||||
<label class="btn btn-service-option w-100 text-center py-3 px-2 d-flex flex-column align-items-center justify-content-center h-100" for="${this.id}">
|
||||
${ribbonHtml}
|
||||
<h5 class="service-title mb-1">${this.title}</h5>
|
||||
<p class="service-desc mb-1 small">${this.description}</p>
|
||||
|
||||
@ -50,7 +50,7 @@ class TiradaCard {
|
||||
|
||||
<div class="price-row">
|
||||
<div class="muted">${this.labels.total}</div>
|
||||
<div class="fw-bold">${this.#formatMoneyES(this.precioTotal, 2)} ${this.moneda}</div>
|
||||
<div class="price-total fw-bold">${this.#formatMoneyES(this.precioTotal, 2)} ${this.moneda}</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-select-tirada">${this.labels.select}</button>
|
||||
|
||||
Reference in New Issue
Block a user