/***LEDs***/ .light-led { width:26px; height:26px; /*position: absolute;*/ /*left: 2em;*/ border-radius:50% } .light-led:after { /*display: block;*/ /*width: 100%;*/ /*position: absolute;*/ /*left: 0;*/ /*color: #666;*/ /*font-family: arial, verdana, sans-serif;*/ /*font-weight: bold;*/ /*text-align: center;*/ /*text-shadow: 0 0.1em rgba(0,0,0,0.7);*/ } .light-led span { display: block; -webkit-transition: top 0.2s; -moz-transition: top 0.2s; -ms-transition: top 0.2s; -o-transition: top 0.2s; transition: top 0.2s; } .light-led-red.lights-up { /*bottom: -5em;*/ /*border-top: 0.1em solid rgba(237, 28, 36, 0.2);*/ /*border-bottom: 0.1em solid rgba(255, 255, 255, 0.25);*/ /*-webkit-box-shadow: 0 0 3em rgb(237, 28, 36);*/ /*-moz-box-shadow: 0 0 3em rgb(237, 28, 36);*/ /*box-shadow: 0 0 26px rgb(237, 28, 36);*/ } /*.light-led-red {*/ /*-webkit-box-shadow: none;*/ /*-moz-box-shadow: none;*/ /*box-shadow: none;*/ /*}*/ .light-led-border { width:26px; height:26px; /*background:rgba(0,0,0,.6);*/ border-radius:50%; } .lights-up .light-led-border { background:transparent; /*border: 0.2em solid black;*/ /*border-radius: 1.3em;*/ } /*.light-led-red */ .lights-up .light-led-light { /*background: rgb(237, 28, 36);*/ /*border: 0.1em solid rgb(161, 30, 45);*/ } .lights-up .light-led-light { border-radius: 1.1em; /*-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;*/ /*-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;*/ /*box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;*/ } .light-led-glow{ width: 0px; height: 0px; } .lights-up .light-led-glow { width: 26px; height: 26px; position: relative; border-radius: 1em; } /*top: 0.3em;*/ /*left: 0.7em;*/ .lights-up .light-led-glow:before { /*content: '';*/ /*display: block;*/ /*width: 26px;*/ /*height: 26px;*/ /*position: absolute;*/ /*background: rgba(255,255,255,0.2);*/ /*border-radius: 0.3em;*/ /*-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);*/ /*-moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);*/ /*box-shadow: 0 0 1em rgba(255,255,255,0.75);*/ } .lights-up .light-led-glow:after { /*content: '';*/ /*display: block;*/ /*width: 0;*/ /*height: 0;*/ /*position: absolute;*/ /*top: -4px;*/ /*left: -4px;*/ /*opacity: 0.2;*/ /*filter: alpha(opacity=20);*/ /*border: 1em solid #fff;*/ /*border-color: transparent #fff transparent #fff;*/ /*border-radius: 1em;*/ /*-webkit-transform: rotate(45deg);*/ /*-moz-transform: rotate(45deg);*/ /*-ms-transform: rotate(45deg);*/ /*-o-transform: rotate(45deg);*/ /*transform: rotate(45deg);*/ } .light-base{ /*opacity:0.6;*/ } .lights-up .light-base{ /*opacity:1;*/ } :root{ --led-glow-red: rgba(255, 0, 0, 1); } .light-led-glow{ /*box-shadow: */ /*-20px 0 50px -10px var(--led-glow-red), */ /* Külső bal */ /*20px 0 50px -10px var(--led-glow-red), */ /* Külső jobb */ /*inset 40px 0 60px -20px rgba(255, 0, 255, 0.4), */ /* Belső bal */ /*inset -40px 0 60px -20px rgba(0, 255, 255, 0.4);*/ /* Belső jobb */ } .led.red, .led.red.off { /*-webkit-box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*-khtml-box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*-moz-box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*-ms-box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*-o-box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*box-shadow: 0px 0px 15px rgba(90, 90, 90, 0.6) inset;*/ /*background-color: #570000;*/ /*transition: all 0.1s linear;*/ } .lights-up .led.red, .led.red.on{ /*background-color: #f00000;*/ /*-webkit-box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*-khtml-box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*-moz-box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*-ms-box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*-o-box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*box-shadow: 0px 0px 15px rgba(230, 230, 230, 0.6) inset, 0px 0px 15px rgba(240, 0, 0, 0.9);*/ /*box-shadow: 20px 0 50px -10px rgba(230, 230, 230, 0.6), inset -40px 0 60px -20px rgba(0, 255, 255, 0.4);*/ /*box-shadow: 20px 0 50px -10px var(--led-glow-red), inset -40px 0 60px -20px rgba(0, 255, 255, 0.4);*/ /*box-shadow: 20px 0 50px -10px var(--led-glow-red), inset -40px 0 60px -20px rgba(0, 255, 255, 0.4);*/ /*background-color: var(--led-glow-red); */ } /* === LED CORE LIGHT === * / .light-led { position: relative; display: inline-block; } /* belső fény * / .light-led-light { position: relative; width: 100%; height: 100%; } /* === HALO / GLOW RÉTEG === * / .light-led-glow { position: absolute; inset: -120%; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } /* === PIROS LED AKTÍV ÁLLAPOT === * / .light-led-red.lights-up .light-led-glow { opacity: 1; background: radial-gradient(circle, rgba(255, 80, 80, 0.95) 0%, rgba(255, 40, 40, 0.75) 25%, rgba(255, 0, 0, 0.45) 45%, rgba(255, 0, 0, 0.20) 60%, rgba(255, 0, 0, 0.00) 75% ); filter: blur(6px); } .light-led-red.lights-up .light-led-glow { opacity: 1; background: radial-gradient(circle, rgba(255, 0, 0, 0.00) 30%, rgba(255, 40, 40, 0.25) 45%, rgba(255, 60, 60, 0.55) 60%, rgba(255, 0, 0, 0.85) 75%, rgba(255, 0, 0, 0.00) 100% ); filter: blur(10px); } /* === FÉNY VISSZAVERŐDÉS A LEGO STUDON === * / .light-led-red.lights-up .led { box-shadow: inset 0 0 6px rgba(255, 180, 180, 0.9), 0 0 6px rgba(255, 60, 60, 0.9), 0 0 14px rgba(255, 0, 0, 0.75), 0 0 32px rgba(255, 0, 0, 0.45), 0 0 64px rgba(255, 0, 0, 0.25); } /* === FINOM PULZÁLÁS (opcionális, de LEGO LED feeling) === * / .light-led-red.lights-up { animation: ledPulseRed 2.2s ease-in-out infinite; } @keyframes ledPulseRed { 0% { filter: brightness(1); } 50% { filter: brightness(1.25); } 100% { filter: brightness(1); } } /*V2*/ /* === LED KONTAINER === */ .light-led { position: relative; } /* === KÖRÜLI FÉNYTEST === */ .light-led-glow { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; } /* === AKTÍV PIROS FÉNY === */ .light-led-red.lights-up .light-led-glow { opacity: 1; box-shadow: /* külső, erős fény */ 0 0 14px rgba(255, 60, 60, 0.9), 0 0 32px rgba(255, 0, 0, 0.75), 0 0 64px rgba(255, 0, 0, 0.55), /* irányított „kilépő” fény */ -12px 0 50px -8px rgba(255, 0, 0, 0.85), 12px 0 50px -8px rgba(255, 80, 80, 0.85), 0 -12px 45px -10px rgba(255, 0, 0, 0.65), 0 12px 45px -10px rgba(255, 0, 0, 0.65), /* belső fény */ inset 0 0 18px rgba(255, 160, 160, 0.85), inset 0 0 36px rgba(255, 0, 0, 0.75); } /* === MAGA A LEGO ELEM KAPJA A FÉNYT === */ .light-led-red.lights-up .led { box-shadow: 0 0 10px rgba(255, 80, 80, 0.9), 0 0 24px rgba(255, 0, 0, 0.75), 0 0 48px rgba(255, 0, 0, 0.55), inset 0 0 12px rgba(255, 180, 180, 0.9); }