Format CSS with prettier

Makefile

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

bookmarks/styles/bookmark-details.css

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

bookmarks/styles/bookmark-form.css

@@ -6,7 +6,8 @@
 }
 
 .bookmarks-form {
-    & .has-icon-right > input, & .has-icon-right > textarea {
+  & .has-icon-right > input,
+  & .has-icon-right > textarea {
     padding-right: 30px;
   }
 

bookmarks/styles/bookmark-page.css

@@ -32,7 +32,7 @@
 
   /* Regular input */
 
-    & input[type='search'] {
+  & input[type="search"] {
     height: var(--control-size);
     -webkit-appearance: none;
   }
@@ -47,7 +47,7 @@
       width: 100%;
       height: var(--control-size);
 
-            & input[type='search'] {
+      & input[type="search"] {
         width: 100%;
         height: 100%;
         margin: 0;
@@ -61,7 +61,8 @@
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-xs);
 
-    & input, & .form-autocomplete-input {
+  & input,
+  & .form-autocomplete-input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     box-shadow: none;
@@ -211,7 +212,8 @@ li[ld-bookmark-item] {
     text-overflow: ellipsis;
   }
 
-    & .title a[data-tooltip]:hover::after, & .title a[data-tooltip]:focus::after {
+  & .title a[data-tooltip]:hover::after,
+  & .title a[data-tooltip]:focus::after {
     content: attr(data-tooltip);
     position: absolute;
     z-index: 10;
@@ -243,7 +245,8 @@ li[ld-bookmark-item] {
     font-style: italic;
   }
 
-    & .url-path, & .url-display {
+  & .url-path,
+  & .url-display {
     font-size: var(--font-size-sm);
     color: var(--secondary-link-color);
   }
@@ -261,12 +264,14 @@ li[ld-bookmark-item] {
   }
 
   & .tags {
-        & a, & a:visited:hover {
+    & a,
+    & a:visited:hover {
       color: var(--alternative-color);
     }
   }
 
-    & .actions, & .extra-actions {
+  & .actions,
+  & .extra-actions {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
@@ -284,7 +289,8 @@ li[ld-bookmark-item] {
     color: var(--bookmark-actions-color);
     font-size: var(--font-size-sm);
 
-        & a, & button.btn-link {
+    & a,
+    & button.btn-link {
       color: var(--bookmark-actions-color);
       --btn-icon-color: var(--bookmark-actions-color);
       font-weight: var(--bookmark-actions-weight);
@@ -324,12 +330,16 @@ li[ld-bookmark-item] {
     padding-bottom: var(--unit-h);
 
     &:before {
-            content: '';
+      content: "";
       position: absolute;
       top: 0;
       bottom: 0;
-            left: calc(-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)));
+      left: calc(
-            width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
+        -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);
     }
   }
@@ -395,7 +405,9 @@ ul.bookmark-list {
 :root {
   --bulk-edit-toggle-width: 16px;
   --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(
+    var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset))
+  );
   --bulk-edit-transition-duration: 400ms;
 }
 
@@ -430,11 +442,13 @@ ul.bookmark-list {
   /* make sticky pagination expand to cover checkboxes to the left */
 
   &.active .bookmark-pagination.sticky:before {
-        content: '';
+    content: "";
     position: absolute;
     top: -1px;
     bottom: 0;
-        left: calc(-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)));
+    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);
@@ -456,7 +470,9 @@ ul.bookmark-list {
     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));
+    left: calc(
+      -1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset)
+    );
     top: 50%;
     transform: translateY(-50%);
     padding: 0;

bookmarks/styles/markdown.css

@@ -1,5 +1,9 @@
 .markdown {
-    & p, & ul, & ol, & pre, & blockquote {
+  & p,
+  & ul,
+  & ol,
+  & pre,
+  & blockquote {
     margin: 0 0 var(--unit-2) 0;
   }
 
@@ -11,11 +15,13 @@
     margin-bottom: 0;
   }
 
-    & ul, & ol {
+  & ul,
+  & ol {
     margin-left: var(--unit-4);
   }
 
-    & ul li, & ol li {
+  & ul li,
+  & ol li {
     margin-top: var(--unit-1);
   }
 

bookmarks/styles/reader-mode.css

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

bookmarks/styles/settings.css

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

bookmarks/styles/theme/_normalize.css

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

bookmarks/styles/theme/asian.css

@@ -38,6 +38,6 @@ html:lang(ko),
   & s + s,
   & u + ins,
   & u + u {
-        margin-left: .125em;
+    margin-left: 0.125em;
   }
 }

bookmarks/styles/theme/autocomplete.css

@@ -39,12 +39,14 @@
     top: 100%;
     width: 100%;
 
-        & .menu-item.selected > a, & .menu-item > a:hover {
+    & .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 {
+    & .group-item,
+    & .group-item:hover {
       color: var(--tertiary-text-color);
       text-transform: uppercase;
       background: none;

bookmarks/styles/theme/badges.css

@@ -8,22 +8,22 @@
     &::after {
       background: var(--primary-color);
       background-clip: padding-box;
-            border-radius: .5rem;
+      border-radius: 0.5rem;
       box-shadow: 0 0 0 1px var(--body-color);
       color: var(--contrast-text-color);
       content: attr(data-badge);
       display: inline-block;
-            transform: translate(-.05rem, -.5rem);
+      transform: translate(-0.05rem, -0.5rem);
     }
   }
 
   &[data-badge] {
     &::after {
       font-size: var(--font-size-sm);
-            height: .9rem;
+      height: 0.9rem;
       line-height: 1;
-            min-width: .9rem;
+      min-width: 0.9rem;
-            padding: .1rem .2rem;
+      padding: 0.1rem 0.2rem;
       text-align: center;
       white-space: nowrap;
     }

bookmarks/styles/theme/buttons.css

@@ -43,7 +43,11 @@
   box-shadow: var(--btn-box-shadow);
   text-align: center;
   text-decoration: none;
-    transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    box-shadow 0.2s,
+    color 0.2s;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;

bookmarks/styles/theme/code.css

@@ -7,7 +7,7 @@
 code {
   border-radius: var(--border-radius);
   line-height: 1.25;
-    padding: .1rem .2rem;
+  padding: 0.1rem 0.2rem;
   background: var(--code-bg-color);
   color: var(--code-color);
   font-size: 85%;

bookmarks/styles/theme/dropdowns.css

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

bookmarks/styles/theme/forms.css

@@ -71,7 +71,10 @@ details[open] summary .form-label {
   outline: none;
   padding: var(--control-padding-y) var(--control-padding-x);
   position: relative;
-    transition: background 0.2s, border 0.2s, color 0.2s;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    color 0.2s;
   width: 100%;
 
   &:focus {
@@ -163,13 +166,17 @@ textarea.form-input {
   &.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);
+    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);
+    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 */
@@ -185,7 +192,9 @@ textarea.form-input {
   }
 
   &: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;
+    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 0.35rem center / 0.4rem 0.5rem;
     padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
   }
 }
@@ -198,7 +207,10 @@ textarea.form-input {
   line-height: var(--line-height);
   margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
   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)
+    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 {
@@ -226,7 +238,10 @@ textarea.form-input {
     cursor: pointer;
     display: inline-block;
     position: absolute;
-        transition: background .2s, border .2s, color .2s;
+    transition:
+      background 0.2s,
+      border 0.2s,
+      color 0.2s;
   }
 
   /* Input checkbox, radio, and switch sizes */
@@ -331,7 +346,9 @@ textarea.form-input {
     border-radius: calc(var(--unit-2) + var(--border-width));
     height: calc(var(--unit-4) + var(--border-width) * 2);
     left: 0;
-        top: calc((var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width));
+    top: calc(
+      (var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width)
+    );
     width: var(--unit-8);
 
     &::before {
@@ -343,7 +360,11 @@ textarea.form-input {
       left: 0;
       position: absolute;
       top: 0;
-            transition: background .2s, border .2s, color .2s, left .2s;
+      transition:
+        background 0.2s,
+        border 0.2s,
+        color 0.2s,
+        left 0.2s;
       width: var(--unit-4);
     }
   }
@@ -389,11 +410,12 @@ textarea.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 */
 .input-group {
   display: flex;

bookmarks/styles/theme/menus.css

@@ -40,7 +40,8 @@
       padding-bottom: var(--unit-2);
     }
 
-        & > a, .btn.btn-link {
+    & > a,
+    .btn.btn-link {
       border-radius: var(--menu-border-radius);
       color: var(--menu-item-color);
       background: var(--menu-item-bg-color);

bookmarks/styles/theme/modals.css

@@ -27,7 +27,7 @@
     z-index: var(--zindex-4);
 
     & .modal-overlay {
-            animation: fade-in .15s ease 1;
+      animation: fade-in 0.15s ease 1;
       background: var(--modal-overlay-bg-color);
       bottom: 0;
       cursor: default;
@@ -39,14 +39,15 @@
     }
 
     & .modal-container {
-            animation: fade-in .15s ease 1;
+      animation: fade-in 0.15s ease 1;
       z-index: var(--zindex-0);
     }
   }
 
   &.active.closing {
-        & .modal-overlay, & .modal-container {
+    & .modal-overlay,
-            animation: fade-out .15s ease 1;
+    & .modal-container {
+      animation: fade-out 0.15s ease 1;
     }
   }
 }
@@ -83,7 +84,7 @@
       padding: 0;
       line-height: 0;
       cursor: pointer;
-            opacity: .85;
+      opacity: 0.85;
       color: var(--secondary-text-color);
 
       &:hover {

bookmarks/styles/theme/pagination.css

@@ -28,7 +28,7 @@
     &.disabled {
       & a {
         cursor: default;
-                opacity: .5;
+        opacity: 0.5;
         pointer-events: none;
       }
     }
@@ -55,7 +55,7 @@
 
     & .page-item-subtitle {
       margin: 0;
-            opacity: .5;
+      opacity: 0.5;
     }
   }
 }

bookmarks/styles/theme/tabs.css

@@ -22,7 +22,8 @@
       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);
+      padding: var(--unit-2) var(--unit-1)
+        calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
       text-decoration: none;
 
       &:focus,

bookmarks/styles/theme/utilities.css

@@ -265,15 +265,15 @@
 }
 
 .text-small {
-    font-size: .9em;
+  font-size: 0.9em;
 }
 
 .text-tiny {
-    font-size: .8em;
+  font-size: 0.8em;
 }
 
 .text-muted {
-    opacity: .8;
+  opacity: 0.8;
 }
 
 .truncate {

bookmarks/styles/theme/variables.css

@@ -49,13 +49,20 @@
   --body-color-contrast: var(--gray-100);
 
   /* 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;
+  --mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier,
+    monospace;
   --fallback-font-family: "Helvetica Neue", sans-serif;
-    --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family);
+  --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC",
-    --cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family);
+    "Hiragino Sans GB", "Microsoft YaHei", 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-zh-hant-font-family: var(--base-font-family), "PingFang TC",
-    --cjk-ko-font-family: var(--base-font-family), "Malgun Gothic", var(--fallback-font-family);
+    "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 */
@@ -96,9 +103,15 @@
   --control-padding-x: var(--unit-2);
   --control-padding-x-sm: calc(var(--unit-2) * 0.75);
   --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-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;
@@ -131,5 +144,6 @@
   /* Shadows */
   --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-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);
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "linkding",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "linkding",
-      "version": "1.33.0",
+      "version": "1.34.0",
       "license": "MIT",
       "dependencies": {
         "@hotwired/turbo": "^8.0.6",
@@ -22,7 +22,7 @@
         "svelte": "^4.0.0"
       },
       "devDependencies": {
-        "prettier": "^3.0.2"
+        "prettier": "^3.3.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1931,9 +1931,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "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,
       "bin": {
         "prettier": "bin/prettier.cjs"

package.json

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