jackcarey_obsidian-rule-engine/styles.css
2026-05-17 16:15:27 +01:00

1009 lines
No EOL
23 KiB
CSS

.custom-rule-wrapper {
padding: 20px;
height: 100%;
overflow-y: auto;
}
.ore-custom-rule-box {
display: flex;
flex-direction: column;
border: var(--menu-border-width) solid var(--menu-border-color);
background-color: var(--menu-background);
backdrop-filter: var(--menu-backdrop-filter) none;
margin-top: var(--size-4-4);
border-radius: var(--menu-radius);
max-height: 100%;
z-index: var(--layer-menu);
user-select: none;
}
.ore-custom-rule-box-header {
padding: 0;
}
.ore-custom-rule-box-header button {
background-color: transparent;
box-shadow: none;
-webkit-app-region: no-drag;
display: flex;
align-items: center;
justify-content: center;
padding: var(--size-2-2) var(--size-2-3);
cursor: var(--cursor);
border-radius: var(--clickable-icon-radius);
color: var(--icon-color);
opacity: var(--icon-opacity);
transition: opacity var(--anim-duration-fast) ease-in-out;
height: auto;
-electron-corner-smoothing: var(--corner-smoothing);
}
.ore-custom-rule-box-header button:hover {
box-shadow: none;
opacity: var(--icon-opacity-hover);
color: var(--icon-color-hover);
background-color: var(--background-modifier-hover);
}
.ore-custom-rule-box-header input {
flex-grow: 1;
background-color: transparent;
border: none;
color: var(--text-normal);
font-weight: var(--font-medium);
font-size: var(--font-ui-normal);
}
.ore-textarea {
min-height: 12lh;
height: 12lh;
width: 100%;
font-family: var(--font-monospace);
}
.ore-codemirror-container {
height: 250px;
width: 100%;
border: 1px solid var(--background-modifier-border);
border-radius: var(--input-radius);
overflow: hidden;
}
.ore-codemirror-container .cm-editor {
height: 100%;
}
.ore-codemirror-container .cm-scroller {
font-family: var(--font-monospace);
font-size: var(--font-text-size);
}
.ore-parent-query-container {
-webkit-app-region: no-drag;
display: flex;
flex-direction: column;
border: var(--menu-border-width) solid var(--menu-border-color);
background-color: var(--menu-background);
backdrop-filter: var(--menu-backdrop-filter);
border-radius: var(--menu-radius);
max-height: 100%;
z-index: var(--layer-menu);
user-select: none;
padding: var(--size-4-3);
--input-height: 28px;
}
.ore-parent-query-container > .filter-group {
padding-left: 0;
border-left: none;
}
.ore-parent-query-container .filter-group .filter-group {
background-color: var(--background-primary-alt);
border: var(--table-border-width) solid var(--table-border-color);
padding: var(--size-2-3);
border-radius: var(--radius-m);
}
.ore-parent-section-header {
margin-bottom: var(--size-4-3);
color: var(--text-normal);
font-weight: var(--font-medium);
font-size: var(--font-ui-normal);
}
.ore-parent-query-container .filter-group {
gap: var(--size-2-3);
display: flex;
flex-direction: column;
width: 100%;
}
.ore-parent-query-container .filter-group .filter-group-header{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--size-2-1);
}
.ore-parent-query-container .filter-group .filter-group-header .conjunction.dropdown {
border: none;
padding-top: 0;
background-color: transparent;
font-size: var(--font-ui-small);
box-shadow: none;
text-align: start;
}
.ore-parent-query-container .filter-group .filter-group-header-actions {
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
display: flex;
}
.ore-parent-query-container .filter-group .filter-group-statements {
width: 100%;
gap: var(--size-2-3);
display: flex;
flex-direction: column;
}
.ore-parent-query-container .filter-group .filter-group-header .conjunction.dropdown:hover {
background-color: var(--background-modifier-hover);
}
.ore-parent-query-container .filter-row{
display: flex;
align-items: center;
gap: var(--size-4-2);
}
.ore-filter-row:hover .ore-filter-row-actions {
opacity: 1;
}
.ore-parent-query-container .filter-row .conjunction {
min-width: 4.5rem;
font-size: var(--font-ui-small);
text-align: end;
}
.ore-parent-query-container .filter-row.mod-group > .conjunction {
display: none;
}
.ore-parent-query-container .filter-row .ore-filter-statement {
display: flex;
row-gap: var(--size-4-1);
flex-grow: 1;
flex-direction: column;
}
.ore-filter-expression:focus-within {
box-shadow: var(--metadata-property-box-shadow-focus);
border-radius: var(--metadata-property-radius-focus);
}
.ore-combobox-button {
display: flex;
align-items: center;
gap: var(--size-2-2);
min-height: var(--input-height);
padding-inline-start: var(--size-4-2);
padding-inline-end: var(--size-2-3);
overflow: hidden;
white-space: nowrap;
}
.ore-combobox-button:nth-of-type(2) {
border-width: 0 1px;
max-width: 33%;
align-self: stretch;
height: auto;
border-style: solid;
border-color: var(--background-modifier-border);
}
.ore-combobox-button:hover {
background: var(--background-modifier-hover);
}
.ore-combobox-button.ore-has-focus, .ore-combobox-button:focus {
background: var(--metadata-label-background-active);
}
.metadata-property.ore-has-focus {
--metadata-divider-color: var(--metadata-divider-color-focus);
background-color: var(--metadata-property-background-hover);
box-shadow: var(--metadata-property-box-shadow-focus);
border-radius: var(--metadata-property-radius-focus);
}
.ore-combobox-button *,
.ore-text-button-icon {
display: flex;
align-items: center;
}
.ore-combobox-button .ore-combobox-button-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-inline-end: auto;
}
.ore-combobox-button-label {
font-size: 13px;
}
.ore-combobox-button .ore-combobox-button-chevron {
--icon-size: var(--icon-xs);
--icon-stroke: var(--icon-xs-stroke-width);
align-items: center;
display: flex;
}
.ore-combobox-button .ore-combobox-button-icon {
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
color: var(--text-muted);
display: flex
;
align-items: center;
}
.ore-combobox-button-icon svg,
.ore-combobox-button-chevron svg,
.ore-combobox-clear-button svg {
height: var(--icon-size);
width: var(--icon-size);
stroke-width: var(--icon-stroke);
}
.ore-parent-query-container .ore-filter-rhs-container {
display: flex
;
align-items: center;
}
.ore-filter-rhs-container input,
.ore-filter-rhs-container input:active,
.ore-filter-rhs-container input:focus {
border-radius: 0;
border: none;
box-shadow: none;
}
.ore-filter-delete-inside {
position: absolute;
right: 4px;
flex-shrink: 0;
z-index: 1;
}
.ore-multi-select-container {
cursor: text;
display: inline-flex;
vertical-align: top;
flex-wrap: wrap;
flex: 1 1 auto;
gap: var(--size-2-3);
min-height: var(--input-height);
-webkit-app-region: no-drag;
background: var(--background-modifier-form-field);
color: var(--text-normal);
font-family: inherit;
padding: var(--input-padding);
border-radius: var(--input-radius);
outline: none;
}
.metadata-property-value .ore-multi-select-container {
--background-modifier-form-field: transparent;
--background-modifier-border: transparent;
align-items: center;
overflow: hidden;
font-size: var(--metadata-input-font-size);
}
.metadata-property-value .ore-multi-select-container:focus-within {
background-color: transparent;
}
.ore-multi-select-container:focus {
background-color: transparent;
}
.multi-select-pill-content {
word-break: break-word;
margin-inline-start: var(--pill-padding-x);
}
.ore-multi-select-input {
cursor: text;
font-family: var(--font-interface);
min-width: 1ch;
max-width: max-content;
color: var(--text-normal);
background-color: inherit;
border: none;
word-break: break-word;
}
.ore-multi-select-input[contenteditable="true"]:empty:before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.ore-parent-query-container .filter-row .ore-filter-row-actions {
display: flex;
padding: var(--size-2-1);
margin-inline-start: auto;
height: var(--input-height);
}
.ore-filter-expression {
--input-shadow: none;
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
--metadata-divider-width: 0px;
--metadata-label-width: 7em;
--metadata-input-font-size: var(--font-ui-small);
--metadata-property-box-shadow: 0 0 0 1px var(--background-modifier-border-hover);
background-color: var(--interactive-normal) !important;
width: 100%;
align-items: center;
display: flex;
}
.ore-parent-query-container .filter-group .filter-group-actions {
display: flex;
gap: 12px;
padding-left: 53px;
margin-top: 4px;
}
.ore-text-icon-button {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
cursor: pointer;
font-size: 13px;
padding: 4px 8px;
border-radius: 4px;
user-select: none;
}
.ore-text-icon-button:hover {
background: var(--background-modifier-hover);
color: var(--text-normal);
}
.ore-text-button-icon svg {
width: 16px;
height: 16px;
}
.ore-popover-list {
padding: var(--size-2-2);
}
.ore-popover-icon {
margin-right: 8px;
color: var(--text-muted);
display: flex;
align-items: center;
flex-shrink: 0;
}
.ore-popover-icon svg {
height: var(--icon-size);
width: var(--icon-size);
stroke-width: var(--icon-stroke);
}
.ore-popover-item {
padding: var(--size-2-2) var(--size-4-2);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 13px;
border-radius: var(--size-2-2);
}
.ore-popover,
.ore-suggestion-container {
display: flex;
position: absolute;
z-index: 60;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
box-shadow: var(--shadow-s);
border-radius: var(--radius-m);
max-height: var(--popover-max-height);
width: auto;
}
.prompt.ore-suggestion-container.ore-combobox {
--prompt-width: 500px;
align-self: stretch;
overflow: hidden;
flex-direction: column;
max-width: 500px !important;
max-height: 300px;
z-index: var(--layer-notice);
}
.prompt.ore-suggestion-container.ore-combobox .prompt-results{
padding: var(--size-2-3);
}
.prompt-input-container.ore-search-input-container .search-input-clear-button {
inset-inline-end: 2px;
--search-clear-button-size: 13px !important;
align-content: center;
position: absolute;
background: transparent;
border-radius: 50%;
color: var(--search-clear-button-color);
cursor: var(--cursor);
top: 0px;
bottom: 0px;
line-height: 0;
height: var(--input-height);
width: 28px;
margin: auto;
padding: 0 0;
text-align: center;
display: flex
;
justify-content: center;
align-items: center;
transition: color var(--anim-duration-fast) ease-in-out;
}
/* .ore-combobox {
} */
/* .ore-has-input-focus {
} */
.ore-conjunction-trigger {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: var(--text-normal);
padding: 4px 8px;
border-radius: 4px;
transition: background 0.2s;
}
.ore-conjunction-trigger span {
font-size: var(--font-ui-small);
}
.ore-conjunction-trigger:hover {
background-color: var(--background-modifier-hover);
}
.ore-conjunction-icon {
margin-left: 6px;
color: var(--text-muted);
display: flex;
}
.ore-combobox .ore-search-input-container {
--search-icon-color: var(--text-faint);
margin-top: 2px;
}
.ore-search-input-container {
position: relative;
}
.ore-search-input-container:before {
top: calc((var(--input-height) - var(--search-icon-size)) / 2);
inset-inline-start: var(--size-4-2);
position: absolute;
content: '';
height: var(--search-icon-size);
width: var(--search-icon-size);
display: block;
background-color: var(--search-icon-color);
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><circle cx=%2711%27 cy=%2711%27 r=%278%27></circle><line x1=%2721%27 y1=%2721%27 x2=%2716.65%27 y2=%2716.65%27></line></svg>");
mask-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><circle cx=%2711%27 cy=%2711%27 r=%278%27></circle><line x1=%2721%27 y1=%2721%27 x2=%2716.65%27 y2=%2716.65%27></line></svg>");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.ore-combobox .ore-search-input-container input[type=search] {
border: 0;
box-shadow: none;
background-color: transparent;
}
.ore-search-input-container input {
display: block;
width: 100%;
padding-inline-start: 36px;
}
/* .ore-search-input-clear-button {
} */
.ore-suggestion {
overflow-y: auto;
padding: var(--size-2-3);
}
.ore-suggestion-item,
.ore-suggestion-empty {
cursor: var(--cursor);
padding: var(--size-2-3) var(--size-4-3);
white-space: pre-wrap;
border-radius: var(--radius-s);
font-size: var(--font-ui-medium);
margin-bottom: 1px;
}
.ore-combobox .ore-suggestion-item {
font-size: var(--font-ui-small);
padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-2);
}
.ore-suggestion-item.ore-mod-complex {
align-items: baseline;
display: flex;
justify-content: space-between;
}
.ore-suggestion-item.ore-mod-complex .ore-suggestion-icon,
.ore-suggestion-item.ore-mod-complex .ore-suggestion-aux {
display: flex;
align-items: center;
align-self: center;
flex-shrink: 0;
}
.ore-suggestion-item.ore-mod-complex .ore-suggestion-icon .ore-suggestion-flair {
margin-top: 0;
margin-inline-start: var(--size-4-1);
margin-bottom: 0;
margin-inline-end: var(--size-4-3);
}
.ore-suggestion-item.ore-mod-complex .ore-suggestion-flair {
color: var(--text-muted);
opacity: var(--icon-opacity);
display: flex;
align-items: center;
}
.ore-suggestion-item.ore-mod-complex .ore-suggestion-content {
display: flex;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
margin-inline-end: auto;
}
/* .ore-mod-complex {
} */
/* .ore-mod-toggle {
} */
.ore-suggestion-item.ore-mod-toggle .ore-mod-checked {
--icon-size: var(--icon-xs);
--icon-stroke: var(--icon-xs-stroke-width);
order: 2;
}
/* .ore-mod-checked {
} */
.ore-suggestion-flair .svg-icon {
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
}
/* .ore-suggestion-title {
} */
/* .ore-suggestion-aux {
} */
.ore-list-value-container {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
min-height: 32px;
padding: 4px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
}
.ore-list-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background-color: var(--background-modifier-border);
border-radius: 4px;
font-size: 0.9em;
}
.ore-list-chip-remove {
cursor: pointer;
display: flex;
align-items: center;
opacity: 0.7;
}
.ore-list-chip-remove:hover {
opacity: 1;
}
.ore-list-input-container {
display: inline-flex;
flex: 1;
min-width: 120px;
}
.ore-list-input {
border: none;
outline: none;
background: transparent;
flex: 1;
min-width: 0;
}
.ore-text-input-wrapper {
position: relative;
}
.ore-rules-list-container {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
margin: var(--size-4-3) 0;
}
.ore-rule-list-item {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--size-2-2);
padding: var(--size-4-2) var(--size-4-3);
border: var(--menu-border-width) solid var(--menu-border-color);
background-color: var(--menu-background);
border-radius: var(--menu-radius);
cursor: grab;
transition: background-color var(--anim-duration-fast) ease-in-out;
}
.ore-rule-list-item:hover {
background-color: var(--background-modifier-hover);
}
.ore-rule-list-item[data-rule-enabled="false"]{
font-style: italic;
.ore-rule-name::after{
margin-left:1em;
content: "(disabled)";
}
}
.ore-rule-list-item.ore-dragging {
opacity: 0.5;
}
.ore-rule-list-item.ore-drag-over {
border-top: 2px solid var(--interactive-accent);
}
.ore-rule-drag-handle {
display: flex;
align-items: center;
color: var(--text-muted);
cursor: grab;
flex-shrink: 0;
}
.ore-rule-drag-handle:active, .ore-rule-list-item:active {
cursor: grabbing;
}
.ore-rule-move-input{
width: 2ch;
}
.ore-rule-move-input::-webkit-inner-spin-button ,
.ore-rule-move-input::-webkit-outer-spin-button {
opacity: 1;
}
.ore-rule-name {
flex: 1;
font-weight: var(--font-medium);
color: var(--text-normal);
}
.ore-rule-actions {
display: flex;
align-items: center;
gap: var(--size-2-1);
flex-shrink: 0;
}
.ore-edit-rule-modal .modal-content {
max-height: 80vh;
overflow-y: auto;
}
.ore-edit-rule-modal h2 {
margin-top: 0;
margin-bottom: var(--size-4-4);
}
.ore-edit-rule-modal h3 {
margin-top: var(--size-4-4);
margin-bottom: var(--size-4-2);
}
.ore-modal-button-container {
display: flex;
justify-content: flex-end;
gap: var(--size-4-2);
margin-top: var(--size-4-4);
padding-top: var(--size-4-4);
border-top: var(--border-width) solid var(--background-modifier-border);
}
.ore-margin-left-auto {
margin-left: auto;
}
.obsidian-custom-rule-hidden .markdown-source-view,
.obsidian-custom-rule-hidden .markdown-preview-view {
display: none !important;
}
.obsidian-custom-rule-render {
padding: 0px;
height: 100%;
overflow-y: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--background-primary);
z-index: 10;
}
/* In Live Preview mode, keep the editor accessible but overlay the custom view */
.obsidian-custom-view-live-preview {
/* The editor is kept visible behind, so we need to ensure our view is on top */
z-index: 5;
}
/* Ensure the editor is accessible in Live Preview mode when custom view is active */
.markdown-source-view:has(~ .obsidian-custom-view-render.obsidian-custom-view-live-preview) {
/* Keep editor visible but behind custom view */
position: relative;
z-index: 1;
}
.obsidian-custom-rule-hidden {
position: relative;
}
.obsidian-custom-rule-render .markdown-rendered-content {
margin-top: 20px;
}
.obsidian-custom-rule-render .markdown-preview-section {
padding: 0;
}
.obsidian-custom-rule-render .markdown-preview-section ul,
.obsidian-custom-rule-render .markdown-preview-section ol {
padding-left: 1.625em;
margin-block-start: 1em;
margin-block-end: 1em;
}
.obsidian-custom-rule-render .markdown-preview-section li {
margin-block-start: 0.3em;
margin-block-end: 0.3em;
}
.obsidian-custom-rule-render .markdown-preview-section li > ul,
.obsidian-custom-rule-render .markdown-preview-section li > ol {
margin-block-start: 0.3em;
margin-block-end: 0.3em;
}
.obsidian-custom-rule-render .markdown-preview-section p {
margin-block-start: 1em;
margin-block-end: 1em;
}
.obsidian-custom-rule-render .markdown-preview-section p:first-child {
margin-block-start: 0;
}
.obsidian-custom-rule-render .markdown-preview-section p:last-child {
margin-block-end: 0;
}
/* Override modal styles for suggestion modals */
.ore-suggestion-container.modal {
position: fixed !important;
margin: 0 !important;
transform: none !important;
max-width: 500px;
max-height: 300px;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
box-shadow: var(--shadow-s);
border-radius: var(--radius-m);
}
/* Hide modal background for suggestion modals */
.modal-container:has(.ore-suggestion-container) .modal-bg {
display: none !important;
}
.modal-container:has(.ore-suggestion-container) {
background: transparent !important;
}
.modal-container:has(.ore-suggestion-container).mod-dim {
background: transparent !important;
}
.ore-suggestion-container.modal .modal-content {
padding: 0;
max-height: 300px;
}
.ore-suggestion-container .prompt-input-container {
margin-top: 2px;
}
.ore-suggestion-container .prompt-input-container input {
color: var(--text-normal);
font-family: inherit;
padding: var(--input-padding);
padding-inline-start: 36px;
font-size: var(--font-ui-small);
border-radius: var(--input-radius);
height: var(--input-height);
outline: none;
}
.ore-modal-container {
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
width: 100%;
z-index: var(--layer-modal);
}
/* Combobox positioning */
.ore-combobox-positioned {
position: fixed !important;
margin: 0 !important;
transform: none !important;
left: var(--ore-combobox-left, auto);
top: var(--ore-combobox-top, auto);
}
/* Hide modal background */
.ore-modal-bg-hidden {
display: none !important;
}
/* Show clear button */
.ore-clear-button-hidden {
display: none !important;
}
.ore-command-id-list-item{
width: max(50%, fit-content);
}
/* if there is only one setting inside a group then the default margin for following items can be removed */
.ore-rules-list-container .setting-group .setting-items .setting-item:only-child {
margin-bottom: inherit;
}
.bases-list-group-list:has(li .custom-view-container){
padding:0;
margin:0;
}
.bases-list-entry .obsidian-custom-rule-render {
margin:0;
padding: 0;
width:fit-content;
height: fit-content;
max-width: 100%;
max-height: 100%;
border: 1px solid green;
}
/* Forces the view to be a vertical scrollable block, bypassing parent flex squashing. */
.rule-bases-view-container {
display: block !important;
width: 100%;
height: 100%;
overflow-y: auto;
padding:0;
margin:0;
box-sizing: border-box;
background-color: var(--background-primary);
color: var(--text-normal);
border: 1px solid var(--background-modifier-border);
}
.rule-bases-view-container:empty::after{
content: "Loading view...";
}
.ore-bases-grid-card{
display: flex;
justify-content: space-between;
font-size: var(--font-small);
}
.ore-bases-grid-card .card-label{
color: var(--text-muted);
}
.ore-bases-grid-card-file-name {
font-weight: bold;
border-bottom: 1px solid var(--background-modifier-border);
margin-bottom: 4px;
padding-bottom: 4px;
}
.ore-base-group-cell {
padding: 8px;
border-bottom: 1px solid var(--background-modifier-border-soft);
}
.ore-bases-file-link {
color: var(--text-accent);
cursor: pointer;
}
.ore-command-config-name {
font-weight: normal;
}