From 3c1eb11163880ece58a6a99225793659c300c0c8 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 30 Jan 2025 15:48:48 +0100
Subject: [PATCH] fix(front): move dark card border to global styles

---
 front/src/components/ui/Card.vue      |   2 +-
 front/src/style/colors.scss           |   2 +-
 front/src/style/components/_card.scss | 137 +-------------------------
 3 files changed, 5 insertions(+), 136 deletions(-)

diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index a919eed48..9b8e24821 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -45,7 +45,7 @@ const attributes = computed(() =>
 
 <template>
   <Layout stack no-gap
-    :class="{ [$style.card]: true, [$style['is-category']]: category }"
+    :class="[{ [$style.card]: true, [$style['is-category']]: category }, 'card']"
     v-bind="attributes"
   >
 
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 5e916ae77..443c9eb1a 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -533,7 +533,7 @@
   .solid, .alert>.actions>button, button:not(:is(.ghost,.outline,.tabs-item)) {
     color: var(--color);
     background-color:var(--background-color);
-    border: 1px solid var(--fw-gray-850);
+    border: 1px solid var(--background-color);
 
     &.interactive:not(:has(.interactive:hover)) {
       &:hover {
diff --git a/front/src/style/components/_card.scss b/front/src/style/components/_card.scss
index d9aa1fff7..cab26f37b 100644
--- a/front/src/style/components/_card.scss
+++ b/front/src/style/components/_card.scss
@@ -1,136 +1,5 @@
-.ui.cards > .card,
-.ui.card {
-  color: var(--card-text-color);
-  background: var(--card-background);
-  &:not(.flat) {
-    box-shadow: var(--card-box-shadow);
-  }
-  .content,
-  .header,
-  .content .header,
-  .content .description,
-  .description {
-    color: var(--card-text-color);
-  }
-  .extra,
-  .meta {
-    color: var(--discrete-text-color);
-  }
-  .description {
-    word-wrap: break-word;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-  }
-  .description.expanded {
-    text-overflow: initial;
-    overflow: initial;
-    -webkit-line-clamp: initial;
-    -webkit-box-orient: initial;
+.card {
+  @include dark-theme {
+    border-color: var(--hover-background-color) !important;
   }
 }
-
-.ui.cards.app-cards {
-  $card-width: 14em;
-  $card-height: 23em;
-  $small-card-width: 11em;
-  $small-card-height: 20em;
-  .app-card {
-    display: flex;
-    width: $small-card-width;
-    height: $small-card-height;
-    font-size: 95%;
-    @include media(">tablet") {
-      font-size: 100%;
-      width: $card-width;
-      height: $card-height;
-    }
-    .content:not(.extra) {
-      padding: 0.25em 0.5em 0;
-      @include media(">tablet") {
-        padding: 0.5em 1em 0;
-      }
-    }
-    .content.extra {
-      padding: 0.25em 0.5em;
-      @include media(">tablet") {
-        padding: 0.5em 1em;
-      }
-    }
-    .head-image {
-      height: $small-card-width;
-      @include media(">tablet") {
-        height: $card-width;
-      }
-      background-size: cover !important;
-      background-position: center !important;
-      display: flex !important;
-      justify-content: flex-end !important;
-      align-items: flex-end !important;
-      .button {
-        margin: 0;
-      }
-      &.circular {
-        overflow: visible;
-        border-radius: 50% !important;
-        width: $small-card-width - 0.5em;
-        height: $small-card-width - 0.5em;
-        margin: 0.25em;
-        @include media(">tablet") {
-          width: $card-width - 1em;
-          height: $card-width - 1em;
-          margin: 0.5em;
-        }
-
-      }
-      &.padded {
-        margin: 0.5em;
-        border-radius: 0.25em !important;
-      }
-      &.squares {
-        display: block !important;
-        position: relative;
-        margin-bottom: -1px;
-        .button {
-          position: absolute !important;
-          bottom: 0.5em;
-          right: 0.5em;
-        }
-        img {
-          display: inline-block;
-          width: 50%;
-          height: 50%;
-          margin: 0;
-          border-radius: 0;
-          margin-bottom: -4px;
-        }
-        img:nth-child(1) {
-          border-top-left-radius: 3px;
-        }
-        img:nth-child(2) {
-          border-top-right-radius: 3px;
-        }
-      }
-    }
-    .extra {
-      border-top: 0 !important;
-    }
-    .content:not(.extra) {
-      &, & * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding-bottom: 0;
-      }
-    }
-    .floating.dropdown > .icon {
-      margin-right: 0;
-    }
-  }
-}
-
-.ui.cards a.card:hover, .ui.link.cards .card:not(.icon):hover, a.ui.card:hover, .ui.link.card:hover {
-  background: var(--light-background-color);
-}