fix(theme): correccion de contraste en modo oscuro para Manual, Beneficios y Privacidad
This commit is contained in:
Carlos Facundo Tello
@@ -1,15 +1,16 @@
|
||||
.privacy-content {
|
||||
--background: var(--ion-color-light);
|
||||
--background: var(--ion-color-light, #f4f5f8);
|
||||
}
|
||||
|
||||
ion-segment {
|
||||
--background: var(--ion-color-primary-shade);
|
||||
--background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0;
|
||||
|
||||
ion-segment-button {
|
||||
--color: rgba(255,255,255,0.7);
|
||||
--color-checked: white;
|
||||
--indicator-color: white;
|
||||
--color: rgba(255, 255, 255, 0.75);
|
||||
--color-checked: #ffffff;
|
||||
--indicator-color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +19,7 @@ ion-segment {
|
||||
|
||||
.info-logo {
|
||||
height: 80px;
|
||||
background: white;
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
@@ -38,17 +39,18 @@ ion-segment {
|
||||
|
||||
.subtitle {
|
||||
margin: 5px 0 0;
|
||||
color: var(--ion-color-medium);
|
||||
color: var(--ion-color-medium, #666666);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.info-body {
|
||||
background: white;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 20px;
|
||||
|
||||
section {
|
||||
@@ -58,15 +60,25 @@ ion-segment {
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: var(--ion-color-dark);
|
||||
font-size: 1.05rem;
|
||||
color: var(--ion-color-dark, #1c1c1e);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
color: var(--ion-color-medium-shade);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.55;
|
||||
color: #4a4a52;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--ion-color-primary);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -85,16 +97,16 @@ ion-segment {
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background: white;
|
||||
background: #ffffff;
|
||||
border-radius: 18px;
|
||||
padding: 18px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(0,0,0,0.04);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&.featured {
|
||||
border: 1.5px solid var(--ion-color-primary);
|
||||
background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.02) 100%);
|
||||
background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.03) 100%);
|
||||
box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.12);
|
||||
}
|
||||
|
||||
@@ -134,12 +146,12 @@ ion-segment {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
color: var(--ion-color-dark);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.category {
|
||||
margin: 2px 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--ion-color-medium);
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -158,7 +170,7 @@ ion-segment {
|
||||
|
||||
.benefit-desc {
|
||||
font-size: 0.92rem;
|
||||
color: var(--ion-color-dark-shade);
|
||||
color: #33333a;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
@@ -176,7 +188,7 @@ ion-segment {
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--ion-color-medium-shade);
|
||||
color: #55555e;
|
||||
line-height: 1.4;
|
||||
|
||||
ion-icon {
|
||||
@@ -185,6 +197,21 @@ ion-segment {
|
||||
color: var(--ion-color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #777777;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--ion-color-primary);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,7 +226,7 @@ ion-segment {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -225,7 +252,10 @@ ion-segment {
|
||||
|
||||
.footer-info {
|
||||
margin-top: 30px;
|
||||
opacity: 0.6;
|
||||
p, small {
|
||||
color: #77777d;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
@@ -236,3 +266,150 @@ ion-segment {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
MODO OSCURO (DARK MODE) - OPTIMIZACIÓN DE CONTRASTE
|
||||
========================================================= */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.privacy-content {
|
||||
--background: var(--ion-background-color, #121212);
|
||||
}
|
||||
|
||||
ion-segment {
|
||||
--background: rgba(0, 0, 0, 0.35);
|
||||
|
||||
ion-segment-button {
|
||||
--color: rgba(255, 255, 255, 0.7);
|
||||
--color-checked: #ffffff;
|
||||
--indicator-color: #ff8ab6;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
.info-logo {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ff8ab6;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #a6a7ab;
|
||||
}
|
||||
}
|
||||
|
||||
.info-body {
|
||||
background: var(--ion-color-step-100, #1c1c1e);
|
||||
border: 1px solid var(--ion-color-step-200, #2c2c30);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
p, li {
|
||||
color: #d1d2d8;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #ff8ab6;
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background: var(--ion-color-step-100, #1c1c1e);
|
||||
border: 1px solid var(--ion-color-step-200, #2d2d32);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&.featured {
|
||||
background: linear-gradient(180deg, #251e27 0%, var(--ion-color-step-100, #1c1c1e) 100%);
|
||||
border: 1.5px solid #ff8ab6;
|
||||
box-shadow: 0 6px 24px rgba(180, 62, 142, 0.28);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
.brand-info {
|
||||
.brand-icon {
|
||||
&.cafe { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
|
||||
&.gym { background: rgba(76, 175, 80, 0.2); color: #81c784; }
|
||||
&.pilates { background: rgba(186, 104, 200, 0.22); color: #e1bee7; }
|
||||
&.pasta { background: rgba(255, 87, 34, 0.2); color: #ff8a65; }
|
||||
&.libreria { background: rgba(3, 169, 244, 0.2); color: #4fc3f7; }
|
||||
&.travel { background: rgba(33, 150, 243, 0.2); color: #64b5f6; }
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
.category {
|
||||
color: #a0a0a8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-desc {
|
||||
color: #d1d2d8;
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
border-top: 1px dashed rgba(255, 255, 255, 0.15);
|
||||
|
||||
.meta-row {
|
||||
color: #b5b6bc;
|
||||
|
||||
ion-icon {
|
||||
color: #ff8ab6;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #9fa1a8;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #64b5f6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inclusion-box {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-left: 3px solid #2dd36f;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
h4 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
ul li {
|
||||
color: #d0d1d6;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn[color="tertiary"] {
|
||||
--color: #ba68c8;
|
||||
--border-color: #ba68c8;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
p, small {
|
||||
color: #9e9ea6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user