1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-11-20 10:02:32 +01:00
theme.park/CSS/addons/unraid/login-page/retro-terminal/retro-terminal-base.css
2021-07-28 20:44:13 +00:00

2 lines
7.3 KiB
CSS

@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css);@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap);@import url(https://fonts.googleapis.com/css?family=VT323);*{outline:0}@media (max-width:500px){#login{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);position:absolute;padding-top:0!important;top:0;left:0;bottom:0;right:0;height:100%;width:100%;border-radius:none!important}#video-bg-elem,.background-wrap,.custom-text-header{display:none}#login{border:none!important}}html{background:var(--main-bg-color)!important}body{background:var(--main-bg-color)!important}body::before{content:"";background:radial-gradient(ellipse at center,var(--body-before) 0,#000 100%)!important;background-repeat:repeat-y!important;background-size:100% 4px!important;position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;overflow:hidden;animation:var(--body-animation) 10ms infinite;pointer-events:none}body::after{content:"";background:radial-gradient(ellipse at center,var(--body-after) 0,rgba(0,0,0,.6) 80%) center center/cover no-repeat fixed,linear-gradient(#0000 0,#0000 0)!important;background-repeat:repeat-y!important;background-size:100% 4px!important;position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;overflow:hidden;pointer-events:none}@keyframes flicker{0%{opacity:.37633}5%{opacity:.70002}10%{opacity:.64427}15%{opacity:.35591}20%{opacity:.34054}25%{opacity:.54917}30%{opacity:.41056}35%{opacity:.67637}40%{opacity:.23681}45%{opacity:.64945}50%{opacity:.67522}55%{opacity:.56049}60%{opacity:.06113}65%{opacity:.95766}70%{opacity:.77945}75%{opacity:.33817}80%{opacity:.19735}85%{opacity:.84337}90%{opacity:.82867}95%{opacity:.65512}100%{opacity:.15179}}@media only screen and (max-width:768px){#login{min-width:300px}}.background-wrap{position:fixed;z-index:-1000;width:100%;height:100%;overflow:hidden;top:0;left:0}#video-bg-elem{position:absolute;top:0;left:0;min-height:100%;min-width:100%}#login .error,#login h1,#login h2{color:var(--text-color)!important;text-shadow:var(--text-shadow) var(--text-shadow-color)}#login a{color:var(--link-color);text-shadow:var(--text-shadow) var(--text-shadow-color)}#login a:hover{color:var(--link-color-hover);text-shadow:var(--text-shadow) var(--text-shadow-color)}#login input{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login ::placeholder{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login ::-webkit-input-placeholder{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login ::-moz-placeholder{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login :-ms-input-placeholder{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login :-moz-placeholder{color:var(--input-color);text-shadow:0 0 5px var(--text-shadow-color)}#login input:focus::-webkit-input-placeholder{color:transparent!important;text-shadow:0 0 0 transparent}#login input:focus:-moz-placeholder{color:transparent!important;text-shadow:0 0 0 transparent}#login input:focus::-moz-placeholder{color:transparent!important;text-shadow:0 0 0 transparent}#login input:focus:-ms-input-placeholder{color:transparent!important;text-shadow:0 0 0 transparent}#login .button,#login .error,#login a,#login h1,#login h2{font-family:var(--text-font);-webkit-font-smoothing:none;line-height:1.2}h1{font-size:3em;margin:0}#login [class*=' case-'],#login [class^=case-]{font-family:cases!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;color:var(--case-color);text-shadow:var(--text-shadow) var(--text-shadow-color)}#login [type=password],#login [type=text]{font-family:var(--input-font);background-color:rgba(0,0,0,.25);border:2px solid transparent;text-transform:uppercase;border-radius:0;border:3px solid var(--text-color);color:var(--text-color)}#login [type=password]:active,#login [type=password]:focus,#login [type=text]:active,#login [type=text]:focus{font-family:var(--input-font);background-color:rgba(0,0,0,.25);text-transform:uppercase}#login .button{color:var(--button-text-color);text-shadow:var(--text-shadow) var(--text-shadow-color);background:linear-gradient(90deg,var(--button-color) 0,var(--button-color)) 0 0 no-repeat,linear-gradient(90deg,var(--button-color) 0,var(--button-color)) 0 100% no-repeat,linear-gradient(0deg,var(--button-color) 0,var(--button-color)) 0 100% no-repeat,linear-gradient(0deg,var(--button-color) 0,var(--button-color)) 100% 100% no-repeat;background:-webkit-gradient(linear,left top,right top,from(var(--button-color)),to(var(--button-color))) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(var(--button-color)),to(var(--button-color))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--button-color)),to(var(--button-color))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--button-color)),to(var(--button-color))) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%}#login .button:hover{color:var(--button-text-color-hover);text-shadow:var(--text-shadow) var(--button-color-hover);box-shadow:var(--box-shadow) var(--button-color-hover);background-color:var(--button-color-hover);background:-webkit-gradient(linear,left top,right top,from(var(--button-color-hover)),to(var(--button-color-hover)));background:linear-gradient(90deg,var(--button-color-hover) 0,var(--button-color-hover))}#login{background:var(--loginbox-background-color)!important;padding-top:1rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);margin:0!important;text-transform:uppercase;min-width:300px;border-radius:0!important;border:3px dashed var(--text-color)}#login .angle::after{display:none}#login .wordmark svg{display:none}#login .logo{background:var(--logo);background-size:contain;padding:2rem;border-radius:0;margin:0 1rem 0 1rem}logo.angle{-webkit-box-shadow:inset 0 0 0 2px var(--text-color)!important;box-shadow:inset 0 0 0 2px var(--text-color)!important;border-radius:0!important}#login .error{animation-name:shake;animation-duration:.7s}.custom-text-header{white-space:pre;letter-spacing:2px;font-family:var(--text-font);-webkit-font-smoothing:none;font-weight:900;line-height:1.5;color:var(--custom-text-header)!important;text-shadow:0 0 20px var(--custom-text-header-shadow);position:absolute;left:50%;top:-15%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);animation-duration:10ms;animation-name:var(--custom-text-header-animation);animation-iteration-count:infinite;animation-direction:alternate;font-weight:900}.custom-text-header:after{content:"";position:absolute;top:135px;right:-15px;background-color:var(--custom-text-header);vertical-align:top;width:20px;height:2px;-webkit-animation:blink 1s step-end infinite;animation:blink 1s step-end infinite}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@keyframes textflicker{from{text-shadow:1px 0 0 #ea36af,-2px 0 0 #75fa69;border:10px 0 0 #ea36af,-2px 0 0 #75fa69}to{text-shadow:2px .5px 2px #ea36af,-1px -.5px 2px #75fa69;border:2px .5px 2px #ea36af,-1px -.5px 2px #75fa69}}::selection{background:var(--selection-color)}::-moz-selection{background:var(--selection-color)}