Format

src/elements/common/file-upload-list.scss

@@ -30,7 +30,9 @@
 				cursor: pointer;
 				padding: 10px 16px 10px 10px;
 
-				transition: transform consts.$transition-length, background-color consts.$transition-length;
+				transition:
+					transform consts.$transition-length,
+					background-color consts.$transition-length;
 				box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
 
 				&:hover {

src/elements/common/file-uploader.scss

@@ -88,7 +88,9 @@
 			background-color: transparent;
 			filter: blur(0);
 
-			transition: filter consts.$transition-length * 2, opacity consts.$transition-length * 1.5,
+			transition:
+				filter consts.$transition-length * 2,
+				opacity consts.$transition-length * 1.5,
 				background-color consts.$transition-length;
 
 			[name='icon']::slotted(*) {

src/elements/common/file-uploader.ts

@@ -386,7 +386,7 @@ export default class FileUploader extends LitElement {
 											<h1>Uploading...</h1>
 											<h2><span id='upload-name'>${currentUpload[0].repeat(2)}</span id='upload-type'><span>${
 												currentUpload[1]
-										  }</span></h2>
+											}</span></h2>
 											<div id='progress-area'>
 												<loading-bar .progress=${progress}></loading-bar>
 												<h3>${this.uploadState.progress}/${this.uploadState.total}</h3>

src/elements/common/horizontal-scroller.scss

@@ -37,7 +37,9 @@
 			font-size: 12px;
 			border-radius: $height * 0.5;
 			cursor: pointer;
-			transition: consts.$transition-length transform, consts.$transition-length background,
+			transition:
+				consts.$transition-length transform,
+				consts.$transition-length background,
 				consts.$transition-length color;
 
 			@include common.small-header();

src/elements/common/loading-wheel.scss

@@ -83,7 +83,9 @@
 		--fill: #{$color};
 
 		// animation: rotate 1.5s forwards infinite linear; // cubic-bezier(.55,-0.76,.43,1.68)
-		animation: 2.4s infinite -1.2s spin-animation, 0.8s fade-in;
+		animation:
+			2.4s infinite -1.2s spin-animation,
+			0.8s fade-in;
 	}
 
 	& > h1 {

src/elements/common/overlay-positioning.ts

@@ -386,9 +386,10 @@ export default class OverlayPositioning extends LitElement {
 			<div id="holder" style=${baseStyles} @click=${this.close.bind(this)}>
 				${when(
 					this.scaleAnimation,
-					() => html`<div id="animation" style=${animationStyles}>
-						<slot @slotchange=${this.onSlotChange}></slot>
-					</div>`,
+					() =>
+						html`<div id="animation" style=${animationStyles}>
+							<slot @slotchange=${this.onSlotChange}></slot>
+						</div>`,
 					() => html`<slot @slotchange=${this.onSlotChange}></slot>`
 				)}
 			</div>

src/elements/common/page-filter.scss

@@ -29,7 +29,9 @@
 	background-color: #313131;
 	border-radius: 14px;
 
-	transition: background-color consts.$transition-length, border-radius consts.$transition-length * 0.5;
+	transition:
+		background-color consts.$transition-length,
+		border-radius consts.$transition-length * 0.5;
 
 	&.active {
 		background-color: #4d4d4d;
@@ -105,7 +107,9 @@
 		font-family: consts.$open-sans;
 		font-weight: 600;
 		border: none;
-		transition: background-color consts.$transition-length, border-radius consts.$transition-length * 0.5;
+		transition:
+			background-color consts.$transition-length,
+			border-radius consts.$transition-length * 0.5;
 
 		&::placeholder {
 			font-weight: bold;

src/elements/common/stylized-button.scss

@@ -41,8 +41,11 @@
 
 	cursor: pointer;
 	overflow: hidden;
-	transition: color consts.$transition-length, background-color consts.$transition-length,
-		transform consts.$transition-length, box-shadow consts.$transition-length;
+	transition:
+		color consts.$transition-length,
+		background-color consts.$transition-length,
+		transform consts.$transition-length,
+		box-shadow consts.$transition-length;
 
 	e-svg {
 		--fill: #{$icon-color};
@@ -139,7 +142,9 @@
 			opacity: 0;
 
 			transform: translate(-5px, 0);
-			transition: opacity consts.$transition-length, transform consts.$transition-length;
+			transition:
+				opacity consts.$transition-length,
+				transform consts.$transition-length;
 		}
 	}
 }

src/elements/context-menu/context-action.scss

@@ -12,7 +12,9 @@
 	padding: 5px 15px;
 	box-sizing: border-box;
 	// border-radius: 2px;
-	transition: background-color consts.$transition-length * 0.5, color consts.$transition-length * 0.5;
+	transition:
+		background-color consts.$transition-length * 0.5,
+		color consts.$transition-length * 0.5;
 
 	cursor: pointer;
 

src/elements/context-menu/context-menu.ts

@@ -267,16 +267,16 @@ export default class ContextMenu extends LitElement {
 			>
 			${when(
 				!isSelf,
-				() => html`<context-action
-						href=${routes.identityDirectChat.build(identityRouteData(identity))}
-						>Send message</context-action
-					><context-action
-						class=${classMap({ destructive: this.isFollowing })}
-						.trigger=${this.toggleFollow.bind(this)}
-						@triggered=${this.onActionClick.bind(this)}
-						?loading=${!summary}
-						>${this.isFollowing ? 'Remove' : 'Add'} friend</context-action
-					>`
+				() =>
+					html`<context-action href=${routes.identityDirectChat.build(identityRouteData(identity))}
+							>Send message</context-action
+						><context-action
+							class=${classMap({ destructive: this.isFollowing })}
+							.trigger=${this.toggleFollow.bind(this)}
+							@triggered=${this.onActionClick.bind(this)}
+							?loading=${!summary}
+							>${this.isFollowing ? 'Remove' : 'Add'} friend</context-action
+						>`
 			)}`;
 	}
 
@@ -298,31 +298,32 @@ export default class ContextMenu extends LitElement {
 			>
 			${when(
 				!isSelf,
-				() => html`<context-action
-						href=${routes.identityDirectChat.build(identityRouteData(identity))}
-						>Send message</context-action
-					><context-action
-						class=${classMap({ destructive: this.isFollowing })}
-						.trigger=${this.toggleFollow.bind(this)}
-						@triggered=${this.onActionClick.bind(this)}
-						?loading=${!summary}
-						>${this.isFollowing ? 'Remove' : 'Add'} friend</context-action
-					>`
+				() =>
+					html`<context-action href=${routes.identityDirectChat.build(identityRouteData(identity))}
+							>Send message</context-action
+						><context-action
+							class=${classMap({ destructive: this.isFollowing })}
+							.trigger=${this.toggleFollow.bind(this)}
+							@triggered=${this.onActionClick.bind(this)}
+							?loading=${!summary}
+							>${this.isFollowing ? 'Remove' : 'Add'} friend</context-action
+						>`
 			)}
 			${when(
 				showAdminControls,
-				() => html`<div class="spacer"></div>
-					<context-action
-						class="destructive"
-						.trigger=${this.kickGroupMember.bind(this)}
-						@triggered=${this.onActionClick.bind(this)}
-						>Kick</context-action
-					><context-action
-						class="destructive"
-						.trigger=${this.banIdentity.bind(this)}
-						@triggered=${this.onActionClick.bind(this)}
-						>Ban</context-action
-					>`
+				() =>
+					html`<div class="spacer"></div>
+						<context-action
+							class="destructive"
+							.trigger=${this.kickGroupMember.bind(this)}
+							@triggered=${this.onActionClick.bind(this)}
+							>Kick</context-action
+						><context-action
+							class="destructive"
+							.trigger=${this.banIdentity.bind(this)}
+							@triggered=${this.onActionClick.bind(this)}
+							>Ban</context-action
+						>`
 			)}`;
 	}
 
@@ -416,9 +417,10 @@ export default class ContextMenu extends LitElement {
 			() =>
 				when(
 					ctx.groupId,
-					() => html`<context-action href=${routes.groupSettings.build({ id: ctx.groupId })}
-						>View profile</context-action
-					>`,
+					() =>
+						html`<context-action href=${routes.groupSettings.build({ id: ctx.groupId })}
+							>View profile</context-action
+						>`,
 					() => html`<p class="muted">No actions available</p>`
 				)
 		);
@@ -439,11 +441,12 @@ export default class ContextMenu extends LitElement {
 		return html`
 			${when(
 				identity,
-				() => html`<context-action
-					.trigger=${() => ctx.replyCb(chatMessage.chatMessageId)}
-					@triggered=${this.onActionClick.bind(this)}
-					>Reply to <b>${identity.displayName}</b></context-action
-				>`,
+				() =>
+					html`<context-action
+						.trigger=${() => ctx.replyCb(chatMessage.chatMessageId)}
+						@triggered=${this.onActionClick.bind(this)}
+						>Reply to <b>${identity.displayName}</b></context-action
+					>`,
 				() => html`<p class="muted">No actions available</p>`
 			)}
 		`;

src/elements/dev/builds.ts

@@ -38,7 +38,7 @@ export default class DevBuilds extends LitElement {
 						displayName: b.displayName,
 						createTs: b.createTs,
 						contentLength: b.contentLength
-					} as UploadEntry)
+					}) as UploadEntry
 			);
 	}
 

src/elements/dev/cdn-sites.ts

@@ -37,7 +37,7 @@ export default class CdnSites extends LitElement {
 						displayName: s.displayName,
 						createTs: s.createTs,
 						contentLength: s.contentLength
-					} as UploadEntry)
+					}) as UploadEntry
 			);
 	}
 

src/elements/dev/check-box.scss

@@ -19,7 +19,9 @@
 
 	font-size: 0px;
 
-	transition: background-color consts.$transition-length, border consts.$transition-length;
+	transition:
+		background-color consts.$transition-length,
+		border consts.$transition-length;
 
 	&:not(.disabled):hover {
 		border: 2px solid rgba(255, 255, 255, 0.12);

src/elements/dev/dev-game-logs-sidebar.scss

@@ -28,7 +28,9 @@
 		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
 		cursor: pointer;
 
-		transition: transform consts.$transition-length, background-color consts.$transition-length;
+		transition:
+			transform consts.$transition-length,
+			background-color consts.$transition-length;
 
 		&:hover {
 			transform: translateY(-1px);

src/elements/dev/drop-down-list.ts

@@ -219,55 +219,58 @@ export default class DropDownList<T> extends LitElement {
 				<div id="controls" @click=${this.onControlsClick.bind(this)}>
 					${when(
 						this.isOverlay && this.filter,
-						() => html`<input
-							id="filter-input"
-							maxlength="64"
-							type="text"
-							placeholder="Filter..."
-							@click=${(e: Event) => e.stopPropagation()}
-							@keydown=${this.onFilterKeyDown.bind(this)}
-							@input=${this.onFilterInput.bind(this)}
-						/>`,
-						() => html`<p
-							id="selection"
-							title=${this.selection ? this.selection.title ?? '' : ''}
-						>
-							${this.selection
-								? this.selection.template ?? this.selection.label ?? '<Empty>'
-								: this.placeholder}
-						</p>`
+						() =>
+							html`<input
+								id="filter-input"
+								maxlength="64"
+								type="text"
+								placeholder="Filter..."
+								@click=${(e: Event) => e.stopPropagation()}
+								@keydown=${this.onFilterKeyDown.bind(this)}
+								@input=${this.onFilterInput.bind(this)}
+							/>`,
+						() =>
+							html`<p id="selection" title=${this.selection ? this.selection.title ?? '' : ''}>
+								${this.selection
+									? this.selection.template ?? this.selection.label ?? '<Empty>'
+									: this.placeholder}
+							</p>`
 					)}
 					<e-svg id="icon" src=${caret}></e-svg>
 				</div>
 				${when(
 					this.isOverlay,
-					() => html`<div id="spacer"></div>
-						<div id="options">
-							${when(!options.length, () => html`<p class="muted">No options available</p>`)}
-							<div>
-								${repeat(
-									options,
-									o => o,
-									(o, i) => {
-										let classes = classMap({
-											option: true,
-											disabled: o.disabled,
-											header: o.header,
-											unstyled: o.unstyled,
-											selected: this.filter && this.filterSelection == i
-										});
-
-										return html`<div
-											class=${classes}
-											@click=${o.header ? null : this.onOptionClick.bind(this, o)}
-											title=${o.title ?? ''}
-										>
-											${o.template ?? o.label ?? '<Empty>'}
-										</div>`;
-									}
+					() =>
+						html`<div id="spacer"></div>
+							<div id="options">
+								${when(
+									!options.length,
+									() => html`<p class="muted">No options available</p>`
 								)}
-							</div>
-						</div>`
+								<div>
+									${repeat(
+										options,
+										o => o,
+										(o, i) => {
+											let classes = classMap({
+												option: true,
+												disabled: o.disabled,
+												header: o.header,
+												unstyled: o.unstyled,
+												selected: this.filter && this.filterSelection == i
+											});
+
+											return html`<div
+												class=${classes}
+												@click=${o.header ? null : this.onOptionClick.bind(this, o)}
+												title=${o.title ?? ''}
+											>
+												${o.template ?? o.label ?? '<Empty>'}
+											</div>`;
+										}
+									)}
+								</div>
+							</div>`
 				)}
 			</div>
 		`;

src/elements/dev/error-list.ts

@@ -22,10 +22,11 @@ export default class ErrorList extends LitElement {
 				${repeat(
 					this.errors,
 					e => e,
-					e => html`<div class="error">
-						<e-svg src="solid/triangle-exclamation"></e-svg>
-						<span>${e}</span>
-					</div>`
+					e =>
+						html`<div class="error">
+							<e-svg src="solid/triangle-exclamation"></e-svg>
+							<span>${e}</span>
+						</div>`
 				)}
 			</div>
 		`;