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.
Max image size 5MB, (due to browser local storage limits).
Take care with large files, they may impact performance.
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.
Apply an Accent override to all Bookmarks.
-Accent overrides can also be changed by editing individual Bookmarks.
+Effects may not be visible if the Bookmark Area is full width.
-Only available when Layout Alignment is Vertical.
Flow Bookmarks either from the left or right of the Bookmark Area.
Max width is defined by Layout Area Width.
Apply a colour override to all Bookmarks.
-Take care as some colours may make the Letter/Icon and Name unreadable.
-Colour overrides can also be changed by editing individual Bookmarks.
+Change the Colour opacity of all Bookmark tiles.
+Position the Visual element (letter, icon or image) and Name inside the Bookmark tile.
+Only available when Letter/Icon/Image and Name are shown.
+Only available when Visual element and Name are shown.
Only available when Letter/Icon/Image and Name are shown.
+Only available when Letter/Icon/Image and Name are shown.
+Only available when Visual element and Name are shown.
+Effects may not be visible if Theme Shadow is set to 0.
Change the Background image opacity of all Bookmark tiles.
+Show or hide all Bookmark Names.
+This can also be changed by editing individual Bookmarks.
+Display the URL and Controls either at the top or bottom of a Bookmark Tile.
Show or hide all Bookmark tile Visual elements (letter, icon or image).
+This can also be changed by editing individual Bookmarks.
+Only applies to Letters or Icons.
Download a backup of your nightTab Bookmarks and Settings.
-This file can later be imported on this or another deivce.
Wipe all data and restore nightTab to default state.
Restore a previously exported nightTab backup.
Effects may not be visible if the Group Name is not shown.
Border between groups may not be visible if there is only one group.
Group Names can also be changed by editing individual Groups.
Group Open all buttons can also be changed by editing individual Groups.
Effects may not be visible if the Header Area is full width.
-Only available when Layout Alignment is Vertical.
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.
Max width is defined by Layout Area Width.
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.
May not be visible if Theme Radius is set to 0.
Colour and Accent controls can also be found under Theme.
Define what day "1" represents, either Monday or Sunday.
Only available when Layout Alignment is Vertical.
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.
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.
Only the Search box width control will change the Width of the Search box.
Only available when Date or Time is shown.
Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.
Only available when Bookmarks are shown.
May not work in some browsers.
Resize all elements on the page.
-Take care as some elements could scale up to outside the page.
Accent Colour can also be changed from the Header Area.
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.
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.
Light and dark shades from this colour are used across nightTabs.
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".
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", "Source Sans Pro" or "Noto Sans"
-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.
Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
The shade appears behind Modals and the Menu.
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.