bf fixes
This commit is contained in:
juanatsap
+71
-163
@@ -310,6 +310,15 @@ iconify-icon {
|
||||
box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
|
||||
}
|
||||
|
||||
/* Language selector wrapper - contains indicators outside swap target */
|
||||
.language-selector-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
/* Ensure wrapper doesn't create extra spacing */
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Language selector - matching action button style */
|
||||
.language-selector {
|
||||
display: inline-flex;
|
||||
@@ -323,6 +332,25 @@ iconify-icon {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Position language indicators next to their respective buttons */
|
||||
#lang-indicator-en,
|
||||
#lang-indicator-es {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Position indicators inside the button visual area */
|
||||
#lang-indicator-en {
|
||||
left: calc(1rem + 50px); /* Inside first button */
|
||||
}
|
||||
|
||||
#lang-indicator-es {
|
||||
left: calc(1rem + 135px); /* Inside second button */
|
||||
}
|
||||
|
||||
.selector-btn {
|
||||
padding: 0 1.5rem;
|
||||
background: transparent;
|
||||
@@ -475,23 +503,39 @@ iconify-icon {
|
||||
|
||||
/* Base indicator styles - hidden by default with opacity for smooth transitions */
|
||||
.htmx-indicator {
|
||||
opacity: 0;
|
||||
opacity: 0; /* Hidden by default */
|
||||
transition: opacity 200ms ease-in-out;
|
||||
pointer-events: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute; /* Remove from layout flow to prevent spacing issues */
|
||||
}
|
||||
|
||||
/* Override for when request is active - must come AFTER base rule */
|
||||
.htmx-indicator.htmx-request,
|
||||
#lang-indicator-en.htmx-request,
|
||||
#lang-indicator-es.htmx-request {
|
||||
opacity: 1 !important; /* Force visible state */
|
||||
}
|
||||
|
||||
/* Ensure iconify-icon indicators override global iconify-icon display style */
|
||||
iconify-icon.htmx-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Show indicators during HTMX requests */
|
||||
/* Using span wrapper, so target span.htmx-request specifically */
|
||||
span.htmx-request.htmx-indicator,
|
||||
.htmx-request .htmx-indicator,
|
||||
.htmx-request.htmx-indicator {
|
||||
opacity: 1;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Spinning animation for loading icons */
|
||||
.htmx-indicator.spinning {
|
||||
display: inline-block;
|
||||
animation: htmx-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@@ -566,154 +610,12 @@ iconify-icon {
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Skeleton Loaders for Language Transitions
|
||||
Inline Loading States for HTMX Transitions
|
||||
========================================================================= */
|
||||
|
||||
/* Skeleton loader overlay - hidden by default */
|
||||
#skeleton-loader {
|
||||
position: fixed;
|
||||
top: 50px; /* Below action bar */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--bg-gray);
|
||||
z-index: 50;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* Active state - shown during language switching */
|
||||
#skeleton-loader.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Skeleton container matching CV layout */
|
||||
.skeleton-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Skeleton page wrapper matching cv-page structure */
|
||||
.skeleton-page {
|
||||
background: var(--paper-white);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/* Base skeleton element with pulsing animation */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0%, 100% { background-position: 200% 0; }
|
||||
50% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
/* Skeleton shapes matching CV layout */
|
||||
.skeleton-header {
|
||||
height: 120px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.skeleton-badges {
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.skeleton-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
height: 24px;
|
||||
width: 40%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.skeleton-content {
|
||||
height: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skeleton-content.short {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-content.medium {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.skeleton-content.long {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
/* Grid layout for skeleton with sidebars */
|
||||
.skeleton-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr 250px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.skeleton-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.skeleton-sidebar-item {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.skeleton-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.skeleton-experience-item {
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Responsive skeleton */
|
||||
@media (max-width: 900px) {
|
||||
.skeleton-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skeleton-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton {
|
||||
animation: none;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
#skeleton-loader {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
/* Inline loading states - no blocking overlay, smooth transitions only */
|
||||
/* Language selector buttons already have htmx-indicator spinners */
|
||||
/* CV content areas show subtle fade during swap */
|
||||
|
||||
/* Zoom Wrapper - wraps cv-container for zoom functionality */
|
||||
.zoom-wrapper {
|
||||
@@ -1771,12 +1673,28 @@ footer {
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Inline loading states for CV content during language transitions */
|
||||
.cv-page-content-wrapper.htmx-swapping {
|
||||
opacity: 0;
|
||||
opacity: 0.5;
|
||||
transform: scale(0.99);
|
||||
pointer-events: none;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.cv-page-content-wrapper.htmx-settling {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
pointer-events: auto;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cv-page-content-wrapper.htmx-swapping {
|
||||
transform: none;
|
||||
filter: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus Styles for Accessibility */
|
||||
@@ -2881,7 +2799,7 @@ html {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.2;
|
||||
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
||||
}
|
||||
|
||||
.info-button:hover {
|
||||
@@ -3964,17 +3882,7 @@ html {
|
||||
HTMX CSS TRANSITIONS
|
||||
============================================================================= */
|
||||
|
||||
/* Smooth fade transition for language changes (.cv-paper swap) */
|
||||
.cv-page-content-wrapper.htmx-swapping {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-out;
|
||||
}
|
||||
|
||||
.cv-page-content-wrapper.htmx-settling {
|
||||
opacity: 1;
|
||||
transition: opacity 200ms ease-in;
|
||||
}
|
||||
|
||||
/* Inline loading transition styles moved to main section above (~line 1677) */
|
||||
/* Prevent layout shift during content fade */
|
||||
.cv-page-content-wrapper {
|
||||
position: relative;
|
||||
@@ -4002,7 +3910,7 @@ html {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.2;
|
||||
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
||||
}
|
||||
|
||||
.shortcuts-btn:hover {
|
||||
|
||||
Reference in New Issue
Block a user