From c5d70fe1d3681d551683791268ed34004a843589 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Wed, 31 May 2023 23:02:49 +0300 Subject: Fixed the problem with sticking to the mouse, created a tooltip --- extensions-builtin/canvas-zoom-and-pan/style.css | 63 ++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 extensions-builtin/canvas-zoom-and-pan/style.css (limited to 'extensions-builtin/canvas-zoom-and-pan/style.css') diff --git a/extensions-builtin/canvas-zoom-and-pan/style.css b/extensions-builtin/canvas-zoom-and-pan/style.css new file mode 100644 index 00000000..5b131d50 --- /dev/null +++ b/extensions-builtin/canvas-zoom-and-pan/style.css @@ -0,0 +1,63 @@ +.tooltip-info { + position: absolute; + top: 10px; + left: 10px; + cursor: help; + background-color: rgba(0, 0, 0, 0.3); + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + z-index: 100; +} + +.tooltip-info::after { + content: ''; + display: block; + width: 2px; + height: 7px; + background-color: white; + margin-top: 2px; +} + +.tooltip-info::before { + content: ''; + display: block; + width: 2px; + height: 2px; + background-color: white; +} + +.tooltip-content { + display: none; + background-color: #f9f9f9; + color: #333; + border: 1px solid #ddd; + padding: 15px; + position: absolute; + top: 40px; + left: 10px; + width: 250px; + font-size: 16px; + opacity: 0; + border-radius: 8px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + + z-index: 100; +} + +.tooltip:hover .tooltip-content { + display: block; + animation: fadeIn 0.5s; + opacity: 1; +} + +@keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} +} + -- cgit v1.2.1 From 9b687f013d951c43f32bb03674c9af0b3b5b76e3 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Wed, 14 Jun 2023 00:24:25 +0300 Subject: Reworked the disabling of functions, refactored part of the code --- extensions-builtin/canvas-zoom-and-pan/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'extensions-builtin/canvas-zoom-and-pan/style.css') diff --git a/extensions-builtin/canvas-zoom-and-pan/style.css b/extensions-builtin/canvas-zoom-and-pan/style.css index 5b131d50..6bcc9570 100644 --- a/extensions-builtin/canvas-zoom-and-pan/style.css +++ b/extensions-builtin/canvas-zoom-and-pan/style.css @@ -1,4 +1,4 @@ -.tooltip-info { +.canvas-tooltip-info { position: absolute; top: 10px; left: 10px; @@ -15,7 +15,7 @@ z-index: 100; } -.tooltip-info::after { +.canvas-tooltip-info::after { content: ''; display: block; width: 2px; @@ -24,7 +24,7 @@ margin-top: 2px; } -.tooltip-info::before { +.canvas-tooltip-info::before { content: ''; display: block; width: 2px; @@ -32,7 +32,7 @@ background-color: white; } -.tooltip-content { +.canvas-tooltip-content { display: none; background-color: #f9f9f9; color: #333; @@ -50,7 +50,7 @@ z-index: 100; } -.tooltip:hover .tooltip-content { +.canvas-tooltip:hover .canvas-tooltip-content { display: block; animation: fadeIn 0.5s; opacity: 1; -- cgit v1.2.1