mira-app-server/web/assets/css/PlaygroundView-BonwfH-J.css

Mira Server - standalone server application using mira-app-core

@property --hue{syntax: "<number>"; inherits: true; initial-value: 0;}@property --rotate{syntax: "<number>"; inherits: true; initial-value: 0;}@property --bg-y{syntax: "<number>"; inherits: true; initial-value: 0;}@property --bg-x{syntax: "<number>"; inherits: true; initial-value: 0;}@property --glow-translate-y{syntax: "<number>"; inherits: true; initial-value: 0;}@property --bg-size{syntax: "<number>"; inherits: true; initial-value: 0;}@property --glow-opacity{syntax: "<number>"; inherits: true; initial-value: 0;}@property --glow-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@property --glow-scale{syntax: "<number>"; inherits: true; initial-value: 2;}@property --glow-radius{syntax: "<number>"; inherits: true; initial-value: 2;}@property --white-shadow{syntax: "<number>"; inherits: true; initial-value: 0;}.glow-container[data-v-31aa7036]{--card-radius: 3.6vw;--border-width: 3px;--bg-size: 1;--hue: 0;--rotate: 0;--interaction-speed: .55s;--glow-scale: 1.5;--scale-factor: 1;--glow-blur: 6;--glow-opacity: 1;--glow-radius: 100;--glow-rotate-unit: 1deg;width:var(--card-width);aspect-ratio:var(--card-aspect, 1.5/1);color:#fff;margin:auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;border-radius:var(--card-radius);cursor:pointer}.glow-container[data-v-31aa7036]:before,.glow-container[data-v-31aa7036]:after{content:"";display:block;aspect-ratio:auto;position:absolute;width:100%;height:100%;border-radius:var(--card-radius)}.glow-content[data-v-31aa7036]{position:absolute;background:var(--card-color);color:var(--text-color);border-radius:calc(var(--card-radius) * .9);display:flex;align-items:center;justify-content:center;padding:calc(var(--card-width) / 8)}.glow-content[data-v-31aa7036] span{display:inline-block;padding:.25em;border-radius:4px;margin-right:8px}.glow-content[data-v-31aa7036]:before{content:"";display:block;position:absolute;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));border-radius:calc(var(--card-radius) * .9);box-shadow:0 0 20px #000;mix-blend-mode:color-burn;z-index:-1;background:#292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 90%) calc(0% * var(--bg-size)),hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 80%) calc(20% * var(--bg-size)),hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 60%) calc(40% * var(--bg-size)),transparent 100%);transition:--bg-size var(--interaction-speed) ease}.glow[data-v-31aa7036]{--glow-translate-y: 0;display:block;position:absolute;width:calc(var(--card-width) / 5);height:calc(var(--card-width) / 5);animation:rotate-31aa7036 var(--animation-speed) linear infinite;transform:rotate(calc(var(--rotate) * var(--glow-rotate-unit)));transform-origin:center;border-radius:calc(var(--glow-radius) * 10vw)}.glow[data-v-31aa7036]:after{content:"";display:block;z-index:-2;filter:blur(calc(var(--glow-blur) * 10px));width:130%;height:130%;left:-15%;top:-15%;background:hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 60%);position:relative;border-radius:calc(var(--glow-radius) * 10vw);transform:scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));opacity:var(--glow-opacity)}.glow-container:hover .glow-content[data-v-31aa7036]{mix-blend-mode:darken;--text-color: white;color:#fff;box-shadow:0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * .15vw) #fff3;animation:shadow-pulse-31aa7036 calc(var(--animation-speed) * 2) linear infinite}.glow-container:hover .glow-content[data-v-31aa7036]:before{--bg-size: 15;animation-play-state:paused;transition:--bg-size var(--interaction-speed) ease}.glow-container:hover .glow[data-v-31aa7036]{--glow-blur: 1.5;--glow-opacity: .6;--glow-scale: 2.5;--glow-radius: 0;--rotate: 900;--glow-rotate-unit: 0;--scale-factor: 1.25;animation-play-state:paused}.glow-container:hover .glow[data-v-31aa7036]:after{--glow-translate-y: 0;animation-play-state:paused;transition:--glow-translate-y 0s ease,--glow-blur .05s ease,--glow-opacity .05s ease,--glow-scale .05s ease,--glow-radius .05s ease}@keyframes shadow-pulse-31aa7036{0%,24%,46%,73%,96%{--white-shadow: .5}12%,28%,41%,63%,75%,82%,98%{--white-shadow: 2.5}6%,32%,57%{--white-shadow: 1.3}18%,52%,88%{--white-shadow: 3.5}}@keyframes rotate-bg-31aa7036{0%{--bg-x: 0;--bg-y: 0}25%{--bg-x: 100;--bg-y: 0}50%{--bg-x: 100;--bg-y: 100}75%{--bg-x: 0;--bg-y: 100}to{--bg-x: 0;--bg-y: 0}}@keyframes rotate-31aa7036{0%{--rotate: -70;--glow-translate-y: -65}25%{--glow-translate-y: -65}50%{--glow-translate-y: -65}60%,75%{--glow-translate-y: -65}85%{--glow-translate-y: -65}to{--rotate: 290 ;--glow-translate-y: -65}}@keyframes hue-animation-31aa7036{0%{--hue: 0}to{--hue: 360}}.is-rainbow .glow-content[data-v-31aa7036]:before{animation:hue-animation-31aa7036 var(--animation-speed) linear infinite,rotate-bg-31aa7036 var(--animation-speed) linear infinite}.is-rainbow .glow[data-v-31aa7036]:after{animation:hue-animation-31aa7036 var(--animation-speed) linear infinite}.is-mono .glow-content[data-v-31aa7036]:before{animation:rotate-bg-31aa7036 var(--animation-speed) linear infinite}.is-mono .glow[data-v-31aa7036]:after{animation:none}.is-multi .glow-content[data-v-31aa7036]:before{animation:var(--multi-anim) var(--animation-speed) linear infinite,rotate-bg-31aa7036 var(--animation-speed) linear infinite}.is-multi .glow[data-v-31aa7036]:after{animation:var(--multi-anim) var(--animation-speed) linear infinite}.glow-button[data-v-64406f9f]{outline:none}.glow-button[data-v-64406f9f]:focus-visible{outline:2px solid white;outline-offset:4px;border-radius:var(--card-radius)}.glow-button[data-v-64406f9f] .glow-content{padding:0 1.2em}.glow-button[data-v-64406f9f] .glow-button-content{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;color:var(--text-color);transition:color .2s ease}.glow-button[data-v-64406f9f] .glow-container:hover .glow-button-content{color:#fff}.glow-button.is-disabled[data-v-64406f9f]{opacity:.5;filter:grayscale(.6);cursor:not-allowed}