mirror of
https://github.com/lossless-group/perplexed-plugin.git
synced 2026-07-22 06:49:50 +00:00
19b300c10c
On branch development Your branch is up to date with 'origin/development'. Changes to be committed: new file: changelog/2026-04-30_01.md new file: changelog/2026-05-01_01.md modified: changelog/2026-05-02_01.md modified: context-v/specs/Using-Files-as-Prompt-Outlines.md modified: src/modals/PerplexicaModal.ts modified: src/styles/perplexica-modal.css modified: styles.css
770 lines
19 KiB
CSS
770 lines
19 KiB
CSS
/* src/styles/perplexity-modal.css */
|
|
.perplexity-modal {
|
|
width: 90vw;
|
|
max-width: 640px;
|
|
}
|
|
.perplexity-modal .modal-content {
|
|
padding: 0;
|
|
}
|
|
.perplexity-modal__header {
|
|
padding: 24px 28px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.perplexity-modal__title {
|
|
margin: 0 0 6px;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.perplexity-modal__subtitle {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexity-modal__section {
|
|
padding: 18px 28px 4px;
|
|
}
|
|
.perplexity-modal__section + .perplexity-modal__section {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
margin-top: 4px;
|
|
}
|
|
.perplexity-modal__section-title {
|
|
margin: 0 0 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexity-modal__section .setting-item {
|
|
padding: 10px 0;
|
|
border-top: none;
|
|
}
|
|
.perplexity-modal__section .setting-item + .setting-item {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
.perplexity-modal__label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexity-modal__textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
padding: 12px 14px;
|
|
font-family: var(--font-text);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
.perplexity-modal__textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 3px var(--interactive-accent-hover);
|
|
}
|
|
.perplexity-modal__textarea::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
.perplexity-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 28px 24px;
|
|
margin-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
border-bottom-left-radius: var(--modal-radius, 8px);
|
|
border-bottom-right-radius: var(--modal-radius, 8px);
|
|
}
|
|
.perplexity-modal__button {
|
|
padding: 8px 18px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
transform 0.05s ease;
|
|
}
|
|
.perplexity-modal__button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.perplexity-modal__button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.perplexity-modal__button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
.perplexity-modal__button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
.perplexity-modal__button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.perplexity-modal {
|
|
width: 95vw;
|
|
max-width: none;
|
|
}
|
|
.perplexity-modal__header,
|
|
.perplexity-modal__section,
|
|
.perplexity-modal__footer {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
.perplexity-modal__footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.perplexity-modal__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* src/styles/article-generator-modal.css */
|
|
.article-generator-modal {
|
|
width: 90vw;
|
|
max-width: 640px;
|
|
}
|
|
.article-generator-modal .modal-content {
|
|
padding: 0;
|
|
}
|
|
.article-generator-modal__header {
|
|
padding: 24px 28px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.article-generator-modal__title {
|
|
margin: 0 0 6px;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.article-generator-modal__subtitle {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--text-muted);
|
|
}
|
|
.article-generator-modal__section {
|
|
padding: 18px 28px 4px;
|
|
}
|
|
.article-generator-modal__section + .article-generator-modal__section {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
margin-top: 4px;
|
|
}
|
|
.article-generator-modal__section-title {
|
|
margin: 0 0 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.article-generator-modal__section .setting-item {
|
|
padding: 10px 0;
|
|
border-top: none;
|
|
}
|
|
.article-generator-modal__section .setting-item + .setting-item {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
.article-generator-modal__label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.article-generator-modal__input {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
font-family: var(--font-text);
|
|
font-size: 15px;
|
|
line-height: 1.4;
|
|
color: var(--text-normal);
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
.article-generator-modal__input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 3px var(--interactive-accent-hover);
|
|
}
|
|
.article-generator-modal__input::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
.article-generator-modal__hint {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
.article-generator-modal__warning {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: var(--text-error);
|
|
font-weight: 500;
|
|
display: none;
|
|
}
|
|
.article-generator-modal__warning.is-active {
|
|
display: block;
|
|
}
|
|
.article-generator-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 28px 24px;
|
|
margin-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
border-bottom-left-radius: var(--modal-radius, 8px);
|
|
border-bottom-right-radius: var(--modal-radius, 8px);
|
|
}
|
|
.article-generator-modal__button {
|
|
padding: 8px 18px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
transform 0.05s ease;
|
|
}
|
|
.article-generator-modal__button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.article-generator-modal__button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.article-generator-modal__button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
.article-generator-modal__button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
.article-generator-modal__button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.article-generator-modal {
|
|
width: 95vw;
|
|
max-width: none;
|
|
}
|
|
.article-generator-modal__header,
|
|
.article-generator-modal__section,
|
|
.article-generator-modal__footer {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
.article-generator-modal__footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.article-generator-modal__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* src/styles/perplexica-modal.css */
|
|
.perplexica-modal {
|
|
width: 90vw;
|
|
max-width: 640px;
|
|
}
|
|
.perplexica-modal .modal-content {
|
|
padding: 0;
|
|
}
|
|
.perplexica-modal__header {
|
|
padding: 24px 28px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.perplexica-modal__title {
|
|
margin: 0 0 6px;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.perplexica-modal__subtitle {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexica-modal__section {
|
|
padding: 18px 28px 4px;
|
|
}
|
|
.perplexica-modal__section + .perplexica-modal__section {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
margin-top: 4px;
|
|
}
|
|
.perplexica-modal__section-title {
|
|
margin: 0 0 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexica-modal__section .setting-item {
|
|
padding: 10px 0;
|
|
border-top: none;
|
|
}
|
|
.perplexica-modal__section .setting-item + .setting-item {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
.perplexica-modal__label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.perplexica-modal__textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
padding: 12px 14px;
|
|
font-family: var(--font-text);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
.perplexica-modal__textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 3px var(--interactive-accent-hover);
|
|
}
|
|
.perplexica-modal__textarea::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
.perplexica-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 28px 24px;
|
|
margin-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
border-bottom-left-radius: var(--modal-radius, 8px);
|
|
border-bottom-right-radius: var(--modal-radius, 8px);
|
|
}
|
|
.perplexica-modal__button {
|
|
padding: 8px 18px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
transform 0.05s ease;
|
|
}
|
|
.perplexica-modal__button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.perplexica-modal__button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.perplexica-modal__button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
.perplexica-modal__button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
.perplexica-modal__button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.perplexica-modal {
|
|
width: 95vw;
|
|
max-width: none;
|
|
}
|
|
.perplexica-modal__header,
|
|
.perplexica-modal__section,
|
|
.perplexica-modal__footer {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
.perplexica-modal__footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.perplexica-modal__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* src/styles/lmstudio-modal.css */
|
|
.lmstudio-modal .text-input {
|
|
width: 100%;
|
|
margin: 8px 0;
|
|
padding: 12px;
|
|
}
|
|
.lmstudio-modal .system-prompt-input {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* src/styles/url-update-modal.css */
|
|
.url-update-modal .text-input {
|
|
width: 100%;
|
|
margin: 8px 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* src/styles/text-enhancement-modal.css */
|
|
.text-enhancement-modal {
|
|
max-width: 800px;
|
|
width: 90vw;
|
|
}
|
|
.text-enhancement-modal .setting-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.text-enhancement-modal .setting-item label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
.text-enhancement-modal .text-input {
|
|
width: 40%;
|
|
min-height: 100px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
.text-enhancement-modal .dropdown {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
.text-enhancement-modal button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.text-enhancement-modal button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.text-enhancement-modal button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
.text-enhancement-modal button.mod-cta:hover:not(:disabled) {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
.text-enhancement-modal button.mod-warning {
|
|
background-color: var(--text-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
.text-enhancement-modal button.mod-warning:hover:not(:disabled) {
|
|
background-color: var(--text-error-hover);
|
|
}
|
|
.text-enhancement-modal input[type=checkbox] {
|
|
margin-right: 8px;
|
|
}
|
|
.text-enhancement-modal .setting-item-description {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
.text-enhancement-modal .text-input[readonly] {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
.text-enhancement-modal .text-input:not([readonly]) {
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.text-enhancement-modal {
|
|
width: 95vw;
|
|
max-width: none;
|
|
}
|
|
.text-enhancement-modal button {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
.text-enhancement-modal .setting-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
/* src/styles/text-enhancement-with-images-modal.css */
|
|
.get-related-images-modal {
|
|
max-width: 600px;
|
|
width: 90vw;
|
|
}
|
|
.get-related-images-modal .setting-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.get-related-images-modal .setting-item label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
.get-related-images-modal .text-input {
|
|
width: 40%;
|
|
min-height: 120px;
|
|
padding: 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
.get-related-images-modal .text-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px var(--interactive-accent-hover);
|
|
}
|
|
.get-related-images-modal .text-input[readonly] {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
.get-related-images-modal button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.get-related-images-modal button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
.get-related-images-modal button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
.get-related-images-modal button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.get-related-images-modal h2 {
|
|
margin-bottom: 20px;
|
|
color: var(--text-normal);
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* src/styles/claude-modal.css */
|
|
.claude-modal {
|
|
width: 90vw;
|
|
max-width: 640px;
|
|
}
|
|
.claude-modal .modal-content {
|
|
padding: 0;
|
|
}
|
|
.claude-modal__header {
|
|
padding: 24px 28px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.claude-modal__title {
|
|
margin: 0 0 6px;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.claude-modal__subtitle {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--text-muted);
|
|
}
|
|
.claude-modal__section {
|
|
padding: 18px 28px 4px;
|
|
}
|
|
.claude-modal__section + .claude-modal__section {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
margin-top: 4px;
|
|
}
|
|
.claude-modal__section-title {
|
|
margin: 0 0 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.claude-modal__section .setting-item {
|
|
padding: 10px 0;
|
|
border-top: none;
|
|
}
|
|
.claude-modal__section .setting-item + .setting-item {
|
|
border-top: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
.claude-modal__label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
.claude-modal__textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
padding: 12px 14px;
|
|
font-family: var(--font-text);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
.claude-modal__textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 3px var(--interactive-accent-hover);
|
|
}
|
|
.claude-modal__textarea::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
.claude-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 28px 24px;
|
|
margin-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
border-bottom-left-radius: var(--modal-radius, 8px);
|
|
border-bottom-right-radius: var(--modal-radius, 8px);
|
|
}
|
|
.claude-modal__button {
|
|
padding: 8px 18px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
transform 0.05s ease;
|
|
}
|
|
.claude-modal__button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.claude-modal__button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.claude-modal__button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
.claude-modal__button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
.claude-modal__button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.claude-modal {
|
|
width: 95vw;
|
|
max-width: none;
|
|
}
|
|
.claude-modal__header,
|
|
.claude-modal__section,
|
|
.claude-modal__footer {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
.claude-modal__footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.claude-modal__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* src/styles/main.css */
|
|
.callout[data-callout=brain] {
|
|
background-color: rgba(147, 51, 234, 0.1);
|
|
border-left: 4px solid #9333ea;
|
|
}
|
|
.callout[data-callout=brain] .callout-title {
|
|
color: #9333ea;
|
|
font-weight: 600;
|
|
}
|
|
.callout[data-callout=brain] .callout-content {
|
|
color: var(--text-normal);
|
|
font-style: normal;
|
|
}
|
|
.callout[data-callout=brain] .callout-icon {
|
|
color: #9333ea;
|
|
}
|