diff --git a/src/app.css b/src/app.css index ea2b35d..0e70036 100644 --- a/src/app.css +++ b/src/app.css @@ -1,8 +1,56 @@ @import 'tailwindcss'; +:root +{ + --primary: #f3f4ff; + --secondary: white; + --hover: #f4f5fa; + --text-primary: #303037; + --text-secondary: #9b9aa7; + --point-color: #3131ff1e; + --shadow-light: #00008036; + --shadow-medium: #00008041; + --shadow-dark: #00022d; + --popup-shadow: #01012640; + --popup-bg-overlay: #01012629; + --input-border: #dbdbe8; + --input-border-focus: rgb(173, 173, 194); + --input-bg: #fbfbfd; + --input-text: rgb(77, 77, 92); + --input-placeholder: rgb(173, 173, 194); + --disabled-bg: #f0f0f7; + --disabled-border: #d3d4e8; + --disabled-text: #9b9bb7; +} + +.dark +{ + --primary: oklch(0.141 0.005 285.823); + --secondary: oklch(0.141 0.005 285.823); + --hover: oklch(0.18 0.01 285.823); + --text-primary: oklch(0.985 0 0); + --text-secondary: oklch(0.7 0 0); + --point-color: oklch(0.25 0.05 285.823); + --shadow-light: rgba(49, 49, 255, 0.2); + --shadow-medium: rgba(49, 49, 255, 0.25); + --shadow-dark: rgba(0, 2, 45, 0.8); + --popup-shadow: rgba(0, 0, 0, 0.5); + --popup-bg-overlay: rgba(0, 0, 0, 0.4); + --input-border: oklch(0.3 0.01 285.823); + --input-border-focus: oklch(0.4 0.02 285.823); + --input-bg: oklch(0.16 0.005 285.823); + --input-text: oklch(0.85 0 0); + --input-placeholder: oklch(0.5 0 0); + --disabled-bg: oklch(0.2 0.005 285.823); + --disabled-border: oklch(0.25 0.01 285.823); + --disabled-text: oklch(0.5 0 0); +} + html, body { - background-color: #f3f4ff; + background-color: var(--primary); + color: var(--text-primary); + transition: background-color 0.3s ease, color 0.3s ease; } *:focus @@ -78,3 +126,24 @@ html, body { @apply flex flex-col justify-center items-center; } + +.bg-card +{ + background-color: white; +} + +.dark .bg-card +{ + background-color: var(--secondary); +} + +input, textarea, select +{ + background-color: var(--secondary); + color: var(--text-primary); +} + +input::placeholder, textarea::placeholder +{ + color: var(--text-secondary); +} diff --git a/src/lib/display/buttons/default.svelte b/src/lib/display/buttons/default.svelte index fbca94d..d125539 100644 --- a/src/lib/display/buttons/default.svelte +++ b/src/lib/display/buttons/default.svelte @@ -96,7 +96,7 @@ .download-button, .edit-button-container { - filter: drop-shadow(0em 0.1em 1.4em #00008041); + filter: drop-shadow(0em 0.1em 1.4em var(--shadow-medium)); transform: translateZ(0); } @@ -149,7 +149,7 @@ display: none; left: 50%; top: 50%; - filter: drop-shadow(0 0.1em 1em #00008036); + filter: drop-shadow(0 0.1em 1em var(--shadow-light)); transform: translateZ(0); z-index: 100; } diff --git a/src/lib/display/buttons/edit.svelte b/src/lib/display/buttons/edit.svelte index 49f43ad..83fef41 100644 --- a/src/lib/display/buttons/edit.svelte +++ b/src/lib/display/buttons/edit.svelte @@ -45,7 +45,7 @@ .button-container { - filter: drop-shadow(0em 0.1em 1.4em #00008041); + filter: drop-shadow(0em 0.1em 1.4em var(--shadow-medium)); transform: translateZ(0); } diff --git a/src/lib/display/details/info_bubble.svelte b/src/lib/display/details/info_bubble.svelte index 7ca885c..0d333cf 100644 --- a/src/lib/display/details/info_bubble.svelte +++ b/src/lib/display/details/info_bubble.svelte @@ -74,12 +74,12 @@
{#if text !== undefined} @@ -100,7 +100,7 @@ diff --git a/src/lib/nav-links.svelte b/src/lib/nav-links.svelte new file mode 100644 index 0000000..9c8e5c6 --- /dev/null +++ b/src/lib/nav-links.svelte @@ -0,0 +1,48 @@ + + +
+ + + {@html Random} + + + {@html Home} + +
+ + diff --git a/src/lib/statistics/bars.svelte b/src/lib/statistics/bars.svelte index 96d5b51..c3e4dd7 100644 --- a/src/lib/statistics/bars.svelte +++ b/src/lib/statistics/bars.svelte @@ -1,5 +1,4 @@ + + + {#if dark_mode} + + {@html Sun} + {:else} + + {@html Moon} + {/if} + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d77bdaf..3be6274 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -7,6 +7,7 @@ import Title from '$lib/svgs/title.svg'; import { constants as C } from '$lib/utils'; import { onMount } from 'svelte'; + import ThemeToggle from '$lib/theme-toggle.svelte'; const { data }: PageProps = $props(); @@ -103,10 +104,10 @@ > -
+
popup?.show(title)} bind:this={search_element}/>
@@ -129,6 +130,7 @@ Statistics +
@@ -179,7 +181,7 @@ .input-container { - filter: drop-shadow(0em 0em 3em #00008036); + filter: drop-shadow(0em 0em 3em var(--shadow-light)); transform: translateZ(0); } @@ -196,7 +198,7 @@ input::placeholder { - color: #9b9aa7; + color: var(--text-secondary); pointer-events: none; user-select: none; -moz-user-select: none; @@ -238,14 +240,14 @@ { gap: 0.5em; padding: 0.7em 1.2em; - background-color: white; - box-shadow: 0em 0.1em 2em #00008040; + background-color: var(--secondary); + box-shadow: 0em 0.1em 2em var(--shadow-medium); transition: background-color 0.2s ease-in-out; } .buttons a:hover button { - background-color: #f4f5fa; + background-color: var(--hover); } .buttons button .emoji @@ -260,7 +262,7 @@ font-weight: 550; line-height: 1.25em; text-wrap: nowrap; - color: #303037; + color: var(--text-primary); } .links @@ -274,7 +276,7 @@ { padding: 0.5em 0.5em; cursor: pointer; - color: #303037; + color: var(--text-primary); font-family: Satoshi-Variable, sans-serif; font-weight: 475; line-height: 1.5em; diff --git a/src/routes/maps/+page.svelte b/src/routes/maps/+page.svelte index dc64dd2..a67e9a5 100644 --- a/src/routes/maps/+page.svelte +++ b/src/routes/maps/+page.svelte @@ -2,8 +2,7 @@ import type { PageProps } from './$types'; import Background from '$lib/list/background.svelte'; import Maps from '$lib/list/maps.svelte'; - import Home from '$lib/svgs/home.svg'; - import Random from '$lib/svgs/random.svg'; + import NavLinks from '$lib/nav-links.svelte'; import { constants as C } from '$lib/utils'; const { data }: PageProps = $props(); @@ -53,24 +52,17 @@ -
+
- {@render emoji('📖')} + {@render emoji('📖')}

All maps

-
- - Random map - - - Home - -
+
{#each data.maps_structure as node} @@ -101,7 +93,7 @@ font-weight: 550; line-height: 1.25em; text-wrap: nowrap; - color: #303037; + color: var(--text-primary); gap: 0.3em; margin-top: 0.5em; margin-bottom: -0.2em; @@ -112,32 +104,6 @@ gap: 0.3em; } - .links - { - gap: 0.6em; - margin-top: -0.2em; - filter: drop-shadow(0em 0.1em 0.5em #00008036); - transform: translateZ(0); - } - - .links img - { - width: 1.9em; - height: 1.9em; - transition: transform 0.2s ease-in-out; - } - - .links img:hover - { - transform: scale(1.06); - } - - .links img:active - { - transition: none; - transform: scale(1); - } - @media screen and (max-width: 375px) { .main diff --git a/src/routes/maps/[map]/+page.svelte b/src/routes/maps/[map]/+page.svelte index 9ba70dc..4761039 100644 --- a/src/routes/maps/[map]/+page.svelte +++ b/src/routes/maps/[map]/+page.svelte @@ -8,12 +8,13 @@ import type { GraphPoint } from '$lib/display/graph/types'; import Overview from '$lib/display/overview.svelte'; import Title from '$lib/display/title.svelte'; - import Home from '$lib/svgs/home.svg'; + import Home from '$lib/svgs/home.svg?raw'; import { Edit, paper_to_datapaper } from '$lib/types/paper'; import { constants as C } from '$lib/utils'; import cloneDeep from 'clone-deep'; import deepEqual from 'deep-equal'; import { onMount } from 'svelte'; + import ThemeToggle from '$lib/theme-toggle.svelte'; const { data }: PageProps = $props(); @@ -176,8 +177,9 @@
</div> - <a href="/"> - <img src={Home} alt="Home" title="Home" class="home relative img-unselectable"> + <ThemeToggle class="w-[52.89px] h-[52.89px]"/> + <a href="/" title="Home" class="w-[52.89px] h-[52.89px]"> + {@html Home} </a> </div> <Overview @@ -226,25 +228,35 @@ .title-container { gap: 0.65em; - filter: drop-shadow(0em 0.1em 0.75em #00008036); + filter: drop-shadow(0em 0.1em 0.75em var(--shadow-light)); transform: translateZ(0); } - .home + .title-container a { - min-width: 3.15em; - min-height: 3.15em; - width: 3.15em; - height: 3.15em; + display: flex; + align-items: center; + justify-content: center; + } + + .title-container a :global(svg) + { + width: 100%; + height: 100%; transition: transform 0.2s ease-in-out; } - .home:hover + .title-container a :global(svg circle:first-child) + { + fill: var(--primary); + } + + .title-container a:hover :global(svg) { transform: scale(1.06); } - .home:active + .title-container a:active :global(svg) { transition: none; transform: scale(1); @@ -281,7 +293,7 @@ align-items: end; } - .title-component:hover + a .home + .title-component:hover + .theme-toggle + a :global(svg) { opacity: 0; } diff --git a/src/routes/statistics/+page.svelte b/src/routes/statistics/+page.svelte index a4ae247..9667f53 100644 --- a/src/routes/statistics/+page.svelte +++ b/src/routes/statistics/+page.svelte @@ -8,8 +8,7 @@ import Bars from '$lib/statistics/bars.svelte'; import Categories from '$lib/statistics/categories.svelte'; import Scatter from '$lib/statistics/scatter.svelte'; - import Home from '$lib/svgs/home.svg'; - import Random from '$lib/svgs/random.svg'; + import NavLinks from '$lib/nav-links.svelte'; import { Blinding, ConflictOfInterest, MissingReason, type Paper, PaperType, ReviewedPapersBlinding, ReviewedPapersType, ReviewType } from '$lib/types/paper'; import { constants as C } from '$lib/utils'; @@ -88,7 +87,7 @@ const count = paper.review.count; const reviews = paper.review.reviews ? ' (reviews)' : ''; - const estimate = paper.review.estimate ? '≈' : ''; + const estimate = paper.review.estimate ? '≈' : ''; const subpart = paper.review.subpart ? ' (minor topic)' : ''; return `${estimate}${count}${reviews}${subpart}`; @@ -129,24 +128,17 @@ <meta name="twitter:url" content={page_url}/> </svelte:head> -<div class="page-container absolute flex flex-col justify-start items-center w-full h-full overflow-x-hidden bg-[#f3f4ff]"> +<div class="page-container absolute flex flex-col justify-start items-center w-full h-full overflow-x-hidden" style="background-color: var(--primary);"> <div class="absolute z-0"> <Background {width} {height} {page_height}/> </div> <div class="main flex-center-col z-100" bind:clientHeight={page_height}> <div class="header w-full flex flex-row justify-between items-start"> <div class="title flex-center-row"> - {@render emoji('📊')} + {@render emoji('📊')} <h1>Statistics</h1> </div> - <div class="links flex-center-row"> - <a href="/maps/random"> - <img src={Random} alt="Random map" title="Random map" class="img-unselectable"/> - </a> - <a href="/"> - <img src={Home} alt="Home" title="Home" class="img-unselectable"/> - </a> - </div> + <NavLinks /> </div> <div class="main-stats flex flex-row flex-wrap justify-start items-start w-full"> {#each main_stats as stat} @@ -422,7 +414,7 @@ font-weight: 600; line-height: 1.25em; text-wrap: nowrap; - color: #303037; + color: var(--text-primary); } .main-stat @@ -457,7 +449,7 @@ font-weight: 550; line-height: 1.25em; text-wrap: nowrap; - color: #303037; + color: var(--text-primary); gap: 0.3em; margin-top: 0.5em; margin-bottom: -0.2em; @@ -468,32 +460,6 @@ gap: 0.3em; } - .links - { - gap: 0.6em; - margin-top: -0.2em; - filter: drop-shadow(0em 0.1em 0.5em #00008036); - transform: translateZ(0); - } - - .links img - { - width: 1.9em; - height: 1.9em; - transition: transform 0.2s ease-in-out; - } - - .links img:hover - { - transform: scale(1.06); - } - - .links img:active - { - transition: none; - transform: scale(1); - } - @media screen and (max-width: 375px) { .main