common style for options number inputs

This commit is contained in:
zadam 2023-07-14 18:05:19 +02:00
parent 3d0c3652ce
commit 3adab07ddb
12 changed files with 22 additions and 15 deletions

View file

@ -43,7 +43,7 @@ const TPL = `
<label>Size</label>
<div class="input-group">
<input type="number" class="main-font-size form-control" min="50" max="200" step="10"/>
<input type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
@ -63,7 +63,7 @@ const TPL = `
<label>Size</label>
<div class="input-group">
<input type="number" class="tree-font-size form-control" min="50" max="200" step="10"/>
<input type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
@ -83,7 +83,7 @@ const TPL = `
<label>Size</label>
<div class="input-group">
<input type="number" class="detail-font-size form-control" min="50" max="200" step="10"/>
<input type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
@ -103,7 +103,7 @@ const TPL = `
<label>Size</label>
<div class="input-group">
<input type="number" class="monospace-font-size form-control" min="50" max="200" step="10"/>
<input type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>

View file

@ -10,7 +10,7 @@ const TPL = `
<div class="form-group row">
<div class="col-4">
<label>Max content width in pixels</label>
<input type="number" min="200" step="10" class="max-content-width form-control">
<input type="number" min="200" step="10" class="max-content-width form-control options-number-input">
</div>
</div>

View file

@ -6,7 +6,7 @@ const TPL = `
<div class="options-section">
<h4>Zoom factor (desktop build only)</h4>
<input type="number" class="zoom-factor-select form-control" min="0.3" max="2.0" step="0.1"/>
<input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
<p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
</div>`;

View file

@ -8,7 +8,7 @@ const TPL = `
<div class="form-group">
<label>Automatic read-only size (code notes)</label>
<input class="auto-readonly-size-code form-control" type="number" min="0">
<input class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
</div>
</div>`;

View file

@ -26,12 +26,12 @@ const TPL = `
<div class="image-compression-enabled-wraper">
<div class="form-group">
<label>Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
<input class="image-max-width-height form-control" type="number" min="1">
<input class="image-max-width-height form-control options-number-input" type="number" min="1">
</div>
<div class="form-group">
<label>JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
<input class="image-jpeg-quality form-control" min="10" max="100" type="number">
<input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
</div>
</div>
</div>

View file

@ -10,7 +10,7 @@ const TPL = `
<div class="form-group">
<label>Erase attachments after X seconds of not being used in its note</label>
<input class="erase-unused-attachments-after-time-in-seconds form-control" type="number" min="0">
<input class="erase-unused-attachments-after-time-in-seconds form-control options-number-input" type="number" min="0">
</div>
<p>You can also trigger erasing manually (without considering the timeout defined above):</p>

View file

@ -13,7 +13,7 @@ const TPL = `
<div class="form-group">
<label>Erase notes after X seconds</label>
<input class="erase-entities-after-time-in-seconds form-control" type="number" min="0">
<input class="erase-entities-after-time-in-seconds form-control options-number-input" type="number" min="0">
</div>
<p>You can also trigger erasing manually (without considering the timeout defined above):</p>

View file

@ -8,7 +8,7 @@ const TPL = `
<div class="form-group">
<label>Note revision snapshot time interval (in seconds)</label>
<input class="revision-snapshot-time-interval-in-seconds form-control" type="number" min="10">
<input class="revision-snapshot-time-interval-in-seconds form-control options-number-input" type="number" min="10">
</div>
</div>`;

View file

@ -41,7 +41,7 @@ const TPL = `
<div class="form-group">
<label>Protected session timeout (in seconds)</label>
<input class="protected-session-timeout-in-seconds form-control" type="number" min="60">
<input class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60">
</div>
</div>`;

View file

@ -7,7 +7,7 @@ const TPL = `
Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
<div class="form-group">
<input type="number" class="min-toc-headings form-control" min="0" max="9999999999999999" step="1" style="text-align: right;"/>
<input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
</div>
<p>You can also use this option to effectively disable TOC by setting a very high number.</p>

View file

@ -8,7 +8,7 @@ const TPL = `
<div class="form-group">
<label>Automatic read-only size (text notes)</label>
<input class="auto-readonly-size-text form-control" type="number" min="0" style="text-align: right;">
<input class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
</div>
</div>`;

View file

@ -1036,6 +1036,13 @@ button.close:hover {
margin-bottom: 10px;
}
.options-number-input {
text-align: right;
/* overriding settings from .form-control */
width: 10em !important;
flex-grow: 0 !important;
}
textarea {
cursor: auto;
}