Compare commits
No commits in common. "7f3aff948b423420bee820cf0bd98cb3dc50d055" and "a42f5e48cafd0c394997f1bb95a01b65fbc8cb5c" have entirely different histories.
7f3aff948b
...
a42f5e48ca
11 changed files with 84 additions and 85 deletions
|
|
@ -37,7 +37,6 @@
|
|||
border: 1px solid currentColor;
|
||||
border-radius: calc(var(--input-h));
|
||||
font-weight: 500;
|
||||
background-color: var(--color-panel-bg);
|
||||
|
||||
&.active{
|
||||
background-color: var(--color-interface-400);
|
||||
|
|
|
|||
|
|
@ -77,29 +77,29 @@
|
|||
|
||||
|
||||
|
||||
[data-color-type="page"]{
|
||||
--color-050: #fff4ec;
|
||||
--color-100: #ffe6d6;
|
||||
--color-200: #ffd7c2;
|
||||
--color-300: #ffc7ac;
|
||||
--color-400: #ffb38f;
|
||||
--color-500: #ffa06f;
|
||||
--color-600: #ff8a50;
|
||||
--color-700: #ff8a50;
|
||||
--color-800: #ea733c;
|
||||
--color-900: #d96a30;
|
||||
[data-color-type="elem"]{
|
||||
--color-050: #fff4ec;
|
||||
--color-100: #ffe6d6;
|
||||
--color-200: #ffd1b5;
|
||||
--color-300: #ffbc94;
|
||||
--color-400: #ffa673;
|
||||
--color-500: #ff945b;
|
||||
--color-600: #ff8d54;
|
||||
--color-700: #f97f46;
|
||||
--color-800: #ff8a50;
|
||||
--color-900: #d96a30;
|
||||
}
|
||||
|
||||
|
||||
[data-color-type="elem"]{
|
||||
--color-050: #f4f0ff;
|
||||
--color-100: #e7e1ff;
|
||||
--color-200: #dacfff;
|
||||
--color-300: #c7b8ff;
|
||||
--color-400: #b19cff;
|
||||
--color-500: #9a80ff;
|
||||
--color-600: #7136ff;
|
||||
--color-700: #6930f5;
|
||||
--color-800: #5d28e6;
|
||||
--color-900: #5223d6;
|
||||
[data-color-type="page"]{
|
||||
--color-050: #f4f0ff;
|
||||
--color-100: #e7e1ff;
|
||||
--color-200: #d4c8ff;
|
||||
--color-300: #b9a8ff;
|
||||
--color-400: #9f89ff;
|
||||
--color-500: #866aff;
|
||||
--color-600: #7a52ff;
|
||||
--color-700: #7442ff;
|
||||
--color-800: #7136ff;
|
||||
--color-900: #5223d6;
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
|
||||
border-bottom: 1px solid var(--color-200);
|
||||
color: var(--color-800);
|
||||
|
||||
|
|
@ -31,9 +32,10 @@
|
|||
|
||||
h3 {
|
||||
margin-top: calc(var(--space-xs)*1.5);
|
||||
margin-bottom: calc(var(--space-xs)*2);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: calc(var(--space-xs)*2);
|
||||
// color: var(--color-600);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,11 @@ input[type="number"] {
|
|||
.field {
|
||||
display: flex;
|
||||
|
||||
// label{
|
||||
// width: var(--label-w);
|
||||
// background-color: red;
|
||||
// flex-grow: 3;
|
||||
// }
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
|
|
@ -118,6 +123,9 @@ input[type="number"] {
|
|||
.checkbox-field{
|
||||
margin: calc(var(--space-xs)*2) 0;
|
||||
grid-template-columns: 3ch 1fr;
|
||||
label{
|
||||
// font-weight: normal;
|
||||
}
|
||||
input{
|
||||
justify-self: left;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -163,29 +163,29 @@
|
|||
--color-900: #483c39;
|
||||
}
|
||||
|
||||
[data-color-type=page] {
|
||||
[data-color-type=elem] {
|
||||
--color-050: #fff4ec;
|
||||
--color-100: #ffe6d6;
|
||||
--color-200: #ffd7c2;
|
||||
--color-300: #ffc7ac;
|
||||
--color-400: #ffb38f;
|
||||
--color-500: #ffa06f;
|
||||
--color-600: #ff8a50;
|
||||
--color-700: #ff8a50;
|
||||
--color-800: #ea733c;
|
||||
--color-200: #ffd1b5;
|
||||
--color-300: #ffbc94;
|
||||
--color-400: #ffa673;
|
||||
--color-500: #ff945b;
|
||||
--color-600: #ff8d54;
|
||||
--color-700: #f97f46;
|
||||
--color-800: #ff8a50;
|
||||
--color-900: #d96a30;
|
||||
}
|
||||
|
||||
[data-color-type=elem] {
|
||||
[data-color-type=page] {
|
||||
--color-050: #f4f0ff;
|
||||
--color-100: #e7e1ff;
|
||||
--color-200: #dacfff;
|
||||
--color-300: #c7b8ff;
|
||||
--color-400: #b19cff;
|
||||
--color-500: #9a80ff;
|
||||
--color-600: #7136ff;
|
||||
--color-700: #6930f5;
|
||||
--color-800: #5d28e6;
|
||||
--color-200: #d4c8ff;
|
||||
--color-300: #b9a8ff;
|
||||
--color-400: #9f89ff;
|
||||
--color-500: #866aff;
|
||||
--color-600: #7a52ff;
|
||||
--color-700: #7442ff;
|
||||
--color-800: #7136ff;
|
||||
--color-900: #5223d6;
|
||||
}
|
||||
|
||||
|
|
@ -507,7 +507,6 @@ input[type=number] {
|
|||
border: 1px solid currentColor;
|
||||
border-radius: calc(var(--input-h));
|
||||
font-weight: 500;
|
||||
background-color: var(--color-panel-bg);
|
||||
}
|
||||
#editor-panel .tabs .tab.active {
|
||||
background-color: var(--color-interface-400);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,14 +10,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
break-before: page;
|
||||
}
|
||||
|
|
@ -32,18 +24,13 @@ h2 {
|
|||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin: 0mm 0mm 5mm 0mm;
|
||||
}
|
||||
|
||||
li p {
|
||||
margin-bottom: 0;
|
||||
margin: 0mm 0mm 10mm 0mm;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #7136ff;
|
||||
text-decoration: none;
|
||||
li p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
27
src/App.vue
27
src/App.vue
|
|
@ -236,7 +236,7 @@ const clearSelectedPages = () => {
|
|||
selectedPages.value = [];
|
||||
};
|
||||
|
||||
// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
|
||||
// Content elements that can trigger ElementPopup
|
||||
const CONTENT_ELEMENTS = [
|
||||
'P',
|
||||
'H1',
|
||||
|
|
@ -245,17 +245,34 @@ const CONTENT_ELEMENTS = [
|
|||
'H4',
|
||||
'H5',
|
||||
'H6',
|
||||
'BLOCKQUOTE',
|
||||
'IMG',
|
||||
'FIGURE',
|
||||
'FIGCAPTION',
|
||||
'UL',
|
||||
'OL',
|
||||
'LI',
|
||||
'BLOCKQUOTE',
|
||||
'PRE',
|
||||
'CODE',
|
||||
'TABLE',
|
||||
'THEAD',
|
||||
'TBODY',
|
||||
'TR',
|
||||
'TH',
|
||||
'TD',
|
||||
'A',
|
||||
'SPAN',
|
||||
'STRONG',
|
||||
'EM',
|
||||
'B',
|
||||
'I',
|
||||
'U',
|
||||
'CODE',
|
||||
'PRE',
|
||||
'FIGCAPTION',
|
||||
'ARTICLE',
|
||||
'SECTION',
|
||||
'ASIDE',
|
||||
'HEADER',
|
||||
'FOOTER',
|
||||
'NAV',
|
||||
];
|
||||
|
||||
// Check if element is a content element (or find closest content parent)
|
||||
|
|
|
|||
|
|
@ -375,7 +375,6 @@ const generatePreviewCss = () => {
|
|||
|
||||
const properties = [];
|
||||
|
||||
// Include all properties with their current values
|
||||
if (fontFamily.value.value) {
|
||||
properties.push(` font-family: ${fontFamily.value.value};`);
|
||||
}
|
||||
|
|
@ -391,16 +390,16 @@ const generatePreviewCss = () => {
|
|||
if (textAlign.value.value) {
|
||||
properties.push(` text-align: ${textAlign.value.value};`);
|
||||
}
|
||||
if (color.value.value) {
|
||||
if (color.value.value && color.value.value !== 'rgb(0, 0, 0)') {
|
||||
properties.push(` color: ${color.value.value};`);
|
||||
}
|
||||
if (background.value.value) {
|
||||
if (background.value.value && background.value.value !== 'transparent') {
|
||||
properties.push(` background: ${background.value.value};`);
|
||||
}
|
||||
if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
|
||||
if (marginOuter.value.value) {
|
||||
properties.push(` margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
|
||||
}
|
||||
if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
|
||||
if (paddingInner.value.value) {
|
||||
properties.push(` padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -622,11 +622,9 @@ const generatePreviewCss = () => {
|
|||
|
||||
const properties = [];
|
||||
|
||||
// Always include margin with current values
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
properties.push(` margin: ${marginValue};`);
|
||||
|
||||
// Include background if it has a value
|
||||
if (background.value.value) {
|
||||
properties.push(` background: ${background.value.value};`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,14 +34,8 @@
|
|||
@click="activeTab = ''"
|
||||
title="Fermer le panneau"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"
|
||||
></path>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
|
@ -81,7 +75,6 @@ const activeTab = inject('activeTab');
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -91,7 +84,6 @@ nav {
|
|||
display: flex;
|
||||
gap: 0.5rem;
|
||||
z-index: 2;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
|
|
@ -107,7 +99,6 @@ nav {
|
|||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
|
||||
color: var(--color-interface-300);
|
||||
transition: color 0.2s ease;
|
||||
|
|
@ -126,7 +117,7 @@ nav {
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
left: calc(var(--panel-w) * -1);
|
||||
left: calc(var(--panel-w)*-1);
|
||||
|
||||
|
||||
background-color: var(--color-panel-bg);
|
||||
|
|
@ -134,7 +125,6 @@ nav {
|
|||
|
||||
|
||||
transition: left 0.3s var(--curve);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.tab-content.open {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue