diff --git a/package-lock.json b/package-lock.json index d50824cb..b20eccc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.49.0", + "version": "5.50.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1962f342..7b6ed87f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.49.0", + "version": "5.50.0", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "main": "index.js", "scripts": { diff --git a/src/css/auto-suggest.css b/src/css/auto-suggest.css index 508786b3..51098863 100644 --- a/src/css/auto-suggest.css +++ b/src/css/auto-suggest.css @@ -17,11 +17,12 @@ overflow-y: auto; z-index: var(--z-index-auto-suggest); box-shadow: var(--theme-shadow-bottom-large); + animation: appear var(--layout-transition-extra-fast) 1; } .auto-suggest-list { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); grid-gap: calc(var(--form-wrap-space) / 2); } diff --git a/src/css/form.css b/src/css/form.css index 439cf873..8c510263 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -18,8 +18,7 @@ fieldset:not(:last-child), } /* form variants */ -.form-wrap, -.form-helper { +.form-wrap { position: relative; width: 100%; display: block; @@ -39,14 +38,6 @@ fieldset:not(:last-child), 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) * 2.25); } @@ -106,7 +97,7 @@ label { } label:not(:only-child):not(:last-child) { - padding-bottom: calc(var(--form-wrap-space) / 2); + padding-bottom: var(--form-wrap-space); } label.disabled { diff --git a/src/css/link.css b/src/css/link.css index 7217efcd..50baccc1 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -286,47 +286,47 @@ box-shadow: var(--theme-shadow-top-large); } -.is-link-display-alignment-topleft .link-panel-front { +.link-item-alignment-topleft .link-panel-front { justify-content: flex-start; align-items: flex-start; } -.is-link-display-alignment-topcenter .link-panel-front { +.link-item-alignment-topcenter .link-panel-front { justify-content: flex-start; align-items: center; } -.is-link-display-alignment-topright .link-panel-front { +.link-item-alignment-topright .link-panel-front { justify-content: flex-start; align-items: flex-end; } -.is-link-display-alignment-centerleft .link-panel-front { +.link-item-alignment-centerleft .link-panel-front { justify-content: center; align-items: flex-start; } -.is-link-display-alignment-centercenter .link-panel-front { +.link-item-alignment-centercenter .link-panel-front { justify-content: center; align-items: center; } -.is-link-display-alignment-centerright .link-panel-front { +.link-item-alignment-centerright .link-panel-front { justify-content: center; align-items: flex-end; } -.is-link-display-alignment-bottomleft .link-panel-front { +.link-item-alignment-bottomleft .link-panel-front { justify-content: flex-end; align-items: flex-start; } -.is-link-display-alignment-bottomcenter .link-panel-front { +.link-item-alignment-bottomcenter .link-panel-front { justify-content: flex-end; align-items: center; } -.is-link-display-alignment-bottomright .link-panel-front { +.link-item-alignment-bottomright .link-panel-front { justify-content: flex-end; align-items: flex-end; } @@ -351,33 +351,33 @@ border-bottom-right-radius: calc(var(--theme-radius) / 4); } -.is-edit .link-panel-front, +.is-edit .link-item .link-panel-front, .is-edit .link-item:hover .link-panel-front, .is-edit .link-item:focus .link-panel-front { height: calc(100% - var(--link-item-edit-height)); } -.is-theme-radius.is-edit.is-link-orientation-top .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-top .link-item .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-top .link-item:hover .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-top .link-item:focus .link-panel-front { border-top-left-radius: calc(var(--theme-radius) / 4); border-top-right-radius: calc(var(--theme-radius) / 4); } -.is-theme-radius.is-edit.is-link-orientation-bottom .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-bottom .link-item .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-front { border-bottom-left-radius: calc(var(--theme-radius) / 4); border-bottom-right-radius: calc(var(--theme-radius) / 4); } -.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-panel-front, +.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:hover .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:focus .link-panel-front { box-shadow: var(--theme-shadow-bottom-medium); } -.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-panel-front, +.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item .link-panel-front, .is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:hover .link-panel-front, .is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:focus .link-panel-front { box-shadow: var(--theme-shadow-top-medium); @@ -399,254 +399,254 @@ font-size: 0.6em; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display { +.link-item-direction-horizontal.link-item-order-visualname .link-display { flex-direction: row; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display { +.link-item-direction-horizontal.link-item-order-namevisual .link-display { flex-direction: row-reverse; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display { +.link-item-direction-vertical.link-item-order-visualname .link-display { flex-direction: column; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display { +.link-item-direction-vertical.link-item-order-namevisual .link-display { flex-direction: column-reverse; } -.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display-visual:not(:only-child) { +.link-item-name.link-item-visual.link-item-direction-horizontal.link-item-order-visualname .link-display-visual:not(:only-child) { margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); } -.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) { +.link-item-name.link-item-visual.link-item-direction-horizontal.link-item-order-namevisual .link-display-visual:not(:only-child) { margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); } -.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display-visual:not(:only-child) { +.link-item-name.link-item-visual.link-item-direction-vertical.link-item-order-visualname .link-display-visual:not(:only-child) { margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); } -.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) { +.link-item-name.link-item-visual.link-item-direction-vertical.link-item-order-namevisual .link-display-visual:not(:only-child) { margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); } -.is-link-display-alignment-topleft .link-display { +.link-item-alignment-topleft .link-display { transform-origin: top left; } -.is-link-display-alignment-topcenter .link-display { +.link-item-alignment-topcenter .link-display { transform-origin: top center; } -.is-link-display-alignment-topright .link-display { +.link-item-alignment-topright .link-display { transform-origin: top right; } -.is-link-display-alignment-centerleft .link-display { +.link-item-alignment-centerleft .link-display { transform-origin: center left; } -.is-link-display-alignment-centercenter .link-display { +.link-item-alignment-centercenter .link-display { transform-origin: center center; } -.is-link-display-alignment-centerright .link-display { +.link-item-alignment-centerright .link-display { transform-origin: center right; } -.is-link-display-alignment-bottomleft .link-display { +.link-item-alignment-bottomleft .link-display { transform-origin: bottom left; } -.is-link-display-alignment-bottomcenter .link-display { +.link-item-alignment-bottomcenter .link-display { transform-origin: bottom center; } -.is-link-display-alignment-bottomright .link-display { +.link-item-alignment-bottomright .link-display { transform-origin: bottom right; } /* vertical visual name */ -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-topleft .link-display { justify-content: flex-start; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-topcenter .link-display { justify-content: flex-start; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-topright .link-display { justify-content: flex-start; align-items: flex-end; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-centerleft .link-display { justify-content: center; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-centercenter .link-display { justify-content: center; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-centerright .link-display { justify-content: center; align-items: flex-end; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-bottomleft .link-display { justify-content: flex-end; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-bottomcenter .link-display { justify-content: flex-end; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display { +.link-item-direction-vertical.link-item-order-visualname.link-item-alignment-bottomright .link-display { justify-content: flex-end; align-items: flex-end; } /* vertical name visual */ -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-topleft .link-display { justify-content: flex-end; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-topcenter .link-display { justify-content: flex-end; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-topright .link-display { justify-content: flex-end; align-items: flex-end; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-centerleft .link-display { justify-content: center; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-centercenter .link-display { justify-content: center; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-centerright .link-display { justify-content: center; align-items: flex-end; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-bottomleft .link-display { justify-content: flex-start; align-items: flex-start; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-bottomcenter .link-display { justify-content: flex-start; align-items: center; } -.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display { +.link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-bottomright .link-display { justify-content: flex-start; align-items: flex-end; } /* horizontal visual name */ -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-topleft .link-display { justify-content: flex-start; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-topcenter .link-display { justify-content: center; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-topright .link-display { justify-content: flex-end; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-centerleft .link-display { justify-content: flex-start; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-centercenter .link-display { justify-content: center; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-centerright .link-display { justify-content: flex-end; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-bottomleft .link-display { justify-content: flex-start; align-items: flex-end; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-bottomcenter .link-display { justify-content: center; align-items: flex-end; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display { +.link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-bottomright .link-display { justify-content: flex-end; align-items: flex-end; } /* horizontal name visual */ -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-topleft .link-display { justify-content: flex-end; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-topcenter .link-display { justify-content: center; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-topright .link-display { justify-content: flex-start; align-items: flex-start; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-centerleft .link-display { justify-content: flex-end; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-centercenter .link-display { justify-content: center; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-centerright .link-display { justify-content: flex-start; align-items: center; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-bottomleft .link-display { justify-content: flex-end; align-items: flex-end; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-bottomcenter .link-display { justify-content: center; align-items: flex-end; } -.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display { +.link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-bottomright .link-display { justify-content: flex-start; align-items: flex-end; } @@ -661,13 +661,13 @@ display: none; } -.is-link-item-display-visual-show .link-display-visual { +.link-item-visual .link-display-visual { display: flex; justify-content: center; align-items: center; } -.is-link-item-display-visual-shadow-show .link-display-visual { +.link-item-display-visual-shadow .link-display-visual { text-shadow: var(--link-item-display-visual-shadow); } @@ -702,17 +702,17 @@ .is-link-style-block .link-display-letter, .is-link-style-list .link-display-letter { - font-size: var(--link-item-display-letter-size); + font-size: var(--link-item-display-visual-letter-size); } .is-link-style-block .link-display-icon, .is-link-style-list .link-display-icon { - font-size: var(--link-item-display-icon-size); + font-size: var(--link-item-display-visual-icon-size); } .is-link-style-block .link-display-image, .is-link-style-list .link-display-image { - font-size: var(--link-item-display-image-size); + font-size: var(--link-item-display-visual-image-size); } .link-item:hover .link-display-letter, @@ -734,12 +734,12 @@ font-family: var(--theme-font-ui-name); font-weight: var(--theme-font-ui-weight); font-style: var(--theme-font-ui-style); - color: rgb(var(--theme-color-12)); + color: rgb(var(--link-item-name-color)); display: none; transition: color var(--layout-transition-extra-fast); } -.is-link-item-display-name-show .link-display-name { +.link-item-name .link-display-name { display: block; } @@ -748,21 +748,21 @@ margin-bottom: 0; } -.is-link-display-alignment-topleft .link-display-name, -.is-link-display-alignment-centerleft .link-display-name, -.is-link-display-alignment-bottomleft .link-display-name { +.link-item-alignment-topleft .link-display-name, +.link-item-alignment-centerleft .link-display-name, +.link-item-alignment-bottomleft .link-display-name { text-align: left; } -.is-link-display-alignment-topcenter .link-display-name, -.is-link-display-alignment-centercenter .link-display-name, -.is-link-display-alignment-bottomcenter .link-display-name { +.link-item-alignment-topcenter .link-display-name, +.link-item-alignment-centercenter .link-display-name, +.link-item-alignment-bottomcenter .link-display-name { text-align: center; } -.is-link-display-alignment-topright .link-display-name, -.is-link-display-alignment-centerright .link-display-name, -.is-link-display-alignment-bottomright .link-display-name { +.link-item-alignment-topright .link-display-name, +.link-item-alignment-centerright .link-display-name, +.link-item-alignment-bottomright .link-display-name { text-align: right; } @@ -772,7 +772,7 @@ } .link-panel-front:focus .link-display-name { - color: rgb(var(--theme-style-text)); + color: rgb(var(--link-item-mame-color-focus-hover)); } /* link panel back */ @@ -784,6 +784,7 @@ position: absolute; top: var(--layout-line-width); left: var(--layout-line-width); + overflow: hidden; display: flex; align-items: stretch; justify-content: flex-end; @@ -1057,21 +1058,21 @@ display: flex; } -.is-link-display-alignment-topleft .link-url, -.is-link-display-alignment-centerleft .link-url, -.is-link-display-alignment-bottomleft .link-url { +.link-item-alignment-topleft .link-url, +.link-item-alignment-centerleft .link-url, +.link-item-alignment-bottomleft .link-url { justify-content: flex-start; } -.is-link-display-alignment-topcenter .link-url, -.is-link-display-alignment-centercenter .link-url, -.is-link-display-alignment-bottomcenter .link-url { +.link-item-alignment-topcenter .link-url, +.link-item-alignment-centercenter .link-url, +.link-item-alignment-bottomcenter .link-url { justify-content: center; } -.is-link-display-alignment-topright .link-url, -.is-link-display-alignment-centerright .link-url, -.is-link-display-alignment-bottomright .link-url { +.link-item-alignment-topright .link-url, +.link-item-alignment-centerright .link-url, +.link-item-alignment-bottomright .link-url { justify-content: flex-end; } @@ -1110,6 +1111,24 @@ bottom: calc(-1 * var(--link-item-url-height)); } +/* link form */ +.link-form { + margin-bottom: 2em; +} + +.link-form-area { + display: block; +} + +@media (min-width: 900px) { + .link-form-area { + display: grid; + grid-template-columns: 6fr 3fr; + grid-gap: calc(var(--form-wrap-space) * 2); + align-items: stretch; + } +} + .link-form-text-icon { position: relative; } @@ -1146,44 +1165,33 @@ } .link-form-collapse { - margin-left: -1em; margin-right: -1em; margin-bottom: -1em; + margin-left: -1em; padding-right: 1em; - padding-left: 1em; padding-bottom: 1em; + padding-left: 1em; height: 0; + opacity: 0; overflow: hidden; - transition: height var(--layout-transition-extra-fast); + transition: height var(--layout-transition-extra-slow), opacity var(--layout-transition-extra-slow); } .link-form-collapse.active { height: var(--link-form-collapse-height); + opacity: 1; } -.link-form-collapse-button-icon { +.link-form-collapse-button [class^="icon-"], +.link-form-collapse-button [class*=" icon-"] { transition: transform var(--layout-transition-extra-fast); } -.link-form-collapse-button.active .link-form-collapse-button-icon { +.link-form-collapse-button.active [class^="icon-"], +.link-form-collapse-button.active [class*=" icon-"] { transform: rotate(-180deg); } -/* link form */ -.link-form-wrap { - display: block; -} - -@media (min-width: 900px) { - .link-form-wrap { - display: grid; - grid-template-columns: 2fr 1fr; - grid-gap: calc(var(--form-wrap-space) * 2); - align-items: stretch; - } -} - -/* link preview */ .link-form-aside { display: none; } @@ -1194,19 +1202,40 @@ } } +/* link form preview */ .link-form-preview-area { - display: grid; - grid-template-rows: auto 1fr; - grid-template-columns: 1fr; position: sticky; top: 50%; transform: translateY(-50%); } -.link-item-preview { - width: 100%; - height: 10em; - position: relative; +.link-item-preview-grid { + display: grid; +} + +.link-item-preview-grid-large { + display: grid; + grid-template-rows: repeat(1, var(--link-item-height)); + grid-template-columns: repeat(1, minmax(var(--link-item-width), 1fr)); +} + +.link-item-preview-grid-small { + font-size: 0.5em; + grid-template-rows: repeat(2, var(--link-item-height)); + grid-template-columns: repeat(2, minmax(var(--link-item-width), 1fr)); +} + +.link-item-preview-grid-small .link-item-preview { + left: 50%; + top: 50%; +} + +.link-item-preview-grid-small .link-item-preview.link-item-wide { + left: 0; +} + +.link-item-preview-grid-small .link-item-preview.link-item-tall { + top: 0; } .is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front, @@ -1242,17 +1271,25 @@ box-shadow: var(--theme-shadow-top-large); } -.is-edit .link-item-preview .link-panel-front, -.is-edit .link-item-preview:hover .link-panel-front, -.is-edit .link-item-preview:focus .link-panel-front { - height: 100%; -} - .is-theme-radius .link-item-preview .link-panel-front, .is-edit.is-theme-radius .link-item-preview .link-panel-front { border-radius: var(--theme-radius); } +.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview:hover .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview:focus .link-panel-front { + border-top-left-radius: var(--theme-radius); + border-top-right-radius: var(--theme-radius); +} + +.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview:hover .link-panel-front, +.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview:focus .link-panel-front { + border-bottom-left-radius: var(--theme-radius); + border-bottom-right-radius: var(--theme-radius); +} + .is-edit .link-item-preview .link-display { font-size: 1em; } @@ -1292,13 +1329,35 @@ border-bottom-right-radius: calc(var(--theme-radius) / 4); } -.is-link-item-line-show .link-item-preview .link-panel-front { +.link-item-preview .link-panel-front, +.link-item-preview:hover .link-panel-front, +.link-item-preview:focus .link-panel-front, +.is-edit .link-item-preview .link-panel-front, +.is-edit .link-item-preview:hover .link-panel-front, +.is-edit .link-item-preview:focus .link-panel-front { + height: 100%; +} + +.is-link-item-line-show .link-item-preview .link-panel-front, +.is-edit.is-link-item-line-show .link-item-preview .link-panel-front { + height: calc(100% - var(--layout-line-width)); +} + +.is-link-item-line-show .link-item-preview:focus .link-panel-front, +.is-link-item-line-show .link-item-preview:focus-within .link-panel-front, +.is-link-item-line-show .link-item-preview:hover .link-panel-front, +.is-edit.is-link-item-line-show .link-item-preview:focus .link-panel-front, +.is-edit.is-link-item-line-show .link-item-preview:focus-within .link-panel-front, +.is-edit.is-link-item-line-show .link-item-preview:hover .link-panel-front { height: calc(100% - var(--layout-line-width)); } .is-link-item-url-show .link-item-preview:focus .link-panel-front, .is-link-item-url-show .link-item-preview:focus-within .link-panel-front, -.is-link-item-url-show .link-item-preview:hover .link-panel-front { +.is-link-item-url-show .link-item-preview:hover .link-panel-front, +.is-edit.is-link-item-url-show .link-item-preview:focus .link-panel-front, +.is-edit.is-link-item-url-show .link-item-preview:focus-within .link-panel-front, +.is-edit.is-link-item-url-show .link-item-preview:hover .link-panel-front { height: calc(100% - var(--link-item-url-height)); } diff --git a/src/css/modal.css b/src/css/modal.css index 10e9becf..9dbe3bf3 100755 --- a/src/css/modal.css +++ b/src/css/modal.css @@ -3,7 +3,7 @@ top: 50%; left: 50%; font-size: 1em; - width: 45em; + width: 50em; max-width: calc(100% - 2em); min-width: 10em; transform: translate(-50%, -50%); @@ -14,7 +14,7 @@ } .modal-large { - width: 65em; + width: 70em; max-width: calc(100% - 2em); } diff --git a/src/css/typography.css b/src/css/typography.css index b40c22c8..2c0f1550 100755 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -18,10 +18,10 @@ h1 { } h2 { - font-size: 1.2em; - font-family: var(--theme-font-ui-name); - font-weight: var(--theme-font-ui-weight); - font-style: var(--theme-font-ui-style); + font-size: 1.3em; + font-family: var(--theme-font-display-name); + font-weight: var(--theme-font-display-weight); + font-style: var(--theme-font-display-style); } h3 { @@ -68,7 +68,7 @@ hr { border: 0; border-top: var(--horizontal-rule-small); border-radius: var(--theme-radius); - margin: calc(var(--form-wrap-space) * 1.5) 0; + margin: calc(var(--form-wrap-space) * 2) 0; clear: both; transition: border-color var(--layout-transition-extra-fast); } diff --git a/src/css/variables.css b/src/css/variables.css index ccd28b10..00e774ad 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -111,18 +111,12 @@ --link-area-width: 100%; --link-item-color: var(--theme-color-02); --link-item-color-opacity: 1; - --link-item-image-opacity: 1; --link-item-color-focus-hover: var(--theme-color-03); + --link-item-mame-color: var(--theme-color-18); + --link-item-mame-color-focus-hover: var(--theme-style-text); + --link-item-image-opacity: 1; --link-item-size: 1em; --link-item-display-space: 0.25em; - --link-item-display-gutter: 2; - --link-item-display-letter-size: 3em; - --link-item-display-icon-size: 3em; - --link-item-display-image-size: 3em; - --link-item-display-rotate: 0deg; - --link-item-display-translate-x: 0em; - --link-item-display-translate-y: 0em; - --link-item-display-name-size: 0.9em; --link-item-border: 0; --link-item-padding: 1; --link-item-clip-padding: 1em; @@ -420,10 +414,6 @@ --link-item-edit-height: 2em; } -.is-link-item-color-opacity { - --link-item-clip-padding: calc(0 * 1em); -} - @media (min-width: 700px) { :root { /* theme */ diff --git a/src/html/menu/content/background/color.html b/src/html/menu/content/background/color.html index e29d37c3..e5aadf66 100644 --- a/src/html/menu/content/background/color.html +++ b/src/html/menu/content/background/color.html @@ -31,52 +31,54 @@ -
+

Take care as some colours may make the Clock, Date and other text unreadable.

-
-
-
-
- - - +
+
+
+
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
-
- - - +
+
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
- - - +
+
+ + + +
diff --git a/src/html/menu/content/background/image.html b/src/html/menu/content/background/image.html index 3eba7f44..85be2e05 100644 --- a/src/html/menu/content/background/image.html +++ b/src/html/menu/content/background/image.html @@ -22,10 +22,10 @@
-
+

Max image size 5MB, (due to browser local storage limits).

-
+

Take care with large files, they may impact performance.

@@ -42,17 +42,13 @@
-
+

If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.


-
+

Unsplash can be used for random images, eg:

-
-

https://source.unsplash.com/random/1920x1080/?night,day,sky

-
-

Change parameters after .../random/ for more options. Loading times may vary.

diff --git a/src/html/menu/content/bookmarks.html b/src/html/menu/content/bookmarks.html index a9e6853e..f5dce9b2 100644 --- a/src/html/menu/content/bookmarks.html +++ b/src/html/menu/content/bookmarks.html @@ -4,14 +4,14 @@ @@include("./bookmarks/alignment.html") - @@include("./bookmarks/bookmarks.html") - - @@include("./bookmarks/content.html") + @@include("./bookmarks/general.html") @@include("./bookmarks/visual.html") @@include("./bookmarks/name.html") + @@include("./bookmarks/content.html") + @@include("./bookmarks/style.html") @@include("./bookmarks/color.html") diff --git a/src/html/menu/content/bookmarks/accent.html b/src/html/menu/content/bookmarks/accent.html index ba7e7018..79c4225a 100644 --- a/src/html/menu/content/bookmarks/accent.html +++ b/src/html/menu/content/bookmarks/accent.html @@ -4,17 +4,33 @@
-
- +
+

+
+ + +
- - +
-
- +
+

@@ -115,8 +133,8 @@
@@ -125,13 +143,16 @@
-
- +
+ +
+
+
diff --git a/src/html/menu/content/bookmarks/bookmarks.html b/src/html/menu/content/bookmarks/general.html similarity index 90% rename from src/html/menu/content/bookmarks/bookmarks.html rename to src/html/menu/content/bookmarks/general.html index 5178885a..154be9be 100644 --- a/src/html/menu/content/bookmarks/bookmarks.html +++ b/src/html/menu/content/bookmarks/general.html @@ -1,16 +1,16 @@ - -
+

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

-
-

Some Header items may not be shown.

diff --git a/src/html/menu/content/header/area.html b/src/html/menu/content/header/area.html index b30defc7..a6d1624b 100644 --- a/src/html/menu/content/header/area.html +++ b/src/html/menu/content/header/area.html @@ -14,7 +14,7 @@
-
+

Max width is defined by Layout Area Width.

diff --git a/src/html/menu/content/header/color.html b/src/html/menu/content/header/color.html index 07d3d58e..f412510c 100644 --- a/src/html/menu/content/header/color.html +++ b/src/html/menu/content/header/color.html @@ -29,10 +29,8 @@
-
+

The page may not scroll if Bookmarks are not shown.

-
-

May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.


@@ -46,7 +44,7 @@
-
+

@@ -59,7 +57,7 @@
-
+

@@ -70,49 +68,51 @@
-
-
-
-
- - - +
+
+
+
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
-
- - - +
+
+
+ + + +
-
-
-
- - - +
+
+ + + +
-
-
-
- - - +
+
+ + + +
@@ -132,7 +132,7 @@
-
+

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

diff --git a/src/html/menu/content/header/coloraccent.html b/src/html/menu/content/header/coloraccent.html index 12556906..0f4699c3 100644 --- a/src/html/menu/content/header/coloraccent.html +++ b/src/html/menu/content/header/coloraccent.html @@ -7,7 +7,7 @@
-
+

Colour and Accent controls can also be found under Theme.

diff --git a/src/html/menu/content/header/date.html b/src/html/menu/content/header/date.html index 2e243383..55d89af1 100644 --- a/src/html/menu/content/header/date.html +++ b/src/html/menu/content/header/date.html @@ -26,7 +26,7 @@
-
+

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

diff --git a/src/html/menu/content/header/position.html b/src/html/menu/content/header/position.html index d535ad3d..794e13c3 100644 --- a/src/html/menu/content/header/position.html +++ b/src/html/menu/content/header/position.html @@ -23,7 +23,7 @@
-
+

Only available when Layout Alignment is Vertical.

diff --git a/src/html/menu/content/header/search.html b/src/html/menu/content/header/search.html index 180db4c8..3fe210b5 100644 --- a/src/html/menu/content/header/search.html +++ b/src/html/menu/content/header/search.html @@ -57,7 +57,7 @@
-
+

May not work in some browsers.


@@ -98,7 +98,7 @@
-
+

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.

@@ -106,7 +106,7 @@
-
+

Sets the name attribute on the Search input field.

This defines the name passed to the search engine when submitting. If not sure leave blank.

@@ -141,7 +141,7 @@
-
+

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


diff --git a/src/html/menu/content/header/transitional.html b/src/html/menu/content/header/transitional.html index 72f9cc58..3dffbd72 100644 --- a/src/html/menu/content/header/transitional.html +++ b/src/html/menu/content/header/transitional.html @@ -7,7 +7,7 @@
-
+

Only available when Date or Time is shown.

diff --git a/src/html/menu/content/layout/alignment.html b/src/html/menu/content/layout/alignment.html index d5b66c41..8eeb0c73 100644 --- a/src/html/menu/content/layout/alignment.html +++ b/src/html/menu/content/layout/alignment.html @@ -46,7 +46,7 @@
-
+

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


@@ -91,7 +91,7 @@
-
+

Only available when Bookmarks are shown.

diff --git a/src/html/menu/content/layout/page.html b/src/html/menu/content/layout/page.html index 7975bc3e..33058b27 100644 --- a/src/html/menu/content/layout/page.html +++ b/src/html/menu/content/layout/page.html @@ -31,7 +31,7 @@
-
+

May not work in some browsers.

diff --git a/src/html/menu/content/layout/scaling.html b/src/html/menu/content/layout/scaling.html index c8a1a222..f7754d84 100644 --- a/src/html/menu/content/layout/scaling.html +++ b/src/html/menu/content/layout/scaling.html @@ -11,10 +11,8 @@
-
+

Resize all elements on the page.

-
-

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

diff --git a/src/html/menu/content/theme/accent.html b/src/html/menu/content/theme/accent.html index 3caa6692..f88f39e4 100644 --- a/src/html/menu/content/theme/accent.html +++ b/src/html/menu/content/theme/accent.html @@ -13,7 +13,7 @@
-
+

Accent Colour can also be changed from the Header Area.

@@ -119,10 +119,8 @@
-
+

Take casre as a small delay in Accent hue change may cause performance issues.

-
-

Auto change Accent hue will not work when the Accent colour is a grey or black.

diff --git a/src/html/menu/content/theme/color.html b/src/html/menu/content/theme/color.html index 2d0269da..fad5613d 100644 --- a/src/html/menu/content/theme/color.html +++ b/src/html/menu/content/theme/color.html @@ -73,13 +73,9 @@
-
+

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 Primary colour.


@@ -91,7 +87,7 @@
-
+

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

diff --git a/src/html/menu/content/theme/fonts.html b/src/html/menu/content/theme/fonts.html index 539a2135..47ac280f 100644 --- a/src/html/menu/content/theme/fonts.html +++ b/src/html/menu/content/theme/fonts.html @@ -10,13 +10,9 @@
-
+

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

-
-

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

@@ -37,27 +33,31 @@
-
+

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


-
-
+
+
- - +
+
+ + +
+
+ + +
+
-
- - +
+
-
- -
@@ -71,13 +71,9 @@
-
+

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", "Source Sans Pro" or "Noto Sans"

-
-

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

@@ -98,27 +94,31 @@
-
+

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


-
-
+
+
- - +
+
+ + +
+
+ + +
+
-
- - +
+
-
- -
diff --git a/src/html/menu/content/theme/preset.html b/src/html/menu/content/theme/preset.html index ed23db9d..25d4ef35 100644 --- a/src/html/menu/content/theme/preset.html +++ b/src/html/menu/content/theme/preset.html @@ -4,7 +4,7 @@
-
+

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

diff --git a/src/html/menu/content/theme/shade.html b/src/html/menu/content/theme/shade.html index 4f881a14..82248447 100644 --- a/src/html/menu/content/theme/shade.html +++ b/src/html/menu/content/theme/shade.html @@ -11,7 +11,7 @@
-
+

The shade appears behind Modals and the Menu.

diff --git a/src/html/menu/content/theme/style.html b/src/html/menu/content/theme/style.html index 013b1d85..2e832e84 100644 --- a/src/html/menu/content/theme/style.html +++ b/src/html/menu/content/theme/style.html @@ -15,10 +15,8 @@ -
+

Flip the colour shades defined by the primary Colour.

-
-

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

diff --git a/src/html/menu/nav.html b/src/html/menu/nav.html index f59637fd..bf627ccf 100644 --- a/src/html/menu/nav.html +++ b/src/html/menu/nav.html @@ -34,10 +34,10 @@