Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greasyfork.org/scripts/477433/1344726/Menu%20Editor%202%20%28Console%29.js
// ==UserScript==
// @name Menu Editor 2 (Console).
// @version 2.0
// @description Menu Editor
// @author Zpayer./.AMiNE.
// @match http://*/*
// @match https://*/*
// @grant none
// @run-at document-start
// ==/UserScript==
const SetEditor=(ConfigColor='#9598c5',ConfigFont='monospace')=>{
let $C=(parent)=>top.document.createElement(parent);
class El {
constructor(parent,type,c) {
let _=$C(type);
$A(parent,_);
switch (type){
case 'script':case 'iframe':
_.src=c
break;
case 'link':
_.href=c
break;
case 'style':
_.textContent=c
break;
default:
_.style=c
}
return _
}
}
var ConfigC=ConfigColor
var ConfigF=ConfigFont
ConfigColor='var(--config-color)'
ConfigFont='var(--config-font)'
function GetSelected(k) {
return k.options[k.selectedIndex].text
}
let make=(cl)=>top.document.createElement(cl);
let html=(id)=>top.document.getElementById(id);
let $A=(parent,child)=>parent.appendChild(child)
function AddHTMLElement(parent,type,style=''){
let Menu=make(type);
$A(parent,Menu);
if(type=='script'){
Menu.src=style
}else{
if(type=='style'){
Menu.textContent=style
}else{
Menu.style=style
}}
return Menu
}
var Editor = {
AddDragAndDropInput:(clss,func)=>{
let Div=new El(clss,'div',``)
Div.className="file-drop-area"
Div.innerHTML=`
<span class="fake-btn">Choose files</span>
<span class="file-msg">or drag and drop files here</span>
<input class="file-input" type="file" multiple>
`
// Get the file input and drop area elements
var fileInput = Object.values(Div.children).filter(el=>el.className=='file-input')[0]
var droparea = Div
// Highlight drag area
fileInput.addEventListener('dragenter', function() {
droparea.classList.add('is-active');
});
fileInput.addEventListener('focus', function() {
droparea.classList.add('is-active');
});
fileInput.addEventListener('click', function() {
droparea.classList.add('is-active');
});
// Back to normal state
fileInput.addEventListener('dragleave', function() {
droparea.classList.remove('is-active');
});
fileInput.addEventListener('blur', function() {
droparea.classList.remove('is-active');
});
fileInput.addEventListener('drop', function() {
droparea.classList.remove('is-active');
});
// Change inner text
fileInput.addEventListener('change', function() {
var filesCount = this.files.length;
var textContainer = this.previousElementSibling;
if (filesCount === 1) {
// If a single file is selected, show the file name
var fileName = this.value.split('\\').pop();
textContainer.textContent = fileName;
} else {
// Otherwise, show the number of files selected
textContainer.textContent = filesCount + ' files selected';
}
func()
});
return fileInput
},
addCate:(name='unknown',clss='unknown')=>{
let el=make('div');
el.id=name+'_cate';
el.textContent=name;
el.className='_cate';
el.style=`
border-bottom: 2px solid var(--config-color);
width: 98%;
cursor: default;
padding: 4px;
color: var(--config-color);
margin: 10px 2px 2px 4px;
transition: all 0.5s ease 0s;
font-size: 20px;
font-weight: bold;
font-family: 'Futuristic Regular';
letter-spacing: 5px;
text-shadow: 0 0 4px var(--config-color);
`;
clss.appendChild(el);
return el;
},
addButton:(name='unknown',clss='unknown',func=()=>{},long=false)=>{
let el=make('input');
el.id='_button';
el.button_name=name;
el.value=name;
el.className=name+'_element';
el.type='button';
el.style=`
opacity:1;
width:${long?'98.5%':'49%'};
color: rgb(255, 255, 255);
background-color: transparent;
border-radius: 2px;
height: 25px;
margin: 1px;
border: 1px solid white;
font-family: "Futuristic Regular";
text-transform: capitalize;
letter-spacing: 2px;
font-size: 18px;
transition: all 1s ease 0s;
`;
el.onmouseover = function() {
this.style.textShadow='0 0 8px white'
this.style.boxShadow='inset 0px 0px 3px white'
}
el.onmouseout = function() {
this.style.textShadow=''
this.style.boxShadow=''
}
el.addEventListener('click',func);
clss.appendChild(el);
return el;
},
addSelect:(txt, options, parent, func)=>{
let Div = new El(parent,"div",'padding: 2%;')
let Select = new El(Div,"select",'')
Select.className='SelectClass'
Select.onchange=()=>{
let SelectedOption=Select.options[Select.selectedIndex].text
func(SelectedOption)
}
Select.updateOptions = function(options){
const Orgoptions=options
options=[]
Orgoptions.forEach(op=>{options.push(op)})
this.options.length = 0
let Option = new El(Select,"option",'')
Option.textContent = txt
Option.disabled = true
Option.selected = true
Option.className='OptionClass'
options.forEach((option)=>{
let Option = new El(Select,"option",'')
Option.textContent = option
Option.className='OptionClass'
})
}
Select.updateOptions(options)
return Select
},
addCollapsible:(name,parent,open=true)=>{
let Symbols=['▽ ','▷ ']
let div = AddHTMLElement(parent,'div',`
width: 96%;
border: none;
border-radius: 5px;
margin: 2%;
`);
let button = AddHTMLElement(div,'button',`
width: 100%;
background: rgb(143 141 141 / 13%);
backdrop-filter: blur(5px);
display: flex;
place-content: center flex-start;
flex-wrap: nowrap;
align-items: center;
user-select: none;
text-transform: capitalize;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: rgba(255, 255, 255, 0.66);
font-weight: bold;
font-family: var(--config-font);
letter-spacing: 5px;
height: 40px;
font-size: 18px;
`);
button.textContent=(open?Symbols[0]:Symbols[1])+name
let field = AddHTMLElement(div,'div',`
transition: ease 1s;
display:${open?'block':'none'};
border: 1px solid rgb(143 141 141 / 13%);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;`);
button.open=open
button.onmouseover = function() {
this.style.color = "white"
}
button.onmouseout = function() {
this.style.color = "#ffffffa8"
}
button.onclick=function(){
if(button.open){//close
button.textContent=name
field.style.display='none'
button.style.borderBottomLeftRadius='4px'
button.style.borderBottomRightRadius='4px'
button.open=false
}else{//open
button.style.borderBottomLeftRadius='0px'
button.style.borderBottomRightRadius='0px'
field.style.display='block'
button.open=true
}
button.textContent=(button.open?Symbols[0]:Symbols[1])+name
}
return field
},
addLoader:(parent,default_ = 0)=>{
let B = AddHTMLElement(parent,'div',`
height: 30px;
background: #ffffff17;
width: 95%;
margin: 2%;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
`);
let L = AddHTMLElement(B,'div',`
width: 0%;
height: 90%;
background:${ConfigColor};
border-radius: 5px;
transition: 1s cubic-bezier(0.36, -0.01, 0.25, 1);
`);
L.Set=function(value){
if (value==0||value==100) {
B.style.display='none'
} else {
B.style.display='flex'
}
L.style.width=value+'%';
}
L.Set(default_);
return L;
},
}
var gEditor={
addCheckBox:function(txt,parent,TrueFunc,FalseFunc,checked=false){
let div = new El(parent,"div",`
font-weight: bold;
font-family: sans-serif;
font-size: 18px;
display: flex;
align-items: center;
justify-content: flex-start;
align-content: center;
flex-wrap: nowrap;
flex-direction: row;
height: 30px;
text-transform: capitalize;
`)
let text = new El(div,"txt",`
opacity: 1;
margin-right: 15%;
margin-left: 20%;
width: 48%;
display: flex;
align-items: center;
justify-content: flex-start;
font-family: 'Futuristic Regular';
letter-spacing: 4px;
color: white;
font-weight: 400;`)
text.textContent = `${txt}`
let Div=new El(div,'div','')
Div.innerHTML=`
<div class="cbx">
<input id="cbx-12" type="checkbox"/>
<label for="cbx-12"></label>
<svg width="15" height="14" viewbox="0 0 15 14" fill="none">
<path d="M2 8.36364L6.23077 12L13 2"></path>
</svg>
</div>
<!-- Gooey-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo-12">
<fegaussianblur in="SourceGraphic" stddeviation="4" result="blur"></fegaussianblur>
<fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -7" result="goo-12"></fecolormatrix>
<feblend in="SourceGraphic" in2="goo-12"></feblend>
</filter>
</defs>
</svg>
`
Div.className="checkbox-wrapper-12"
let CheckBox=Object.values(Object.values(Div.children).filter(l=>l.className=="cbx")[0].children).filter(d=>d.id=="cbx-12")[0]
CheckBox.checked=checked
CheckBox.onclick=()=>{
if(CheckBox.checked){
TrueFunc()
}else{
FalseFunc()
}
}
return CheckBox
},
addRange:(text,clss,value,Min,Max,func)=>{
let div=new El(clss,'div',`
width: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
margin-top: 2%;
margin-bottom: 2%;
`)
div.className = "CheatRangeDiv"
let txt=new El(div,'div',`
font-family: var(--config-font);
display: inline-block;
width: 10%;
left: 0%;
color: rgb(255 255 255);
position: relative;
text-transform: capitalize;
margin-right: 5%;
text-align: left;
letter-spacing: 2px;
font-size: 18px;
font-weight: 500;
`)
txt.textContent = text
let Range=new El(div,'input','')
Range.id=text+'RangeInputClassId';
Range.value=value;
Range.className='RangeInputClassName';
Range.type='range';
Range.max = Max
Range.min = Min
let NumDiv=new El(div,'div','')
NumDiv.className='NumberContainerClass'
NumDiv.innerHTML=`
<button class='NumberButtonsClass'><</button>
<input type='number' class='NumberInput'>
<button class='NumberButtonsClass'>></button>
`
let NumInput=Object.values(NumDiv.children).filter(l=>l.className=='NumberInput')[0]
let AddButton=Object.values(NumDiv.children).filter(l=>l.textContent=='>')[0]
let OhterButton=Object.values(NumDiv.children).filter(l=>l.textContent=='<')[0]
AddButton.onclick=()=>{
NumInput.value=Number(NumInput.value)+(NumInput.step==''?1:Number(NumInput.step))
Range.value = NumInput.value
func(Number(NumInput.value))
}
OhterButton.onclick=()=>{
NumInput.value=Number(NumInput.value)-(NumInput.step==''?1:Number(NumInput.step))
Range.value = NumInput.value
func(Number(NumInput.value))
}
NumInput.value = value
NumInput.max = Max
NumInput.min = Min
NumInput.addEventListener('change',function(){
Range.value = NumInput.value
func(Number(NumInput.value))
});
Range.addEventListener("change",function(){
NumInput.value = Range.value
func(Number(Range.value))
});
return {Number:NumInput,Range:Range,}
},
addField:(name='unknown',clss='unknown',n,Height=100,Width=95,top='l')=>{
let field = document.createElement("fieldset")
field.id = n+'field_box'
field.className = 'scroller'
field.style=`
width:${Width}%;
top: ${top}%;
height:${Height}%;
position: relative;
background: transparent;
border: 1px solid rgb(255 255 255 / 86%);
display: inline-block;
overflow-y: clip;
`
clss.appendChild(field);
let leg=make('legend');
leg.id=name+'legend';
leg.textContent =name
leg.className='legend';
leg.style=`
font-size: 15px;
font-weight: bold;
text-align: left;
text-transform: capitalize;
padding: 3px;
font-family:${ConfigFont};
cursor: default;
color:rgb(255 255 255 / 86%);
width: 23%;
`;
field.appendChild(leg);
return field
},
addToggle:(name='unknown',clss='unknown',func2=()=>{},func1=()=>{},check=false)=>{
let div = document.createElement("div")
div.className = "CheatRangeDiv"
let txt = document.createElement("h2")
txt.style = `
font-family: ${ConfigFont};
display: inline-block;
font-size: 16px;
position: relative;
text-align: left;
margin-left: -54%;
text-transform: capitalize;
}`
txt.textContent = name
let el=make('label');
el.className = 'switcher'
let checkbox=make('input');
checkbox.type = 'checkbox'
checkbox.checked=check
checkbox.id = name+'_Switcher'
el.onclick=()=>{
if(!checkbox.checked){
func2()
checkbox.checked=false;
}else{
func1()
checkbox.checked=true;
}
}
el.appendChild(checkbox);
let slider=make('span');
slider.className = 'toggle'
el.appendChild(slider);
div.appendChild(txt);
div.appendChild(el);
clss.appendChild(div);
},
addPlaceHolder:(txt,clss,func=()=>{},clear=true)=>{//----------------------------------------- super "All" Chat
let Div=new El(clss,'div','')
Div.className='input-container'
Div.innerHTML=`
<input id='DivChild' type="text" required=""/>
<label>${txt}</label>
`
let input=Object.values(Div.children).filter(d=>d.id=='DivChild')[0]
input.onkeydown=function(e) {
if (e.key == "Enter") {
func(this.value)
if(clear){this.value = "";}
}
}
return input
},
addLister:(txt,options,tab,func)=>{
let div = document.createElement("div")
let div2_ = document.createElement("div")
var divslist=[]
//var ListOfSelected=[]
var ListerSelector = Editor.addSelect(txt,options,tab,()=>{
const Selected=GetSelected(ListerSelector)
ListerSelector.Lister.push(Selected)
let div2 = document.createElement("div")
var tt = Editor.addButton(Selected,div2,()=>{})
tt.style.width='80%'
var yoptov= Editor.addButton("X",div2,()=>{
const index = ListerSelector.Lister.indexOf(Selected);
if (index > -1) { // only splice array when item is found
ListerSelector.Lister.splice(index, 1); // 2nd parameter means remove one item only
}
div2.remove()
})
yoptov.style.width='15%'
div2_.appendChild(div2);
divslist.push(div2)
})
ListerSelector.Lister=[]
div.appendChild(div2_);
var ApplyButton=Editor.addButton('Apply',div,()=>{
func()
ListerSelector.Lister=[]
divslist.forEach(k=>k.remove())
},true)
tab.appendChild(div);
return ListerSelector
},
addBB:(name='unknown',menu,bar,id='unknown',choosen=0)=>{
let el=make('div');
var jo = el
el.className='scroller'
el.id='something? ;-;';
el.style=`
position:absolute;
display:${choosen?'block':'none'};
width:75%;height:90%;
top:10%;
right:0px;
`;
menu.appendChild(el);
el=make('div');
el.id='console_bar_'+id;
el.className='bar_element bar_element_'+(choosen?'on':'off');
el.textContent=name;
el.addEventListener('click',function(e){
if(this!=bar.cur){
jo.style.display='block';
menu.cur.style.display='none';
menu.cur=jo;
this.className='bar_element bar_element_on';
bar.cur.className='bar_element bar_element_off';
bar.cur=this;
}
});
bar.appendChild(el);
return jo
},
addColorPicker:(name,clss='unknown',value,func)=>{
let div=AddHTMLElement(clss,'div',`
display: flex;
align-items: center;
justify-content: space-between;`)
let text=AddHTMLElement(div,'txt',`
font-family: sans-serif;
font-size: 18px;
text-transform: capitalize;
`)
text.textContent=name+':'
let colorpicker=AddHTMLElement(div,'input',`
background-color: transparent;
border-radius: 2px;
border: none;
width: 50%;
`)
colorpicker.type='color'
colorpicker.className='color_'+name;
colorpicker.value = value
colorpicker.oninput=function(){
func(this.value)
}
return colorpicker;
},
addFile:(clss='unknown',func)=>{
let el=make('input');
el.className='fileClass';
el.type='file';
el.id = 'fileu'
el.style = 'position: fixed;right: 20000000000000%;'
el.onchange=(e)=>func(e)
clss.appendChild(el);
let button=make('input');
button.className='NewfileClass';
button.type='button';
button.id = 'filebutton';
button.value = 'Choose File';
button.onclick = function(){el.click()}
button.style = `
color: ${ConfigColor};
background-color: rgb(35 35 35);
border-radius: 5px;
border: 1px solid ${ConfigColor};
height: 25px;
width: 100%;
margin: 1px;`
clss.appendChild(button);
el.CssButton=button
return el;
},
addSwitcher:(name='unknown',clss='unknown',state=[],func=[],funcint=[],time=0,vehicle='')=>{
let a=make('div');
a.id=vehicle+name+'_switcher_settings';
a.style=`
display:flex;
justify-content:center;
align-items:center;
margin:3px 0;
`;
clss.appendChild(a);
let elm=make('div');
elm.id=vehicle+name+'_switcher_attribute';
elm.style=`
color:#aaa;
width:49%;
display:flex;
align-items:center;
justify-content:center;
margin:1px 11px;
`;
elm.textContent=name;
a.appendChild(elm);
var el=make('input');
var switchinterval=0;
var i=0;
el.id=vehicle+name+'_switcher';
el.button_name=vehicle+name;
el.value=state[0];
el.className=clss+'_element';
el.type='button';
el.style=`
color:#aaa;
background-color:#4f545c;
border-radius:5px;
border:none;
height:23px;
width:49%;
margin:1px 11px;
`;
el.addEventListener('click',function(){
if(i)clearInterval(switchinterval);
i=++i%(state.length);
el.value=state[i];
if(func[i])func[i]();
if(i&&funcint[i])switchinterval=setInterval(funcint[i],time);
});
a.appendChild(el);
return a;
},
addList:(name,clss,list=[],func=[],Lists)=>{
let edl=make('div');
edl.id=name+'_list';
edl.className='scroller'
edl.setAttribute('style', `
display:none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(35 35 35 / 94%);
direction: rtl;
border: 1px solid rgb(54, 57, 63);
`);
clss.appendChild(edl);
Editor.addCate(name,edl)
edl.CurrentButtons=[]
/*edl.UpdateFunctions=function(NewFunc){
edl.CurrentButtons.forEach(m=>m.remove())
edl.CurrentButtons=[]
for (var i=0;i>=Math.min(list.length,func.length); i++) {
var CB = addButton(list[i],edl,()=>{edl.style.display='none';NewFunc[i]();})
edl.CurrentButtons.push(CB)
}
}
edl.UpdateList=function(NewList){
edl.CurrentButtons.forEach(m=>m.remove())
edl.CurrentButtons=[]
for (var i=0;i>=Math.min(list.length,func.length); i++) {
var CB = addButton(NewList[i],edl,()=>{edl.style.display='none';func[i]();})
edl.CurrentButtons.push(CB)
}
}*/
edl.UpdateAll=function(NewList,NewFunc,time=10){
if(Math.min(NewList.length,NewFunc.length)!=0){
var i = 0
var ButtonMakerInter = setInterval(()=>{
if(i>=Math.min(NewList.length,NewFunc.length)){
clearInterval(ButtonMakerInter);ButtonMakerInter=0;
}else{
i++
var CB = addButton(NewList[i],edl,()=>{edl.style.display='none';NewFunc[i]();})
edl.CurrentButtons.push(CB)
}
},time)
}
}
if(Lists.Lists[name]==undefined){
Lists.Lists[name]=[]
}
Lists.Lists[name].push(edl)
if(Math.min(list.length,func.length)!=0){
var i = 0
var ButtonMakerInter = setInterval(()=>{
if(i>=Math.min(list.length,func.length)){
clearInterval(ButtonMakerInter);ButtonMakerInter=0;
}else{
i++
var CB = addButton(list[i],edl,()=>{edl.style.display='none';func[i]();})
edl.CurrentButtons.push(CB)
}
},10)
}
return edl
},
}
let Style=new El(top.document.body,'style',`
@font-face {
font-family: "Futuristic Regular";
src: url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.eot");
src: url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.eot?#iefix")format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.woff2")format("woff2"),
url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.woff")format("woff"),
url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.ttf")format("truetype"),
url("https://db.onlinewebfonts.com/t/739ae0702b7a6c08d8d70aa68f7a0f2f.svg#Futuristic Regular")format("svg");
}
:root {
--config-color:${ConfigC};
--config-color:${ConfigC};
--config-font:"Futuristic Regular";
--arrow-bg: rgba(255, 255, 255, 0.3);
--arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
--select-bg: rgba(255, 255, 255, 0.2);
}
.bar_element_off{
opacity:0.5;
background:#0000;
}
.CheatSelect {
background-color: rgba(38, 38, 38, 0);
color: rgb(219, 220, 220);
height: 40px;
box-sizing: border-box;
border: 1px solid;
width: 61%;
opacity: 0.7;
transition: all 0.5s ease 0s;
display: inline-block;
border-right: none;
font-family: ${ConfigFont};
}
.CheatSelect:hover {
opacity: 1;
}
.CheatButton {
background-color: rgba(38, 38, 38, 0);
color: rgb(219, 220, 220);
height: 40px;
width: 140px;
text-align: center;
box-sizing: border-box;
border: 1px solid;
outline: none;
opacity: 0.7;
transition: all 0.5s ease 0s;
height: 40px;
width: 40px;
border-left: none;
}
.CheatButton:hover {
opacity: 1;
}
.RangeInputClassName {
margin-right: 1%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 200px;
background-color: transparent;
&:focus {
outline-color: #f8b195;
}
}
.RangeInputClassName::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
height: 3px;
border-radius:20px;
background: rgb(246, 114, 128);
background: -webkit-linear-gradient(
left,
${ConfigColor} 0%,
rgba(192, 108, 132, 1) 50%,
rgba(53, 92, 125, 1) 100%
);
background: linear-gradient(
to right,
${ConfigColor} 0%,
rgba(192, 108, 132, 1) 50%,
rgba(53, 92, 125, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#f67280",
endColorstr="#355c7d",
GradientType=1
);
}
.RangeInputClassName::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 3px solid ${ConfigColor};
border-radius: 50%;
height: 20px;
width: 20px;
position: relative;
bottom: 8px;
background: #222;
background-size: 50%;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
cursor: grab;
transition:1s ease;
&:active {
cursor: grabbing;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switcher {
position: absolute;
display: inline-block;
width: 57px;
height: 23px;
left: 74%;
}
.switcher input {
opacity: 0;
width: 0;
height: 0;
}
.toggle {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.toggle:before {
position: absolute;
content: "";
height: 21px;
width: 20px;
left: 8px;
border-radius: 4px;
bottom: 1px;
background-color: white;
transition: all 0.4s ease 0s;
}
input:checked + .toggle {
background-color:${ConfigColor};
}
input:focus + .toggle {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .toggle:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.input-container{
position:relative;
margin-top:4%;
margin-bottom:2%;
width:90%;
}
.input-container label{
position: absolute;
top: 0px;
left: 0px;
font-size: 27px;
font-family: var(--config-font);
color: rgb(255, 255, 255);
font-weight: 500;
letter-spacing: 4px;
transition: all 0.5s ease-in-out 0s;
}
.input-container input{
border:0;
border-bottom:1px solid rgb(218 205 205);
background:transparent;
width:100%;
padding:8px 0 5px 0;
font-size:16px;
color:#fff;
}
.input-container input:focus{
border:none;
outline:none;
border-bottom:1px solid ${ConfigColor};
}
.input-container input:focus ~ label,
.input-container input:valid ~ label{
top:-12px;
font-size:12px;
}
.NumberContainerClass {
border: 2px solid rgb(255, 251, 251);
width: 80px;
position: relative;
display: flex;
align-items: center;
place-content: center;
border-radius: 25px;
flex-flow: row;
height: 35px;
}
.NumberInput {
background: transparent;
border: none;
width: 60%;
cursor: pointer;
font-family: system-ui;
font-weight: bold;
font-size: 18px;
color: white;
transition:1s ease;
}
.NumberInput:hover {
color:${ConfigColor};
font-size: 20px;
}
.NumberInput:focus {
outline: 0;
}
.NumberButtonsClass {
width: 20%;
background: transparent;
border: none;
font-weight: bolder;
font-size: 16px;
color: white;
cursor: pointer;
border-radius: 100px;
display: flex;
place-content: center;
flex-flow: row;
font-family: sans-serif;
align-items: center;
margin: -7%;
}
.NumberButtonsClass:focus {
outline: 0;
}
.NumberInput::-webkit-inner-spin-button,
.NumberInput::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
.NumberInput {
-moz-appearance: textfield;
}
.checkbox-wrapper-12 {
position: relative;
}
.checkbox-wrapper-12 > svg {
position: absolute;
top: -130%;
left: -170%;
width: 110px;
pointer-events: none;
}
.checkbox-wrapper-12 * {
box-sizing: border-box;
}
.checkbox-wrapper-12 input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
margin: 0;
}
.checkbox-wrapper-12 input[type="checkbox"]:focus {
outline: 0;
}
.checkbox-wrapper-12 .cbx {
width: 24px;
height: 24px;
top: calc(50vh - 12px);
left: calc(50vw - 12px);
}
.checkbox-wrapper-12 .cbx input {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #bfbfc0;
border-radius: 50%;
}
.checkbox-wrapper-12 .cbx label {
width: 24px;
height: 24px;
background: none;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
-webkit-filter: url("#goo-12");
filter: url("#goo-12");
transform: trasnlate3d(0, 0, 0);
pointer-events: none;
}
.checkbox-wrapper-12 .cbx svg {
position: absolute;
top: 5px;
left: 4px;
z-index: 1;
pointer-events: none;
}
.checkbox-wrapper-12 .cbx svg path {
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 19;
stroke-dashoffset: 19;
transition: stroke-dashoffset 0.3s ease;
transition-delay: 0.2s;
}
.checkbox-wrapper-12 .cbx input:checked + label {
animation: splash-12 0.6s ease forwards;
}
.checkbox-wrapper-12 .cbx input:checked + label + svg path {
stroke-dashoffset: 0;
}
@-moz-keyframes splash-12 {
40% {
background: ${ConfigColor};
box-shadow: 0 -18px 0 -8px ${ConfigColor}, 16px -8px 0 -8px ${ConfigColor}, 16px 8px 0 -8px ${ConfigColor}, 0 18px 0 -8px ${ConfigColor}, -16px 8px 0 -8px ${ConfigColor}, -16px -8px 0 -8px ${ConfigColor};
}
100% {
background: ${ConfigColor};
box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}
@-webkit-keyframes splash-12 {
40% {
background: ${ConfigColor};
box-shadow: 0 -18px 0 -8px ${ConfigColor}, 16px -8px 0 -8px ${ConfigColor}, 16px 8px 0 -8px ${ConfigColor}, 0 18px 0 -8px ${ConfigColor}, -16px 8px 0 -8px ${ConfigColor}, -16px -8px 0 -8px ${ConfigColor};
}
100% {
background: ${ConfigColor};
box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}
@-o-keyframes splash-12 {
40% {
background: ${ConfigColor};
box-shadow: 0 -18px 0 -8px ${ConfigColor}, 16px -8px 0 -8px ${ConfigColor}, 16px 8px 0 -8px ${ConfigColor}, 0 18px 0 -8px ${ConfigColor}, -16px 8px 0 -8px ${ConfigColor}, -16px -8px 0 -8px ${ConfigColor};
}
100% {
background: ${ConfigColor};
box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}
@keyframes splash-12 {
40% {
background: ${ConfigColor};
box-shadow: 0 -18px 0 -8px ${ConfigColor}, 16px -8px 0 -8px ${ConfigColor}, 16px 8px 0 -8px ${ConfigColor}, 0 18px 0 -8px ${ConfigColor}, -16px 8px 0 -8px ${ConfigColor}, -16px -8px 0 -8px ${ConfigColor};
}
100% {
background: ${ConfigColor};
box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}
.SelectClass {
appearance: none;
border: 0;
outline: 0;
font: inherit;
width: 100%;
padding: 1rem 4rem 1rem 1rem;
background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
color: white;
border-radius: 0.25em;
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.OptionClass {
color: inherit;
background-color: #3c3b3b8f;
}
.OptionClass {
color: inherit;
background-color: #3c3b3b8f;
}
.file-drop-area {
position: relative;
display: flex;
align-items: center;
width: 98%;
max-width: 100%;
padding: 25px;
border: 1px dashed rgba(0, 0, 0, 0.5);
border-radius: 3px;
transition: 0.2s;
justify-content: center;
align-content: center;
flex-direction: row;
height: 50%;
margin: 1%;
}
.fake-btn {
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
padding: 8px 15px;
margin-right: 10px;
font-size: 12px;
text-transform: uppercase;
}
.file-msg {
font-size: small;
font-weight: 300;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-input {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
cursor: pointer;
opacity: 0;
&:focus {
outline: none;
}
}
`);
return Object.assign(gEditor,Editor,
{
setColorAndFont:(clr,font)=>{
if(clr==undefined)clr=getComputedStyle(document.documentElement).getPropertyValue('--config-color');
if(font==undefined)font=getComputedStyle(document.documentElement).getPropertyValue('--config-font');
document.documentElement.style.setProperty('--config-color',clr);
document.documentElement.style.setProperty('--config-font',font);
}
})
}
