Rodrigo Rodriguez (Pragmatismo)
91c54933f3
- Add complete sentient-* bridge variables in app.css - Map all HSL theme variables to sentient-* naming - Includes: backgrounds, text, accents, borders, surfaces, inputs, status colors, shadows, radius - Rewrite 3dbevel theme to use CSS variables instead of !important overrides - All themes now properly cascade to office suite apps
121 lines
3.3 KiB
CSS
121 lines
3.3 KiB
CSS
:root {
|
|
/* 3D Bevel Theme - Windows 95/Classic Mac style */
|
|
--background: 0 0% 75%; /* #c0c0c0 - Classic gray */
|
|
--foreground: 0 0% 0%; /* Black text */
|
|
--card: 0 0% 88%; /* #e0e0e0 - Lighter gray */
|
|
--card-foreground: 0 0% 0%; /* Black */
|
|
--popover: 0 0% 82%; /* #d0d0d0 */
|
|
--popover-foreground: 0 0% 0%; /* Black */
|
|
--primary: 240 100% 33%; /* #0000aa - Classic blue */
|
|
--primary-foreground: 0 0% 100%; /* White */
|
|
--secondary: 0 0% 88%; /* #e0e0e0 */
|
|
--secondary-foreground: 0 0% 0%; /* Black */
|
|
--muted: 0 0% 75%; /* #c0c0c0 */
|
|
--muted-foreground: 0 0% 25%; /* #404040 */
|
|
--accent: 240 100% 50%; /* Blue accent */
|
|
--accent-foreground: 0 0% 100%; /* White */
|
|
--destructive: 0 100% 40%; /* Red */
|
|
--destructive-foreground: 0 0% 100%; /* White */
|
|
--border: 0 0% 25%; /* #404040 - Dark border */
|
|
--input: 0 0% 100%; /* White input bg */
|
|
--ring: 240 100% 50%; /* Blue focus ring */
|
|
--radius: 0rem; /* No border radius - sharp corners */
|
|
--chart-1: 240 100% 33%; /* Blue */
|
|
--chart-2: 120 100% 25%; /* Green */
|
|
--chart-3: 0 100% 40%; /* Red */
|
|
--chart-4: 300 100% 33%; /* Purple */
|
|
--chart-5: 60 100% 40%; /* Yellow */
|
|
|
|
/* 3D Bevel specific - raised/sunken effects */
|
|
--bevel-light: 0 0% 100%; /* White highlight */
|
|
--bevel-dark: 0 0% 25%; /* Dark shadow */
|
|
}
|
|
|
|
/* 3D Bevel effect for buttons and raised elements */
|
|
.button,
|
|
button,
|
|
.btn,
|
|
.btn-icon,
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
input[type="button"],
|
|
input[type="submit"] {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
|
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button:active,
|
|
button:active,
|
|
.btn:active,
|
|
.btn-icon:active,
|
|
input[type="button"]:active,
|
|
input[type="submit"]:active {
|
|
border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
|
|
hsl(var(--bevel-light)) hsl(var(--bevel-dark));
|
|
}
|
|
|
|
/* Sunken effect for inputs */
|
|
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not(
|
|
[type="radio"]
|
|
),
|
|
textarea,
|
|
select {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
|
|
hsl(var(--bevel-light)) hsl(var(--bevel-dark));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Cards and panels - raised */
|
|
.card,
|
|
.modal-content,
|
|
.popover,
|
|
.dropdown-menu,
|
|
.context-menu {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
|
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 16px;
|
|
background: hsl(var(--muted));
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted));
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
|
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* Font override for retro feel */
|
|
body {
|
|
font-family: "IBM Plex Mono", "Courier New", monospace;
|
|
}
|
|
|
|
/* Links - classic blue underlined */
|
|
a {
|
|
color: hsl(var(--primary));
|
|
text-decoration: underline;
|
|
}
|
|
a:visited {
|
|
color: hsl(300 100% 33%);
|
|
}
|
|
|
|
/* Horizontal rules */
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid hsl(var(--bevel-dark));
|
|
margin: 8px 0;
|
|
}
|