This commit is contained in:
isUnknown 2025-12-11 13:38:27 +01:00
parent 06aef5beb3
commit 4ae4a6d509
10 changed files with 68 additions and 43 deletions

View file

@ -1,11 +1,5 @@
.settings-section { .settings-section {
margin: var(--space-m) 0;
margin-top: 3em;
// .cons
h2 { h2 {
margin-bottom: var(--space); margin-bottom: var(--space);
@ -14,10 +8,9 @@
font-size: 1.4rem; font-size: 1.4rem;
border-bottom: 1px solid var(--color-200); border-bottom: 1px solid var(--color-200);
color: var(--color-800); color: var(--color-800);
} }
.infos{ .infos {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-interface-400); color: var(--color-interface-400);
} }
@ -30,14 +23,10 @@
padding: var(--space-xs) 0; padding: var(--space-xs) 0;
h3 { h3 {
margin-top: calc(var(--space-xs)*1.5); margin-top: calc(var(--space-xs) * 1.5);
margin-bottom: calc(var(--space-xs)*2); margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
} }
} }

View file

@ -5,7 +5,9 @@ input[type="number"] {
border: 1px solid var(--color-interface-200); border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100); background-color: var(--color-interface-100);
font-family: var(--sans-serif); font-family: var(--sans-serif);
color: var(--color-txt);
font-size: 1rem; font-size: 1rem;
padding-left: 0.5ch;
// min-width: var(--input-w); // min-width: var(--input-w);
// width: 100%; // width: 100%;
// padding: 0 1ch; // padding: 0 1ch;
@ -80,10 +82,22 @@ input[type="number"] {
label{ label{
font-weight: 400; font-weight: 400;
margin-left: 0.75ch; margin-left: 0.75ch;
color: var(--color-txt);
} }
} }
} }
.field-text-size{
input[type="number"]{
width: var(--input-w-small);
padding-left: 0.75ch;
}
input[type="range"]{
flex-grow: 2;
flex-shrink: 2;
}
}
.field-margin, .field-size{ .field-margin, .field-size{
display: inline-grid; display: inline-grid;
width: calc(50% - 1ch); width: calc(50% - 1ch);
@ -188,9 +202,13 @@ input[type="number"] {
top: 0; top: 0;
button{ button{
height: calc(var(--input-h)*0.6); height: calc(var(--input-h)*0.5);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
svg{
width: 10px;
height: auto;
}
svg path{ svg path{
fill: var(--color-interface-600); fill: var(--color-interface-600);
} }
@ -202,8 +220,9 @@ input[type="number"] {
} }
.spinner-down{ .spinner-down{
svg{ svg{
position: relative;
top: -2px; // position: relative;
// top: -2px;
} }
} }

View file

@ -9,7 +9,7 @@
--color-txt: var(--color-interface-800); --color-txt: var(--color-interface-900);
--color-panel-bg: var(--color-interface-050); --color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50; --color-page-highlight: #ff8a50;
@ -20,6 +20,8 @@
--space-xs: 0.5rem; --space-xs: 0.5rem;
--space-s: 1rem; --space-s: 1rem;
--space: 1.5rem; --space: 1.5rem;
--space-m: 2rem;
--space-big: 3em;
--curve: cubic-bezier(0.86, 0, 0.07, 1); --curve: cubic-bezier(0.86, 0, 0.07, 1);
@ -34,4 +36,5 @@
font-size: 14px; font-size: 14px;
--panel-w: 540px; --panel-w: 540px;
--panel-nav-h: 60px;
} }

View file

@ -223,7 +223,7 @@ img {
:root { :root {
--color-browngray-050: #f5f3f0; --color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba; --color-browngray-200: #d0c4ba;
--color-txt: var(--color-interface-800); --color-txt: var(--color-interface-900);
--color-panel-bg: var(--color-interface-050); --color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50; --color-page-highlight: #ff8a50;
--color-purple: #7136ff; --color-purple: #7136ff;
@ -231,6 +231,8 @@ img {
--space-xs: 0.5rem; --space-xs: 0.5rem;
--space-s: 1rem; --space-s: 1rem;
--space: 1.5rem; --space: 1.5rem;
--space-m: 2rem;
--space-big: 3em;
--curve: cubic-bezier(0.86, 0, 0.07, 1); --curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: "DM Sans", sans-serif; --sans-serif: "DM Sans", sans-serif;
--mono: "Inconsolata", monospace; --mono: "Inconsolata", monospace;
@ -240,6 +242,7 @@ img {
--label-w: 18ch; --label-w: 18ch;
font-size: 14px; font-size: 14px;
--panel-w: 540px; --panel-w: 540px;
--panel-nav-h: 60px;
} }
body { body {
@ -273,7 +276,9 @@ input[type=number] {
border: 1px solid var(--color-interface-200); border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100); background-color: var(--color-interface-100);
font-family: var(--sans-serif); font-family: var(--sans-serif);
color: var(--color-txt);
font-size: 1rem; font-size: 1rem;
padding-left: 0.5ch;
} }
.field { .field {
@ -333,6 +338,16 @@ input[type=number] {
.field-font .field-checkbox label { .field-font .field-checkbox label {
font-weight: 400; font-weight: 400;
margin-left: 0.75ch; margin-left: 0.75ch;
color: var(--color-txt);
}
.field-text-size input[type=number] {
width: var(--input-w-small);
padding-left: 0.75ch;
}
.field-text-size input[type=range] {
flex-grow: 2;
flex-shrink: 2;
} }
.field-margin, .field-size { .field-margin, .field-size {
@ -421,23 +436,22 @@ input[type=number] {
top: 0; top: 0;
} }
.number-input .spinner-buttons button { .number-input .spinner-buttons button {
height: calc(var(--input-h) * 0.6); height: calc(var(--input-h) * 0.5);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
} }
.number-input .spinner-buttons button svg {
width: 10px;
height: auto;
}
.number-input .spinner-buttons button svg path { .number-input .spinner-buttons button svg path {
fill: var(--color-interface-600); fill: var(--color-interface-600);
} }
.number-input .spinner-buttons button:hover svg path { .number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900); fill: var(--color-interface-900);
} }
.number-input .spinner-buttons .spinner-down svg {
position: relative;
top: -2px;
}
.settings-section { .settings-section {
margin-top: 3em; margin: var(--space-m) 0;
} }
.settings-section h2 { .settings-section h2 {
margin-bottom: var(--space); margin-bottom: var(--space);

File diff suppressed because one or more lines are too long

View file

@ -16,7 +16,7 @@ return array(
'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'), 'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'), 'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'), 'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src', $baseDir . '/kirby/src'), 'Kirby\\' => array($baseDir . '/kirby/src', $vendorDir . '/getkirby/composer-installer/src'),
'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'), 'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'), 'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
); );

View file

@ -96,8 +96,8 @@ class ComposerStaticInit0b7fb803e22a45eb87e24172337208aa
), ),
'Kirby\\' => 'Kirby\\' =>
array ( array (
0 => __DIR__ . '/..' . '/getkirby/composer-installer/src', 0 => __DIR__ . '/../..' . '/kirby/src',
1 => __DIR__ . '/../..' . '/kirby/src', 1 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
), ),
'Composer\\Semver\\' => 'Composer\\Semver\\' =>
array ( array (

View file

@ -1,9 +1,9 @@
<?php return array( <?php return array(
'root' => array( 'root' => array(
'name' => 'getkirby/plainkit', 'name' => 'getkirby/plainkit',
'pretty_version' => '5.1.4', 'pretty_version' => 'dev-main',
'version' => '5.1.4.0', 'version' => 'dev-main',
'reference' => null, 'reference' => '76274fff04c54514230ad2bb0aca362139618411',
'type' => 'project', 'type' => 'project',
'install_path' => __DIR__ . '/../../', 'install_path' => __DIR__ . '/../../',
'aliases' => array(), 'aliases' => array(),
@ -65,9 +65,9 @@
'dev_requirement' => false, 'dev_requirement' => false,
), ),
'getkirby/plainkit' => array( 'getkirby/plainkit' => array(
'pretty_version' => '5.1.4', 'pretty_version' => 'dev-main',
'version' => '5.1.4.0', 'version' => 'dev-main',
'reference' => null, 'reference' => '76274fff04c54514230ad2bb0aca362139618411',
'type' => 'project', 'type' => 'project',
'install_path' => __DIR__ . '/../../', 'install_path' => __DIR__ . '/../../',
'aliases' => array(), 'aliases' => array(),

View file

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

View file

@ -34,7 +34,7 @@
<!-- Taille du texte --> <!-- Taille du texte -->
<div class="settings-subsection"> <div class="settings-subsection">
<div class="field"> <div class="field field-text-size">
<label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label> <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<InputWithUnit <InputWithUnit
v-model="fontSize" v-model="fontSize"