Mirrors/linkding
2
0
Fork 0
mirror of https://github.com/sissbruecker/linkding synced 2024-11-21 19:03:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Format CSS with prettier

Browse source
This commit is contained in:
Sascha Ißbrücker 2024-09-23 11:04:36 +02:00
parent ed57da3c99
commit 95f489ea48
32 changed files with 2116 additions and 2044 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Makefile
View file

@ -13,3 +13,4 @@ format:
black bookmarks black bookmarks
black siteroot black siteroot
npx prettier bookmarks/frontend --write npx prettier bookmarks/frontend --write
npx prettier bookmarks/styles --write

6
bookmarks/styles/bookmark-details.css
View file

@ -12,7 +12,8 @@
gap: var(--unit-2); gap: var(--unit-2);
} }
& a.weblink img, & a.weblink svg { & a.weblink img,
& a.weblink svg {
flex: 0 0 auto; flex: 0 0 auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -110,7 +111,8 @@
gap: var(--unit-2); gap: var(--unit-2);
} }
& .status .form-group, .status .form-switch { & .status .form-group,
.status .form-switch {
margin: 0; margin: 0;
} }

59
bookmarks/styles/bookmark-form.css
View file

@ -1,38 +1,39 @@
.bookmarks-form-page { .bookmarks-form-page {
section { section {
max-width: 550px; max-width: 550px;
margin: 0 auto; margin: 0 auto;
} }
} }
.bookmarks-form { .bookmarks-form {
& .has-icon-right > input, & .has-icon-right > textarea { & .has-icon-right > input,
padding-right: 30px; & .has-icon-right > textarea {
} padding-right: 30px;
}
& .form-icon.loading { & .form-icon.loading {
visibility: hidden; visibility: hidden;
} }
& .form-group .clear-button { & .form-group .clear-button {
display: none; display: none;
padding: 0; padding: 0;
border: none; border: none;
height: auto; height: auto;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
& .form-input-hint.bookmark-exists { & .form-input-hint.bookmark-exists {
display: none; display: none;
color: var(--warning-color); color: var(--warning-color);
} }
& .form-input-hint.auto-tags { & .form-input-hint.auto-tags {
display: none; display: none;
color: var(--success-color); color: var(--success-color);
} }
& details.notes textarea { & details.notes textarea {
box-sizing: border-box; box-sizing: border-box;
} }
} }

876
bookmarks/styles/bookmark-page.css
View file

@ -1,508 +1,524 @@
:root { :root {
--bookmark-title-color: var(--primary-text-color); --bookmark-title-color: var(--primary-text-color);
--bookmark-title-weight: 500; --bookmark-title-weight: 500;
--bookmark-description-color: var(--text-color); --bookmark-description-color: var(--text-color);
--bookmark-description-weight: 400; --bookmark-description-weight: 400;
--bookmark-actions-color: var(--secondary-text-color); --bookmark-actions-color: var(--secondary-text-color);
--bookmark-actions-hover-color: var(--text-color); --bookmark-actions-hover-color: var(--text-color);
--bookmark-actions-weight: 400; --bookmark-actions-weight: 400;
--bulk-actions-bg-color: var(--gray-50); --bulk-actions-bg-color: var(--gray-50);
} }
/* Bookmark page grid */ /* Bookmark page grid */
.bookmarks-page.grid { .bookmarks-page.grid {
grid-gap: var(--unit-9); grid-gap: var(--unit-9);
} }
/* Bookmark area header controls */ /* Bookmark area header controls */
.bookmarks-page .search-container { .bookmarks-page .search-container {
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
max-width: 300px; max-width: 300px;
margin-left: auto; margin-left: auto;
& form { & form {
width: 100%; width: 100%;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
max-width: initial; max-width: initial;
margin-left: 0; margin-left: 0;
} }
/* Regular input */ /* Regular input */
& input[type='search'] { & input[type="search"] {
height: var(--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(--control-size);
& .form-autocomplete-input {
width: 100%;
height: var(--control-size);
& input[type='search'] {
width: 100%;
height: 100%;
margin: 0;
border: none;
}
}
}
/* Group search options button with search button */
height: var(--control-size); height: var(--control-size);
border-radius: var(--border-radius); -webkit-appearance: none;
box-shadow: var(--box-shadow-xs); }
& input, & .form-autocomplete-input { /* Enhanced auto-complete input */
border-top-right-radius: 0; /* This needs a bit more wrangling to make the CSS component align with the attached button */
border-bottom-right-radius: 0;
box-shadow: none; & .form-autocomplete {
height: var(--control-size);
& .form-autocomplete-input {
width: 100%;
height: var(--control-size);
& input[type="search"] {
width: 100%;
height: 100%;
margin: 0;
border: none;
}
}
}
/* Group search options button with search button */
height: var(--control-size);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-xs);
& input,
& .form-autocomplete-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
}
& .dropdown-toggle {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: none;
outline-offset: calc(var(--focus-outline-offset) * -1);
}
/* Search option menu styles */
& .dropdown {
& .menu {
padding: var(--unit-4);
min-width: 250px;
font-size: var(--font-size-sm);
} }
& .dropdown-toggle { & .menu .actions {
border-left: none; margin-top: var(--unit-4);
border-top-left-radius: 0; display: flex;
border-bottom-left-radius: 0; justify-content: space-between;
box-shadow: none;
outline-offset: calc(var(--focus-outline-offset) * -1);
} }
/* Search option menu styles */ & .form-group:first-of-type {
margin-top: 0;
& .dropdown {
& .menu {
padding: var(--unit-4);
min-width: 250px;
font-size: var(--font-size-sm);
}
& .menu .actions {
margin-top: var(--unit-4);
display: flex;
justify-content: space-between;
}
& .form-group:first-of-type {
margin-top: 0;
}
& .form-group {
margin-bottom: var(--unit-3);
}
& .radio-group {
& .form-label {
margin-bottom: var(--unit-1);
}
& .form-radio.form-inline {
margin: 0 var(--unit-2) 0 0;
padding: 0;
display: inline-flex;
align-items: center;
column-gap: var(--unit-1);
}
& .form-icon {
top: 0;
position: relative;
}
}
} }
& .form-group {
margin-bottom: var(--unit-3);
}
& .radio-group {
& .form-label {
margin-bottom: var(--unit-1);
}
& .form-radio.form-inline {
margin: 0 var(--unit-2) 0 0;
padding: 0;
display: inline-flex;
align-items: center;
column-gap: var(--unit-1);
}
& .form-icon {
top: 0;
position: relative;
}
}
}
} }
/* Bookmark list */ /* Bookmark list */
ul.bookmark-list { ul.bookmark-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
/* Increase line-height for better separation within / between items */ /* Increase line-height for better separation within / between items */
line-height: 1.1rem; line-height: 1.1rem;
} }
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
} }
90% { 90% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
/* Bookmarks */ /* Bookmarks */
li[ld-bookmark-item] { li[ld-bookmark-item] {
position: relative;
display: flex;
gap: var(--unit-2);
margin-top: 0;
margin-bottom: var(--unit-3);
& .content {
flex: 1 1 0;
min-width: 0;
}
& .preview-image {
flex: 0 0 auto;
width: 100px;
height: 60px;
margin-top: var(--unit-h);
border-radius: var(--border-radius);
border: solid 1px var(--border-color);
object-fit: cover;
&.placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--body-color-contrast);
& .img {
width: var(--unit-12);
height: var(--unit-12);
background-color: var(--tertiary-text-color);
-webkit-mask: url(preview-placeholder.svg) no-repeat center;
mask: url(preview-placeholder.svg) no-repeat center;
}
}
}
& .form-checkbox.bulk-edit-checkbox {
display: none;
}
& .title {
position: relative; 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 {
color: var(--bookmark-title-color);
font-weight: var(--bookmark-title-weight);
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& .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: var(--unit-1);
border-radius: var(--border-radius);
border: 1px solid #424a8c;
font-size: var(--font-size-sm);
font-style: normal;
white-space: normal;
pointer-events: none;
animation: 0.3s ease 0s appear;
}
@media (pointer: coarse) {
& .title a[data-tooltip]::after {
display: none;
}
}
&.unread .title a {
font-style: italic;
}
& .url-path,
& .url-display {
font-size: var(--font-size-sm);
color: var(--secondary-link-color);
}
& .description {
color: var(--bookmark-description-color);
font-weight: var(--bookmark-description-weight);
}
& .description.separate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
overflow: hidden;
}
& .tags {
& a,
& a:visited:hover {
color: var(--alternative-color);
}
}
& .actions,
& .extra-actions {
display: flex; display: flex;
gap: var(--unit-2); align-items: baseline;
margin-top: 0; flex-wrap: wrap;
margin-bottom: var(--unit-3); column-gap: var(--unit-2);
}
& .content { @media (max-width: 600px) {
flex: 1 1 0; & .extra-actions {
min-width: 0; width: 100%;
margin-top: var(--unit-1);
} }
}
& .preview-image { & .actions {
flex: 0 0 auto; color: var(--bookmark-actions-color);
width: 100px; font-size: var(--font-size-sm);
height: 60px;
margin-top: var(--unit-h);
border-radius: var(--border-radius);
border: solid 1px var(--border-color);
object-fit: cover;
&.placeholder { & a,
display: flex; & button.btn-link {
align-items: center; color: var(--bookmark-actions-color);
justify-content: center; --btn-icon-color: var(--bookmark-actions-color);
background: var(--body-color-contrast); font-weight: var(--bookmark-actions-weight);
padding: 0;
height: auto;
vertical-align: unset;
border: none;
box-sizing: border-box;
transition: none;
text-decoration: none;
& .img { &:focus,
width: var(--unit-12); &:hover,
height: var(--unit-12); &:active,
background-color: var(--tertiary-text-color); &.active {
-webkit-mask: url(preview-placeholder.svg) no-repeat center; color: var(--bookmark-actions-hover-color);
mask: url(preview-placeholder.svg) no-repeat center; --btn-icon-color: var(--bookmark-actions-hover-color);
} }
}
}
& .form-checkbox.bulk-edit-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 {
color: var(--bookmark-title-color);
font-weight: var(--bookmark-title-weight);
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& .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: var(--unit-1);
border-radius: var(--border-radius);
border: 1px solid #424a8c;
font-size: var(--font-size-sm);
font-style: normal;
white-space: normal;
pointer-events: none;
animation: 0.3s ease 0s appear;
}
@media (pointer: coarse) {
& .title a[data-tooltip]::after {
display: none;
}
}
&.unread .title a {
font-style: italic;
}
& .url-path, & .url-display {
font-size: var(--font-size-sm);
color: var(--secondary-link-color);
}
& .description {
color: var(--bookmark-description-color);
font-weight: var(--bookmark-description-weight);
}
& .description.separate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
overflow: hidden;
}
& .tags {
& a, & a:visited:hover {
color: var(--alternative-color);
}
}
& .actions, & .extra-actions {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: var(--unit-2);
}
@media (max-width: 600px) {
& .extra-actions {
width: 100%;
margin-top: var(--unit-1);
}
}
& .actions {
color: var(--bookmark-actions-color);
font-size: var(--font-size-sm);
& a, & button.btn-link {
color: var(--bookmark-actions-color);
--btn-icon-color: var(--bookmark-actions-color);
font-weight: var(--bookmark-actions-weight);
padding: 0;
height: auto;
vertical-align: unset;
border: none;
box-sizing: border-box;
transition: none;
text-decoration: none;
&:focus,
&:hover,
&:active,
&.active {
color: var(--bookmark-actions-hover-color);
--btn-icon-color: var(--bookmark-actions-hover-color);
}
}
} }
}
} }
.bookmark-pagination { .bookmark-pagination {
margin-top: var(--unit-4); margin-top: var(--unit-4);
/* Remove left padding from first pagination link */ /* Remove left padding from first pagination link */
& .page-item:first-child a { & .page-item:first-child a {
padding-left: 0; padding-left: 0;
}
&.sticky {
position: sticky;
bottom: 0;
border-top: solid 1px var(--secondary-border-color);
background: var(--body-color);
padding-bottom: var(--unit-h);
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(
-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset))
);
width: calc(
var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)
);
background: var(--body-color);
} }
}
&.sticky { & .pagination {
position: sticky; overflow: hidden;
bottom: 0; }
border-top: solid 1px var(--secondary-border-color);
background: var(--body-color);
padding-bottom: var(--unit-h);
&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)));
width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
background: var(--body-color);
}
}
& .pagination {
overflow: hidden;
}
} }
.tag-cloud { .tag-cloud {
/* Increase line-height for better separation within / between items */ /* Increase line-height for better separation within / between items */
line-height: 1.1rem; line-height: 1.1rem;
& .selected-tags { & .selected-tags {
margin-bottom: var(--unit-4); margin-bottom: var(--unit-4);
& a, & a,
& a:visited:hover { & a:visited:hover {
color: var(--error-color); color: var(--error-color);
}
} }
}
& .unselected-tags { & .unselected-tags {
& a, & a,
& a:visited:hover { & a:visited:hover {
color: var(--alternative-color); color: var(--alternative-color);
}
} }
}
& .group { & .group {
margin-bottom: var(--unit-3); margin-bottom: var(--unit-3);
} }
& .highlight-char { & .highlight-char {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
color: var(--alternative-color-dark); color: var(--alternative-color-dark);
} }
} }
/* Bookmark notes */ /* Bookmark notes */
ul.bookmark-list { ul.bookmark-list {
& .notes { & .notes {
display: none; display: none;
max-height: 300px; max-height: 300px;
margin: var(--unit-1) 0; margin: var(--unit-1) 0;
overflow-y: auto; overflow-y: auto;
background: var(--body-color-contrast); background: var(--body-color-contrast);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
& .notes .markdown { & .notes .markdown {
padding: var(--unit-2) var(--unit-3); padding: var(--unit-2) var(--unit-3);
} }
&.show-notes .notes, &.show-notes .notes,
& li.show-notes .notes { & li.show-notes .notes {
display: block; display: block;
} }
} }
/* Bookmark bulk edit */ /* Bookmark bulk edit */
:root { :root {
--bulk-edit-toggle-width: 16px; --bulk-edit-toggle-width: 16px;
--bulk-edit-toggle-offset: 8px; --bulk-edit-toggle-offset: 8px;
--bulk-edit-bar-offset: calc(var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset))); --bulk-edit-bar-offset: calc(
--bulk-edit-transition-duration: 400ms; var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset))
);
--bulk-edit-transition-duration: 400ms;
} }
[ld-bulk-edit] { [ld-bulk-edit] {
& .bulk-edit-bar { & .bulk-edit-bar {
margin-top: -1px; margin-top: -1px;
margin-left: calc(-1 * var(--bulk-edit-bar-offset)); margin-left: calc(-1 * var(--bulk-edit-bar-offset));
margin-bottom: var(--unit-4); margin-bottom: var(--unit-4);
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height var(--bulk-edit-transition-duration); transition: max-height var(--bulk-edit-transition-duration);
background: var(--bulk-actions-bg-color); background: var(--bulk-actions-bg-color);
}
&.active .bulk-edit-bar {
max-height: 37px;
border-bottom: solid 1px var(--secondary-border-color);
}
/* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
&.active section:first-of-type .content-area-header {
border-bottom-color: transparent;
}
/* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
&.active:not(.activating) .bulk-edit-bar {
overflow: visible;
}
/* make sticky pagination expand to cover checkboxes to the left */
&.active .bookmark-pagination.sticky:before {
content: "";
position: absolute;
top: -1px;
bottom: 0;
left: calc(
-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset))
);
width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
background: var(--body-color);
border-top: solid 1px var(--secondary-border-color);
}
/* All checkbox */
& .form-checkbox.bulk-edit-checkbox.all {
display: block;
width: var(--bulk-edit-toggle-width);
margin: 0 0 0 var(--bulk-edit-toggle-offset);
padding: 0;
}
/* Bookmark checkboxes */
& li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
display: block;
position: absolute;
width: var(--bulk-edit-toggle-width);
min-height: var(--bulk-edit-toggle-width);
left: calc(
-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset)
);
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
visibility: hidden;
opacity: 0;
transition: all var(--bulk-edit-transition-duration);
.form-icon {
top: 0;
}
}
&.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
visibility: visible;
opacity: 1;
}
/* Actions */
& .bulk-edit-actions {
display: flex;
align-items: center;
padding: var(--unit-1) 0;
border-top: solid 1px var(--secondary-border-color);
gap: var(--unit-2);
& button {
--control-padding-x-sm: 0;
} }
&.active .bulk-edit-bar { & button:hover {
max-height: 37px; text-decoration: underline;
border-bottom: solid 1px var(--secondary-border-color);
} }
/* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */ & > input,
& .form-autocomplete,
&.active section:first-of-type .content-area-header { & select {
border-bottom-color: transparent; width: auto;
max-width: 140px;
-webkit-appearance: none;
} }
/* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */ & .select-across {
margin: 0 0 0 auto;
&.active:not(.activating) .bulk-edit-bar { font-size: var(--font-size-sm);
overflow: visible;
}
/* make sticky pagination expand to cover checkboxes to the left */
&.active .bookmark-pagination.sticky:before {
content: '';
position: absolute;
top: -1px;
bottom: 0;
left: calc(-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)));
width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
background: var(--body-color);
border-top: solid 1px var(--secondary-border-color);
}
/* All checkbox */
& .form-checkbox.bulk-edit-checkbox.all {
display: block;
width: var(--bulk-edit-toggle-width);
margin: 0 0 0 var(--bulk-edit-toggle-offset);
padding: 0;
}
/* Bookmark checkboxes */
& li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
display: block;
position: absolute;
width: var(--bulk-edit-toggle-width);
min-height: var(--bulk-edit-toggle-width);
left: calc(-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset));
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
visibility: hidden;
opacity: 0;
transition: all var(--bulk-edit-transition-duration);
.form-icon {
top: 0;
}
}
&.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
visibility: visible;
opacity: 1;
}
/* Actions */
& .bulk-edit-actions {
display: flex;
align-items: center;
padding: var(--unit-1) 0;
border-top: solid 1px var(--secondary-border-color);
gap: var(--unit-2);
& button {
--control-padding-x-sm: 0;
}
& button:hover {
text-decoration: underline;
}
& > input,
& .form-autocomplete,
& select {
width: auto;
max-width: 140px;
-webkit-appearance: none;
}
& .select-across {
margin: 0 0 0 auto;
font-size: var(--font-size-sm);
}
} }
}
} }

76
bookmarks/styles/components.css
View file

@ -2,64 +2,64 @@
/* Content area component */ /* Content area component */
section.content-area { section.content-area {
h2 {
font-size: var(--font-size-lg);
}
.content-area-header {
border-bottom: solid 1px var(--secondary-border-color);
display: flex;
flex-wrap: wrap;
column-gap: var(--unit-5);
padding-bottom: var(--unit-2);
margin-bottom: var(--unit-4);
h2 { h2 {
font-size: var(--font-size-lg); flex: 0 0 auto;
line-height: var(--unit-9);
margin: 0;
} }
.content-area-header { .header-controls {
border-bottom: solid 1px var(--secondary-border-color); flex: 1 1 0;
display: flex; display: flex;
flex-wrap: wrap;
column-gap: var(--unit-5);
padding-bottom: var(--unit-2);
margin-bottom: var(--unit-4);
h2 {
flex: 0 0 auto;
line-height: var(--unit-9);
margin: 0;
}
.header-controls {
flex: 1 1 0;
display: flex;
}
} }
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
section.content-area .content-area-header { section.content-area .content-area-header {
flex-direction: column; flex-direction: column;
} }
} }
/* Confirm button component */ /* Confirm button component */
span.confirmation { span.confirmation {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: var(--unit-1); gap: var(--unit-1);
color: var(--error-color) !important;
svg {
align-self: center;
}
.btn.btn-link {
color: var(--error-color) !important; color: var(--error-color) !important;
svg { &:hover {
align-self: center; text-decoration: underline;
}
.btn.btn-link {
color: var(--error-color) !important;
&:hover {
text-decoration: underline;
}
} }
}
} }
/* Divider */ /* Divider */
.divider { .divider {
border-bottom: solid 1px var(--secondary-border-color); border-bottom: solid 1px var(--secondary-border-color);
margin: var(--unit-5) 0; margin: var(--unit-5) 0;
} }
/* Turbo progress bar */ /* Turbo progress bar */
.turbo-progress-bar { .turbo-progress-bar {
background-color: var(--primary-color); background-color: var(--primary-color);
} }

48
bookmarks/styles/layout.css
View file

@ -1,39 +1,39 @@
/* Main layout */ /* Main layout */
body { body {
margin: 20px 10px; margin: 20px 10px;
@media (min-width: 600px) { @media (min-width: 600px) {
/* Horizontal offset accounts for checkboxes that show up in bulk edit mode */ /* Horizontal offset accounts for checkboxes that show up in bulk edit mode */
margin: 20px 32px; margin: 20px 32px;
} }
} }
header { header {
margin-bottom: var(--unit-9); margin-bottom: var(--unit-9);
.logo { .logo {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
h1 { h1 {
margin: 0 0 0 var(--unit-3); margin: 0 0 0 var(--unit-3);
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
} }
} }
header .toasts { header .toasts {
margin-bottom: 20px; margin-bottom: 20px;
.toast { .toast {
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
.toast a.btn-clear:visited { .toast a.btn-clear:visited {
color: currentColor; color: currentColor;
} }
} }

68
bookmarks/styles/markdown.css
View file

@ -1,40 +1,46 @@
.markdown { .markdown {
& p, & ul, & ol, & pre, & blockquote { & p,
margin: 0 0 var(--unit-2) 0; & ul,
} & ol,
& pre,
& blockquote {
margin: 0 0 var(--unit-2) 0;
}
& > *:first-child { & > *:first-child {
margin-top: 0; margin-top: 0;
} }
& > *:last-child { & > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
& ul, & ol { & ul,
margin-left: var(--unit-4); & ol {
} margin-left: var(--unit-4);
}
& ul li, & ol li { & ul li,
margin-top: var(--unit-1); & ol li {
} margin-top: var(--unit-1);
}
& pre { & pre {
padding: var(--unit-1) var(--unit-2); padding: var(--unit-1) var(--unit-2);
background-color: var(--code-bg-color); background-color: var(--code-bg-color);
border-radius: var(--unit-1); border-radius: var(--unit-1);
overflow-x: auto; overflow-x: auto;
} }
& pre code { & pre code {
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;
} }
& > pre:first-child:last-child { & > pre:first-child:last-child {
padding: 0; padding: 0;
background: none; background: none;
border-radius: 0; border-radius: 0;
} }
} }

1
bookmarks/styles/reader-mode.css
View file

@ -24,4 +24,3 @@ html.reader-mode {
height: auto; height: auto;
} }
} }

2
bookmarks/styles/settings.css
View file

@ -12,7 +12,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.input-group > input[type=submit] { .input-group > input[type="submit"] {
height: auto; height: auto;
} }

208
bookmarks/styles/theme-dark.css
View file

@ -1,143 +1,143 @@
@import "theme-light.css"; @import "theme-light.css";
:root { :root {
/* Color palette */ /* Color palette */
--contrast-5: hsla(241, 65%, 85%, 0.06); --contrast-5: hsla(241, 65%, 85%, 0.06);
--contrast-10: hsla(241, 60%, 80%, 0.14); --contrast-10: hsla(241, 60%, 80%, 0.14);
--contrast-20: hsla(241, 64%, 82%, 0.23); --contrast-20: hsla(241, 64%, 82%, 0.23);
--contrast-30: hsla(241, 69%, 84%, 0.32); --contrast-30: hsla(241, 69%, 84%, 0.32);
--contrast-40: hsla(241, 73%, 86%, 0.41); --contrast-40: hsla(241, 73%, 86%, 0.41);
--contrast-50: hsla(241, 78%, 88%, 0.5); --contrast-50: hsla(241, 78%, 88%, 0.5);
--contrast-60: hsla(241, 82%, 90%, 0.58); --contrast-60: hsla(241, 82%, 90%, 0.58);
--contrast-70: hsla(241, 87%, 92%, 0.69); --contrast-70: hsla(241, 87%, 92%, 0.69);
--contrast-80: hsla(241, 91%, 94%, 0.8); --contrast-80: hsla(241, 91%, 94%, 0.8);
--contrast-90: hsla(241, 96%, 96%, 0.9); --contrast-90: hsla(241, 96%, 96%, 0.9);
--primary-color: hsl(241, 75%, 64%); --primary-color: hsl(241, 75%, 64%);
--primary-color-highlight: hsl(241, 75%, 68%); --primary-color-highlight: hsl(241, 75%, 68%);
--primary-color-shade: hsl(241, 75%, 64%, 0.42); --primary-color-shade: hsl(241, 75%, 64%, 0.42);
--alternative-color: hsl(179, 50%, 58%); --alternative-color: hsl(179, 50%, 58%);
--alternative-color-dark: hsl(179, 80%, 75%); --alternative-color-dark: hsl(179, 80%, 75%);
--success-color: hsl(142, 76%, 36%); --success-color: hsl(142, 76%, 36%);
--success-color-highlight: hsl(142, 76%, 40%); --success-color-highlight: hsl(142, 76%, 40%);
--success-color-shade: hsla(142, 76%, 36%, 0.1); --success-color-shade: hsla(142, 76%, 36%, 0.1);
--warning-color: hsl(38, 92%, 50%); --warning-color: hsl(38, 92%, 50%);
--warning-color-highlight: hsl(38, 92%, 55%); --warning-color-highlight: hsl(38, 92%, 55%);
--warning-color-shade: hsla(38, 92%, 50%, 0.1); --warning-color-shade: hsla(38, 92%, 50%, 0.1);
--error-color: hsl(0, 80%, 60%); --error-color: hsl(0, 80%, 60%);
--error-color-highlight: hsl(0, 72%, 60%); --error-color-highlight: hsl(0, 72%, 60%);
--error-color-shade: hsla(0, 72%, 51%, 0.1); --error-color-shade: hsla(0, 72%, 51%, 0.1);
/* Core colors */ /* Core colors */
--text-color: var(--gray-300); --text-color: var(--gray-300);
--secondary-text-color: var(--gray-400); --secondary-text-color: var(--gray-400);
--tertiary-text-color: var(--gray-500); --tertiary-text-color: var(--gray-500);
--contrast-text-color: #fff; --contrast-text-color: #fff;
--primary-text-color: hsl(241, 82%, 82%); --primary-text-color: hsl(241, 82%, 82%);
--link-color: var(--primary-text-color); --link-color: var(--primary-text-color);
--secondary-link-color: hsla(241, 82%, 82%, 0.8); --secondary-link-color: hsla(241, 82%, 82%, 0.8);
--icon-color: var(--text-color); --icon-color: var(--text-color);
--border-color: var(--contrast-30); --border-color: var(--contrast-30);
--secondary-border-color: var(--contrast-20); --secondary-border-color: var(--contrast-20);
--body-color: hsl(241, 15%, 14%); --body-color: hsl(241, 15%, 14%);
--body-color-contrast: var(--contrast-10); --body-color-contrast: var(--contrast-10);
/* Focus */ /* Focus */
--focus-outline: 2px solid hsl(241, 100%, 78%); --focus-outline: 2px solid hsl(241, 100%, 78%);
--focus-outline-offset: 2px; --focus-outline-offset: 2px;
/* Shadows */ /* Shadows */
--box-shadow-xs: none; --box-shadow-xs: none;
--box-shadow: none; --box-shadow: none;
--box-shadow-lg: none; --box-shadow-lg: none;
} }
:root { :root {
--input-bg-color: var(--contrast-5); --input-bg-color: var(--contrast-5);
--input-disabled-bg-color: var(--contrast-30); --input-disabled-bg-color: var(--contrast-30);
--input-text-color: var(--text-color); --input-text-color: var(--text-color);
--input-hint-color: var(--secondary-text-color); --input-hint-color: var(--secondary-text-color);
--input-border-color: var(--border-color); --input-border-color: var(--border-color);
--input-placeholder-color: var(--tertiary-text-color); --input-placeholder-color: var(--tertiary-text-color);
--input-box-shadow: var(--box-shadow-xs); --input-box-shadow: var(--box-shadow-xs);
--checkbox-bg-color: var(--contrast-10); --checkbox-bg-color: var(--contrast-10);
--checkbox-checked-bg-color: var(--primary-color); --checkbox-checked-bg-color: var(--primary-color);
--checkbox-disabled-bg-color: var(--contrast-30); --checkbox-disabled-bg-color: var(--contrast-30);
--checkbox-border-color: var(--border-color); --checkbox-border-color: var(--border-color);
--checkbox-icon-color: #fff; --checkbox-icon-color: #fff;
--switch-bg-color: var(--contrast-10); --switch-bg-color: var(--contrast-10);
--switch-border-color: var(--border-color); --switch-border-color: var(--border-color);
--switch-toggle-color: var(--text-color); --switch-toggle-color: var(--text-color);
} }
:root { :root {
--btn-bg-color: var(--contrast-5); --btn-bg-color: var(--contrast-5);
--btn-hover-bg-color: var(--contrast-20); --btn-hover-bg-color: var(--contrast-20);
--btn-border-color: var(--border-color); --btn-border-color: var(--border-color);
--btn-text-color: var(--text-color); --btn-text-color: var(--text-color);
--btn-icon-color: var(--icon-color); --btn-icon-color: var(--icon-color);
--btn-font-weight: 400; --btn-font-weight: 400;
--btn-box-shadow: var(--box-shadow-xs); --btn-box-shadow: var(--box-shadow-xs);
--btn-primary-bg-color: var(--primary-color); --btn-primary-bg-color: var(--primary-color);
--btn-primary-hover-bg-color: var(--primary-color-highlight); --btn-primary-hover-bg-color: var(--primary-color-highlight);
--btn-primary-text-color: var(--contrast-text-color); --btn-primary-text-color: var(--contrast-text-color);
--btn-success-bg-color: var(--success-color); --btn-success-bg-color: var(--success-color);
--btn-success-hover-bg-color: var(--success-color-highlight); --btn-success-hover-bg-color: var(--success-color-highlight);
--btn-success-text-color: var(--contrast-text-color); --btn-success-text-color: var(--contrast-text-color);
--btn-error-bg-color: var(--error-color); --btn-error-bg-color: var(--error-color);
--btn-error-hover-bg-color: var(--error-color-highlight); --btn-error-hover-bg-color: var(--error-color-highlight);
--btn-error-text-color: var(--contrast-text-color); --btn-error-text-color: var(--contrast-text-color);
--btn-link-text-color: var(--link-color); --btn-link-text-color: var(--link-color);
--btn-link-hover-text-color: var(--link-color); --btn-link-hover-text-color: var(--link-color);
} }
:root { :root {
--modal-overlay-bg-color: hsla(229, 21%, 16%, 0.55); --modal-overlay-bg-color: hsla(229, 21%, 16%, 0.55);
--modal-container-bg-color: hsl(241, 20%, 20%); --modal-container-bg-color: hsl(241, 20%, 20%);
--modal-container-border-color: var(--contrast-30); --modal-container-border-color: var(--contrast-30);
--modal-border-radius: var(--border-radius-lg); --modal-border-radius: var(--border-radius-lg);
--modal-box-shadow: none; --modal-box-shadow: none;
} }
:root { :root {
--menu-bg-color: hsl(241, 20%, 20%); --menu-bg-color: hsl(241, 20%, 20%);
--menu-border-color: var(--contrast-30); --menu-border-color: var(--contrast-30);
--menu-border-radius: var(--border-radius); --menu-border-radius: var(--border-radius);
--menu-box-shadow: none; --menu-box-shadow: none;
--menu-item-color: var(--text-color); --menu-item-color: var(--text-color);
--menu-item-hover-color: var(--text-color); --menu-item-hover-color: var(--text-color);
--menu-item-bg-color: transparent; --menu-item-bg-color: transparent;
--menu-item-hover-bg-color: var(--contrast-20); --menu-item-hover-bg-color: var(--contrast-20);
} }
:root { :root {
--tab-color: var(--text-color); --tab-color: var(--text-color);
--tab-hover-color: var(--primary-text-color); --tab-hover-color: var(--primary-text-color);
--tab-active-color: var(--primary-text-color); --tab-active-color: var(--primary-text-color);
--tab-highlight-color: var(--primary-text-color); --tab-highlight-color: var(--primary-text-color);
} }
:root { :root {
--bookmark-title-color: var(--primary-text-color); --bookmark-title-color: var(--primary-text-color);
--bookmark-title-weight: 500; --bookmark-title-weight: 500;
--bookmark-description-color: var(--text-color); --bookmark-description-color: var(--text-color);
--bookmark-description-weight: 400; --bookmark-description-weight: 400;
--bookmark-actions-color: var(--secondary-text-color); --bookmark-actions-color: var(--secondary-text-color);
--bookmark-actions-hover-color: var(--text-color); --bookmark-actions-hover-color: var(--text-color);
--bookmark-actions-weight: 400; --bookmark-actions-weight: 400;
--bulk-actions-bg-color: var(--contrast-5); --bulk-actions-bg-color: var(--contrast-5);
} }

10
bookmarks/styles/theme/_normalize.css
View file

@ -61,7 +61,8 @@ h1 {
figcaption, figcaption,
figure, figure,
main { /* 1 */ main {
/* 1 */
display: block; display: block;
} }
@ -256,7 +257,8 @@ textarea {
*/ */
button, button,
input { /* 1 */ input {
/* 1 */
overflow: visible; overflow: visible;
} }
@ -266,7 +268,8 @@ input { /* 1 */
*/ */
button, button,
select { /* 1 */ select {
/* 1 */
text-transform: none; text-transform: none;
} }
@ -299,7 +302,6 @@ button::-moz-focus-inner,
* Restore the focus styles unset by the previous rule (removed). * Restore the focus styles unset by the previous rule (removed).
*/ */
/** /**
* Change the border, margin, and padding in all browsers (opinionated) (changed). * Change the border, margin, and padding in all browsers (opinionated) (changed).
*/ */

52
bookmarks/styles/theme/animations.css
View file

@ -1,38 +1,38 @@
/* Animations */ /* Animations */
@keyframes loading { @keyframes loading {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes slide-down { @keyframes slide-down {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(calc(-1 * var(--unit-8))); transform: translateY(calc(-1 * var(--unit-8)));
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes fade-out { @keyframes fade-out {
0% { 0% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }

38
bookmarks/styles/theme/asian.css
View file

@ -3,41 +3,41 @@ html:lang(zh),
html:lang(zh-Hans), html:lang(zh-Hans),
.lang-zh, .lang-zh,
.lang-zh-hans { .lang-zh-hans {
font-family: var(--cjk-zh-hans-font-family); font-family: var(--cjk-zh-hans-font-family);
} }
html:lang(zh-Hant), html:lang(zh-Hant),
.lang-zh-hant { .lang-zh-hant {
font-family: var(--cjk-zh-hant-font-family); font-family: var(--cjk-zh-hant-font-family);
} }
html:lang(ja), html:lang(ja),
.lang-ja { .lang-ja {
font-family: var(--cjk-jp-font-family); font-family: var(--cjk-jp-font-family);
} }
html:lang(ko), html:lang(ko),
.lang-ko { .lang-ko {
font-family: var(--cjk-ko-font-family); font-family: var(--cjk-ko-font-family);
} }
:lang(zh), :lang(zh),
:lang(ja), :lang(ja),
.lang-cjk { .lang-cjk {
& ins, & ins,
& u { & u {
border-bottom: var(--border-width) solid; border-bottom: var(--border-width) solid;
text-decoration: none; text-decoration: none;
} }
& del + del, & del + del,
& del + s, & del + s,
& ins + ins, & ins + ins,
& ins + u, & ins + u,
& s + del, & s + del,
& s + s, & s + s,
& u + ins, & u + ins,
& u + u { & u + u {
margin-left: .125em; margin-left: 0.125em;
} }
} }

96
bookmarks/styles/theme/autocomplete.css
View file

@ -1,55 +1,57 @@
/* Autocomplete */ /* Autocomplete */
.form-autocomplete { .form-autocomplete {
position: relative; position: relative;
& .form-autocomplete-input { & .form-autocomplete-input {
align-content: flex-start; align-content: flex-start;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
min-height: var(--unit-8); min-height: var(--unit-8);
padding: var(--unit-h); padding: var(--unit-h);
background: var(--input-bg-color); background: var(--input-bg-color);
&.is-focused { &.is-focused {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: calc(var(--focus-outline-offset) * -1); outline-offset: calc(var(--focus-outline-offset) * -1);
}
& .form-input {
background: transparent;
border-color: transparent;
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
height: var(--unit-6);
line-height: var(--unit-4);
margin: var(--unit-h);
width: auto;
&:focus {
outline: none;
}
}
} }
& .menu { & .form-input {
left: 0; background: transparent;
position: absolute; border-color: transparent;
top: 100%; box-shadow: none;
width: 100%; display: inline-block;
flex: 1 0 auto;
height: var(--unit-6);
line-height: var(--unit-4);
margin: var(--unit-h);
width: auto;
& .menu-item.selected > a, & .menu-item > a:hover { &:focus {
background: var(--menu-item-hover-bg-color); outline: none;
color: var(--menu-item-hover-color); }
}
& .group-item, & .group-item:hover {
color: var(--tertiary-text-color);
text-transform: uppercase;
background: none;
font-size: 0.6rem;
font-weight: bold;
}
} }
} }
& .menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
& .menu-item.selected > a,
& .menu-item > a:hover {
background: var(--menu-item-hover-bg-color);
color: var(--menu-item-hover-color);
}
& .group-item,
& .group-item:hover {
color: var(--tertiary-text-color);
text-transform: uppercase;
background: none;
font-size: 0.6rem;
font-weight: bold;
}
}
}

98
bookmarks/styles/theme/badges.css
View file

@ -1,64 +1,64 @@
/* Badges */ /* Badges */
.badge { .badge {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
&[data-badge], &[data-badge],
&:not([data-badge]) { &:not([data-badge]) {
&::after { &::after {
background: var(--primary-color); background: var(--primary-color);
background-clip: padding-box; background-clip: padding-box;
border-radius: .5rem; border-radius: 0.5rem;
box-shadow: 0 0 0 1px var(--body-color); box-shadow: 0 0 0 1px var(--body-color);
color: var(--contrast-text-color); color: var(--contrast-text-color);
content: attr(data-badge); content: attr(data-badge);
display: inline-block; display: inline-block;
transform: translate(-.05rem, -.5rem); transform: translate(-0.05rem, -0.5rem);
}
} }
}
&[data-badge] { &[data-badge] {
&::after { &::after {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
height: .9rem; height: 0.9rem;
line-height: 1; line-height: 1;
min-width: .9rem; min-width: 0.9rem;
padding: .1rem .2rem; padding: 0.1rem 0.2rem;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
}
} }
}
&:not([data-badge]), &:not([data-badge]),
&[data-badge=""] { &[data-badge=""] {
&::after { &::after {
height: 6px; height: 6px;
min-width: 6px; min-width: 6px;
padding: 0; padding: 0;
width: 6px; width: 6px;
}
} }
}
/* Badges for Buttons */ /* Badges for Buttons */
&.btn { &.btn {
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
transform: translate(50%, -50%); transform: translate(50%, -50%);
}
} }
}
/* Badges for Avatars */ /* Badges for Avatars */
&.avatar { &.avatar {
&::after { &::after {
position: absolute; position: absolute;
top: 14.64%; top: 14.64%;
right: 14.64%; right: 14.64%;
transform: translate(50%, -50%); transform: translate(50%, -50%);
z-index: var(--zindex-1); z-index: var(--zindex-1);
}
} }
}
} }

50
bookmarks/styles/theme/base.css
View file

@ -2,60 +2,60 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: inherit; box-sizing: inherit;
} }
html { html {
box-sizing: border-box; box-sizing: border-box;
font-size: var(--html-font-size); font-size: var(--html-font-size);
line-height: var(--html-line-height); line-height: var(--html-line-height);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
scrollbar-gutter: stable; scrollbar-gutter: stable;
} }
/* Reserve space for vert. scrollbar to avoid layout shifting when scrollbars are added */ /* Reserve space for vert. scrollbar to avoid layout shifting when scrollbars are added */
html { html {
scrollbar-gutter: stable; scrollbar-gutter: stable;
} }
@media (pointer: coarse) { @media (pointer: coarse) {
html { html {
scrollbar-gutter: initial; scrollbar-gutter: initial;
} }
} }
body { body {
background: var(--body-color); background: var(--body-color);
color: var(--text-color); color: var(--text-color);
font-family: var(--body-font-family); font-family: var(--body-font-family);
font-size: var(--font-size); font-size: var(--font-size);
overflow-x: hidden; overflow-x: hidden;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
a { a {
color: var(--link-color); color: var(--link-color);
outline: none; outline: none;
text-decoration: none; text-decoration: none;
} }
a:focus-visible { a:focus-visible {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
} }
a:focus, a:focus,
a:hover, a:hover,
a:active, a:active,
a.active { a.active {
text-decoration: underline; text-decoration: underline;
} }
summary { summary {
cursor: pointer; cursor: pointer;
} }
summary:focus-visible { summary:focus-visible {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
} }

430
bookmarks/styles/theme/buttons.css
View file

@ -1,264 +1,268 @@
/* Buttons */ /* Buttons */
:root { :root {
--btn-bg-color: var(--body-color); --btn-bg-color: var(--body-color);
--btn-hover-bg-color: var(--gray-50); --btn-hover-bg-color: var(--gray-50);
--btn-border-color: var(--border-color); --btn-border-color: var(--border-color);
--btn-text-color: var(--text-color); --btn-text-color: var(--text-color);
--btn-icon-color: var(--icon-color); --btn-icon-color: var(--icon-color);
--btn-font-weight: 400; --btn-font-weight: 400;
--btn-box-shadow: var(--box-shadow-xs); --btn-box-shadow: var(--box-shadow-xs);
--btn-primary-bg-color: var(--primary-color); --btn-primary-bg-color: var(--primary-color);
--btn-primary-hover-bg-color: var(--primary-color-highlight); --btn-primary-hover-bg-color: var(--primary-color-highlight);
--btn-primary-text-color: var(--contrast-text-color); --btn-primary-text-color: var(--contrast-text-color);
--btn-success-bg-color: var(--success-color); --btn-success-bg-color: var(--success-color);
--btn-success-hover-bg-color: var(--success-color-highlight); --btn-success-hover-bg-color: var(--success-color-highlight);
--btn-success-text-color: var(--contrast-text-color); --btn-success-text-color: var(--contrast-text-color);
--btn-error-bg-color: var(--error-color); --btn-error-bg-color: var(--error-color);
--btn-error-hover-bg-color: var(--error-color-highlight); --btn-error-hover-bg-color: var(--error-color-highlight);
--btn-error-text-color: var(--contrast-text-color); --btn-error-text-color: var(--contrast-text-color);
--btn-link-text-color: var(--link-color); --btn-link-text-color: var(--link-color);
--btn-link-hover-text-color: var(--link-color); --btn-link-hover-text-color: var(--link-color);
} }
.btn { .btn {
appearance: none; appearance: none;
background: var(--btn-bg-color); background: var(--btn-bg-color);
border: var(--border-width) solid var(--btn-border-color); border: var(--border-width) solid var(--btn-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--btn-text-color); color: var(--btn-text-color);
font-weight: var(--btn-font-weight); font-weight: var(--btn-font-weight);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: baseline;
justify-content: center; justify-content: center;
font-size: var(--font-size); font-size: var(--font-size);
height: var(--control-size); height: var(--control-size);
line-height: var(--line-height); line-height: var(--line-height);
outline: none; outline: none;
padding: var(--control-padding-y) var(--control-padding-x); padding: var(--control-padding-y) var(--control-padding-x);
box-shadow: var(--btn-box-shadow); box-shadow: var(--btn-box-shadow);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s; transition:
user-select: none; background 0.2s,
vertical-align: middle; border 0.2s,
white-space: nowrap; box-shadow 0.2s,
color 0.2s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:focus-visible { &:focus-visible {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
} }
&:hover {
background: var(--btn-hover-bg-color);
text-decoration: none;
}
&[disabled],
&:disabled,
&.disabled {
cursor: default;
opacity: 0.5;
pointer-events: none;
}
&:focus,
&:hover,
&:active,
&.active {
text-decoration: none;
}
/* Button Primary */
&.btn-primary {
background: var(--btn-primary-bg-color);
border-color: transparent;
color: var(--btn-primary-text-color);
--btn-icon-color: var(--btn-primary-text-color);
&:hover { &:hover {
background: var(--btn-hover-bg-color); background: var(--btn-primary-hover-bg-color);
text-decoration: none;
} }
&[disabled], &.loading {
&:disabled, &::after {
&.disabled { border-bottom-color: var(--btn-primary-text-color);
cursor: default; border-left-color: var(--btn-primary-text-color);
opacity: 0.5; }
pointer-events: none; }
}
/* Button Colors */
&.btn-success {
background: var(--btn-success-bg-color);
border-color: transparent;
color: var(--btn-success-text-color);
--btn-icon-color: var(--btn-success-text-color);
&:hover {
background: var(--btn-success-hover-bg-color);
}
}
&.btn-error {
--btn-border-color: var(--error-color);
--btn-text-color: var(--error-color);
&:hover {
--btn-hover-bg-color: var(--error-color-shade);
}
}
/* Button Link */
&.btn-link {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--btn-link-text-color);
--btn-icon-color: var(--btn-link-text-color);
&:hover {
color: var(--btn-link-hover-text-color);
--btn-icon-color: var(--btn-link-hover-text-color);
} }
&:focus, &:focus,
&:hover, &:hover,
&:active, &:active,
&.active { &.active {
text-decoration: none; text-decoration: none;
} }
}
/* Button Primary */ /* Button Sizes */
&.btn-primary { &.btn-sm {
background: var(--btn-primary-bg-color); font-size: var(--font-size-sm);
border-color: transparent; height: var(--control-size-sm);
color: var(--btn-primary-text-color); padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
--btn-icon-color: var(--btn-primary-text-color); }
&:hover { &.btn-lg {
background: var(--btn-primary-hover-bg-color); font-size: var(--font-size-lg);
} height: var(--control-size-lg);
padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
}
&.loading { /* Button Block */
&::after {
border-bottom-color: var(--btn-primary-text-color);
border-left-color: var(--btn-primary-text-color);
}
}
}
/* Button Colors */ &.btn-block {
display: block;
width: 100%;
}
&.btn-success { /* Button Action */
background: var(--btn-success-bg-color);
border-color: transparent;
color: var(--btn-success-text-color);
--btn-icon-color: var(--btn-success-text-color);
&:hover { &.btn-action {
background: var(--btn-success-hover-bg-color); width: var(--control-size);
} padding-left: 0;
} padding-right: 0;
&.btn-error {
--btn-border-color: var(--error-color);
--btn-text-color: var(--error-color);
&:hover {
--btn-hover-bg-color: var(--error-color-shade);
}
}
/* Button Link */
&.btn-link {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--btn-link-text-color);
--btn-icon-color: var(--btn-link-text-color);
&:hover {
color: var(--btn-link-hover-text-color);
--btn-icon-color: var(--btn-link-hover-text-color);
}
&:focus,
&:hover,
&:active,
&.active {
text-decoration: none;
}
}
/* Button Sizes */
&.btn-sm { &.btn-sm {
font-size: var(--font-size-sm); width: var(--control-size-sm);
height: var(--control-size-sm);
padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
} }
&.btn-lg { &.btn-lg {
font-size: var(--font-size-lg); width: var(--control-size-lg);
height: var(--control-size-lg);
padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
} }
}
/* Button Block */ /* Button Clear */
&.btn-block { &.btn-clear {
display: block; background: transparent;
width: 100%; border: 0;
color: currentColor;
box-shadow: none;
height: var(--unit-5);
line-height: var(--unit-4);
margin-left: var(--unit-1);
margin-right: -2px;
opacity: 1;
padding: var(--unit-h);
text-decoration: none;
width: var(--unit-5);
&::before {
content: "\2715";
} }
}
/* Button Action */ /* Wider button */
&.btn-action { &.btn-wide {
width: var(--control-size); padding-left: var(--unit-6);
padding-left: 0; padding-right: var(--unit-6);
padding-right: 0; }
&.btn-sm { /* Small icon button */
width: var(--control-size-sm);
}
&.btn-lg { &.btn-sm.btn-icon {
width: var(--control-size-lg); display: inline-flex;
} align-items: baseline;
gap: var(--unit-h);
svg {
align-self: center;
} }
}
/* Button Clear */ /* Button icons */
&.btn-clear { & svg {
background: transparent; color: var(--btn-icon-color);
border: 0; align-self: center;
color: currentColor; }
box-shadow: none;
height: var(--unit-5);
line-height: var(--unit-4);
margin-left: var(--unit-1);
margin-right: -2px;
opacity: 1;
padding: var(--unit-h);
text-decoration: none;
width: var(--unit-5);
&::before {
content: "\2715";
}
}
/* Wider button */
&.btn-wide {
padding-left: var(--unit-6);
padding-right: var(--unit-6);
}
/* Small icon button */
&.btn-sm.btn-icon {
display: inline-flex;
align-items: baseline;
gap: var(--unit-h);
svg {
align-self: center;
}
}
/* Button icons */
& svg {
color: var(--btn-icon-color);
align-self: center;
}
} }
/* Button groups */ /* Button groups */
.btn-group { .btn-group {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
.btn {
flex: 1 0 auto;
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:focus,
&:hover,
&:active,
&.active {
z-index: var(--zindex-0);
}
}
&.btn-group-block {
display: flex;
.btn { .btn {
flex: 1 0 auto; flex: 1 0 0;
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:focus,
&:hover,
&:active,
&.active {
z-index: var(--zindex-0);
}
} }
}
&.btn-group-block { }
display: flex;
.btn {
flex: 1 0 0;
}
}
}

40
bookmarks/styles/theme/code.css
View file

@ -1,30 +1,30 @@
/* Code */ /* Code */
:root { :root {
--code-bg-color: var(--body-color-contrast); --code-bg-color: var(--body-color-contrast);
--code-color: var(--text-color); --code-color: var(--text-color);
} }
code { code {
border-radius: var(--border-radius); border-radius: var(--border-radius);
line-height: 1.25; line-height: 1.25;
padding: .1rem .2rem; padding: 0.1rem 0.2rem;
background: var(--code-bg-color); background: var(--code-bg-color);
color: var(--code-color); color: var(--code-color);
font-size: 85%; font-size: 85%;
} }
.code { .code {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--code-bg-color); background: var(--code-bg-color);
color: var(--text-color); color: var(--text-color);
position: relative; position: relative;
& code { & code {
color: inherit; color: inherit;
display: block; display: block;
line-height: 1.5; line-height: 1.5;
overflow-x: auto; overflow-x: auto;
padding: var(--unit-2); padding: var(--unit-2);
width: 100%; width: 100%;
} }
} }

2
bookmarks/styles/theme/dropdowns.css
View file

@ -4,7 +4,7 @@
position: relative; position: relative;
.menu { .menu {
animation: fade-in .15s ease 1; animation: fade-in 0.15s ease 1;
display: none; display: none;
left: 0; left: 0;
max-height: 50vh; max-height: 50vh;

30
bookmarks/styles/theme/empty.css
View file

@ -1,21 +1,21 @@
/* Empty states (or Blank slates) */ /* Empty states (or Blank slates) */
.empty { .empty {
background: var(--body-color-contrast); background: var(--body-color-contrast);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--secondary-text-color); color: var(--secondary-text-color);
text-align: center; text-align: center;
padding: var(--unit-16) var(--unit-8); padding: var(--unit-16) var(--unit-8);
.empty-icon { .empty-icon {
margin-bottom: var(--layout-spacing-lg); margin-bottom: var(--layout-spacing-lg);
} }
.empty-title, .empty-title,
.empty-subtitle { .empty-subtitle {
margin: var(--layout-spacing) auto; margin: var(--layout-spacing) auto;
} }
.empty-action { .empty-action {
margin-top: var(--layout-spacing-lg); margin-top: var(--layout-spacing-lg);
} }
} }

754
bookmarks/styles/theme/forms.css
View file

@ -1,515 +1,537 @@
/* Forms */ /* Forms */
:root { :root {
--input-bg-color: var(--body-color); --input-bg-color: var(--body-color);
--input-disabled-bg-color: var(--gray-100); --input-disabled-bg-color: var(--gray-100);
--input-text-color: var(--text-color); --input-text-color: var(--text-color);
--input-hint-color: var(--secondary-text-color); --input-hint-color: var(--secondary-text-color);
--input-border-color: var(--border-color); --input-border-color: var(--border-color);
--input-placeholder-color: var(--tertiary-text-color); --input-placeholder-color: var(--tertiary-text-color);
--input-box-shadow: var(--box-shadow-xs); --input-box-shadow: var(--box-shadow-xs);
--checkbox-bg-color: var(--body-color); --checkbox-bg-color: var(--body-color);
--checkbox-checked-bg-color: var(--primary-color); --checkbox-checked-bg-color: var(--primary-color);
--checkbox-disabled-bg-color: var(--gray-100); --checkbox-disabled-bg-color: var(--gray-100);
--checkbox-border-color: var(--border-color); --checkbox-border-color: var(--border-color);
--checkbox-icon-color: #fff; --checkbox-icon-color: #fff;
--switch-bg-color: var(--gray-300); --switch-bg-color: var(--gray-300);
--switch-border-color: var(--gray-400); --switch-border-color: var(--gray-400);
--switch-toggle-color: #fff; --switch-toggle-color: #fff;
} }
.form-group { .form-group {
&:first-of-type { &:first-of-type {
margin-top: var(--unit-4); margin-top: var(--unit-4);
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom: var(--unit-4); margin-bottom: var(--unit-4);
} }
} }
fieldset { fieldset {
margin-bottom: var(--layout-spacing-lg); margin-bottom: var(--layout-spacing-lg);
} }
legend { legend {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
font-weight: 500; font-weight: 500;
margin-bottom: var(--layout-spacing-lg); margin-bottom: var(--layout-spacing-lg);
} }
/* Form element: Label */ /* Form element: Label */
.form-label { .form-label {
display: block; display: block;
line-height: var(--line-height); line-height: var(--line-height);
margin-bottom: var(--unit-2); margin-bottom: var(--unit-2);
font-weight: 500; font-weight: 500;
} }
details summary .form-label { details summary .form-label {
margin-bottom: 0; margin-bottom: 0;
} }
details[open] summary .form-label { details[open] summary .form-label {
margin-bottom: var(--unit-2); margin-bottom: var(--unit-2);
} }
/* Form element: Input */ /* Form element: Input */
.form-input { .form-input {
appearance: none; appearance: none;
background: var(--input-bg-color); background: var(--input-bg-color);
background-image: none; background-image: none;
border: var(--border-width) solid var(--input-border-color); border: var(--border-width) solid var(--input-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--input-box-shadow); box-shadow: var(--input-box-shadow);
color: var(--input-text-color); color: var(--input-text-color);
display: block; display: block;
font-size: var(--font-size); font-size: var(--font-size);
height: var(--control-size); height: var(--control-size);
line-height: var(--line-height); line-height: var(--line-height);
max-width: 100%; max-width: 100%;
outline: none; outline: none;
padding: var(--control-padding-y) var(--control-padding-x); padding: var(--control-padding-y) var(--control-padding-x);
position: relative; position: relative;
transition: background 0.2s, border 0.2s, color 0.2s; transition:
width: 100%; background 0.2s,
border 0.2s,
color 0.2s;
width: 100%;
&:focus { &:focus {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: calc(var(--focus-outline-offset) * -1); outline-offset: calc(var(--focus-outline-offset) * -1);
} }
&::placeholder { &::placeholder {
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
/* Input sizes */ /* Input sizes */
&.input-sm { &.input-sm {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
height: var(--control-size-sm); height: var(--control-size-sm);
padding: var(--control-padding-y-sm) var(--control-padding-x-sm); padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
} }
&.input-lg { &.input-lg {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
height: var(--control-size-lg); height: var(--control-size-lg);
padding: var(--control-padding-y-lg) var(--control-padding-x-lg); padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
} }
&.input-inline { &.input-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
} }
/* Input types */ /* Input types */
&[type="file"] { &[type="file"] {
height: auto; height: auto;
} }
} }
/* Form element: Textarea */ /* Form element: Textarea */
textarea.form-input { textarea.form-input {
&, &,
&.input-lg, &.input-lg,
&.input-sm { &.input-sm {
height: auto; height: auto;
} }
} }
/* Form element: Input hint */ /* Form element: Input hint */
.form-input-hint { .form-input-hint {
color: var(--input-hint-color); color: var(--input-hint-color);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
margin-top: var(--unit-1); margin-top: var(--unit-1);
.has-success &, .has-success &,
.is-success + & { .is-success + & {
color: var(--success-color); color: var(--success-color);
} }
.has-error &, .has-error &,
.is-error + & { .is-error + & {
color: var(--error-color); color: var(--error-color);
} }
} }
/* Form element: Select */ /* Form element: Select */
.form-select { .form-select {
appearance: none; appearance: none;
background: var(--input-bg-color); background: var(--input-bg-color);
border: var(--border-width) solid var(--input-border-color); border: var(--border-width) solid var(--input-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--input-box-shadow); box-shadow: var(--input-box-shadow);
color: var(--input-text-color); color: var(--input-text-color);
font-size: var(--font-size); font-size: var(--font-size);
height: var(--control-size); height: var(--control-size);
line-height: var(--line-height); line-height: var(--line-height);
outline: none; outline: none;
padding: var(--control-padding-y) var(--control-padding-x);
vertical-align: middle;
width: 100%;
&:focus {
outline: var(--focus-outline);
outline-offset: calc(var(--focus-outline-offset) * -1);
}
/* Select sizes */
&.select-sm {
font-size: var(--font-size-sm);
height: var(--control-size-sm);
padding: var(--control-padding-y-sm)
calc(var(--control-icon-size) + var(--control-padding-x-sm))
var(--control-padding-y-sm) var(--control-padding-x-sm);
}
&.select-lg {
font-size: var(--font-size-lg);
height: var(--control-size-lg);
padding: var(--control-padding-y-lg)
calc(var(--control-icon-size) + var(--control-padding-x-lg))
var(--control-padding-y-lg) var(--control-padding-x-lg);
}
/* Multiple select */
&[size],
&[multiple] {
height: auto;
padding: var(--control-padding-y) var(--control-padding-x); padding: var(--control-padding-y) var(--control-padding-x);
vertical-align: middle;
width: 100%;
&:focus { & option {
outline: var(--focus-outline); padding: var(--unit-h) var(--unit-1);
outline-offset: calc(var(--focus-outline-offset) * -1);
} }
}
/* Select sizes */ &:not([multiple]):not([size]) {
background: var(--input-bg-color)
&.select-sm { url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E")
font-size: var(--font-size-sm); no-repeat right 0.35rem center / 0.4rem 0.5rem;
height: var(--control-size-sm); padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
padding: var(--control-padding-y-sm) calc(var(--control-icon-size) + var(--control-padding-x-sm)) var(--control-padding-y-sm) var(--control-padding-x-sm); }
}
&.select-lg {
font-size: var(--font-size-lg);
height: var(--control-size-lg);
padding: var(--control-padding-y-lg) calc(var(--control-icon-size) + var(--control-padding-x-lg)) var(--control-padding-y-lg) var(--control-padding-x-lg);
}
/* Multiple select */
&[size],
&[multiple] {
height: auto;
padding: var(--control-padding-y) var(--control-padding-x);
& option {
padding: var(--unit-h) var(--unit-1);
}
}
&:not([multiple]):not([size]) {
background: var(--input-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
}
} }
/* Form element: Checkbox and Radio */ /* Form element: Checkbox and Radio */
.form-checkbox, .form-checkbox,
.form-radio, .form-radio,
.form-switch { .form-switch {
display: block; display: block;
line-height: var(--line-height); line-height: var(--line-height);
margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0; margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
min-height: var(--control-size-sm); min-height: var(--control-size-sm);
padding: calc((var(--control-size-sm) - var(--line-height)) / 2) var(--control-padding-x) calc((var(--control-size-sm) - var(--line-height)) / 2) calc(var(--control-icon-size) + var(--control-padding-x)); padding: calc((var(--control-size-sm) - var(--line-height)) / 2)
position: relative; var(--control-padding-x)
calc((var(--control-size-sm) - var(--line-height)) / 2)
calc(var(--control-icon-size) + var(--control-padding-x));
position: relative;
input { input {
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
width: 1px; width: 1px;
&:focus-visible + .form-icon { &:focus-visible + .form-icon {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
}
&:checked + .form-icon {
background: var(--checkbox-checked-bg-color);
border-color: var(--checkbox-checked-bg-color);
}
} }
.form-icon { &:checked + .form-icon {
border: var(--border-width) solid var(--checkbox-border-color); background: var(--checkbox-checked-bg-color);
box-shadow: var(--input-box-shadow); border-color: var(--checkbox-checked-bg-color);
cursor: pointer;
display: inline-block;
position: absolute;
transition: background .2s, border .2s, color .2s;
} }
}
/* Input checkbox, radio, and switch sizes */ .form-icon {
border: var(--border-width) solid var(--checkbox-border-color);
box-shadow: var(--input-box-shadow);
cursor: pointer;
display: inline-block;
position: absolute;
transition:
background 0.2s,
border 0.2s,
color 0.2s;
}
&.input-sm { /* Input checkbox, radio, and switch sizes */
font-size: var(--font-size-sm);
margin: 0;
}
&.input-lg { &.input-sm {
font-size: var(--font-size-lg); font-size: var(--font-size-sm);
margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0; margin: 0;
} }
&.input-lg {
font-size: var(--font-size-lg);
margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0;
}
} }
.form-checkbox, .form-checkbox,
.form-radio { .form-radio {
.form-icon { .form-icon {
background: var(--checkbox-bg-color); background: var(--checkbox-bg-color);
height: var(--control-icon-size); height: var(--control-icon-size);
left: 0; left: 0;
top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2); top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2);
width: var(--control-icon-size); width: var(--control-icon-size);
} }
} }
.form-checkbox { .form-checkbox {
font-weight: 500; font-weight: 500;
.form-icon { .form-icon {
border-radius: var(--border-radius); border-radius: var(--border-radius);
}
input {
&:checked + .form-icon {
&::before {
background-clip: padding-box;
border: var(--border-width-lg) solid var(--checkbox-icon-color);
border-left-width: 0;
border-top-width: 0;
content: "";
height: 9px;
left: 50%;
margin-left: -3px;
margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 6px;
}
} }
input { &:indeterminate + .form-icon {
&:checked + .form-icon { background: var(--checkbox-checked-bg-color);
&::before { border-color: var(--checkbox-checked-bg-color);
background-clip: padding-box;
border: var(--border-width-lg) solid var(--checkbox-icon-color);
border-left-width: 0;
border-top-width: 0;
content: "";
height: 9px;
left: 50%;
margin-left: -3px;
margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 6px;
}
}
&:indeterminate + .form-icon { &::before {
background: var(--checkbox-checked-bg-color); background: var(--checkbox-icon-color);
border-color: var(--checkbox-checked-bg-color); content: "";
height: 2px;
&::before { left: 50%;
background: var(--checkbox-icon-color); margin-left: -5px;
content: ""; margin-top: -1px;
height: 2px; position: absolute;
left: 50%; top: 50%;
margin-left: -5px; width: 10px;
margin-top: -1px; }
position: absolute;
top: 50%;
width: 10px;
}
}
} }
}
} }
.form-radio { .form-radio {
.form-icon { .form-icon {
border-radius: 50%; border-radius: 50%;
} }
input { input {
&:checked + .form-icon { &:checked + .form-icon {
&::before { &::before {
background: var(--checkbox-icon-color); background: var(--checkbox-icon-color);
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
height: 6px; height: 6px;
left: 50%; left: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 6px; width: 6px;
} }
}
} }
}
} }
/* Form element: Switch */ /* Form element: Switch */
.form-switch { .form-switch {
padding-left: calc(var(--unit-8) + var(--control-padding-x)); padding-left: calc(var(--unit-8) + var(--control-padding-x));
.form-icon { .form-icon {
background: var(--switch-bg-color); background: var(--switch-bg-color);
background-clip: padding-box; background-clip: padding-box;
border-color: var(--switch-border-color); border-color: var(--switch-border-color);
border-radius: calc(var(--unit-2) + var(--border-width)); border-radius: calc(var(--unit-2) + var(--border-width));
height: calc(var(--unit-4) + var(--border-width) * 2); height: calc(var(--unit-4) + var(--border-width) * 2);
left: 0; left: 0;
top: calc((var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width)); top: calc(
width: var(--unit-8); (var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width)
);
width: var(--unit-8);
&::before { &::before {
background: var(--switch-toggle-color); background: var(--switch-toggle-color);
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
display: block; display: block;
height: var(--unit-4); height: var(--unit-4);
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
transition: background .2s, border .2s, color .2s, left .2s; transition:
width: var(--unit-4); background 0.2s,
} border 0.2s,
color 0.2s,
left 0.2s;
width: var(--unit-4);
} }
}
input { input {
&:checked + .form-icon { &:checked + .form-icon {
&::before { &::before {
left: 14px; left: 14px;
} }
}
} }
}
} }
/* Form Icons */ /* Form Icons */
.has-icon-left, .has-icon-left,
.has-icon-right { .has-icon-right {
position: relative; position: relative;
.form-icon { .form-icon {
height: var(--control-icon-size); height: var(--control-icon-size);
margin: 0 var(--control-padding-y); margin: 0 var(--control-padding-y);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: var(--control-icon-size); width: var(--control-icon-size);
z-index: calc(var(--zindex-0) + 1); z-index: calc(var(--zindex-0) + 1);
} }
} }
.has-icon-left { .has-icon-left {
& .form-icon { & .form-icon {
left: var(--border-width); left: var(--border-width);
} }
& .form-input { & .form-input {
padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2); padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
} }
} }
.has-icon-right { .has-icon-right {
& .form-icon { & .form-icon {
right: var(--border-width); right: var(--border-width);
} }
& .form-input { & .form-input {
padding-right: calc(var(--control-icon-size) + var(--control-padding-y) * 2); padding-right: calc(
} var(--control-icon-size) + var(--control-padding-y) * 2
);
}
} }
/* Form element: Input groups */ /* Form element: Input groups */
.input-group { .input-group {
display: flex; display: flex;
.input-group-addon { .input-group-addon {
background: var(--body-color); background: var(--body-color);
border: var(--border-width) solid var(--input-border-color); border: var(--border-width) solid var(--input-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
line-height: var(--line-height); line-height: var(--line-height);
padding: var(--control-padding-y) var(--control-padding-x); padding: var(--control-padding-y) var(--control-padding-x);
white-space: nowrap; white-space: nowrap;
&.addon-sm { &.addon-sm {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
padding: var(--control-padding-y-sm) var(--control-padding-x-sm); padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
}
&.addon-lg {
font-size: var(--font-size-lg);
padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
}
} }
.form-input, &.addon-lg {
.form-select { font-size: var(--font-size-lg);
flex: 1 1 auto; padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
width: 1%; }
}
.form-input,
.form-select {
flex: 1 1 auto;
width: 1%;
}
.input-group-btn {
z-index: var(--zindex-0);
}
.form-input,
.form-select,
.input-group-addon,
.input-group-btn {
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
} }
.input-group-btn { &:not(:first-child):not(:last-child) {
z-index: var(--zindex-0); border-radius: 0;
margin-left: calc(-1 * var(--border-width));
} }
.form-input, &:last-child:not(:first-child) {
.form-select, border-bottom-left-radius: 0;
.input-group-addon, border-top-left-radius: 0;
.input-group-btn { margin-left: calc(-1 * var(--border-width));
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: calc(-1 * var(--border-width));
}
&:focus {
z-index: calc(var(--zindex-0) + 1);
}
} }
.form-select { &:focus {
width: auto; z-index: calc(var(--zindex-0) + 1);
} }
}
&.input-inline { .form-select {
display: inline-flex; width: auto;
} }
&.input-inline {
display: inline-flex;
}
} }
/* Form validation states */ /* Form validation states */
.form-input, .form-input,
.form-select { .form-select {
.has-success &, .has-success &,
&.is-success { &.is-success {
background: var(--success-color-shade); background: var(--success-color-shade);
border-color: var(--success-color); border-color: var(--success-color);
&:focus { &:focus {
outline-color: var(--success-color); outline-color: var(--success-color);
}
} }
}
.has-error &, .has-error &,
&.is-error { &.is-error {
background: var(--error-color-shade); background: var(--error-color-shade);
border-color: var(--error-color); border-color: var(--error-color);
&:focus { &:focus {
outline-color: var(--error-color); outline-color: var(--error-color);
}
} }
}
} }
/* Form disabled and readonly */ /* Form disabled and readonly */
.form-input, .form-input,
.form-select { .form-select {
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: var(--input-disabled-bg-color); background-color: var(--input-disabled-bg-color);
cursor: not-allowed; cursor: not-allowed;
} }
} }
input { input {
&:disabled, &:disabled,
&.disabled { &.disabled {
& + .form-icon { & + .form-icon {
background: var(--checkbox-disabled-bg-color); background: var(--checkbox-disabled-bg-color);
cursor: not-allowed; cursor: not-allowed;
}
} }
}
} }
/* Increase input font size on small viewports to prevent zooming on focus the input */ /* Increase input font size on small viewports to prevent zooming on focus the input */
/* on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max */ /* on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max */
/* viewport size */ /* viewport size */
@media screen and (max-width: 430px) { @media screen and (max-width: 430px) {
.form-input { .form-input {
font-size: 16px; font-size: 16px;
} }
} }

151
bookmarks/styles/theme/menus.css
View file

@ -1,89 +1,90 @@
:root { :root {
--menu-bg-color: var(--body-color); --menu-bg-color: var(--body-color);
--menu-border-color: var(--gray-200); --menu-border-color: var(--gray-200);
--menu-border-radius: var(--border-radius); --menu-border-radius: var(--border-radius);
--menu-box-shadow: var(--box-shadow); --menu-box-shadow: var(--box-shadow);
--menu-item-color: var(--text-color); --menu-item-color: var(--text-color);
--menu-item-hover-color: var(--primary-text-color); --menu-item-hover-color: var(--primary-text-color);
--menu-item-bg-color: transparent; --menu-item-bg-color: transparent;
--menu-item-hover-bg-color: var(--primary-color-shade); --menu-item-hover-bg-color: var(--primary-color-shade);
} }
/* Menus */ /* Menus */
.menu { .menu {
background: var(--menu-bg-color); background: var(--menu-bg-color);
border: solid 1px var(--menu-border-color); border: solid 1px var(--menu-border-color);
border-radius: var(--menu-border-radius); border-radius: var(--menu-border-radius);
box-shadow: var(--menu-box-shadow); box-shadow: var(--menu-box-shadow);
list-style: none; list-style: none;
margin: 0; margin: 0;
min-width: var(--control-width-xs); min-width: var(--control-width-xs);
transform: translateY(var(--layout-spacing-sm)); transform: translateY(var(--layout-spacing-sm));
z-index: var(--zindex-3); z-index: var(--zindex-3);
&.menu-nav { &.menu-nav {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
}
.menu-item {
margin-top: 0;
padding: 0 var(--unit-4);
position: relative;
text-decoration: none;
&:first-of-type {
padding-top: var(--unit-2);
} }
.menu-item { &:last-of-type {
margin-top: 0; padding-bottom: var(--unit-2);
padding: 0 var(--unit-4);
position: relative;
text-decoration: none;
&:first-of-type {
padding-top: var(--unit-2);
}
&:last-of-type {
padding-bottom: var(--unit-2);
}
& > a, .btn.btn-link {
border-radius: var(--menu-border-radius);
color: var(--menu-item-color);
background: var(--menu-item-bg-color);
display: block;
margin: 0 calc(-1 * var(--unit-2));
padding: var(--unit-1) var(--unit-2);
text-decoration: none;
&:focus,
&:hover,
&:active,
&.active {
background: var(--menu-item-hover-bg-color);
color: var(--menu-item-hover-color);
}
}
.form-checkbox,
.form-radio,
.form-switch {
margin: var(--unit-h) 0;
}
& + .menu-item {
margin-top: var(--unit-1);
}
} }
& .menu-badge { & > a,
align-items: center; .btn.btn-link {
display: flex; border-radius: var(--menu-border-radius);
height: 100%; color: var(--menu-item-color);
position: absolute; background: var(--menu-item-bg-color);
right: 0; display: block;
top: 0; margin: 0 calc(-1 * var(--unit-2));
padding: var(--unit-1) var(--unit-2);
text-decoration: none;
.label { &:focus,
margin-right: var(--unit-2); &:hover,
} &:active,
&.active {
background: var(--menu-item-hover-bg-color);
color: var(--menu-item-hover-color);
}
} }
& .divider { .form-checkbox,
border-bottom: solid 1px var(--secondary-border-color); .form-radio,
margin: var(--unit-2) 0; .form-switch {
margin: var(--unit-h) 0;
} }
}
& + .menu-item {
margin-top: var(--unit-1);
}
}
& .menu-badge {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 0;
top: 0;
.label {
margin-right: var(--unit-2);
}
}
& .divider {
border-bottom: solid 1px var(--secondary-border-color);
margin: var(--unit-2) 0;
}
}

167
bookmarks/styles/theme/modals.css
View file

@ -1,103 +1,104 @@
/* Modals */ /* Modals */
:root { :root {
--modal-overlay-bg-color: rgba(243, 244, 246, 0.6); --modal-overlay-bg-color: rgba(243, 244, 246, 0.6);
--modal-container-bg-color: var(--body-color); --modal-container-bg-color: var(--body-color);
--modal-container-border-color: var(--gray-200); --modal-container-border-color: var(--gray-200);
--modal-border-radius: var(--border-radius-lg); --modal-border-radius: var(--border-radius-lg);
--modal-box-shadow: var(--box-shadow-lg); --modal-box-shadow: var(--box-shadow-lg);
} }
.modal { .modal {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
display: none; display: none;
justify-content: center; justify-content: center;
left: 0; left: 0;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
padding: var(--layout-spacing); padding: var(--layout-spacing);
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
&:target, &:target,
&.active { &.active {
display: flex; display: flex;
opacity: 1; opacity: 1;
z-index: var(--zindex-4); z-index: var(--zindex-4);
& .modal-overlay { & .modal-overlay {
animation: fade-in .15s ease 1; animation: fade-in 0.15s ease 1;
background: var(--modal-overlay-bg-color); background: var(--modal-overlay-bg-color);
bottom: 0; bottom: 0;
cursor: default; cursor: default;
display: block; display: block;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
& .modal-container {
animation: fade-in .15s ease 1;
z-index: var(--zindex-0);
}
} }
&.active.closing { & .modal-container {
& .modal-overlay, & .modal-container { animation: fade-in 0.15s ease 1;
animation: fade-out .15s ease 1; z-index: var(--zindex-0);
}
} }
}
&.active.closing {
& .modal-overlay,
& .modal-container {
animation: fade-out 0.15s ease 1;
}
}
} }
.modal-container { .modal-container {
background: var(--modal-container-bg-color); background: var(--modal-container-bg-color);
border: solid 1px var(--modal-container-border-color); border: solid 1px var(--modal-container-border-color);
border-radius: var(--modal-border-radius); border-radius: var(--modal-border-radius);
box-shadow: var(--modal-box-shadow); box-shadow: var(--modal-box-shadow);
display: flex;
flex-direction: column;
gap: var(--unit-4);
max-height: 75vh;
max-width: var(--control-width-md);
padding: var(--unit-6);
width: 100%;
& .modal-header {
display: flex; display: flex;
flex-direction: column; align-items: flex-start;
gap: var(--unit-4); gap: var(--unit-2);
max-height: 75vh; color: var(--text-color);
max-width: var(--control-width-md);
padding: var(--unit-6);
width: 100%;
& .modal-header { & h2 {
display: flex; flex: 1 1 0;
align-items: flex-start; align-items: flex-start;
gap: var(--unit-2); font-size: 1rem;
color: var(--text-color); margin: 0;
& h2 {
flex: 1 1 0;
align-items: flex-start;
font-size: 1rem;
margin: 0;
}
& button.close {
background: none;
border: none;
padding: 0;
line-height: 0;
cursor: pointer;
opacity: .85;
color: var(--secondary-text-color);
&:hover {
opacity: 1;
}
}
} }
& .modal-body { & button.close {
overflow-y: auto; background: none;
position: relative; border: none;
} padding: 0;
line-height: 0;
cursor: pointer;
opacity: 0.85;
color: var(--secondary-text-color);
& .modal-footer { &:hover {
text-align: right; opacity: 1;
}
} }
}
& .modal-body {
overflow-y: auto;
position: relative;
}
& .modal-footer {
text-align: right;
}
} }

110
bookmarks/styles/theme/pagination.css
View file

@ -1,61 +1,61 @@
/* Pagination */ /* Pagination */
.pagination { .pagination {
display: flex; display: flex;
list-style: none; list-style: none;
margin: var(--unit-1) 0; margin: var(--unit-1) 0;
padding: var(--unit-1) 0; padding: var(--unit-1) 0;
& .page-item { & .page-item {
margin: var(--unit-1) var(--unit-o); margin: var(--unit-1) var(--unit-o);
& span { & span {
display: inline-block; display: inline-block;
padding: var(--unit-1) var(--unit-1); padding: var(--unit-1) var(--unit-1);
}
& a {
border-radius: var(--border-radius);
display: inline-block;
padding: var(--unit-1) var(--unit-2);
text-decoration: none;
&:focus,
&:hover {
color: var(--primary-text-color);
}
}
&.disabled {
& a {
cursor: default;
opacity: .5;
pointer-events: none;
}
}
&.active {
& a {
background: var(--primary-color);
color: var(--contrast-text-color);
}
}
&.page-prev,
&.page-next {
flex: 1 0 50%;
}
&.page-next {
text-align: right;
}
& .page-item-title {
margin: 0;
}
& .page-item-subtitle {
margin: 0;
opacity: .5;
}
} }
& a {
border-radius: var(--border-radius);
display: inline-block;
padding: var(--unit-1) var(--unit-2);
text-decoration: none;
&:focus,
&:hover {
color: var(--primary-text-color);
}
}
&.disabled {
& a {
cursor: default;
opacity: 0.5;
pointer-events: none;
}
}
&.active {
& a {
background: var(--primary-color);
color: var(--contrast-text-color);
}
}
&.page-prev,
&.page-next {
flex: 1 0 50%;
}
&.page-next {
text-align: right;
}
& .page-item-title {
margin: 0;
}
& .page-item-subtitle {
margin: 0;
opacity: 0.5;
}
}
} }

40
bookmarks/styles/theme/tables.css
View file

@ -1,26 +1,26 @@
/* Tables */ /* Tables */
.table { .table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
text-align: left; text-align: left;
/* Scrollable tables */ /* Scrollable tables */
&.table-scroll { &.table-scroll {
display: block; display: block;
overflow-x: auto; overflow-x: auto;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
white-space: nowrap; white-space: nowrap;
} }
& td, & td,
& th { & th {
border-bottom: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color);
padding: var(--unit-3) var(--unit-2); padding: var(--unit-3) var(--unit-2);
} }
& th { & th {
border-bottom-width: var(--border-width-lg); border-bottom-width: var(--border-width-lg);
} }
} }

125
bookmarks/styles/theme/tabs.css
View file

@ -1,75 +1,76 @@
/* Tabs */ /* Tabs */
:root { :root {
--tab-color: var(--text-color); --tab-color: var(--text-color);
--tab-hover-color: var(--primary-text-color); --tab-hover-color: var(--primary-text-color);
--tab-active-color: var(--primary-text-color); --tab-active-color: var(--primary-text-color);
--tab-highlight-color: var(--primary-color); --tab-highlight-color: var(--primary-color);
} }
.tab { .tab {
align-items: center; align-items: center;
border-bottom: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0; margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0;
& .tab-item {
margin-top: 0;
& a {
border-bottom: var(--border-width-lg) solid transparent;
color: var(--tab-color);
display: block;
margin: 0 var(--unit-2) 0 0;
padding: var(--unit-2) var(--unit-1)
calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
text-decoration: none;
&:focus,
&:hover {
color: var(--tab-hover-color);
}
}
&.active a,
& a.active {
border-bottom-color: var(--tab-highlight-color);
color: var(--tab-active-color);
}
&.tab-action {
flex: 1 0 auto;
text-align: right;
}
& .btn-clear {
margin-top: calc(-1 * var(--unit-1));
}
}
&.tab-block {
& .tab-item { & .tab-item {
margin-top: 0; flex: 1 0 0;
text-align: center;
& a { & a {
border-bottom: var(--border-width-lg) solid transparent; margin: 0;
color: var(--tab-color); }
display: block;
margin: 0 var(--unit-2) 0 0;
padding: var(--unit-2) var(--unit-1) calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
text-decoration: none;
&:focus, & .badge {
&:hover { &[data-badge]::after {
color: var(--tab-hover-color); position: absolute;
} right: var(--unit-h);
} top: var(--unit-h);
transform: translate(0, 0);
&.active a,
& a.active {
border-bottom-color: var(--tab-highlight-color);
color: var(--tab-active-color);
}
&.tab-action {
flex: 1 0 auto;
text-align: right;
}
& .btn-clear {
margin-top: calc(-1 * var(--unit-1));
} }
}
} }
}
&.tab-block { &:not(.tab-block) {
& .tab-item { & .badge {
flex: 1 0 0; padding-right: 0;
text-align: center;
& a {
margin: 0;
}
& .badge {
&[data-badge]::after {
position: absolute;
right: var(--unit-h);
top: var(--unit-h);
transform: translate(0, 0);
}
}
}
} }
}
&:not(.tab-block) { }
& .badge {
padding-right: 0;
}
}
}

50
bookmarks/styles/theme/toasts.css
View file

@ -1,35 +1,35 @@
/* Toasts */ /* Toasts */
.toast { .toast {
background: var(--gray-600); background: var(--gray-600);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--contrast-text-color); color: var(--contrast-text-color);
display: block; display: block;
padding: var(--layout-spacing); padding: var(--layout-spacing);
width: 100%; width: 100%;
&.toast-primary { &.toast-primary {
background: var(--primary-color); background: var(--primary-color);
} }
&.toast-success { &.toast-success {
background: var(--success-color); background: var(--success-color);
} }
&.toast-warning { &.toast-warning {
background: var(--warning-color); background: var(--warning-color);
} }
&.toast-error { &.toast-error {
background: var(--error-color); background: var(--error-color);
} }
.btn-clear { .btn-clear {
margin: var(--unit-h); margin: var(--unit-h);
} }
p { p {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
}
} }
}
} }

92
bookmarks/styles/theme/typography.css
View file

@ -6,11 +6,11 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
color: inherit; color: inherit;
font-weight: 500; font-weight: 500;
line-height: 1.2; line-height: 1.2;
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-top: 0; margin-top: 0;
} }
.h1, .h1,
.h2, .h2,
@ -18,100 +18,100 @@ h6 {
.h4, .h4,
.h5, .h5,
.h6 { .h6 {
font-weight: 500; font-weight: 500;
} }
h1, h1,
.h1 { .h1 {
font-size: 2rem; font-size: 2rem;
} }
h2, h2,
.h2 { .h2 {
font-size: 1.6rem; font-size: 1.6rem;
} }
h3, h3,
.h3 { .h3 {
font-size: 1.4rem; font-size: 1.4rem;
} }
h4, h4,
.h4 { .h4 {
font-size: 1.2rem; font-size: 1.2rem;
} }
h5, h5,
.h5 { .h5 {
font-size: 1rem; font-size: 1rem;
} }
h6, h6,
.h6 { .h6 {
font-size: 0.8rem; font-size: 0.8rem;
} }
/* Paragraphs */ /* Paragraphs */
p { p {
margin: 0 0 var(--line-height); margin: 0 0 var(--line-height);
} }
/* Semantic text elements */ /* Semantic text elements */
a, a,
ins, ins,
u { u {
text-decoration-skip-ink: auto; text-decoration-skip-ink: auto;
} }
abbr[title] { abbr[title] {
border-bottom: var(--border-width) dotted; border-bottom: var(--border-width) dotted;
cursor: help; cursor: help;
text-decoration: none; text-decoration: none;
} }
/* Blockquote */ /* Blockquote */
blockquote { blockquote {
border-left: var(--border-width-lg) solid var(--border-color); border-left: var(--border-width-lg) solid var(--border-color);
margin-left: 0; margin-left: 0;
padding: var(--unit-2) var(--unit-4); padding: var(--unit-2) var(--unit-4);
& p:last-child { & p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
/* Lists */ /* Lists */
ul, ul,
ol { ol {
margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
padding: 0;
& ul,
& ol {
margin: var(--unit-4) 0 var(--unit-4) var(--unit-4); margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
padding: 0; }
& ul, & li {
& ol { margin-top: var(--unit-2);
margin: var(--unit-4) 0 var(--unit-4) var(--unit-4); }
}
& li {
margin-top: var(--unit-2);
}
} }
ul { ul {
list-style: disc inside; list-style: disc inside;
& ul { & ul {
list-style-type: circle; list-style-type: circle;
} }
} }
ol { ol {
list-style: decimal inside; list-style: decimal inside;
& ol { & ol {
list-style-type: lower-alpha; list-style-type: lower-alpha;
} }
} }
dl { dl {
& dt { & dt {
font-weight: bold; font-weight: bold;
} }
& dd { & dd {
margin: var(--unit-1) 0 var(--unit-4) 0; margin: var(--unit-1) 0 var(--unit-4) 0;
} }
} }

226
bookmarks/styles/theme/utilities.css
View file

@ -1,296 +1,296 @@
/* Colors */ /* Colors */
.text-primary { .text-primary {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.text-secondary { .text-secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.text-tertiary { .text-tertiary {
color: var(--tertiary-text-color); color: var(--tertiary-text-color);
} }
.text-success { .text-success {
color: var(--success-color); color: var(--success-color);
} }
.text-warning { .text-warning {
color: var(--warning-color); color: var(--warning-color);
} }
.text-error { .text-error {
color: var(--error-color); color: var(--error-color);
} }
.icon-color { .icon-color {
color: var(--icon-color); color: var(--icon-color);
} }
/* Display */ /* Display */
.d-block { .d-block {
display: block; display: block;
} }
.d-inline { .d-inline {
display: inline; display: inline;
} }
.d-inline-block { .d-inline-block {
display: inline-block; display: inline-block;
} }
.d-flex { .d-flex {
display: flex; display: flex;
} }
.d-inline-flex { .d-inline-flex {
display: inline-flex; display: inline-flex;
} }
.d-none, .d-none,
.d-hide { .d-hide {
display: none !important; display: none !important;
} }
.d-visible { .d-visible {
visibility: visible; visibility: visible;
} }
.d-invisible { .d-invisible {
visibility: hidden; visibility: hidden;
} }
.text-hide { .text-hide {
background: transparent; background: transparent;
border: 0; border: 0;
color: transparent; color: transparent;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
text-shadow: none; text-shadow: none;
} }
.text-assistive { .text-assistive {
border: 0; border: 0;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
/* Loading */ /* Loading */
.loading { .loading {
color: transparent !important; color: transparent !important;
min-height: var(--unit-4); min-height: var(--unit-4);
pointer-events: none; pointer-events: none;
position: relative; position: relative;
&::after {
animation: loading 500ms infinite linear;
background: transparent;
border: var(--border-width-lg) solid var(--primary-color);
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: var(--unit-4);
left: 50%;
margin-left: calc(-1 * var(--unit-2));
margin-top: calc(-1 * var(--unit-2));
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
width: var(--unit-4);
z-index: var(--zindex-0);
}
&.loading-lg {
min-height: var(--unit-10);
&::after { &::after {
animation: loading 500ms infinite linear; height: var(--unit-8);
background: transparent; margin-left: calc(-1 * var(--unit-4));
border: var(--border-width-lg) solid var(--primary-color); margin-top: calc(-1 * var(--unit-4));
border-radius: 50%; width: var(--unit-8);
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: var(--unit-4);
left: 50%;
margin-left: calc(-1 * var(--unit-2));
margin-top: calc(-1 * var(--unit-2));
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
width: var(--unit-4);
z-index: var(--zindex-0);
}
&.loading-lg {
min-height: var(--unit-10);
&::after {
height: var(--unit-8);
margin-left: calc(-1 * var(--unit-4));
margin-top: calc(-1 * var(--unit-4));
width: var(--unit-8);
}
} }
}
} }
/* Position */ /* Position */
.m-0 { .m-0 {
margin: 0 !important; margin: 0 !important;
} }
.mb-0 { .mb-0 {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.ml-0 { .ml-0 {
margin-left: 0 !important; margin-left: 0 !important;
} }
.mr-0 { .mr-0 {
margin-right: 0 !important; margin-right: 0 !important;
} }
.mt-0 { .mt-0 {
margin-top: 0 !important; margin-top: 0 !important;
} }
.mx-0 { .mx-0 {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
.my-0 { .my-0 {
margin-bottom: 0 !important; margin-bottom: 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
} }
.m-1 { .m-1 {
margin: var(--unit-1) !important; margin: var(--unit-1) !important;
} }
.mb-1 { .mb-1 {
margin-bottom: var(--unit-1) !important; margin-bottom: var(--unit-1) !important;
} }
.ml-1 { .ml-1 {
margin-left: var(--unit-1) !important; margin-left: var(--unit-1) !important;
} }
.mr-1 { .mr-1 {
margin-right: var(--unit-1) !important; margin-right: var(--unit-1) !important;
} }
.mt-1 { .mt-1 {
margin-top: var(--unit-1) !important; margin-top: var(--unit-1) !important;
} }
.mx-1 { .mx-1 {
margin-left: var(--unit-1) !important; margin-left: var(--unit-1) !important;
margin-right: var(--unit-1) !important; margin-right: var(--unit-1) !important;
} }
.my-1 { .my-1 {
margin-bottom: var(--unit-1) !important; margin-bottom: var(--unit-1) !important;
margin-top: var(--unit-1) !important; margin-top: var(--unit-1) !important;
} }
.m-2 { .m-2 {
margin: var(--unit-2) !important; margin: var(--unit-2) !important;
} }
.mb-2 { .mb-2 {
margin-bottom: var(--unit-2) !important; margin-bottom: var(--unit-2) !important;
} }
.ml-2 { .ml-2 {
margin-left: var(--unit-2) !important; margin-left: var(--unit-2) !important;
} }
.mr-2 { .mr-2 {
margin-right: var(--unit-2) !important; margin-right: var(--unit-2) !important;
} }
.mt-2 { .mt-2 {
margin-top: var(--unit-2) !important; margin-top: var(--unit-2) !important;
} }
.mx-2 { .mx-2 {
margin-left: var(--unit-2) !important; margin-left: var(--unit-2) !important;
margin-right: var(--unit-2) !important; margin-right: var(--unit-2) !important;
} }
.my-2 { .my-2 {
margin-bottom: var(--unit-2) !important; margin-bottom: var(--unit-2) !important;
margin-top: var(--unit-2) !important; margin-top: var(--unit-2) !important;
} }
.m-4 { .m-4 {
margin: var(--unit-4) !important; margin: var(--unit-4) !important;
} }
.mb-4 { .mb-4 {
margin-bottom: var(--unit-4) !important; margin-bottom: var(--unit-4) !important;
} }
.ml-4 { .ml-4 {
margin-left: var(--unit-4) !important; margin-left: var(--unit-4) !important;
} }
.mr-4 { .mr-4 {
margin-right: var(--unit-4) !important; margin-right: var(--unit-4) !important;
} }
.mt-4 { .mt-4 {
margin-top: var(--unit-4) !important; margin-top: var(--unit-4) !important;
} }
.mx-4 { .mx-4 {
margin-left: var(--unit-4) !important; margin-left: var(--unit-4) !important;
margin-right: var(--unit-4) !important; margin-right: var(--unit-4) !important;
} }
.my-4 { .my-4 {
margin-bottom: var(--unit-4) !important; margin-bottom: var(--unit-4) !important;
margin-top: var(--unit-4) !important; margin-top: var(--unit-4) !important;
} }
.mx-auto { .mx-auto {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* Text */ /* Text */
.text-normal { .text-normal {
font-weight: normal; font-weight: normal;
} }
.text-bold { .text-bold {
font-weight: bold; font-weight: bold;
} }
.text-italic { .text-italic {
font-style: italic; font-style: italic;
} }
.text-large { .text-large {
font-size: 1.2em; font-size: 1.2em;
} }
.text-small { .text-small {
font-size: .9em; font-size: 0.9em;
} }
.text-tiny { .text-tiny {
font-size: .8em; font-size: 0.8em;
} }
.text-muted { .text-muted {
opacity: .8; opacity: 0.8;
} }
.truncate { .truncate {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Flex */ /* Flex */
.align-baseline { .align-baseline {
align-items: baseline; align-items: baseline;
} }
.align-center { .align-center {
align-items: center; align-items: center;
} }
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }

240
bookmarks/styles/theme/variables.css
View file

@ -1,135 +1,149 @@
:root { :root {
/* Color palette */ /* Color palette */
--gray-50: rgb(249, 250, 251); --gray-50: rgb(249, 250, 251);
--gray-100: rgb(243, 244, 246); --gray-100: rgb(243, 244, 246);
--gray-200: rgb(229, 231, 235); --gray-200: rgb(229, 231, 235);
--gray-300: rgb(209, 213, 219); --gray-300: rgb(209, 213, 219);
--gray-400: rgb(156, 163, 175); --gray-400: rgb(156, 163, 175);
--gray-500: rgb(107, 114, 128); --gray-500: rgb(107, 114, 128);
--gray-600: rgb(75, 85, 99); --gray-600: rgb(75, 85, 99);
--gray-700: rgb(55, 65, 81); --gray-700: rgb(55, 65, 81);
--gray-800: rgb(31, 41, 55); --gray-800: rgb(31, 41, 55);
--gray-900: rgb(17, 24, 39); --gray-900: rgb(17, 24, 39);
--primary-color: hsl(241, 63%, 59%); --primary-color: hsl(241, 63%, 59%);
--primary-color-highlight: hsl(241, 63%, 64%); --primary-color-highlight: hsl(241, 63%, 64%);
--primary-color-shade: hsl(241, 63%, 59%, 0.075); --primary-color-shade: hsl(241, 63%, 59%, 0.075);
--alternative-color: hsl(179, 94%, 29%); --alternative-color: hsl(179, 94%, 29%);
--alternative-color-dark: hsl(179, 94%, 22%); --alternative-color-dark: hsl(179, 94%, 22%);
--success-color: hsl(142, 76%, 36%); --success-color: hsl(142, 76%, 36%);
--success-color-highlight: hsl(142, 76%, 40%); --success-color-highlight: hsl(142, 76%, 40%);
--success-color-shade: hsla(142, 76%, 36%, 0.1); --success-color-shade: hsla(142, 76%, 36%, 0.1);
--warning-color: hsl(38, 92%, 50%); --warning-color: hsl(38, 92%, 50%);
--warning-color-highlight: hsl(38, 92%, 55%); --warning-color-highlight: hsl(38, 92%, 55%);
--warning-color-shade: hsla(38, 92%, 50%, 0.1); --warning-color-shade: hsla(38, 92%, 50%, 0.1);
--error-color: hsl(0, 72%, 51%); --error-color: hsl(0, 72%, 51%);
--error-color-highlight: hsl(0, 72%, 60%); --error-color-highlight: hsl(0, 72%, 60%);
--error-color-shade: hsla(0, 72%, 51%, 0.1); --error-color-shade: hsla(0, 72%, 51%, 0.1);
/* Core colors */ /* Core colors */
--text-color: var(--gray-700); --text-color: var(--gray-700);
--secondary-text-color: var(--gray-500); --secondary-text-color: var(--gray-500);
--tertiary-text-color: var(--gray-500); --tertiary-text-color: var(--gray-500);
--contrast-text-color: #fff; --contrast-text-color: #fff;
--primary-text-color: hsl(241, 63%, 55%); --primary-text-color: hsl(241, 63%, 55%);
--link-color: var(--primary-text-color); --link-color: var(--primary-text-color);
--secondary-link-color: hsla(241, 63%, 54%, 0.8); --secondary-link-color: hsla(241, 63%, 54%, 0.8);
--icon-color: var(--gray-500); --icon-color: var(--gray-500);
--border-color: var(--gray-300); --border-color: var(--gray-300);
--secondary-border-color: var(--gray-200); --secondary-border-color: var(--gray-200);
--body-color: #fff; --body-color: #fff;
--body-color-contrast: var(--gray-100); --body-color-contrast: var(--gray-100);
/* Fonts */ /* Fonts */
--base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; --base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
--mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; Roboto;
--fallback-font-family: "Helvetica Neue", sans-serif; --mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier,
--cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family); monospace;
--cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family); --fallback-font-family: "Helvetica Neue", sans-serif;
--cjk-jp-font-family: var(--base-font-family), "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, var(--fallback-font-family); --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC",
--cjk-ko-font-family: var(--base-font-family), "Malgun Gothic", var(--fallback-font-family); "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family);
--body-font-family: var(--base-font-family), var(--fallback-font-family); --cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC",
"Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family);
--cjk-jp-font-family: var(--base-font-family), "Hiragino Sans",
"Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo,
var(--fallback-font-family);
--cjk-ko-font-family: var(--base-font-family), "Malgun Gothic",
var(--fallback-font-family);
--body-font-family: var(--base-font-family), var(--fallback-font-family);
/* Unit sizes */ /* Unit sizes */
--unit-o: 0.05rem; --unit-o: 0.05rem;
--unit-h: 0.1rem; --unit-h: 0.1rem;
--unit-1: 0.2rem; --unit-1: 0.2rem;
--unit-2: 0.4rem; --unit-2: 0.4rem;
--unit-3: 0.6rem; --unit-3: 0.6rem;
--unit-4: 0.8rem; --unit-4: 0.8rem;
--unit-5: 1rem; --unit-5: 1rem;
--unit-6: 1.2rem; --unit-6: 1.2rem;
--unit-7: 1.4rem; --unit-7: 1.4rem;
--unit-8: 1.6rem; --unit-8: 1.6rem;
--unit-9: 1.8rem; --unit-9: 1.8rem;
--unit-10: 2rem; --unit-10: 2rem;
--unit-12: 2.4rem; --unit-12: 2.4rem;
--unit-16: 3.2rem; --unit-16: 3.2rem;
/* Font sizes */ /* Font sizes */
--html-font-size: 20px; --html-font-size: 20px;
--html-line-height: 1.5; --html-line-height: 1.5;
--font-size: 0.7rem; --font-size: 0.7rem;
--font-size-sm: 0.65rem; --font-size-sm: 0.65rem;
--font-size-lg: 0.8rem; --font-size-lg: 0.8rem;
--line-height: 1rem; --line-height: 1rem;
/* Sizes */ /* Sizes */
--layout-spacing: var(--unit-2); --layout-spacing: var(--unit-2);
--layout-spacing-sm: var(--unit-1); --layout-spacing-sm: var(--unit-1);
--layout-spacing-lg: var(--unit-4); --layout-spacing-lg: var(--unit-4);
--border-radius: var(--unit-1); --border-radius: var(--unit-1);
--border-radius-lg: var(--unit-2); --border-radius-lg: var(--unit-2);
--border-width: var(--unit-o); --border-width: var(--unit-o);
--border-width-lg: var(--unit-h); --border-width-lg: var(--unit-h);
--control-size: var(--unit-8); --control-size: var(--unit-8);
--control-size-sm: var(--unit-6); --control-size-sm: var(--unit-6);
--control-size-lg: var(--unit-9); --control-size-lg: var(--unit-9);
--control-padding-x: var(--unit-2); --control-padding-x: var(--unit-2);
--control-padding-x-sm: calc(var(--unit-2) * 0.75); --control-padding-x-sm: calc(var(--unit-2) * 0.75);
--control-padding-x-lg: calc(var(--unit-2) * 1.5); --control-padding-x-lg: calc(var(--unit-2) * 1.5);
--control-padding-y: calc((var(--control-size) - var(--line-height)) / 2 - var(--border-width)); --control-padding-y: calc(
--control-padding-y-sm: calc((var(--control-size-sm) - var(--line-height)) / 2 - var(--border-width)); (var(--control-size) - var(--line-height)) / 2 - var(--border-width)
--control-padding-y-lg: calc((var(--control-size-lg) - var(--line-height)) / 2 - var(--border-width)); );
--control-icon-size: 0.8rem; --control-padding-y-sm: calc(
(var(--control-size-sm) - var(--line-height)) / 2 - var(--border-width)
);
--control-padding-y-lg: calc(
(var(--control-size-lg) - var(--line-height)) / 2 - var(--border-width)
);
--control-icon-size: 0.8rem;
--control-width-xs: 180px; --control-width-xs: 180px;
--control-width-sm: 320px; --control-width-sm: 320px;
--control-width-md: 640px; --control-width-md: 640px;
--control-width-lg: 960px; --control-width-lg: 960px;
--control-width-xl: 1280px; --control-width-xl: 1280px;
/* Responsive breakpoints */ /* Responsive breakpoints */
--size-xs: 480px; --size-xs: 480px;
--size-sm: 600px; --size-sm: 600px;
--size-md: 840px; --size-md: 840px;
--size-lg: 960px; --size-lg: 960px;
--size-xl: 1280px; --size-xl: 1280px;
--size-2x: 1440px; --size-2x: 1440px;
--responsive-breakpoint: var(--size-xs); --responsive-breakpoint: var(--size-xs);
/* Z-index */ /* Z-index */
--zindex-0: 1; --zindex-0: 1;
--zindex-1: 100; --zindex-1: 100;
--zindex-2: 200; --zindex-2: 200;
--zindex-3: 300; --zindex-3: 300;
--zindex-4: 400; --zindex-4: 400;
/* Focus */ /* Focus */
--focus-outline: 2px solid var(--primary-color); --focus-outline: 2px solid var(--primary-color);
--focus-outline-offset: 2px; --focus-outline-offset: 2px;
/* Shadows */ /* Shadows */
--box-shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; --box-shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
--box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
} }

12
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "linkding", "name": "linkding",
"version": "1.33.0", "version": "1.34.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "linkding", "name": "linkding",
"version": "1.33.0", "version": "1.34.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@hotwired/turbo": "^8.0.6", "@hotwired/turbo": "^8.0.6",
@ -22,7 +22,7 @@
"svelte": "^4.0.0" "svelte": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.0.2" "prettier": "^3.3.3"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -1931,9 +1931,9 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
}, },
"node_modules/prettier": { "node_modules/prettier": {
"version": "3.2.5", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true, "dev": true,
"bin": { "bin": {
"prettier": "bin/prettier.cjs" "prettier": "bin/prettier.cjs"

2
package.json
View file

@ -35,7 +35,7 @@
"svelte": "^4.0.0" "svelte": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.0.2" "prettier": "^3.3.3"
}, },
"web-types": "./web-types.json" "web-types": "./web-types.json"
} }