extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-30 14:21:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form input padding to better fit border radius

Browse Source
This commit is contained in:
zombieFox
2020-07-28 08:46:40 +01:00
parent 614ada97a6
commit 016a58df48
7 changed files with 387 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -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": {

2
package.json
View File

@ -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": {

2
src/css/button.css
View File

@ -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;

14
src/css/form.css
View File

@ -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);

2
src/js/version.js
View File

@ -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
src/manifest.json
View File

@ -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"

75
src/style-guide.html
View File

@ -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>