.calloutmanager-latest-changes { padding: 0.75em 0; border-top: 1px solid var(--background-modifier-border); } .calloutmanager-latest-changes .calloutmanager-changelog-section > :first-child { margin-top: 0; } .calloutmanager-latest-changes .calloutmanager-changelog-section > :last-child { margin-bottom: 0; } .calloutmanager-latest-changes .callout { background: none; } .mod-sidebar-layout .calloutmanager-setting-tab.vertical-tab-content { position: relative; padding: 0 !important; display: flex; flex-direction: column; overflow-y: initial; } .mod-sidebar-layout .calloutmanager-setting-tab.vertical-tab-content { --cm-setting-tab-controls-margin: calc(var(--size-4-12) - (var(--size-4-2) - var(--size-4-1))); } body.is-phone .mod-sidebar-layout .calloutmanager-setting-tab.vertical-tab-content { --cm-setting-tab-controls-margin: var(--size-4-2); } .calloutmanager-setting-tab-header { display: flex; align-items: center; padding-top: var(--size-4-1); padding-bottom: var(--size-4-1); padding-right: var(--size-4-2); border-bottom: 1px solid var(--background-modifier-border); background-color: var(--background-secondary); } body.is-phone .calloutmanager-setting-tab-header { background-color: var(--background-primary); } .calloutmanager-setting-tab-nav { display: flex; align-items: center; justify-content: center; min-width: var(--size-4-12); min-height: calc(var(--size-4-2) + var(--input-height)); } .calloutmanager-setting-tab-nav button { padding: var(--size-4-1) var(--size-4-2); box-shadow: none; } body.is-mobile .calloutmanager-setting-tab-nav { padding: var(--size-4-2); } body.is-phone .calloutmanager-setting-tab-nav, body.is-phone .calloutmanager-setting-tab-nav button { height: 100%; min-width: unset; } .calloutmanager-setting-tab-controls { flex: 3 3; display: flex; align-items: center; justify-content: end; gap: var(--size-4-2); padding-left: var(--cm-setting-tab-controls-margin); } .calloutmanager-setting-tab-controls > *:not(.modal-close-button) { display: contents; } .calloutmanager-setting-tab-controls > *:not(.modal-close-button) > input[type="text"] { flex: 1 1 auto; } .calloutmanager-setting-tab-controls .modal-close-button { flex: 0 0 auto; position: static; left: unset; top: 0; right: 0; bottom: 0; } body.is-phone .calloutmanager-setting-tab-controls .modal-close-button { display: none; } .calloutmanager-setting-tab-title { flex: 1 1 auto; flex-wrap: nowrap; } .calloutmanager-setting-tab-title h2, .calloutmanager-setting-tab-title h3 { margin: 0; word-break: keep-all; } .calloutmanager-setting-tab-title h3 { font-size: var(--font-ui-small); } body:not(.is-phone) .calloutmanager-setting-tab-title h3 { font-size: 0.8em; } body.is-phone .calloutmanager-setting-tab-title h2:has(+ h3) { display: none; } .calloutmanager-setting-tab-viewport { flex: 1 2 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .calloutmanager-setting-tab-content { flex: 1 1 auto; } .calloutmanager-setting-tab-content body:not(.is-phone) { min-height: 100%; } .calloutmanager-callout-resolver { display: none !important; } .calloutmanager-search-error { width: 60%; } body.is-phone .calloutmanager-search-error { width: 100%; } .calloutmanager-search-error code { word-break: break-all; color: var(--text-accent); } .calloutmanager-search-error-suggestions { color: var(--text-muted); } .calloutmanager-preview-container-with-button { --calloutmanager-callout-edit-buttons-size: calc(var(--input-height) + 2 * var(--size-4-3)); display: grid; grid-template-columns: 1fr var(--calloutmanager-callout-edit-buttons-size) var( --calloutmanager-callout-edit-buttons-size ); align-items: center; gap: var(--size-4-2); } body.is-phone .calloutmanager-preview-container-with-button { --calloutmanager-callout-edit-buttons-size: var(--input-height); } .calloutmanager-preview-container-with-button > button { width: var(--calloutmanager-callout-edit-buttons-size); height: 100%; } body:not(.is-phone) .calloutmanager-preview-container-with-button > button { display: block; padding: 0 !important; } .calloutmanager-changelog > *:not(:first-child) { margin-top: 1em; } .calloutmanager-changelog details > summary::marker { color: var(--text-faint); } .calloutmanager-changelog details[open] > summary::marker { color: var(--text-muted); } .calloutmanager-changelog details .calloutmanager-changelog-section { border-bottom: 1px solid var(--background-modifier-border); margin-bottom: 1.25em; padding-bottom: 1.25em; } .calloutmanager-changelog details .calloutmanager-changelog-section > :last-child { margin-bottom: 0; } .calloutmanager-changelog details:not([data-current-version="true"]) .calloutmanager-changelog-heading { color: var(--text-muted); } .calloutmanager-changelog-section .callout { --callout-padding: 0.5em; } .calloutmanager-changelog-section .callout > .callout-content { margin-left: calc(18px + 0.25em); } .calloutmanager-changelog-section .callout > .callout-content > :first-child { margin-top: 0; } .calloutmanager-changelog-section .callout > .callout-content > :last-child { margin-bottom: 0; } .callout[data-calloutmanager-changelog-callout="new"] { --callout-icon: lucide-plus; --callout-color: 30, 160, 30; } .theme-dark .callout[data-calloutmanager-changelog-callout="new"] { --callout-color: 60, 250, 60; } .callout[data-calloutmanager-changelog-callout="fix"] { --callout-icon: lucide-wrench; --callout-color: 128, 128, 128; } .theme-dark .callout[data-calloutmanager-changelog-callout="fix"] { --callout-color: 180, 180, 180; } .callout[data-calloutmanager-changelog-callout="change"] { --callout-icon: lucide-edit-3; --callout-color: 10, 170, 210; } .theme-dark .callout[data-calloutmanager-changelog-callout="change"] { --callout-color: 60, 157, 210; } .calloutmanager-changelog-heading { display: inline; font-weight: bold; } .calloutmanager-centerbox { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .calloutmanager-pane button[disabled] { box-shadow: none; background-color: var(--interactive-normal); } .calloutmanager-pane button[disabled]:hover { background-color: var(--interactive-normal); cursor: not-allowed; } .calloutmanager-pane input[type="color"][disabled] { cursor: not-allowed; } .calloutmanager-pane input:invalid:not(:placeholder-shown), .calloutmanager-pane input.invalid { border-color: var(--text-error); } body.is-phone .calloutmanager-pane input[type="color"]::-webkit-color-swatch { border-radius: var(--button-radius); border: red 2px solid; border: 1px solid var(--checkbox-border-color); } .calloutmanager-pane .clickable-icon.mod-warning { color: var(--text-error); background: rgba(0, 0, 0, 0); } .calloutmanager-pane .clickable-icon.mod-warning:hover { color: var(--text-error); background: rgba(0, 0, 0, 0); } .calloutmanager-pane input[type="text"].mod-error { border-color: var(--text-error); } body.is-phone .calloutmanager-setting-tab-content .setting-item-control button.clickable-icon, body.is-phone .calloutmanager-setting-tab-controls button.clickable-icon { width: var(--button-height); } body.is-phone .calloutmanager-setting-tab-content .setting-item-control button.clickable-icon { border: 1px solid var(--checkbox-border-color); } .callout.calloutmanager-preview { mix-blend-mode: unset !important; margin: 0 !important; } .calloutmanager-preview-container { margin-top: 0.5em; margin-bottom: 0.5em; } .calloutmanager-edit-callout-section { border-top: 1px solid var(--background-modifier-border); padding-top: var(--size-4-3); padding-bottom: var(--size-4-6); } .calloutmanager-edit-callout-section:empty { display: none; } .calloutmanager-edit-callout-section--noborder { border-top: none; } .calloutmanager-edit-callout-section .setting-item .setting-item-description p { margin: 0; } .calloutmanager-edit-callout-section h2 { margin-bottom: 0.3em; } .calloutmanager-edit-callout-section h2 + p { margin-top: 0; } .calloutmanager-edit-callout-appearance .setting-item { border-top: none; padding-top: 0.375em; } .calloutmanager-edit-callout-appearance .setting-item:has(+ .setting-item) { padding-bottom: 0.375em; } body.is-phone .calloutmanager-edit-callout-appearance .setting-item:has(+ .setting-item) { margin-bottom: 0.7em; } .calloutmanager-edit-callout-appearance-json pre { border: rgba(var(--background-modifier-border)) 1px solid; border-radius: var(--callout-radius); padding: var(--size-4-2); background: var(--background-primary-alt); overflow-x: auto; margin: 0; } .calloutmanager-edit-callout-appearance-reset { width: 100%; } .calloutmanager-edit-callout-preview { padding-bottom: var(--size-4-8); min-height: 14em; } body.is-mobile .calloutmanager-edit-callout-preview { min-height: 35vh; } .calloutmanager-preview-editor { resize: vertical; width: 100%; min-height: 6em; margin-top: var(--size-4-3); background: rgba(0, 0, 0, 0); font-size: var(--font-text-size); font-family: var(--font-text); line-height: var(--line-height-normal); } .calloutmanager-edit-callout-info { color: var(--text-muted); } .calloutmanager-edit-callout--invalid-color { color: var(--text-error); } .calloutmanager-edit-callout--callout-color { color: rgb(var(--resolved-callout-color)); } .calloutmanager-edit-callout--callout-id, .calloutmanager-edit-callout--callout-icon, .calloutmanager-edit-callout--callout-source { color: var(--text-normal); } :root { --calloutmanager-reset-button-disabled-opacity: 0.3; } .calloutmanager-reset-button:is(.is-disabled, [disabled]) { opacity: var(--calloutmanager-reset-button-disabled-opacity); } .calloutmanager-reset-button:is(.is-disabled, [disabled]):hover { background-color: rgba(0, 0, 0, 0); } .calloutmanager-reset-button:is(.is-disabled, [disabled]):active { color: var(--icon-color); } :root { --calloutmanager-icon-picker-size: 100px; --calloutmanager-icon-picker-gap: 8px; --calloutmanager-icon-picker-icon-size: 2.5em; --calloutmanager-icon-picker-id-size: 0.75em; } .calloutmanager-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, var(--calloutmanager-icon-picker-size)); grid-auto-rows: var(--calloutmanager-icon-picker-size); gap: var(--calloutmanager-icon-picker-gap); justify-content: center; } .calloutmanager-icon-picker .calloutmanager-icon-preview { height: 100%; --calloutmanager-icon-preview-icon-size: var(--calloutmanager-icon-picker-icon-size); --calloutmanager-icon-preview-id-size: var(--calloutmanager-icon-picker-id-size); } :root { --calloutmanager-icon-preview-icon-size: 1em; --calloutmanager-icon-preview-id-size: 0.8em; } .calloutmanager-icon-preview { position: relative; height: unset; min-height: 3em; display: flex; flex-direction: column; } .calloutmanager-icon-preview--icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 0.5em)); --icon-size: var(--calloutmanager-icon-picker-icon-size); } .calloutmanager-icon-preview--id { width: 100%; margin-top: auto; white-space: normal; word-break: break-word; hyphens: manual; font-size: var(--calloutmanager-icon-picker-id-size); }