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>
<!-- font-thin bg-gradient-to-r from-white to-nostr bg-clip-text text-transparent -->
<template>
@ -316,7 +316,7 @@ const submitHandler = async () => {
<br>
<h1 class="text-7xl font-black tracking-wide">Noogle</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>
<h3>
<br>
@ -482,7 +482,7 @@ const submitHandler = async () => {
<style scoped>
.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;
}
@ -493,12 +493,11 @@ const submitHandler = async () => {
}
.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;
height: 48px;
color: white;
background: black;
}
.d-Input {

View File

@ -353,22 +353,21 @@ defineProps({
<img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
<br>
<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>
<h3>
<br>
<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>
</h3>
<!-- <div class="collapse bg-base-200">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
Click me to show/hide content
</div>
<!-- <details class="collapse bg-base">
<summary class="collapse-title font-thin bg ">Advanced Settings</summary>
<div class="collapse-content">
<p>hello</p>
<p>content</p>
</div>
</div>-->
</details> -->
</div>
<div class="max-w-5xl relative space-y-3">
<div class="grid grid-cols-1 gap-6">
@ -405,12 +404,12 @@ defineProps({
}
.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;
height: 48px;
color: white;
background: black;
//color: white;
//background: black;
}
.logo {
@ -431,7 +430,7 @@ h3 {
}
@media (min-width: 1024px) {
@media (min-width: 1000px) {
.greetings h1,
.greetings h3 {

View File

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