css/hud.css - master - RaskolnickOFF/3D

css/hud.css
137 строк6 KB
RaskolnickOFF
fixes
19 июн 2026, 19:05
19 июн 2026, 19:0584fe909
@keyframes flash { 
    0% { opacity: 0.7; mix-blend-mode: overlay; } 
    100% { opacity: 0; }}
@keyframes pulse { 
    0% { stroke-dashoffset: 440; } 
    100% { stroke-dashoffset: -440; }}

section[data-status="good"] .main {
    background: linear-gradient(-90deg, var(--darkgreen), var(--green));}
section[data-status="warning"] .main {
    background: linear-gradient(-90deg, var(--orange), var(--yellow));}
section[data-status="danger"] .main {
    background: linear-gradient(-90deg, var(--orange), var(--red)); 
    box-shadow: 0 0 20px var(--red);}

/* Динамические боевые градиенты для второстепенных шкал выживания */
#hud section:nth-child(2) .main { /* бодрость */
    background: linear-gradient(-90deg, var(--orange), var(--yellow));}

#hud section:nth-child(3) .main  { /* еда */
    background: linear-gradient(-90deg, var(--red), var(--yellow));}

#hud section:nth-child(4) .main  { /* жажда */
    background: linear-gradient(-90deg, var(--darkblue), var(--blue));}

#hud section:nth-child(5) .main { /* температура */
    background: linear-gradient(-90deg, var(--blue) 25%, var(--green) 50%, var(--yellow) 75%);}

#hud{
    display:flex; position: absolute; flex-wrap: wrap; pointer-events: none;
    top: var(--biggest); left: calc(100vw - var(--hud)); 
    width: var(--hud); user-select: none; padding-left: var(--biggest);}
#hud section {display: flex; align-items: center; position: relative;}
#hud section ol {border-radius: var(--mini) 0 0 var(--mini); box-shadow: var(--white) -3px 2px 0;}
#hud section:nth-child(3), #hud section:nth-child(4), #hud section:nth-child(5) {
    transform: translateY(-10px);}
#hud section:nth-child(1) ol { 
    width: calc(var(--size-width) + var(--biggest)); 
    height: var(--biggest); transform:skew(30deg);}
#hud section:nth-child(2) ol { border-radius: 0 0 0 var(--mini);
    width: calc(var(--size-width) + var(--biggest)); height: var(--biggest);
    transform: scale(.7) skew(30deg) translateX(94px) translateY(-20px);}
#hud section:nth-child(3) ol, #hud section:nth-child(4) ol, #hud section:nth-child(5) ol {
    width: var(--hud-item); height: var(--standart); transform:skew(30deg); z-index: 2;
    box-shadow: var(--white) -1px 1px 0; border-radius: var(--mini) 0 0 0;
}
#hud section span {
    display: flex; align-items: center; justify-content: center;
    background-color: var(--white); border-radius: var(--circle);
    width: var(--biggest);  height: var(--biggest); margin: var(--tiny);
    margin-left: var(--biggest); z-index: 3; box-shadow: 0 0 50px var(--black-a7);}
#hud section:nth-child(1) span {transform: translateX(-15px) translateY(-10px)}
#hud section:nth-child(2) span {transform: translateY(-15px)}
#hud section:nth-child(3) span, #hud section:nth-child(4) span, #hud section:nth-child(5) span {
    margin-left: 0; transform: translateX(-10px);}
#hud section .bar { display: flex; align-items: center; gap: 16px; overflow: hidden; position: relative;}
#hud section .bar:last-child { margin-bottom: 0;}
.phantom, .main, .glass, .flash, .heart-beat { 
    position: absolute; display: flex; top: 0; right: 0; height: 100%; width: 100%;}
.phantom { background: linear-gradient(-90deg, var(--red), var(--orange));
    transition: width 0.6s cubic-bezier(0.3, 0, 1, 0.45) 0.7s; z-index: 1;}
.main { transition: width 0.12s cubic-bezier(0, 0, 0.2, 1), background 0.3s ease; z-index: 2;}
.glass {
    background: linear-gradient(
        var(--white-a2) 0%, 
        var(--alpha) 50%, 
        var(--black-a2) 100%
    ), linear-gradient(0deg, var(--alpha) 0%, var(--white-a2) 50%, var(--alpha) 100%);
    background-size: 100% 100%, 50px 100%;
}
.flash { background: var(--white); opacity: 0; z-index: 3; pointer-events: none;}
.flash.active { animation: flash 0.6s cubic-bezier(0, 1, 0, 1) forwards;}
.phantom, .main {box-shadow: var(--white) -1px 0 0;}

.heart-beat {position: absolute; right: 0; z-index: 5; overflow: hidden;}
.heart-beat svg {
    transform:skew(-30deg); height: var(--biggest); width: 100%;
    position: absolute; display: none; overflow: hidden;
    max-width: var(--heartbeat); top: 0; left: 0;}
.heart-beat svg.line {display: block;}
.heart-beat svg polyline { fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.heart-beat svg.line polyline { stroke: var(--white-a3);}
.heart-beat svg.pulse polyline {
  stroke: var(--white); filter: drop-shadow(0 0 12px var(--white-a8)); 
  stroke-dasharray: 440;}
.heart-beat svg.pulse polyline { stroke-linejoin: round; stroke-linecap: round;}

section[data-status="good"] .heart-beat svg.pulse polyline {
    animation: pulse 2s steps(200, end) infinite;}
section[data-status="warning"] .heart-beat svg.pulse polyline {
    animation: pulse .7s steps(200, end) infinite;}
section[data-status="danger"] .heart-beat svg.pulse polyline {
    animation: pulse .3s steps(200, end) infinite;}

section[data-status="good"] .heart-beat svg.good {
    display: block;}
section[data-status="warning"] .heart-beat svg.warning {
    display: block;}
section[data-status="danger"] .heart-beat svg.danger {
    display: block;}

/* Mini Map */
.mini-map {
    position: fixed; display: block; z-index: var(--fps); 
    bottom: var(--biggest); left: calc(100vw - var(--size-minimap) - var(--biggest));
    width: var(--size-minimap); height: var(--size-minimap);
    pointer-events: auto; border: var(--micro) solid var(--black-a7);
    border-radius: 50%; overflow: hidden; cursor: pointer;
    background: var(--black-a7); backdrop-filter: blur(var(--small));
    opacity: 0.6; transition: opacity 0.2s ease; 
    box-shadow: 0 0 var(--tiny) var(--black-a7);}
.mini-map:hover { opacity: 1;}
.mini-map canvas { border-radius: 50%; display: block;}

/* Full Map */
.full-world-map {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    width: 800px;
    height: 800px;
    
    /* Красивая рамка и тень, чтобы отделить карту от 3D сцены */
    border: 6px solid #3e2723;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    
    z-index: 9999;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
    
    background-color: #1a1a1a;
}