bump bulma

NMSCD · Jul 16, 2024 · 4fb9b92 · 4fb9b92
1 parent c36aab3
commit 4fb9b92
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
 <body>
 	<div class="container">
 		<header>
-			<nav>
+			<nav class="my-4">
 				<a href=".." title="Other pages">&larr; View other pages</a>
 			</nav>
-			<h1 class="title is-3">Base Relocator</h1>
+			<h1 class="has-text-centered title is-3">Base Relocator</h1>
 		</header>
 		<main>
 			<section id="input">
@@ -53,4 +53,4 @@ <h2 class="title is-5">Log</h3>
 	</div>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
     "vite": "^5.3.4"
   },
   "dependencies": {
-    "bulma": "^0.9.4"
+    "bulma": "^1.0.1"
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,7 @@
 import 'bulma';
 import './styles.css';
 
+const outlinedClassName = 'is-outlined';
 const timeoutDuration = 1500;
 
 const baseData: {
@@ -30,7 +31,7 @@ const baseData: {
 
     searchInput.type = 'text';
     searchInput.placeholder = '🔎 Search';
-    searchInput.classList.add('input');
+    searchInput.classList.add('input', 'my-4');
     searchInput.addEventListener('input', function () {
       filterList(this as unknown as HTMLInputElement);
     });
@@ -190,12 +191,14 @@ function swapBases(button: HTMLButtonElement) {
   baseData.newBases = JSON.stringify(newBases);
 
   const operation = baseData.copy ? 'Copied' : 'Swapped';
+  button.classList.remove(outlinedClassName);
   button.innerText = `${operation}!`;
   addToLog(
     `${operation} "${selectedElements[0].innerText}" ${baseData.copy ? 'to' : 'and'} "${selectedElements[1].innerText}"`
   );
 
   setTimeout(() => {
+    button.classList.add(outlinedClassName);
     button.innerText = baseData.buttonText as string;
     button.style.pointerEvents = '';
   }, timeoutDuration);
@@ -219,9 +222,11 @@ function copyButton(button: HTMLButtonElement) {
   const baseJson = JSON.parse(baseData.newBases);
   const copyTextContent = JSON.stringify(baseJson, null, '\t'); // NoSonar this applies formatting and uses one tab as indent character
   navigator.clipboard.writeText(copyTextContent);
+  button.classList.remove(outlinedClassName);
   button.innerText = 'Copied!';
 
   setTimeout(() => {
+    button.classList.add(outlinedClassName);
     button.innerText = buttonText;
     button.style.pointerEvents = '';
   }, timeoutDuration);
@@ -246,7 +251,7 @@ function addToLog(text: string) {
   const logElement = document.getElementById('actionlog');
   const div = document.createElement('div');
   div.innerText = text;
-  div.classList.add('logItem');
+  div.classList.add('log-item', 'my-2');
   logElement?.appendChild(div);
 }
 

diff --git a/src/styles.css b/src/styles.css
@@ -1,10 +1,21 @@
-html,
-body {
-  font-family: sans-serif;
+:root {
+  --link-hover: #363636;
+  --base-background: hsl(0, 0%, 90%);
+  --base-hover: hsl(0, 0%, 77%);
+  --card-colour: black;
 }
 
-.title {
-  text-align: center;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --link-hover: #c9c9c9;
+    --base-background: hsl(0, 0%, 20%);
+    --base-hover: hsl(0, 0%, 33%);
+    --card-colour: white;
+  }
+}
+
+a:hover {
+  color: var(--link-hover);
 }
 
 @media only screen and (max-width: 1023px) {
@@ -13,23 +24,6 @@ body {
   }
 }
 
-nav {
-  margin: 1rem 0;
-}
-
-.textarea {
-  min-width: 100%;
-  min-height: 10rem;
-  resize: vertical;
-  padding: 0 5px;
-  margin-block-end: 0.5rem;
-}
-
-hr {
-  background-color: lightgrey;
-  border-radius: 5px;
-}
-
 .bases {
   & > div {
     padding: 1rem;
@@ -38,10 +32,12 @@ hr {
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    background-color: lightgray;
+    background-color: var(--base-background);
+    color: var(--card-colour);
 
     &.clicked {
       background-color: lightgreen;
+      color: black;
     }
   }
 
@@ -50,13 +46,13 @@ hr {
   }
 
   & > :hover {
-    filter: brightness(1.1);
+    background-color: var(--base-hover);
   }
 }
 
 label {
   display: block;
-  margin-block-end: 3px;
+  margin-block-end: 0.25rem;
   font-weight: bold;
 
   &:has(input[type='checkbox']) {
@@ -70,10 +66,6 @@ label {
   }
 }
 
-.input {
-  margin-block: 1rem;
-}
-
 .arrow {
   font-weight: bold;
   font-size: 3rem;
@@ -110,17 +102,14 @@ label {
   }
 }
 
-.logItem {
-  margin-block: 0.5rem;
-}
-
 .buttons,
 #actionlog {
   position: sticky;
   padding-block-start: 1rem;
+  padding-block-end: 0.5rem;
   top: 0;
   z-index: 2;
-  background-color: white;
+  background-color: var(--bulma-scheme-main);
 }
 
 #actionlog {