Khwezi Mngoma
88 lines
2.0 KiB
CSS
88 lines
2.0 KiB
CSS
/* TopBarAuthstateView.razor.css */
|
|
|
|
.auth-state-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
/* REMOVED min-width: 160px; -> Let the box collapse to exactly the icon's width */
|
|
width: auto;
|
|
height: 100%;
|
|
/* Sliced down to a tight, crisp margin from the right browser edge */
|
|
padding-right: 6px;
|
|
box-sizing: border-box;
|
|
/* Keeps it anchored to the far right side of your header layout layout */
|
|
margin-left: auto;
|
|
}
|
|
|
|
.auth-indicator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: auto; /* Collapses container layout tight */
|
|
}
|
|
|
|
/* Pristine yellow security lock vector */
|
|
.security-lock-vector {
|
|
width: auto;
|
|
height: 48px; /* Preserved your ideal visual size */
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Subtle hardware-accelerated technological power-hum pulse */
|
|
.unauthenticated .lock-chassis {
|
|
animation: clean-cyber-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
/* PRE-STRUCTURED TEXT STACKS: Active right-aligned layout framework */
|
|
.user-meta-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: right;
|
|
font-family: inherit;
|
|
gap: 4px;
|
|
}
|
|
|
|
.meta-row-primary {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.meta-row-secondary {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: #4dabff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Mixed weighting classes pre-staged for detailed user metadata strings */
|
|
.meta-row-large-bold {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.25px;
|
|
}
|
|
|
|
.meta-row-small-regular {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: #4dabff;
|
|
opacity: 0.85;
|
|
line-height: 1;
|
|
}
|
|
|
|
@keyframes clean-cyber-pulse {
|
|
0%, 100% {
|
|
filter: drop-shadow(0px 0px 4px rgba(255, 209, 102, 0.35));
|
|
}
|
|
|
|
50% {
|
|
filter: drop-shadow(0px 0px 14px rgba(255, 209, 102, 0.65));
|
|
}
|
|
}
|