mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-24 07:37:10 +00:00
Add tooltips to all buttons and tweak hover colors
This commit is contained in:
Misode
@@ -1,9 +1,10 @@
|
||||
:root {
|
||||
--background-1: #1b1b1b;
|
||||
--background-2: #252525;
|
||||
--background-3: #2f2f2f;
|
||||
--background-3: #222222;
|
||||
--background-4: #3d3d3d;
|
||||
--background-5: #464646;
|
||||
--background-5: #383838;
|
||||
--background-6: #575757;
|
||||
--text-1: #ffffff;
|
||||
--text-2: #dcdcdc;
|
||||
--text-3: #c3c3c3;
|
||||
@@ -22,11 +23,12 @@
|
||||
--background-1: #fafafa;
|
||||
--background-2: #e2e2e2;
|
||||
--background-3: #d4d3d3;
|
||||
--background-4: #cccccc;
|
||||
--background-5: #d6d6d6;
|
||||
--background-4: #b8b8b8;
|
||||
--background-5: #bdbdbd;
|
||||
--background-6: #cecece;
|
||||
--text-1: #000000;
|
||||
--text-2: #505050;
|
||||
--text-3: #6a6a6a;
|
||||
--text-2: #2f2f2f;
|
||||
--text-3: #494949;
|
||||
--accent-primary: #088cdb;
|
||||
--accent-success: #1a7f37;
|
||||
--nav: #343a40;
|
||||
@@ -43,11 +45,12 @@
|
||||
--background-1: #fafafa;
|
||||
--background-2: #e2e2e2;
|
||||
--background-3: #d4d3d3;
|
||||
--background-4: #cccccc;
|
||||
--background-5: #d6d6d6;
|
||||
--background-4: #b8b8b8;
|
||||
--background-5: #bdbdbd;
|
||||
--background-6: #cecece;
|
||||
--text-1: #000000;
|
||||
--text-2: #505050;
|
||||
--text-3: #6a6a6a;
|
||||
--text-2: #2f2f2f;
|
||||
--text-3: #494949;
|
||||
--accent-primary: #088cdb;
|
||||
--accent-success: #1a7f37;
|
||||
--nav: #343a40;
|
||||
@@ -426,9 +429,7 @@ main.has-preview {
|
||||
bottom: 8px;
|
||||
left: 100%;
|
||||
z-index: 5;
|
||||
padding: 0 8px;
|
||||
border-top-left-radius: 24px;
|
||||
border-bottom-left-radius: 24px;
|
||||
padding-right: 16px;
|
||||
background-color: var(--background-4);
|
||||
box-shadow: 0 0 7px -3px #000;
|
||||
user-select: none;
|
||||
@@ -437,16 +438,23 @@ main.has-preview {
|
||||
-ms-user-select: none;
|
||||
transform: translateX(var(--offset));
|
||||
transition: padding 0.1s, transform 0.3s;
|
||||
}
|
||||
|
||||
.popup-actions:hover {
|
||||
background-color: var(--background-5);
|
||||
border-top-left-radius: 24px;
|
||||
border-bottom-left-radius: 24px;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
padding: 12px;
|
||||
fill: var(--text-2);
|
||||
fill: var(--text-3);
|
||||
cursor: pointer;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.popup-action.shown ~ .popup-action {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.popup-action:not(.shown) {
|
||||
@@ -461,6 +469,10 @@ main.has-preview {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.popup-action:hover {
|
||||
background-color: var(--background-5);
|
||||
}
|
||||
|
||||
.popup-action.action-preview {
|
||||
fill: var(--accent-primary);
|
||||
}
|
||||
@@ -469,6 +481,94 @@ main.has-preview {
|
||||
fill: var(--accent-success);
|
||||
}
|
||||
|
||||
.tooltipped {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltipped::after {
|
||||
content: attr(aria-label);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
padding: 3px 7px;
|
||||
display: none;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
background-color: var(--background-6);
|
||||
color: var(--text-1);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltipped.tip-ne::after {
|
||||
bottom: 100%;
|
||||
margin-bottom: 6px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.tooltipped.tip-nw::after {
|
||||
bottom: 100%;
|
||||
margin-bottom: 6px;
|
||||
right: 50%;
|
||||
margin-right: -16px;
|
||||
}
|
||||
|
||||
.tooltipped.tip-ne::before,
|
||||
.tooltipped.tip-nw::before {
|
||||
bottom: auto;
|
||||
top: -7px;
|
||||
border-top-color: var(--background-6);
|
||||
}
|
||||
|
||||
.tooltipped.tip-se::after {
|
||||
top: 100%;
|
||||
margin-top: 6px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.tooltipped.tip-sw::after {
|
||||
top: 100%;
|
||||
margin-top: 6px;
|
||||
right: 50%;
|
||||
margin-right: -16px;
|
||||
}
|
||||
|
||||
.tooltipped.tip-se::before,
|
||||
.tooltipped.tip-sw::before {
|
||||
top: auto;
|
||||
bottom: -7px;
|
||||
border-bottom-color: var(--background-6);
|
||||
}
|
||||
|
||||
.tooltipped::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
right: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: -8px;
|
||||
pointer-events: none;
|
||||
border: 8px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltipped:not([disabled]):hover::before,
|
||||
.tooltipped:not([disabled]):hover::after {
|
||||
display: inline-block;
|
||||
animation: tooltip-appear 0.1s ease-in 0.4s forwards;
|
||||
}
|
||||
|
||||
@keyframes tooltip-appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 5px 14px;
|
||||
margin: 12px 16px;
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
:root {
|
||||
--node-border: #4e4e4e;
|
||||
--node-border: #3f3f3f;
|
||||
--node-background-label: #1b1b1b;
|
||||
--node-background-input: #272727;
|
||||
--node-background-hover: #1f1f1f;
|
||||
--node-text: #dadada;
|
||||
--node-text-dimmed: #b4b4b4;
|
||||
--node-selected: #ad9715;
|
||||
--node-selected-hover: #a38c0a;
|
||||
--node-selected-border: #8d7a0d;
|
||||
--node-add: #487c13;
|
||||
--node-add-hover: #3e7409;
|
||||
--node-add-border: #3b6e0c;
|
||||
--node-remove: #9b341b;
|
||||
--node-remove-hover: #922d13;
|
||||
--node-remove-border: #7e1d05;
|
||||
--node-indent-border: #454749;
|
||||
--node-popup-background: #0a0a0ae6;
|
||||
--node-popup-text: #dadada;
|
||||
--node-popup-text-dimmed: #b4b4b4;
|
||||
--category-predicate: #306163;
|
||||
--category-predicate-border: #224849;
|
||||
--category-predicate-background: #1d3333;
|
||||
@@ -29,18 +30,19 @@
|
||||
--node-border: #bcbfc3;
|
||||
--node-background-label: #e4e4e4;
|
||||
--node-background-input: #ffffff;
|
||||
--node-background-hover: #e7e7e7;
|
||||
--node-text: #000000;
|
||||
--node-text-dimmed: #2c2c2c;
|
||||
--node-selected: #f0e65e;
|
||||
--node-selected-hover: #faf06c;
|
||||
--node-selected-border: #b9a327;
|
||||
--node-add: #9bd464;
|
||||
--node-add-hover: #a5dd70;
|
||||
--node-add-border: #498d09;
|
||||
--node-remove: #e76f51;
|
||||
--node-remove-hover: #f57656;
|
||||
--node-remove-border: #be4b2e;
|
||||
--node-indent-border: #b9b9b9;
|
||||
--node-popup-background: #1f2020e6;
|
||||
--node-popup-text: #dadada;
|
||||
--node-popup-text-dimmed: #b4b4b4;
|
||||
--category-predicate: #65b5b8;
|
||||
--category-predicate-border: #187e81;
|
||||
--category-predicate-background: #95c5c7;
|
||||
@@ -57,18 +59,19 @@
|
||||
--node-border: #bcbfc3;
|
||||
--node-background-label: #e4e4e4;
|
||||
--node-background-input: #ffffff;
|
||||
--node-background-hover: #e7e7e7;
|
||||
--node-text: #000000;
|
||||
--node-text-dimmed: #2c2c2c;
|
||||
--node-selected: #f0e65e;
|
||||
--node-selected-hover: #faf06c;
|
||||
--node-selected-border: #b9a327;
|
||||
--node-add: #9bd464;
|
||||
--node-add-hover: #a5dd70;
|
||||
--node-add-border: #498d09;
|
||||
--node-remove: #e76f51;
|
||||
--node-remove-hover: #f57656;
|
||||
--node-remove-border: #be4b2e;
|
||||
--node-indent-border: #b9b9b9;
|
||||
--node-popup-background: #1f2020e6;
|
||||
--node-popup-text: #dadada;
|
||||
--node-popup-text-dimmed: #b4b4b4;
|
||||
--category-predicate: #65b5b8;
|
||||
--category-predicate-border: #187e81;
|
||||
--category-predicate-background: #95c5c7;
|
||||
@@ -91,6 +94,7 @@
|
||||
|
||||
.node-header > * {
|
||||
height: 34px;
|
||||
/* border: none; */
|
||||
border: 1px solid;
|
||||
color: var(--node-text);
|
||||
border-color: var(--node-border);
|
||||
@@ -141,6 +145,10 @@
|
||||
background-color: var(--node-background-input);
|
||||
}
|
||||
|
||||
.node-header button:not([disabled]):hover {
|
||||
background-color: var(--node-background-hover);
|
||||
}
|
||||
|
||||
.object-node > .node-header > .collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -191,6 +199,9 @@ button.selected {
|
||||
background-color: var(--node-selected);
|
||||
border-color: var(--node-selected-border);
|
||||
}
|
||||
button:not([disabled]).selected:hover {
|
||||
background-color: var(--node-selected-hover);
|
||||
}
|
||||
|
||||
.collapse svg {
|
||||
fill: var(--node-text);
|
||||
@@ -202,12 +213,22 @@ button.add {
|
||||
border-color: var(--node-add-border);
|
||||
}
|
||||
|
||||
.collapse:not([disabled]).closed:hover,
|
||||
button:not([disabled]).add:hover {
|
||||
background-color: var(--node-add-hover);
|
||||
}
|
||||
|
||||
.collapse.open,
|
||||
button.remove {
|
||||
background-color: var(--node-remove);
|
||||
border-color: var(--node-remove-border);
|
||||
}
|
||||
|
||||
.collapse:not([disabled]).open:hover,
|
||||
button:not([disabled]).remove:hover {
|
||||
background-color: var(--node-remove-hover);
|
||||
}
|
||||
|
||||
.node-header > button svg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -251,8 +272,8 @@ button.move:disabled {
|
||||
.node-icon .icon-popup {
|
||||
visibility: hidden;
|
||||
width: 240px;
|
||||
background-color: var(--node-popup-background);
|
||||
color: var(--node-popup-text);
|
||||
background-color: var(--background-6);
|
||||
color: var(--text-1);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px 4px;
|
||||
@@ -271,7 +292,7 @@ button.move:disabled {
|
||||
margin-left: -3px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var(--node-popup-background) transparent;
|
||||
border-color: transparent transparent var(--background-6) transparent;
|
||||
}
|
||||
|
||||
.node-icon svg:hover + .icon-popup,
|
||||
@@ -303,10 +324,11 @@ button.move:disabled {
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
z-index: 1;
|
||||
color: var(--node-popup-text);
|
||||
color: var(--text-1);
|
||||
font-size: 16px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--node-popup-background);
|
||||
border-radius: 6px;
|
||||
background-color: var(--background-6);
|
||||
box-shadow: 0 1px 5px -2px #000;
|
||||
}
|
||||
|
||||
.node-menu::after {
|
||||
@@ -317,7 +339,7 @@ button.move:disabled {
|
||||
margin-left: 6px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var(--node-popup-background) transparent;
|
||||
border-color: transparent transparent var(--background-6) transparent;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -333,6 +355,7 @@ button.move:disabled {
|
||||
|
||||
.menu-item .btn {
|
||||
padding: 8px;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
span.menu-item {
|
||||
@@ -340,12 +363,7 @@ span.menu-item {
|
||||
}
|
||||
|
||||
.menu-item-context {
|
||||
color: var(--node-popup-text-dimmed);
|
||||
}
|
||||
|
||||
.node-message {
|
||||
color: var(--node-text-dimmed);
|
||||
margin: 6px 0;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
/* Node body and list entry */
|
||||
|
||||
Reference in New Issue
Block a user