studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

change colors

Browse source
This commit is contained in:
Julie Blanc 2025-12-10 15:18:12 +01:00
commit 7f3aff948b
11 changed files with 85 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/assets/css/src/_buttons.scss
View file

@ -37,6 +37,7 @@
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);

48
public/assets/css/src/_colors.scss
View file

@ -77,29 +77,29 @@
[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="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;
--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: #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;
}

8
public/assets/css/src/_forms-section.scss
View file

@ -7,7 +7,6 @@
font-weight: 600;
font-size: 1.4rem;
border-bottom: 1px solid var(--color-200);
color: var(--color-800);
@ -32,10 +31,9 @@
h3 {
margin-top: calc(var(--space-xs)*1.5);
margin-bottom: calc(var(--space-xs)*2);
// color: var(--color-600);
font-size: 1rem;
font-weight: 600;
margin-bottom: calc(var(--space-xs)*2);
font-size: 1rem;
font-weight: 600;
}
}

8
public/assets/css/src/_forms.scss
View file

@ -17,11 +17,6 @@ input[type="number"] {
.field {
display: flex;
// label{
// width: var(--label-w);
// background-color: red;
// flex-grow: 3;
// }
label {
font-weight: 600;
@ -123,9 +118,6 @@ 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;

33
public/assets/css/style.css
View file

@ -163,29 +163,29 @@
--color-900: #483c39;
}
[data-color-type=elem] {
[data-color-type=page] {
--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-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=page] {
[data-color-type=elem] {
--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-200: #dacfff;
--color-300: #c7b8ff;
--color-400: #b19cff;
--color-500: #9a80ff;
--color-600: #7136ff;
--color-700: #6930f5;
--color-800: #5d28e6;
--color-900: #5223d6;
}
@ -507,6 +507,7 @@ 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);

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

19
public/assets/css/stylesheet.css
View file

@ -10,6 +10,14 @@
}
}
body {
font-family: "DM Sans", sans-serif;
}
h1 {
font-size: 3rem;
}
h2 {
break-before: page;
}
@ -24,13 +32,18 @@ h2 {
p {
font-size: 1rem;
margin: 0mm 0mm 10mm 0mm;
margin: 0mm 0mm 5mm 0mm;
}
li p {
margin-bottom: 0;
}
img {
width: 100%;
}
li p {
margin-bottom: 0;
a {
color: #7136ff;
text-decoration: none;
}

27
src/App.vue
View file

@ -236,7 +236,7 @@ const clearSelectedPages = () => {
selectedPages.value = [];
};
// Content elements that can trigger ElementPopup
// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
const CONTENT_ELEMENTS = [
'P',
'H1',
@ -245,34 +245,17 @@ const CONTENT_ELEMENTS = [
'H4',
'H5',
'H6',
'IMG',
'FIGURE',
'FIGCAPTION',
'UL',
'OL',
'LI',
'BLOCKQUOTE',
'PRE',
'CODE',
'TABLE',
'THEAD',
'TBODY',
'TR',
'TH',
'TD',
'LI',
'A',
'SPAN',
'STRONG',
'EM',
'B',
'I',
'U',
'ARTICLE',
'SECTION',
'ASIDE',
'HEADER',
'FOOTER',
'NAV',
'CODE',
'PRE',
'FIGCAPTION',
];
// Check if element is a content element (or find closest content parent)

9
src/components/ElementPopup.vue
View file

@ -375,6 +375,7 @@ const generatePreviewCss = () => {
const properties = [];
// Include all properties with their current values
if (fontFamily.value.value) {
properties.push(` font-family: ${fontFamily.value.value};`);
}
@ -390,16 +391,16 @@ const generatePreviewCss = () => {
if (textAlign.value.value) {
properties.push(` text-align: ${textAlign.value.value};`);
}
if (color.value.value && color.value.value !== 'rgb(0, 0, 0)') {
if (color.value.value) {
properties.push(` color: ${color.value.value};`);
}
if (background.value.value && background.value.value !== 'transparent') {
if (background.value.value) {
properties.push(` background: ${background.value.value};`);
}
if (marginOuter.value.value) {
if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
properties.push(` margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
}
if (paddingInner.value.value) {
if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
properties.push(` padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
}

2
src/components/PagePopup.vue
View file

@ -622,9 +622,11 @@ 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};`);
}

16
src/components/editor/EditorPanel.vue
View file

@ -34,8 +34,14 @@
@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>
@ -75,6 +81,7 @@ const activeTab = inject('activeTab');
display: flex;
flex-direction: column;
z-index: 2;
pointer-events: none;
}
nav {
@ -84,6 +91,7 @@ nav {
display: flex;
gap: 0.5rem;
z-index: 2;
pointer-events: all;
}
.close-button {
@ -99,6 +107,7 @@ nav {
background: transparent;
border: none;
cursor: pointer;
pointer-events: all;
color: var(--color-interface-300);
transition: color 0.2s ease;
@ -117,7 +126,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);
@ -125,6 +134,7 @@ nav {
transition: left 0.3s var(--curve);
pointer-events: all;
}
.tab-content.open {