initial

wp-content/plugins/visual-regression-tests/components/test-run-alerts/_style.scss

@@ -0,0 +1,206 @@
+@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+
+.vrts-test-run-alerts {
+
+	&__heading {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: #f0f0f1;
+		padding: 0;
+		height: 62px;
+		overflow: hidden;
+		transition: box-shadow 0.2s;
+
+		&[data-is-sticky="true"] {
+			box-shadow: 0 1px 0 0 $gray-10;
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		> * {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
+
+		@media (min-width: 851px) {
+			padding: 0 20px;
+			position: sticky;
+			top: -0.1px;
+			z-index: 3;
+		}
+
+		&-link {
+			cursor: pointer;
+			position: relative;
+			background: transparent;
+			border: 0;
+			padding: 0;
+			min-height: 30px;
+			transition: color 0.2s;
+
+			&::before {
+				content: "";
+				position: absolute;
+				top: -5px;
+				left: -15px;
+				right: -15px;
+				bottom: -5px;
+			}
+
+			&:hover {
+				color: $blue-50;
+			}
+
+			&--button {
+				color: inherit;
+			}
+		}
+	}
+
+	&__list {
+		display: flex;
+		gap: 10px;
+		padding: 0 10px 10px 10px;
+		margin: 0 -10px;
+		overflow-x: scroll;
+		-webkit-overflow-scrolling: touch;
+
+		@media (min-width: 851px) {
+			flex-direction: column;
+			overflow: visible;
+			padding: 0 20px;
+			margin: 0 0 20px 0;
+		}
+	}
+
+	&__card {
+		box-sizing: border-box;
+		background: #fff;
+		border: 1px solid $gray-10;
+		display: flex;
+		flex-direction: column;
+		flex: 1 0 auto;
+		transition: all 0.1s;
+		box-shadow: inset 0 0 0 1px transparent;
+		width: 60%;
+
+		@media (min-width: 480px) {
+			width: 40%;
+		}
+
+		@media (min-width: 600px) {
+			width: 30%;
+		}
+
+		@media (min-width: 851px) {
+			width: 100%;
+		}
+
+		&:has([data-vrts-state="read"]) {
+			background: #f6f7f9;
+		}
+
+		&:has(:hover),
+		&:has([data-vrts-current="true"]) {
+			border-color: var(--vrts-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--vrts-admin-theme-color);
+		}
+
+		&:has([data-vrts-current="false"]:focus-visible) {
+			border-color: $gray-20;
+			box-shadow: inset 0 0 0 1px $gray-20;
+		}
+
+		&-link {
+			display: block;
+			text-decoration: none;
+			padding: 10px 10px 0 10px;
+
+			&:focus {
+				box-shadow: none;
+				outline: none;
+			}
+		}
+
+		&-figure {
+			position: relative;
+			background: #f6f7f7;
+			border: 1px solid $gray-5;
+			aspect-ratio: 1 / 1.15;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			width: 100%;
+		}
+
+		&-flag {
+			position: absolute;
+			top: 10px;
+			left: 10px;
+			visibility: hidden;
+
+			[data-vrts-false-positive="true"] & {
+				visibility: visible;
+			}
+		}
+
+		&-image {
+			position: absolute;
+			max-width: 100%;
+			max-height: 100%;
+		}
+
+		&-title-inner,
+		&-path {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&-title {
+			display: flex;
+			align-items: center;
+			gap: 0.3125rem;
+			color: $gray-70;
+			font-weight: 700;
+			margin-top: 12px;
+			margin-bottom: 4px;
+			text-decoration: none;
+
+			[data-vrts-state="read"] & {
+				font-weight: 400;
+			}
+
+			[data-vrts-state="unread"] &::after {
+				content: "";
+				width: 8px;
+				height: 8px;
+				background: var(--vrts-admin-theme-color);
+				border-radius: 50%;
+				flex: 0 0 auto;
+				margin-top: 1px;
+			}
+		}
+
+		&-path {
+			padding: 10px;
+			margin-top: -10px;
+
+			&:focus {
+				box-shadow: none;
+				outline: none;
+			}
+
+			&:focus-visible {
+				outline: 2px solid $gray-20;
+				outline-offset: -8px;
+				text-decoration: none;
+			}
+		}
+	}
+}