modificados los colores segun telegram

This commit is contained in:
Jaime Jiménez
2025-09-04 19:53:53 +02:00
parent 64dc8f4003
commit a1b0eb7ea1
21 changed files with 165 additions and 74 deletions

View File

@ -21,7 +21,8 @@ public class SecurityConfig {
"/images/**",
"/public/**",
"/error",
"/presupuesto/public/**")
"/presupuesto/public/**",
"/favicon.ico")
.permitAll()
.anyRequest().authenticated())
.csrf(csrf -> csrf

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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

View File

@ -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>
`;

View File

@ -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>

View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -2,11 +2,11 @@
<!-- Layout config Js -->
<script src="/assets/js/layout.js"></script>
<!-- Bootstrap Css -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/app.css" rel="stylesheet" type="text/css" />
<!-- custom Css-->
<link href="/assets/css/custom.min.css" rel="stylesheet" type="text/css" />

View File

@ -1,8 +1,10 @@
<div th:fragment="title-meta(title)" th:remove="tag">
<meta charset="utf-8" />
<title text="imprimelibros'"></title>
<title text="imprimelibros"></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Servicion de impresión personal" name="description" />
<!-- App favicon -->
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link rel="icon" href="/favicon.ico?v=4" type="image/x-icon" sizes="any">
<link rel="icon" href="/assets/images/favicon-32x32.png?v=4" type="image/png" sizes="32x32">
<link rel="icon" href="/assets/images/favicon-16x16.png?v=4" type="image/png" sizes="16x16">
</div>

View File

@ -10,7 +10,7 @@
<img src="/assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="/assets/images/logo-dark.png" alt="" height="17">
<img src="/assets/images/logo-dark.png" alt="" height="45">
</span>
</a>
@ -19,7 +19,7 @@
<img src="/assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="/assets/images/logo-light.png" alt="" height="17">
<img src="/assets/images/logo-light.png" alt="" height="45">
</span>
</a>
</div>

View File

@ -255,7 +255,7 @@
<div class="col-auto">
<div class="d-flex flex-wrap align-items-center gap-4 ">
<button id="sobrecubierta" type="button" class="btn btn-outline-primary custom-toggle mb-4"
<button id="sobrecubierta" type="button" class="btn btn-opcion-presupuesto custom-toggle mb-4"
data-bs-toggle="button">
<span class="icon-on">
<i class="ri-close-line align-bottom me-1"></i>
@ -317,7 +317,7 @@
<div class="col-auto">
<div class="d-flex flex-wrap align-items-center gap-4 ">
<button id="faja" type="button" class="btn btn-outline-primary custom-toggle mb-4"
<button id="faja" type="button" class="btn btn-opcion-presupuesto custom-toggle mb-4"
data-bs-toggle="button">
<span class="icon-on">
<i class="ri-close-line align-bottom me-1"></i>
@ -397,7 +397,7 @@
<span th:text="#{presupuesto.volver-interior}">Volver a interior</span>
</button>
<button id="btn-next-cubierta" type="button"
class="btn btn-primary d-flex align-items-center btn-change-tab-cubierta">
class="btn btn-secondary d-flex align-items-center btn-change-tab-cubierta">
<span th:text="#{presupuesto.continuar-seleccion-tirada}">Continuar a selección de tirada</span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>

View File

@ -112,7 +112,7 @@
<div class="row justify-content-center mb-3">
<div class="col-sm-4 d-flex justify-content-center">
<div class="form-check form-switch form-switch-custom form-switch-primary mb-3">
<div class="form-check form-switch form-switch-custom form-switch-presupuesto mb-3">
<input type="checkbox"
class="form-check-input form-switch-custom-primary datos-generales-data"
id="formato-personalizado" name="formato-personalizado">
@ -252,7 +252,7 @@
</div>
<div class="d-flex align-items-center justify-content-center gap-3 mt-3">
<button type="button" id="next-datos-generales" class="btn btn-primary d-flex align-items-center ms-auto">
<button type="button" id="next-datos-generales" class="btn btn-secondary d-flex align-items-center ms-auto">
<span th:text="#{presupuesto.continuar-interior}">Continuar a diseño interior</span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>

View File

@ -23,7 +23,7 @@
<span th:text="#{presupuesto.volver-seleccion-tirada}">Volver a selección de tirada</span>
</button>
<button id="btn-next-extras" type="button"
class="btn btn-primary d-flex align-items-center btn-change-tab-extras">
class="btn btn-secondary d-flex align-items-center btn-change-tab-extras">
<span><b th:text="#{presupuesto.calcular-presupuesto}">Calcular presupuesto</b></span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>

View File

@ -62,7 +62,7 @@
<i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
<span th:text="#{presupuesto.volver-datos-generales}">Volver a datos generales</span>
</button>
<button id="btn-next-interior" type="button" class="btn btn-change-tab-interior btn-primary d-flex align-items-center">
<button id="btn-next-interior" type="button" class="btn btn-change-tab-interior btn-secondary d-flex align-items-center">
<span th:text="#{presupuesto.continuar-cubierta}">Continuar a diseño cubierta</span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>

View File

@ -33,7 +33,7 @@
<span th:text="#{presupuesto.volver-cubierta}">Volver a diseño de cubierta</span>
</button>
<button id="btn-next-seleccion-tirada" type="button"
class="btn btn-primary d-flex align-items-center btn-change-tab-seleccion-tirada">
class="btn btn-secondary d-flex align-items-center btn-change-tab-seleccion-tirada">
<span><b th:text="#{presupuesto.continuar-extras-libro}">Continuar a extras del libro</b></span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>