From 7d75df2f56d17bfcd0cd48b453b6b4a2a3fde2bf Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Thu, 30 Jul 2020 10:54:14 +0200
Subject: [PATCH] Improve tips styling and allow it in any button

---
 assets/sass/layout.scss | 82 +++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 35 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 964fa6f..a4091db 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -21,6 +21,46 @@ body {
 	background-color: $backgroundColor;
 }
 
+@mixin tip {
+	position: relative;
+
+	.tip {
+		visibility: hidden;
+		position: absolute;
+		z-index: 10000;
+		pointer-events: none;
+		display: block;
+		width: max-content;
+		height: 30px;
+		padding: 4px 8px;
+		line-height: 22px;
+		top: calc(100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+
+		text-align: center;
+		font-size: 18px;
+		color: $defaultTextColor;
+		opacity: 0;
+		transition: opacity ease-out 100ms, visibility step-end 150ms;
+		transition-delay: 0ms;
+		background-color: #000;
+		border-radius: 5px;
+
+		text-transform: initial;
+		font-weight: initial;
+	}
+
+	&:hover, &:active {
+		.tip {
+			visibility: visible;
+			opacity: 1;
+			transition: opacity ease-out 100ms;
+			transition-delay: 150ms;
+		}
+	}
+}
+
 header {
 	display: flex;
 	flex-direction: row;
@@ -77,13 +117,6 @@ header {
 						&:not(button) {
 							background-color: rgba(255, 255, 255, 0.07);
 						}
-
-						.tip {
-							visibility: visible;
-							opacity: 1;
-							transition: opacity ease-out 100ms;
-							transition-delay: 150ms;
-						}
 					}
 
 					.feather {
@@ -99,11 +132,6 @@ header {
 					.feather {
 						margin-right: 0;
 					}
-
-					.tip {
-						text-transform: initial;
-						font-weight: initial;
-					}
 				}
 
 				form {
@@ -179,32 +207,12 @@ header {
 
 	@media (min-width: $menuLayoutSwitchTreshold) {
 		nav ul li {
-			a, button {
-				.tip {
-					visibility: hidden;
-					position: absolute;
-					display: block;
-					width: max-content;
-					height: 30px;
-					padding: 4px 8px;
-					line-height: 22px;
-					top: calc(100% + 8px);
-					left: 50%;
-					transform: translateX(-50%);
-
-					text-align: center;
-					font-size: 18px;
-					color: $defaultTextColor;
-					opacity: 0;
-					transition: opacity ease-out 100ms, visibility step-end 150ms;
-					transition-delay: 0ms;
-					background-color: #000;
-					border-radius: 5px;
-				}
+			a, button, .button {
+				@include tip;
 			}
 
 			&:last-child {
-				a, button {
+				a, button, .button {
 					.tip {
 						left: unset;
 						right: 4px;
@@ -226,6 +234,10 @@ footer {
 main {
 	flex: 1;
 	padding: 8px;
+
+	button, .button {
+		@include tip;
+	}
 }
 
 h1 {