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

style actions-btn

Browse source
This commit is contained in:
Julie Blanc 2026-03-09 14:31:56 +01:00
parent c321a17f3e
commit 3dd1f032f9
12 changed files with 410 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

178
public/assets/css/src/_actions-btn.scss Normal file
View file

@ -0,0 +1,178 @@
#actions-btn{
position: fixed;
bottom: 0.5rem;
left: 0rem;
padding: 2em;
width: calc(var(--panel-w) - 4em);
z-index: 1000;
--color-bg: var(--color-panel-bg);
--color-text: var(--color-interface-800);
display: flex;
align-items: center;
// align-content: stretch;
gap: 1em;
// background-color: var(--color-panel-bg);
button{
color: var(--color-text);
// font-size: 1.2rem;
font-family: var(--sans-serif);
height: calc(var(--input-h)*1.25);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: 5px;
font-weight: 500;
background-color: var(--color-panel-bg);
// width: 14ch;
display: flex;
align-items: center;
// justify-content: center;
gap: 0.5ch;
margin-top: var(--space-xs);
cursor: pointer;
.icon{
position: relative;
top: 2px;
}
svg{
width: 20px;
height: 20px;
fill: var(--color-text);
}
&.has-changes {
outline-offset: 2px;
outline: 3px solid rgb(247, 98, 98);
}
}
.error-tooltip{
position: absolute;
top: 0em;
font-size: 10px;
max-width: 20ch;
color: rgb(247, 98, 98);
}
}
.last-saved{
position: absolute;
padding-top: 0.75em;
font-size: 10px;
max-width: 20ch;
color: var(--color-interface-400);
}
.save-button-wrapper {
// position: fixed;
// top: 2rem;
// right: 5rem;
// z-index: 1000;
// display: flex;
// flex-direction: column;
// align-items: flex-end;
// gap: 0.5rem;
}
// .save-btn {
// width: 3.5rem;
// height: 3.5rem;
// border-radius: 50%;
// border: none;
// background: var(--color-interface-300, #ccc);
// color: white;
// cursor: not-allowed;
// display: flex;
// align-items: center;
// justify-content: center;
// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
// transition: all 0.2s ease;
// position: relative;
// }
// .save-btn.has-changes {
// background: var(--color-page-highlight, #ff8a50);
// cursor: pointer;
// }
// .save-btn.has-changes:hover {
// transform: scale(1.1);
// box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
// }
// .save-btn.is-saving {
// cursor: wait;
// }
// .save-btn.has-error {
// background: #e74c3c;
// }
// .save-btn.save-success {
// background: #2ecc71;
// }
// .save-icon,
// .success-icon {
// width: 1.5rem;
// height: 1.5rem;
// }
.spinner {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border-top: 2px solid white;
border-right: 2px solid transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// .last-saved {
// font-size: 0.75rem;
// color: var(--color-interface-600, #666);
// background: white;
// padding: 0.25rem 0.5rem;
// border-radius: 0.25rem;
// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
// white-space: nowrap;
// }
// .error-tooltip {
// position: absolute;
// top: calc(100% + 0.5rem);
// right: 0;
// background: #e74c3c;
// color: white;
// padding: 0.5rem 0.75rem;
// border-radius: 0.25rem;
// font-size: 0.875rem;
// white-space: nowrap;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
// max-width: 15rem;
// word-wrap: break-word;
// white-space: normal;
// }

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

@ -1,60 +0,0 @@
.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);
&: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;
background-color: var(--color-panel-bg);
&.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;
// }
// }
}

26
public/assets/css/src/_panel-tabs.scss Normal file
View file

@ -0,0 +1,26 @@
#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;
background-color: var(--color-panel-bg);
&.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);
}
}
}

29
public/assets/css/src/_setting__section.scss
View file

@ -30,6 +30,35 @@
}
.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);
&: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;
}
}
}
}
.setting-disabled .setting__body {

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

@ -522,24 +522,6 @@ input[type=number] {
.number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900);
}
.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);
}
.unit-toggle button:not(.spinner-btn):not(.active):hover {
background-color: var(--color-interface-100);
}
.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;
@ -561,6 +543,80 @@ input[type=number] {
background-color: var(--color-interface-100);
}
#actions-btn {
position: fixed;
bottom: 0.5rem;
left: 0rem;
padding: 2em;
width: calc(var(--panel-w) - 4em);
z-index: 1000;
--color-bg: var(--color-panel-bg);
--color-text: var(--color-interface-800);
display: flex;
align-items: center;
gap: 1em;
}
#actions-btn button {
color: var(--color-text);
font-family: var(--sans-serif);
height: calc(var(--input-h) * 1.25);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: 5px;
font-weight: 500;
background-color: var(--color-panel-bg);
display: flex;
align-items: center;
gap: 0.5ch;
margin-top: var(--space-xs);
cursor: pointer;
}
#actions-btn button .icon {
position: relative;
top: 2px;
}
#actions-btn button svg {
width: 20px;
height: 20px;
fill: var(--color-text);
}
#actions-btn button.has-changes {
outline-offset: 2px;
outline: 3px solid rgb(247, 98, 98);
}
#actions-btn .error-tooltip {
position: absolute;
top: 0em;
font-size: 10px;
max-width: 20ch;
color: rgb(247, 98, 98);
}
.last-saved {
position: absolute;
padding-top: 0.75em;
font-size: 10px;
max-width: 20ch;
color: var(--color-interface-400);
}
.spinner {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border-top: 2px solid white;
border-right: 2px solid transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.toggle-setting {
position: absolute;
opacity: 0;
@ -762,6 +818,23 @@ input[type=number] {
grid-column: 2;
padding-top: 4px;
}
.setting__section .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);
}
.setting__section .unit-toggle button:not(.spinner-btn):not(.active):hover {
background-color: var(--color-interface-100);
}
.setting__section .unit-toggle button:not(.spinner-btn).active {
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
.setting-disabled .setting__body {
opacity: 0.4;

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

File diff suppressed because one or more lines are too long

3
public/assets/css/style.scss
View file

@ -6,7 +6,8 @@
@use "src/_print-styles.scss" as *;
@use "src/_panel-settings.scss" as *;
@use "src/_forms.scss" as *;
@use "src/_buttons.scss" as *;
@use "src/_panel-tabs.scss" as *;
@use "src/_actions-btn.scss" as *;
@use "src/_toggle-setting.scss" as *;
@use "src/_settings-popup.scss" as *;
@use "src/_setting__section.scss" as *;

53
public/content/cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
View file

@ -18,7 +18,58 @@ Intro: <p>Ah le Japon... Quel beau pays où nous trouvons des créatures en tout
----
Customcss:
Customcss:
@page {
size: A5;
margin: 16mm 16mm 16mm 16mm;
}
body {
font-family: sans-serif;
color: rgb(0, 0, 0);
}
p {
font-size: 12px;
line-height: 18px;
}
h1 {
font-size: 38px;
line-height: 38px;
background: rgba(255, 255, 255, 0.521);
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
margin-top: 60px;
margin-bottom: 30px;
font-family: "Source Code Pro";
font-style: normal;
color: rgb(237, 13, 13);
}
em {
font-style: italic;
}
i {
font-style: italic;
}
strong {
font-weight: bold;
}
b {
font-weight: bold;
}
a {
color: #0000ee;
text-decoration-line: underline;
}
----