833 lines
19 KiB
CSS
833 lines
19 KiB
CSS
/* ============================================
|
|
ENHANCEMENTS UX POUR PORTAIL INTER SANTÉ
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Variables UX avancées */
|
|
--ux-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ux-shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.08);
|
|
--ux-shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.12);
|
|
--ux-shadow-hard: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
--ux-border-radius-sm: 8px;
|
|
--ux-border-radius-md: 12px;
|
|
--ux-border-radius-lg: 20px;
|
|
|
|
/* Variables d'animation */
|
|
--animation-duration-fast: 150ms;
|
|
--animation-duration-normal: 300ms;
|
|
--animation-duration-slow: 500ms;
|
|
}
|
|
|
|
/* ============================================
|
|
ENHANCED SIDEBAR UX
|
|
============================================ */
|
|
.app-sidebar {
|
|
--sidebar-hover-glow: 0 0 20px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
overflow: visible;
|
|
transition: all var(--animation-duration-normal) var(--ux-transition-smooth);
|
|
border-left: 3px solid transparent;
|
|
will-change: transform, background-color, border-color;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: linear-gradient(90deg,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0.05) 100%);
|
|
transform: translateX(8px);
|
|
border-left-color: rgba(255, 255, 255, 0.5);
|
|
box-shadow: var(--sidebar-hover-glow);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: linear-gradient(90deg,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0.1) 100%);
|
|
border-left-color: #ffffff;
|
|
box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1),
|
|
0 0 20px rgba(255, 255, 255, 0.15);
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
/* Indicateur visuel pour lien actif */
|
|
.nav-link.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px white;
|
|
animation: pulse-active 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-active {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: translateY(-50%) scale(1.2);
|
|
}
|
|
}
|
|
|
|
/* Sous-menus améliorés */
|
|
.nav-submenu {
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 0, 0, 0.15) 0%,
|
|
rgba(0, 0, 0, 0.1) 100%);
|
|
border-radius: var(--ux-border-radius-sm);
|
|
margin: 6px 12px;
|
|
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
|
transition: all 0.4s var(--ux-transition-smooth);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-submenu.show {
|
|
max-height: 500px;
|
|
padding: 8px 0;
|
|
margin-top: 8px;
|
|
margin-bottom: 12px;
|
|
animation: slideDown 0.4s var(--ux-transition-smooth);
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
max-height: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
CONTEXT BUTTON - QUILLBOT STYLE
|
|
============================================ */
|
|
.context-toggle {
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #b7472a 0%, #ff6b35 100%);
|
|
color: white;
|
|
border: 3px solid white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
z-index: 1050;
|
|
transition: all 0.5s var(--ux-transition-smooth);
|
|
opacity: 0.2;
|
|
transform: scale(0.8);
|
|
box-shadow:
|
|
0 4px 25px rgba(183, 71, 42, 0.15),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
will-change: transform, opacity, box-shadow;
|
|
}
|
|
|
|
/* Animation d'attente */
|
|
.context-toggle::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 72px;
|
|
height: 72px;
|
|
border: 2px solid rgba(183, 71, 42, 0.3);
|
|
border-radius: 50%;
|
|
animation: ripple 3s infinite;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(0.8);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* État au survol et activation */
|
|
.context-toggle:hover,
|
|
.context-toggle.active,
|
|
body:has(.proximity-hover-area:hover) .context-toggle {
|
|
opacity: 1 !important;
|
|
transform: scale(1.1) !important;
|
|
box-shadow:
|
|
0 8px 35px rgba(183, 71, 42, 0.4),
|
|
0 0 30px rgba(255, 107, 53, 0.3),
|
|
inset 0 0 25px rgba(255, 255, 255, 0.3);
|
|
animation: bounce 0.5s var(--ux-transition-smooth);
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: scale(1.1); }
|
|
50% { transform: scale(1.15); }
|
|
}
|
|
|
|
/* Rotation quand le panel est ouvert */
|
|
.context-panel.open ~ .context-toggle {
|
|
transform: rotate(180deg) scale(1.1);
|
|
background: linear-gradient(135deg, #2b579a 0%, #1e4a8b 100%);
|
|
right: 410px;
|
|
}
|
|
|
|
/* Zone de détection de proximité invisible */
|
|
.proximity-hover-area {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 1049;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Feedback visuel pour la zone */
|
|
.proximity-hover-area::before {
|
|
content: '';
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: radial-gradient(circle, rgba(183, 71, 42, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity var(--animation-duration-normal);
|
|
}
|
|
|
|
.proximity-hover-area:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================
|
|
ENHANCED CONTEXT PANEL
|
|
============================================ */
|
|
.context-panel {
|
|
transition: right var(--animation-duration-slow) var(--ux-transition-smooth);
|
|
box-shadow:
|
|
-5px 0 30px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
border-left: 3px solid var(--office-primary);
|
|
will-change: right;
|
|
}
|
|
|
|
.context-panel.open {
|
|
animation: slideInRight 0.5s var(--ux-transition-smooth);
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100px);
|
|
opacity: 0.8;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.context-header {
|
|
background: linear-gradient(135deg, var(--office-primary) 0%, #d9534f 100%);
|
|
padding: 25px 30px;
|
|
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.context-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.context-close {
|
|
transition: all var(--animation-duration-normal);
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.context-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Sections avec effet de profondeur */
|
|
.context-section {
|
|
background: white;
|
|
border-radius: var(--ux-border-radius-md);
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
box-shadow: var(--ux-shadow-soft);
|
|
border: 1px solid var(--office-border);
|
|
transition: all var(--animation-duration-normal);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.context-section:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--ux-shadow-medium);
|
|
border-color: var(--office-secondary);
|
|
}
|
|
|
|
.context-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--office-primary), var(--office-secondary));
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.section-title {
|
|
color: var(--office-secondary);
|
|
font-size: 15px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid rgba(43, 87, 154, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--office-primary), var(--office-secondary));
|
|
}
|
|
|
|
/* Cards améliorées */
|
|
.info-box {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
border-radius: var(--ux-border-radius-sm);
|
|
padding: 18px;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
transition: all var(--animation-duration-normal);
|
|
}
|
|
|
|
.info-box:hover {
|
|
border-color: var(--office-secondary);
|
|
box-shadow:
|
|
inset 0 2px 8px rgba(43, 87, 154, 0.05),
|
|
0 3px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--office-dark);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Boutons d'action améliorés */
|
|
.action-btn {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
border: 2px solid var(--office-border);
|
|
border-radius: var(--ux-border-radius-sm);
|
|
padding: 15px 20px;
|
|
margin-bottom: 12px;
|
|
transition: all var(--animation-duration-normal) var(--ux-transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
will-change: transform, border-color, background;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateX(8px);
|
|
border-color: var(--office-secondary);
|
|
background: linear-gradient(135deg, #f0f7ff 0%, #e3eeff 100%);
|
|
box-shadow:
|
|
5px 5px 15px rgba(43, 87, 154, 0.1),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.action-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -100%;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.4),
|
|
transparent);
|
|
transition: left 0.6s;
|
|
}
|
|
|
|
.action-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Photo patient améliorée */
|
|
.photo-container {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
border-radius: var(--ux-border-radius-md);
|
|
padding: 25px;
|
|
border: 2px dashed var(--office-border);
|
|
transition: all var(--animation-duration-normal);
|
|
}
|
|
|
|
.photo-container:hover {
|
|
border-color: var(--office-primary);
|
|
background: linear-gradient(135deg, #fff5f2 0%, #ffffff 100%);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.patient-photo {
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: var(--ux-border-radius-md);
|
|
object-fit: cover;
|
|
border: 5px solid white;
|
|
box-shadow:
|
|
0 10px 30px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.4s var(--ux-transition-smooth);
|
|
cursor: pointer;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.patient-photo:hover {
|
|
transform: scale(1.08) rotate(2deg);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.2),
|
|
0 0 0 3px rgba(183, 71, 42, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
HEADER ENHANCEMENTS
|
|
============================================ */
|
|
.app-header {
|
|
backdrop-filter: blur(10px);
|
|
background: linear-gradient(135deg,
|
|
rgba(243, 242, 241, 0.95) 0%,
|
|
rgba(255, 255, 255, 0.98) 100%);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow:
|
|
0 4px 20px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.user-avatar {
|
|
background: linear-gradient(135deg, var(--office-primary) 0%, #ff8c69 100%);
|
|
box-shadow:
|
|
0 4px 15px rgba(183, 71, 42, 0.3),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.3);
|
|
transition: all var(--animation-duration-normal);
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.user-avatar:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
box-shadow:
|
|
0 6px 25px rgba(183, 71, 42, 0.4),
|
|
inset 0 0 25px rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.notification-badge {
|
|
background: linear-gradient(135deg, #107c10 0%, #20a020 100%);
|
|
box-shadow: 0 3px 10px rgba(16, 124, 16, 0.4);
|
|
animation: pulse-notification 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-notification {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
/* ============================================
|
|
MAIN CONTENT ENHANCEMENTS
|
|
============================================ */
|
|
.app-main {
|
|
background: linear-gradient(135deg,
|
|
#f3f2f1 0%,
|
|
#f8f7f6 30%,
|
|
#fefefe 100%);
|
|
}
|
|
|
|
.content-area {
|
|
animation: fadeIn 0.6s var(--ux-transition-smooth);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.nav-bar {
|
|
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
|
border-radius: var(--ux-border-radius-md);
|
|
box-shadow: var(--ux-shadow-soft);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.nav-tab {
|
|
transition: all var(--animation-duration-normal);
|
|
position: relative;
|
|
overflow: hidden;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.nav-tab:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(43, 87, 154, 0.1);
|
|
}
|
|
|
|
.nav-tab.active {
|
|
background: linear-gradient(135deg, var(--office-secondary) 0%, #3a6bc0 100%);
|
|
box-shadow:
|
|
0 5px 20px rgba(43, 87, 154, 0.3),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
animation: tab-active-pulse 3s infinite;
|
|
}
|
|
|
|
@keyframes tab-active-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 5px 20px rgba(43, 87, 154, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 5px 25px rgba(43, 87, 154, 0.5);
|
|
}
|
|
}
|
|
|
|
.content-card {
|
|
background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%);
|
|
border-radius: var(--ux-border-radius-md);
|
|
box-shadow: var(--ux-shadow-soft);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
transition: all 0.4s;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.content-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--ux-shadow-medium);
|
|
border-color: rgba(43, 87, 154, 0.1);
|
|
}
|
|
|
|
/* ============================================
|
|
LOADING STATES
|
|
============================================ */
|
|
.loading-placeholder {
|
|
background: linear-gradient(90deg,
|
|
#f0f0f0 25%,
|
|
#e0e0e0 50%,
|
|
#f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s infinite;
|
|
border-radius: var(--ux-border-radius-sm);
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* ============================================
|
|
ACCESSIBILITY ENHANCEMENTS
|
|
============================================ */
|
|
|
|
/* Navigation au clavier */
|
|
body.keyboard-navigation .nav-link:focus,
|
|
body.keyboard-navigation .action-btn:focus,
|
|
body.keyboard-navigation .context-toggle:focus {
|
|
outline: 3px solid rgba(43, 87, 154, 0.5);
|
|
outline-offset: 3px;
|
|
box-shadow: 0 0 0 6px rgba(43, 87, 154, 0.1);
|
|
}
|
|
|
|
/* Lien skip pour accessibilité */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: var(--office-primary);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: 0 0 4px 0;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
z-index: 9999;
|
|
transition: top 0.3s;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 3px solid white;
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
/* High contrast mode */
|
|
@media (prefers-contrast: high) {
|
|
.nav-link.active {
|
|
border-left: 4px solid white;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.context-section {
|
|
border: 2px solid var(--office-dark);
|
|
}
|
|
|
|
.action-btn {
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.context-toggle::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.app-header {
|
|
background: rgba(30, 30, 30, 0.95);
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.content-card {
|
|
background: #2a2a2a;
|
|
border-color: #404040;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.nav-bar {
|
|
background: #2a2a2a;
|
|
border-color: #404040;
|
|
}
|
|
|
|
.info-box {
|
|
background: #333;
|
|
border-color: #444;
|
|
}
|
|
|
|
.action-btn {
|
|
background: #333;
|
|
border-color: #444;
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE ENHANCEMENTS
|
|
============================================ */
|
|
@media (max-width: 1200px) {
|
|
.app-sidebar:hover {
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
.app-sidebar:hover .nav-text,
|
|
.app-sidebar:hover .nav-arrow {
|
|
display: block;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
|
|
.context-panel {
|
|
width: 90%;
|
|
}
|
|
|
|
.context-panel.open ~ .context-toggle {
|
|
right: calc(90% + 20px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.context-toggle {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 20px;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
}
|
|
|
|
.context-toggle::after {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.context-panel {
|
|
width: 100%;
|
|
}
|
|
|
|
.context-panel.open ~ .context-toggle {
|
|
right: calc(100% - 70px);
|
|
}
|
|
|
|
.nav-bar {
|
|
padding: 12px 15px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.nav-tabs {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.nav-tab {
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Masquer certains éléments sur mobile */
|
|
.user-info .user-role {
|
|
display: none;
|
|
}
|
|
|
|
.test-indicator span {
|
|
display: none;
|
|
}
|
|
|
|
.test-indicator {
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.header-content {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.app-logo span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.user-name {
|
|
display: none;
|
|
}
|
|
|
|
.context-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.context-section {
|
|
padding: 15px;
|
|
}
|
|
|
|
.patient-photo {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITY CLASSES
|
|
============================================ */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.text-pretty {
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* Connection warning */
|
|
.connection-warning {
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
max-width: 90%;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
/* Animation for loaded images */
|
|
img.loaded {
|
|
animation: fadeInUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.app-sidebar,
|
|
.app-header,
|
|
.context-panel,
|
|
.context-toggle,
|
|
.nav-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
.app-main {
|
|
margin-left: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.content-card {
|
|
box-shadow: none;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
} |