Rodrigo Rodriguez (Pragmatismo)
a389dc845e
- All 18 themes now include --sentient-* CSS variables - Variables map theme HSL values to office suite apps - Sheet, Docs, Slides will now respect all theme colors - Includes: backgrounds, text, accents, borders, surfaces, inputs, status, shadows, radius
134 lines
5.3 KiB
CSS
134 lines
5.3 KiB
CSS
:root {
|
|
/* Windows 3.1 White & Blue Theme */
|
|
--background: 0 0% 100%; /* Pure white */
|
|
--foreground: 0 0% 0%; /* Black text */
|
|
--card: 0 0% 98%; /* Slightly off-white for cards */
|
|
--card-foreground: 0 0% 0%; /* Black text */
|
|
--popover: 0 0% 100%; /* White */
|
|
--popover-foreground: 0 0% 0%; /* Black */
|
|
--primary: 240 100% 27%; /* Windows blue */
|
|
--primary-foreground: 0 0% 100%; /* White text on blue */
|
|
--secondary: 0 0% 90%; /* Light gray for secondary */
|
|
--secondary-foreground: 0 0% 0%; /* Black text */
|
|
--muted: 0 0% 85%; /* Muted gray */
|
|
--muted-foreground: 240 10% 40%; /* Muted blue-gray */
|
|
--accent: 60 100% 50%; /* Classic yellow accent */
|
|
--accent-foreground: 240 100% 27%; /* Blue */
|
|
--destructive: 0 100% 50%; /* Red for destructive */
|
|
--destructive-foreground: 0 0% 100%; /* White */
|
|
--border: 240 100% 27%; /* Blue borders */
|
|
--input: 0 0% 100%; /* White input */
|
|
--ring: 240 100% 27%; /* Blue ring/focus */
|
|
--radius: 0.125rem; /* Small radius, almost square */
|
|
--chart-1: 240 100% 27%; /* Blue */
|
|
--chart-2: 0 0% 60%; /* Gray */
|
|
--chart-3: 60 100% 50%; /* Yellow */
|
|
--chart-4: 0 100% 50%; /* Red */
|
|
--chart-5: 120 100% 25%; /* Green */
|
|
--border-light: 0 0% 100%; /* White for top/left border */
|
|
--border-dark: 240 100% 20%; /* Dark blue for bottom/right border */
|
|
|
|
/* ============================================ */
|
|
/* SENTIENT BRIDGE VARIABLES */
|
|
/* For Sheet, Docs, Slides theme support */
|
|
/* ============================================ */
|
|
|
|
/* Backgrounds */
|
|
--sentient-bg-primary: hsl(var(--background));
|
|
--sentient-bg-secondary: hsl(var(--card));
|
|
--sentient-bg-tertiary: hsl(var(--muted));
|
|
--sentient-bg-hover: hsla(var(--primary) / 0.08);
|
|
--sentient-bg-active: hsla(var(--primary) / 0.15);
|
|
|
|
/* Text */
|
|
--sentient-text-primary: hsl(var(--foreground));
|
|
--sentient-text-secondary: hsl(var(--muted-foreground));
|
|
--sentient-text-tertiary: hsla(var(--muted-foreground) / 0.7);
|
|
--sentient-text-muted: hsla(var(--muted-foreground) / 0.5);
|
|
|
|
/* Accent Colors */
|
|
--sentient-accent: hsl(var(--primary));
|
|
--sentient-accent-hover: hsl(var(--primary) / 0.85);
|
|
--sentient-accent-light: hsla(var(--primary) / 0.1);
|
|
--sentient-accent-dark: hsl(var(--primary) / 0.7);
|
|
|
|
/* Borders */
|
|
--sentient-border: hsl(var(--border));
|
|
--sentient-border-light: hsla(var(--border) / 0.5);
|
|
--sentient-border-accent: hsla(var(--primary) / 0.3);
|
|
|
|
/* Surfaces */
|
|
--sentient-surface: hsl(var(--card));
|
|
--sentient-surface-hover: hsla(var(--primary) / 0.08);
|
|
--sentient-surface-active: hsla(var(--primary) / 0.15);
|
|
--sentient-surface-elevated: hsl(var(--popover));
|
|
|
|
/* Inputs */
|
|
--sentient-input-bg: hsl(var(--input));
|
|
--sentient-input-border: hsl(var(--border));
|
|
--sentient-input-focus: hsl(var(--ring));
|
|
|
|
/* Status Colors */
|
|
--sentient-success: hsl(142 76% 36%);
|
|
--sentient-success-bg: hsla(142 76% 36% / 0.15);
|
|
--sentient-warning: hsl(38 92% 50%);
|
|
--sentient-warning-bg: hsla(38 92% 50% / 0.15);
|
|
--sentient-error: hsl(var(--destructive));
|
|
--sentient-error-bg: hsla(var(--destructive) / 0.15);
|
|
|
|
/* Typography */
|
|
--sentient-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Shadows */
|
|
--sentient-shadow-sm: 0 1px 2px 0 hsla(var(--foreground) / 0.05);
|
|
--sentient-shadow-md: 0 4px 6px -1px hsla(var(--foreground) / 0.1), 0 2px 4px -1px hsla(var(--foreground) / 0.06);
|
|
--sentient-shadow-lg: 0 10px 15px -3px hsla(var(--foreground) / 0.1), 0 4px 6px -2px hsla(var(--foreground) / 0.05);
|
|
|
|
/* Border Radius */
|
|
--sentient-radius: var(--radius);
|
|
--sentient-radius-sm: calc(var(--radius) * 0.5);
|
|
--sentient-radius-md: var(--radius);
|
|
--sentient-radius-lg: calc(var(--radius) * 1.5);
|
|
--sentient-radius-xl: calc(var(--radius) * 2);
|
|
}
|
|
|
|
/* Windows 3.11 style border */
|
|
.win311-border {
|
|
border-top: 2px solid hsl(var(--border-light));
|
|
border-left: 2px solid hsl(var(--border-light));
|
|
border-bottom: 2px solid hsl(var(--border-dark));
|
|
border-right: 2px solid hsl(var(--border-dark));
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* Titles */
|
|
.win311-title {
|
|
color: hsl(var(--primary));
|
|
border-bottom: 2px solid hsl(var(--primary));
|
|
font-weight: bold;
|
|
padding: 0.25em 0.5em;
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* General text */
|
|
body, .filemanager, .filemanager * {
|
|
color: hsl(var(--foreground));
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
button, .win311-button {
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
padding: 0.25em 1.5em;
|
|
background: #c0c0c0; /* classic light gray */
|
|
color: #000;
|
|
border-top: 2px solid #fff; /* light bevel */
|
|
border-left: 2px solid #fff; /* light bevel */
|
|
border-bottom: 2px solid #808080;/* dark bevel */
|
|
border-right: 2px solid #808080; /* dark bevel */
|
|
border-radius: 0;
|
|
box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080 !important;
|
|
outline: none !important;
|
|
cursor: pointer !important;
|
|
transition: none !important;
|
|
}
|