139 lines
2.8 KiB
CSS
139 lines
2.8 KiB
CSS
:root {
|
|
--theme-controller-zindex: 1000;
|
|
--datagrid-menu-zindex: 910;
|
|
--datagrid-sidebar-zindex: 900;
|
|
--datagrid-scrollbars-zindex: 800;
|
|
--mmt-tooltip-zindex: 10;
|
|
--datagrid-drag-drop-zindex: 5;
|
|
--datagrid-resize-zindex: 1;
|
|
--color-splitter: color-mix(in oklab, var(--color-base-content) 50%, #0000);
|
|
--color-splitter-active: color-mix(in oklab, var(--color-base-content) 50%, #ffff);
|
|
--color-btn-hover: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
|
|
}
|
|
|
|
.mmt-tooltip-container {
|
|
background: var(--color-base-200);
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
pointer-events: none; /* Prevent interfering with mouse events */
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0; /* Default to invisible */
|
|
visibility: hidden; /* Prevent interaction when invisible */
|
|
transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
|
|
position: fixed; /* Keep it above other content and adjust position */
|
|
z-index: var(--mmt-tooltip-zindex); /* Ensure it's on top */
|
|
}
|
|
|
|
.mmt-tooltip-container[data-visible="true"] {
|
|
opacity: 1;
|
|
visibility: visible; /* Show tooltip */
|
|
transition: opacity 0.3s ease; /* No delay when becoming visible */
|
|
}
|
|
|
|
.mmt-visible-on-hover {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
|
|
}
|
|
|
|
.mmt-btn {
|
|
user-select: none;
|
|
border-style: solid;
|
|
}
|
|
|
|
.mmt-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
.mmt-btn-disabled {
|
|
opacity: 0.5;
|
|
/*cursor: not-allowed;*/
|
|
}
|
|
|
|
/* When parent is hovered, show the child elements with this class */
|
|
*:hover > .mmt-visible-on-hover {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.mmt-selected {
|
|
background-color: var(--color-base-300);
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.icon-32 {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.icon-32 svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.icon-24 {
|
|
width: 24px;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.icon-24 svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.icon-20 {
|
|
width: 20px;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.icon-20-inline {
|
|
display: inline-block;
|
|
width: 20px;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.icon-16 {
|
|
width: 16px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
margin-top: auto;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.icon-16-inline {
|
|
display: inline-block;
|
|
width: 16px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.icon-bool {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
.icon-btn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cursor-default {
|
|
cursor: default;
|
|
} |