feat: selection color

YurierDept · Jan 24, 2024 · f6321b8 · f6321b8
1 parent 7919fdc
commit f6321b8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -7,3 +7,42 @@
     </main>
   </div>
 </template>
+
+<style>
+/* Global variables */
+:root {
+  --c-selection-color: inherit;
+  --c-selection-bg: #cce2ff;
+  --c-input-selection-color: rgba(0, 0, 0, 0.87);
+  --c-input-selection-bg: #cce2ff;
+}
+
+/* selection */
+::-webkit-selection {
+  color: var(--c-selection-color);
+  background-color: var(--c-selection-bg);
+}
+::-moz-selection {
+  color: var(--c-selection-color);
+  background-color: var(--c-selection-bg);
+}
+::selection {
+  color: var(--c-selection-color);
+  background-color: var(--c-selection-bg);
+}
+input::-webkit-selection,
+textarea::-webkit-selection {
+  color: var(--c-input-selection-color);
+  background-color: var(--c-input-selection-bg);
+}
+input::-moz-selection,
+textarea::-moz-selection {
+  color: var(--c-input-selection-color);
+  background-color: var(--c-input-selection-bg);
+}
+input::selection,
+textarea::selection {
+  color: var(--c-input-selection-color);
+  background-color: var(--c-input-selection-bg);
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -35,7 +35,7 @@ if (route.query.q) {
 
 <template>
   <div class="main">
-    <div class="mt-10">
+    <div class="mt-10 select-none">
       <span class="text-4xl font-bold">Get Bonus</span>
     </div>
     <div class="mt-8 flex gap-4">