styles infos

This commit is contained in:
Julie Blanc 2025-12-10 17:26:12 +01:00
parent cb7a43d564
commit e279941168
8 changed files with 71 additions and 17 deletions

View file

@ -10,9 +10,26 @@
}
.infos{
position: relative;
padding-left: 2.5ch;
.info-icon{
position: absolute;
left: 0px;
top: -5px;
svg{
width: 16px;
fill: var(--color-interface-400);
}
}
p{
font-size: 0.8rem;
color: var(--color-interface-400);
}
}
.container{
margin-top: var(--space-xs);
@ -35,6 +52,6 @@
margin-bottom: calc(var(--space-xs)*2);
font-size: 1rem;
font-weight: 600;
color: var(--color-800);
}
}

View file

@ -91,7 +91,6 @@ input[type="checkbox"] + label::before{
height: var(--size);
border-radius: var(--border-radius);
display: block;
background-color: red;
position: absolute;
top: 0px;
border: 1px solid var(--color-interface-400);
@ -186,6 +185,7 @@ input[type="checkbox"]:checked + label::before{
label{
font-weight: 400;
color: var(--color-txt);
text-decoration-color: var(--color-interface-300)!important;
}
}
}
@ -216,6 +216,11 @@ input[type="checkbox"]:checked + label::before{
}
}
.margins label{
color: var(--color-txt);
font-weight: normal;
text-decoration-color: var(--color-interface-300)!important;
}
@ -227,7 +232,7 @@ input[type="checkbox"]:checked + label::before{
// TOOLTIP ===============================================
.label-with-tooltip {
text-decoration: underline dotted 1px var(--color-200);
text-decoration: underline dotted 1px var(--color-400);
text-underline-offset: 2px;
cursor: help;
position: relative;

View file

@ -375,7 +375,6 @@ input[type=checkbox] + label::before {
height: var(--size);
border-radius: var(--border-radius);
display: block;
background-color: red;
position: absolute;
top: 0px;
border: 1px solid var(--color-interface-400);
@ -451,6 +450,7 @@ input[type=checkbox]:checked + label::before {
.field-font .checkbox-field label {
font-weight: 400;
color: var(--color-txt);
text-decoration-color: var(--color-interface-300) !important;
}
.field-text-size input[type=number] {
@ -476,9 +476,15 @@ input[type=checkbox]:checked + label::before {
margin-right: 2ch;
}
.margins label {
color: var(--color-txt);
font-weight: normal;
text-decoration-color: var(--color-interface-300) !important;
}
.label-with-tooltip {
-webkit-text-decoration: underline dotted 1px var(--color-200);
text-decoration: underline dotted 1px var(--color-200);
-webkit-text-decoration: underline dotted 1px var(--color-400);
text-decoration: underline dotted 1px var(--color-400);
text-underline-offset: 2px;
cursor: help;
position: relative;
@ -559,6 +565,19 @@ input[type=number] {
color: var(--color-800);
}
.settings-section .infos {
position: relative;
padding-left: 2.5ch;
}
.settings-section .infos .info-icon {
position: absolute;
left: 0px;
top: -5px;
}
.settings-section .infos .info-icon svg {
width: 16px;
fill: var(--color-interface-400);
}
.settings-section .infos p {
font-size: 0.8rem;
color: var(--color-interface-400);
}
@ -578,6 +597,7 @@ input[type=number] {
margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem;
font-weight: 600;
color: var(--color-800);
}
.unit-toggle button:not(.spinner-btn) {

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 6.5c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z" fill-rule="nonzero"/></svg>

After

Width:  |  Height:  |  Size: 593 B

View file

@ -127,12 +127,8 @@ nav {
overflow: hidden;
position: relative;
left: calc(var(--panel-w) * -1);
background-color: var(--color-panel-bg);
box-shadow: -5px 0px 12px;
transition: left 0.3s var(--curve);
pointer-events: all;
}
@ -142,10 +138,11 @@ nav {
}
.tab-panel {
height: calc(100% - var(--panel-nav-h)*2);
height: calc(100% - var(--panel-nav-h));
overflow-y: auto;
overflow-x: hidden;
padding: 0 2em;
padding-bottom: 20vh;
margin-top: var(--panel-nav-h);
}
</style>

View file

@ -2,10 +2,17 @@
<section class="settings-section" id="settings-section_page" data-color-type="page">
<h2>Réglage des pages</h2>
<div class="container">
<p class="infos">
<div class="infos">
<span class="info-icon">
<svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 6.5c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z" fill-rule="nonzero"/>
</svg>
</span>
<p>
Ces réglages s'appliquent à l'ensemble des pages du document. Vous
pouvez modifier ensuite les pages des gabarits indépendamment.
</p>
</div>
<div class="settings-subsection">
<div class="field field-simple">

View file

@ -3,10 +3,17 @@
<h2>Réglage du texte</h2>
<div class="container">
<p class="infos">
<div class="infos">
<span class="info-icon">
<svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 6.5c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z" fill-rule="nonzero"/>
</svg>
</span>
<p>
Ces réglages s'appliquent à l'ensemble des éléments du document. Vous
pouvez modifier ensuite les éléments indépendamment.
</p>
</div>
<!-- Police -->
<div class="settings-subsection">