mirror of
https://github.com/jackcarey/obsidian-rule-engine.git
synced 2026-07-22 14:00:24 +00:00
625 lines
14 KiB
CSS
625 lines
14 KiB
CSS
.custom-view-wrapper {
|
|
padding: 20px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.movie-cover img {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.cv-custom-view-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);
|
|
/* box-shadow: var(--menu-shadow); */
|
|
max-height: 100%;
|
|
/* position: fixed; */
|
|
z-index: var(--layer-menu);
|
|
user-select: none;
|
|
}
|
|
|
|
.cv-custom-view-box-header {
|
|
padding: 0;
|
|
}
|
|
.cv-custom-view-box-header button {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
-webkit-app-region: no-drag;
|
|
background-color: transparent;
|
|
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);
|
|
|
|
}
|
|
|
|
.cv-custom-view-box-header button:hover {
|
|
box-shadow: none;
|
|
opacity: var(--icon-opacity-hover);
|
|
color: var(--icon-color-hover);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
|
|
|
|
.cv-custom-view-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);
|
|
}
|
|
|
|
|
|
.cv-textarea {
|
|
height: 250px;
|
|
width: 100%;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.cv-codemirror-container {
|
|
height: 250px;
|
|
width: 100%;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--input-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cv-codemirror-container .cm-editor {
|
|
height: 100%;
|
|
}
|
|
|
|
.cv-codemirror-container .cm-scroller {
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-text-size);
|
|
}
|
|
|
|
/* Container Reset */
|
|
.cv-bases-query-container, .cv-bases-template-container {
|
|
padding: var(--size-4-4);
|
|
}
|
|
.cv-bases-query-container {
|
|
padding: var(--size-4-4);
|
|
border-bottom: var(--border-width) solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Group Container */
|
|
.cv-filter-group {
|
|
gap: var(--size-2-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Top Level Group: No left border/padding */
|
|
.cv-bases-query-container > .cv-filter-group {
|
|
padding-left: 0;
|
|
border-left: none;
|
|
}
|
|
|
|
.cv-bases-query-container .cv-filter-group .cv-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);
|
|
}
|
|
|
|
.cv-bases-section-header {
|
|
margin-bottom: var(--size-4-3);
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-medium);
|
|
font-size: var(--font-ui-normal);
|
|
}
|
|
|
|
/* Group Header */
|
|
.cv-filter-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: var(--size-2-1);
|
|
}
|
|
|
|
.cv-filter-group-statements {
|
|
width: 100%;
|
|
gap: var(--size-2-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Conjunction Dropdown (All/Any/None) */
|
|
select.cv-conjunction {
|
|
padding-top: 0;
|
|
background-color: transparent;
|
|
font-size: var(--font-ui-small);
|
|
box-shadow: none;
|
|
text-align: start;
|
|
}
|
|
select.cv-conjunction:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
box-shadow: none;
|
|
|
|
}
|
|
.cv-bases-query-container .cv-filter-group .cv-filter-group-header .cv-conjunction.cv-dropdown {
|
|
padding-top: 0;
|
|
background-color: transparent;
|
|
font-size: var(--font-ui-small);
|
|
box-shadow: none;
|
|
text-align: start;
|
|
}
|
|
|
|
/* Filter Row */
|
|
.cv-filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
/* "Where" / "And" Label */
|
|
.cv-conjunction-text {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 32px;
|
|
min-width: 45px;
|
|
justify-content: flex-end;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
user-select: none;
|
|
}
|
|
|
|
/* The Main Filter Statement Box */
|
|
.cv-filter-statement {
|
|
--input-shadow: none;
|
|
--icon-size: var(--icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width);
|
|
--metadata-divider-width: 0px;
|
|
--metadata-label-width: 7em;
|
|
font-size: var(--font-ui-small);
|
|
box-shadow: 0 0 0 1px var(--background-modifier-border-hover);
|
|
border-radius: var(--menu-radius);
|
|
background-color: var(--interactive-normal);
|
|
width: 100%;
|
|
align-items: center;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.cv-filter-statement:focus-within {
|
|
box-shadow: var(--metadata-property-box-shadow-focus);
|
|
border-radius: var(--metadata-property-radius-focus);
|
|
}
|
|
|
|
|
|
|
|
/* Combobox Buttons (Property & Operator) */
|
|
.cv-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;
|
|
}
|
|
|
|
.cv-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);
|
|
}
|
|
|
|
.cv-combobox-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.cv-combobox-button-label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.cv-combobox-button *, .cv-text-button-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cv-combobox-button .cv-combobox-button-chevron {
|
|
--icon-size: var(--icon-xs);
|
|
--icon-stroke: var(--icon-xs-stroke-width);
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.cv-combobox-button-icon svg,
|
|
.cv-combobox-button-chevron svg,
|
|
.cv-combobox-clear-button svg {
|
|
height: var(--icon-size);
|
|
width: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
|
|
}
|
|
|
|
|
|
/* Value Input Container */
|
|
.cv-filter-rhs-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 100px;
|
|
padding: 0 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.cv-filter-rhs-container input, .cv-filter-rhs-container input:active, .cv-filter-rhs-container input:focus {
|
|
border-radius: 0;
|
|
border: none ;
|
|
box-shadow: none ;
|
|
}
|
|
|
|
.cv-filter-delete-inside {
|
|
position: absolute;
|
|
right: 4px;
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cv-multi-select-input {
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
padding-right: 28px;
|
|
outline: none;
|
|
padding: 4px;
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Row Actions (Delete/Advanced) */
|
|
.cv-filter-row-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
opacity: 0; /* Hidden until hover */
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.cv-filter-row:hover .cv-filter-row-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.cv-clickable-icon {
|
|
-webkit-app-region: no-drag;
|
|
background-color: transparent;
|
|
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);
|
|
}
|
|
@media (hover: hover) {
|
|
.cv-clickable-icon:hover {
|
|
box-shadow: none;
|
|
opacity: var(--icon-opacity-hover);
|
|
color: var(--icon-color-hover);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
}
|
|
|
|
/* Bottom Action Buttons (+ Add filter) */
|
|
.cv-filter-group-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding-left: 53px; /* Align with statements */
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.cv-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;
|
|
}
|
|
|
|
.cv-text-icon-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.cv-text-button-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.cv-popover-list {
|
|
padding: var(--size-2-2);
|
|
}
|
|
|
|
.cv-popover-icon {
|
|
margin-right: 8px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cv-popover-icon svg {
|
|
height: var(--icon-size);
|
|
width: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
}
|
|
|
|
.cv-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);
|
|
}
|
|
|
|
.cv-popover, .cv-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);
|
|
}
|
|
|
|
|
|
/* Conjunction Text Styles */
|
|
.cv-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;
|
|
}
|
|
.cv-conjunction-trigger span {
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
.cv-conjunction-trigger:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.cv-conjunction-icon {
|
|
margin-left: 6px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
}
|
|
|
|
.cv-suggestion-container {
|
|
align-self: stretch;
|
|
overflow: hidden;
|
|
display: flex;
|
|
position: absolute;
|
|
flex-direction: column;
|
|
max-width: 500px;
|
|
max-height: 300px;
|
|
z-index: var(--layer-notice);
|
|
|
|
}
|
|
|
|
.cv-combobox {
|
|
|
|
}
|
|
|
|
.cv-has-input-focus {
|
|
|
|
}
|
|
|
|
.cv-combobox .cv-search-input-container {
|
|
--search-icon-color: var(--text-faint);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.cv-search-input-container {
|
|
position: relative;
|
|
}
|
|
|
|
.cv-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>");
|
|
-webkit-mask-repeat: no-repeat;
|
|
}
|
|
.cv-combobox .cv-search-input-container input[type=search] {
|
|
border: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.cv-search-input-container input {
|
|
display: block;
|
|
width: 100%;
|
|
padding-inline-start: 36px;
|
|
}
|
|
|
|
.cv-search-input-clear-button {
|
|
|
|
}
|
|
|
|
.cv-suggestion {
|
|
overflow-y: auto;
|
|
padding: var(--size-2-3);
|
|
|
|
}
|
|
|
|
.cv-combobox .cv-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);
|
|
}
|
|
|
|
.cv-suggestion-item.cv-mod-complex {
|
|
align-items: baseline;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.combobox .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);
|
|
}
|
|
|
|
.cv-suggestion-item {
|
|
cursor: var(--cursor);
|
|
padding: var(--size-2-3) var(--size-4-3);
|
|
white-space: pre-wrap;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
.cv-suggestion-item, .cv-suggestion-empty {
|
|
font-size: var(--font-ui-medium);
|
|
margin-bottom: 1px;
|
|
}
|
|
.cv-mod-complex {
|
|
|
|
}
|
|
|
|
.cv-mod-toggle {
|
|
|
|
}
|
|
|
|
.cv-suggestion-item.cv-is-selected {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.cv-suggestion-item.cv-mod-toggle .cv-mod-checked {
|
|
--icon-size: var(--icon-xs);
|
|
--icon-stroke: var(--icon-xs-stroke-width);
|
|
order: 2;
|
|
}
|
|
.cv-suggestion-flair .svg-icon {
|
|
--icon-size: var(--icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width);
|
|
}
|
|
|
|
.cv-suggestion-item.cv-mod-complex .cv-suggestion-icon, .cv-suggestion-item.cv-mod-complex .cv-suggestion-aux {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cv-mod-checked {
|
|
|
|
}
|
|
|
|
.cv-suggestion-item.cv-mod-complex .cv-suggestion-icon .cv-suggestion-flair {
|
|
margin-top: 0;
|
|
margin-inline-start: var(--size-4-1);
|
|
margin-bottom: 0;
|
|
margin-inline-end: var(--size-4-3);
|
|
}
|
|
.cv-suggestion-item.cv-mod-complex .cv-suggestion-flair {
|
|
color: var(--text-muted);
|
|
opacity: var(--icon-opacity);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cv-suggestion-item.cv-mod-complex .cv-suggestion-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-inline-end: auto;
|
|
}
|
|
.cv-suggestion-title {
|
|
|
|
}
|
|
|
|
.cv-suggestion-aux {
|
|
|
|
}
|
|
|
|
.cv-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;
|
|
}
|
|
|
|
.cv-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;
|
|
}
|
|
|
|
.cv-list-chip-remove {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.cv-list-chip-remove:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cv-list-input-container {
|
|
display: inline-flex;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.cv-list-input {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cv-text-input-wrapper {
|
|
position: relative;
|
|
}
|