mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-30 14:21:05 +02:00
[design] improve form input padding to better fit border radius
This commit is contained in:
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"name": "nightTab",
|
||||||
"version": "5.72.0",
|
"version": "5.73.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"name": "nightTab",
|
||||||
"version": "5.72.0",
|
"version": "5.73.0",
|
||||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -4,7 +4,7 @@ input[type="button"],
|
|||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
background-color: rgb(var(--button-background));
|
background-color: rgb(var(--button-background));
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--button-text));
|
color: rgb(var(--button-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
@ -118,7 +118,7 @@ select {
|
|||||||
0.5em 0.375em,
|
0.5em 0.375em,
|
||||||
0.5em 0.375em;
|
0.5em 0.375em;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
padding: 0 3em 0 1em;
|
padding: 0 3em 0 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-label));
|
color: rgb(var(--form-label));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
@ -176,7 +176,7 @@ select:disabled:active {
|
|||||||
/* textarea */
|
/* textarea */
|
||||||
textarea {
|
textarea {
|
||||||
background-color: rgb(var(--form-input-background));
|
background-color: rgb(var(--form-input-background));
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-input-text));
|
color: rgb(var(--form-input-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
@ -252,7 +252,7 @@ input[type="search"],
|
|||||||
input[type="tel"],
|
input[type="tel"],
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
background-color: rgb(var(--form-input-background));
|
background-color: rgb(var(--form-input-background));
|
||||||
padding: 0 1em;
|
padding: 0 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-input-text));
|
color: rgb(var(--form-input-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
@ -1059,7 +1059,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
.form-input-button input[type="color"]+label,
|
.form-input-button input[type="color"]+label,
|
||||||
.form-input-button input[type="file"]+label {
|
.form-input-button input[type="file"]+label {
|
||||||
background-color: rgb(var(--button-background));
|
background-color: rgb(var(--button-background));
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--button-text));
|
color: rgb(var(--button-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
@ -1758,7 +1758,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
|
|
||||||
.form-group-text {
|
.form-group-text {
|
||||||
background-color: rgb(var(--form-group-text-background));
|
background-color: rgb(var(--form-group-text-background));
|
||||||
padding: 0 1em;
|
padding: 0 1.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-input-text));
|
color: rgb(var(--form-input-text));
|
||||||
min-width: 4em;
|
min-width: 4em;
|
||||||
@ -1899,7 +1899,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
.form-dropdown-menu {
|
.form-dropdown-menu {
|
||||||
background-color: rgb(var(--form-dropdown-background));
|
background-color: rgb(var(--form-dropdown-background));
|
||||||
border-radius: var(--theme-radius);
|
border-radius: var(--theme-radius);
|
||||||
padding: 0.5em 0;
|
padding: 0.75em 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 12em;
|
min-width: 12em;
|
||||||
@ -1954,7 +1954,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
|
|
||||||
/* form feedback */
|
/* form feedback */
|
||||||
.form-feedback {
|
.form-feedback {
|
||||||
padding: 0.5em 1.5em 0.5em 1em;
|
padding: 0.75em 1.25em;
|
||||||
background-color: rgb(var(--form-feedback-background));
|
background-color: rgb(var(--form-feedback-background));
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
border-left-width: calc(var(--layout-line-width) * 2);
|
border-left-width: calc(var(--layout-line-width) * 2);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
var version = (function() {
|
var version = (function() {
|
||||||
|
|
||||||
var current = "5.72.0";
|
var current = "5.73.0";
|
||||||
|
|
||||||
var name = "Jaded Raven";
|
var name = "Jaded Raven";
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
"name": "nightTab",
|
"name": "nightTab",
|
||||||
"short_name": "nightTab",
|
"short_name": "nightTab",
|
||||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||||
"version": "5.72.0",
|
"version": "5.73.0",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"chrome_url_overrides": {
|
"chrome_url_overrides": {
|
||||||
"newtab": "index.html"
|
"newtab": "index.html"
|
||||||
|
@ -38,6 +38,23 @@
|
|||||||
<link rel="stylesheet" href="css/fontawesome.css">
|
<link rel="stylesheet" href="css/fontawesome.css">
|
||||||
<!-- end-css-block -->
|
<!-- end-css-block -->
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
--layout-width: 90%;
|
||||||
|
--layout-spacer: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-guide {
|
||||||
|
margin: var(--layout-spacer) 0;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: calc(var(--layout-spacer) / 2);
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-guide-controls {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--layout-spacer) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
.style-guide-icon {
|
.style-guide-icon {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
@ -48,7 +65,11 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main class="layout my-5">
|
<main class="layout style-guide">
|
||||||
|
|
||||||
|
<div class="style-guide-left">
|
||||||
|
|
||||||
|
<fieldset class="style-guide-controls">
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<button class="button style-guide-control disable-on" tabindex="1">Disable</button>
|
<button class="button style-guide-control disable-on" tabindex="1">Disable</button>
|
||||||
@ -69,7 +90,13 @@
|
|||||||
<label for="radius" class="style-guide-control">Radius</label>
|
<label for="radius" class="style-guide-control">Radius</label>
|
||||||
<input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
|
<input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="style-guide-right">
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<span class="style-guide-icon icon-add"></span>
|
<span class="style-guide-icon icon-add"></span>
|
||||||
<span class="style-guide-icon icon-arrow-back"></span>
|
<span class="style-guide-icon icon-arrow-back"></span>
|
||||||
<span class="style-guide-icon icon-arrow-downward"></span>
|
<span class="style-guide-icon icon-arrow-downward"></span>
|
||||||
@ -99,7 +126,9 @@
|
|||||||
<span class="style-guide-icon icon-undo"></span>
|
<span class="style-guide-icon icon-undo"></span>
|
||||||
<span class="style-guide-icon icon-redo"></span>
|
<span class="style-guide-icon icon-redo"></span>
|
||||||
<span class="style-guide-icon icon-replay"></span>
|
<span class="style-guide-icon icon-replay"></span>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-inline">
|
<div class="form-inline">
|
||||||
<button class="button" tabindex="1">Button</button>
|
<button class="button" tabindex="1">Button</button>
|
||||||
@ -114,7 +143,9 @@
|
|||||||
<button class="button button-large" tabindex="1">Button large</button>
|
<button class="button button-large" tabindex="1">Button large</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-inline">
|
<div class="form-inline">
|
||||||
<div class="form-input-button">
|
<div class="form-input-button">
|
||||||
@ -147,7 +178,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-group form-group-nested-button">
|
<div class="form-group form-group-nested-button">
|
||||||
<div class="form-input-button">
|
<div class="form-input-button">
|
||||||
@ -212,7 +245,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-inline">
|
<div class="form-inline">
|
||||||
<div class="form-input-button input-color-dot form-input-button-line">
|
<div class="form-input-button input-color-dot form-input-button-line">
|
||||||
@ -246,7 +281,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-inline form-inline-spacer">
|
<div class="form-inline form-inline-spacer">
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
@ -335,7 +372,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-text">Input Text</label>
|
<label for="style-guide-input-text">Input Text</label>
|
||||||
<input id="style-guide-input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Placeholder" tabindex="1">
|
<input id="style-guide-input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Placeholder" tabindex="1">
|
||||||
@ -360,6 +399,9 @@
|
|||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-form-group-1">Form Group</label>
|
<label for="style-guide-form-group-1">Form Group</label>
|
||||||
<div class="form-group form-group-block mb-0">
|
<div class="form-group form-group-block mb-0">
|
||||||
@ -374,12 +416,21 @@
|
|||||||
<div class="form-group-text" tabindex="1">Form Group Text</div>
|
<div class="form-group-text" tabindex="1">Form Group Text</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-feedback">
|
<div class="form-feedback">
|
||||||
<p class="muted">Form feedback.</p>
|
<p class="muted">Form feedback.</p>
|
||||||
<p class="muted small">With some small text.</p>
|
<p class="muted small">With some small text.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="js/helper.js"></script>
|
<script src="js/helper.js"></script>
|
||||||
@ -476,6 +527,10 @@
|
|||||||
renderShade("--theme-shade-positive-", i, rgb);
|
renderShade("--theme-shade-positive-", i, rgb);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
accent: function() {
|
||||||
|
var color = helper.convertColor.hex.rgb(helper.e(".theme-accent").value);
|
||||||
|
helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -501,13 +556,13 @@
|
|||||||
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-bottom");
|
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-bottom");
|
||||||
}, false);
|
}, false);
|
||||||
helper.e(".theme-accent").addEventListener("change", function() {
|
helper.e(".theme-accent").addEventListener("change", function() {
|
||||||
var color = helper.convertColor.hex.rgb(this.value);
|
theme.render.accent();
|
||||||
helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
|
||||||
}, false);
|
}, false);
|
||||||
helper.e(".theme-color").addEventListener("change", function() {
|
helper.e(".theme-color").addEventListener("change", function() {
|
||||||
theme.render.color.shade();
|
theme.render.color.shade();
|
||||||
}, false);
|
}, false);
|
||||||
theme.render.color.shade();
|
theme.render.color.shade();
|
||||||
|
theme.render.accent();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
Reference in New Issue
Block a user