feat: nopixel theme

swkeep · Sep 13, 2024 · d1996ee · d1996ee
1 parent 4dab1ae
commit d1996ee
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 6 deletions.
diff --git a/interactionDUI/dui_source/src/components/MenuOption.vue b/interactionDUI/dui_source/src/components/MenuOption.vue
@@ -3,8 +3,10 @@
     <div class="label" :class="labelClass" :style="computedItemStyle">
         <i v-if="item.icon" :class="[item.icon, 'label__icon']"></i>
         <span v-if="!isRadio" v-html="sanitizedHTML"></span>
-        <div v-if="isRadio">
-            {{ item.label }}
+        <div v-if="isRadio" class="label__container">
+            <div class="label__text">
+                {{ item.label }}
+            </div>
         </div>
     </div>
 </template>

diff --git a/interactionDUI/dui_source/src/themes.scss b/interactionDUI/dui_source/src/themes.scss
@@ -170,3 +170,176 @@
         }
     }
 }
+
+// do not look at this :(
+[data-theme='nopixel'] {
+    &[data-dark='true'] {
+        .menus-container {
+            background-color: transparent;
+        }
+
+        .indicator {
+            background-color: transparent;
+        }
+    }
+
+    .menus-container {
+        background-color: transparent;
+        border-radius: 0px;
+    }
+
+    .menu {
+        &__option {
+            color: #ffffff;
+            overflow: visible;
+
+            &__radio {
+                position: absolute;
+                appearance: none;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0.5em;
+                    left: -0.26em;
+                    width: 4.2em;
+                    height: 4.2em;
+                    border: 0.3em solid rgba(255, 255, 255, 0.5);
+                    border-radius: 50%;
+                    border-top-color: transparent;
+                    border-bottom-color: transparent;
+                    box-shadow: 0 0 0 0em rgba(255, 255, 255, 0.5);
+                }
+
+                &:checked + .label {
+                    background-color: transparent;
+
+                    &__radio {
+                        &::before {
+                            border: 0.3em solid rgba(255, 255, 255, 0.5);
+                        }
+                    }
+
+                    &:before {
+                        content: '';
+                        box-shadow: inset 0 0 0.4em 0.5em rgba(0, 255, 191, 0.5);
+                    }
+
+                    &:after {
+                        position: absolute;
+                        width: 0.5em;
+                        height: 0.5em;
+                        top: 1.05em;
+                        left: 0.81em;
+                        content: '';
+                        background-color: rgba(0, 255, 191, 0.5);
+                        border-radius: 50%;
+                        box-shadow: inset 0 0 0.4em 0.5em rgba(0, 255, 191, 0.5);
+                    }
+                }
+
+                &:checked + .label div {
+                    background-color: rgba(2, 147, 111, 0.9);
+                }
+            }
+
+            .label {
+                border-radius: 0px;
+                background-color: transparent;
+
+                &--radio:before {
+                    box-shadow: inset 0 0 0.4em 0.5em rgba(255, 255, 255, 0.5);
+                }
+
+                .label__container {
+                    position: relative;
+                    width: 80%;
+                    background-color: rgba(255, 255, 255, 0.3);
+                    padding: 0.5rem;
+                    margin-left: 1rem;
+                }
+            }
+
+            .label .label__container {
+                padding: 1rem;
+            }
+
+            .label .label__container {
+                &::after {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 20px;
+                    height: 20px;
+                    content: '';
+                    border-left: 3px solid rgb(255, 255, 255);
+                    border-top: 3px solid rgb(255, 255, 255);
+                }
+
+                &::before {
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    width: 20px;
+                    height: 20px;
+                    content: '';
+                    border-right: 3px solid rgb(255, 255, 255);
+                    border-bottom: 3px solid rgb(255, 255, 255);
+                }
+            }
+        }
+    }
+
+    .indicator {
+        border: none;
+        background: radial-gradient(circle, rgba(0, 82, 62, 1) 0%, rgba(3, 134, 103, 1) 55%);
+        border-radius: 3px;
+
+        &__inner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 80%;
+            height: 80%;
+        }
+
+        &__fill {
+            background-color: rgba(0, 255, 191, 0.4);
+            height: 50%;
+        }
+
+        &--success {
+            border-color: rgb(81, 255, 0) !important;
+        }
+
+        &--fail {
+            border-color: rgb(199, 37, 61) !important;
+        }
+
+        &--glow {
+            box-shadow: none;
+        }
+
+        &::after {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            content: '';
+            border-left: 3px solid rgb(255, 255, 255);
+            border-top: 3px solid rgb(255, 255, 255);
+        }
+
+        &::before {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 20px;
+            height: 20px;
+            content: '';
+            border-right: 3px solid rgb(255, 255, 255);
+            border-bottom: 3px solid rgb(255, 255, 255);
+        }
+    }
+}
diff --git a/interactionDUI/dui_source/src/types/mockData.ts b/interactionDUI/dui_source/src/types/mockData.ts
@@ -1,7 +1,7 @@
 export const menuMockData = [
     {
         selected: 1,
-        theme: 'default',
+        theme: 'nopixel',
         indicator: {
             prompt: 'Enter',
             glow: true,

diff --git a/interactionDUI/dui_source/src/views/ActionPromptIndicator.vue b/interactionDUI/dui_source/src/views/ActionPromptIndicator.vue
@@ -82,10 +82,12 @@ onUnmounted(() => {
                 'indicator--fail': state.status === 'fail',
             }"
         >
-            <div class="indicator__text" :class="{ 'indicator__text--mix-blend-mode': state.onHold }">
-                {{ state.content }}
+            <div class="indicator__inner">
+                <div class="indicator__text" :class="{ 'indicator__text--mix-blend-mode': state.onHold }">
+                    {{ state.content }}
+                </div>
+                <div class="indicator__fill" :style="{ width: state.fill + '%' }"></div>
             </div>
-            <div class="indicator__fill" :style="{ width: state.fill + '%' }"></div>
         </div>
     </Transition>
 </template>