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

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;