Merge pull request #540 from thelounge/astorije/tooltips

Tooltips, tooltips everywhere

client/css/style.css

@@ -346,9 +346,12 @@ button {
 	opacity: 1;
 }
 
+#viewport .rt-tooltip {
+	float: right;
+}
+
 #viewport .rt {
 	display: block;
-	float: right;
 	margin: 6px -12px 0 0;
 }
 
@@ -1368,9 +1371,9 @@ button {
 	visibility: hidden;
 	opacity: 0;
 	padding: 5px 8px;
-	font-size: 12px;
+	font: 12px Lato;
 	line-height: 1.2;
-	color: #262c36;
+	color: #fff;
 	text-align: center;
 	text-decoration: none;
 	text-shadow: none;
@@ -1380,7 +1383,7 @@ button {
 	white-space: pre;
 	pointer-events: none;
 	content: attr(aria-label);
-	background: #fff;
+	background: #222;
 	border-radius: 3px;
 	-webkit-font-smoothing: subpixel-antialiased;
 	transition: .2s;
@@ -1394,7 +1397,7 @@ button {
 	opacity: 0;
 	width: 0;
 	height: 0;
-	color: #262c36;
+	color: #fff;
 	pointer-events: none;
 	content: "";
 	border: 5px solid transparent;
@@ -1427,7 +1430,7 @@ button {
 	right: 50%;
 	bottom: -5px;
 	margin-right: -5px;
-	border-bottom-color: #fff;
+	border-bottom-color: #222;
 }
 
 .tooltipped-se:after {
@@ -1455,7 +1458,7 @@ button {
 	right: 50%;
 	bottom: auto;
 	margin-right: -5px;
-	border-top-color: #fff;
+	border-top-color: #222;
 }
 
 .tooltipped-ne:after {
@@ -1489,7 +1492,7 @@ button {
 	bottom: 50%;
 	left: -5px;
 	margin-top: -5px;
-	border-left-color: #fff;
+	border-left-color: #222;
 }
 
 .tooltipped-e:after {
@@ -1506,9 +1509,11 @@ button {
 	right: -5px;
 	bottom: 50%;
 	margin-top: -5px;
-	border-right-color: #fff;
+	border-right-color: #222;
 }
 
+/* End tooltips */
+
 /**
   * IRC Message Styling
   * https://github.com/megawac/irc-style-parser

client/index.html

@@ -61,7 +61,9 @@
 						<div class="input">
 							<label for="input" id="nick"></label>
 							<textarea id="input" class="mousetrap"></textarea>
-							<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
+							<span class="tooltipped tooltipped-w" aria-label="Send message">
+								<button id="submit" type="submit" aria-label="Send message"></button>
+							</span>
 						</div>
 					</form>
 				</div>

client/themes/crypto.css

@@ -129,6 +129,10 @@ a:hover,
 	color: #666;
 }
 
+.tooltipped:after {
+	font-family: Inconsolata-g, monospace;
+}
+
 @media (max-width: 768px) {
 	#main {
 		left: 0;

client/views/chat.tpl

@@ -3,7 +3,9 @@
 	<div class="header">
 		<button class="lt" aria-label="Toggle channel list"></button>
 		{{#equal type "channel"}}
-			<button class="rt" aria-label="Toggle user list"></button>
+			<span class="rt-tooltip tooltipped tooltipped-w" aria-label="Toggle user list">
+				<button class="rt" aria-label="Toggle user list"></button>
+			</span>
 		{{/equal}}
 		<button class="menu" aria-label="Open the context menu"></button>
 		<span class="title">{{name}}</span>