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",
"version": "5.53.0",
"version": "5.54.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -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": {

70
src/css/link.css
View File

@ -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,

6
src/css/variables.css
View File

@ -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) {

2
src/js/version.js
View File

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

2
src/manifest.json
View File

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