mirror of
https://github.com/afforai/obsidian-logically-plugin.git
synced 2026-07-22 16:00:30 +00:00
4093abf57e
- Introduced StepRow, SuggestedFollowUps, and ThinkingPanel components - Implemented TypewriterText for animated text display - Enhanced UpgradeModal to include a new quota model type - Added ToolSelector for selecting research modes with UI improvements - Updated styles with design tokens for better theming support - Improved shimmer effect for loading states in ThinkingPanel
146 lines
3.6 KiB
CSS
146 lines
3.6 KiB
CSS
/* Logically Research Assistant Plugin Styles */
|
|
|
|
/* B17: Research Assistant design tokens (light defaults + dark variants). */
|
|
:root {
|
|
--ra-grey-1: var(--background-secondary);
|
|
--ra-grey-9: var(--text-muted);
|
|
--ra-grey-11: var(--text-normal);
|
|
--ra-muted-step: #A1AAA6;
|
|
--ra-hairline: var(--background-modifier-border);
|
|
--ra-brand-blue: #1980e6;
|
|
--ra-brand-blue-bg: rgba(25, 128, 230, 0.15);
|
|
--ra-icon-bubble-bg: #D8E9FA;
|
|
--ra-icon-bubble-fg: #3C91E6;
|
|
--ra-badge-active-fg: #1E8F4D;
|
|
--ra-badge-active-bg: #E8F4ED;
|
|
--ra-badge-semi-fg: #C77413;
|
|
--ra-badge-semi-bg: #F9F1E7;
|
|
--ra-badge-off-fg: #D12E3E;
|
|
--ra-badge-off-bg: #FAEAEC;
|
|
--ra-radius-lg: 12px;
|
|
--ra-radius-md: 8px;
|
|
--ra-radius-sm: 6px;
|
|
--ra-shadow-pop:
|
|
0 12px 12px -6px rgba(0, 0, 0, 0.06),
|
|
0 6px 6px -3px rgba(0, 0, 0, 0.06),
|
|
0 3px 3px -1.5px rgba(0, 0, 0, 0.06),
|
|
0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
|
|
0 0 0 1px rgba(0, 0, 0, 0.06);
|
|
--ra-transition: 150ms ease;
|
|
}
|
|
.theme-dark {
|
|
--ra-muted-step: #8A9590;
|
|
--ra-icon-bubble-bg: rgba(60, 145, 230, 0.2);
|
|
--ra-badge-active-bg: rgba(30, 143, 77, 0.15);
|
|
--ra-badge-semi-bg: rgba(199, 116, 19, 0.15);
|
|
--ra-badge-off-bg: rgba(209, 46, 62, 0.15);
|
|
--ra-shadow-pop:
|
|
0 12px 24px -8px rgba(0, 0, 0, 0.4),
|
|
0 4px 8px -2px rgba(0, 0, 0, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
|
|
/* Container styling */
|
|
.logically-research-assistant-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Settings page styles */
|
|
.logically-settings-header {
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.logically-settings-header h2 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.logically-settings-header p {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.logically-settings-footer {
|
|
margin-top: 32px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.logically-settings-footer a {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.logically-login-form {
|
|
padding: 16px;
|
|
background: var(--background-secondary);
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.logically-model-desc {
|
|
margin-top: -8px;
|
|
padding-left: 16px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Animation for loading states */
|
|
@keyframes logically-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.logically-loading {
|
|
animation: logically-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Custom scrollbar for the plugin */
|
|
.logically-research-assistant-container ::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.logically-research-assistant-container ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.logically-research-assistant-container ::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.logically-research-assistant-container ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Focus states for accessibility */
|
|
.logically-research-assistant-container button:focus-visible,
|
|
.logically-research-assistant-container input:focus-visible,
|
|
.logically-research-assistant-container textarea:focus-visible {
|
|
outline: 2px solid var(--text-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Improve text selection in chat */
|
|
.logically-research-assistant-container .message-content::selection {
|
|
background: var(--text-selection);
|
|
}
|
|
|
|
/* Thinking panel shimmer (B18: keyframe must be global so child component animation resolves). */
|
|
@keyframes ra-thinking-shimmer {
|
|
0% { left: -10px; opacity: 1; }
|
|
16.667% { left: calc(100% + 10px); opacity: 1; }
|
|
16.668% { left: -10px; opacity: 0; }
|
|
100% { left: -10px; opacity: 0; }
|
|
}
|