Fixed command id collision. Added class support in style preset
This commit is contained in:
@@ -207,3 +207,47 @@
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* *********************************************** */
|
||||
/* ********** Preset Styles *********** */
|
||||
/* *********************************************** */
|
||||
|
||||
.mf-formatting-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-content)
|
||||
}
|
||||
|
||||
.mf-formatting-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-secondary-content);
|
||||
}
|
||||
|
||||
.mf-formatting-accent {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-content);
|
||||
}
|
||||
|
||||
.mf-formatting-neutral {
|
||||
background-color: var(--color-neutral);
|
||||
color: var(--color-neutral-content);
|
||||
}
|
||||
|
||||
.mf-formatting-info {
|
||||
background-color: var(--color-info);
|
||||
color: var(--color-info-content);
|
||||
}
|
||||
|
||||
.mf-formatting-success {
|
||||
background-color: var(--color-success);
|
||||
color: var(--color-success-content);
|
||||
}
|
||||
|
||||
.mf-formatting-warning {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-warning-content);
|
||||
}
|
||||
|
||||
.mf-formatting-error {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-error-content);
|
||||
}
|
||||
@@ -375,6 +375,7 @@ function triggerHtmxAction(elementId, config, combinationStr, isInside, event) {
|
||||
}
|
||||
|
||||
// Make AJAX call with htmx
|
||||
console.debug(`Triggering HTMX action for element ${elementId}: ${method} ${url}`, htmxOptions);
|
||||
htmx.ajax(method, url, htmxOptions);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,901 +0,0 @@
|
||||
/*:root {*/
|
||||
/* --color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);*/
|
||||
/* --color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000);*/
|
||||
/* --color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000);*/
|
||||
/* --color-selection: color-mix(in oklab, var(--color-primary) 20%, #0000);*/
|
||||
|
||||
/* --datagrid-resize-zindex: 1;*/
|
||||
/* --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';*/
|
||||
/* --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;*/
|
||||
/* --spacing: 0.25rem;*/
|
||||
/* --text-xs: 0.6875rem;*/
|
||||
/* --text-sm: 0.875rem;*/
|
||||
/* --text-sm--line-height: calc(1.25 / 0.875);*/
|
||||
/* --text-xl: 1.25rem;*/
|
||||
/* --text-xl--line-height: calc(1.75 / 1.25);*/
|
||||
/* --font-weight-medium: 500;*/
|
||||
/* --radius-md: 0.375rem;*/
|
||||
/* --default-font-family: var(--font-sans);*/
|
||||
/* --default-mono-font-family: var(--font-mono);*/
|
||||
/* --properties-font-size: var(--text-xs);*/
|
||||
/* --mf-tooltip-zindex: 10;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-icon-16 {*/
|
||||
/* width: 16px;*/
|
||||
/* min-width: 16px;*/
|
||||
/* height: 16px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-icon-20 {*/
|
||||
/* width: 20px;*/
|
||||
/* min-width: 20px;*/
|
||||
/* height: 20px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-icon-24 {*/
|
||||
/* width: 24px;*/
|
||||
/* min-width: 24px;*/
|
||||
/* height: 24px;*/
|
||||
|
||||
/*}*/
|
||||
|
||||
/*.mf-icon-28 {*/
|
||||
/* width: 28px;*/
|
||||
/* min-width: 28px;*/
|
||||
/* height: 28px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-icon-32 {*/
|
||||
/* width: 32px;*/
|
||||
/* min-width: 32px;*/
|
||||
/* height: 32px;*/
|
||||
/*}*/
|
||||
|
||||
/*!**/
|
||||
/* * MF Layout Component - CSS Grid Layout*/
|
||||
/* * Provides fixed header/footer, collapsible drawers, and scrollable main content*/
|
||||
/* * Compatible with DaisyUI 5*/
|
||||
/* *!*/
|
||||
|
||||
/*.mf-button {*/
|
||||
/* border-radius: 0.375rem;*/
|
||||
/* transition: background-color 0.15s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-button:hover {*/
|
||||
/* background-color: var(--color-base-300);*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-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(--mf-tooltip-zindex); !* Ensure it's on top *!*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tooltip-container[data-visible="true"] {*/
|
||||
/* opacity: 1;*/
|
||||
/* visibility: visible; !* Show tooltip *!*/
|
||||
/* transition: opacity 0.3s ease; !* No delay when becoming visible *!*/
|
||||
/*}*/
|
||||
|
||||
/*!* Main layout container using CSS Grid *!*/
|
||||
/*.mf-layout {*/
|
||||
/* display: grid;*/
|
||||
/* grid-template-areas:*/
|
||||
/* "header header header"*/
|
||||
/* "left-drawer main right-drawer"*/
|
||||
/* "footer footer footer";*/
|
||||
/* grid-template-rows: 32px 1fr 32px;*/
|
||||
/* grid-template-columns: auto 1fr auto;*/
|
||||
/* height: 100vh;*/
|
||||
/* width: 100vw;*/
|
||||
/* overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Header - fixed at top *!*/
|
||||
/*.mf-layout-header {*/
|
||||
/* grid-area: header;*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* justify-content: space-between; !* put one item on each side *!*/
|
||||
/* gap: 1rem;*/
|
||||
/* padding: 0 1rem;*/
|
||||
/* background-color: var(--color-base-300);*/
|
||||
/* border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*/
|
||||
/* z-index: 30;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Footer - fixed at bottom *!*/
|
||||
/*.mf-layout-footer {*/
|
||||
/* grid-area: footer;*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* padding: 0 1rem;*/
|
||||
/* background-color: var(--color-neutral);*/
|
||||
/* color: var(--color-neutral-content);*/
|
||||
/* border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*/
|
||||
/* z-index: 30;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Main content area - scrollable *!*/
|
||||
/*.mf-layout-main {*/
|
||||
/* grid-area: main;*/
|
||||
/* overflow-y: auto;*/
|
||||
/* overflow-x: auto;*/
|
||||
/* padding: 0.5rem;*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Drawer base styles *!*/
|
||||
/*.mf-layout-drawer {*/
|
||||
/* overflow-y: auto;*/
|
||||
/* overflow-x: hidden;*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* transition: width 0.3s ease-in-out, margin 0.3s ease-in-out;*/
|
||||
/* width: 250px;*/
|
||||
/* padding: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Left drawer *!*/
|
||||
/*.mf-layout-left-drawer {*/
|
||||
/* grid-area: left-drawer;*/
|
||||
/* border-right: 1px solid var(--color-border-primary);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Right drawer *!*/
|
||||
/*.mf-layout-right-drawer {*/
|
||||
/* grid-area: right-drawer;*/
|
||||
/* !*border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*!*/
|
||||
/* border-left: 1px solid var(--color-border-primary);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Collapsed drawer states *!*/
|
||||
/*.mf-layout-drawer.collapsed {*/
|
||||
/* width: 0;*/
|
||||
/* padding: 0;*/
|
||||
/* border: none;*/
|
||||
/* overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Toggle buttons positioning *!*/
|
||||
/*.mf-layout-toggle-left {*/
|
||||
/* margin-right: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-toggle-right {*/
|
||||
/* margin-left: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Smooth scrollbar styling for webkit browsers *!*/
|
||||
/*.mf-layout-main::-webkit-scrollbar,*/
|
||||
/*.mf-layout-drawer::-webkit-scrollbar {*/
|
||||
/* width: 8px;*/
|
||||
/* height: 8px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-main::-webkit-scrollbar-track,*/
|
||||
/*.mf-layout-drawer::-webkit-scrollbar-track {*/
|
||||
/* background: var(--color-base-200);*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-main::-webkit-scrollbar-thumb,*/
|
||||
/*.mf-layout-drawer::-webkit-scrollbar-thumb {*/
|
||||
/* background: color-mix(in oklab, var(--color-base-content) 20%, #0000);*/
|
||||
/* border-radius: 4px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-main::-webkit-scrollbar-thumb:hover,*/
|
||||
/*.mf-layout-drawer::-webkit-scrollbar-thumb:hover {*/
|
||||
/* background: color-mix(in oklab, var(--color-base-content) 30%, #0000);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Responsive adjustments for smaller screens *!*/
|
||||
/*@media (max-width: 768px) {*/
|
||||
/* .mf-layout-drawer {*/
|
||||
/* width: 200px;*/
|
||||
/* }*/
|
||||
|
||||
/* .mf-layout-header,*/
|
||||
/* .mf-layout-footer {*/
|
||||
/* padding: 0 0.5rem;*/
|
||||
/* }*/
|
||||
|
||||
/* .mf-layout-main {*/
|
||||
/* padding: 0.5rem;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
/*!* Handle layouts with no drawers *!*/
|
||||
/*.mf-layout[data-left-drawer="false"] {*/
|
||||
/* grid-template-areas:*/
|
||||
/* "header header"*/
|
||||
/* "main right-drawer"*/
|
||||
/* "footer footer";*/
|
||||
/* grid-template-columns: 1fr auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout[data-right-drawer="false"] {*/
|
||||
/* grid-template-areas:*/
|
||||
/* "header header"*/
|
||||
/* "left-drawer main"*/
|
||||
/* "footer footer";*/
|
||||
/* grid-template-columns: auto 1fr;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout[data-left-drawer="false"][data-right-drawer="false"] {*/
|
||||
/* grid-template-areas:*/
|
||||
/* "header"*/
|
||||
/* "main"*/
|
||||
/* "footer";*/
|
||||
/* grid-template-columns: 1fr;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*!***/
|
||||
/* * Layout Drawer Resizer Styles*/
|
||||
/* **/
|
||||
/* * Styles for the resizable drawer borders with visual feedback*/
|
||||
/* *!*/
|
||||
|
||||
/*!* Ensure drawer has relative positioning and no overflow *!*/
|
||||
/*.mf-layout-drawer {*/
|
||||
/* position: relative;*/
|
||||
/* overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Content wrapper handles scrolling *!*/
|
||||
/*.mf-layout-drawer-content {*/
|
||||
/* position: absolute;*/
|
||||
/* top: 0;*/
|
||||
/* left: 0;*/
|
||||
/* right: 0;*/
|
||||
/* bottom: 0;*/
|
||||
/* overflow-y: auto;*/
|
||||
/* overflow-x: hidden;*/
|
||||
/* padding: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Base resizer styles *!*/
|
||||
/*.mf-layout-resizer {*/
|
||||
/* position: absolute;*/
|
||||
/* top: 0;*/
|
||||
/* bottom: 0;*/
|
||||
/* width: 4px;*/
|
||||
/* background-color: transparent;*/
|
||||
/* transition: background-color 0.2s ease;*/
|
||||
/* z-index: 100;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Resizer on the right side (for left drawer) *!*/
|
||||
/*.mf-layout-resizer-right {*/
|
||||
/* right: 0;*/
|
||||
/* cursor: col-resize;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Resizer on the left side (for right drawer) *!*/
|
||||
/*.mf-layout-resizer-left {*/
|
||||
/* left: 0;*/
|
||||
/* cursor: col-resize;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Hover state *!*/
|
||||
/*.mf-layout-resizer:hover {*/
|
||||
/* background-color: rgba(59, 130, 246, 0.3); !* Blue-500 with opacity *!*/
|
||||
/*}*/
|
||||
|
||||
/*!* Active state during resize *!*/
|
||||
/*.mf-layout-drawer-resizing .mf-layout-resizer {*/
|
||||
/* background-color: rgba(59, 130, 246, 0.5);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Disable transitions during resize for smooth dragging *!*/
|
||||
/*.mf-layout-drawer-resizing {*/
|
||||
/* transition: none !important;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Prevent text selection during resize *!*/
|
||||
/*.mf-layout-resizing {*/
|
||||
/* user-select: none;*/
|
||||
/* -webkit-user-select: none;*/
|
||||
/* -moz-user-select: none;*/
|
||||
/* -ms-user-select: none;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Cursor override for entire body during resize *!*/
|
||||
/*.mf-layout-resizing * {*/
|
||||
/* cursor: col-resize !important;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Visual indicator for resizer on hover - subtle border *!*/
|
||||
/*.mf-layout-resizer::before {*/
|
||||
/* content: '';*/
|
||||
/* position: absolute;*/
|
||||
/* top: 50%;*/
|
||||
/* transform: translateY(-50%);*/
|
||||
/* width: 2px;*/
|
||||
/* height: 40px;*/
|
||||
/* background-color: rgba(156, 163, 175, 0.4); !* Gray-400 with opacity *!*/
|
||||
/* border-radius: 2px;*/
|
||||
/* opacity: 0;*/
|
||||
/* transition: opacity 0.2s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-resizer-right::before {*/
|
||||
/* right: 1px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-resizer-left::before {*/
|
||||
/* left: 1px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-layout-resizer:hover::before,*/
|
||||
/*.mf-layout-drawer-resizing .mf-layout-resizer::before {*/
|
||||
/* opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-layout-group {*/
|
||||
/* font-weight: bold;*/
|
||||
/* !*font-size: var(--text-sm);*!*/
|
||||
/* overflow: hidden;*/
|
||||
/* text-overflow: ellipsis;*/
|
||||
/* white-space: nowrap;*/
|
||||
/* margin-bottom: 0.2rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* *********************************************** *!*/
|
||||
/*!* *********** Tabs Manager Component ************ *!*/
|
||||
/*!* *********************************************** *!*/
|
||||
|
||||
/*!* Tabs Manager Container *!*/
|
||||
/*.mf-tabs-manager {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* height: 100%;*/
|
||||
/* width: 100%;*/
|
||||
/* background-color: var(--color-base-200);*/
|
||||
/* color: color-mix(in oklab, var(--color-base-content) 50%, transparent);*/
|
||||
/* border-radius: .5rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Tabs Header using DaisyUI tabs component *!*/
|
||||
/*.mf-tabs-header {*/
|
||||
/* display: flex;*/
|
||||
/* gap: 0;*/
|
||||
/* flex-shrink: 1;*/
|
||||
/* min-height: 25px;*/
|
||||
|
||||
/* overflow-x: hidden;*/
|
||||
/* overflow-y: hidden;*/
|
||||
/* white-space: nowrap;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tabs-header-wrapper {*/
|
||||
/* display: flex;*/
|
||||
/* justify-content: space-between;*/
|
||||
/* align-items: center;*/
|
||||
|
||||
/* width: 100%;*/
|
||||
/* !*overflow: hidden; important *!*/
|
||||
/*}*/
|
||||
|
||||
/*!* Individual Tab Button using DaisyUI tab classes *!*/
|
||||
/*.mf-tab-button {*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* gap: 0.5rem;*/
|
||||
/* padding: 0 0.5rem 0 1rem;*/
|
||||
/* cursor: pointer;*/
|
||||
/* transition: all 0.2s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tab-button:hover {*/
|
||||
/* color: var(--color-base-content); !* Change text color on hover *!*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tab-button.mf-tab-active {*/
|
||||
/* --depth: 1;*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* color: var(--color-base-content);*/
|
||||
/* border-radius: .25rem;*/
|
||||
/* border-bottom: 4px solid var(--color-primary);*/
|
||||
/* box-shadow: 0 1px oklch(100% 0 0/calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Tab Label *!*/
|
||||
/*.mf-tab-label {*/
|
||||
/* user-select: none;*/
|
||||
/* white-space: nowrap;*/
|
||||
/* max-width: 150px;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Tab Close Button *!*/
|
||||
/*.mf-tab-close-btn {*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* justify-content: center;*/
|
||||
/* width: 1rem;*/
|
||||
/* height: 1rem;*/
|
||||
/* border-radius: 0.25rem;*/
|
||||
/* font-size: 1.25rem;*/
|
||||
/* line-height: 1;*/
|
||||
/* @apply text-base-content/50;*/
|
||||
/* transition: all 0.2s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tab-close-btn:hover {*/
|
||||
/* @apply bg-base-300 text-error;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Tab Content Area *!*/
|
||||
/*.mf-tab-content {*/
|
||||
/* flex: 1;*/
|
||||
/* overflow: auto;*/
|
||||
/* height: 100%;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-tab-content-wrapper {*/
|
||||
/* flex: 1;*/
|
||||
/* overflow: auto;*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* padding: 0.5rem;*/
|
||||
/* border-top: 1px solid var(--color-border-primary);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Empty Content State *!*/
|
||||
/*.mf-empty-content {*/
|
||||
/* align-items: center;*/
|
||||
/* justify-content: center;*/
|
||||
/* height: 100%;*/
|
||||
/* @apply text-base-content/50;*/
|
||||
/* font-style: italic;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-vis {*/
|
||||
/* width: 100%;*/
|
||||
/* height: 100%;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-search-results {*/
|
||||
/* margin-top: 0.5rem;*/
|
||||
/* !*max-height: 400px;*!*/
|
||||
/* overflow: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-dropdown-wrapper {*/
|
||||
/* position: relative; !* CRUCIAL for the anchor *!*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-dropdown {*/
|
||||
/* display: none;*/
|
||||
/* position: absolute;*/
|
||||
/* top: 100%;*/
|
||||
/* left: 0;*/
|
||||
/* z-index: 50;*/
|
||||
/* min-width: 200px;*/
|
||||
/* padding: 0.5rem;*/
|
||||
/* box-sizing: border-box;*/
|
||||
/* overflow-x: auto;*/
|
||||
|
||||
/* !* DaisyUI styling *!*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* border: 1px solid var(--color-border);*/
|
||||
/* border-radius: var(--radius-md);*/
|
||||
/* box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--color-neutral) 20%, #0000),*/
|
||||
/* 0 2px 4px -2px color-mix(in oklab, var(--color-neutral) 20%, #0000);*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-dropdown.is-visible {*/
|
||||
/* display: block;*/
|
||||
/* opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Dropdown vertical positioning *!*/
|
||||
/*.mf-dropdown-below {*/
|
||||
/* top: 100%;*/
|
||||
/* bottom: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-dropdown-above {*/
|
||||
/* bottom: 100%;*/
|
||||
/* top: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Dropdown horizontal alignment *!*/
|
||||
/*.mf-dropdown-left {*/
|
||||
/* left: 0;*/
|
||||
/* right: auto;*/
|
||||
/* transform: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-dropdown-right {*/
|
||||
/* right: 0;*/
|
||||
/* left: auto;*/
|
||||
/* transform: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-dropdown-center {*/
|
||||
/* left: 50%;*/
|
||||
/* right: auto;*/
|
||||
/* transform: translateX(-50%);*/
|
||||
/*}*/
|
||||
|
||||
/*!* *********************************************** *!*/
|
||||
/*!* ************** TreeView Component ************* *!*/
|
||||
/*!* *********************************************** *!*/
|
||||
|
||||
/*!* TreeView Container *!*/
|
||||
/*.mf-treeview {*/
|
||||
/* width: 100%;*/
|
||||
/* user-select: none;*/
|
||||
/*}*/
|
||||
|
||||
/*!* TreeNode Container *!*/
|
||||
/*.mf-treenode-container {*/
|
||||
/* width: 100%;*/
|
||||
/*}*/
|
||||
|
||||
/*!* TreeNode Element *!*/
|
||||
/*.mf-treenode {*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* gap: 0.25rem;*/
|
||||
/* padding: 2px 0.5rem;*/
|
||||
/* cursor: pointer;*/
|
||||
/* transition: background-color 0.15s ease;*/
|
||||
/* border-radius: 0.25rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Input for Editing *!*/
|
||||
/*.mf-treenode-input {*/
|
||||
/* flex: 1;*/
|
||||
/* padding: 2px 0.25rem;*/
|
||||
/* border: 1px solid var(--color-primary);*/
|
||||
/* border-radius: 0.25rem;*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* outline: none;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-treenode:hover {*/
|
||||
/* background-color: var(--color-base-200);*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-treenode.selected {*/
|
||||
/* background-color: var(--color-primary);*/
|
||||
/* color: var(--color-primary-content);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Toggle Icon *!*/
|
||||
/*.mf-treenode-toggle {*/
|
||||
/* flex-shrink: 0;*/
|
||||
/* width: 20px;*/
|
||||
/* text-align: center;*/
|
||||
/* font-size: 0.75rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Node Label *!*/
|
||||
/*.mf-treenode-label {*/
|
||||
/* flex: 1;*/
|
||||
/* overflow: hidden;*/
|
||||
/* text-overflow: ellipsis;*/
|
||||
/* white-space: nowrap;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.mf-treenode-input:focus {*/
|
||||
/* box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Action Buttons - Hidden by default, shown on hover *!*/
|
||||
/*.mf-treenode-actions {*/
|
||||
/* display: none;*/
|
||||
/* gap: 0.1rem;*/
|
||||
/* white-space: nowrap;*/
|
||||
/* margin-left: 0.5rem;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-treenode:hover .mf-treenode-actions {*/
|
||||
/* display: flex;*/
|
||||
/*}*/
|
||||
|
||||
/*!* *********************************************** *!*/
|
||||
/*!* ********** Generic Resizer Classes ************ *!*/
|
||||
/*!* *********************************************** *!*/
|
||||
|
||||
/*!* Generic resizer - used by both Layout and Panel *!*/
|
||||
/*.mf-resizer {*/
|
||||
/* position: absolute;*/
|
||||
/* width: 4px;*/
|
||||
/* cursor: col-resize;*/
|
||||
/* background-color: transparent;*/
|
||||
/* transition: background-color 0.2s ease;*/
|
||||
/* z-index: 100;*/
|
||||
/* top: 0;*/
|
||||
/* bottom: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-resizer:hover {*/
|
||||
/* background-color: rgba(59, 130, 246, 0.3);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Active state during resize *!*/
|
||||
/*.mf-resizing .mf-resizer {*/
|
||||
/* background-color: rgba(59, 130, 246, 0.5);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Prevent text selection during resize *!*/
|
||||
/*.mf-resizing {*/
|
||||
/* user-select: none;*/
|
||||
/* -webkit-user-select: none;*/
|
||||
/* -moz-user-select: none;*/
|
||||
/* -ms-user-select: none;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Cursor override for entire body during resize *!*/
|
||||
/*.mf-resizing * {*/
|
||||
/* cursor: col-resize !important;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Visual indicator for resizer on hover - subtle border *!*/
|
||||
/*.mf-resizer::before {*/
|
||||
/* content: '';*/
|
||||
/* position: absolute;*/
|
||||
/* top: 50%;*/
|
||||
/* transform: translateY(-50%);*/
|
||||
/* width: 2px;*/
|
||||
/* height: 40px;*/
|
||||
/* background-color: rgba(156, 163, 175, 0.4);*/
|
||||
/* border-radius: 2px;*/
|
||||
/* opacity: 0;*/
|
||||
/* transition: opacity 0.2s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-resizer:hover::before,*/
|
||||
/*.mf-resizing .mf-resizer::before {*/
|
||||
/* opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Resizer positioning *!*/
|
||||
/*!* Left resizer is on the right side of the left panel *!*/
|
||||
/*.mf-resizer-left {*/
|
||||
/* right: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Right resizer is on the left side of the right panel *!*/
|
||||
/*.mf-resizer-right {*/
|
||||
/* left: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Position indicator for resizer *!*/
|
||||
/*.mf-resizer-left::before {*/
|
||||
/* right: 1px;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-resizer-right::before {*/
|
||||
/* left: 1px;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Disable transitions during resize for smooth dragging *!*/
|
||||
/*.mf-item-resizing {*/
|
||||
/* transition: none !important;*/
|
||||
/*}*/
|
||||
|
||||
/*!* *********************************************** *!*/
|
||||
/*!* *************** Panel Component *************** *!*/
|
||||
/*!* *********************************************** *!*/
|
||||
|
||||
/*.mf-panel {*/
|
||||
/* display: flex;*/
|
||||
/* width: 100%;*/
|
||||
/* height: 100%;*/
|
||||
/* overflow: hidden;*/
|
||||
/* position: relative;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Common properties for side panels *!*/
|
||||
/*.mf-panel-left,*/
|
||||
/*.mf-panel-right {*/
|
||||
/* position: relative;*/
|
||||
/* flex-shrink: 0;*/
|
||||
/* width: 250px;*/
|
||||
/* min-width: 150px;*/
|
||||
/* max-width: 500px;*/
|
||||
/* height: 100%;*/
|
||||
/* overflow: auto;*/
|
||||
/* transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;*/
|
||||
/* padding-top: 25px;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Left panel specific *!*/
|
||||
/*.mf-panel-left {*/
|
||||
/* border-right: 1px solid var(--color-border-primary);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Right panel specific *!*/
|
||||
/*.mf-panel-right {*/
|
||||
/* border-left: 1px solid var(--color-border-primary);*/
|
||||
/* padding-left: 0.5rem;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-panel-main {*/
|
||||
/* flex: 1;*/
|
||||
/* height: 100%;*/
|
||||
/* overflow: hidden;*/
|
||||
/* min-width: 0; !* Important to allow the shrinking of flexbox *!*/
|
||||
/*}*/
|
||||
|
||||
/*!* Hidden state - common for both panels *!*/
|
||||
/*.mf-panel-left.mf-hidden,*/
|
||||
/*.mf-panel-right.mf-hidden {*/
|
||||
/* width: 0;*/
|
||||
/* min-width: 0;*/
|
||||
/* max-width: 0;*/
|
||||
/* overflow: hidden;*/
|
||||
/* border: none;*/
|
||||
/* padding: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*!* No transition during manual resize - common for both panels *!*/
|
||||
/*.mf-panel-left.no-transition,*/
|
||||
/*.mf-panel-right.no-transition {*/
|
||||
/* transition: none;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Common properties for panel toggle icons *!*/
|
||||
/*.mf-panel-hide-icon,*/
|
||||
/*.mf-panel-show-icon {*/
|
||||
/* position: absolute;*/
|
||||
/* top: 0;*/
|
||||
/* right: 0;*/
|
||||
/* cursor: pointer;*/
|
||||
/* z-index: 10;*/
|
||||
/* border-radius: 0.25rem;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-panel-hide-icon:hover,*/
|
||||
/*.mf-panel-show-icon:hover {*/
|
||||
/* background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));*/
|
||||
/*}*/
|
||||
|
||||
/*!* Show icon positioning *!*/
|
||||
/*.mf-panel-show-icon-left {*/
|
||||
/* left: 0.5rem;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-panel-show-icon-right {*/
|
||||
/* right: 0.5rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Panel with title - grid layout for header + scrollable content *!*/
|
||||
/*.mf-panel-body {*/
|
||||
/* display: grid;*/
|
||||
/* grid-template-rows: auto 1fr;*/
|
||||
/* height: 100%;*/
|
||||
/* overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-panel-header {*/
|
||||
/* display: flex;*/
|
||||
/* justify-content: space-between;*/
|
||||
/* align-items: center;*/
|
||||
/* padding: 0.25rem 0.5rem;*/
|
||||
/* background-color: var(--color-base-200);*/
|
||||
/* border-bottom: 1px solid var(--color-border);*/
|
||||
/*}*/
|
||||
|
||||
/*!* Override absolute positioning for hide icon when inside header *!*/
|
||||
/*.mf-panel-header .mf-panel-hide-icon {*/
|
||||
/* position: static;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-panel-content {*/
|
||||
/* overflow-y: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*!* Remove padding-top when using title layout *!*/
|
||||
/*.mf-panel-left.mf-panel-with-title,*/
|
||||
/*.mf-panel-right.mf-panel-with-title {*/
|
||||
/* padding-top: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*!* *********************************************** *!*/
|
||||
/*!* ************* Properties Component ************ *!*/
|
||||
/*!* *********************************************** *!*/
|
||||
|
||||
/*!*!* Properties container *!*!*/
|
||||
/*.mf-properties {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* gap: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
/*!*!* Group card - using DaisyUI card styling *!*!*/
|
||||
/*.mf-properties-group-card {*/
|
||||
/* background-color: var(--color-base-100);*/
|
||||
/* border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);*/
|
||||
/* border-radius: var(--radius-md);*/
|
||||
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
|
||||
/* overflow: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-properties-group-container {*/
|
||||
/* display: inline-block; !* important *!*/
|
||||
/* min-width: max-content; !* important *!*/
|
||||
/* width: 100%;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*!*!* Group header - gradient using DaisyUI primary color *!*!*/
|
||||
/*.mf-properties-group-header {*/
|
||||
/* background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);*/
|
||||
/* color: var(--color-primary-content);*/
|
||||
/* padding: calc(var(--properties-font-size) * 0.5) calc(var(--properties-font-size) * 0.75);*/
|
||||
/* font-weight: 700;*/
|
||||
/* font-size: var(--properties-font-size);*/
|
||||
/*}*/
|
||||
|
||||
/*!*!* Group content area *!*!*/
|
||||
/*.mf-properties-group-content {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* min-width: max-content;*/
|
||||
/*}*/
|
||||
|
||||
/*!*!* Property row *!*!*/
|
||||
/*.mf-properties-row {*/
|
||||
/* display: grid;*/
|
||||
/* grid-template-columns: 6rem 1fr;*/
|
||||
|
||||
/* align-items: center;*/
|
||||
/* padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);*/
|
||||
|
||||
/* border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);*/
|
||||
/* transition: background-color 0.15s ease;*/
|
||||
|
||||
/* gap: calc(var(--properties-font-size) * 0.75);*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-properties-row:last-child {*/
|
||||
/* border-bottom: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.mf-properties-row:hover {*/
|
||||
/* background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);*/
|
||||
/*}*/
|
||||
|
||||
/*!*!* Property key - normal font *!*!*/
|
||||
/*.mf-properties-key {*/
|
||||
/* align-items: start;*/
|
||||
/* font-weight: 600;*/
|
||||
/* color: color-mix(in oklab, var(--color-base-content) 70%, transparent);*/
|
||||
/* flex: 0 0 40%;*/
|
||||
/* font-size: var(--properties-font-size);*/
|
||||
/* white-space: nowrap;*/
|
||||
/* overflow: hidden;*/
|
||||
/* text-overflow: ellipsis;*/
|
||||
/*}*/
|
||||
|
||||
/*!*!* Property value - monospace font *!*!*/
|
||||
/*.mf-properties-value {*/
|
||||
/* font-family: var(--default-mono-font-family);*/
|
||||
/* color: var(--color-base-content);*/
|
||||
/* flex: 1;*/
|
||||
/* text-align: left;*/
|
||||
/* font-size: var(--properties-font-size);*/
|
||||
/* overflow: hidden;*/
|
||||
/* text-overflow: ellipsis;*/
|
||||
/* white-space: nowrap;*/
|
||||
/*}*/
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user