editor-html/dist/vuse.css

Vue.js Html Editor

.vuse-icon{display:block;width:20px;height:20px}.main{margin-top:64px;display:flex}.editor-content-area{display:flex;overflow-y:auto;background-color:#f2f2f2;width:calc(100% - 250px);margin-left:250px;align-items:center;justify-content:center}.editor-content-area .editor-content{background-color:#fff}.editor-content-area .editor-content section{position:relative}.controller-panel{position:fixed;z-index:200;bottom:30px;right:40px}.controller-input{outline:0;border:1px solid #c1c1c1;padding:.5em 1em;margin:20px 0;border-radius:40px;width:100%;font-size:16px}.controller-input:focus{border-color:#0072ff}.controller-button{transition:.2s;border:none;outline:0;border-radius:20px;padding:5px;color:#fff;fill:#fff;font-size:16px}.controller-button svg{transition:.2s}.controller-button:not(:last-child){margin-right:20px}.controller-button.is-rotated>svg{transform:rotate(45deg)}.controller-button:hover{@extends %floatHover;}.controller-button.is-blue{background-color:#0072ff}.controller-button.is-red{background-color:#ff3d3d}.controller-button.is-green{background-color:#18d88b}.controller-button.is-dark{background-color:#323c47}.controller-button.is-gray{background-color:#c1c1c1}.menu{user-select:none;-moz-user-select:none;position:fixed;z-index:300;width:250px;height:110vh;padding-bottom:130px!important;overflow-y:scroll;margin-top:0;background:#fff;padding:0;display:flex;flex-direction:column;list-style:none}.menu h1{font-size:20px;color:#2750a1;text-align:center;margin:6px 15px}.menu-group{width:250px}.menu-group .menu-body{display:none;padding:0;margin:0;list-style:none;width:90%;margin:10px auto}.menu-group.is-visiable .menu-body{display:block}.menu-icon{width:24px;height:24px;fill:#c1c1c1;transition:.2s}.menu-group.is-visiable .menu-icon{transform:rotate(180deg)}.menu-element{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:50px;border-radius:5px;transition:.3s;cursor:pointer;color:#fff;overflow:hidden;user-select:none;-moz-user-select:none;margin-bottom:24px}.menu-element:hover{@extends %floatHover;}.menu-elementImage{max-width:100%;pointer-events:none}.menu-elementImage+.menu-elementTitle{position:absolute;right:0;bottom:0;left:0;text-align:center;padding:5px;color:#fff;font-size:12px}.menu-group{margin-top:-1px}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;color:#323c47;font-size:14px;border-top:1px solid #d7d7d7;border-bottom:1px solid #d7d7d7}.sortable-ghost{opacity:.3;box-shadow:0 0 2px 1px #0072ff}.is-editable{white-space:inherit!important}.is-editable:hover{box-shadow:inset 0 0 0 2px #c1c1c1}.fullHeight{height:100vh}.styler{position:absolute;top:0;z-index:200;visibility:hidden;opacity:0;margin:10px 0;padding:5px;background:#323c47;border-radius:26px;display:flex;flex-direction:column;justify-content:center;align-items:center}.styler .select-font{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#323c47;background-position:218px center;width:150px;height:30px;border:1px solid #fff;cursor:pointer;color:#fff;padding:0 10px}.align,.colorer,.styler-list{display:flex;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}.styler-input{background:#fff;color:#323c47;border:0;outline:0;width:40px;height:40px;border-radius:42px;margin:0 5px 0 0;text-align:center;-webkit-appearance:none;-moz-appearance:textfield;appearance:none}.styler-button{position:relative;display:flex;justify-content:center;align-items:center;outline:0;background:#323c47;border:0;fill:#fff;color:#fff;width:42px;height:42px;border-radius:42px;margin:0 5px 0 0}.styler-button:hover{background:#283039}.styler-button:first-child{margin-left:5px}.styler-selector{margin:0 5px}.styler.is-visible{visibility:visible;opacity:1}.styler .input-group{margin:5px}.styler-section{border-radius:0;background:0 0;padding:0}.styler-section .styler-list{flex-flow:row wrap;width:56px}.styler-section .styler-button{background-color:#b1b5b9;border-radius:0;width:56px;height:56px;margin:0}.styler-section .styler-button.remove:hover{background-color:#f50057}.styler-section .styler-button:hover{background-color:#323c47;cursor:pointer}.styler-section .colorer{flex-flow:row wrap;padding:10px 0;height:auto;background-color:#b1b5b9}.align{height:42px}.colorer{height:42px}.colorer li>input{-webkit-appearance:none;-moz-appearance:textfield;appearance:none;width:30px;height:30px;border-radius:40px;border:4px solid #283039;margin:0 5px;outline:0}.colorer li>input:checked{border-color:#526375}.colorer li>input:hover{border-color:#526375}.colorer li>input#colorPink{background:#f50057}.colorer li>input#colorPurple{background:#6a1b9a}.colorer li>input#colorBlue{background:#1976d2}.colorer li>input#colorGreen{background:#2ecc71}.colorer li>input#colorYellow{background:#ffc400}.colorer li>input#colorOrange{background:#ff9100}.colorer li>input#colorBlack{background:#212121}.colorer li>input#colorWhite{background:#fff}.is-hidden{display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.v-select.single{width:150px;height:30px;margin-right:10px}.v-select.single .selected-tag{color:#fff}.v-select.single .dropdown-toggle,.v-select.single::placeholder{white-space:nowrap;overflow:hidden;width:100%;height:100%;border-color:#fff}.v-select.single .dropdown-toggle .open-indicator:before,.v-select.single::placeholder .open-indicator:before{border-color:#fff}.v-select.single .dropdown-toggle .clear,.v-select.single::placeholder .clear{display:none}.emoji-li{position:relative;color:#fff!important;fill:#fff!important;margin-right:10px;cursor:pointer}.emojiModal{display:flex;flex-wrap:wrap;overflow-y:scroll;width:200px;height:200px;position:absolute;top:20px;left:21px;background:#fff}.emojiBtn{display:block;background:#fff;border:none;outline:0;cursor:pointer;font-size:20px}.addSocialLinkBox{display:flex;padding-right:15px;border-radius:4px}.addSocialLinkBox input{border-top-left-radius:5px;border-bottom-left-radius:5px;border:none;outline:0}.addSocialLinkBox button{border-top-right-radius:5px;border-bottom-right-radius:5px;border:none;outline:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid grey;cursor:pointer}.selected{background:#283039!important;border:1px solid #fff}.sortable-handle{position:absolute;right:-56px;top:0;bottom:0;margin:auto;background-color:#b1b5b9;border-radius:0;width:56px;height:56px}.sortable-handle:hover{cursor:pointer}.nav[data-v-d6e4ea68]{position:fixed;width:100%;top:0;z-index:1000;display:flex;background-color:#162950;height:64px;align-items:center;justify-content:center;padding:0 16px;font-family:Roboto,sans-serif;flex-wrap:nowrap}.nav ul[data-v-d6e4ea68]{display:flex;list-style:none;align-items:center;justify-content:center;width:100%;cursor:pointer}.nav ul li[data-v-d6e4ea68]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;color:#a0a1ae;font-size:14px}.nav ul li.active[data-v-d6e4ea68]{color:#fff}.nav ul li .breadcrumb-arrow[data-v-d6e4ea68]{display:inline-block;padding:0 10px}.nav ul li .breadcrumb-arrow svg[data-v-d6e4ea68]{fill:#a0a1ae}.nav ul li[data-v-d6e4ea68]:not(:last-child)::after{content:"";position:absolute;width:10px;height:15px;right:-18px;top:0;bottom:0;margin:auto}.nav button[data-v-d6e4ea68]{padding:12px 21px;white-space:nowrap;background:#fff;color:#666674;border-color:#dddfe1;border-radius:5px;border:1px solid;font-size:13px}.nav button.secondary[data-v-d6e4ea68]{background:#fff;color:#666674;border-color:#dddfe1}.nav button.primary[data-v-d6e4ea68]{background:#0081ff;color:#fff;border-color:#0081ff}.nav button[data-v-d6e4ea68]:hover{cursor:pointer}.template-area{width:100%;padding:30px 48px;font-family:Poppins,sans-serif;color:#666674}.template-area .tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:35px;list-style:none;border-bottom:1px solid #929292}.template-area .tabs li{margin-right:30px;font-size:20px;font-weight:500;padding-bottom:13px}.template-area .tabs li.active,.template-area .tabs li:hover{cursor:pointer;color:#0081ff;border-bottom:4px solid #0081ff;padding-bottom:9px}.template-area .template-list{display:flex;flex-wrap:wrap;margin-left:-1%;margin-right:-1%}.template-area .template-list .template{font-family:Poppins,sans-serif;width:23%;margin:1%;position:relative}.template-area .template-list .template .content{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.template-area .template-list .template .content .overlay{width:100%;height:100%;position:absolute;top:0}.template-area .template-list .template .content.new{background-color:#0081ff}.template-area .template-list .template .content.new span{top:0;bottom:0;margin:auto;position:absolute;height:90px;padding:0 70px;text-align:center;width:100%;font-size:20px;color:#fff}.template-area .template-list .template .content.new span .fas{display:block;font-size:44px}.template-area .template-list .template .content iframe{width:300%;height:2000px;transform:scale(calc(100 / 300));transform-origin:0 0}.template-area .template-list .template:before{content:"";display:block;margin-top:100%}.template-area .template-list .template.active .content .overlay,.template-area .template-list .template:hover .content .overlay{background-color:#0081ff;cursor:pointer;opacity:.9}.template-area .template-list .template.active .content.new,.template-area .template-list .template:hover .content.new{background-color:#0051a0;cursor:pointer}