chore: cleans up css styles (#3849)

assets/components/ContainerTable.vue

@@ -203,7 +203,7 @@ function isVisible(field: keys) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 [data-icon] {
   display: none;

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -220,7 +220,7 @@ const toggleAllLevels = computed({
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 li.line {
   @apply bg-base-content/20 h-px;

assets/components/ContainerViewer/ContainerHealth.vue

@@ -15,7 +15,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [health="unhealthy"] {
   @apply text-red;
 }

assets/components/FuzzySearchModal.vue

@@ -217,7 +217,7 @@ function matchedName({ item, matches = [] }: FuseResult<Item>) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 :deep(mark) {
   @apply bg-transparent text-inherit underline underline-offset-2;
 }

assets/components/LogViewer/ComplexLogItem.vue

@@ -30,7 +30,7 @@ const showDrawer = useDrawer();
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .text-light {
   @apply text-base-content/70;
 }

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -13,7 +13,7 @@ const { logEntry } = defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-event="container-stopped"] {
   @apply text-red;
 }

assets/components/LogViewer/LogDetails.vue

@@ -166,7 +166,7 @@ function syntaxHighlight(json: any) {
 useSortable(list, fields);
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .font-mono {
   font-family:
     ui-monospace,

assets/components/LogViewer/LogLevel.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-position="start"] {
   border-radius: 0.5em 0.5em 0 0;
   height: 70%;
@@ -35,7 +35,7 @@ defineProps<{
 }
 </style>
 <style>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-level="debug"],
 [data-level="trace"] {
   @apply !bg-purple;

assets/components/LogViewer/LogList.vue

@@ -54,7 +54,7 @@ useIntersectionObserver(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .events {
   font-family:
     ui-monospace,

assets/components/LogViewer/LogStd.vue

@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [std="stdout"] {
   @apply text-blue;
 }

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -103,7 +103,7 @@ const downloadUrl = computed(() =>
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 li.line {
   @apply bg-base-content/20 h-px;
 }

assets/components/LogViewer/SimpleLogItem.vue

@@ -35,7 +35,7 @@ const linkify = (text: string) =>
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .log-wrapper :deep(a) {
   @apply text-primary underline-offset-4 hover:underline;
 }

assets/components/Terminal.vue

@@ -58,7 +58,7 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .shell {
   & :deep(.terminal) {

assets/components/common/MobileMenu.vue

@@ -37,7 +37,7 @@ watch(route, () => {
 });
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;

assets/components/common/SideDrawer.vue

@@ -38,7 +38,7 @@ defineExpose({
 useEventListener(panel, "close", () => (open.value = false));
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .modal-right :where(.modal-box) {
   @apply bg-base-100 fixed right-0 h-lvh max-h-screen translate-x-24 scale-100 rounded-none shadow-none;

assets/layouts/default.vue

@@ -95,7 +95,7 @@ function onResized({ panes }: { panes: { size: number }[] }) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
   @apply bg-base-100 hover:bg-secondary min-w-[5px];

assets/pages/settings.vue

@@ -206,7 +206,7 @@ const fakeMessages = computedWithControl(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .has-underline {
   @apply border-base-content/50 mb-4 border-b py-4;