styles infos
This commit is contained in:
Julie Blanc
parent
cb7a43d564
commit
e279941168
8 changed files with 71 additions and 17 deletions
|
|
@ -10,8 +10,25 @@
|
|||
}
|
||||
|
||||
.infos{
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-interface-400);
|
||||
|
||||
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{
|
||||
|
|
@ -35,6 +52,6 @@
|
|||
margin-bottom: calc(var(--space-xs)*2);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--color-800);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
1
public/assets/svg/info.svg
Normal file
1
public/assets/svg/info.svg
Normal 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 |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Police -->
|
||||
<div class="settings-subsection">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue