refactor(webui): add `css-order-prettier-plugin`, reorder all css

webui/.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

webui/.prettierrc.json

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"cssDeclarationSorterOrder": "smacss"
+}

webui/package.json

@@ -34,6 +34,7 @@
 		"eslint-plugin-storybook": "^0.8.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"prettier": "^3.1.1",
+		"prettier-plugin-css-order": "^2.1.2",
 		"prettier-plugin-svelte": "^3.1.2",
 		"storybook": "^7.6.16",
 		"svelte": "^4.2.7",

webui/src/lib/components/AddModal.svelte

@@ -208,16 +208,17 @@
 
 <style lang="scss">
 	.addmodal-container {
+		display: none;
+
+		z-index: 99;
 		position: fixed;
-		left: 0;
 		top: 0;
+		left: 0;
 		width: 100vw;
 		height: 100vh;
 		background: rgba(0, 0, 0, 0.5);
 		color: var(--foreground);
 
-		display: none;
-
 		&.visible {
 			display: unset;
 		}
@@ -229,35 +230,33 @@
 				filter: brightness(0.85);
 			}
 		}
-
-		z-index: 99;
 	}
 
 	.addmodal {
 		position: absolute;
-		left: 50%;
 		top: 50%;
+		left: 50%;
+		min-width: 33vw;
+		padding: 1rem;
 		transform: translate(-50%, -50%);
+		border: solid 2px var(--foreground);
+		border-radius: 8px;
 
 		background: var(--background);
 
 		color: var(--foreground);
-		border: solid 2px var(--foreground);
-		border-radius: 8px;
-		padding: 1rem;
-		min-width: 33vw;
 	}
 
 	.files {
 		display: flex;
 		flex-direction: column;
-		gap: 1em;
+		width: 80vw;
+		max-height: 66vh;
 
 		padding: 0.5em;
 
 		overflow-y: auto;
-		max-height: 66vh;
+		gap: 1em;
-		width: 80vw;
 	}
 
 	.entry .row {
@@ -267,19 +266,19 @@
 	}
 
 	.file {
-		flex-grow: 1;
 		display: flex;
+		flex-grow: 1;
 		align-items: center;
+		padding: 0.5em;
 		gap: 1rem;
 
 		border: 1px solid var(--foreground);
 		border-radius: 4px;
 		background: var(--background-lighter);
-		padding: 0.5em;
 
 		img {
-			max-height: 12em;
 			max-width: 12em;
+			max-height: 12em;
 		}
 
 		.icon {
@@ -299,20 +298,20 @@
 
 	.controls {
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		font-size: 3em;
+		justify-content: center;
 		margin-top: 0.5rem;
 		gap: 1rem;
+		font-size: 3em;
 	}
 
 	.controls-destination {
 		display: flex;
+		flex-grow: 3;
 		flex-direction: column;
 		gap: 0.5rem;
 
 		font-size: 1rem;
-		flex-grow: 3;
 	}
 
 	.controls-submit {

webui/src/lib/components/BrowseAdd.svelte

@@ -47,24 +47,24 @@
 <style lang="scss">
 	.view {
 		position: relative;
+		width: 48px;
+		min-width: 48px;
+		padding: 1rem;
+		border: 1px solid var(--foreground-lightest);
+		border-radius: 0.5em;
 
 		background: var(--background-lighter);
 		color: var(--foreground-lighter);
-		border: 1px solid var(--foreground-lightest);
-		border-radius: 0.5em;
-		padding: 1rem;
 
 		cursor: pointer;
 
+		opacity: 0.4;
+
 		transition:
 			opacity 0.3s,
 			width 0.5s,
 			min-width 0.5s;
 
-		opacity: 0.4;
-		width: 48px;
-		min-width: 48px;
-
 		&:hover,
 		&.editable {
 			opacity: 1;

webui/src/lib/components/BrowseColumn.svelte

@@ -118,8 +118,8 @@
 	@use '../styles/colors.scss';
 
 	.browse-column {
-		position: relative;
 		display: flex;
+		position: relative;
 	}
 
 	.browse-column.detail {
@@ -129,39 +129,37 @@
 			@media screen and (min-width: 600px) {
 				min-width: 85vw;
 				max-width: min(85vw, 1920px);
-				margin-left: auto;
 				margin-right: auto;
+				margin-left: auto;
 			}
 		}
 	}
 
 	.view {
+		display: flex;
+
+		z-index: 1;
+		flex-direction: column;
 		min-width: var(--width);
 		max-width: var(--width);
-
+		padding: 1rem;
-		display: flex;
+		border: 1px solid var(--foreground-lightest);
-		flex-direction: column;
+		border-radius: 0.5em;
 
 		background: var(--background-lighter);
 		color: var(--foreground-lighter);
-		border: 1px solid var(--foreground-lightest);
-		border-radius: 0.5em;
-		padding: 1rem;
-
-		z-index: 1;
 
 		// transition: min-width 0.2s, max-width 0.2s;
 		// TODO - container has nowhere to scroll, breaking `detail` scroll
 
 		header {
-			font-size: 20px;
-			position: relative;
-			min-height: 1em;
-
 			display: flex;
-			justify-content: space-between;
+			position: relative;
 
 			flex: none;
+			justify-content: space-between;
+			min-height: 1em;
+			font-size: 20px;
 		}
 	}
 
@@ -172,22 +170,22 @@
 	}
 
 	.background {
+		z-index: 0;
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: calc(100% - 0.5rem);
 		height: 100%;
 		border-radius: 0.5em;
-		background-size: cover;
 		background-position: center;
+		background-size: cover;
 		filter: blur(0.5rem) brightness(0.3) contrast(1.1);
-		z-index: 0;
 	}
 
 	.resizeHandle {
-		cursor: ew-resize;
-		height: 100%;
 		width: 0.5rem;
+		height: 100%;
+		cursor: ew-resize;
 
 		@media screen and (max-width: 600px) {
 			display: none;

webui/src/lib/components/CombineColumn.svelte

@@ -147,9 +147,9 @@
 	}
 
 	h2 {
-		text-align: center;
 		margin: 0;
 		margin-top: -0.66em;
+		text-align: center;
 	}
 
 	.controls {
@@ -158,7 +158,7 @@
 
 	.entities {
 		flex-grow: 1;
-		overflow-y: auto;
 		height: 0;
+		overflow-y: auto;
 	}
 </style>

webui/src/lib/components/DropPasteHandler.svelte

@@ -51,14 +51,13 @@
 
 <style>
 	.dropindicator {
+		display: none;
 		position: absolute;
-		left: 0;
 		top: 0;
+		left: 0;
 		width: 100vw;
 		height: 100vh;
 		background: rgba(0, 0, 0, 0.75);
-
-		display: none;
 	}
 
 	.dragging {
@@ -67,19 +66,19 @@
 
 	.content {
 		position: absolute;
-		left: 50%;
 		top: 50%;
+		left: 50%;
+		padding: 1.5em;
 		transform: translate(-50%, -50%);
+		border: solid 0.25em var(--foreground);
+		border-radius: 0.5em;
 
 		background: rgba(0, 0, 0, 0.9);
 
 		color: var(--foreground);
-		border: solid 0.25em var(--foreground);
+		font-size: 32px;
-		border-radius: 0.5em;
-		padding: 1.5em;
 
 		text-align: center;
-		font-size: 32px;
 	}
 
 	.icon {

webui/src/lib/components/EntitySetEditor.svelte

@@ -90,8 +90,8 @@
 	.group-list {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.25rem 0.2rem;
 		align-items: center;
+		gap: 0.25rem 0.2rem;
 	}
 
 	.group {
@@ -103,11 +103,11 @@
 		display: flex;
 		align-items: start;
 
+		padding-bottom: 0.2rem;
+
 		.group-list {
 			flex-grow: 1;
 		}
-
-		padding-bottom: 0.2rem;
 	}
 
 	.selector {

webui/src/lib/components/EntryView.svelte

@@ -128,10 +128,10 @@
 <style lang="scss">
 	.icon {
 		display: inline-block;
-		font-size: 1.25em;
-		margin-top: -0.3em;
 		position: relative;
 		bottom: -2px;
+		margin-top: -0.3em;
+		font-size: 1.25em;
 	}
 
 	h3 {

webui/src/lib/components/GroupColumn.svelte

@@ -103,13 +103,12 @@
 	@use '../styles/colors';
 
 	.groups {
-		text-align: center;
+		display: flex;
 
 		flex-grow: 1;
-		height: 0;
-
-		display: flex;
 		flex-direction: column;
+		height: 0;
+		text-align: center;
 	}
 
 	.main {
@@ -121,14 +120,13 @@
 	}
 
 	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.5em;
 		justify-content: space-between;
+		margin: 0;
+		padding: 0;
+		gap: 0.5em;
+		list-style: none;
 	}
 
 	.group {
@@ -137,29 +135,29 @@
 
 	.count {
 		display: inline-block;
-		font-size: 0.66em;
 		margin-left: 0.25em;
+		font-size: 0.66em;
 	}
 
 	.label {
-		font-weight: bold;
 		margin-bottom: 1em;
+		font-weight: bold;
 	}
 
 	.duplicate {
 		display: flex;
-		gap: 1rem;
 		flex-wrap: wrap;
 		justify-content: center;
+		gap: 1rem;
 	}
 
 	.duplicate-group {
 		flex-basis: 49%;
-		border-radius: 4px;
+		max-width: 100%;
-		border: 1px solid var(--foreground);
 		padding: 0.5rem;
 		overflow-x: auto;
-		max-width: 100%;
+		border: 1px solid var(--foreground);
+		border-radius: 4px;
 
 		ul {
 			flex-direction: column;

webui/src/lib/components/Inspect.svelte

@@ -559,19 +559,19 @@
 
 	.inspect,
 	.main-content {
-		flex: auto;
 		display: flex;
+		flex: auto;
 		flex-direction: column;
-		gap: 0.5rem;
 		min-height: 0;
+		gap: 0.5rem;
 	}
 
 	.properties {
 		flex: auto;
 		height: 0; // https://stackoverflow.com/a/14964944
 		min-height: 12em;
-		overflow-y: auto;
 		padding-right: 1rem;
+		overflow-y: auto;
 	}
 
 	@media screen and (min-width: 1600px) {
@@ -584,16 +584,16 @@
 
 			&.blob {
 				.detail-col {
-					width: 33%;
 					flex-grow: 0;
+					width: 33%;
 				}
 
 				.blob-viewer {
+					position: absolute;
+					top: 0;
+					left: 1%;
 					width: 65%;
 					height: 100%;
-					position: absolute;
-					left: 1%;
-					top: 0;
 				}
 			}
 		}
@@ -601,8 +601,8 @@
 
 	.main-content .detail-col {
 		display: flex;
-		flex-direction: column;
 		flex-grow: 1;
+		flex-direction: column;
 	}
 
 	.entries {
@@ -610,9 +610,9 @@
 	}
 
 	.footer {
-		margin-top: 2rem;
 		display: flex;
 		justify-content: end;
+		margin-top: 2rem;
 	}
 
 	.error {

webui/src/lib/components/InspectTypeEditor.svelte

@@ -170,12 +170,12 @@
 	}
 
 	button {
+		margin: 0;
+		padding: 0;
 		border: none;
 		background: none;
-		cursor: pointer;
-		padding: 0;
-		margin: 0;
 		color: var(--color-text);
+		cursor: pointer;
 		opacity: 0.8;
 		transition: opacity 0.2s ease-in-out;
 		&.required {
@@ -187,8 +187,8 @@
 	}
 
 	.add-button {
-		grid-column: 1 / span 3;
 		display: flex;
+		grid-column: 1 / span 3;
 		flex-direction: column;
 	}
 

webui/src/lib/components/LoginModal.svelte

@@ -54,8 +54,8 @@
 	@use '$lib/styles/colors';
 
 	h2 {
-		text-align: center;
 		margin: 0 0 1rem 0;
+		text-align: center;
 	}
 
 	form {

webui/src/lib/components/SelectedColumn.svelte

@@ -64,14 +64,14 @@
 	}
 
 	h2 {
-		text-align: center;
 		margin: 0;
 		margin-top: -0.66em;
+		text-align: center;
 	}
 
 	.entities {
 		flex-grow: 1;
-		overflow-y: auto;
 		height: 0;
+		overflow-y: auto;
 	}
 </style>

webui/src/lib/components/SurfaceColumn.svelte

@@ -353,15 +353,15 @@
 	.header {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 1em;
 		align-items: center;
 		justify-content: space-between;
 		margin: 0.5em 0;
+		gap: 1em;
 
 		.axis-selector {
 			display: flex;
-			gap: 1em;
 			align-items: center;
+			gap: 1em;
 
 			.label {
 				font-size: 1rem;
@@ -373,8 +373,8 @@
 	}
 
 	.view {
-		flex-grow: 1;
 		position: relative;
+		flex-grow: 1;
 
 		overflow: hidden;
 
@@ -411,8 +411,8 @@
 			top: 2rem;
 			right: 1.5em;
 			padding: 0.66em;
-			border-radius: 4px;
 			border: 1px solid var(--foreground-lighter);
+			border-radius: 4px;
 			background: var(--background);
 			opacity: 0.66;
 			transition: opacity 0.25s;
@@ -429,8 +429,8 @@
 	.view-mode-selector {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5em;
 		align-items: center;
+		gap: 0.5em;
 	}
 
 	.ui {
@@ -438,13 +438,13 @@
 	}
 
 	.loading {
+		z-index: 99;
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: rgba(0, 0, 0, 0.7);
-		z-index: 99;
 		transform: scale(3);
+		background: rgba(0, 0, 0, 0.7);
 	}
 </style>

webui/src/lib/components/display/BlobPreview.svelte

@@ -132,33 +132,33 @@
 
 <style lang="scss">
 	.preview {
-		flex-grow: 1;
-		min-height: 0;
 		display: flex;
+		flex-grow: 1;
 		flex-direction: column;
+		min-height: 0;
 
 		.inner {
-			position: relative;
 			display: flex;
-			min-height: 0;
+			position: relative;
 			flex-grow: 1;
 			justify-content: center;
+			min-height: 0;
 		}
 	}
 
 	.hashbadge {
 		font-size: 48px;
-		opacity: 0.25;
-		text-align: center;
 		line-height: 1;
+		text-align: center;
+		opacity: 0.25;
 	}
 
 	.image {
 		display: flex;
-		min-height: 0;
-		min-width: 0;
 
 		justify-content: center;
+		min-width: 0;
+		min-height: 0;
 
 		img {
 			max-width: 100%;
@@ -166,23 +166,22 @@
 
 			&:not(.loaded) {
 				flex-grow: 1;
-				height: 6rem;
-				max-height: 100%;
 				width: 100%;
 				min-width: 0;
+				height: 6rem;
+				max-height: 100%;
 			}
 		}
 	}
 
 	.group {
+		display: grid;
+		grid-template-rows: repeat(2, 1fr);
+		grid-template-columns: repeat(2, 1fr);
 		flex-grow: 1;
-		min-height: 0;
 		width: 100%;
 		min-width: 0;
-
+		min-height: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-template-rows: repeat(2, 1fr);
 
 		padding: 0.25rem;
 		gap: 0.25rem;
@@ -193,9 +192,9 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: end;
-			list-style: none;
-			min-height: 0;
 			min-width: 0;
+			min-height: 0;
+			list-style: none;
 		}
 	}
 

webui/src/lib/components/display/BlobViewer.svelte

@@ -83,15 +83,15 @@
 <style lang="scss">
 	.preview {
 		display: flex;
-		align-items: center;
 		flex-direction: column;
+		align-items: center;
 		// min-height: 33vh;
 		max-height: 50vh;
 
 		&.detail {
+			flex-grow: 1;
 			height: 100%;
 			max-height: 100%;
-			flex-grow: 1;
 			// min-height: 0;
 		}
 	}
@@ -103,14 +103,14 @@
 	}
 
 	iframe {
-		width: 99%;
 		flex-grow: 1;
+		width: 99%;
 	}
 
 	.text-viewer {
 		display: flex;
-		margin-bottom: 2rem;
 		min-height: 0;
+		margin-bottom: 2rem;
 	}
 
 	img {

webui/src/lib/components/display/SurfacePoint.svelte

@@ -42,9 +42,9 @@
 	}
 
 	.popup-inner {
+		display: inline-block;
 		position: relative;
 		top: 1rem;
-		display: inline-block;
 		transform: translateX(-50%);
 	}
 </style>

webui/src/lib/components/display/UpEntry.svelte

@@ -26,15 +26,15 @@
 
 <style lang="scss">
 	.entry {
-		border: 1px solid var(--foreground);
-		background: var(--background-lighter);
-		border-radius: 4px;
-		padding: 0.1em 0.5em 0.1em 0.25em;
 		display: flex;
 		align-content: center;
 		align-items: center;
 		justify-content: space-between;
+		padding: 0.1em 0.5em 0.1em 0.25em;
 		gap: 1em;
+		border: 1px solid var(--foreground);
+		border-radius: 4px;
+		background: var(--background-lighter);
 
 		& > * {
 			min-width: 0;
@@ -45,19 +45,18 @@
 		position: relative;
 		top: 0.2em;
 		flex-grow: 1;
-		text-align: center;
 		font-weight: 300;
 		font-size: 0.9em;
+		text-align: center;
 		&::after {
-			content: '\00a0→';
-
 			position: absolute;
 			top: calc(-50% + 2px);
 			left: calc(50% - 2px);
 
 			transform: translateX(-50%);
-			font-size: 0.66em;
+			content: '\00a0→';
 			font-weight: normal;
+			font-size: 0.66em;
 		}
 	}
 

webui/src/lib/components/display/UpLink.svelte

@@ -69,8 +69,8 @@
 
 <style lang="scss">
 	:global(.uplink) {
-		text-decoration: none;
 		max-width: 100%;
+		text-decoration: none;
 	}
 	:global(.uplink.text) {
 		text-decoration: underline;

webui/src/lib/components/display/UpObject.svelte

@@ -254,65 +254,63 @@
 	@use '$lib/styles/colors';
 
 	.upobject {
-		height: 100%;
 		display: flex;
 
 		align-items: stretch;
 		justify-content: stretch;
+		height: 100%;
 		border-radius: 4px;
 
 		&.left-active {
-			background: linear-gradient(90deg, var(--color-active) 0%, transparent 100%);
 			padding: 2px 0 2px 2px;
+			background: linear-gradient(90deg, var(--color-active) 0%, transparent 100%);
 		}
 
 		&.right-active {
-			background: linear-gradient(90deg, transparent 0%, var(--color-active) 100%);
 			padding: 2px 2px 2px 0;
+			background: linear-gradient(90deg, transparent 0%, var(--color-active) 100%);
 		}
 
 		&.plain .address {
+			padding: 0;
 			border: none;
 			background: none;
-			padding: 0;
 		}
 	}
 
 	.address {
+		display: flex;
 		position: relative;
 		flex-grow: 1;
+		align-items: center;
 		min-width: 0;
 
-		display: flex;
-		align-items: center;
-
 		padding: 0.1em 0.25em;
+		border: 0.1em solid var(--foreground-lighter);
+		border-radius: 0.2em;
+
+		background: var(--background);
 
 		font-family: var(--monospace-font);
 		line-break: anywhere;
 
-		background: var(--background);
-		border: 0.1em solid var(--foreground-lighter);
-		border-radius: 0.2em;
-
 		&.banner {
-			border: 0.12em solid var(--foreground);
 			padding: 0.5em 0.25em;
+			border: 0.12em solid var(--foreground);
 		}
 
 		&.identified {
-			font-family: var(--default-font);
 			font-size: 0.95em;
+			font-family: var(--default-font);
 			line-break: auto;
 		}
 
 		.label {
-			flex-grow: 1;
-			min-width: 0;
-
 			display: flex;
+			flex-grow: 1;
 			flex-wrap: wrap;
 			align-items: baseline;
+			min-width: 0;
 			margin-left: 0.25em;
 
 			:global(a) {
@@ -330,19 +328,19 @@
 		}
 
 		.secondary {
-			font-size: 0.66em;
 			display: none;
+			font-size: 0.66em;
 			opacity: 0.8;
 		}
 
 		.key {
-			font-family: var(--monospace-font);
 			color: colors.$yellow;
+			font-family: var(--monospace-font);
 			opacity: 0.8;
 
 			&:before {
-				content: '⌘';
 				margin-right: 0.1em;
+				content: '⌘';
 			}
 		}
 
@@ -361,25 +359,25 @@
 		}
 
 		.image-gradient {
+			z-index: -1;
 			position: absolute;
 			top: 0;
-			left: 0;
 			right: 0;
 			bottom: 0;
+			left: 0;
 			background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 16%, var(--background) 66%);
-			z-index: -1;
 		}
 
 		.image-background {
+			z-index: -2;
 			position: absolute;
 			top: 0;
-			left: 0;
 			right: 0;
 			bottom: 0;
-			z-index: -2;
+			left: 0;
+			background-position: center;
 
 			background-size: cover;
-			background-position: center;
 			filter: brightness(0.8);
 		}
 	}
@@ -400,8 +398,8 @@
 			color 0.2s;
 
 		&:hover {
-			opacity: 1;
 			color: var(--active-color, var(--primary));
+			opacity: 1;
 		}
 	}
 
@@ -417,7 +415,7 @@
 	}
 
 	.disabled {
-		pointer-events: none;
 		opacity: 0.7;
+		pointer-events: none;
 	}
 </style>

webui/src/lib/components/display/UpObjectCard.svelte

@@ -36,14 +36,13 @@
 		overflow: hidden;
 
 		.inner {
-			border: 1px solid var(--foreground-lighter);
-			border-radius: 4px;
-			padding: 0.25rem;
-			max-height: 420px;
-			min-height: 0;
-
 			display: flex;
 			flex-direction: column;
+			min-height: 0;
+			max-height: 420px;
+			padding: 0.25rem;
+			border: 1px solid var(--foreground-lighter);
+			border-radius: 4px;
 		}
 	}
 
@@ -52,8 +51,8 @@
 	}
 
 	.badge {
-		font-size: 3rem;
 		display: flex;
 		justify-content: center;
+		font-size: 3rem;
 	}
 </style>

webui/src/lib/components/display/UpObjectLabel.svelte

@@ -29,17 +29,17 @@
 	}
 
 	.backpath {
-		opacity: 0.66;
 		margin-right: 0.25em;
+		opacity: 0.66;
 
 		.component::after {
-			content: '∋';
-			margin-left: 0.2em;
-			margin-right: 0.4em;
-			font-size: 0.66em;
-			font-weight: bold;
 			position: relative;
 			top: -0.125em;
+			margin-right: 0.4em;
+			margin-left: 0.2em;
+			content: '∋';
+			font-weight: bold;
+			font-size: 0.66em;
 		}
 
 		.component:last-child::after {

webui/src/lib/components/display/blobs/AudioPreview.svelte

@@ -54,10 +54,10 @@
 
 		&:not(.loaded) {
 			flex-grow: 1;
-			height: 6rem;
-			max-height: 100%;
 			width: 100%;
 			min-width: 0;
+			height: 6rem;
+			max-height: 100%;
 		}
 	}
 
@@ -66,10 +66,10 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		color: var(--foreground-lightest);
+		font-weight: bold;
 
 		font-size: var(--font-size);
-		font-weight: bold;
-		color: var(--foreground-lightest);
 		text-shadow: 0 0 0.2em var(--background-lighter);
 	}
 </style>

webui/src/lib/components/display/blobs/FragmentViewer.svelte

@@ -44,15 +44,15 @@
 	@use '../../../styles/colors';
 
 	.fragment-viewer {
-		width: 100%;
 		display: flex;
 		justify-content: center;
+		width: 100%;
 		min-height: 0;
 	}
 
 	img {
-		max-width: 100%;
 		box-sizing: border-box;
+		max-width: 100%;
 		min-height: 0;
 		&.imageLoaded {
 			border: 2px dashed colors.$yellow;

webui/src/lib/components/display/blobs/TextViewer.svelte

@@ -67,15 +67,15 @@
 	}
 
 	.text {
-		background: var(--background);
-		padding: 0.5em;
-		height: 100%;
 		box-sizing: border-box;
+		height: 100%;
+		padding: 0.5em;
 
 		overflow: auto;
+		border: 1px solid var(--foreground);
 
 		border-radius: 4px;
-		border: 1px solid var(--foreground);
+		background: var(--background);
 
 		white-space: pre-wrap;
 
@@ -94,16 +94,16 @@
 
 		.tab {
 			display: flex;
+			margin: 0 0.1em;
 
-			cursor: pointer;
+			padding: 0.15em;
 
 			border: 1px solid var(--foreground);
 			border-bottom: 0;
-			border-top-left-radius: 4px;
 			border-top-right-radius: 4px;
+			border-top-left-radius: 4px;
 
-			padding: 0.15em;
+			cursor: pointer;
-			margin: 0 0.1em;
 
 			&.active {
 				background: var(--background);

webui/src/lib/components/display/blobs/VideoViewer.svelte

@@ -148,19 +148,18 @@
 		&,
 		.player {
 			display: flex;
-			align-items: center;
-			min-height: 0;
 			flex-direction: column;
+			align-items: center;
 			width: 100%;
+			min-height: 0;
 		}
 
 		img,
 		video {
 			width: 100%;
-			max-height: 100%;
 			min-height: 0;
+			max-height: 100%;
 			object-fit: contain;
-
 			// background: rgba(128, 128, 128, 128);
 
 			transition: filter 0.2s;
@@ -180,24 +179,24 @@
 			font-size: var(--icon-size);
 
 			opacity: 0;
-			transition: opacity 0.2s;
 
 			pointer-events: none;
+			transition: opacity 0.2s;
 		}
 
 		.timecode {
 			display: none;
-			pointer-events: none;
 
 			position: absolute;
 			top: 50%;
 			left: var(--left);
 			transform: translate(-50%, -50%);
+			color: white;
+			font-weight: bold;
 
 			font-feature-settings: 'tnum', 'zero';
-			font-weight: bold;
-			color: white;
 			opacity: 0.66;
+			pointer-events: none;
 		}
 
 		&.unsupported.detail {
@@ -219,22 +218,22 @@
 				position: absolute;
 				top: 50%;
 				left: 0;
-				transform: translateY(-50%);
 
 				width: 100%;
-				text-align: center;
+				transform: translateY(-50%);
-
-				font-weight: bold;
 
 				color: darkred;
+
+				font-weight: bold;
+				text-align: center;
 			}
 		}
 
 		&.loading {
 			.player > * {
 				position: absolute;
-				left: 50%;
 				top: 50%;
+				left: 50%;
 				transform: translate(-50%, -50%);
 			}
 		}

webui/src/lib/components/layout/Footer.svelte

@@ -41,24 +41,23 @@
 
 <style lang="scss">
 	footer {
+		display: flex;
+		z-index: 9;
 		position: fixed;
 		bottom: 0;
-		width: 100%;
-		z-index: 9;
-
-		display: flex;
 		flex-direction: column;
-
+		width: 100%;
-		& > * {
+		border-top: 1px solid var(--foreground-lighter);
-			padding: 0 0.5rem;
-		}
 
 		background: var(--background);
-		border-top: 1px solid var(--foreground-lighter);
 
 		transition: 0.7s bottom ease;
 
 		--height: calc(100vh / 6);
+
+		& > * {
+			padding: 0 0.5rem;
+		}
 	}
 
 	footer.hidden {
@@ -66,22 +65,21 @@
 	}
 
 	.status {
-		height: 2rem;
-		width: 100%;
-
 		display: flex;
 		align-items: center;
+		width: 100%;
+		height: 2rem;
 
 		cursor: pointer;
 
+		transition: opacity 0.7s ease;
+
 		&:not(.togglable) {
 			cursor: unset;
-			pointer-events: none;
 			opacity: 0.66;
+			pointer-events: none;
 		}
 
-		transition: opacity 0.7s ease;
-
 		.info {
 			flex-grow: 1;
 		}
@@ -99,11 +97,10 @@
 	}
 
 	.jobs {
-		overflow-y: scroll;
 		height: var(--height);
 
 		padding-top: 0.5rem;
-
+		overflow-y: scroll;
 		background: var(--background-lighter);
 	}
 </style>

webui/src/lib/components/layout/Header.svelte

@@ -116,25 +116,25 @@
 	.header {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem;
 		height: 3.5rem;
+		padding: 0.5rem;
+		gap: 0.5rem;
 		border-bottom: 1px solid var(--foreground);
 
 		background: var(--background);
 
 		h1 {
-			font-size: 16pt;
-			font-weight: normal;
 			margin: 0;
+			font-weight: normal;
+			font-size: 16pt;
 
 			:global(a) {
 				display: flex;
 				align-items: center;
 
 				color: var(--foreground-lightest);
-				text-decoration: none;
 				font-weight: normal;
+				text-decoration: none;
 			}
 
 			img {

webui/src/lib/components/layout/HeaderUserDropdown.svelte

@@ -84,23 +84,23 @@
 <style>
 	.user-dropdown {
 		display: flex;
-		flex-direction: column;
+		z-index: 99;
-		gap: 0.5rem;
-
-		background: var(--background);
-		border-radius: 4px;
-		border: 1px solid var(--foreground);
-		padding: 0.5em;
 		position: absolute;
 		top: 3.5rem;
 		right: 0.5rem;
+		flex-direction: column;
+		padding: 0.5em;
+		gap: 0.5rem;
+		border: 1px solid var(--foreground);
+		border-radius: 4px;
+
+		background: var(--background);
 		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-		z-index: 99;
 	}
 
 	.user {
-		font-weight: 500;
 		margin: 0 1rem;
+		font-weight: 500;
 	}
 
 	button,
@@ -111,8 +111,8 @@
 	}
 
 	h2 {
-		text-align: center;
 		margin: 0 0 1rem 0;
+		text-align: center;
 	}
 
 	.change-password {
@@ -133,8 +133,8 @@
 			grid-column: span 2;
 			justify-content: center;
 			justify-self: center;
-			font-weight: 500;
 			margin-top: 1rem;
+			font-weight: 500;
 		}
 	}
 </style>

webui/src/lib/components/layout/Jobs.svelte

@@ -75,8 +75,8 @@
 		display: flex;
 
 		.job-label {
-			white-space: nowrap;
 			margin-right: 2em;
+			white-space: nowrap;
 		}
 	}
 </style>

webui/src/lib/components/layout/Modal.svelte

@@ -26,30 +26,28 @@
 
 <style>
 	.modal-container {
+		z-index: 999;
 		position: fixed;
-		left: 0;
 		top: 0;
+		left: 0;
 		width: 100vw;
 		height: 100vh;
 		background: rgba(0, 0, 0, 0.66);
-
-		z-index: 999;
 	}
 
 	.modal {
+		display: flex;
 		position: fixed;
-		left: 50%;
 		top: 50%;
+		left: 50%;
+		flex-direction: column;
+		padding: 2rem;
+		gap: 1rem;
 		transform: translate(-50%, -50%);
+		border: 1px solid var(--foreground);
+		border-radius: 5px;
 		background: var(--background);
 		color: var(--foreground);
-		border-radius: 5px;
-		border: 1px solid var(--foreground);
-		padding: 2rem;
-
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
 
 		&.disabled {
 			filter: brightness(0.66);

webui/src/lib/components/util.scss

@@ -5,10 +5,10 @@ section.labelborder {
 		display: flex;
 		align-items: end;
 		justify-content: space-between;
+		margin-bottom: 0.33rem;
+		padding-bottom: 0.33rem;
 
 		border-bottom: 1px solid var(--foreground);
-		padding-bottom: 0.33rem;
-		margin-bottom: 0.33rem;
 
 		h3 {
 			margin: 0;

webui/src/lib/components/utils/Editable.svelte

@@ -87,8 +87,8 @@
 
 	.inner {
 		display: flex;
-		gap: 0.25em;
 		align-items: center;
+		gap: 0.25em;
 	}
 
 	.content {

webui/src/lib/components/utils/Ellipsis.svelte

@@ -8,8 +8,8 @@
 <style lang="scss">
 	.ellipsis {
 		max-width: 100%;
-		text-overflow: ellipsis;
 		overflow: hidden;
+		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 </style>

webui/src/lib/components/utils/IconButton.svelte

@@ -38,18 +38,18 @@
 		padding: 0.25em;
 		border: 0;
 		background: transparent;
-		cursor: pointer;
 		color: inherit;
+		cursor: pointer;
 		opacity: 0.66;
 
-		&.plain {
-			padding: 0;
-		}
-
 		transition:
 			opacity 0.2s,
 			color 0.2s,
 			border-color 0.2s;
+
+		&.plain {
+			padding: 0;
+		}
 	}
 
 	button.subdued {
@@ -57,10 +57,9 @@
 	}
 
 	.outline {
+		padding: 0.25em 1em;
 		border: 1px solid var(--foreground);
 		border-radius: 4px;
-
-		padding: 0.25em 1em;
 		&.small {
 			padding: 0.1em 0.8em;
 		}
@@ -68,9 +67,9 @@
 
 	.active,
 	button:hover {
-		opacity: 1;
-		color: var(--color);
 		border-color: var(--color);
+		color: var(--color);
+		opacity: 1;
 	}
 
 	button:disabled {
@@ -80,8 +79,8 @@
 
 	.text {
 		display: block;
+		margin-top: 0.2em;
 		font-size: 0.5em;
 		text-align: center;
-		margin-top: 0.2em;
 	}
 </style>

webui/src/lib/components/utils/Input.svelte

@@ -40,8 +40,8 @@
 	.input {
 		display: flex;
 		align-items: center;
-		gap: 0.25em;
 		padding: 0.25em;
+		gap: 0.25em;
 
 		border: 1px solid var(--foreground-lighter);
 		border-radius: 4px;
@@ -56,10 +56,10 @@
 	input {
 		flex-grow: 1;
 		min-width: 0;
+		border: none;
+		background: transparent;
 
 		color: var(--foreground);
-		background: transparent;
-		border: none;
 
 		&:focus {
 			outline: none;

webui/src/lib/components/utils/LabelBorder.svelte

@@ -40,10 +40,10 @@
 			display: flex;
 			align-items: end;
 			justify-content: space-between;
+			margin-bottom: 0.33rem;
+			padding-bottom: 0.33rem;
 
 			border-bottom: 1px solid var(--foreground);
-			padding-bottom: 0.33rem;
-			margin-bottom: 0.33rem;
 
 			& h3 {
 				margin: 0;
@@ -61,8 +61,8 @@
 		}
 
 		& .hidden-indicator {
-			border-top: 1px solid var(--foreground);
 			margin-top: calc(-0.33rem + 2px);
+			border-top: 1px solid var(--foreground);
 		}
 	}
 </style>

webui/src/lib/components/utils/NotesEditor.svelte

@@ -53,10 +53,10 @@
 
 <style lang="scss">
 	.notes {
-		background: var(--background);
-		border-radius: 4px;
-		padding: 0.66em !important;
 		margin: 0.1rem;
+		padding: 0.66em !important;
+		border-radius: 4px;
+		background: var(--background);
 
 		&:focus {
 			outline: 1px solid var(--primary-lighter);
@@ -64,9 +64,9 @@
 	}
 
 	.status {
-		font-size: 0.8em;
-		opacity: 0.8;
 		margin-top: 0.5em;
 		margin-right: 0.1rem;
+		font-size: 0.8em;
+		opacity: 0.8;
 	}
 </style>

webui/src/lib/components/utils/ProgressBar.svelte

@@ -13,16 +13,16 @@
 
 <style lang="scss">
 	.progress-bar {
+		position: relative;
 		width: 100%;
 		height: 1em;
 		background: white;
-		position: relative;
 	}
 
 	.value {
-		background: var(--primary);
-		height: 100%;
 		width: var(--value, 100%);
+		height: 100%;
+		background: var(--primary);
 		transition: width 0.2s ease;
 	}
 
@@ -32,24 +32,24 @@
 	}
 
 	.label {
-		font-size: 0.8em;
-		color: white;
 		z-index: 9;
 		position: absolute;
-		left: 50%;
 		top: 0;
+		left: 50%;
 		transform: translateX(-50%);
-		text-align: center;
+		color: white;
 		font-weight: bold;
+		font-size: 0.8em;
+		text-align: center;
 		mix-blend-mode: difference;
 	}
 
 	.progress-bar.indeterminate {
 		.value {
-			animation-name: indeterminate;
 			animation-duration: 2s;
-			animation-iteration-count: infinite;
 			animation-timing-function: ease-in-out;
+			animation-iteration-count: infinite;
+			animation-name: indeterminate;
 		}
 	}
 

webui/src/lib/components/utils/Selector.svelte

@@ -538,44 +538,42 @@
 	}
 
 	.options {
+		visibility: hidden;
+
+		z-index: 99;
 		position: absolute;
-		list-style: none;
+		width: 100%;
 		margin: 2px 0 0;
 		padding: 0;
 		border: 1px solid var(--foreground-lighter);
-		width: 100%;
 		border-radius: 4px;
 		background: var(--background);
 		box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.3);
+		font-weight: normal;
 
 		// reset
 		font-size: 1rem;
-		font-weight: normal;
+		list-style: none;
-
-		visibility: hidden;
 		opacity: 0;
 
 		transition: opacity 0.2s;
 
-		z-index: 99;
-
 		&.visible {
 			visibility: visible;
 			opacity: 1;
 		}
 
 		li {
-			cursor: pointer;
 			padding: 0.25em;
-
+			cursor: pointer;
 			transition: background-color 0.1s;
 			&:hover {
 				background-color: var(--background-lighter);
 			}
 
 			&:focus {
-				background-color: var(--background-lighter);
 				outline: none;
+				background-color: var(--background-lighter);
 			}
 
 			.type,
@@ -584,8 +582,8 @@
 			}
 
 			.type {
-				opacity: 0.8;
 				font-size: smaller;
+				opacity: 0.8;
 			}
 
 			.label {

webui/src/lib/components/widgets/EntityList.svelte

@@ -277,8 +277,8 @@
 	}
 
 	.message {
-		text-align: center;
 		margin: 0.5em;
+		text-align: center;
 		opacity: 0.66;
 	}
 
@@ -287,14 +287,14 @@
 			display: flex;
 			.object {
 				flex-grow: 1;
-				max-width: 100%;
 				min-width: 0;
+				max-width: 100%;
 			}
 
 			.icon {
 				width: 0;
-				transition: width 0.3s ease;
 				text-align: center;
+				transition: width 0.3s ease;
 			}
 
 			&:hover {
@@ -336,8 +336,8 @@
 
 		& .main {
 			display: flex;
-			flex-direction: column;
 			flex-grow: 1;
+			flex-direction: column;
 		}
 	}
 

webui/src/lib/components/widgets/EntryList.svelte

@@ -413,12 +413,11 @@
 		}
 
 		.cell {
+			min-width: 0;
+			padding: 2px;
+			border-radius: 4px;
 			font-family: var(--monospace-font);
 			line-break: anywhere;
-			min-width: 0;
-
-			border-radius: 4px;
-			padding: 2px;
 
 			&.formatted,
 			.formatted {
@@ -428,8 +427,8 @@
 
 		.attr-action {
 			display: flex;
-			justify-content: end;
 			align-items: center;
+			justify-content: end;
 		}
 
 		.add-row {
@@ -438,8 +437,8 @@
 
 		.add-button {
 			display: flex;
-			flex-direction: column;
 			grid-column: 1 / -1;
+			flex-direction: column;
 		}
 
 		.unset {

webui/src/lib/styles/colors-app.scss

@@ -63,8 +63,8 @@ html {
 
 html,
 body {
-	color: var(--foreground);
 	background: var(--background);
+	color: var(--foreground);
 
 	h1,
 	h2,
@@ -72,8 +72,8 @@ body {
 	h4,
 	h5,
 	h6 {
-		color: var(--foreground-lighter);
 		border-color: var(--foreground);
+		color: var(--foreground-lighter);
 	}
 
 	a,

webui/src/lib/styles/common.scss

@@ -10,12 +10,11 @@ html {
 }
 
 select {
+	border: 1px solid var(--foreground-lighter);
+	border-radius: 4px;
 	background: var(--background-lighter);
 	color: var(--foreground);
 	font-family: var(--default-font);
-
-	border: 1px solid var(--foreground-lighter);
-	border-radius: 4px;
 }
 
 .spinner {
@@ -24,16 +23,15 @@ select {
 
 button,
 .button {
+	display: block;
+
+	padding: 0.25em 1em;
 	border: 1px solid var(--foreground);
 	border-radius: 4px;
 
 	background: var(--background-lighter);
 	color: var(--foreground);
-
-	padding: 0.25em 1em;
 	line-height: 1;
-
-	display: block;
 	text-align: center;
 
 	cursor: pointer;
@@ -44,8 +42,8 @@ button,
 
 	&.disabled,
 	&:disabled {
-		pointer-events: none;
 		opacity: 0.7;
+		pointer-events: none;
 	}
 
 	@media screen and (max-width: 600px) {
@@ -61,12 +59,11 @@ input[type='password'] {
 	border-radius: 4px;
 	background: var(--background);
 	color: var(--foreground);
-
 	transition: box-shadow 0.25s;
 
 	&:focus {
-		box-shadow: -1px -1px 2px 2px var(--primary);
 		outline: none;
+		box-shadow: -1px -1px 2px 2px var(--primary);
 	}
 }
 

webui/src/lib/styles/main.scss

@@ -6,9 +6,9 @@
 @use 'boxicons/css/boxicons.min.css';
 
 body {
-	height: calc(100vh - 2rem);
 	display: flex;
 	flex-direction: column;
+	height: calc(100vh - 2rem);
 }
 
 main {
@@ -17,9 +17,8 @@ main {
 
 .image-queued,
 .image-loading {
-	animation: gradient 1.5s ease infinite;
-
 	color: transparent; // Hide alt-text
+	animation: gradient 1.5s ease infinite;
 
 	@keyframes gradient {
 		0% {

webui/src/routes/+page.svelte

@@ -308,9 +308,9 @@
 	}
 
 	h1 {
-		font-size: 32pt;
-		font-variant: small-caps;
 		margin: 2rem 0 0 0;
+		font-variant: small-caps;
+		font-size: 32pt;
 	}
 
 	h2 {
@@ -338,13 +338,13 @@
 	.roots,
 	.keyed {
 		ul {
-			list-style: none;
-			padding: 0;
-			margin: 0 auto;
 			display: flex;
 			flex-wrap: wrap;
 			width: 80%;
+			margin: 0 auto;
+			padding: 0;
 			gap: 1rem;
+			list-style: none;
 		}
 
 		li {
@@ -362,13 +362,12 @@
 
 	.groups {
 		ul {
-			list-style: none;
-			padding: 0;
-			margin: 0 2rem;
-
 			display: flex;
 			flex-wrap: wrap;
+			margin: 0 2rem;
+			padding: 0;
 			gap: 0.5em;
+			list-style: none;
 		}
 
 		.group {
@@ -377,15 +376,15 @@
 
 		.count {
 			display: inline-block;
-			font-size: 0.66em;
 			margin-left: 0.25em;
+			font-size: 0.66em;
 		}
 	}
 
 	footer {
+		margin: 1rem 2rem 2.5rem 2rem;
 		border-top: 1px solid var(--foreground);
 		text-align: center;
-		margin: 1rem 2rem 2.5rem 2rem;
 
 		& > * {
 			margin: 0.5em;
@@ -394,8 +393,8 @@
 
 	.store-button {
 		display: inline-block;
-		padding: 1em;
 		margin: 2rem auto;
+		padding: 1em;
 	}
 
 	.version {

webui/src/routes/browse/[addresses]/+page.svelte

@@ -169,10 +169,9 @@
 
 <style lang="scss">
 	.browser {
+		display: flex;
 		height: 100%;
 		padding: 1rem;
-
-		display: flex;
 		overflow-x: auto;
 		gap: 1rem;
 

webui/src/routes/search/+page.svelte

@@ -153,9 +153,9 @@
 	}
 
 	ul {
-		list-style: none;
 		margin: 0;
 		padding: 0;
+		list-style: none;
 	}
 
 	.exact {
@@ -163,11 +163,11 @@
 
 		ul {
 			display: flex;
-			gap: 1rem;
-			justify-content: center;
 			flex-wrap: wrap;
+			justify-content: center;
 
 			margin: 0 1rem;
+			gap: 1rem;
 		}
 
 		li {
@@ -181,14 +181,14 @@
 
 		.create-object {
 			display: inline-block;
-			color: var(--foreground);
+			margin-top: 1rem;
-			background: var(--background-lighter);
+			padding: 0.2em;
 			border: 1px solid var(--foreground);
 			border-radius: 4px;
-			padding: 0.2em;
+			background: var(--background-lighter);
+			color: var(--foreground);
 			font-size: 1.25em;
 			cursor: pointer;
-			margin-top: 1rem;
 		}
 	}
 
@@ -199,16 +199,16 @@
 
 	.raw {
 		li {
-			margin: 1em auto;
 			max-width: 66em;
+			margin: 1em auto;
 		}
 	}
 
 	.global {
-		font-size: 48px;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		font-size: 48px;
 	}
 </style>

webui/src/routes/setup/+page.svelte

@@ -79,29 +79,28 @@
 
 <style lang="scss">
 	main {
-		border-radius: 1rem;
-		border: 1px solid var(--foreground);
-		background: var(--background-lighter);
-		margin: 4rem;
-		padding: 4rem;
-
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		margin: 4rem;
+		padding: 4rem;
 		gap: 4rem;
+		border: 1px solid var(--foreground);
+		border-radius: 1rem;
+		background: var(--background-lighter);
 	}
 
 	h1,
 	h2 {
-		text-align: center;
 		margin: 0;
+		text-align: center;
 	}
 
 	.tree-mode .icons {
-		margin-top: 2rem;
 		display: flex;
-		gap: 2rem;
 		justify-content: center;
+		margin-top: 2rem;
+		gap: 2rem;
 	}
 
 	.icons {
@@ -109,8 +108,8 @@
 	}
 
 	.option {
-		flex-basis: 33%;
 		display: flex;
+		flex-basis: 33%;
 		flex-direction: column;
 		align-items: center;
 	}

webui/src/routes/store/+page.svelte

@@ -79,8 +79,8 @@
 	}
 
 	table {
-		border-spacing: 1em 0.25em;
 		margin: 1em;
+		border-spacing: 1em 0.25em;
 		text-align: initial;
 
 		.size,

webui/src/stories/NarrowDecorator.svelte

@@ -5,7 +5,7 @@
 <style>
 	.narrow {
 		width: 256px;
-		border: 1px dashed red;
 		padding: 1em 0;
+		border: 1px dashed red;
 	}
 </style>