Merge commit 'c0b51028bda6d6ac45f368aeaaae7f1bd6028ee1'

gsabater · Nov 7, 2024 · e5d657a · e5d657a
2 parents bc21ba0 + c0b5102
commit e5d657a
Show file tree

Hide file tree

Showing 88 changed files with 7,621 additions and 2,530 deletions.
diff --git a/assets/scss/components/b-game.scss b/assets/scss/components/b-game.scss
@@ -7,13 +7,28 @@
   filter: brightness(0.88);
 
   will-change: transform brightness;
-  transition: all 0.1s ease-in-out;
+  // transition: all 0.1s ease-in-out;
+  transition: all 150ms linear;
 
   &:hover {
     filter: brightness(1.08);
     transform: translateY(-2px);
   }
 
+  &.is-bordered &__cover {
+    outline: 1px solid var(--bckg-state-color);
+    /* outline-offset: 0px; */
+  }
+
+  &.is-bordered:hover &__cover {
+    outline: 2px solid var(--bckg-state-color);
+  }
+
+  &.is-tracking &__cover {
+    transform: perspective(525px) translateZ(0) rotateX(var(--dx)) rotateY(var(--dy));
+    transition: all 150ms linear;
+  }
+
   &__cover {
     width: 100%;
     position: relative;
@@ -39,8 +54,8 @@
     // background: linear-gradient(0deg, #000, #272727);
 
     // outline: 1px solid rgba(0, 0, 0, 0.3);
-    outline: 1px solid rgba(255, 255, 255, 0.15);
-    outline-offset: -1px;
+    // outline: 1px solid rgba(255, 255, 255, 0.15);
+    // outline-offset: -1px;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.36);
 
     &.is-banner {
@@ -51,9 +66,6 @@
     &.is-banner img {
       margin: 15px;
       border-radius: 2px;
-      outline: 1px solid rgba(255, 255, 255, 0.15);
-      outline-offset: -1px;
-      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.36);
     }
 
     &:not(.is-banner) img {
@@ -73,8 +85,8 @@
       //   // border-radius: 4px;
       //   // max-width: 100%;
       //   // max-height: 100%;
-      // outline: 1px solid rgba(255, 255, 255, 0.15);
-      // outline-offset: -1px;
+      outline: 1px solid rgba(255, 255, 255, 0.15);
+      outline-offset: -1px;
       // box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.36);
 
       // outline: rgba(255, 255, 255, 0.65) solid 2px;
@@ -130,6 +142,25 @@
   }
 }
 
+.games-group {
+  user-select: none;
+
+  & .game--list {
+    & .game__cover {
+      z-index: 1;
+      outline: 1px solid rgba(255, 255, 255, 0.15);
+      outline-offset: -1px;
+      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.36);
+      max-width: 100px;
+      max-height: 46px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+  }
+}
+
 // .card-game:before {
 //   content: '';
 //   position: absolute;

diff --git a/assets/scss/components/b-menu.scss b/assets/scss/components/b-menu.scss
@@ -20,7 +20,7 @@
 }
 
 [data-theme='filters'] {
-  transform: translate(-3px, -50px);
+  // transform: translate(-3px, -50px);
 
   & .dropdown-menu {
     background-color: #2c2e3b !important;

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -5,52 +5,52 @@
 //
 //+-------------------------------------------------
 
-@import '../../node_modules/@tabler/core/dist/css/tabler.css';
-// @import '../../node_modules/@tabler/core/dist/css/tabler-flags.css';
-// @import '../../node_modules/@tabler/core/dist/css/tabler-payments.css';
-@import '../../node_modules/@tabler/core/dist/css/tabler-vendors.css';
-@import '../../node_modules/@tabler/core/dist/css/demo.css';
+@use '../../node_modules/@tabler/core/dist/css/tabler.css';
+// @use '../../node_modules/@tabler/core/dist/css/tabler-flags.css';
+// @use '../../node_modules/@tabler/core/dist/css/tabler-payments.css';
+@use '../../node_modules/@tabler/core/dist/css/tabler-vendors.css';
+@use '../../node_modules/@tabler/core/dist/css/demo.css';
 
-@import 'extend';
-@import 'overrides/tabler';
-@import 'overrides/vuetify';
+@use 'extend';
+@use 'overrides/tabler-overrides';
+@use 'overrides/vuetify';
 
 //+-------------------------------------------------
 // Mixins and default CSS
 //+-------------------------------------------------
 
-@import 'base';
-@import 'colors';
-@import 'borders';
+@use 'base';
+@use 'colors';
+@use 'borders';
 
-@import 'mixins/cards';
-@import 'mixins/buttons';
+@use 'mixins/cards';
+@use 'mixins/buttons';
 
 //+-------------------------------------------------
 // Partials
 //+-------------------------------------------------
 
-@import 'partials/nav';
-@import 'partials/home';
-@import 'partials/search';
-@import 'partials/palette';
+@use 'partials/nav';
+@use 'partials/home';
+@use 'partials/search';
+@use 'partials/palette';
 
-@import 'partials/base/_menus';
-@import 'partials/base/_sidebar';
-@import 'partials/base/_lists';
-@import 'partials/base/_modal';
+@use 'partials/base/_menus';
+@use 'partials/base/_sidebar';
+@use 'partials/base/_lists';
+@use 'partials/base/_modal';
 
 //+-------------------------------------------------
 // Components
 // styles created for distinct UI elements, like buttons or nav bars,
 // to promote reusability and organization in stylesheets.
 //+-------------------------------------------------
 
-@import 'components/b-menu';
-@import 'components/b-game';
-@import 'components/b-list';
-@import 'components/b-game-details';
-@import 'components/b-game-details-old';
-@import 'components/b-game-manager';
+@use 'components/b-menu';
+@use 'components/b-game';
+@use 'components/b-list';
+@use 'components/b-game-details';
+@use 'components/b-game-details-old';
+@use 'components/b-game-manager';
 
-@import 'dev';
+@use 'dev';
diff --git a/assets/scss/overrides/tabler.scss → assets/scss/overrides/tabler-overrides.scss b/assets/scss/overrides/tabler.scss → assets/scss/overrides/tabler-overrides.scss
diff --git a/assets/scss/overrides/vuetify.scss b/assets/scss/overrides/vuetify.scss
@@ -24,58 +24,87 @@
 }
 
 //+-------------------------------------------------
-// v-text-field
+// v-btn
+//+-------------------------------------------------
+.v-btn {
+  & .v-btn__content {
+    font-weight: 400;
+    font-size: var(--tblr-btn-font-size);
+    letter-spacing: 0;
+  }
+}
+
+//+-------------------------------------------------
+// v-text-field & v-textarea
 //+-------------------------------------------------
 .v-input {
-  & .v-field--variant-solo {
-    background: var(--tblr-bg-forms);
-    border: var(--tblr-border-width) solid var(--tblr-border-color);
-    // color: var(--tblr-border-color);
+  &.v-textarea,
+  & {
+    & .v-field--variant-solo {
+      background: var(--tblr-bg-forms);
+      border: var(--tblr-border-width) solid var(--tblr-border-color);
+      // color: var(--tblr-border-color);
+      transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
 
-    &.v-field--focused {
-      color: var(--tblr-body-color);
-      background-color: var(--tblr-bg-forms);
-      border-color: #80aad3;
-      outline: 0;
-      box-shadow:
-        var(--tblr-box-shadow-input),
-        0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+      &.v-field--focused {
+        color: var(--tblr-body-color);
+        background-color: var(--tblr-bg-forms);
+        border-color: #80aad3;
+        outline: 0;
+        box-shadow:
+          var(--tblr-box-shadow-input),
+          0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+      }
     }
-  }
 
-  & .v-field__input {
-    --v-field-input-padding-top: 0.45rem; //0.5625rem;
-    --v-field-input-padding-bottom: 0.45rem; //0.5625rem;
+    & .v-field__input {
+      --v-field-input-padding-top: 0.45rem; //0.5625rem;
+      --v-field-input-padding-bottom: 0.45rem; //0.5625rem;
 
-    padding-top: var(--v-field-input-padding-top);
-    padding-bottom: var(--v-field-input-padding-bottom);
-    min-height: unset;
-    font-size: 0.875rem;
-  }
+      padding-top: var(--v-field-input-padding-top);
+      padding-bottom: var(--v-field-input-padding-bottom);
+      min-height: unset;
+      font-size: 0.875rem;
+    }
 
-  & .v-input__details {
-    padding-inline: 5px !important;
-    padding-top: 7px;
-    min-height: 17px;
+    & .v-input__details {
+      padding-inline: 5px !important;
+      padding-top: 7px;
+      min-height: 17px;
 
-    & .v-messages__message {
-      color: var(--tblr-secondary);
-      font-size: 95%;
+      & .v-messages__message {
+        color: var(--tblr-secondary);
+        font-size: 95%;
+      }
     }
-  }
 
-  & .v-field--error {
-    border-color: var(--tblr-form-invalid-border-color);
-    padding-right: calc(1.4285714286em + 1.125rem);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right calc(0.3571428572em + 0.28125rem) center;
-    background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
-  }
-  &.v-input--error {
-    & .v-messages__message {
-      color: var(--tblr-form-invalid-color);
-      color: rgb(var(--v-theme-error));
+    & .v-field--error {
+      border-color: var(--tblr-form-invalid-border-color);
+      padding-right: calc(1.4285714286em + 1.125rem);
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right calc(0.3571428572em + 0.28125rem) center;
+      background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
+    }
+    &.v-input--error {
+      & .v-messages__message {
+        color: var(--tblr-form-invalid-color);
+        color: rgb(var(--v-theme-error));
+      }
     }
   }
 }
+
+//+-------------------------------------------------
+// v-select
+//+-------------------------------------------------
+
+.v-list-item--link::before {
+  background-color: red;
+}
+
+.theme--light.v-list-item:hover::before {
+  opacity: 0.64;
+}
diff --git a/assets/scss/partials/search.scss b/assets/scss/partials/search.scss
@@ -1,8 +1,30 @@
 .filters-bar {
+  & .btn {
+    font-size: 85.714285%;
+  }
+
   & .btn.disabled {
     background-color: var(--tblr-btn-bg);
     font-weight: 100;
     opacity: 0.7;
     border-color: var(--tblr-btn-border-color);
   }
 }
+
+.filters__source {
+  .btn {
+    background-color: transparent;
+    opacity: 0.7;
+  }
+
+  .btn.active {
+    border-color: var(--tblr-btn-hover-border-color);
+    color: inherit;
+    background-color: var(--tblr-btn-bg);
+
+    border-color: var(--tblr-btn-border-color);
+  }
+
+  .btn:hover {
+  }
+}
diff --git a/components/Icon.vue b/components/Icon.vue
@@ -1,7 +1,7 @@
 <template>
   <component
-    :is="theIcon"
     v-bind="$attrs"
+    :is="theIcon"
     :size="size"
     :stroke-width="width"
     :class="{ 'icon-pulse': loader }" />
@@ -16,7 +16,7 @@
  * @desc:    ...
  * -------------------------------------------
  * Created Date: 16th November 2023
- * Modified: Thu Jul 11 2024
+ * Modified: Tue 15 October 2024 - 14:49:40
  **/
 
 import * as TablerIcons from '@tabler/icons-vue'

diff --git a/components/account/sidebar.vue → components/account/Sidebar.vue b/components/account/sidebar.vue → components/account/Sidebar.vue
@@ -60,6 +60,13 @@
   </div>
 
   <ul class="nav nav-pills nav-vertical">
+    <li class="nav-item">
+      <NuxtLink to="/account/lists" class="nav-link">
+        <Icon class="me-2">Mist</Icon>
+        Lists
+      </NuxtLink>
+    </li>
+
     <li class="nav-item">
       <NuxtLink to="/account/states" class="nav-link">
         <Icon class="me-2">Background</Icon>

diff --git a/components/b/MenuStates.vue → components/b/StatesMenu.vue b/components/b/MenuStates.vue → components/b/StatesMenu.vue
diff --git a/components/b/btn.vue b/components/b/btn.vue
@@ -1,6 +1,5 @@
 <template>
   <!-- <pre v-if="false">
-  layout: {{ layout }}
   Attrs: {{ $attrs }}
   </pre> -->
   <component v-bind="$attrs" :is="component" :to="to" :class="colorAndVariant">
@@ -14,7 +13,7 @@
  * @desc:    https://preview.tabler.io/buttons.html
  * -------------------------------------------
  * Created Date: 25th October 2023
- * Modified: Wed Mar 06 2024
+ * Modified: Thu 17 October 2024 - 14:35:51
  **/
 import { NuxtLink } from '#components'