mockaton 13.11.1 → 13.11.2

package/src/client/app.css

@@ -116,240 +116,6 @@ select {
 	}
 }
 
-
-header {
-	display: flex;
-	flex: 0 0 100%;
-	padding: 16px;
-	background: var(--colorBgHeader);
-
-	.Logo {
-		align-self: end;
-		margin-right: 18px;
-		margin-bottom: 2px;
-		transition: opacity 240ms ease-in-out;
-
-		svg {
-			width: 122px;
-			pointer-events: none;
-			fill: var(--colorText);
-		}
-	}
-
-	@media (max-width: 570px) {
-		.Logo {
-			display: none;
-		}
-	}
-
-	&:has(.FallbackBackend) {
-		@media (max-width: 740px) {
-			.Logo {
-				display: none;
-			}
-		}
-	}
-
-	> div {
-		display: flex;
-		width: 100%;
-		flex-wrap: wrap;
-		align-items: flex-end;
-		gap: 16px 12px;
-
-		&:has(.FallbackBackend) {
-			@media (max-width: 600px) {
-				.HelpLink {
-					margin-left: unset;
-				}
-			}
-		}
-	}
-
-	.GlobalDelayWrap {
-		display: flex;
-	}
-
-
-	.ResetButton {
-		padding: 6px 12px;
-		border: 1px solid var(--colorRed);
-		margin-right: 8px;
-		margin-left: 4px;
-		background: transparent;
-		border-radius: 50px;
-		color: var(--colorRed);
-		box-shadow: var(--boxShadowRimDrop);
-
-		@media (prefers-color-scheme: dark) {
-			color: var(--colorText);
-		}
-
-		&:hover {
-			background: var(--colorRed);
-			color: white;
-		}
-	}
-
-	.HelpLink {
-		width: 24px;
-		height: 24px;
-		flex-shrink: 0;
-		align-self: end;
-		margin-bottom: 3px;
-		margin-left: auto;
-		box-shadow: var(--boxShadowRimDrop);
-		opacity: 0.8;
-		border-radius: 50%;
-		fill: var(--colorBgHeader);
-		background: var(--colorLabel);
-
-		&:hover {
-			background: var(--colorAccent);
-			opacity: 1;
-		}
-
-		svg {
-			transform: scale(.7);
-		}
-	}
-}
-
-.GlobalDelay,
-.GlobalDelayJitter,
-.CookieSelector,
-.FallbackBackend {
-	width: 116px;
-
-	span {
-		display: flex;
-		align-items: center;
-		margin-left: 8px;
-		white-space: nowrap;
-		color: var(--colorLabel);
-		font-size: 11px;
-		gap: 4px;
-		transition: color 200ms ease-out;
-	}
-
-	&:has(input:focus-visible),
-	&:hover {
-		span {
-			color: var(--colorText);
-		}
-	}
-
-	input[type=url],
-	input[type=number],
-	select {
-		width: 100%;
-		height: 28px;
-		padding: 4px 8px;
-		margin-top: 2px;
-		color: var(--colorText);
-		font-size: 11px;
-		background-color: var(--colorBgHeaderField);
-		border-radius: var(--radius);
-		box-shadow: var(--boxShadowRimDrop);
-		transition: background-color ease-in-out 120ms;
-
-		&:hover {
-			background-color: var(--colorBgFieldHover);
-		}
-	}
-
-	&.GlobalDelay,
-	&.GlobalDelayJitter {
-		input {
-			&&::selection {
-				background-color: transparent;
-			}
-
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
-			}
-		}
-	}
-
-	&.GlobalDelay {
-		position: relative;
-		width: 76px;
-
-		input {
-			padding-right: 6px;
-			border-bottom-right-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		svg {
-			width: 12px;
-			height: 12px;
-			border: 1px solid var(--colorLabel);
-			stroke-width: 3px;
-			border-radius: 50%;
-		}
-
-		&:focus-within {
-			z-index: 100;
-		}
-	}
-
-	&.GlobalDelayJitter {
-		width: 80px;
-
-		&:focus-within {
-			z-index: 100;
-		}
-
-		span {
-			margin-left: 8px;
-		}
-		input {
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
-		}
-	}
-
-	&.CookieSelector {
-		width: 100px;
-	}
-
-	&.FallbackBackend {
-		position: relative;
-		width: 160px;
-
-		.SaveProxiedCheckbox {
-			position: absolute;
-			top: 0;
-			right: 0;
-			display: flex;
-			width: auto;
-			min-width: unset;
-			align-items: center;
-			gap: 4px;
-
-			input + .checkboxBody {
-				margin: 0;
-				margin-right: 4px;
-			}
-			input:enabled + .checkboxBody {
-				cursor: pointer;
-			}
-
-			input:disabled {
-				cursor: not-allowed;
-			}
-			input:disabled + .checkboxBody {
-				opacity: 0.8;
-				cursor: not-allowed;
-			}
-		}
-	}
-}
-
-
 main {
 	display: flex;
 	min-width: 0;
@@ -418,426 +184,6 @@ main {
 	}
 }
 
-.SubToolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding-right: 14px;
-	padding-left: 16px;
-	border-bottom: 1px solid var(--colorBorder);
-	background: var(--colorBgHeader);
-}
-
-.GroupByMethod {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	cursor: pointer;
-}
-
-.BulkSelector {
-	select {
-		width: 110px;
-		padding: 6px 8px;
-		margin-left: 4px;
-		background-image: none;
-		text-align-last: center;
-		color: var(--colorText);
-		font-size: 11px;
-		background-color: var(--colorBgHeaderField);
-		border-radius: var(--radius);
-		box-shadow: var(--boxShadowRimDrop);
-		transition: background-color ease-in-out 120ms;
-
-		&:hover {
-			background-color: var(--colorBgFieldHover);
-		}
-	}
-}
-
-.Table {
-	height: 100%;
-	padding: 16px;
-	padding-bottom: 64px;
-	padding-left: 15px;
-	user-select: none;
-	overflow-y: auto;
-
-	.TableHeading {
-		padding-bottom: 4px;
-		padding-left: 1px;
-		border-top: 24px solid transparent;
-		margin-left: 94px;
-		font-weight: bold;
-		text-align: left;
-
-		&:first-of-type {
-			border-top: 0;
-		}
-
-		&.canProxy {
-			margin-left: 124px;
-		}
-	}
-
-	.TableRow {
-		display: flex;
-		margin-left: 24px;
-
-		&.animIn {
-			opacity: 0;
-			transform: scaleY(0);
-			animation: _kfRowIn 180ms ease-in-out forwards;
-		}
-	}
-
-	.FolderGroup {
-		position: relative;
-		border-radius: var(--radius);
-
-		> summary {
-			left: 0;
-			display: flex;
-			overflow: hidden;
-			align-items: center;
-			padding: 5px 0;
-			font-weight: 500;
-			font-size: 12px;
-			list-style: none;
-			cursor: pointer;
-			user-select: none;
-			color: var(--colorLabel);
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			border-radius: var(--radius);
-
-			&:active {
-				cursor: grabbing;
-			}
-
-			&::-webkit-details-marker,
-			&::marker {
-				display: none;
-			}
-
-			&:hover {
-				background: var(--colorHover);
-			}
-
-			.FolderName {
-				margin-left: 125px;
-				&.canProxy {
-					margin-left: 155px;
-				}
-
-				&.groupedByMethod {
-					margin-left: 79px;
-					&.canProxy {
-						margin-left: 109px;
-					}
-				}
-			}
-
-			.FolderChevron {
-				display: flex;
-				width: 16px;
-				height: 16px;
-				flex-shrink: 0;
-				align-items: center;
-				justify-content: center;
-				opacity: .7;
-				transition: transform cubic-bezier(.2, .7, .8, 1.4) 400ms;
-				transform: rotate(-90deg);
-
-				svg {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-
-		&[open] {
-			&:has(summary:hover):not(:has(details:hover)) {
-				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
-			}
-
-			> summary {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 16px;
-
-				.FolderChevron {
-					transform: rotate(0deg);
-				}
-				.FolderName {
-					display: none;
-				}
-			}
-		}
-	}
-}
-
-@keyframes _kfRowIn {
-	to {
-		opacity: 1;
-		transform: scaleY(1);
-	}
-}
-
-.Method {
-	overflow: hidden;
-	min-width: 38px;
-	padding: 4px 0;
-	margin-top: 3px;
-	margin-right: 8px;
-	color: var(--colorLabel);
-	font-size: 11px;
-	text-align: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.PreviewLink {
-	position: relative;
-	left: -8px;
-	display: inline-block;
-	width: auto;
-	min-width: 140px;
-	flex-grow: 1;
-	padding: 6px 8px;
-	margin-right: -2px;
-	margin-left: 4px;
-	font-weight: 500;
-	border-radius: var(--radius);
-	word-break: break-word;
-
-	&:hover {
-		background: var(--colorHover);
-	}
-	&.chosen {
-		color: white;
-		background: var(--colorAccent);
-	}
-	.dittoDir {
-		opacity: 0.8;
-		filter: saturate(0.1);
-	}
-}
-
-
-.MockSelector {
-	min-width: 58px;
-	height: 24px;
-	padding-right: 20px;
-	padding-left: 8px;
-	text-overflow: ellipsis;
-	text-align: right;
-
-	&:enabled {
-		box-shadow: var(--boxShadowRimDrop);
-		&:hover {
-			background-color: var(--colorBgFieldHover);
-		}
-	}
-
-	&.nonDefault {
-		font-weight: bold;
-		font-size: 11px;
-	}
-	&.status4xx {
-		background: var(--colorBg4xx);
-	}
-	&:disabled {
-		padding-right: 4px;
-		padding-left: 0;
-		border-color: transparent;
-		appearance: none;
-		background: transparent;
-		cursor: default;
-		color: var(--colorLabel);
-		opacity: 0.8;
-	}
-}
-
-
-.Toggler {
-	display: flex;
-	margin-top: 3px;
-
-	input {
-		/* For click drag target */
-		position: absolute;
-		width: 22px;
-		height: 22px;
-		opacity: 0;
-
-		&:focus-visible {
-			outline: 0;
-			& + .checkboxBody {
-				outline: 2px solid var(--colorAccent);
-			}
-		}
-
-		&:disabled + .checkboxBody {
-			cursor: not-allowed;
-			opacity: 0.7;
-		}
-
-		&:checked + .checkboxBody {
-			border-color: var(--colorAccent);
-			fill: var(--colorAccent);
-			background: var(--colorAccent);
-			stroke: var(--colorBg);
-		}
-
-		&:enabled:hover:not(:checked) + .checkboxBody {
-			border-color: var(--colorHover);
-			background: var(--colorHover);
-			stroke: var(--colorText);
-		}
-	}
-
-	.checkboxBody {
-		display: flex;
-		width: 22px;
-		height: 22px;
-		align-items: center;
-		justify-content: center;
-		fill: none;
-		stroke: var(--colorLabel);
-		stroke-width: 2.5px;
-		border-radius: 50%;
-		box-shadow: var(--boxShadowRimDrop);
-		background-color: var(--colorBgHeaderField);
-	}
-
-	&.canProxy {
-		margin-left: 30px;
-	}
-}
-
-.DelayToggler {
-}
-
-.ProxyToggler {
-	margin-right: 8px;
-
-	.checkboxBody {
-		svg {
-			width: 15px;
-		}
-	}
-}
-
-.StatusCodeToggler {
-	margin-right: 10px;
-	margin-left: 8px;
-
-	input {
-		width: 26px;
-
-		&:not(:checked):enabled:hover + .checkboxBody {
-			border-color: var(--colorRed);
-			color: var(--colorRed);
-			background: transparent;
-		}
-		&:checked + .checkboxBody {
-			border-color: var(--colorRed);
-			color: white;
-			background: var(--colorRed);
-		}
-	}
-
-	.checkboxBody {
-		width: 27px;
-		padding: 4px;
-		font-size: 10px;
-		font-weight: bold;
-		color: var(--colorLabel);
-	}
-}
-
-
-.PayloadViewer {
-	display: grid;
-	height: 100%;
-	grid-template-rows: var(--subtoolbarHeight) 1fr;
-
-	> pre {
-		overflow: auto;
-		height: 100%;
-		padding: 16px;
-		padding-top: 12px;
-		font-family: monospace;
-
-		&:has(> code > :is(iframe, video)) {
-			padding: 0;
-		}
-
-		> code {
-			line-height: 1.3;
-			white-space: pre;
-			tab-size: 2;
-			color: var(--colorLabel);
-
-			> video {
-				width: 100%;
-			}
-			> iframe {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-}
-
-.syntaxPunc {
-	color: var(--colorLabel);
-}
-.syntaxKey,
-.syntaxTag {
-	color: var(--colorPink);
-}
-.syntaxVal,
-.syntaxAttr {
-	color: var(--colorPurple);
-}
-.syntaxStr,
-.syntaxAttrVal {
-	color: var(--colorGreen);
-}
-
-
-.ProgressBar {
-	position: relative;
-	top: -12px;
-	left: -16px;
-	width: calc(100% + 32px);
-	height: 2px;
-	background: var(--colorBgHeaderField);
-
-	> div {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 0;
-		height: 100%;
-		background: var(--colorAccent);
-		animation-name: _kfProgress;
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-		animation-direction: alternate;
-		/* animation-duration is set in JS */
-	}
-}
-@keyframes _kfProgress {
-	to {
-		width: 100%;
-	}
-}
-
-
 .ErrorToast {
 	position: fixed;
 	z-index: 9999;