toolz/linkding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style improvements

Browse Source
This commit is contained in:
0x1d
2025-11-16 11:05:23 +01:00
parent 674efefc0c
commit 1dfbdd6e71
2 changed files with 268 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app.js
View File

@@ -740,6 +740,7 @@ function createLinkCard(link) {
<a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url">
${escapeHtml(link.url)}
</a>
</div>
<div class="link-footer">
<span class="link-date">${formattedDate}</span>
<div class="link-actions">
@@ -769,7 +770,6 @@ function createLinkCard(link) {
</div>
</div>
</div>
</div>
`;
}

276
public/styles.css
View File

@@ -744,8 +744,7 @@ body {
}
.links-container.layout-masonry .link-footer {
margin-top: auto;
padding-top: 0.75rem;
padding: 0.75rem 1.25rem;
}
.links-container.layout-masonry .empty-state {
@@ -764,7 +763,9 @@ body {
}
.links-container.layout-list .link-card {
flex-direction: row;
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr auto;
border-radius: 10px;
padding: 0;
}
@@ -772,13 +773,17 @@ body {
.links-container.layout-list .link-image {
width: 100px;
height: 100px;
flex-shrink: 0;
grid-column: 1;
grid-row: 1;
border-radius: 0;
}
.links-container.layout-list .link-content {
padding: 0.75rem 1rem;
flex: 1;
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
}
.links-container.layout-list .link-title {
@@ -800,8 +805,11 @@ body {
}
.links-container.layout-list .link-footer {
padding-top: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--border);
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.links-container.layout-list .link-date {
@@ -872,6 +880,10 @@ body {
flex-direction: column;
}
.link-card .link-footer {
padding: 1rem 1.5rem;
}
.link-title {
font-size: 1.25rem;
font-weight: 600;
@@ -914,7 +926,6 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
@@ -1080,27 +1091,43 @@ body {
}
.title-icon {
font-size: 1.25rem;
width: 44px;
height: 44px;
}
.header-right {
flex-wrap: wrap;
gap: 0.75rem;
}
/* Remove focus outline and active state persistence on mobile nav buttons */
.search-toggle-btn,
.add-link-toggle-btn,
.lists-toggle-btn,
.layout-toggle-btn {
.layout-toggle-btn,
.login-toggle-btn {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
width: 44px;
height: 44px;
padding: 0.625rem;
}
.search-toggle-btn svg,
.add-link-toggle-btn svg,
.lists-toggle-btn svg,
.layout-toggle-btn svg,
.login-toggle-btn svg {
width: 22px;
height: 22px;
}
.search-toggle-btn:focus,
.add-link-toggle-btn:focus,
.lists-toggle-btn:focus,
.layout-toggle-btn:focus {
.layout-toggle-btn:focus,
.login-toggle-btn:focus {
outline: none;
}
@@ -1108,7 +1135,8 @@ body {
.search-toggle-btn:active:not(.active),
.add-link-toggle-btn:active:not(.active),
.lists-toggle-btn:active:not(.active),
.layout-toggle-btn:active:not(.active) {
.layout-toggle-btn:active:not(.active),
.login-toggle-btn:active:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
@@ -1118,7 +1146,8 @@ body {
.search-toggle-btn:not(.active),
.add-link-toggle-btn:not(.active),
.lists-toggle-btn:not(.active),
.layout-toggle-btn:not(.active) {
.layout-toggle-btn:not(.active),
.login-toggle-btn:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
@@ -1137,14 +1166,43 @@ body {
}
.user-info {
padding: 0.5rem;
padding: 0;
gap: 0;
min-height: 44px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn {
width: 44px;
height: 44px;
padding: 0.625rem;
margin: 0;
}
.logout-btn svg {
width: 20px;
height: 20px;
}
.add-link-toggle-btn {
display: flex;
}
.lists-toggle-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.lists-toggle-btn svg {
width: 22px;
height: 22px;
}
.layout-toggle-wrapper {
position: relative;
}
@@ -1169,14 +1227,34 @@ body {
transform: translateY(0);
}
.add-link-wrapper .input-wrapper {
height: 52px !important;
padding: 0.75rem 1rem !important;
}
.add-link-wrapper .input-wrapper #linkInput {
font-size: 1rem;
}
.add-link-wrapper .input-wrapper .btn-add {
width: 44px !important;
height: 44px !important;
padding: 0.625rem !important;
}
.add-link-wrapper .input-wrapper .btn-add::after {
font-size: 1.5rem !important;
}
.search-wrapper {
width: 100%;
margin: 0;
padding: 0.625rem 1rem;
padding: 0.75rem 1rem;
display: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
min-height: 52px;
}
.search-wrapper.show {
@@ -1185,31 +1263,130 @@ body {
transform: translateY(0);
}
.link-actions {
flex-wrap: wrap;
gap: 0.5rem;
}
.archive-btn,
.delete-btn {
width: 36px;
height: 36px;
.search-wrapper #searchInput {
font-size: 1rem;
}
.input-wrapper {
flex-wrap: nowrap;
min-height: 48px;
padding: 0.625rem 1rem;
}
#linkInput {
font-size: 1rem;
padding: 0.625rem 0;
}
.btn-add {
width: 36px;
height: 36px;
padding: 0.5rem;
width: 44px;
height: 44px;
padding: 0.625rem;
flex-shrink: 0;
}
.btn-add::after {
font-size: 1.75rem;
}
.link-actions {
flex-wrap: wrap;
gap: 0.625rem;
}
.archive-btn,
.delete-btn,
.add-to-list-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.archive-btn svg,
.delete-btn svg,
.add-to-list-btn svg {
width: 20px;
height: 20px;
}
.add-to-list-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.add-to-list-btn svg {
width: 20px;
height: 20px;
}
.edit-lists-btn,
.clear-list-filters-btn {
padding: 0.625rem 1rem;
font-size: 0.9375rem;
min-height: 44px;
}
.edit-lists-btn svg {
width: 18px;
height: 18px;
}
.list-filter-chip {
padding: 0.625rem 1rem;
font-size: 0.9375rem;
min-height: 44px;
}
.archive-toggle-slider {
width: 50px;
height: 28px;
}
.archive-toggle-slider:before {
height: 22px;
width: 22px;
}
.archive-toggle-switch input:checked + .archive-toggle-slider:before {
transform: translateX(22px);
}
.links-container {
grid-template-columns: 1fr;
}
.close-modal-btn,
.close-overlay-btn {
width: 44px;
height: 44px;
padding: 0.625rem;
}
.close-modal-btn svg,
.close-overlay-btn svg {
width: 22px;
height: 22px;
}
.btn-login,
.btn-create-list {
padding: 0.875rem 1.5rem;
font-size: 1rem;
min-height: 48px;
}
.form-group input {
padding: 0.875rem;
font-size: 1rem;
min-height: 48px;
}
.create-list-form input {
padding: 0.875rem;
font-size: 1rem;
min-height: 48px;
}
}
/* Scroll to Top Button */
@@ -1235,6 +1412,20 @@ body {
z-index: 999;
}
@media (max-width: 768px) {
.scroll-to-top-btn {
width: 56px;
height: 56px;
bottom: 1.5rem;
right: 1.5rem;
}
.scroll-to-top-btn svg {
width: 28px;
height: 28px;
}
}
.scroll-to-top-btn.show {
opacity: 1;
visibility: visible;
@@ -1258,7 +1449,7 @@ body {
@media (max-width: 400px) {
.header-right {
flex-wrap: nowrap;
gap: 0.5rem;
gap: 0.625rem;
}
.search-wrapper {
@@ -1268,8 +1459,13 @@ body {
.scroll-to-top-btn {
bottom: 1.5rem;
right: 1.5rem;
width: 45px;
height: 45px;
width: 52px;
height: 52px;
}
.scroll-to-top-btn svg {
width: 26px;
height: 26px;
}
}
@@ -2062,18 +2258,28 @@ body {
.public-url-btn,
.save-list-btn,
.delete-list-btn {
padding: 0.25rem;
min-width: 28px;
width: 28px;
height: 28px;
padding: 0.625rem;
min-width: 44px;
width: 44px;
height: 44px;
}
.toggle-public-btn svg,
.public-url-btn svg,
.save-list-btn svg,
.delete-list-btn svg {
width: 14px;
height: 14px;
width: 20px;
height: 20px;
}
.list-item {
padding: 0.75rem;
}
.list-name-input {
font-size: 1rem;
padding: 0.5rem;
min-height: 44px;
}
}