+
{{ segmentRow.label }}
@@ -212,13 +216,16 @@ const segmentRows = computed(() => {
}
.inspector-page-timeline__body {
- @apply border border-gray-50 dark:border-gray-600;
+ @include border-style;
+ @apply bg-gradient-to-r from-gray-300 dark:from-gray-900 from-[1px] to-transparent to-[1px];
+ @apply border-l-transparent;
}
.inspector-page-timeline__body-cells {
- @apply grid grid-cols-6 divide-x border-b;
+ @include border-style;
+ @apply grid grid-cols-6;
+ @apply border-x-0 border-t-0;
@apply font-bold text-center text-2xs sm:text-xs md:text-sm;
- @apply divide-gray-50 dark:divide-gray-600 border-gray-50 dark:border-gray-600;
}
.inspector-page-timeline__body-cell {
@@ -226,23 +233,15 @@ const segmentRows = computed(() => {
}
.inspector-page-timeline__segments {
- background-image: linear-gradient(to right, #dedede 1px, transparent 1px);
-
- .dark & {
- background-image: linear-gradient(
- to right,
- rgba(255, 255, 255, 0.04) 1px,
- transparent 1px
- );
- }
+ @apply block;
}
.inspector-page-timeline__segment {
- @apply mt-2 text-right cursor-pointer;
+ @apply text-right cursor-pointer;
}
.inspector-page-timeline__segment-label {
- @apply text-2xs md:text-xs font-bold whitespace-nowrap pr-2 pb-1 opacity-20;
+ @apply text-2xs md:text-xs font-bold whitespace-nowrap px-2 py-1 opacity-20 overflow-auto;
.inspector-page-timeline__segment:hover & {
@apply opacity-100;
diff --git a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue b/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
index 294cd3d2..a3a76ad9 100644
--- a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
+++ b/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
@@ -142,13 +142,13 @@ const currentDevice = ref(props.device);
&::after {
@include border-style;
- @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
+ @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
content: "";
}
&::before {
@include border-style;
- @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+ @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
content: "";
}
}
@@ -158,13 +158,13 @@ const currentDevice = ref(props.device);
&::before {
@include border-style;
- @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+ @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
content: "";
}
&::after {
@include border-style;
- @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
+ @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
content: "";
}
}
diff --git a/src/shared/ui/table-base/table-base.vue b/src/shared/ui/table-base/table-base.vue
index 6ede27f9..047cb119 100644
--- a/src/shared/ui/table-base/table-base.vue
+++ b/src/shared/ui/table-base/table-base.vue
@@ -10,7 +10,7 @@
@import "src/assets/mixins";
.table-base {
@include border-style;
- @apply bg-gray-100 dark:bg-gray-800 text-sm border divide-y;
+ @apply bg-gray-100 dark:bg-gray-800 text-sm divide-y;
}