marcel/linkding
1
0
Fork 0
mirror of https://github.com/sissbruecker/linkding.git synced 2025-08-11 12:47:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix CSS sub-pixel issues

Browse Source
This commit is contained in:
Sascha Ißbrücker
2024-03-29 20:49:07 +01:00
parent 9c48085829
commit 92f62d3ded
12 changed files with 120 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
bookmarks/styles/base.scss
View File

@@ -9,7 +9,7 @@ body {
}
header {
margin-bottom: $unit-10;
margin-bottom: $unit-9;
.logo {
width: 28px;
@@ -50,14 +50,14 @@ section.content-area {
border-bottom: solid 1px $border-color;
display: flex;
flex-wrap: wrap;
column-gap: $unit-6;
padding-bottom: $unit-2;
margin-bottom: $unit-4;
column-gap: $unit-5;
padding-bottom: $unit-1;
margin-bottom: $unit-3;
h2 {
flex: 0 0 auto;
line-height: 1.8rem;
margin-bottom: 0;
line-height: $unit-9;
margin: 0;
}
.header-controls {
@@ -95,10 +95,6 @@ span.confirmation {
text-overflow: ellipsis;
}
.text-sm {
font-size: 0.7rem;
}
.text-gray-dark {
color: $gray-color-dark;
}
@@ -124,10 +120,6 @@ span.confirmation {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
.btn.btn-wide {
padding-left: $unit-6;
padding-right: $unit-6;

106
bookmarks/styles/bookmark-page.scss
View File

@@ -1,11 +1,10 @@
.bookmarks-page.grid {
grid-gap: $unit-10;
grid-gap: $unit-9;
}
/* Bookmark area header controls */
.bookmarks-page .content-area-header {
--searchbox-max-width: 350px;
--searchbox-height: 1.8rem;
@media (max-width: $size-sm) {
--searchbox-max-width: initial;
@@ -20,18 +19,18 @@
// Regular input
input[type='search'] {
height: var(--searchbox-height);
height: $control-size;
-webkit-appearance: none;
}
// Enhanced auto-complete input
// This needs a bit more wrangling to make the CSS component align with the attached button
.form-autocomplete {
height: var(--searchbox-height);
height: $control-size;
.form-autocomplete-input {
width: 100%;
height: var(--searchbox-height);
height: $control-size;
input[type='search'] {
width: 100%;
@@ -72,6 +71,7 @@
.menu {
padding: $unit-4;
min-width: 250px;
font-size: $font-size-sm;
}
.menu .actions {
@@ -108,6 +108,9 @@ ul.bookmark-list {
list-style: none;
margin: 0;
padding: 0;
/* Increase line-height for better separation within / between items */
line-height: 1.1rem;
}
@keyframes appear {
@@ -125,54 +128,66 @@ ul.bookmark-list {
/* Bookmarks */
li[ld-bookmark-item] {
position: relative;
margin-top: $unit-2;
[ld-bulk-edit-checkbox].form-checkbox {
display: none;
}
.title {
position: relative;
}
.title img {
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.title img + a {
padding-left: 22px;
}
.title a {
display: inline-block;
vertical-align: top;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&[data-tooltip]:hover::after, &[data-tooltip]:focus::after {
content: attr(data-tooltip);
position: absolute;
z-index: 10;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 100%;
height: fit-content;
background-color: #292f62;
color: #fff;
padding: $unit-1;
border-radius: $border-radius;
border: 1px solid #424a8c;
font-size: $font-size-sm;
font-style: normal;
white-space: normal;
pointer-events: none;
animation: 0.3s ease 0s appear;
}
.title a[data-tooltip]:hover::after, .title a[data-tooltip]:focus::after {
content: attr(data-tooltip);
position: absolute;
z-index: 10;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 90%;
height: fit-content;
background-color: #292f62;
color: #fff;
padding: $unit-1;
border-radius: $border-radius;
border: 1px solid #424a8c;
font-size: $font-size-sm;
font-style: normal;
white-space: normal;
pointer-events: none;
animation: 0.3s ease 0s appear;
}
&.unread .title a {
font-style: italic;
}
.title img {
width: 16px;
height: 16px;
margin-right: $unit-h;
vertical-align: text-top;
}
.url-display {
.url-path, .url-display {
font-size: $font-size-sm;
color: $secondary-link-color;
}
@@ -208,6 +223,8 @@ li[ld-bookmark-item] {
}
.actions {
font-size: $font-size-sm;
a, button.btn-link {
color: $gray-color;
padding: 0;
@@ -224,10 +241,6 @@ li[ld-bookmark-item] {
color: $gray-color-dark;
}
}
.separator {
align-self: flex-start;
}
}
}
@@ -236,6 +249,8 @@ li[ld-bookmark-item] {
}
.tag-cloud {
/* Increase line-height for better separation within / between items */
line-height: 1.1rem;
.selected-tags {
margin-bottom: $unit-4;
@@ -291,7 +306,7 @@ $bulk-edit-transition-duration: 400ms;
.bulk-edit-bar {
margin-top: -1px;
margin-left: -$bulk-edit-bar-offset;
margin-bottom: $unit-4;
margin-bottom: $unit-3;
max-height: 0;
overflow: hidden;
transition: max-height $bulk-edit-transition-duration;
@@ -313,7 +328,6 @@ $bulk-edit-transition-duration: 400ms;
width: $bulk-edit-toggle-width;
margin: 0 0 0 $bulk-edit-toggle-offset;
padding: 0;
min-height: 1rem;
}
/* Bookmark checkboxes */
@@ -321,8 +335,10 @@ $bulk-edit-transition-duration: 400ms;
display: block;
position: absolute;
width: $bulk-edit-toggle-width;
min-height: $bulk-edit-toggle-width;
left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset;
top: 0;
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
visibility: hidden;
@@ -330,7 +346,7 @@ $bulk-edit-transition-duration: 400ms;
transition: all $bulk-edit-transition-duration;
.form-icon {
top: $unit-1;
top: 0;
}
}
@@ -342,7 +358,7 @@ $bulk-edit-transition-duration: 400ms;
/* Actions */
.bulk-edit-actions {
display: flex;
align-items: baseline;
align-items: center;
padding: $unit-1 0;
border-top: solid 1px $border-color;
gap: $unit-2;

4
bookmarks/styles/settings.scss
View File

@@ -1,9 +1,9 @@
.settings-page {
section.content-area {
margin-bottom: $unit-12;
margin-bottom: $unit-10;
h2 {
margin-bottom: $unit-4;
margin-bottom: $unit-3;
}
}

39
bookmarks/styles/spectre.scss
View File

@@ -3,6 +3,32 @@
// Variables and mixins
@import "../../node_modules/spectre.css/src/variables";
// Customize variables to reduce font and control sizes
// Can use CSS variables for font sizes, as they are not used in SCSS calculations
$font-size: var(--font-size);
$font-size-sm: var(--font-size-sm);
$font-size-lg: var(--font-size-lg);
// Can't use CSS variables for these, used in SCSS calculations
$line-height: 1rem;
$control-size: $unit-8;
$control-size-sm: $unit-6;
$control-size-lg: $unit-9;
// Declare defaults for CSS variables, expose SCSS variables as CSS variables
html {
--font-size: 0.7rem;
--font-size-sm: 0.65rem;
--font-size-lg: 0.8rem;
--control-size: #{$control-size};
--control-size-sm: #{$control-size-sm};
--control-size-lg: #{$control-size-lg};
}
// Mixins
@import "../../node_modules/spectre.css/src/mixins";
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
@@ -64,19 +90,6 @@ a:visited:hover {
transition: none !important;
}
// Fix radio button sub-pixel size
.form-radio .form-icon {
width: 14px;
height: 14px;
border-width: 1px;
}
.form-radio input:checked + .form-icon::before {
top: 3px;
left: 3px;
transform: unset;
}
// Make code work with light and dark theme
code {
color: $gray-color-dark;

2
bookmarks/styles/variables-dark.scss
View File

@@ -1,5 +1,3 @@
$html-font-size: 18px !default;
$body-bg: #161822 !default;
$bg-color: lighten($body-bg, 5%) !default;
$bg-color-light: lighten($body-bg, 5%) !default;

2
bookmarks/styles/variables-light.scss
View File

@@ -1,5 +1,3 @@
$html-font-size: 18px !default;
$alternative-color: #05a6a3;
$alternative-color-dark: darken($alternative-color, 5%);