mirror of
https://github.com/webislife/wc-wysiwyg.git
synced 2025-07-21 11:32:22 +00:00
add vite.config.js, remove legacy code, improve readme.md
This commit is contained in:
Денис Строков
383
dist/sass/wc-wysiwyg.css
vendored
383
dist/sass/wc-wysiwyg.css
vendored
@ -1,8 +1,85 @@
|
||||
@charset "UTF-8";
|
||||
:root {
|
||||
--color-orange-50: #FFF8E1;
|
||||
--color-orange-100: #FFF8E1;
|
||||
--color-orange-500: #FF9800;
|
||||
--color-orange-700: #F57C00;
|
||||
--color-green-50: #E8F5E9;
|
||||
--color-green-100: #C8E6C9;
|
||||
--color-green-300: #AED581;
|
||||
--color-green-500: #4CAF50;
|
||||
--color-green-900: #1B5E20;
|
||||
--color-red-50: #FFEBEE;
|
||||
--color-red-100: #FFCDD2;
|
||||
--color-red-200: #FF8A65;
|
||||
--color-red-500: #F44336;
|
||||
--color-red-900: #B71C1C;
|
||||
--color-amber-50: #FFF8E1;
|
||||
--color-amber-100: #FFE0B2;
|
||||
--color-amber-900: #FF6F00;
|
||||
--color-indigo-100: #C5CAE9;
|
||||
--color-deep-orange-50: #FBE9E7;
|
||||
--color-deep-orange-900: #BF360C;
|
||||
--color-lime-50: #F9FBE7;
|
||||
--color-grey-50: #FAFAFA;
|
||||
--color-grey-100: #F5F5F5;
|
||||
--color-grey-200: #EEEEEE;
|
||||
--color-grey-300: #E0E0E0;
|
||||
--color-grey-400: #BDBDBD;
|
||||
--color-grey-500: #9E9E9E;
|
||||
--color-grey-600: #757575;
|
||||
--color-grey-700: #757575;
|
||||
--color-grey-800: #424242;
|
||||
--color-grey-900: #212121;
|
||||
--color-blue-50: #E3F2FD;
|
||||
--color-blue-100: #BBDEFB;
|
||||
--color-blue-200: #90CAF9;
|
||||
--color-blue-300: #64B5F6;
|
||||
--color-blue-400: #42A5F5;
|
||||
--color-blue-500: #2196F3;
|
||||
--color-blue-800: #1565C0;
|
||||
--color-blue-900: #0D47A1;
|
||||
--color-blue-gray-50: #ECEFF1;
|
||||
--color-blue-gray-100: #CFD8DC;
|
||||
--color-blue-gray-200: #B0BEC5;
|
||||
--color-blue-gray-300: #90A4AE;
|
||||
--color-blue-gray-400: #78909C;
|
||||
--color-blue-gray-700: #455A64;
|
||||
--color-blue-gray-800: #37474F;
|
||||
--color-blue-gray-900: #263238;
|
||||
--color-blue-light-50: #E1F5FE;
|
||||
--color-blue-light-100: #B3E5FC;
|
||||
--wc-wysiwyg-light: #fff;
|
||||
--wc-wysiwyg-dark: #37474F; }
|
||||
|
||||
wc-wysiwyg.-word .wc-wysiwyg_pf > label {
|
||||
background-color: var(--color-blue-500); }
|
||||
|
||||
wc-wysiwyg.-word .wc-wysiwyg_pf {
|
||||
background-color: var(--color-blue-400);
|
||||
border-radius: 5px;
|
||||
padding: 5px; }
|
||||
|
||||
wc-wysiwyg.-word .wc-wysiwyg_content {
|
||||
border-radius: 5px; }
|
||||
|
||||
wc-wysiwyg.-word .wc-wysiwyg_bt {
|
||||
background-color: var(--color-blue-300);
|
||||
padding: 5px;
|
||||
border-radius: 3px; }
|
||||
|
||||
wc-wysiwyg.-word .wc-wysiwyg_ec {
|
||||
background-color: var(--wc-wysiwyg-light);
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
margin: 5px 0;
|
||||
border: 0; }
|
||||
|
||||
.wc-wysiwyg {
|
||||
background-color: #eee;
|
||||
background-color: var(--wc-wysiwyg-light);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
position: relative;
|
||||
border: 1px solid var(--color-blue-gray-400);
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
/* custom elements */
|
||||
@ -10,6 +87,37 @@
|
||||
/* inline dialog */
|
||||
/* props form */
|
||||
/* hints */ }
|
||||
.wc-wysiwyg_dialog {
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
outline: none; }
|
||||
.wc-wysiwyg_dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.8); }
|
||||
.wc-wysiwyg_dialog.-modal {
|
||||
min-width: 90vw;
|
||||
min-height: 90vh;
|
||||
max-height: 90vh;
|
||||
max-height: 90vh; }
|
||||
.wc-wysiwyg_dialog.-colors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 300px; }
|
||||
.wc-wysiwyg_dialog.-colors:not([open]) {
|
||||
display: none; }
|
||||
.wc-wysiwyg_dialog.-colors fieldset.-palette {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
max-width: 20px; }
|
||||
.wc-wysiwyg_dialog.-colors fieldset.-palette > button {
|
||||
flex: 1;
|
||||
margin: 2px; }
|
||||
.wc-wysiwyg_bt {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
@ -27,36 +135,30 @@
|
||||
border-radius: 3px; }
|
||||
.wc-wysiwyg_ce {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 7px;
|
||||
border: 1px solid var(--color-blue-500);
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-blue-50); }
|
||||
.wc-wysiwyg_ce:before {
|
||||
content: 'HTML5 custom-elements';
|
||||
color: #fff;
|
||||
background-color: var(--color-blue-500);
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
line-height: 0.6em;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
transform: translate(0, -50%);
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.wc-wysiwyg_ce > button {
|
||||
border-color: var(--color-blue-500);
|
||||
background-color: var(--color-blue-100); }
|
||||
.wc-wysiwyg_ce > button:hover {
|
||||
border-color: var(--color-blue-900);
|
||||
background-color: var(--color-blue-200); }
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
.wc-wysiwyg_ce:before {
|
||||
content: 'HTML5 custom-elements';
|
||||
color: #fff;
|
||||
background-color: var(--color-blue-500);
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
line-height: 0.6em;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
transform: translate(0, -50%);
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.wc-wysiwyg_pr {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
min-height: 200px; }
|
||||
.wc-wysiwyg_content {
|
||||
padding: 5px 5px 2em 5px;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
overflow-x: hidden;
|
||||
@ -66,7 +168,7 @@
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
resize: vertical; }
|
||||
.wc-wysiwyg_content .-selected {
|
||||
background-color: var(--color-blue-100); }
|
||||
@ -76,46 +178,186 @@
|
||||
.wc-wysiwyg_content.-invalid:focus {
|
||||
outline: 5px solid var(--color-red-500); }
|
||||
.wc-wysiwyg_ec {
|
||||
background: var(--color-blue-gray-100);
|
||||
padding: 0.5em 0.25em 0.25em 0.25em;
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
border-color: var(--color-blue-gray-100); }
|
||||
.wc-wysiwyg_ec:focus-within {
|
||||
border-color: var(--color-blue-500); }
|
||||
background: #2b393f;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
top: 0;
|
||||
position: sticky;
|
||||
z-index: 2; }
|
||||
.wc-wysiwyg_btn {
|
||||
background: var(--color-blue-gray-50);
|
||||
outline: none;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-blue-gray-200);
|
||||
border-bottom: 3px solid var(--color-blue-gray-200);
|
||||
color: #333;
|
||||
min-width: 0px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85em;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
min-width: 30px;
|
||||
line-height: 20px;
|
||||
background-color: var(--wc-wysiwyg-light);
|
||||
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
padding: 2px 5px;
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
cursor: pointer; }
|
||||
.wc-wysiwyg_btn:hover {
|
||||
background: var(--color-blue-gray-100);
|
||||
border-color: var(--color-blue-gray-300); }
|
||||
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9); }
|
||||
.wc-wysiwyg_btn:focus {
|
||||
border-color: var(--color-blue-500); }
|
||||
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9); }
|
||||
.wc-wysiwyg_btn:active {
|
||||
padding-top: 2px;
|
||||
background: var(--color-blue-gray-100);
|
||||
border-color: var(--color-blue-gray-700);
|
||||
border-bottom: 1px solid; }
|
||||
box-shadow: 0 2px 5px rgba(1, 181, 52, 0.9); }
|
||||
.wc-wysiwyg_btn.-clear {
|
||||
text-decoration: line-through;
|
||||
font-weight: bold; }
|
||||
.wc-wysiwyg_btn.-emoji {
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border-radius: 1em;
|
||||
margin: 2px; }
|
||||
.wc-wysiwyg_btn.-color {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
border-color: rgba(0, 0, 0, 0.2); }
|
||||
.wc-wysiwyg_btn.-prevcolor::before {
|
||||
display: inline-block;
|
||||
background-color: var(--colorer);
|
||||
width: 12px;
|
||||
content: '';
|
||||
height: 12px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5); }
|
||||
.wc-wysiwyg_btn.-b {
|
||||
font-weight: bold; }
|
||||
.wc-wysiwyg_btn.-i {
|
||||
font-style: italic; }
|
||||
.wc-wysiwyg_btn.-u {
|
||||
text-decoration: underline; }
|
||||
.wc-wysiwyg_btn.-s {
|
||||
text-decoration: line-through; }
|
||||
.wc-wysiwyg_btn.-sub {
|
||||
vertical-align: sub;
|
||||
font-size: 0.5em; }
|
||||
.wc-wysiwyg_btn.-del::before {
|
||||
content: '- ';
|
||||
font-weight: 400; }
|
||||
.wc-wysiwyg_btn.-h1::before {
|
||||
content: '§ ';
|
||||
font-weight: 400; }
|
||||
.wc-wysiwyg_btn.-del {
|
||||
color: var(--color-red-900);
|
||||
border-bottom: 1px solid var(--color-red-900);
|
||||
background-color: var(--color-red-50); }
|
||||
.wc-wysiwyg_btn.-a::before {
|
||||
content: "🔗 "; }
|
||||
.wc-wysiwyg_btn.-ul::before {
|
||||
content: "● "; }
|
||||
.wc-wysiwyg_btn.-ol::before {
|
||||
content: "1. "; }
|
||||
.wc-wysiwyg_btn.-var::before {
|
||||
content: "∫ "; }
|
||||
.wc-wysiwyg_btn.-var {
|
||||
font-weight: bold;
|
||||
font-style: italic; }
|
||||
.wc-wysiwyg_btn.-details:before {
|
||||
content: "→"; }
|
||||
.wc-wysiwyg_btn.-details {
|
||||
text-decoration: dotted;
|
||||
border: 1px dashed var(--color-blue-gray-200); }
|
||||
.wc-wysiwyg_btn.-pre::before {
|
||||
content: "...";
|
||||
display: inline-block;
|
||||
background-color: var(--color-blue-gray-100);
|
||||
color: var(--color-blue-grey-900);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
line-height: 10px; }
|
||||
.wc-wysiwyg_btn.-pre {
|
||||
background-color: var(--color-blue-gray-50);
|
||||
color: var(--color-blue-grey-900);
|
||||
padding-left: 15px; }
|
||||
.wc-wysiwyg_btn.-ins::before {
|
||||
content: '+ ';
|
||||
font-weight: 400; }
|
||||
.wc-wysiwyg_btn.-ins {
|
||||
color: var(--color-green-900);
|
||||
border-bottom: 1px solid var(--color-green-900);
|
||||
background-color: var(--color-green-50); }
|
||||
.wc-wysiwyg_btn.-sup {
|
||||
vertical-align: super;
|
||||
font-size: 0.5em; }
|
||||
.wc-wysiwyg_btn.-q:before {
|
||||
content: open-quote; }
|
||||
.wc-wysiwyg_btn.-samp:before {
|
||||
content: '> ';
|
||||
color: var(--color-blue-gray-300);
|
||||
font-family: sans-serif; }
|
||||
.wc-wysiwyg_btn.-samp {
|
||||
background-color: var(--color-blue-gray-50);
|
||||
border-bottom: 1px solid var(--color-blue-gray-300); }
|
||||
.wc-wysiwyg_btn.-blockquote::before {
|
||||
content: '❝';
|
||||
font-size: 1em;
|
||||
color: #F57F17;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 4px;
|
||||
user-select: none; }
|
||||
.wc-wysiwyg_btn.-blockquote {
|
||||
background-color: var(--color-amber-50);
|
||||
color: #412207;
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid #F57F17; }
|
||||
.wc-wysiwyg_btn.-time:before {
|
||||
content: "📅 "; }
|
||||
.wc-wysiwyg_btn.-img:before {
|
||||
content: "🌅 "; }
|
||||
.wc-wysiwyg_btn.-video:before {
|
||||
content: "🎦 "; }
|
||||
.wc-wysiwyg_btn.-audio:before {
|
||||
content: "🎵 "; }
|
||||
.wc-wysiwyg_btn.-details:before {
|
||||
content: "▸ "; }
|
||||
.wc-wysiwyg_btn.-code {
|
||||
content: "<code>";
|
||||
background-color: var(--color-blue-gray-50);
|
||||
color: var(--color-blue-grey-900); }
|
||||
.wc-wysiwyg_btn.-strong {
|
||||
background-color: var(--color-deep-orange-50);
|
||||
color: var(--color-deep-orange-900);
|
||||
font-weight: 400; }
|
||||
.wc-wysiwyg_btn.-abbr {
|
||||
color: #1A237E; }
|
||||
.wc-wysiwyg_btn.-q {
|
||||
color: #000;
|
||||
background-color: #FFF8E1; }
|
||||
.wc-wysiwyg_btn.-small {
|
||||
font-size: 0.5em; }
|
||||
.wc-wysiwyg_btn.-dfn {
|
||||
color: var(--color-blue-900);
|
||||
font-style: italic; }
|
||||
.wc-wysiwyg_btn.-mark {
|
||||
background-color: var(--color-lime-100);
|
||||
color: var(--color-lime-900); }
|
||||
.wc-wysiwyg_btn.-mark:hover {
|
||||
background-color: var(--color-lime-200);
|
||||
color: var(--color-lime-900); }
|
||||
.wc-wysiwyg_btn.-kbd {
|
||||
background: var(--color-blue-gray-50);
|
||||
outline: none;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-blue-gray-200);
|
||||
border-bottom: 3px solid var(--color-blue-gray-200);
|
||||
color: #333; }
|
||||
.wc-wysiwyg_ia {
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
@ -128,17 +370,17 @@
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: var(--color-blue-gray-50);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-blue-gray-300);
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
background-color: var(--wc-wysiwyg-light);
|
||||
border-radius: 5px;
|
||||
padding: 5px; }
|
||||
.wc-wysiwyg_di > form:nth-child(1n+2) {
|
||||
margin-top: 10px; }
|
||||
.wc-wysiwyg_pf {
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
margin: 10px 0;
|
||||
background-color: var(--color-blue-100);
|
||||
flex-wrap: nowrap;
|
||||
font-size: 0.9em;
|
||||
@ -157,7 +399,8 @@
|
||||
background-color: var(--color-blue-200);
|
||||
color: var(--color-blue-gray-800);
|
||||
padding: 3px 3px 3px 5px;
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
margin-right: 5px;
|
||||
@ -201,3 +444,17 @@
|
||||
line-height: 10px; }
|
||||
.wc-wysiwyg .-display-none {
|
||||
display: none; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.wc-wysiwyg {
|
||||
background-color: var(--wc-wysiwyg-dark); }
|
||||
.wc-wysiwyg_di {
|
||||
background-color: var(--wc-wysiwyg-dark); }
|
||||
.wc-wysiwyg_bt {
|
||||
background-color: var(--wc-wysiwyg-dark); }
|
||||
.wc-wysiwyg_btn {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #ccc; }
|
||||
.wc-wysiwyg_btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #ccc; } }
|
||||
|
||||
2
dist/wc-wysiwyg.js
vendored
2
dist/wc-wysiwyg.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user