From 718aae2c23568a0e545739b931bb791d3c8b56da Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Tue, 9 Dec 2025 17:08:40 +0100 Subject: [PATCH] styles w/ differents colors --- public/assets/css/src/_buttons.scss | 72 ++++-- public/assets/css/src/_forms.scss | 303 ++++++++++++++++++++----- public/assets/css/src/_variables.scss | 7 + public/assets/css/style.css | 208 +++++++++++++---- public/assets/css/style.css.map | 2 +- src/components/ElementPopup.vue | 29 +-- src/components/PagePopup.vue | 33 +-- src/components/editor/EditorPanel.vue | 7 +- src/components/editor/PageSettings.vue | 56 ++--- src/components/editor/TextSettings.vue | 18 +- src/components/ui/InputWithUnit.vue | 10 +- src/components/ui/MarginEditor.vue | 25 +- src/components/ui/NumberInput.vue | 93 ++++++++ 13 files changed, 667 insertions(+), 196 deletions(-) create mode 100644 src/components/ui/NumberInput.vue diff --git a/public/assets/css/src/_buttons.scss b/public/assets/css/src/_buttons.scss index d46fcd9..4e0927b 100644 --- a/public/assets/css/src/_buttons.scss +++ b/public/assets/css/src/_buttons.scss @@ -1,23 +1,59 @@ -button { - cursor: pointer; - border: 1px solid var(--color-interface-300); - color: var(--color-interface-300); - background-color: var(--color-panel-bg); - border-radius: var(--border-radius); - padding: 0.1rem 0.3rem; +.unit-toggle{ + button:not(.spinner-btn) { + cursor: pointer; + + border: 1px solid var(--color-interface-400); + color: var(--color-interface-400); + background-color: var(--color-panel-bg); + border-radius: var(--border-radius); + padding: 0.1rem 0.3rem; + height: calc(var(--input-h)*0.75); + - &.active { - border: 1px solid var(--color-interface-700); - color: var(--color-interface-700); - background-color: var(--color-interface-100); - } - - &.tab { - &.active { - background-color: var(--color-txt); - color: #fff; - border: none; + &:not(.active):hover{ + background-color: var(--color-interface-100); } + + &.active { + // border: 1px solid var(--color-interface-700); + color: var(--color-interface-050); + background-color: var(--color-interface-500); + cursor: auto; + } + + } } + + +#editor-panel .tabs{ + .tab{ + color: var(--color-interface-600); + font-size: 1rem; + font-family: var(--sans-serif); + height: var(--input-h); + padding: 0 1ch; + border: 1px solid currentColor; + border-radius: calc(var(--input-h)); + font-weight: 500; + + &.active{ + background-color: var(--color-interface-400); + border-color: var(--color-interface-400); + color: var(--color-panel-bg); + } + + &:not(.active):hover{ + cursor: pointer; + background-color: var(--color-interface-100); + } + } + // .tab { + // &.active { + // background-color: var(--color-txt); + // color: #fff; + // border: none; + // } + // } +} diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss index 199b2a4..a0e0b98 100644 --- a/public/assets/css/src/_forms.scss +++ b/public/assets/css/src/_forms.scss @@ -1,14 +1,15 @@ select, input[type="text"], input[type="number"] { - background-color: white; - // border-radius: 4px; - min-height: 20px; + height: var(--input-h); border: 1px solid var(--color-interface-200); background-color: var(--color-interface-100); - - font-family: var(--sans-serif); + font-size: 1rem; + // min-width: var(--input-w); + // width: 100%; + // padding: 0 1ch; + } @@ -20,8 +21,8 @@ input[type="number"] { /* Label with CSS tooltip */ .label-with-tooltip { - text-decoration: underline dotted; - text-decoration-color: var(--color-browngray-200); + text-decoration: underline dotted 2px; + text-decoration-color: var(--color-interface-200); text-underline-offset: 2px; cursor: help; position: relative; @@ -35,7 +36,7 @@ input[type="number"] { padding: 0.25rem 0.5rem; background: var(--color-browngray-700); color: var(--color-browngray-100); - font-family: "Courier New", Courier, monospace; + font-family: var(--mono); font-size: 0.75rem; border-radius: 4px; white-space: nowrap; @@ -54,12 +55,52 @@ input[type="number"] { } .settings-section { - h2 { - border-bottom: 1px solid #000; - margin-bottom: var(--space-xs); + + margin-top: 3em; + + &#settings-section_page{ + --color: var(--color-page-highlight); } + &#settings-section_text{ + --color: var(--color-purple); + } + + + .container{ + border: 1px solid var(--color); + border-radius: var(--border-radius); + padding: 0.5em 1em; + } + + + + h2 { + margin-bottom: var(--space-xs); + + + + font-weight: 500; + font-size: 1rem; + border-radius: var(--border-radius); + height: var(--input-h); + padding: 0 1ch; + display: flex; + align-items: center; + + color: var(--color-panel-bg); + background-color: var(--color); + + // border: 2px solid var(--color); + // color: var(--color); + } + + .infos{ + font-size: 0.8rem; + color: var(--color-interface-400); + } + .settings-subsection:not(:last-child) { - border-bottom: 1px solid var(--color-browngray-050); + border-bottom: 1px solid var(--color-interface-100); } .settings-subsection { @@ -72,67 +113,227 @@ input[type="number"] { .field { display: flex; - label, - select { - width: 50%; + // label{ + // width: var(--label-w); + // background-color: red; + // flex-grow: 3; + // } + + label { + font-weight: 600; } - input { - padding: 0.1rem 0.1rem 0.1rem 0.3rem; - } + .input-with-unit { display: flex; gap: 0.3rem; - .unit-toggle { - display: flex; - gap: 0.3rem; - } + + } + + .unit-toggle { + height: var(--input-h); + display: flex; + gap: 0.3rem; + align-items: center; } .input-with-color { - width: 50%; + width: 100%; .clr-field { - display: flex; - button { - position: absolute; - transform: none; - height: 1.1rem; - top: auto; - right: auto; - cursor: pointer; + width: 100%; + display: grid; + grid-template-columns: var(--input-h); + grid-gap: 1ch; + button{ + grid-column: 1; + position: relative; + border-radius: var(--border-radius); + + } + input{ + grid-column: 2; } - input { - padding-left: 2.5rem; - width: 100%; - } } } } - &.margins { - display: flex; - flex-wrap: wrap; - row-gap: var(--space-xs); - h3 { + .field{ + display: grid; + grid-template-columns: var(--label-w) 1fr; + label{ + align-self: center; + } + } + + .field-font{ + display: grid; + grid-template-columns: var(--label-w) 1fr; + grid-template-rows: var(--input-h) var(--input-h); + + select{ width: 100%; } - .field { - width: 50%; - - label { - width: 30%; - } - - .input-with-unit { - input { - width: 50%; - } + .field-checkbox{ + padding-top: var(--space-xs); + label{ + font-weight: 400; + margin-left: 0.75ch; } } } + + .field-margin, .field-size{ + display: inline-grid; + width: calc(50% - 1ch); + grid-template-columns: 6.5ch var(--input-w-small) 1fr; + margin-bottom: var(--space-xs); + input{ + width: var(--input-w-small); + padding-left: 0.75ch; + } + &:nth-of-type(odd){ + margin-right: 2ch; + + } + + } + + .checkbox-field{ + margin-bottom: var(--space-xs); + grid-template-columns: 3ch 1fr; + input{ + justify-self: left; + margin: 0; + } + } + + } } + + + + + +// INPUT NUMBER =============================================== + +// Masquer les spinners natifs partout +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; +} + + +.number-input{ + position: relative; + // padding: 0 1ch!important; + input{ + padding-top: 0; + padding-bottom: 0; + } + .spinner-buttons{ + height: var(--input-h); + width: var(--input-h); + display: flex; + flex-direction: column; + position: absolute; + right: 0; + top: 0; + + button{ + height: calc(var(--input-h)*0.6); + cursor: pointer; + padding: 0; + svg path{ + fill: var(--color-interface-600); + } + &:hover{ + svg path{ + fill: var(--color-interface-900); + } + } + } + .spinner-down{ + svg{ + position: relative; + top: -2px; + } + } + + + } + +} +// Composant NumberInput avec boutons personnalisés +// .number-input { +// position: relative; +// display: flex; +// align-items: center; +// width: 100%; +// position: relative; + +// input[type="number"] { +// width: 100%; +// box-sizing: border-box; +// } + +// .spinner-buttons { +// background-color: red; +// position: absolute; +// right: 1px; +// top: 1px; +// bottom: 1px; +// display: flex; +// flex-direction: column; +// justify-content: center; +// gap: 1px; +// z-index: 10; + +// .spinner-btn { +// display: flex; +// align-items: center; +// justify-content: center; +// width: 20px; +// height: 10px; +// padding: 0; +// margin: 0; +// background-color: var(--color-interface-200); +// border: 1px solid var(--color-interface-300); +// border-radius: 2px; +// cursor: pointer; +// transition: background-color 0.15s ease; +// color: var(--color-interface-700); +// line-height: 0; + +// svg { +// width: 8px; +// height: 6px; +// display: block; +// } + +// &:hover:not(:disabled) { +// background-color: var(--color-interface-300); +// color: var(--color-interface-900); +// } + +// &:active:not(:disabled) { +// background-color: var(--color-interface-400); +// } + +// &:disabled { +// opacity: 0.3; +// cursor: not-allowed; +// } +// } +// } +// } diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss index 29f4d4e..b0cfc33 100644 --- a/public/assets/css/src/_variables.scss +++ b/public/assets/css/src/_variables.scss @@ -85,4 +85,11 @@ --sans-serif: 'DM Sans', sans-serif; --mono: 'Inconsolata', monospace; + + + --input-h: 26px; + --input-w: 160px; + --input-w-small: 45px; + --label-w: 18ch; + font-size: 14px; } diff --git a/public/assets/css/style.css b/public/assets/css/style.css index a23be1b..a5de469 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -204,6 +204,11 @@ button { --curve: cubic-bezier(0.86, 0, 0.07, 1); --sans-serif: "DM Sans", sans-serif; --mono: "Inconsolata", monospace; + --input-h: 26px; + --input-w: 160px; + --input-w-small: 45px; + --label-w: 18ch; + font-size: 14px; } body { @@ -233,11 +238,11 @@ h2 { select, input[type=text], input[type=number] { - background-color: white; - min-height: 20px; + height: var(--input-h); border: 1px solid var(--color-interface-200); background-color: var(--color-interface-100); font-family: var(--sans-serif); + font-size: 1rem; } .field--view-only { @@ -246,9 +251,9 @@ input[type=number] { /* Label with CSS tooltip */ .label-with-tooltip { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - text-decoration-color: var(--color-browngray-200); + -webkit-text-decoration: underline dotted 2px; + text-decoration: underline dotted 2px; + text-decoration-color: var(--color-interface-200); text-underline-offset: 2px; cursor: help; position: relative; @@ -262,7 +267,7 @@ input[type=number] { padding: 0.25rem 0.5rem; background: var(--color-browngray-700); color: var(--color-browngray-100); - font-family: "Courier New", Courier, monospace; + font-family: var(--mono); font-size: 0.75rem; border-radius: 4px; white-space: nowrap; @@ -276,12 +281,38 @@ input[type=number] { visibility: visible; } +.settings-section { + margin-top: 3em; +} +.settings-section#settings-section_page { + --color: var(--color-page-highlight); +} +.settings-section#settings-section_text { + --color: var(--color-purple); +} +.settings-section .container { + border: 1px solid var(--color); + border-radius: var(--border-radius); + padding: 0.5em 1em; +} .settings-section h2 { - border-bottom: 1px solid #000; margin-bottom: var(--space-xs); + font-weight: 500; + font-size: 1rem; + border-radius: var(--border-radius); + height: var(--input-h); + padding: 0 1ch; + display: flex; + align-items: center; + color: var(--color-panel-bg); + background-color: var(--color); +} +.settings-section .infos { + font-size: 0.8rem; + color: var(--color-interface-400); } .settings-section .settings-subsection:not(:last-child) { - border-bottom: 1px solid var(--color-browngray-050); + border-bottom: 1px solid var(--color-interface-100); } .settings-section .settings-subsection { padding: var(--space-xs) 0; @@ -292,74 +323,159 @@ input[type=number] { .settings-section .settings-subsection .field { display: flex; } -.settings-section .settings-subsection .field label, -.settings-section .settings-subsection .field select { - width: 50%; -} -.settings-section .settings-subsection .field input { - padding: 0.1rem 0.1rem 0.1rem 0.3rem; +.settings-section .settings-subsection .field label { + font-weight: 600; } .settings-section .settings-subsection .field .input-with-unit { display: flex; gap: 0.3rem; } -.settings-section .settings-subsection .field .input-with-unit .unit-toggle { +.settings-section .settings-subsection .field .unit-toggle { + height: var(--input-h); display: flex; gap: 0.3rem; + align-items: center; } .settings-section .settings-subsection .field .input-with-color { - width: 50%; + width: 100%; } .settings-section .settings-subsection .field .input-with-color .clr-field { - display: flex; + width: 100%; + display: grid; + grid-template-columns: var(--input-h); + grid-gap: 1ch; } .settings-section .settings-subsection .field .input-with-color .clr-field button { - position: absolute; - transform: none; - height: 1.1rem; - top: auto; - right: auto; - cursor: pointer; + grid-column: 1; + position: relative; + border-radius: var(--border-radius); } .settings-section .settings-subsection .field .input-with-color .clr-field input { - padding-left: 2.5rem; + grid-column: 2; +} +.settings-section .settings-subsection .field { + display: grid; + grid-template-columns: var(--label-w) 1fr; +} +.settings-section .settings-subsection .field label { + align-self: center; +} +.settings-section .settings-subsection .field-font { + display: grid; + grid-template-columns: var(--label-w) 1fr; + grid-template-rows: var(--input-h) var(--input-h); +} +.settings-section .settings-subsection .field-font select { width: 100%; } -.settings-section .settings-subsection.margins { - display: flex; - flex-wrap: wrap; - row-gap: var(--space-xs); +.settings-section .settings-subsection .field-font .field-checkbox { + padding-top: var(--space-xs); } -.settings-section .settings-subsection.margins h3 { - width: 100%; +.settings-section .settings-subsection .field-font .field-checkbox label { + font-weight: 400; + margin-left: 0.75ch; } -.settings-section .settings-subsection.margins .field { - width: 50%; +.settings-section .settings-subsection .field-margin, .settings-section .settings-subsection .field-size { + display: inline-grid; + width: calc(50% - 1ch); + grid-template-columns: 6.5ch var(--input-w-small) 1fr; + margin-bottom: var(--space-xs); } -.settings-section .settings-subsection.margins .field label { - width: 30%; +.settings-section .settings-subsection .field-margin input, .settings-section .settings-subsection .field-size input { + width: var(--input-w-small); + padding-left: 0.75ch; } -.settings-section .settings-subsection.margins .field .input-with-unit input { - width: 50%; +.settings-section .settings-subsection .field-margin:nth-of-type(odd), .settings-section .settings-subsection .field-size:nth-of-type(odd) { + margin-right: 2ch; +} +.settings-section .settings-subsection .checkbox-field { + margin-bottom: var(--space-xs); + grid-template-columns: 3ch 1fr; +} +.settings-section .settings-subsection .checkbox-field input { + justify-self: left; + margin: 0; } -button { +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} + +.number-input { + position: relative; +} +.number-input input { + padding-top: 0; + padding-bottom: 0; +} +.number-input .spinner-buttons { + height: var(--input-h); + width: var(--input-h); + display: flex; + flex-direction: column; + position: absolute; + right: 0; + top: 0; +} +.number-input .spinner-buttons button { + height: calc(var(--input-h) * 0.6); cursor: pointer; - border: 1px solid var(--color-interface-300); - color: var(--color-interface-300); + padding: 0; +} +.number-input .spinner-buttons button svg path { + fill: var(--color-interface-600); +} +.number-input .spinner-buttons button:hover svg path { + fill: var(--color-interface-900); +} +.number-input .spinner-buttons .spinner-down svg { + position: relative; + top: -2px; +} + +.unit-toggle button:not(.spinner-btn) { + cursor: pointer; + border: 1px solid var(--color-interface-400); + color: var(--color-interface-400); background-color: var(--color-panel-bg); border-radius: var(--border-radius); padding: 0.1rem 0.3rem; + height: calc(var(--input-h) * 0.75); } -button.active { - border: 1px solid var(--color-interface-700); - color: var(--color-interface-700); +.unit-toggle button:not(.spinner-btn):not(.active):hover { background-color: var(--color-interface-100); } -button.tab.active { - background-color: var(--color-txt); - color: #fff; - border: none; +.unit-toggle button:not(.spinner-btn).active { + color: var(--color-interface-050); + background-color: var(--color-interface-500); + cursor: auto; +} + +#editor-panel .tabs .tab { + color: var(--color-interface-600); + font-size: 1rem; + font-family: var(--sans-serif); + height: var(--input-h); + padding: 0 1ch; + border: 1px solid currentColor; + border-radius: calc(var(--input-h)); + font-weight: 500; +} +#editor-panel .tabs .tab.active { + background-color: var(--color-interface-400); + border-color: var(--color-interface-400); + color: var(--color-panel-bg); +} +#editor-panel .tabs .tab:not(.active):hover { + cursor: pointer; + background-color: var(--color-interface-100); } .settings-popup { diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map index 2849f12..65e19b7 100644 --- a/public/assets/css/style.css.map +++ b/public/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"AACA;EACE,sBAAA;EACA,mFAAA;EACA,qBAAA;EACA,kBAAA;EACA,kBAAA;ACAF;ADGA;EACE,sBAAA;EACA,0FAAA;EACA,qBAAA;EACA,kBAAA;EACA,kBAAA;ACDF;ADKA;EACE,sBAAA;EACA,kEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACHF;ADMA;EACE,sBAAA;EACA,wEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACJF;ADOA;EACE,sBAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACLF;ADQA;EACE,sBAAA;EACA,qEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACNF;ADSA;EACE,sBAAA;EACA,oEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACPF;ADUA;EACE,sBAAA;EACA,sEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACRF;ADWA;EACE,sBAAA;EACA,kEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACTF;ADYA;EACE,sBAAA;EACA,uEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACVF;ADaA;EACE,sBAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACXF;ADeA;EACE,0BAAA;EACA,4EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACbF;ADgBA;EACE,0BAAA;EACA,kFAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACdF;ADiBA;EACE,0BAAA;EACA,6EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACfF;ADkBA;EACE,0BAAA;EACA,+EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;AChBF;ADmBA;EACE,0BAAA;EACA,8EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACjBF;ADoBA;EACE,0BAAA;EACA,gFAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;AClBF;ADqBA;EACE,0BAAA;EACA,4EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACnBF;ADsBA;EACE,0BAAA;EACA,iFAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACpBF;ADuBA;EACE,0BAAA;EACA,6EAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACrBF;AC3IA;;EAEE,UAAA;EACA,SAAA;AD6IF;;AC1IA;;;;;;EAME,SAAA;AD6IF;;AC1IA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;AD4IF;;ACzIA;EACE,6BAAA;EACA,YAAA;AD4IF;;AErKA;EAIE,8BAAA;EACA,8BAAA;EAGA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAMA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAIA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EA+BA,uCAAA;EACA,4CAAA;EAEA,+BAAA;EACA,uBAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;EAEA,mCAAA;EACA,gCAAA;AFwHF;;AG9MA;EACE,8BAAA;EACA,uBAAA;AHiNF;;AInNA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AJsNF;AIpNA;EACE,8BAAA;OAAA,kBAAA;AJsNF;;AInNA;EACE;IACE,sBAAA;EJsNF;AACF;AIpNA;EACE,+BAAA;AJsNF;;AKrOA;;;EAGE,uBAAA;EAEA,gBAAA;EACA,4CAAA;EACA,4CAAA;EAGA,8BAAA;ALqOF;;AK/NA;EACE,YAAA;ALkOF;;AK/NA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;ALkOF;AKhOE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;ALgOJ;AK7NE;EACE,UAAA;EACA,mBAAA;AL+NJ;;AK1NE;EACE,6BAAA;EACA,8BAAA;AL6NJ;AK3NE;EACE,mDAAA;AL6NJ;AK1NE;EACE,0BAAA;AL4NJ;AK1NI;EACE,8BAAA;AL4NN;AKzNI;EACE,aAAA;AL2NN;AKzNM;;EAEE,UAAA;AL2NR;AKxNM;EACE,oCAAA;AL0NR;AKvNM;EACE,aAAA;EACA,WAAA;ALyNR;AKvNQ;EACE,aAAA;EACA,WAAA;ALyNV;AKrNM;EACE,UAAA;ALuNR;AKtNQ;EACE,aAAA;ALwNV;AKvNU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;ALyNZ;AKtNU;EACE,oBAAA;EACA,WAAA;ALwNZ;AKlNI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;ALoNN;AKlNM;EACE,WAAA;ALoNR;AKlNM;EACE,UAAA;ALoNR;AKlNQ;EACE,UAAA;ALoNV;AKhNU;EACE,UAAA;ALkNZ;;AMrVA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ANuVF;AMrVE;EACE,4CAAA;EACA,iCAAA;EACA,4CAAA;ANuVJ;AMnVI;EACE,kCAAA;EACA,WAAA;EACA,YAAA;ANqVN;;AOtWA;EACE,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,yCAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;APyWF;;AOtWA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,qBAAA;EACA,gCAAA;EACA,mBAAA;APyWF;;AOtWA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;APyWF;;AOtWA;EACE,gBAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,UAAA;EACA,WAAA;APyWF;;AOtWA;EACE,aAAA;EACA,OAAA;EACA,gBAAA;APyWF;;AOtWA;EACE,OAAA;EACA,aAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;APyWF;;AOtWA;EACE,oBAAA;EACA,mBAAA;EACA,gBAAA;APyWF;;AOrWA;EACE,yCAAA;UAAA,iCAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;APwWF;AOtWE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,+CAAA;EACA,0CAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;APsWJ;AOnWE;EACE,UAAA;EACA,mBAAA;APqWJ;;AOhWA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;EACA,UAAA;EACA,uBAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,WAAA;EACA,sBAAA;APmWF;AOjWE;EACE,WAAA;APmWJ;AOhWE;EACE,cAAA;EACA,eAAA;APkWJ;;AO7VA;EACE,OAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;APgWF;;AO7VA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,gCAAA;EACA,mBAAA;EACA,gBAAA;APgWF;;AO5VA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;AP+VF;AO7VE;EACE,kBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;AP+VJ;;AO3VA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gCAAA;AP8VF;AO5VE;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,+BAAA;AP8VJ;;AO1VA;EACE,mBAAA;AP6VF;AO3VE;EACE,2BAAA;AP6VJ;;AOxVA;EACE,OAAA;EACA,SAAA;EACA,gBAAA;EACA,mBAAA;EACA,cAAA;EACA,8CAAA;EACA,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,qBAAA;AP2VF;;AOvVA;EACE,OAAA;EACA,WAAA;EACA,mBAAA;EACA,cAAA;EACA,YAAA;EACA,gBAAA;EACA,8CAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;AP0VF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index a8d9a73..56ba45f 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -58,10 +58,10 @@
-
@@ -109,7 +109,7 @@
-
+
-
+
-
@@ -177,10 +177,10 @@
-
@@ -274,6 +274,7 @@ import { ref, computed, watch } from 'vue'; import { useStylesheetStore } from '../stores/stylesheet'; import { usePopupPosition } from '../composables/usePopupPosition'; +import NumberInput from './ui/NumberInput.vue'; import Coloris from '@melloware/coloris'; import '@melloware/coloris/dist/coloris.css'; import hljs from 'highlight.js/lib/core'; diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue index eb4632c..0b309be 100644 --- a/src/components/PagePopup.vue +++ b/src/components/PagePopup.vue @@ -27,10 +27,10 @@ >
-
@@ -68,10 +68,10 @@ >
-
@@ -109,10 +109,10 @@ >
-
@@ -150,10 +150,10 @@ >
-
@@ -285,6 +285,7 @@ import { ref, computed, watch, onMounted } from 'vue'; import { useStylesheetStore } from '../stores/stylesheet'; import { usePopupPosition } from '../composables/usePopupPosition'; +import NumberInput from './ui/NumberInput.vue'; import Coloris from '@melloware/coloris'; import '@melloware/coloris/dist/coloris.css'; import hljs from 'highlight.js/lib/core'; diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue index a5753ab..acb355e 100644 --- a/src/components/editor/EditorPanel.vue +++ b/src/components/editor/EditorPanel.vue @@ -70,7 +70,7 @@ const activeTab = inject('activeTab'); position: fixed; top: 0; left: 0; - width: 35rem; + width: 38rem; height: 100vh; display: flex; flex-direction: column; @@ -119,7 +119,7 @@ nav { position: relative; left: -35rem; - padding: 4rem 1rem 1rem 1rem; + padding: 4rem 0; background-color: var(--color-panel-bg); box-shadow: -5px 0px 12px; @@ -134,5 +134,8 @@ nav { .tab-panel { height: 100%; overflow-y: auto; + overflow-x:hidden; + padding-right: 2em; + padding-left: 1em; } diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue index 06f417d..fc3db85 100644 --- a/src/components/editor/PageSettings.vue +++ b/src/components/editor/PageSettings.vue @@ -1,9 +1,11 @@ @@ -286,6 +289,7 @@ import { ref, computed, watch, onMounted, inject } from 'vue'; import { useStylesheetStore } from '../../stores/stylesheet'; import Coloris from '@melloware/coloris'; +import NumberInput from '../ui/NumberInput.vue'; import '@melloware/coloris/dist/coloris.css'; const stylesheetStore = useStylesheetStore(); diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue index 2a870ca..ef47630 100644 --- a/src/components/editor/TextSettings.vue +++ b/src/components/editor/TextSettings.vue @@ -1,6 +1,8 @@ diff --git a/src/components/ui/InputWithUnit.vue b/src/components/ui/InputWithUnit.vue index c8605a3..a87ae90 100644 --- a/src/components/ui/InputWithUnit.vue +++ b/src/components/ui/InputWithUnit.vue @@ -9,14 +9,13 @@ :step="step" @input="updateValue(Number($event.target.value))" /> -