styles: optimize the page contrast

Co-authored-by: asukaminato0721 [email protected]
KUN1007 · Oct 15, 2024 · 00437c2 · 00437c2
1 parent 73ddbf3
commit 00437c2
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 114 deletions.
diff --git a/components/galgame/comment/Panel.vue b/components/galgame/comment/Panel.vue
@@ -46,7 +46,7 @@ const handlePublishComment = async () => {
 
 <template>
   <div class="panel">
-    <textarea
+    <KunTextarea
       placeholder="「恋だよ、恋。私に出来なかったことのひとつを、君に代わりにかなえてもらう」"
       v-model="content"
       name="comment"
@@ -67,22 +67,6 @@ const handlePublishComment = async () => {
 .panel {
   margin-bottom: 17px;
 
-  textarea {
-    color: var(--kungalgame-font-color-3);
-    margin-bottom: 10px;
-    width: 100%;
-    border: 1px solid var(--kungalgame-trans-blue-2);
-    background-color: transparent;
-    border-radius: 10px;
-    padding: 5px;
-    resize: vertical;
-
-    &:focus {
-      border: 1px solid var(--kungalgame-blue-5);
-      background-color: var(--kungalgame-trans-blue-0);
-    }
-  }
-
   .footer {
     width: 100%;
     display: flex;

diff --git a/components/home/Loader.vue b/components/home/Loader.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <KunDivider margin="30px" padding="0 17px">
+  <KunDivider margin="30px" color="var(--kungalgame-gray-4)">
     <slot />
     <span v-if="status !== 'pending'" @click="pageNumber++" class="loader">
       {{ $t('home.load') }}

diff --git a/components/home/galgame/Container.vue b/components/home/galgame/Container.vue
@@ -33,7 +33,7 @@ const handleClose = () => {
     <div v-for="(galgame, index) in GalgameData" :key="index">
       <HomeGalgameCard :galgame="galgame" />
 
-      <KunDivider margin="0 7px" />
+      <KunDivider margin="0 7px" color="var(--kungalgame-trans-blue-1)" />
     </div>
   </div>
 

diff --git a/components/home/resource/Link.vue b/components/home/resource/Link.vue
@@ -98,11 +98,11 @@ const { rewriteResourceId } = storeToRefs(useTempGalgameResourceStore())
             },
             position: 'bottom'
           }"
-        ></span>
+        />
       </div>
     </div>
 
-    <KunDivider margin="0 0 17px 0" />
+    <KunDivider margin="0 0 17px 0" color="var(--kungalgame-trans-blue-1)" />
   </div>
 </template>
 

diff --git a/components/home/topic/Card.vue b/components/home/topic/Card.vue
@@ -9,17 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLinkLocale
-    class="topic"
-    :class="hourDiff(topic.upvoteTime, 10) ? 'kungalgame-comet-surround' : ''"
-    :to="`/topic/${topic.tid}`"
-    v-kun-gradient
-  >
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-
+  <NuxtLinkLocale class="topic" :to="`/topic/${topic.tid}`" v-kun-gradient>
     <div class="title">
       <span>{{ topic.title }}</span>
       <span>{{ formatTimeDifference(topic.time, locale) }}</span>
@@ -49,12 +39,14 @@ defineProps<{
         </span>
       </div>
     </div>
+
+    <div v-if="hourDiff(topic.upvoteTime, 10)" class="featured">
+      <Icon name="lucide:sparkles" />
+    </div>
   </NuxtLinkLocale>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/effect/effect.scss';
-
 .topic {
   width: 100%;
   height: 100%;
@@ -64,10 +56,7 @@ defineProps<{
   padding: 10px;
   padding-bottom: 0;
   border-radius: 10px;
-}
-
-.kungalgame-comet-surround {
-  border: 2px solid var(--kungalgame-red-4);
+  position: relative;
 }
 
 .title {
@@ -126,6 +115,14 @@ defineProps<{
   }
 }
 
+.featured {
+  position: absolute;
+  right: 10px;
+  font-size: 36px;
+  color: var(--kungalgame-trans-blue-2);
+  @include kun-center;
+}
+
 @media (max-width: 700px) {
   .tags {
     display: none;

diff --git a/components/home/topic/Container.vue b/components/home/topic/Container.vue
@@ -34,7 +34,7 @@ const handleClose = () => {
     <div v-for="(topic, index) in topicData" :key="index">
       <HomeTopicCard :topic="topic" />
 
-      <KunDivider margin="0 7px" />
+      <KunDivider margin="0 7px" color="var(--kungalgame-trans-blue-1)" />
     </div>
   </div>
 

diff --git a/components/kun/Divider.vue b/components/kun/Divider.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
-const props = defineProps<{
-  margin?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    margin?: string
+    color?: string
+  }>(),
+  {
+    margin: '33px 0',
+    color: 'var(--kungalgame-trans-blue-2)'
+  }
+)
 
-const margin = computed(() => props.margin ?? '33px 0')
+const { margin, color } = toRefs(props)
 </script>
 
 <template>
@@ -24,7 +31,7 @@ const margin = computed(() => props.margin ?? '33px 0')
   margin: v-bind(margin);
 
   &::before {
-    color: var(--kungalgame-trans-blue-2);
+    color: v-bind(color);
     content: '';
     position: relative;
     width: 50%;
@@ -35,7 +42,7 @@ const margin = computed(() => props.margin ?? '33px 0')
   }
 
   &::after {
-    color: var(--kungalgame-trans-blue-2);
+    color: v-bind(color);
     content: '';
     position: relative;
     width: 50%;

diff --git a/components/kun/Textarea.vue b/components/kun/Textarea.vue
@@ -38,6 +38,7 @@ withDefaults(defineProps<{ placeholder: string }>(), {
     &:focus {
       border: 1px solid var(--kungalgame-blue-5);
       background-color: var(--kungalgame-trans-blue-0);
+      box-shadow: 0 0 0 0.5px var(--kungalgame-blue-5);
     }
   }
 

diff --git a/components/report/Report.vue b/components/report/Report.vue
@@ -73,7 +73,7 @@ const handleSubmitReport = async () => {
     <div>
       <span class="title">{{ t('report.reason.title') }}</span>
       <div class="textarea-container">
-        <textarea
+        <KunTextarea
           name="comment"
           :placeholder="t('report.reason.placeholder')"
           rows="10"

diff --git a/components/topic/Master.vue b/components/topic/Master.vue
@@ -89,9 +89,7 @@ const loliStatus = computed(() => {
             position: 'bottom'
           }"
         >
-          <span class="icon"
-            ><Icon class="icon" name="lucide:mouse-pointer-click"
-          /></span>
+          <Icon class="icon" name="lucide:mouse-pointer-click" />
           {{ topic.views }}
         </span>
 
@@ -223,8 +221,7 @@ const loliStatus = computed(() => {
       }
 
       &:nth-child(2) {
-        width: 50px;
-        padding: 1px;
+        padding: 1px 4px;
         color: var(--kungalgame-white);
         display: flex;
         justify-content: center;
@@ -236,7 +233,7 @@ const loliStatus = computed(() => {
   .line {
     width: 100%;
     height: 1px;
-    background-color: var(--kungalgame-blue-5);
+    background-color: var(--kungalgame-trans-blue-2);
   }
 
   .views {

diff --git a/components/topic/comment/Panel.vue b/components/topic/comment/Panel.vue
@@ -61,26 +61,21 @@ const handlePublishComment = async () => {
         <span>{{ toUsername }}</span>
       </div>
       <div class="confirm">
-        <button @click="handlePublishComment">
+        <KunButton @click="handlePublishComment">
           {{ $t('topic.content.publish') }}
-        </button>
-        <button @click="isShowPanel = false">
+        </KunButton>
+        <KunButton @click="isShowPanel = false">
           {{ $t('topic.content.close') }}
-        </button>
+        </KunButton>
       </div>
     </div>
 
-    <div class="container">
-      <textarea
-        name="comment"
-        :placeholder="`${$t('topic.content.hint')}`"
-        rows="5"
-        v-model="commentValue"
-      >
-      </textarea>
-
-      <div class="count">{{ commentValue.length }}</div>
-    </div>
+    <KunTextarea
+      name="comment"
+      :placeholder="`${$t('topic.content.hint')}`"
+      rows="5"
+      v-model="commentValue"
+    />
   </div>
 </template>
 
@@ -129,53 +124,10 @@ const handlePublishComment = async () => {
   justify-content: center;
   align-items: center;
 
-  button {
-    cursor: pointer;
-    color: var(--kungalgame-blue-5);
-    padding: 5px 10px;
-    border: 1px solid var(--kungalgame-blue-5);
-    border-radius: 5px;
-    background-color: transparent;
-
-    &:hover {
-      background-color: var(--kungalgame-blue-5);
-      color: var(--kungalgame-white);
-    }
-
-    &:nth-child(2) {
-      margin-left: 5px;
+  .kun-button {
+    &:first-child {
+      margin-right: 8px;
     }
   }
 }
-
-.container {
-  position: relative;
-  display: flex;
-
-  textarea {
-    color: var(--kungalgame-font-color-3);
-    flex: 1;
-    margin-bottom: 20px;
-    width: 100%;
-    border: 1px solid var(--kungalgame-blue-5);
-    background-color: transparent;
-    border-radius: 5px;
-    padding: 5px;
-
-    &::placeholder {
-      color: var(--kungalgame-font-color-1);
-    }
-
-    &:focus {
-      border: 1px solid var(--kungalgame-pink-3);
-    }
-  }
-}
-
-.count {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  color: var(--kungalgame-font-color-1);
-}
 </style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.18.34",
+  "version": "2.18.35",
   "packageManager": "[email protected]",
   "private": true,
   "scripts": {