From 716396fb6e12d0793d96e4f0d950485000be398b Mon Sep 17 00:00:00 2001 From: Kombie Date: Mon, 13 Jan 2020 01:33:57 +0000 Subject: [PATCH] [design] improve form group spacing --- src/css/button.css | 10 +- src/css/form.css | 488 +++++---- src/css/link.css | 6 +- src/css/menu.css | 9 - src/css/theme.css | 3 - src/css/typography.css | 4 - src/css/variables.css | 1 + src/index.html | 2249 ++++++++++++++++++++++------------------ src/js/control.js | 156 ++- src/js/header.js | 36 +- src/js/link.js | 148 ++- src/js/theme.js | 29 +- src/style-guide.html | 227 ++-- 13 files changed, 1827 insertions(+), 1539 deletions(-) diff --git a/src/css/button.css b/src/css/button.css index ce791cdd..047fd13d 100755 --- a/src/css/button.css +++ b/src/css/button.css @@ -5,7 +5,7 @@ input[type="reset"], input[type="submit"] { background-color: rgb(var(--button-background)); padding: 0.25em 1em; - margin: 0 0 1em 0; + margin: 0; color: rgb(var(--button-text)); font-size: 1em; font-family: var(--theme-font-ui-name); @@ -207,11 +207,3 @@ button [class*=" button-"]:last-child, background-color: transparent; color: transparent; } - -.button-wrap { - padding: 0.5em 0; - position: relative; - width: 100%; - display: flex; - flex-direction: row; -} diff --git a/src/css/form.css b/src/css/form.css index f5a4f0e3..dcbaaf1e 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -1,3 +1,76 @@ +/* form variants */ +.form-wrap, +.form-helper { + position: relative; + width: 100%; + display: block; +} + +.form-wrap:not(:first-child) { + margin-top: var(--form-wrap-space); +} + +.form-wrap:not(:last-child) { + margin-bottom: var(--form-wrap-space); +} + +.form-wrap-hide-space:not(:first-child), +.form-wrap-hide-space:not(:last-child) { + margin-top: calc(var(--form-wrap-space) * -1); + margin-bottom: 0; +} + +.form-helper:not(:first-child) { + margin-top: calc(var(--form-wrap-space) / 2); +} + +.form-helper:not(:last-child) { + margin-bottom: calc(var(--form-wrap-space) / 2); +} + +.form-indent { + margin-left: calc(var(--form-wrap-space) * 3); +} + +.form-inline { + margin: calc(calc(var(--form-wrap-space) / 2) * -1); + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; +} + +.form-inline>*, +.form-inline>.form-wrap:not(:first-child), +.form-inline>.form-wrap:not(:last-child) { + margin: calc(var(--form-wrap-space) / 2); + flex-grow: 0; + width: initial; + display: inline-block; +} + +.form-inline-spacer>*.form-wrap:not(:last-child) { + margin-right: calc(var(--form-wrap-space) * 3); +} + +.form-inline-space-between { + justify-content: space-between; +} + +.form-inline-space-around { + justify-content: space-around; +} + +.form-sticky { + background-color: rgb(var(--theme-color-01)); + margin: -1.5em -1em 0 -1em; + padding: 1.5em 1em 1em 1em; + position: sticky; + top: 0; + z-index: 2; +} + /* label */ label { padding: 0; @@ -5,10 +78,11 @@ label { margin-bottom: 0; font-size: 1em; display: block; + transition: color var(--layout-timing-extra-fast); } label:not(:only-child):not(:last-child) { - padding-bottom: 0.5em; + padding-bottom: calc(var(--form-wrap-space) / 2); } label.disabled { @@ -29,7 +103,7 @@ select { 0.5em 0.375em; background-repeat: no-repeat; padding: 0 3em 0 1em; - margin: 0 0 1em 0; + margin: 0; color: rgb(var(--form-label)); font-size: 1em; font-family: var(--theme-font-ui-name); @@ -92,7 +166,7 @@ select:disabled:active { textarea { background-color: rgb(var(--form-input-background)); padding: 0.25em 1em; - margin: 0 0 1em 0; + margin: 0; color: rgb(var(--form-input-text)); font-size: 1em; line-height: 1.6; @@ -173,7 +247,7 @@ input[type="tel"], input[type="text"] { background-color: rgb(var(--form-input-background)); padding: 0 1em; - margin: 0 0 1em 0; + margin: 0; color: rgb(var(--form-input-text)); font-size: 1em; font-family: var(--theme-font-ui-name); @@ -539,7 +613,7 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after { input[type="color"] { background-color: transparent; padding: 0; - margin: 0 0 1em 0; + margin: 0; width: 100%; min-width: 3em; height: 2.5em; @@ -830,38 +904,26 @@ input[type="range"]:disabled::-moz-range-progress { } /* form helper */ -.form-helper { - padding: 0.5em 0; +.form-helper-item { + font-size: 0.8em; color: rgb(var(--form-helper)); transition: color var(--layout-timing-extra-fast); } -.form-helper.disabled { +.form-helper-item.disabled { color: rgb(var(--form-helper-disabled)); } -.form-helper:not(:last-child) { - margin-bottom: 0; -} - -/* input variants */ -.input-wrap { - padding: 0.5em 0; +/* form input button */ +.form-input-button { position: relative; - width: 100%; - display: block; -} - -.input-button-inline { - width: initial; display: inline-block; } -/* input button */ -.input-button input[type="checkbox"]+label, -.input-button input[type="radio"]+label, -.input-button input[type="color"]+label, -.input-button input[type="file"]+label { +.form-input-button input[type="checkbox"]+label, +.form-input-button input[type="radio"]+label, +.form-input-button input[type="color"]+label, +.form-input-button input[type="file"]+label { background-color: rgb(var(--button-background)); padding: 0.25em 1em; margin: 0; @@ -888,24 +950,24 @@ input[type="range"]:disabled::-moz-range-progress { transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast); } -.input-button input[type="checkbox"]:focus+label, -.input-button input[type="checkbox"]:hover+label, -.input-button input[type="radio"]:focus+label, -.input-button input[type="radio"]:hover+label, -.input-button input[type="color"]:focus+label, -.input-button input[type="color"]:hover+label, -.input-button input[type="file"]:focus+label, -.input-button input[type="file"]:hover+label { +.form-input-button input[type="checkbox"]:focus+label, +.form-input-button input[type="checkbox"]:hover+label, +.form-input-button input[type="radio"]:focus+label, +.form-input-button input[type="radio"]:hover+label, +.form-input-button input[type="color"]:focus+label, +.form-input-button input[type="color"]:hover+label, +.form-input-button input[type="file"]:focus+label, +.form-input-button input[type="file"]:hover+label { background-color: rgb(var(--button-background-focus-hover)); color: rgb(var(--button-text-focus-hover)); outline: none; text-decoration: none; } -.input-button input[type="checkbox"]:active+label, -.input-button input[type="radio"]:active+label, -.input-button input[type="color"]:active+label, -.input-button input[type="file"]:active+label { +.form-input-button input[type="checkbox"]:active+label, +.form-input-button input[type="radio"]:active+label, +.form-input-button input[type="color"]:active+label, +.form-input-button input[type="file"]:active+label { background-color: rgb(var(--button-background-active)); color: rgb(var(--button-text-active)); outline: none; @@ -913,10 +975,10 @@ input[type="range"]:disabled::-moz-range-progress { transition: none; } -.input-button input[type="checkbox"]:checked+label, -.input-button input[type="radio"]:checked+label, -.input-button input[type="color"]:checked+label, -.input-button input[type="file"]:checked+label { +.form-input-button input[type="checkbox"]:checked+label, +.form-input-button input[type="radio"]:checked+label, +.form-input-button input[type="color"]:checked+label, +.form-input-button input[type="file"]:checked+label { background-color: rgb(var(--button-background-active)); color: rgb(var(--button-text-active)); outline: none; @@ -924,37 +986,37 @@ input[type="range"]:disabled::-moz-range-progress { transition: none; } -.input-button input[type="checkbox"]:disabled+label, -.input-button input[type="checkbox"]:disabled:hover+label, -.input-button input[type="checkbox"]:disabled:focus+label, -.input-button input[type="checkbox"]:disabled:active+label, -.input-button input[type="radio"]:disabled+label, -.input-button input[type="radio"]:disabled:hover+label, -.input-button input[type="radio"]:disabled:focus+label, -.input-button input[type="radio"]:disabled:active+label, -.input-button input[type="color"]:disabled+label, -.input-button input[type="color"]:disabled:hover+label, -.input-button input[type="color"]:disabled:focus+label, -.input-button input[type="color"]:disabled:active+label, -.input-button input[type="file"]:disabled+label, -.input-button input[type="file"]:disabled:hover+label, -.input-button input[type="file"]:disabled:focus+label, -.input-button input[type="file"]:disabled:active+label { +.form-input-button input[type="checkbox"]:disabled+label, +.form-input-button input[type="checkbox"]:disabled:hover+label, +.form-input-button input[type="checkbox"]:disabled:focus+label, +.form-input-button input[type="checkbox"]:disabled:active+label, +.form-input-button input[type="radio"]:disabled+label, +.form-input-button input[type="radio"]:disabled:hover+label, +.form-input-button input[type="radio"]:disabled:focus+label, +.form-input-button input[type="radio"]:disabled:active+label, +.form-input-button input[type="color"]:disabled+label, +.form-input-button input[type="color"]:disabled:hover+label, +.form-input-button input[type="color"]:disabled:focus+label, +.form-input-button input[type="color"]:disabled:active+label, +.form-input-button input[type="file"]:disabled+label, +.form-input-button input[type="file"]:disabled:hover+label, +.form-input-button input[type="file"]:disabled:focus+label, +.form-input-button input[type="file"]:disabled:active+label { background-color: rgb(var(--button-background-disabled)); color: rgb(var(--button-text-disabled)); cursor: default; text-decoration: none; } -.input-button input[type="checkbox"]+label .label-icon, -.input-button input[type="radio"]+label .label-icon { +.form-input-button input[type="checkbox"]+label .label-icon, +.form-input-button input[type="radio"]+label .label-icon { top: inherit; } -.input-button input[type="checkbox"]+label:after, -.input-button input[type="radio"]+label:after, -.input-button input[type="color"]+label:after, -.input-button input[type="file"]+label:after { +.form-input-button input[type="checkbox"]+label:after, +.form-input-button input[type="radio"]+label:after, +.form-input-button input[type="color"]+label:after, +.form-input-button input[type="file"]+label:after { background: rgb(var(--button-border)); position: absolute; content: ""; @@ -965,105 +1027,105 @@ input[type="range"]:disabled::-moz-range-progress { transition: background-color var(--layout-timing-extra-fast); } -.input-button input[type="checkbox"]:focus+label:after, -.input-button input[type="checkbox"]:hover+label:after, -.input-button input[type="radio"]:focus+label:after, -.input-button input[type="radio"]:hover+label:after, -.input-button input[type="color"]:focus+label:after, -.input-button input[type="color"]:hover+label:after, -.input-button input[type="file"]:focus+label:after, -.input-button input[type="file"]:hover+label:after { +.form-input-button input[type="checkbox"]:focus+label:after, +.form-input-button input[type="checkbox"]:hover+label:after, +.form-input-button input[type="radio"]:focus+label:after, +.form-input-button input[type="radio"]:hover+label:after, +.form-input-button input[type="color"]:focus+label:after, +.form-input-button input[type="color"]:hover+label:after, +.form-input-button input[type="file"]:focus+label:after, +.form-input-button input[type="file"]:hover+label:after { background-color: rgb(var(--button-border-focus-hover)); } -.input-button input[type="checkbox"]:active+label:after, -.input-button input[type="radio"]:active+label:after, -.input-button input[type="color"]:active+label:after, -.input-button input[type="file"]:active+label:after { +.form-input-button input[type="checkbox"]:active+label:after, +.form-input-button input[type="radio"]:active+label:after, +.form-input-button input[type="color"]:active+label:after, +.form-input-button input[type="file"]:active+label:after { background-color: rgb(var(--button-border-active)); transition: none; } -.input-button input[type="checkbox"]:checked+label:after, -.input-button input[type="radio"]:checked+label:after, -.input-button input[type="color"]:checked+label:after, -.input-button input[type="file"]:checked+label:after { +.form-input-button input[type="checkbox"]:checked+label:after, +.form-input-button input[type="radio"]:checked+label:after, +.form-input-button input[type="color"]:checked+label:after, +.form-input-button input[type="file"]:checked+label:after { background-color: rgb(var(--button-border-active)); transition: none; } -.input-button input[type="checkbox"]:disabled+label:after, -.input-button input[type="checkbox"]:disabled:hover+label:after, -.input-button input[type="checkbox"]:disabled:focus+label:after, -.input-button input[type="checkbox"]:disabled:active+label:after, -.input-button input[type="radio"]:disabled+label:after, -.input-button input[type="radio"]:disabled:hover+label:after, -.input-button input[type="radio"]:disabled:focus+label:after, -.input-button input[type="radio"]:disabled:active+label:after, -.input-button input[type="color"]:disabled+label:after, -.input-button input[type="color"]:disabled:hover+label:after, -.input-button input[type="color"]:disabled:focus+label:after, -.input-button input[type="color"]:disabled:active+label:after, -.input-button input[type="file"]:disabled+label:after, -.input-button input[type="file"]:disabled:hover+label:after, -.input-button input[type="file"]:disabled:focus+label:after, -.input-button input[type="file"]:disabled:active+label:after { +.form-input-button input[type="checkbox"]:disabled+label:after, +.form-input-button input[type="checkbox"]:disabled:hover+label:after, +.form-input-button input[type="checkbox"]:disabled:focus+label:after, +.form-input-button input[type="checkbox"]:disabled:active+label:after, +.form-input-button input[type="radio"]:disabled+label:after, +.form-input-button input[type="radio"]:disabled:hover+label:after, +.form-input-button input[type="radio"]:disabled:focus+label:after, +.form-input-button input[type="radio"]:disabled:active+label:after, +.form-input-button input[type="color"]:disabled+label:after, +.form-input-button input[type="color"]:disabled:hover+label:after, +.form-input-button input[type="color"]:disabled:focus+label:after, +.form-input-button input[type="color"]:disabled:active+label:after, +.form-input-button input[type="file"]:disabled+label:after, +.form-input-button input[type="file"]:disabled:hover+label:after, +.form-input-button input[type="file"]:disabled:focus+label:after, +.form-input-button input[type="file"]:disabled:active+label:after { background-color: rgb(var(--button-border-disabled)); } -/* input button link */ -.input-button-link input[type="checkbox"]+label, -.input-button-link input[type="radio"]+label, -.input-button-link input[type="color"]+label, -.input-button-link input[type="file"]+label { +/* form input button link */ +.form-input-button-link input[type="checkbox"]+label, +.form-input-button-link input[type="radio"]+label, +.form-input-button-link input[type="color"]+label, +.form-input-button-link input[type="file"]+label { background-color: transparent; } -.input-button-link input[type="checkbox"]:hover+label, -.input-button-link input[type="checkbox"]:focus+label, -.input-button-link input[type="checkbox"]:checked+label, -.input-button-link input[type="radio"]:hover+label, -.input-button-link input[type="radio"]:focus+label, -.input-button-link input[type="radio"]:checked+label, -.input-button-link input[type="color"]:hover+label, -.input-button-link input[type="color"]:focus+label, -.input-button-link input[type="color"]:checked+label, -.input-button-link input[type="file"]:hover+label, -.input-button-link input[type="file"]:focus+label, -.input-button-link input[type="file"]:checked+label { +.form-input-button-link input[type="checkbox"]:hover+label, +.form-input-button-link input[type="checkbox"]:focus+label, +.form-input-button-link input[type="checkbox"]:checked+label, +.form-input-button-link input[type="radio"]:hover+label, +.form-input-button-link input[type="radio"]:focus+label, +.form-input-button-link input[type="radio"]:checked+label, +.form-input-button-link input[type="color"]:hover+label, +.form-input-button-link input[type="color"]:focus+label, +.form-input-button-link input[type="color"]:checked+label, +.form-input-button-link input[type="file"]:hover+label, +.form-input-button-link input[type="file"]:focus+label, +.form-input-button-link input[type="file"]:checked+label { background-color: transparent; } -.input-button-link input[type="checkbox"]:active+label, -.input-button-link input[type="radio"]:active+label, -.input-button-link input[type="color"]:active+label, -.input-button-link input[type="file"]:active+label { +.form-input-button-link input[type="checkbox"]:active+label, +.form-input-button-link input[type="radio"]:active+label, +.form-input-button-link input[type="color"]:active+label, +.form-input-button-link input[type="file"]:active+label { background-color: transparent; } -.input-button-link input:disabled[type="checkbox"]+label, -.input-button-link input:disabled[type="radio"]+label, -.input-button-link input:disabled[type="color"]+label, -.input-button-link input:disabled[type="file"]+label { +.form-input-button-link input:disabled[type="checkbox"]+label, +.form-input-button-link input:disabled[type="radio"]+label, +.form-input-button-link input:disabled[type="color"]+label, +.form-input-button-link input:disabled[type="file"]+label { background-color: transparent; pointer-events: none; } -.input-button-link input:disabled[type="checkbox"]:hover+label, -.input-button-link input:disabled[type="checkbox"]:focus+label, -.input-button-link input:disabled[type="radio"]:hover+label, -.input-button-link input:disabled[type="radio"]:focus+label, -.input-button-link input:disabled[type="color"]:hover+label, -.input-button-link input:disabled[type="color"]:focus+label, -.input-button-link input:disabled[type="file"]:hover+label, -.input-button-link input:disabled[type="file"]:focus+label { +.form-input-button-link input:disabled[type="checkbox"]:hover+label, +.form-input-button-link input:disabled[type="checkbox"]:focus+label, +.form-input-button-link input:disabled[type="radio"]:hover+label, +.form-input-button-link input:disabled[type="radio"]:focus+label, +.form-input-button-link input:disabled[type="color"]:hover+label, +.form-input-button-link input:disabled[type="color"]:focus+label, +.form-input-button-link input:disabled[type="file"]:hover+label, +.form-input-button-link input:disabled[type="file"]:focus+label { background-color: transparent; } -.input-button-link input[type="checkbox"]+label:after, -.input-button-link input[type="radio"]+label:after, -.input-button-link input[type="color"]+label:after, -.input-button-link input[type="file"]+label:after { +.form-input-button-link input[type="checkbox"]+label:after, +.form-input-button-link input[type="radio"]+label:after, +.form-input-button-link input[type="color"]+label:after, +.form-input-button-link input[type="file"]+label:after { content: none; } @@ -1108,17 +1170,17 @@ input[type="range"]:disabled::-moz-range-progress { position: relative; } -.input-hide input[type="checkbox"]+label .label-icon, -.input-hide input[type="checkbox"]:checked+label .label-icon, -.input-hide input[type="radio"]+label .label-icon, -.input-hide input[type="radio"]:checked+label .label-icon, -.input-hide input[type="file"]+label .label-icon, -.input-hide input[type="file"]:checked+label .label-icon { +.form-input-hide input[type="checkbox"]+label .label-icon, +.form-input-hide input[type="checkbox"]:checked+label .label-icon, +.form-input-hide input[type="radio"]+label .label-icon, +.form-input-hide input[type="radio"]:checked+label .label-icon, +.form-input-hide input[type="file"]+label .label-icon, +.form-input-hide input[type="file"]:checked+label .label-icon { display: none; } -.input-hide input[type="color"], -.input-hide input[type="file"] { +.form-input-hide input[type="color"], +.form-input-hide input[type="file"] { margin: 0; opacity: 0; width: 1px; @@ -1131,13 +1193,7 @@ input[type="range"]:disabled::-moz-range-progress { -webkit-appearance: none; } -/* form variants */ -.form-grid-wrap { - padding: 0.5em 0; - position: relative; - width: 100%; -} - +/* form grid */ .form-grid { background-color: rgb(var(--form-grid-background)); padding: calc(var(--form-thumb-size) / 2); @@ -1174,8 +1230,9 @@ input[type="range"]:disabled::-moz-range-progress { border-radius: var(--theme-radius); } -.form-grid .input-wrap { - padding: 0; +.form-grid .form-wrap { + margin-top: 0; + margin-bottom: 0; } .form-grid input[type="checkbox"]+label, @@ -1207,36 +1264,67 @@ input[type="range"]:disabled::-moz-range-progress { transform: translate(-50%, -50%); } -.form-indent { - margin-left: 2.25em; +.form-grid-3x3 { + --radiusPart: calc(var(--theme-radius) / 20); + --responsivePos: calc(var(--radiusPart) + -50%); + --responsiveNeg: calc(calc(var(--radiusPart) * -1) + -50%); } -.form-inline { - margin-left: -0.5em; - margin-right: -0.5em; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; +.form-grid-3x3 .form-wrap:nth-child(1) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(1) input[type="radio"]+label .label-icon { + transform: translate(var(--responsivePos), var(--responsivePos)); } -.form-inline>* { - padding-left: 0.5em; - padding-right: 0.5em; - width: initial; +.form-grid-3x3 .form-wrap:nth-child(2) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(2) input[type="radio"]+label .label-icon { + transform: translate(-50%, var(--responsivePos)); +} + +.form-grid-3x3 .form-wrap:nth-child(3) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(3) input[type="radio"]+label .label-icon { + transform: translate(var(--responsiveNeg), var(--responsivePos)); +} + +.form-grid-3x3 .form-wrap:nth-child(4) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(4) input[type="radio"]+label .label-icon { + transform: translate(var(--responsivePos), -50%); +} + +.form-grid-3x3 .form-wrap:nth-child(6) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(6) input[type="radio"]+label .label-icon { + transform: translate(var(--responsiveNeg), -50%); +} + +.form-grid-3x3 .form-wrap:nth-child(7) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(7) input[type="radio"]+label .label-icon { + transform: translate(var(--responsivePos), var(--responsiveNeg)); +} + +.form-grid-3x3 .form-wrap:nth-child(8) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(8) input[type="radio"]+label .label-icon { + transform: translate(-50%, var(--responsiveNeg)); +} + +.form-grid-3x3 .form-wrap:nth-child(9) input[type="checkbox"]+label .label-icon, +.form-grid-3x3 .form-wrap:nth-child(9) input[type="radio"]+label .label-icon { + transform: translate(var(--responsiveNeg), var(--responsiveNeg)); } /* form group */ .form-group { - margin: 0 0 1em 0; + position: relative; display: inline-flex; + flex-direction: row; justify-content: flex-start; align-items: stretch; - position: relative; z-index: 1; } +.form-group .form-wrap { + margin-top: 0; + margin-bottom: 0; +} + .form-group .form-group-text, .form-group .button, .form-group>select, @@ -1339,27 +1427,27 @@ input[type="range"]:disabled::-moz-range-progress { border-radius: var(--theme-radius); } -.form-group.nested-button * .button, -.form-group.nested-button *:first-child .button:after, -.form-group.nested-button * input[type="checkbox"]+label, -.form-group.nested-button * input[type="radio"]+label, -.form-group.nested-button * input[type="color"]+label { +.form-group.form-group-nested-button * .button, +.form-group.form-group-nested-button *:first-child .button:after, +.form-group.form-group-nested-button * input[type="checkbox"]+label, +.form-group.form-group-nested-button * input[type="radio"]+label, +.form-group.form-group-nested-button * input[type="color"]+label { border-radius: 0; } -.form-group.nested-button *:first-child .button, -.form-group.nested-button *:first-child .button:after, -.form-group.nested-button *:first-child input[type="checkbox"]+label, -.form-group.nested-button *:first-child input[type="radio"]+label, -.form-group.nested-button *:first-child input[type="color"]+label { +.form-group.form-group-nested-button *:first-child .button, +.form-group.form-group-nested-button *:first-child .button:after, +.form-group.form-group-nested-button *:first-child input[type="checkbox"]+label, +.form-group.form-group-nested-button *:first-child input[type="radio"]+label, +.form-group.form-group-nested-button *:first-child input[type="color"]+label { border-radius: var(--theme-radius) 0 0 var(--theme-radius); } -.form-group.nested-button *:last-child .button, -.form-group.nested-button *:last-child .button:after, -.form-group.nested-button *:last-child input[type="checkbox"]+label, -.form-group.nested-button *:last-child input[type="radio"]+label, -.form-group.nested-button *:last-child input[type="color"]+label { +.form-group.form-group-nested-button *:last-child .button, +.form-group.form-group-nested-button *:last-child .button:after, +.form-group.form-group-nested-button *:last-child input[type="checkbox"]+label, +.form-group.form-group-nested-button *:last-child input[type="radio"]+label, +.form-group.form-group-nested-button *:last-child input[type="color"]+label { border-radius: 0 var(--theme-radius) var(--theme-radius) 0; } @@ -1406,10 +1494,6 @@ input[type="range"]:disabled::-moz-range-progress { overflow: hidden; } -.form-group-wrap { - padding: 0.5em 0; -} - .form-group.form-group-border .form-group-text, .form-group.form-group-border .button, .form-group.form-group-border .button:after, @@ -1422,11 +1506,11 @@ input[type="range"]:disabled::-moz-range-progress { .form-group.form-group-border>input[type="text"], .form-group.form-group-border>input[type="color"], .form-group.form-group-border>input[type="range"], -.form-group.form-group-border.nested-button * .button, -.form-group.form-group-border.nested-button * .button:after, -.form-group.form-group-border.nested-button * input[type="checkbox"]+label, -.form-group.form-group-border.nested-button * input[type="radio"]+label, -.form-group.form-group-border.nested-button * input[type="color"]+label { +.form-group.form-group-border.form-group-nested-button * .button, +.form-group.form-group-border.form-group-nested-button * .button:after, +.form-group.form-group-border.form-group-nested-button * input[type="checkbox"]+label, +.form-group.form-group-border.form-group-nested-button * input[type="radio"]+label, +.form-group.form-group-border.form-group-nested-button * input[type="color"]+label { border-radius: 0; } @@ -1588,23 +1672,18 @@ input[type="range"]:disabled::-moz-range-progress { content: none; } -.form-group.nested-button .form-dropdown-menu *:first-child .button, -.form-group.nested-button .form-dropdown-menu *:last-child .button, -.form-group.nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label, -.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label, -.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label, -.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label, -.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label, -.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label { +.form-group.form-group-nested-button .form-dropdown-menu *:first-child .button, +.form-group.form-group-nested-button .form-dropdown-menu *:last-child .button, +.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label, +.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label, +.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="radio"]+label, +.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="radio"]+label, +.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="color"]+label, +.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="color"]+label { border-radius: 0; } -.feedback-wrap { - padding: 0.5em 0; - position: relative; - width: 100%; -} - +/* form feedback */ .form-feedback { padding: 0.5em 1.5em 0.5em 1em; background-color: rgb(var(--form-feedback-background)); @@ -1614,6 +1693,7 @@ input[type="range"]:disabled::-moz-range-progress { border-color: rgb(var(--form-feedback-border)); border-top-right-radius: var(--theme-radius); border-bottom-right-radius: var(--theme-radius); + width: 100%; } .form-feedback p { diff --git a/src/css/link.css b/src/css/link.css index b6936886..cf66825f 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -71,9 +71,13 @@ flex-direction: row; } -.is-link-style-list .link-item.link-empty>*:not(:only-child), +.is-link-style-block .link-item.link-empty>*:not(:last-child) { + margin-bottom: 0.5em; +} + .is-link-style-list .link-item.link-empty>*:not(:last-child) { margin-right: 0.5em; + margin-bottom: 0; } .is-link-item-hoverscale-show .link-item.link-empty:hover { diff --git a/src/css/menu.css b/src/css/menu.css index 6f5ca3c3..bdbd12dc 100755 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -94,15 +94,6 @@ z-index: 1; } -.menu-item-form-sticky { - background-color: rgb(var(--theme-color-01)); - margin: -1.5em -1em 0 -1em; - padding: 1.5em 1em 1em 1em; - position: sticky; - top: 0; - z-index: 2; -} - .menu-nav-button { background-color: transparent; margin: 0; diff --git a/src/css/theme.css b/src/css/theme.css index 61188df0..be77a902 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -3,8 +3,6 @@ width: var(--theme-preview-size); height: var(--theme-preview-size); border-radius: var(--theme-radius); - padding: 0; - margin: 0.5em; position: relative; overflow: hidden; } @@ -270,7 +268,6 @@ .theme-shadow-box { background-color: rgb(var(--theme-color-02)); border-radius: var(--theme-radius); - margin: 0; padding: 0.5em; width: 5em; height: 5em; diff --git a/src/css/typography.css b/src/css/typography.css index e9c41c96..2bf93511 100755 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -64,10 +64,6 @@ p:not(:last-child) { margin-bottom: 0.5em; } -.p-wrap { - padding: 0.5em 0; -} - hr { border: 0; border-top: var(--horizontal-rule); diff --git a/src/css/variables.css b/src/css/variables.css index 6eee1757..983d96f5 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -211,6 +211,7 @@ 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25); --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); + --form-wrap-space: 0.75em; /* button */ --button-background: var(--theme-color-02); --button-background-focus-hover: var(--theme-color-03); diff --git a/src/index.html b/src/index.html index b79a2ee6..77c2c027 100644 --- a/src/index.html +++ b/src/index.html @@ -77,48 +77,46 @@
- +
-
-
-
+
+
- +
-
-
- -
    -
  • - -
    • -
  • - -
    • -
-
+
+ +
    +
  • + +
    • +
  • + +
    • +
-
-
- +
+
+
-
- +
+
@@ -126,7 +124,7 @@
-
@@ -143,82 +141,111 @@
-
- - - - - - - - +
+ + + + + + + +
- +
+
+
+

Global scaling

+
+
+
+ +
+ +
+
+
+
+

Resize all elements on the page.

+
+
+

Take care as some elements could scale up to outside the page.

+
+
+ +
+
+

Area

-
+
-
+
-
- +
+
- -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-

Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.

+
+

Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.

+
@@ -226,33 +253,16 @@

Area order

-
+
-
+
-

Only available when Bookmarks are shown.

-
-
-
-
-

Global scaling

-
-
-
- -
- -
-
-
-

Resize all elements on the page.

-

Take care as some elements could scale up to outside the page.

-
- +
+

Only available when Bookmarks are shown.

@@ -261,15 +271,15 @@

Padding

-
+
-
+
-
- +
+
@@ -278,15 +288,15 @@

Gutter

-
+
-
+
-
- +
+
@@ -295,12 +305,12 @@

Page

-
+
- +
-
+
@@ -314,55 +324,69 @@

Area

-
+
-
+
-

Max width is defined by Layout Area Width.

-
- +
+

Max width is defined by Layout Area Width.

+
+
+
- -
-
-
- - -
-
- - -
-
- - +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
-

Effects may not be visible if the Header Area is full width.

+
+

Effects may not be visible if the Header Area is full width.

+
- -
-
-
- - -
-
- - -
-
- - +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
-

Effects may not be visible if the Search box size is set to Auto and grows to fill available space.

+
+

Effects may not be visible if the Search box size is set to Auto and grows to fill available space.

+
@@ -370,38 +394,40 @@

Greeting

-
+
-
-
- - -
-
- - -
-
- - -
-
-
- - -
-
-
- -
- -
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+ +
+
+
+
+
-
-
-
@@ -411,30 +437,34 @@

Transitional words

-
+
-

Available when Date or Time is shown.

-
-
- - -
-
- - -
-
-
- -
- -
+
+

Available when Date or Time is shown.

+
+
+
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+
+
+
-
-
-
@@ -444,74 +474,80 @@

Clock

-
+
-
-
- - -
-
- - +
+
+
+ + +
+
+ + +
-
+
-
-
- - -
-
- - +
+
+
+ + +
+
+ + +
-
+
-
-
- - -
-
- - +
+
+
+ + +
+
+ + +
-
+
-
+
-
+
-
+
-
+
-
- +
+
@@ -520,136 +556,166 @@

Date

-
+
-
-
- - -
+
- -
- - +
+ +
-
- - +
+
+
+ +
+
+ + +
+
+ + +
+
+

Define what day "1" represents, either Monday or Sunday.

+
+
-

Define what day "1" represents, either Monday or Sunday.

-
-
- - -
-
- -
- - +
+ +
-
- - +
+
+
+ +
+
+ + +
+
+ + +
+
-
+
-
-
- - +
+
+
+ + +
+
+ + +
+
+ + +
+
+

Display Date as 1st, 2nd, 3rd, 4th etc.

+
-
- - -
-
- - -
-

Display Date as 1st, 2nd, 3rd, 4th etc.

-
+
-
-
- - -
+
-
- - +
+ +
-

Display Month as 1st, 2nd, 3rd, 4th etc.

-
-
- - -
-
- -
- - +
+
+
+ + +
+
+

Display Month as 1st, 2nd, 3rd, 4th etc.

+
+
-
- - +
+ + +
+
+
+
+ +
+
+ + +
+
+ + +
+
-
+
-
-
- - -
-
- - +
+
+
+ + +
+
+ + +
-
+
- -
+
+ +
+
-
+
-
+
-
+
-
- +
+
@@ -658,104 +724,126 @@

Search

-
+
-
- -
- - -
-

Search box will grow to best fit available space.

-
- - -
-

Define how wide the Search box should be inside the Header Area.

+
-
- -
- -
+
+ +
+
+ + +
+
+

Search box will grow to best fit available space.

+
+
+ + +
+
+

Define how wide the Search box should be inside the Header Area.

+
+
+
+
+ +
+ +
+
+
-
-
-
- - -
-

May not work in some browsers.

-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- - +
+
+ +
-
- - +
+

May not work in some browsers.

-

Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="

-

nightTab will add the search term entered into the Search input at the end of the above URL

-
-
- -
-
-
- - -
-
- - -
-
- - +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+

Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="

+

nightTab will add the search term entered into the Search input at the end of the above URL

+
-
-
-
- -
- -
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+ +
+
+
+
+

Only the Search box width control will change the Width of the Search box.

+
+
+
-
-

Only the Search box width control will change the Width of the Search box.

-
-
@@ -766,41 +854,45 @@
-
+
-
+
-
+
-
+
-

Colour and Accent can also be found under Theme.

-
-
- - +
+

Colour and Accent can also be found under Theme.

+
+
+
+
+ + +
-
+
-
+
-
- +
+
@@ -809,17 +901,17 @@

Border

-
+
-
+
-
+
-
+
@@ -831,17 +923,19 @@

Position when scrolling

-
-
- - -
-

Header sticks to the page when scrolling up or down.

-
- - -
-

Header moves inline with the content when scrolling up or down.

+
+ + +
+
+

Header sticks to the page when scrolling up or down.

+
+
+ + +
+
+

Header moves inline with the content when scrolling up or down.

@@ -850,35 +944,43 @@

Shade

-
+
-
-
- - -
-

Useful for when a Background Image is shown.

-
- - -
-

The page will not scroll if Bookmarks are not shown.

-
-
- -
- -
+
+
+
+ + +
+
+

Useful for when a Background Image is shown.

+
+
+ + +
+
+

The page will not scroll if Bookmarks are not shown.

+
+
+
+ +
+ +
+
+
+
+
+ + +
+
+

May not be visible if Theme Radius is set to 0.

-
-
- - -
-

May not be visible if Theme Radius is set to 0.

@@ -890,41 +992,49 @@

Names

-
+
-
-
- -
- -
+
+
+
+ +
+ +
+
+
+
+
-
-
-
- -
-
-
- - -
-
- - -
-
- - +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
-

Effects may not be visible if the Group Name is not shown.

+
+

Effects may not be visible if the Group Name is not shown.

+
@@ -932,11 +1042,11 @@

Order

-
+
-
+
@@ -947,14 +1057,16 @@

Border

-
+
-
+
-

Border between groups may not be visible if there is only one group.

+
+

Border between groups may not be visible if there is only one group.

+
@@ -965,36 +1077,42 @@

Area

-
+
-
+
-

Max width is defined by Layout Area Width.

-
- +
+

Max width is defined by Layout Area Width.

+
+
+
- -
+
+ +
+
-
+
-
+
-
+
-

Effects may not be visible if the Bookmark Area is full width.

+
+

Effects may not be visible if the Bookmark Area is full width.

+
@@ -1002,199 +1120,217 @@

Bookmarks

-
+
-
-
- -
- -
-
-
-
- -
-
- -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
-
- -
-
-
- - -
-
- - -
-

Only available when Letter/Icon and Name are shown.

-

Vertical alignment works well with Bookmark Block Style.

-

Horizontal alignment works well with Bookmark List Style.

-
-
- - -
-
- - -
-

Only available when Letter/Icon and Name are shown.

-
-
- - -
+
-
- -
- -
+
+ +
+ +
-
- +
+
-
- -
- -
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
- -
-
-
-
- - -
-
-
- -
- -
+
+
+ +
+ +
-
- +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+

Only available when Letter/Icon and Name are shown.

+
+
+

Vertical alignment works well with Bookmark Block Style.

+
+
+

Horizontal alignment works well with Bookmark List Style.

+
+
+
+ + +
+
+ + +
+
+

Only available when Letter/Icon and Name are shown.

+
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+

Effects may not be visible if Theme Shadow is set to 0.

+
+
+
+ + +
+
+
+ +
-
-
-
- - -
-
-
- - -
-
-
- - -
-

Effects may not be visible if Theme Shadow is set to 0.

-
-
- - -
-
-
- -
@@ -1204,22 +1340,30 @@

Background colour

-
+
-

Use the Background colour defined by the Theme.

-
+
+

Use the Background colour defined by the Theme.

+
+
-

Use a custom Background colour.

-

Take care as some colours may make the Letter/Icon and Name unreadable.

-
-
-
- - +
+

Use a custom Background colour.

+
+
+

Take care as some colours may make the Letter/Icon and Name unreadable.

+
+
+
+
+
+ + +
@@ -1230,9 +1374,9 @@

Border

-
+
-
+
@@ -1244,16 +1388,20 @@

Style

-
+
-

Bookmark tiles more square shaped.

-
+
+

Bookmark tiles more square shaped.

+
+
-

Bookmark tiles more short and wide.

+
+

Bookmark tiles more short and wide.

+
@@ -1261,15 +1409,17 @@

Orientation

-
+
-
+
-

Display the URL and Controls either at the top or bottom of a Bookmark Tile.

+
+

Display the URL and Controls either at the top or bottom of a Bookmark Tile.

+
@@ -1277,15 +1427,11 @@

Sort

-
-
- -
-
- -
-
- +
+
+ + +
@@ -1295,14 +1441,16 @@

Accent override

-
- +
+
-
- +
+ +
+
+

Adds a unique override colour to each Bookmark.

-

Adds a unique override colour to each Bookmark.

@@ -1313,8 +1461,10 @@

Preset

-
-

Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.

+
+
+

Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.

+
@@ -1322,17 +1472,19 @@

Saved

-
-
-
- -
-
- - +
+
+
+ +
+ + +
-

Saving a Theme will record the current Colour, Accent, Font, Style and Radius.

+
+

Saving a Theme will record the current Colour, Accent, Font, Style and Radius.

+
@@ -1340,15 +1492,17 @@

Style

-
+
-
+
-

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

+
+

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

+
@@ -1356,81 +1510,103 @@

Fonts

-
+
- +
-
- +
+
-

Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.

-

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"

-

Clear the field to use the default font "Fjalla".

-
-
-
- -
- -
+
+

Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.

+
+
+

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"

+
+
+

Clear the field to use the default font "Fjalla".

+
+
+
+
+ +
+ +
+
+
+
+
+ + + +
+
+
+

Not all fonts support all weights. Refer to the Google Font page to see which are available.

+
+
+
+ + +
+
+ + +
+
+
-
-
- - - -
-

Not all fonts support all weights. Refer to the Google Font page to see which are available.

-
-
- - -
-
- - -
-
-
-
+
- +
-
- +
+
-

Use a Google Font to customise the Bookmark name, URL and form elements.

-

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"

-

Clear the field to use the default font "Open Sans".

-
-
-
- -
- -
+
+

Use a Google Font to customise the Bookmark name, URL and form elements.

+
+
+

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"

+
+
+

Clear the field to use the default font "Open Sans".

+
+
+
+
+ +
+ +
+
+
+
+
+ + + +
+
+
+

Not all fonts support all weights. Refer to the Google Font page to see which are available.

+
+
+
+ + +
+
+ + +
+
+
-
-
- - - -
-

Not all fonts support all weights. Refer to the Google Font page to see which are available.

-
-
- - -
-
- - -
-
-
@@ -1440,155 +1616,165 @@

Colour

-
-
+
+

Colour shades

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-

Backgrounds, Bookmarks and Modals use shades from the left.

-

Text and form elements use shades from the right.

-

For a light look switch to the Light Style and then select a Shade colour.

+
+

Backgrounds, Bookmarks and Modals use shades from the left.

+
+
+

Text and form elements use shades from the right.

+
+
+

For a light look switch to the Light Style and then select a Shade colour.

+
-
+
-
- - +
+ +
-

Light and dark shades from this colour are used across nightTabs.

-
- +
+

Light and dark shades from this colour are used across nightTabs.

+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
- +
+
-
+
-
+
-
- +
+
@@ -1597,45 +1783,49 @@

Accent

-
+
-
- - +
+ +
-
- +
+ +
+
+

Accent Colour can also be changed from the Header Area.

-

Accent Colour can also be changed from the Header Area.

-
+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
@@ -1645,15 +1835,15 @@

Radius

-
+
-
+
-
- +
+
@@ -1662,62 +1852,67 @@

Shadow

-
+
-
+
-
- +
+
-
-
-
-
-

Small shadow

-
+
+
+
+

Small shadows

-
-
-

Medium shadow

-
+
+

Medium shadows

-
-
-

Large shadow

-
+
+

Large shadows

-

Bookmarks and Modals will use the Large shadow.

+
+

Bookmarks and Modals will use the Large shadow.

+
+