noogle: adjustments for light mode

This commit is contained in:
Believethehype 2024-01-31 10:13:31 +01:00
parent 908c29cf93
commit 336ea7a64f
3 changed files with 27 additions and 29 deletions

View File

@ -307,7 +307,7 @@ const submitHandler = async () => {
</script> </script>
<!-- font-thin bg-gradient-to-r from-white to-nostr bg-clip-text text-transparent -->
<template> <template>
@ -316,7 +316,7 @@ const submitHandler = async () => {
<br> <br>
<h1 class="text-7xl font-black tracking-wide">Noogle</h1> <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
<h1 class="text-7xl font-black tracking-wide">Image Generation</h1> <h1 class="text-7xl font-black tracking-wide">Image Generation</h1>
<h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin"> <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin ">
Generate Images, the decentralized way</h2> Generate Images, the decentralized way</h2>
<h3> <h3>
<br> <br>
@ -482,7 +482,7 @@ const submitHandler = async () => {
<style scoped> <style scoped>
.zap-Button{ .zap-Button{
@apply btn hover:bg-amber-400 border-amber-400 text-white; @apply btn hover:bg-amber-400 border-amber-400 text-accent-content;
bottom: 0; bottom: 0;
} }
@ -493,12 +493,11 @@ const submitHandler = async () => {
} }
.c-Input { .c-Input {
@apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900; @apply bg-base-200 text-accent dark:bg-black dark:text-white focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-accent-content transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
width: 350px; width: 350px;
height: 48px; height: 48px;
color: white;
background: black;
} }
.d-Input { .d-Input {

View File

@ -353,22 +353,21 @@ defineProps({
<img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" /> <img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
<br> <br>
<h1 class="text-7xl font-black tracking-wide">Noogle</h1> <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
<h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin"> <h2 class="text-base-200-content text-center tracking-wide text-2xl">
Search the Nostr with Data Vending Machines</h2> Search the Nostr with Data Vending Machines</h2>
<h3> <h3>
<br> <br>
<input class="c-Input" type="search" name="s" autofocus placeholder="Search..." v-model="message" @keyup.enter="send_search_request(message)" @keydown.enter="nextInput"> <input class="c-Input" type="search" name="s" autofocus placeholder="Search..." v-model="message" @keyup.enter="send_search_request(message)" @keydown.enter="nextInput">
<button class="v-Button" @click="send_search_request(message)">Search the Nostr</button> <button class="v-Button" @click="send_search_request(message)">Search the Nostr</button>
</h3> </h3>
<!-- <div class="collapse bg-base-200">
<input type="checkbox" /> <!-- <details class="collapse bg-base">
<div class="collapse-title text-xl font-medium"> <summary class="collapse-title font-thin bg ">Advanced Settings</summary>
Click me to show/hide content
</div>
<div class="collapse-content"> <div class="collapse-content">
<p>hello</p> <p>content</p>
</div> </div>
</div>--> </details> -->
</div> </div>
<div class="max-w-5xl relative space-y-3"> <div class="max-w-5xl relative space-y-3">
<div class="grid grid-cols-1 gap-6"> <div class="grid grid-cols-1 gap-6">
@ -405,12 +404,12 @@ defineProps({
} }
.c-Input { .c-Input {
@apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900; @apply bg-base-200 text-accent dark:bg-black dark:text-white focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-accent-content transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
width: 350px; width: 350px;
height: 48px; height: 48px;
color: white; //color: white;
background: black; //background: black;
} }
.logo { .logo {
@ -431,7 +430,7 @@ h3 {
} }
@media (min-width: 1024px) { @media (min-width: 1000px) {
.greetings h1, .greetings h1,
.greetings h3 { .greetings h3 {

View File

@ -94,32 +94,32 @@ const headers: Header[] = [
box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%); box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%);
} }
.customize-table { .customize-table {
width: auto;
--easy-table-border: 1px solid #000000; --easy-table-border: 1px solid #000000;
--easy-table-row-border: 1px solid #000000; --easy-table-row-border: 1px solid #000000;
--easy-table-header-font-size: 14px; --easy-table-header-font-size: 14px;
--easy-table-header-height: 50px; --easy-table-header-height: 50px;
--easy-table-header-font-color: #c1cad4; --easy-table-header-font-color: bg-accent;
--easy-table-header-background-color: #242424; --easy-table-header-background-color: bg-base;
--easy-table-header-item-padding: 10px 15px; --easy-table-header-item-padding: 10px 15px;
--easy-table-body-even-row-font-color: #fff; --easy-table-body-even-row-font-color: bg-accenet;
--easy-table-body-even-row-background-color: #242424; --easy-table-body-even-row-background-color: bg-base;
--easy-table-body-row-font-color: #c0c7d2; --easy-table-body-row-font-color: bg-accent;
--easy-table-body-row-background-color: #242424; --easy-table-body-row-background-color: bg-base;
--easy-table-body-row-height: 50px; --easy-table-body-row-height: 50px;
--easy-table-body-row-font-size: 14px; --easy-table-body-row-font-size: 14px;
--easy-table-body-row-hover-font-color: #FFFFFF; --easy-table-body-row-hover-font-color: bg-accent;
--easy-table-body-row-hover-background-color: #242424; --easy-table-body-row-hover-background-color: bg-base;
--easy-table-body-item-padding: 10px 15px; --easy-table-body-item-padding: 10px 15px;
--easy-table-footer-background-color: #242424; --easy-table-footer-background-color: bg-base;
--easy-table-footer-font-color: #c0c7d2; --easy-table-footer-font-color: bg-accent;
--easy-table-footer-font-size: 14px; --easy-table-footer-font-size: 14px;
--easy-table-footer-padding: 0px 10px; --easy-table-footer-padding: 0px 10px;
--easy-table-footer-height: 50px; --easy-table-footer-height: 50px;