Merge pull request #28 from K97i/main

change color on hover on editor controls
r-Techsupport · Jun 6, 2024 · d18dad7 · d18dad7
2 parents 96d81b8 + 42ff6c9
commit d18dad7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/frontend/src/routes/editor/+page.svelte b/frontend/src/routes/editor/+page.svelte
@@ -56,7 +56,13 @@
 		<TopBar />
 		<div class="editor-controls">
 			<!-- Cancel -->
-			<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="40px"
+				viewBox="0 -960 960 960"
+				width="40px"
+				class="cancel"
+			>
 				<title>Cancel Changes</title>
 				<path
 					d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
@@ -68,7 +74,7 @@
 				height="40px"
 				viewBox="0 -960 960 960"
 				width="40px"
-				fill="#e8eaed"
+				class="publish"
 			>
 				<title>Publish Changes</title>
 				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
@@ -92,20 +98,40 @@
 	}
 
 	.editor-controls {
+		border-radius: 5%;
 		padding-right: 0.5rem;
 		margin-top: 0.2rem;
 		border-bottom: 0.07rem solid;
 		border-color: var(--foreground-5);
 	}
 
 	.editor-controls * {
+		border-radius: 5%;
 		fill: var(--foreground-5);
 		float: right;
 		flex-direction: vertical;
 		margin: 0.3rem;
 		cursor: pointer;
 	}
 
+	.publish:hover {
+		border-radius: 5%;
+		background-color: var(--green);
+		transition: all 0.1s ease;
+	}
+
+	.cancel:hover {
+		border-radius: 5%;
+		background-color: var(--red);
+		transition: all 0.1s ease;
+	}
+
+	svg:hover * {
+		border-radius: 5%;
+		fill: var(--background-0);
+		transition: all 0.1s ease;
+	}
+
 	/* div containing both the preview pane and the editor pane */
 	.editor-panes {
 		height: 100%;

diff --git a/frontend/static/css/theme.css b/frontend/static/css/theme.css
@@ -6,6 +6,9 @@
 :root {
 	--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--green: #329932;
+	--red: #993232;
 }
 
 :root,