feat: URL preview TDS styling, settings description update
- UrlPreview.tsx: add data-url-preview attribute for CSS targeting - lotus-terminal.css.ts: dark cyan border-left accent + transparent bg for URL preview cards in TDS mode (dark + light variants) - General.tsx: mention Escape-to-skip in boot animation description
This commit is contained in:
@@ -4,7 +4,7 @@ import { Box, as } from 'folds';
|
|||||||
import * as css from './UrlPreview.css';
|
import * as css from './UrlPreview.css';
|
||||||
|
|
||||||
export const UrlPreview = as<'div'>(({ className, ...props }, ref) => (
|
export const UrlPreview = as<'div'>(({ className, ...props }, ref) => (
|
||||||
<Box shrink="No" className={classNames(css.UrlPreview, className)} {...props} ref={ref} />
|
<Box shrink="No" data-url-preview="" className={classNames(css.UrlPreview, className)} {...props} ref={ref} />
|
||||||
));
|
));
|
||||||
|
|
||||||
export const UrlPreviewImg = as<'img'>(({ className, alt, ...props }, ref) => (
|
export const UrlPreviewImg = as<'img'>(({ className, alt, ...props }, ref) => (
|
||||||
|
|||||||
@@ -378,7 +378,7 @@ function Appearance() {
|
|||||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||||
<SettingTile
|
<SettingTile
|
||||||
title="Lotus Terminal Mode"
|
title="Lotus Terminal Mode"
|
||||||
description="LotusGuild Terminal Design System: Anduril Orange + Ice Cyan + Matrix Green, dot-grid background, CRT scanlines, and boot sequence animation."
|
description="LotusGuild Terminal Design System: Anduril Orange + Ice Cyan + Matrix Green, dot-grid background, CRT scanlines, and boot sequence animation (press Escape to skip)."
|
||||||
after={
|
after={
|
||||||
<Box direction="Row" gap="200" alignItems="Center">
|
<Box direction="Row" gap="200" alignItems="Center">
|
||||||
{lotusTerminal && (
|
{lotusTerminal && (
|
||||||
|
|||||||
@@ -660,3 +660,29 @@ globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scroll
|
|||||||
borderRadius: '2px',
|
borderRadius: '2px',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── URL preview cards (terminal mode) ───────────────────────────────────────
|
||||||
|
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview]`, {
|
||||||
|
backgroundColor: 'rgba(3,12,20,0.92)',
|
||||||
|
border: '1px solid rgba(0,212,255,0.22)',
|
||||||
|
borderLeft: '3px solid rgba(255,107,0,0.60)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
color: '#e8edf5',
|
||||||
|
});
|
||||||
|
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a`, {
|
||||||
|
color: 'rgba(0,212,255,0.85) !important' as any,
|
||||||
|
});
|
||||||
|
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a:hover`, {
|
||||||
|
color: 'rgba(255,107,0,0.90) !important' as any,
|
||||||
|
textShadow: '0 0 6px rgba(255,107,0,0.30)',
|
||||||
|
});
|
||||||
|
// light TDS
|
||||||
|
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview]`, {
|
||||||
|
backgroundColor: 'rgba(240,244,252,0.97)',
|
||||||
|
border: '1px solid rgba(0,98,184,0.22)',
|
||||||
|
borderLeft: '3px solid rgba(196,78,0,0.55)',
|
||||||
|
color: '#2d3d56',
|
||||||
|
});
|
||||||
|
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview] a`, {
|
||||||
|
color: '#0062b8 !important' as any,
|
||||||
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user