feat: actualización a v1.1.9 con Agenda interactiva y correcciones visuales
This commit is contained in:
Carlos Tello
+347
-212
@@ -1,212 +1,347 @@
|
||||
.filter-section {
|
||||
background: var(--ion-background-color);
|
||||
padding: 5px 0;
|
||||
|
||||
ion-item {
|
||||
--background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
color: var(--ion-color-danger);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Header styles
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.header-logo {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer replica styles
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
|
||||
.footer-text {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.view-segment {
|
||||
background: var(--ion-background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-titles {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.fav-icon {
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aula-container {
|
||||
margin: 15px 0;
|
||||
|
||||
.aula-tag {
|
||||
color: #682cad;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card {
|
||||
margin: 8px 10px;
|
||||
|
||||
ion-card-header {
|
||||
padding: 10px 14px 0;
|
||||
|
||||
ion-card-title {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: 10px 14px 14px;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.aula-container {
|
||||
margin: 8px 0;
|
||||
|
||||
.aula-tag {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-card.subject-card {
|
||||
margin: 8px 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.1s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.share-icon,
|
||||
.fav-icon {
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
|
||||
&:active {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.link-container {
|
||||
margin-top: 10px;
|
||||
|
||||
ion-button {
|
||||
--border-radius: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-text {
|
||||
color: #7B2049;
|
||||
/* Secondary Uva color */
|
||||
font-size: 0.98rem !important;
|
||||
font-weight: bold !important;
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
border: 2px solid var(--ion-color-secondary) !important;
|
||||
animation: pulse-border 1s alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
from {
|
||||
box-shadow: 0 0 5px var(--ion-color-secondary);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px var(--ion-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overwrites for custom colored text */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.aula-container .aula-tag {
|
||||
color: #ae7fff; /* Lighter vivid purple for dark background */
|
||||
}
|
||||
|
||||
.schedule-text {
|
||||
color: #ff8ab6 !important; /* Lighter magenta for dark background */
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
border-color: var(--ion-color-primary) !important;
|
||||
animation: pulse-border-dark 1s alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-border-dark {
|
||||
from {
|
||||
box-shadow: 0 0 5px var(--ion-color-primary);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px var(--ion-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-section {
|
||||
background: var(--ion-background-color);
|
||||
padding: 5px 0;
|
||||
|
||||
ion-item {
|
||||
--background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
color: var(--ion-color-danger);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Header styles
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.header-logo {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer replica styles
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
|
||||
.footer-text {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.view-segment {
|
||||
background: var(--ion-background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-titles {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.fav-icon {
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aula-container {
|
||||
margin: 15px 0;
|
||||
|
||||
.aula-tag {
|
||||
color: #682cad;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card {
|
||||
margin: 8px 10px;
|
||||
|
||||
ion-card-header {
|
||||
padding: 10px 14px 0;
|
||||
|
||||
ion-card-title {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: 10px 14px 14px;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.aula-container {
|
||||
margin: 8px 0;
|
||||
|
||||
.aula-tag {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-card.subject-card {
|
||||
margin: 8px 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.1s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.share-icon,
|
||||
.menu-icon {
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.link-container {
|
||||
margin-top: 10px;
|
||||
|
||||
ion-button {
|
||||
--border-radius: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-text {
|
||||
color: #7B2049;
|
||||
/* Secondary Uva color */
|
||||
font-size: 0.98rem !important;
|
||||
font-weight: bold !important;
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
border: 2px solid var(--ion-color-secondary) !important;
|
||||
animation: pulse-border 1s alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
from {
|
||||
box-shadow: 0 0 5px var(--ion-color-secondary);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px var(--ion-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overwrites for custom colored text */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.aula-container .aula-tag {
|
||||
color: #ae7fff; /* Lighter vivid purple for dark background */
|
||||
}
|
||||
|
||||
.schedule-text {
|
||||
color: #ff8ab6 !important; /* Lighter magenta for dark background */
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
border-color: var(--ion-color-primary) !important;
|
||||
animation: pulse-border-dark 1s alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-border-dark {
|
||||
from {
|
||||
box-shadow: 0 0 5px var(--ion-color-primary);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px var(--ion-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.proxima-clase-card {
|
||||
background: linear-gradient(135deg, #1e2a4a, #1a1f3c) !important;
|
||||
border-color: rgba(var(--ion-color-primary-rgb), 0.6) !important;
|
||||
|
||||
|
||||
|
||||
.proxima-label { color: rgba(255, 255, 255, 0.6); }
|
||||
.proxima-asignatura { color: #fff; }
|
||||
.proxima-detalles { color: rgba(255, 255, 255, 0.75); }
|
||||
}
|
||||
|
||||
.evento-badge {
|
||||
--background: rgba(var(--ion-color-secondary-rgb), 0.15);
|
||||
color: var(--ion-color-secondary-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Hitos Académicos (Agenda) ──────────────────────────────────────
|
||||
|
||||
.evento-badge-container {
|
||||
margin-top: 5px;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.evento-badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
|
||||
ion-icon {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ─── Banner: Próxima Clase ───────────────────────────────────────────
|
||||
|
||||
.proxima-clase-container {
|
||||
padding: 8px 12px 0;
|
||||
}
|
||||
|
||||
.proxima-clase-card {
|
||||
margin: 0;
|
||||
border-radius: 14px;
|
||||
border: 1.5px solid rgba(var(--ion-color-primary-rgb), 0.35);
|
||||
background: linear-gradient(135deg, #eef2ff, #f5f0ff);
|
||||
box-shadow: 0 4px 18px rgba(var(--ion-color-primary-rgb), 0.15);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
|
||||
ion-card-content {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
&.urgente {
|
||||
border-color: rgba(var(--ion-color-danger-rgb), 0.5);
|
||||
background: linear-gradient(135deg, #fff0f3, #ffe8ed);
|
||||
box-shadow: 0 4px 18px rgba(var(--ion-color-danger-rgb), 0.18);
|
||||
animation: pulse-urgente 1.4s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-urgente {
|
||||
0%, 100% { box-shadow: 0 4px 18px rgba(var(--ion-color-danger-rgb), 0.15); }
|
||||
50% { box-shadow: 0 4px 28px rgba(var(--ion-color-danger-rgb), 0.35); }
|
||||
}
|
||||
|
||||
.proxima-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.proxima-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--ion-color-medium);
|
||||
|
||||
ion-icon { font-size: 1rem; }
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-chip {
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
height: 28px;
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
|
||||
ion-icon { margin-right: 4px; }
|
||||
}
|
||||
|
||||
@keyframes pulse-chip {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.75; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.pulse-chip {
|
||||
animation: pulse-chip 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.proxima-asignatura {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
margin: 0 0 10px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.proxima-detalles {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.88rem;
|
||||
color: var(--ion-color-medium-shade);
|
||||
font-weight: 500;
|
||||
|
||||
ion-icon { font-size: 1rem; flex-shrink: 0; }
|
||||
}
|
||||
}␍
|
||||
Reference in New Issue
Block a user