From 1abc6b2b2e9cd5cdb814150d3fb71028c237b028 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Wed, 29 Jul 2020 18:51:48 -0400 Subject: [PATCH] Include a style file for tooltips. --- WebHostLib/static/layout.css | 13 +++ WebHostLib/static/tooltip.css | 167 ++++++++++++++++++++++++++++++ WebHostLib/templates/landing.html | 7 +- WebHostLib/templates/layout.html | 1 + 4 files changed, 186 insertions(+), 2 deletions(-) create mode 100644 WebHostLib/static/tooltip.css diff --git a/WebHostLib/static/layout.css b/WebHostLib/static/layout.css index 550a2ea5..eabf9328 100644 --- a/WebHostLib/static/layout.css +++ b/WebHostLib/static/layout.css @@ -43,3 +43,16 @@ button:hover, input[type=submit]:hover{ color: #34768a; text-decoration: none; } + +/** Tooltip styles */ +[data-tooltop]{ + position: relative; + z-index: 10; + cursor: pointer; +} + +[data-tooltip]:before, [data-tooltip]:after{ + visibility: hidden; + opacity: 0; + pointer-events: none; +} diff --git a/WebHostLib/static/tooltip.css b/WebHostLib/static/tooltip.css new file mode 100644 index 00000000..5c61098a --- /dev/null +++ b/WebHostLib/static/tooltip.css @@ -0,0 +1,167 @@ +/** +This tooltip file is a modified version of the class found here: https://chrisbracco.com/a-simple-css-tooltip/. +The styles in this file are used in compliance with the Creative Commons Attribution-ShareAlike 4.0 International +license, which may be found here: https://creativecommons.org/licenses/by-sa/4.0/. +*/ + +/** +README: +To give any element a tooltip, simply give that element a data-tooltip attribute with a value of your desired +tooltip content. Tooltips position themselves above elements by default. To change the position of the tooltip, +give it one of the following classes: tooltip-left, tooltip-right, tooltip-top, or tooltip-bottom. +*/ + +/* Base styles for the element that has a tooltip */ +[data-tooltip], .tooltip { + position: relative; + cursor: pointer; +} + +/* Base styles for the entire tooltip */ +[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { + position: absolute; + visibility: hidden; + opacity: 0; + -webkit-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -moz-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + pointer-events: none; +} + +[data-tooltip]:hover:before, [data-tooltip]:hover:after, .tooltip:hover:before, .tooltip:hover:after{ + visibility: visible; + opacity: 1; +} + +/** Directional arrow styles */ +.tooltip:before, [data-tooltip]:before { + z-index: 1001; + border: 6px solid transparent; + background: transparent; + content: ""; +} + +/** Content styles */ +.tooltip:after, [data-tooltip]:after { + z-index: 1000; + padding: 8px; + width: 160px; + border-radius: 4px; + background-color: #000; + background-color: hsla(0, 0%, 20%, 0.9); + color: #fff; + content: attr(data-tooltip); + font-size: 14px; + line-height: 1.2; +} + +[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, +.tooltip-top:before, .tooltip-top:after { + bottom: 100%; + left: 50%; +} + +[data-tooltip]:before, .tooltip:before, .tooltip-top:before { + margin-left: -6px; + margin-bottom: -12px; + border-top-color: #000; + border-top-color: hsla(0, 0%, 20%, 0.9); +} + +/** Horizontally align tooltips on the top and bottom */ +[data-tooltip]:after, .tooltip:after, .tooltip-top:after { + margin-left: -80px; +} + +[data-tooltip]:hover:before, [data-tooltip]:hover:after, .tooltip:hover:before, .tooltip:hover:after, +.tooltip-top:hover:before, .tooltip-top:hover:after { + -webkit-transform: translateY(-12px); + -moz-transform: translateY(-12px); + transform: translateY(-12px); +} + +/** Tooltips on the left */ +.tooltip-left:before, .tooltip-left:after { + right: 100%; + bottom: 50%; + left: auto; +} + +.tooltip-left:before { + margin-left: 0; + margin-right: -12px; + margin-bottom: 0; + border-top-color: transparent; + border-left-color: #000; + border-left-color: hsla(0, 0%, 20%, 0.9); +} + +.tooltip-left:hover:before, .tooltip-left:hover:after { + -webkit-transform: translateX(-12px); + -moz-transform: translateX(-12px); + transform: translateX(-12px); +} + +/** Tooltips on the bottom */ +.tooltip-bottom:before, .tooltip-bottom:after { + top: 100%; + bottom: auto; + left: 50%; +} + +.tooltip-bottom:before { + margin-top: -12px; + margin-bottom: 0; + border-top-color: transparent; + border-bottom-color: #000; + border-bottom-color: hsla(0, 0%, 20%, 0.9); +} + +.tooltip-bottom:hover:before, .tooltip-bottom:hover:after { + -webkit-transform: translateY(12px); + -moz-transform: translateY(12px); + transform: translateY(12px); +} + +/** Tooltips on the right */ +.tooltip-right:before, .tooltip-right:after { + bottom: 50%; + left: 100%; +} + +.tooltip-right:before { + margin-bottom: 0; + margin-left: -12px; + border-top-color: transparent; + border-right-color: #000; + border-right-color: hsla(0, 0%, 20%, 0.9); +} + +.tooltip-right:hover:before, .tooltip-right:hover:after { + -webkit-transform: translateX(12px); + -moz-transform: translateX(12px); + transform: translateX(12px); +} + +/** Adjustment for directional arrows for tooltips on the left and right */ +.tooltip-left:before, .tooltip-right:before { + top: 3px; +} + +/** Center content vertically for tooltips ont he left and right */ +.tooltip-left:after, .tooltip-right:after { + margin-left: 0; + margin-bottom: -16px; +} diff --git a/WebHostLib/templates/landing.html b/WebHostLib/templates/landing.html index 453bdbad..42a6fabd 100644 --- a/WebHostLib/templates/landing.html +++ b/WebHostLib/templates/landing.html @@ -19,10 +19,13 @@

- + + +
-

This is a randomizer for The Legend of Zelda: A Link to the Past.

+

This is a randomizer for The Legend of Zelda: A + Link to the Past.

This is also a multiworld, meaning your items may be placed into other players' worlds, and other players's items may be placed into your world. When a player picks up an item which does not belong to them, it is sent back to the player it belongs to over the internet.

diff --git a/WebHostLib/templates/layout.html b/WebHostLib/templates/layout.html index 38bb7b35..b2630a11 100644 --- a/WebHostLib/templates/layout.html +++ b/WebHostLib/templates/layout.html @@ -3,6 +3,7 @@ + {% block head %} Berserker's Multiworld