style.css

body,html{padding:8px;overflow:hidden;border-radius:8px;background:var(--body-bg);color:var(--body-color)}html::-webkit-scrollbar{width:8px;border:10px solid transparent}html::-webkit-scrollbar-track{background-color:#e4e4e4;border-radius:8px}html::-webkit-scrollbar-thumb{border-radius:8px;background-image:linear-gradient(180deg,var(--primary-color-dark) 0,var(--info-color-dark) 99%);box-shadow:inset 2px 2px 5px 0 rgba(#fff,.5)}.preload *{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important}#show_all:hover,.btn-2:hover,.btn:hover,.license_item:hover{cursor:pointer}.license_data_item{display:flex;justify-content:space-between;align-content:baseline;flex-direction:row;align-items:flex-end;gap:8px}#existing_licenses,#myForm{grid-template-columns:1fr 1fr}#status_wrapper{padding:8px 2px}#buy_me_cofee,#fillForm-btn,#status_wrapper,.btn-2,[type=file],body,html{overflow:hidden}#copied_banner,#csvFile-label,#detected_license,#fillerdiv,#titles,.btn{text-align:center}html{width:400px}body{border:1px solid #ccc;min-height:500px;position:relative}h1,h2{margin:0;padding:0}#addlicense_form input[type=text],select#selector_type{background-color:var(--light-color);width:100%;height:30px;margin:8px 0 16px;padding:0 8px;border:1px solid var(--primary-color)!important;border-radius:5px;box-sizing:border-box}.blur-bg{background-color:rgba(0,0,0,.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;backdrop-filter:blur(5px)}.fade-up{animation-name:fade-up;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.4,0,.2,1)}.fade-down{animation-name:fade-down;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.4,0,.2,1)}.hide{opacity:0;transition:all 1s ease 0s;transform:translate(0,100%);visibility:hidden}.show{display:block;opacity:1;transition:all 1s ease;transform:translate(0,0);z-index:3}#addlicense_form{position:absolute!important;background-color:var(--info-color);transition:all .5s ease;top:12%;right:0;margin:4px}#addlicense_form input[type=text]:last-child{margin-bottom:0}label{line-height:100%;margin-bottom:5px;font-size:14px}.btn span .far,.btn-2{vertical-align:middle}h1{font-size:1.5em}h2{font-size:1.2em}.license_data{position:absolute;background-color:#f0f8ff;padding:8px;border-radius:8px;z-index:2;display:flex;flex-direction:column}.btn-2{background-color:#99c793;border-radius:8px;border:none;color:var(--light-color);display:inline-block;font-family:Rubik,sans-serif;font-size:inherit;font-weight:500;outline:0;padding:10px 24px;position:relative;transition:all .3s}#copied_banner{position:absolute;color:var(--dark-color);top:78px;left:-85px;transform:rotate(-45deg);font-size:large;padding:8px 16px;width:100%;font-weight:900;opacity:0;transition:1s;z-index:0}#copied_banner.fade-in{opacity:1;transition:1s}#copied_banner.hide{display:none}#licenses_count{font-size:1em;margin:0 0 8px}#local_license_status{margin-top:24px;padding-top:8px}#myForm,.frame{margin-bottom:24px}.frame{border:1px solid #ccc;border-radius:8px;padding:16px 8px;position:relative}#existing_licenses{display:grid;gap:8px;grid-template-rows:auto;transition:all .3}#show_all{position:absolute;bottom:-24px;right:9px;padding:2px 8px;background:var(--body-bg);border-radius:8px;border:1px solid var(--light-color)}.show_less{max-height:132px;transition:all .3s}.show_more{max-height:600px;transition:all 1.3s}.license_item{border:1px solid #ccc;border-radius:8px;padding:4px 8px;display:flex;align-items:center;font-size:small;font-weight:500;color:var(--dark-color)}.license_data_item{color:var(--dark-color)}.fa-times,.fa-trash-alt{color:red;margin-left:auto}.fa-copy{margin-left:auto;margin-right:4px}.fa-check{color:var(--sucess-color-hover)}.error-license:hover:before,.ok-license:hover:before,.warning-license:hover:before{-webkit-transform:rotate(360deg);transform:rotate(360deg) scale(1.3);transition:all .5s}.error-license:before,.ok-license:before,.warning-license:before{font-family:"Font Awesome 5 Pro";margin-right:4px;-webkit-transition:all .3s 0s ease-in-out;transition:all .3s 0s ease-in-out;display:inline-block}.error-license::after,.ok-license::after,.warning-license::after{padding:6px 8px;border-radius:8px;width:fit-content;transition:.3s;top:-120%;text-align:center;line-height:1.1}.ok-license{background-color:var(--sucess-color);border-color:#d6e9c6;position:relative}.ok-license:hover{background-color:var(--sucess-color-hover)}.ok-license:before{color:var(--primary-color);content:"\f058"}.ok-license::after{content:"All Good";position:absolute;background:var(--primary-color);color:var(--light-color);transform:translate(100%,0);opacity:0;transition:all .3s;pointer-events:none}.ok-license:hover::after{transform:translate(0,0);opacity:1;left:0}.warning-license{background-color:var(--warning-color);border-color:#faebcc;position:relative}.warning-license:hover{background-color:var(--warning-color-hover)}.warning-license:before{color:var(--warning-color-dark);content:"\f06a"}.warning-license::after{content:"URL or Selector Error";position:absolute;background:var(--warning-color-dark);color:var(--light-color);transform:translate(100%,0);opacity:0;transition:all .3s;pointer-events:none}.warning-license:hover::after{transform:translate(0,0);opacity:1;left:0}.error-license{background-color:var(--danger-color);border-color:#ebccd1;position:relative}.error-license:hover{background-color:var(--danger-color-hover);border-color:#ebccd1}.error-license:before{color:var(--danger-color-dark);content:"\f057"}.error-license::after{content:"Key is Missing";position:absolute;background:var(--danger-color-dark);color:var(--light-color);transform:translate(100%,0);opacity:0;pointer-events:none}.error-license:hover::after{transform:translate(0,0);opacity:1;left:0}#copy_license-btn::before,#fillForm-btn::before{color:var(--light-color);font-family:"Font Awesome 5 Pro";position:absolute;transform:translate(-100%,0);width:100%}#myForm{display:grid;grid-auto-columns:1fr;grid-template-rows:1fr;gap:0 10px;grid-template-areas:". .";justify-items:stretch;border:1px solid #ccc;border-radius:8px;padding:16px 8px;position:relative}#myForm::before{content:"Manage Stored Keys";position:absolute;top:-10px;left:6px;background:var(--body-bg);padding:0 4px;border-radius:8px}#fillForm-btn{font-size:16px;font-weight:700;margin-top:8px}#update-div{display:flex;flex-direction:column}#detected_license{color:var(--danger-color-dark)}#fillerdiv{display:none}#fillerdiv h2{margin:8px 0 0}[type=file]{height:0;width:0}#reset-btn::before,#submit-btn::before,[type=file]+label.btn-2::before{font-size:100%;height:100%;line-height:3;top:0;transition:all .3s;color:var(--light-color);font-family:"Font Awesome 5 Pro";position:absolute}[type=file]+label:hover{background-color:var(--danger-color-dark)}#fillForm-btn:hover,#submit-btn:hover,[type=file]+label.btn-2:hover{background-color:var(--primary-color-hover)}#copy_license-btn:hover{background-color:var(--primary-color-dark)}#copy_license-btn{background-color:var(--primary-color)}#submit-btn{display:none;animation-duration:2s;animation-iteration-count:infinite}#reset-btn::before,#submit-btn::before{content:"\f1b8";right:130%}#reset-btn:hover::before,#submit-btn:hover::before{right:75%}#deletekey_btn,#reset-btn{background-color:var(--danger-color-hover)}#reset-btn:hover{background-color:var(--danger-color-dark)}[type=file]+label.btn-2::before{content:"\f382";right:130%}#copy_license-btn div,#copy_license-btn::before,#copy_license-btn:hover div,#fillForm-btn div,#fillForm-btn::before,#fillForm-btn:hover div{transition:all .3s ease-in-out}[type=file]+label.btn-2:hover::before{right:75%}#copy_license-btn{margin:8px;overflow:hidden;font-size:16px}#copy_license-btn::before{content:"\f0c5";opacity:0}#copy_license-btn:hover::before,#fillForm-btn:hover::before{opacity:1;transform:translate(-50%,0)}#copy_license-btn:hover div{opacity:0;transform:translate(100%,0)}#fillForm-btn::before{content:"\f601";opacity:0}#fillForm-btn:hover div{opacity:0;transform:translate(0,100%)}#buy_me_cofee{border:0;height:50px;width:160px;display:flex;justify-content:center}.buy_me_cofee_container{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:8px}#csvFile-label{background-color:var(--primary-color);margin-bottom:0}#csvFile-label:hover{background-color:var(--alt-color)}.buy_me_cofee_container:hover .card{transform:rotateX(180deg)}.back,.card,.front{width:100%;height:75px}.card{transition:.5s;transform-style:preserve-3d;position:relative}.back,.front{backface-visibility:hidden;position:absolute}.front{z-index:1;transform:rotateX(180deg);background:url(now_u_have_to.webp) no-repeat}.back{z-index:2;transform:rotateX(0);background:url(donate.webp) no-repeat}.bounce-7{animation-name:bounce-7!important;animation-timing-function:cubic-bezier(.28,.84,.42,1)}.btn{display:block;border:0;border-radius:5px}.btn span{font-weight:600;font-size:12px;text-transform:uppercase}.btn span .far{margin-left:8px;font-size:12px}.addform_input-label{font-weight:600;color:var(--dark-color)}.popup-trigger{padding:4px 8px;position:absolute;top:-12px;right:9px;box-shadow:0 0 25px 0 rgba(0,0,0,.05)}@keyframes fade-down{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}@keyframes bounce-7{0%{transform:scale(1,1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1,1) translateY(-1px)}64%{transform:scale(1,1) translateY(0)}100%{transform:scale(1,1) translateY(0)}}.p-4{padding:1.5rem}.p-8{padding:3rem}.p-12{padding:4rem}.color-primary{color:var(--primary-color)}.color-secondary{color:var(--secondary-color)}:root{--primary-color:#497f42;--primary-color-dark:#3c6f3c;--primary-color-hover:#98d381;--alt-color:#99c793;--secondary-color:#497f42;--light-color:#f5f5f5;--dark-color:#333;--sucess-color:#dff0d8;--sucess-color-dark:#c6e2b3;--sucess-color-hover:#98d381;--danger-color:#f2dede;--danger-color-dark:#d3460d;--danger-color-hover:#eb8585;--info-color:#d9edf7;--info-color-dark:#61767a;--warning-color:#fcf8e3;--warning-color-dark:#d3b000;--warning-color-hover:#ffe875;--secondary-color-dark:#f57128}@media (prefers-color-scheme:light){:root{--body-bg:var(--light-color);--body-color:var(--dark-color)}}@media (prefers-color-scheme:dark){:root{--body-bg:var(--dark-color);--body-color:var(--light-color)}}