@mjsz-vbr-elements/shared 2.31.2 → 2.33.0

package/assets/css/components/error-notice.css

@@ -0,0 +1,26 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-color-error-notice-bg-color: color-mix(in oklab, var(--mvw-color-error) 10%, transparent);
+    --mvw-color-error-notice-border-color: color-mix(in oklab, var(--mvw-color-error) 25%, transparent);
+    --mvw-color-error-notice-color: var(--mvw-color-error);
+  }
+}
+
+@layer components {
+  :where(.error-notice) {
+    display: flex;
+    align-items: center;
+    justify-items: flex-start;
+    gap: 15px;
+    margin: 10px 0;
+    padding: 10px 20px;
+    background-color: var(--mvw-color-error-notice-bg-color);
+    color: var(--mvw-color-error-notice-color);
+    border: 1px solid var(--mvw-color-error-notice-border-color);
+    border-radius: var(--radius-2);
+
+    button {
+      text-decoration: underline;
+    }
+  }
+}

package/assets/css/components/floating-content.css

@@ -0,0 +1,74 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-tooltip-font-size: var(--font-size-200);
+    --mvw-tooltip-color: light-dark(white, black);
+    --mvw-tooltip-bg-color: light-dark(black, white);
+    --mvw-floating-content-bg-color: light-dark(white, var(--mvw-color-primary-800));
+  }
+}
+
+@layer components {
+  :where(.floating-content) {
+    &.is-tooltip {
+      background-color: var(--mvw-tooltip-bg-color);
+      color: var(--mvw-tooltip-color);
+      font-weight: bold;
+      padding: var(--size-4) var(--size-8);
+      border-radius: var(--radius-2);
+      font-size: var(--mvw-tooltip-font-size);
+      white-space: nowrap;
+      pointer-events: none;
+
+      .is-arrow {
+        background-color: var(--mvw-tooltip-bg-color);
+      }
+    }
+
+    &.is-content {
+      background-color: var(--mvw-floating-content-bg-color);
+      border-radius: var(--radius-2);
+      box-shadow: var(--shadow-6);
+
+      .is-arrow {
+        background-color: var(--mvw-floating-content-bg-color);
+      }
+    }
+
+    .is-arrow {
+      width: 8px;
+      height: 8px;
+      transform: rotate(45deg);
+
+      [data-placement^='top'] & {
+        bottom: -4px;
+        clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%, 0 80%);
+      }
+
+      [data-placement^='bottom'] & {
+        top: -4px;
+        clip-path: polygon(100% 0, 0 0, 0 100%);
+      }
+
+      [data-placement^='left'] & {
+        right: -4px;
+        clip-path: polygon(100% 0, 0 0, 100% 100%);
+      }
+
+      [data-placement^='right'] & {
+        left: -4px;
+        clip-path: polygon(100% 0, 0 0, 0 100%);
+      }
+    }
+  }
+
+  .transition-fade-enter-active,
+  .transition-fade-leave-active {
+    transition: all 0.7s var(--ease-spring-1);
+  }
+
+  .transition-fade-enter-from,
+  .transition-fade-leave-to {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+}

package/assets/css/components/form-field.css

@@ -0,0 +1,74 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-form-label-font-size: var(--font-size-200);
+    --mvw-form-label-color: var(--mvw-text-muted);
+
+    --mvw-input-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+    --mvw-input-font-size: var(--font-size-400);
+    --mvw-input-border-color: light-dark(var(--mvw-color-primary-300), var(--mvw-color-primary-700));
+    --mvw-input-bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
+    --mvw-input-border-radius: var(--radius-2);
+  }
+}
+
+@layer components {
+  :where(.form-field) {
+    --_border-color: var(--mvw-input-border-color);
+    --_bg-color: var(--mvw-input-bg-color);
+    --_height: var(--size-32);
+    --_color: var(--mvw-input-color);
+    --_field-padding-block: var(--size-6);
+    --_field-padding-inline: var(--size-10);
+
+    contain: layout;
+    position: relative;
+    color: var(--mvw-text-default);
+
+    & pre,
+    & input,
+    & select {
+      appearance: none;
+      block-size: var(--_height);
+      min-inline-size: 0;
+      font-family: inherit;
+      font-size: var(--mvw-input-font-size);
+      color: var(--_color);
+      line-height: var(--font-lineheight-100);
+      background-color: var(--_bg-color);
+      border: var(--field-border-width, 1px) solid var(--_border-color);
+      border-radius: var(--mvw-input-border-radius);
+      padding: var(--_field-padding-block) var(--_field-padding-inline);
+    }
+
+    & select {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right var(--size-6) center;
+      background-size: 16px 12px;
+      padding-inline-end: var(--size-24);
+    }
+
+    & pre {
+      line-height: var(--font-lineheight-500);
+    }
+
+    & input::placeholder {
+      color: rgb(from var(--_color) r g b / 50%);
+    }
+
+    label {
+      display: block;
+      font-size: var(--mvw-form-label-font-size);
+      line-height: var(--font-lineheight-700);
+      color: var(--mvw-form-label-color);
+      text-transform: uppercase;
+      font-weight: 700;
+    }
+
+    &.full-width {
+      :where(& input, & select) {
+        inline-size: 100%;
+      }
+    }
+  }
+}

package/assets/css/components/game-center-game-data.css

@@ -0,0 +1,91 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-gamecenter-result-size: calc(var(--size-16) * 6);
+    --mvw-gamecenter-result-weight: 700;
+    --mvw-gamecenter-result-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+    --mvw-gamecenter-periodresults-color: var(--mvw-text-dimmed);
+    --mvw-gamecenter-periodresults-size: var(--font-size-700);
+    --mvw-gamecenter-teamname-size: var(--font-size-700);
+    --mvw-gamecenter-teamname-color: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-100));
+    --mvw-gamecenter-teamname-weight: 700;
+    --mvw-gamecenter-gamestatus-color: var(--mvw-text-muted);
+    --mvw-gamecenter-gamestatus-size: var(--font-size-400);
+  }
+}
+
+@layer components {
+  :where(.gamecenter-game-data) {
+    margin-bottom: calc(var(--size-16) * 2);
+    text-align: center;
+
+    .is-teams-and-results {
+      display: grid;
+      justify-items: center;
+      align-items: end;
+
+      @media (width > 500px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    .game-result {
+      color: var(--mvw-gamecenter-result-color);
+      font-weight: var(--mvw-gamecenter-result-weight);
+      font-size: var(--mvw-gamecenter-result-size);
+      line-height: var(--mvw-gamecenter-result-size);
+
+      &.live {
+        color: var(--mvw-color-live);
+      }
+    }
+
+    .is-period-results {
+      color: var(--mvw-gamecenter-periodresults-color);
+      font-size: var(--mvw-gamecenter-periodresults-size);
+      font-weight: 500;
+    }
+
+    .is-game-status {
+      color: var(--mvw-gamecenter-gamestatus-color);
+      font-size: var(--mvw-gamecenter-gamestatus-size);
+      line-height: var(--font-lineheight-600);
+      text-transform: uppercase;
+    }
+
+    .is-team-name {
+      padding: var(--size-8) 0;
+      color: var(--mvw-gamecenter-teamname-color);
+      font-weight: var(--mvw-gamecenter-teamname-weight);
+      font-size: var(--mvw-gamecenter-teamname-size);
+    }
+
+    .is-external-contents {
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      a {
+        display: flex;
+        align-items: center;
+        /* font-size: var(--mvw-gamecenter-local-gamedate-size); */
+
+        &:after {
+          content: '/';
+          margin: 0 5px;
+        }
+
+        &:last-of-type:after {
+          content: '';
+        }
+      }
+
+      .is-icon {
+        margin-right: 5px;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+}