Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[design] improve link item when style is wide and list

This commit is contained in:
zombieFox 2020-07-19 13:22:06 +01:00
parent 7862f5cabe
commit 4f1f3a7e94
6 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.53.0", "version": "5.54.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

70
src/css/link.css
View File

@ -187,10 +187,16 @@
@media (min-width: 900px) { @media (min-width: 900px) {
.is-link-breakpoint-md .link-item-wide, .is-link-breakpoint-lg.is-link-style-list .link-item-wide,
.is-link-breakpoint-lg .link-item-wide, .is-link-breakpoint-xl.is-link-style-list .link-item-wide,
.is-link-breakpoint-xl .link-item-wide, .is-link-breakpoint-xxl.is-link-style-list .link-item-wide {
.is-link-breakpoint-xxl .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; grid-column: span 2;
} }
@ -1008,32 +1014,56 @@
@media (min-width: 900px) { @media (min-width: 900px) {
.is-link-orientation-top.is-link-style-block .link-item-wide, .is-link-breakpoint-md.is-link-orientation-top.is-link-style-block .link-item-wide,
.is-link-orientation-bottom.is-link-style-block .link-item-wide { .is-link-breakpoint-lg.is-link-orientation-top.is-link-style-block .link-item-wide,
--link-item-edit-height: 2.5em; .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-breakpoint-md.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-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; flex-wrap: nowrap;
} }
.is-link-orientation-bottom.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),
border-bottom-left-radius: var(--theme-radius); .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) {
.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) {
border-top-left-radius: var(--theme-radius); border-top-left-radius: var(--theme-radius);
border-bottom-left-radius: 0; 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; 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 { .link-url {
@ -1232,10 +1262,12 @@
.link-item-preview-grid-small .link-item-preview.link-item-wide { .link-item-preview-grid-small .link-item-preview.link-item-wide {
left: 0; left: 0;
grid-column: span 2;
} }
.link-item-preview-grid-small .link-item-preview.link-item-tall { .link-item-preview-grid-small .link-item-preview.link-item-tall {
top: 0; top: 0;
grid-row: span 2;
} }
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front,

6
src/css/variables.css
View File

@ -109,6 +109,8 @@
--group-border: 0; --group-border: 0;
/* link */ /* link */
--link-area-width: 100%; --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: var(--theme-color-02);
--link-item-color-opacity: 1; --link-item-color-opacity: 1;
--link-item-color-focus-hover: var(--theme-color-03); --link-item-color-focus-hover: var(--theme-color-03);
@ -403,7 +405,7 @@
--link-item-width: 11em; --link-item-width: 11em;
--link-item-height: 10em; --link-item-height: 10em;
--link-item-url-height: 2.25em; --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 { .is-link-style-list {
@ -411,7 +413,7 @@
--link-item-width: 20em; --link-item-width: 20em;
--link-item-height: 4em; --link-item-height: 4em;
--link-item-url-height: 1.5em; --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) { @media (min-width: 700px) {

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.53.0"; var current = "5.54.0";
var name = "Jaded Raven"; var name = "Jaded Raven";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.53.0", "version": "5.54.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"