mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
4763199f16
Remove !important flags from API key validation and transparent button styles by using doubled class selectors (.class.class) to increase CSS specificity. Add explanatory comments documenting the specificity approach for future maintainability.
609 lines
No EOL
13 KiB
CSS
609 lines
No EOL
13 KiB
CSS
/* ============================== */
|
|
/* Main View Customization */
|
|
/* ============================== */
|
|
|
|
.workspace-leaf-content[data-type="vaultkeeper-ai-main-view"] {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="vaultkeeper-ai-main-view"] .view-content {
|
|
align-self: center;
|
|
max-width: 1000px;
|
|
background-color: var(--background-secondary);
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Mobile Drawer Full Width */
|
|
/* ============================== */
|
|
|
|
body:not(.is-tablet) .workspace-drawer.mod-right {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Drawer element collapse animation */
|
|
/* ============================== */
|
|
|
|
.vaultKeeper-drawer-hiding {
|
|
overflow: hidden;
|
|
height: var(--vaultKeeper-drawer-height);
|
|
padding-top: var(--vaultKeeper-drawer-padding-top);
|
|
padding-bottom: var(--vaultKeeper-drawer-padding-bottom);
|
|
transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
|
|
}
|
|
|
|
.vaultKeeper-drawer-collapsed {
|
|
overflow: hidden;
|
|
height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
|
|
}
|
|
|
|
.vaultKeeper-drawer-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.vaultKeeper-drawer-restoring {
|
|
overflow: hidden;
|
|
display: block;
|
|
height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
|
|
}
|
|
|
|
.vaultKeeper-drawer-expanding {
|
|
overflow: hidden;
|
|
height: var(--vaultKeeper-drawer-height);
|
|
padding-top: var(--vaultKeeper-drawer-padding-top);
|
|
padding-bottom: var(--vaultKeeper-drawer-padding-bottom);
|
|
transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Quick Actions Notice */
|
|
/* ============================== */
|
|
|
|
.quick-action-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Diff View Customization */
|
|
/* ============================== */
|
|
|
|
.workspace-leaf-content[data-type="vaultkeeper-ai-diff-view"] .view-content {
|
|
container-type: size;
|
|
container-name: diff-container;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Settings Styles */
|
|
/* ============================== */
|
|
|
|
/* Class is doubled to raise specificity above Obsidian's input border
|
|
styles without referencing their selectors (future-proof) or !important. */
|
|
.api-key-setting-ok.api-key-setting-ok input[type="text"],
|
|
.api-key-setting-ok.api-key-setting-ok input[type="password"],
|
|
.api-key-setting-ok.api-key-setting-ok textarea {
|
|
border-color: var(--color-green);
|
|
}
|
|
|
|
.api-key-setting-error.api-key-setting-error input[type="text"],
|
|
.api-key-setting-error.api-key-setting-error input[type="password"],
|
|
.api-key-setting-error.api-key-setting-error textarea {
|
|
border-color: var(--color-red);
|
|
}
|
|
|
|
.api-key-setting-error .setting-item-control {
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
.ai-exclusions-input {
|
|
width: max(350px, 100%);
|
|
height: 110px;
|
|
font: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
resize: none;
|
|
}
|
|
|
|
.setting-item-memories-disabled-accent .checkbox-container {
|
|
background-color: var(--interactive-accent-disabled-accent);
|
|
}
|
|
|
|
.setting-item-memories-disabled-accent .setting-item-info {
|
|
font-weight: var(--font-light);
|
|
}
|
|
|
|
.setting-item-memories-disabled .checkbox-container {
|
|
background-color: var(--interactive-accent-disabled);
|
|
}
|
|
|
|
/* ============================== */
|
|
/* CSS Variables for Common Components */
|
|
/* ============================== */
|
|
|
|
/* Doubled class + explicit interactive states beat Obsidian's
|
|
button / button:hover / button:focus styles (specificity 0-1-1)
|
|
without referencing their selectors or using !important. */
|
|
.transparent-button.transparent-button,
|
|
.transparent-button.transparent-button:hover,
|
|
.transparent-button.transparent-button:focus,
|
|
.transparent-button.transparent-button:active {
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.search-trigger {
|
|
color: var(--interactive-accent);
|
|
cursor: default;
|
|
}
|
|
|
|
.search-trigger:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Typing-in animation (used across components) */
|
|
.typing-in {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
animation: reveal-center var(--typing-in-duration, 1.5s) ease-in-out forwards;
|
|
max-width: 0;
|
|
margin: 0 auto;
|
|
padding: 5px;
|
|
}
|
|
|
|
@keyframes reveal-center {
|
|
0% {
|
|
max-width: 0;
|
|
opacity: 0;
|
|
filter: blur(1px);
|
|
}
|
|
100% {
|
|
max-width: 100%;
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
|
|
.conversation-history-modal {
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
.conversation-history-modal .modal-header {
|
|
display: none;
|
|
}
|
|
.conversation-history-modal .modal-close-button {
|
|
display: none;
|
|
}
|
|
|
|
.help-modal {
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
.help-modal .modal-header {
|
|
display: none;
|
|
}
|
|
.help-modal .modal-close-button {
|
|
display: none;
|
|
}
|
|
|
|
.planning-model-description-tip {
|
|
font-size: var(--font-smaller);
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.top-bar-button {
|
|
margin: var(--size-4-2) 0px var(--size-4-2) 0px;
|
|
padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
|
|
color: var(--text-muted);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.top-bar-button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.error-selector {
|
|
display: inline-block;
|
|
color: var(--color-red);
|
|
border: var(--color-red);
|
|
border-style: solid;
|
|
border-width: var(--border-width);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-2-3);
|
|
margin: var(--size-4-2) 0;
|
|
}
|
|
|
|
.rate-limit-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.rate-limit-countdown {
|
|
font-size: var(--font-smaller);
|
|
}
|
|
|
|
.rate-limit-info {
|
|
font-size: var(--font-smaller);
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.rate-limit-link {
|
|
color: var(--interactive-accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rate-limit-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* CSS Variables for Theming */
|
|
/* ============================== */
|
|
|
|
/* Custom variables mapped to Obsidian theme variables */
|
|
body {
|
|
--code-background-inline: var(--code-background);
|
|
--text-color: var(--text-normal);
|
|
--link-color: var(--link-color);
|
|
--blockquote-border: var(--blockquote-border-color);
|
|
--table-border: var(--table-border-color);
|
|
--table-header-background: var(--table-header-background);
|
|
--hr-color: var(--hr-color);
|
|
--alt-background-primary: color-mix(
|
|
in hsl shorter hue,
|
|
var(--background-primary) 75%,
|
|
hsl(0 0% 0%) 25%
|
|
);
|
|
--interactive-accent-disabled-accent: color-mix(
|
|
in hsl shorter hue,
|
|
var(--background-modifier-border-hover) 50%,
|
|
var(--interactive-accent) 40%
|
|
);
|
|
|
|
--interactive-accent-disabled: color-mix(
|
|
in hsl shorter hue,
|
|
var(--background-modifier-border-hover) 50%,
|
|
var(--background-primary) 40%
|
|
);
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Additional Markdown Styles */
|
|
/* ============================== */
|
|
|
|
/* Headings in assistant messages */
|
|
.message-bubble.assistant h1 {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
margin: 0.67em 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.message-bubble.assistant h2 {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
margin: 0.75em 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.message-bubble.assistant h3 {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin: 0.83em 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.message-bubble.assistant h4 {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
margin: 1.12em 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.message-bubble.assistant h5 {
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
margin: 1.5em 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.message-bubble.assistant h6 {
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
margin: 1.67em 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
.message-bubble.assistant p {
|
|
margin: 0.5em 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Lists */
|
|
.message-bubble.assistant ul,
|
|
.message-bubble.assistant ol {
|
|
margin: 0.5em 0;
|
|
padding-left: 2em;
|
|
list-style-position: outside;
|
|
}
|
|
|
|
.message-bubble.assistant ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.message-bubble.assistant ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.message-bubble.assistant li {
|
|
margin: 0.25em 0;
|
|
padding-left: 0.25em;
|
|
display: list-item;
|
|
}
|
|
|
|
/* Handle nested lists properly */
|
|
.message-bubble.assistant ol ol,
|
|
.message-bubble.assistant ul ul,
|
|
.message-bubble.assistant ol ul,
|
|
.message-bubble.assistant ul ol {
|
|
margin: 0.25em 0;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
/* Ensure nested list numbering works correctly */
|
|
.message-bubble.assistant ol ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
.message-bubble.assistant ol ol ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
/* Fix paragraph spacing inside list items */
|
|
.message-bubble.assistant li > p {
|
|
margin: 0;
|
|
}
|
|
|
|
.message-bubble.assistant li > p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.message-bubble.assistant li > p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Code blocks */
|
|
.message-bubble.assistant pre {
|
|
background-color: var(--code-background);
|
|
border-radius: 4px;
|
|
padding: 0.5em;
|
|
overflow-x: auto;
|
|
margin: 0.5em 0;
|
|
position: relative;
|
|
}
|
|
|
|
.message-bubble.assistant code {
|
|
background-color: var(--code-background-inline);
|
|
border-radius: 3px;
|
|
padding: 0.2em 0.4em;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.message-bubble.assistant pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
.message-bubble.assistant blockquote {
|
|
border-left: 4px solid var(--blockquote-border);
|
|
padding-left: 1em;
|
|
margin: 0.5em 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Tables */
|
|
.message-bubble.assistant table {
|
|
border-collapse: collapse;
|
|
margin: 0.5em 0;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
|
|
.message-bubble.assistant th,
|
|
.message-bubble.assistant td {
|
|
border: 1px solid var(--table-border);
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.message-bubble.assistant th {
|
|
background-color: var(--table-header-background);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Table alignment classes from GFM */
|
|
.message-bubble.assistant th[align="center"],
|
|
.message-bubble.assistant td[align="center"] {
|
|
text-align: center;
|
|
}
|
|
|
|
.message-bubble.assistant th[align="right"],
|
|
.message-bubble.assistant td[align="right"] {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Links */
|
|
.message-bubble.assistant a {
|
|
color: var(--link-color-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.message-bubble.assistant a:hover {
|
|
text-decoration: var(--link-decoration-hover);
|
|
}
|
|
|
|
/* Horizontal rules */
|
|
.message-bubble.assistant hr {
|
|
border: none;
|
|
border-top: 1px solid var(--hr-color);
|
|
margin: 1em 0;
|
|
}
|
|
|
|
/* Images */
|
|
.message-bubble.assistant img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
/* Emphasis */
|
|
.message-bubble.assistant em {
|
|
font-style: italic;
|
|
}
|
|
|
|
.message-bubble.assistant strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Strikethrough */
|
|
.message-bubble.assistant del {
|
|
text-decoration: line-through;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Additional HTML Elements */
|
|
/* ============================== */
|
|
|
|
/* Keyboard input */
|
|
.message-bubble.assistant kbd {
|
|
display: inline-block;
|
|
padding: 0.2em 0.4em;
|
|
font-size: 0.875em;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
line-height: 1;
|
|
color: var(--text-color);
|
|
vertical-align: middle;
|
|
background-color: var(--code-background-inline);
|
|
border: 1px solid var(--table-border);
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Mark/highlight */
|
|
.message-bubble.assistant mark {
|
|
background-color: var(--text-highlight-bg);
|
|
color: var(--text-normal);
|
|
padding: 0.2em;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Subscript and Superscript */
|
|
.message-bubble.assistant sub {
|
|
font-size: 0.75em;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.message-bubble.assistant sup {
|
|
font-size: 0.75em;
|
|
vertical-align: super;
|
|
}
|
|
|
|
|
|
/* Definition lists */
|
|
.message-bubble.assistant dl {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.message-bubble.assistant dt {
|
|
font-weight: 600;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.message-bubble.assistant dd {
|
|
margin-left: 2em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* Details/Summary (collapsible sections) */
|
|
.message-bubble.assistant details {
|
|
margin: 0.5em 0;
|
|
padding: 0.5em;
|
|
border: 1px solid var(--table-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message-bubble.assistant summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.message-bubble.assistant details[open] summary {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Responsive adjustments */
|
|
/* ============================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.message-bubble.assistant table {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.message-bubble.assistant th,
|
|
.message-bubble.assistant td {
|
|
padding: 0.25em;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.message-bubble.assistant pre {
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Print styles */
|
|
/* ============================== */
|
|
|
|
@media print {
|
|
.message-bubble.assistant {
|
|
color: #000000;
|
|
}
|
|
|
|
.message-bubble.assistant a {
|
|
color: #0969da;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.message-bubble.assistant pre,
|
|
.message-bubble.assistant code {
|
|
background-color: #f6f8fa;
|
|
color: #000000;
|
|
}
|
|
} |