mirror of
https://github.com/taskgenius/taskgenius-plugin.git
synced 2026-07-22 06:40:25 +00:00
feat(onboarding): add noise texture and enhance UI polish
- Add noise texture layer system for visual depth - Modernize footer with glass morphism and ripple effects - Improve layout stability during intro animation - Add mode selection preview images - Standardize box-shadows to CSS variables across all styles - Enhance mobile responsiveness and dark theme support
This commit is contained in:
Quorafind
parent
491e2a6189
commit
141b092f47
16 changed files with 471 additions and 119 deletions
BIN
media/fluent-light.png
Normal file
BIN
media/fluent-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
media/fluent.png
Normal file
BIN
media/fluent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
media/legacy-light.png
Normal file
BIN
media/legacy-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
media/legacy.png
Normal file
BIN
media/legacy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
81
src/common/noise.ts
Normal file
81
src/common/noise.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* 获取 noise SVG 字符串
|
||||
*/
|
||||
export function noiseBackground() {
|
||||
return `<svg width="1901" height="961" viewBox="0 0 1901 961" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.25" filter="url(#filter0_n_1_2)">
|
||||
<rect width="1901" height="961" fill="#EFEFEF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_n_1_2" x="0" y="0" width="1901" height="961" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="1.25 1.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="5339" />
|
||||
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
|
||||
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
|
||||
<feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
|
||||
</feComponentTransfer>
|
||||
<feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" />
|
||||
<feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" />
|
||||
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
|
||||
<feMerge result="effect1_noise_1_2">
|
||||
<feMergeNode in="shape" />
|
||||
<feMergeNode in="color1" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 noise 效果插入到指定的 HTML 元素中
|
||||
* @param container - 目标容器元素
|
||||
* @param options - 配置选项
|
||||
*/
|
||||
export function insertNoise(
|
||||
container: HTMLElement,
|
||||
options?: {
|
||||
opacity?: number; // 透明度，默认 0.25
|
||||
position?: 'absolute' | 'relative'; // 定位方式，默认 'absolute'
|
||||
zIndex?: number; // z-index 值，默认 1
|
||||
}
|
||||
) {
|
||||
const {
|
||||
opacity = 0.25,
|
||||
position = 'absolute',
|
||||
zIndex = 1
|
||||
} = options || {};
|
||||
|
||||
// 创建 noise 容器
|
||||
const noiseLayer = container.createDiv('tg-noise-layer-inline');
|
||||
|
||||
// 设置样式
|
||||
noiseLayer.style.position = position;
|
||||
noiseLayer.style.top = '0';
|
||||
noiseLayer.style.left = '0';
|
||||
noiseLayer.style.width = '100%';
|
||||
noiseLayer.style.height = '100%';
|
||||
noiseLayer.style.pointerEvents = 'none';
|
||||
noiseLayer.style.opacity = opacity.toString();
|
||||
noiseLayer.style.zIndex = zIndex.toString();
|
||||
|
||||
// 插入 SVG
|
||||
noiseLayer.innerHTML = noiseBackground();
|
||||
|
||||
// 将 noise 层插入到容器的第一个位置
|
||||
container.insertBefore(noiseLayer, container.firstChild);
|
||||
|
||||
// 返回 noise 元素，方便后续移除
|
||||
return noiseLayer;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除通过 insertNoise 添加的 noise 效果
|
||||
* @param container - 容器元素
|
||||
*/
|
||||
export function removeNoise(container: HTMLElement) {
|
||||
const noiseLayer = container.querySelector('.tg-noise-layer-inline');
|
||||
if (noiseLayer) {
|
||||
noiseLayer.remove();
|
||||
}
|
||||
}
|
||||
|
|
@ -2,17 +2,19 @@ import { t } from "@/translations/helper";
|
|||
|
||||
export class IntroTyping {
|
||||
private timers: number[] = [];
|
||||
private onComplete?: () => void;
|
||||
private onComplete?: (typingContainer: HTMLElement) => void;
|
||||
private typingContainer?: HTMLElement;
|
||||
|
||||
cleanup() {
|
||||
this.timers.forEach((id) => window.clearTimeout(id));
|
||||
this.timers = [];
|
||||
}
|
||||
|
||||
render(container: HTMLElement, onComplete?: () => void) {
|
||||
render(container: HTMLElement, onComplete?: (typingContainer: HTMLElement) => void) {
|
||||
this.onComplete = onComplete;
|
||||
container.empty();
|
||||
const wrap = container.createDiv({cls: "intro-typing"});
|
||||
this.typingContainer = wrap;
|
||||
|
||||
const line1 = wrap.createEl("h1", {cls: "intro-line intro-line-1"});
|
||||
const line2 = wrap.createEl("h2", {cls: "intro-line intro-line-2"});
|
||||
|
|
@ -61,9 +63,9 @@ export class IntroTyping {
|
|||
keepAfter: true,
|
||||
afterComplete: () => {
|
||||
// Trigger callback to show mode selection buttons
|
||||
if (this.onComplete) {
|
||||
if (this.onComplete && this.typingContainer) {
|
||||
const id = window.setTimeout(() => {
|
||||
this.onComplete?.();
|
||||
this.onComplete?.(this.typingContainer!);
|
||||
}, 300);
|
||||
this.timers.push(id);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class ModeSelection {
|
|||
const titleEl = header.createDiv({cls: "mode-card-title"});
|
||||
titleEl.setText(title);
|
||||
const body = el.createDiv({cls: "mode-card-body"});
|
||||
const preview = body.createDiv({cls: "mode-card-preview"});
|
||||
const preview = body.createDiv({cls: ["mode-card-preview", "tg-noise-layer"]});
|
||||
// Visual representation for each mode
|
||||
if (mode === "fluent") {
|
||||
preview.innerHTML = "✨"; // Sparkles for modern
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export class OnboardingView extends ItemView {
|
|||
.setButtonText(t("Next"))
|
||||
.setCta()
|
||||
.onClick(() => this.handleNext());
|
||||
this.nextButton.buttonEl.addClass("clickable-icon");
|
||||
// this.nextButton.buttonEl.addClass("clickable-icon");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -355,19 +355,28 @@ export class OnboardingView extends ItemView {
|
|||
// Hide footer buttons during intro animation
|
||||
this.footerEl.style.display = 'none';
|
||||
|
||||
// Create a wrapper container to hold both typing and mode selection
|
||||
const introWrapper = this.onboardingContentEl.createDiv({
|
||||
cls: "intro-typing-wrapper"
|
||||
});
|
||||
|
||||
// Render typing animation
|
||||
this.introTyping.render(this.onboardingContentEl, () => {
|
||||
// After typing completes, show mode selection in same container
|
||||
const modeContainer = this.onboardingContentEl.createDiv({
|
||||
this.introTyping.render(introWrapper, (typingContainer) => {
|
||||
// After typing completes, show mode selection in the same typing container
|
||||
// This prevents layout shift since they share the same parent
|
||||
const modeContainer = typingContainer.createDiv({
|
||||
cls: "intro-mode-selection-container"
|
||||
});
|
||||
|
||||
this.modeSelection.render(modeContainer, this.state.uiMode as any, (mode) => {
|
||||
this.state.uiMode = mode;
|
||||
// Show footer with Next button after selection
|
||||
this.footerEl.style.display = '';
|
||||
this.updateButtonStates();
|
||||
});
|
||||
|
||||
// Show footer with Next button immediately after mode selection appears
|
||||
// User can proceed with default selection or change it
|
||||
this.footerEl.style.display = '';
|
||||
this.updateButtonStates();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -541,7 +550,7 @@ export class OnboardingView extends ItemView {
|
|||
private async handleSkip() {
|
||||
await this.configManager.skipOnboarding();
|
||||
this.onComplete();
|
||||
this.close();
|
||||
this.leaf.detach();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -700,18 +709,11 @@ export class OnboardingView extends ItemView {
|
|||
|
||||
// Close view and trigger callback
|
||||
this.onComplete();
|
||||
this.close();
|
||||
this.leaf.detach();
|
||||
} catch (error) {
|
||||
console.error("Failed to complete onboarding:", error);
|
||||
this.state.isCompleting = false;
|
||||
this.updateButtonStates();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the onboarding view
|
||||
*/
|
||||
private close() {
|
||||
this.leaf.detach();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ import "./styles/task-status.css";
|
|||
import "./styles/quadrant/quadrant.css";
|
||||
import "./styles/onboarding.css";
|
||||
import "./styles/universal-suggest.css";
|
||||
import "./styles/noise.css";
|
||||
import { TaskSpecificView } from "./pages/TaskSpecificView";
|
||||
import { TASK_SPECIFIC_VIEW_TYPE } from "./pages/TaskSpecificView";
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@
|
|||
|
||||
.file-filter-preset-container button:not(:disabled):hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
/* Success state for applied presets */
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
color: var(--text-muted); /* 使用 Obsidian 的次要文本颜色 */
|
||||
font-size: var(--font-ui-smaller); /* 使用 Obsidian 的字体大小变量 */
|
||||
}
|
||||
|
||||
.filter-group-separator::before,
|
||||
.filter-group-separator::after {
|
||||
content: "";
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
); /* 使用 Obsidian 的边框颜色 */
|
||||
margin: 0 var(--size-2-1); /* 使用 Obsidian 的尺寸变量 */
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
display: flex;
|
||||
|
|
@ -56,6 +58,7 @@
|
|||
background-color: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.compact-input,
|
||||
.compact-select {
|
||||
font-size: var(--font-ui-smaller); /* 使用 Obsidian 的字体大小变量 */
|
||||
|
|
@ -132,8 +135,7 @@
|
|||
.root-condition-select {
|
||||
/* compact-select already provides base styling */
|
||||
width: auto;
|
||||
border: 1px solid
|
||||
var(--input-border-color, var(--background-modifier-border)); /* border border-slate-300 */
|
||||
border: 1px solid var(--input-border-color, var(--background-modifier-border)); /* border border-slate-300 */
|
||||
/* box-shadow: var(--shadow-s); /* shadow-sm */ /* Consider if needed */
|
||||
}
|
||||
|
||||
|
|
@ -183,9 +185,11 @@
|
|||
.filter-group-header-left .drag-handle-container .svg-icon {
|
||||
color: var(--text-faint); /* text-slate-400 */
|
||||
}
|
||||
|
||||
.filter-group-header-left .drag-handle-container:hover .svg-icon {
|
||||
color: var(--text-muted); /* hover:text-slate-500 */
|
||||
}
|
||||
|
||||
.filter-group-header-left .drag-handle-container {
|
||||
padding-right: var(--size-2-1);
|
||||
}
|
||||
|
|
@ -197,9 +201,9 @@
|
|||
}
|
||||
|
||||
.filter-group-header-left .group-condition-select.compact-select {
|
||||
border: 1px solid
|
||||
var(--input-border-color, var(--background-modifier-border));
|
||||
border: 1px solid var(--input-border-color, var(--background-modifier-border));
|
||||
}
|
||||
|
||||
.filter-group-header-left .group-condition-select.compact-select:focus {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||||
|
|
@ -219,11 +223,13 @@
|
|||
.filter-group-header-right .duplicate-group-btn.compact-icon-btn .svg-icon {
|
||||
color: var(--text-muted); /* text-slate-500 */
|
||||
}
|
||||
|
||||
.filter-group-header-right
|
||||
.duplicate-group-btn.compact-icon-btn:hover
|
||||
.svg-icon {
|
||||
.duplicate-group-btn.compact-icon-btn:hover
|
||||
.svg-icon {
|
||||
color: var(--interactive-accent); /* hover:text-indigo-600 */
|
||||
}
|
||||
|
||||
.filter-group-header-right .duplicate-group-btn.compact-icon-btn:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
|
@ -231,9 +237,11 @@
|
|||
.filter-group-header-right .remove-group-btn.compact-icon-btn .svg-icon {
|
||||
color: var(--text-muted); /* text-slate-500 */
|
||||
}
|
||||
|
||||
.filter-group-header-right .remove-group-btn.compact-icon-btn:hover .svg-icon {
|
||||
color: var(--text-error); /* hover:text-red-600 */
|
||||
}
|
||||
|
||||
.filter-group-header-right .remove-group-btn.compact-icon-btn:hover {
|
||||
background-color: var(
|
||||
--background-error-hover,
|
||||
|
|
@ -250,6 +258,7 @@
|
|||
border-left: 2px solid var(--background-modifier-border); /* border-l-2 border-slate-200 */
|
||||
margin-left: var(--size-4-2); /* ml-1.5 from HTML */
|
||||
}
|
||||
|
||||
.filters-list:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -291,11 +300,11 @@
|
|||
flex-basis: 30%; /* w-1/3 */
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid
|
||||
var(--input-border-color, var(--background-modifier-border));
|
||||
border: 1px solid var(--input-border-color, var(--background-modifier-border));
|
||||
/* border: unset !important; */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filter-item .filter-property-select.compact-select:focus {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||||
|
|
@ -303,11 +312,11 @@
|
|||
|
||||
.filter-item .filter-condition-select.compact-select {
|
||||
width: auto; /* w-auto */
|
||||
border: 1px solid
|
||||
var(--input-border-color, var(--background-modifier-border));
|
||||
border: 1px solid var(--input-border-color, var(--background-modifier-border));
|
||||
/* border: unset !important; */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filter-item .filter-condition-select.compact-select:focus {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||||
|
|
@ -315,10 +324,10 @@
|
|||
|
||||
.filter-item .filter-value-input.compact-input {
|
||||
flex-grow: 1; /* flex-grow */
|
||||
border: 1px solid
|
||||
var(--input-border-color, var(--background-modifier-border));
|
||||
border: 1px solid var(--input-border-color, var(--background-modifier-border));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-item .filter-value-input.compact-input:focus {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||||
|
|
@ -327,9 +336,11 @@
|
|||
.filter-item .remove-filter-btn.compact-icon-btn .svg-icon {
|
||||
color: var(--text-muted); /* text-slate-500 */
|
||||
}
|
||||
|
||||
.filter-item .remove-filter-btn.compact-icon-btn:hover .svg-icon {
|
||||
color: var(--text-error); /* hover:text-red-600 */
|
||||
}
|
||||
|
||||
.filter-item .remove-filter-btn.compact-icon-btn:hover {
|
||||
background-color: var(
|
||||
--background-error-hover,
|
||||
|
|
@ -395,7 +406,7 @@
|
|||
var(--background-secondary) 0%,
|
||||
var(--background-primary-alt) 100%
|
||||
);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
.ics-source-item:hover {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
.ics-source-header {
|
||||
|
|
|
|||
25
src/styles/noise.css
Normal file
25
src/styles/noise.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/* Noise Layer Effect */
|
||||
.tg-noise-layer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tg-noise-layer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.25;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1901" height="961" viewBox="0 0 1901 961" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.25" filter="url(%23filter0_n_1_2)"><rect width="1901" height="961" fill="%23EFEFEF"/></g><defs><filter id="filter0_n_1_2" x="0" y="0" width="1901" height="961" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="1.25 1.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="5339" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feMerge result="effect1_noise_1_2"><feMergeNode in="shape" /><feMergeNode in="color1" /></feMerge></filter></defs></svg>');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tg-noise-layer > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -68,20 +68,78 @@
|
|||
align-items: center
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
/* Footer section - Modern design */
|
||||
.onboarding-modal .onboarding-footer,
|
||||
.onboarding-view .onboarding-footer {
|
||||
padding: var(--size-4-2) var(--onboarding-spacing) var(--onboarding-spacing) var(--onboarding-spacing);
|
||||
border-top: var(--modal-border-width) solid var(--background-modifier-border);
|
||||
padding: var(--size-4-4) var(--onboarding-spacing);
|
||||
background: var(--background-primary);
|
||||
border-top: none;
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Glass morphism effect for modern look */
|
||||
.onboarding-modal .onboarding-footer::before,
|
||||
.onboarding-view .onboarding-footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, var(--background-primary), transparent);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.onboarding-modal .onboarding-buttons,
|
||||
.onboarding-view .onboarding-buttons {
|
||||
display: flex;
|
||||
gap: var(--size-4-2);
|
||||
gap: var(--size-4-3);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Enhanced button styles */
|
||||
.onboarding-modal .onboarding-buttons button,
|
||||
.onboarding-view .onboarding-buttons button {
|
||||
min-height: 36px;
|
||||
padding: var(--size-4-2) var(--size-4-4);
|
||||
border-radius: var(--radius-m);
|
||||
font-weight: 500;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.onboarding-modal .onboarding-buttons button:not(.mod-cta):hover,
|
||||
.onboarding-view .onboarding-buttons button:not(.mod-cta):hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Ripple effect on button click */
|
||||
.onboarding-modal .onboarding-buttons button::after,
|
||||
.onboarding-view .onboarding-buttons button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.onboarding-modal .onboarding-buttons button:active::after,
|
||||
.onboarding-view .onboarding-buttons button:active::after {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* ============================== */
|
||||
|
|
@ -1011,6 +1069,13 @@
|
|||
/* Responsive Design */
|
||||
/* ============================== */
|
||||
|
||||
/* Tablet adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.intro-mode-selection-container {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.onboarding-modal,
|
||||
.onboarding-view {
|
||||
|
|
@ -1068,13 +1133,49 @@
|
|||
.placement-card {
|
||||
padding: var(--size-4-3);
|
||||
}
|
||||
|
||||
/* Intro mode selection - Mobile adjustments */
|
||||
.intro-mode-selection-container {
|
||||
max-width: 100%;
|
||||
padding: 0 var(--size-4-1);
|
||||
}
|
||||
|
||||
.intro-typing {
|
||||
padding: var(--size-4-4) var(--size-4-2);
|
||||
}
|
||||
|
||||
/* Footer adjustments for mobile */
|
||||
.onboarding-modal .onboarding-footer,
|
||||
.onboarding-view .onboarding-footer {
|
||||
padding: var(--size-4-3) var(--size-4-2);
|
||||
}
|
||||
|
||||
.onboarding-modal .onboarding-buttons,
|
||||
.onboarding-view .onboarding-buttons {
|
||||
gap: var(--size-4-2);
|
||||
}
|
||||
|
||||
.onboarding-modal .onboarding-buttons button,
|
||||
.onboarding-view .onboarding-buttons button {
|
||||
padding: var(--size-4-2) var(--size-4-3);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================== */
|
||||
/* Dark Theme Adjustments */
|
||||
/* ============================== */
|
||||
|
||||
/* Dark theme adjustments - keeping minimal */
|
||||
/* Dark theme adjustments for footer */
|
||||
.theme-dark .onboarding-modal .onboarding-footer,
|
||||
.theme-dark .onboarding-view .onboarding-footer {
|
||||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.theme-dark .onboarding-modal .onboarding-footer::before,
|
||||
.theme-dark .onboarding-view .onboarding-footer::before {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
/* ============================== */
|
||||
/* Animation and Transitions */
|
||||
|
|
@ -1143,7 +1244,7 @@
|
|||
|
||||
.mode-card:hover {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -1257,7 +1358,7 @@
|
|||
|
||||
.placement-card:hover {
|
||||
border-color: var(--interactive-accent);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -1336,11 +1437,17 @@
|
|||
/* AI-Style Intro Typing Animation */
|
||||
/* ============================== */
|
||||
|
||||
/* Wrapper to prevent layout shift */
|
||||
.intro-typing-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro-typing {
|
||||
padding: var(--size-4-6) var(--size-4-4);
|
||||
text-align: left;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.intro-line {
|
||||
|
|
@ -1447,7 +1554,8 @@
|
|||
.intro-mode-selection-container {
|
||||
animation: fadeInFromBottom 0.6s ease-out;
|
||||
animation-fill-mode: both;
|
||||
width: clamp(400px, 40vw, 40%);
|
||||
width: 100%;
|
||||
margin-top: var(--size-4-18);
|
||||
}
|
||||
|
||||
@keyframes fadeInFromBottom {
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-content {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content.focus-mode
|
||||
.timeline-date-group:not(.is-today) {
|
||||
.timeline-content.focus-mode
|
||||
.timeline-date-group:not(.is-today) {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-date-group.is-today {
|
|||
border-radius: var(--radius-m);
|
||||
margin: 0 var(--size-4-2) var(--size-4-2);
|
||||
padding: var(--size-4-2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-s);
|
||||
border: 1px solid var(--interactive-accent);
|
||||
}
|
||||
|
||||
|
|
@ -124,8 +124,8 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-date-header {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-date-group.is-today
|
||||
.timeline-date-header {
|
||||
.timeline-date-group.is-today
|
||||
.timeline-date-header {
|
||||
border-radius: var(--radius-s);
|
||||
margin: 0 0 var(--size-4-2) 0;
|
||||
}
|
||||
|
|
@ -165,7 +165,7 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-event:hover {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event:hover:has(.timeline-event-checkbox:hover) {
|
||||
.timeline-event:hover:has(.timeline-event-checkbox:hover) {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
|
@ -174,8 +174,8 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-event.is-completed {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event.is-completed
|
||||
.timeline-event-text {
|
||||
.timeline-event.is-completed
|
||||
.timeline-event-text {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
|
@ -305,7 +305,9 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-date-only-section {
|
|||
|
||||
|
||||
/* Hide per-event time labels inside All day section as safety net */
|
||||
div[data-type^="tg-timeline-sidebar-view"] .timeline-date-only-section .timeline-event .timeline-event-time { display: none !important; }
|
||||
div[data-type^="tg-timeline-sidebar-view"] .timeline-date-only-section .timeline-event .timeline-event-time {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"] .timeline-date-only-header {
|
||||
display: flex;
|
||||
|
|
@ -340,8 +342,8 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-event-checkbox {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-checkbox
|
||||
input[type="checkbox"] {
|
||||
.timeline-event-checkbox
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -377,8 +379,8 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-event-actions {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event:hover
|
||||
.timeline-event-actions {
|
||||
.timeline-event:hover
|
||||
.timeline-event-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -423,14 +425,14 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-quick-input.is-collapsed {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-header,
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-header,
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-editor,
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-editor,
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-actions {
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -550,9 +552,9 @@ div[data-type^="tg-timeline-sidebar-view"] .quick-input-collapse-btn svg {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-collapse-btn
|
||||
svg {
|
||||
.timeline-quick-input.is-collapsed
|
||||
.quick-input-collapse-btn
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
|
|
@ -600,8 +602,8 @@ div[data-type^="tg-timeline-sidebar-view"] .quick-input-editor .cm-focused {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.quick-input-editor
|
||||
.cm-editor.cm-focused {
|
||||
.quick-input-editor
|
||||
.cm-editor.cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -673,7 +675,7 @@ div[data-type^="tg-timeline-sidebar-view"] .quick-modal-btn:hover {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-quick-input.is-collapsed {
|
||||
.timeline-quick-input.is-collapsed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -694,23 +696,23 @@ div[data-type^="tg-timeline-sidebar-view"] .quick-modal-btn:hover {
|
|||
|
||||
/* Scrollbar Styling */
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content::-webkit-scrollbar {
|
||||
.timeline-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content::-webkit-scrollbar-track {
|
||||
.timeline-content::-webkit-scrollbar-track {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content::-webkit-scrollbar-thumb {
|
||||
.timeline-content::-webkit-scrollbar-thumb {
|
||||
background-color: var(--background-modifier-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content::-webkit-scrollbar-thumb:hover {
|
||||
.timeline-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--background-modifier-border-hover);
|
||||
}
|
||||
|
||||
|
|
@ -741,7 +743,7 @@ div[data-type^="tg-timeline-sidebar-view"] .timeline-content.focus-mode {
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content.focus-mode::before {
|
||||
.timeline-content.focus-mode::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -759,16 +761,16 @@ div[data-type^="tg-timeline-sidebar-view"]
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-content.focus-mode
|
||||
.timeline-date-group.is-today {
|
||||
.timeline-content.focus-mode
|
||||
.timeline-date-group.is-today {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Markdown renderer styles in timeline events */
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block {
|
||||
.timeline-event-content-text
|
||||
.markdown-block {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
|
|
@ -776,9 +778,9 @@ div[data-type^="tg-timeline-sidebar-view"]
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
p {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
|
|
@ -786,51 +788,51 @@ div[data-type^="tg-timeline-sidebar-view"]
|
|||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
strong,
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
strong,
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
em,
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
em,
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
code {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
a {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
a:hover {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
ul,
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
ul,
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
ol {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: var(--size-4-4);
|
||||
}
|
||||
|
||||
div[data-type^="tg-timeline-sidebar-view"]
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
li {
|
||||
.timeline-event-content-text
|
||||
.markdown-block
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
146
styles.css
146
styles.css
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue