diff --git a/package-lock.json b/package-lock.json index 48804c51..de9da3a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.53.0", + "version": "5.54.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ae552522..2352beff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.53.0", + "version": "5.54.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/link.css b/src/css/link.css index b903c16c..268fdd0f 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -187,10 +187,16 @@ @media (min-width: 900px) { - .is-link-breakpoint-md .link-item-wide, - .is-link-breakpoint-lg .link-item-wide, - .is-link-breakpoint-xl .link-item-wide, - .is-link-breakpoint-xxl .link-item-wide { + .is-link-breakpoint-lg.is-link-style-list .link-item-wide, + .is-link-breakpoint-xl.is-link-style-list .link-item-wide, + .is-link-breakpoint-xxl.is-link-style-list .link-item-wide { + grid-column: span 2; + } + + .is-link-breakpoint-md.is-link-style-block .link-item-wide, + .is-link-breakpoint-lg.is-link-style-block .link-item-wide, + .is-link-breakpoint-xl.is-link-style-block .link-item-wide, + .is-link-breakpoint-xxl.is-link-style-block .link-item-wide { grid-column: span 2; } @@ -1008,32 +1014,56 @@ @media (min-width: 900px) { - .is-link-orientation-top.is-link-style-block .link-item-wide, - .is-link-orientation-bottom.is-link-style-block .link-item-wide { - --link-item-edit-height: 2.5em; + .is-link-breakpoint-md.is-link-orientation-top.is-link-style-block .link-item-wide, + .is-link-breakpoint-lg.is-link-orientation-top.is-link-style-block .link-item-wide, + .is-link-breakpoint-xl.is-link-orientation-top.is-link-style-block .link-item-wide, + .is-link-breakpoint-xxl.is-link-orientation-top.is-link-style-block .link-item-wide, + .is-link-breakpoint-md.is-link-orientation-bottom.is-link-style-block .link-item-wide, + .is-link-breakpoint-lg.is-link-orientation-bottom.is-link-style-block .link-item-wide, + .is-link-breakpoint-xl.is-link-orientation-bottom.is-link-style-block .link-item-wide, + .is-link-breakpoint-xxl.is-link-orientation-bottom.is-link-style-block .link-item-wide { + --link-item-edit-height: var(--link-item-edit-height-short); } - .is-link-orientation-top.is-link-style-block .link-item-wide .link-control, - .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control { + .is-link-breakpoint-md.is-link-orientation-top.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-lg.is-link-orientation-top.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-xl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-xxl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-md.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-lg.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-xl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control, + .is-link-breakpoint-xxl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control { flex-wrap: nowrap; } - .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1) { - border-bottom-left-radius: var(--theme-radius); - } - - .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4) { - border-bottom-left-radius: 0; - } - - .is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1) { + .is-link-breakpoint-md.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-lg.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-xl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-xxl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1) { border-top-left-radius: var(--theme-radius); border-bottom-left-radius: 0; } - .is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4) { + .is-link-breakpoint-md.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-lg.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-xl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-xxl.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4) { border-top-left-radius: 0; } + + .is-link-breakpoint-md.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-lg.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-xl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1), + .is-link-breakpoint-xxl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1) { + border-bottom-left-radius: var(--theme-radius); + } + + .is-link-breakpoint-md.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-lg.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-xl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4), + .is-link-breakpoint-xxl.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4) { + border-bottom-left-radius: 0; + } } .link-url { @@ -1232,10 +1262,12 @@ .link-item-preview-grid-small .link-item-preview.link-item-wide { left: 0; + grid-column: span 2; } .link-item-preview-grid-small .link-item-preview.link-item-tall { top: 0; + grid-row: span 2; } .is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front, diff --git a/src/css/variables.css b/src/css/variables.css index 9ab762e3..fcea4563 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -109,6 +109,8 @@ --group-border: 0; /* link */ --link-area-width: 100%; + --link-item-edit-height-short: 2em; + --link-item-edit-height-tall: 5em; --link-item-color: var(--theme-color-02); --link-item-color-opacity: 1; --link-item-color-focus-hover: var(--theme-color-03); @@ -403,7 +405,7 @@ --link-item-width: 11em; --link-item-height: 10em; --link-item-url-height: 2.25em; - --link-item-edit-height: 5em; + --link-item-edit-height: var(--link-item-edit-height-tall); } .is-link-style-list { @@ -411,7 +413,7 @@ --link-item-width: 20em; --link-item-height: 4em; --link-item-url-height: 1.5em; - --link-item-edit-height: 2em; + --link-item-edit-height: var(--link-item-edit-height-short); } @media (min-width: 700px) { diff --git a/src/js/version.js b/src/js/version.js index aeb93bf4..105bc72a 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "5.53.0"; + var current = "5.54.0"; var name = "Jaded Raven"; diff --git a/src/manifest.json b/src/manifest.json index 8437e5bb..39e0930e 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "name": "nightTab", "short_name": "nightTab", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", - "version": "5.53.0", + "version": "5.54.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"