Reorganize with mono theme
This commit is contained in:
+170
-47
@@ -4,54 +4,99 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 10%;
|
||||
--card: 0 0% 99%;
|
||||
--card-foreground: 0 0% 10%;
|
||||
--badge: 0 100%, 50%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 10%;
|
||||
--primary: 0 0% 10%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 0% 96%;
|
||||
--secondary-foreground: 0 0% 10%;
|
||||
--muted: 0 0% 96%;
|
||||
--muted-foreground: 0 0% 45%;
|
||||
--accent: 0 0% 96%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 0 0% 90%;
|
||||
--input: 0 0% 90%;
|
||||
--ring: 0 0% 10%;
|
||||
--radius: 0.5rem;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 0 0% 14.5%;
|
||||
--card: 0 0% 94%;
|
||||
--card-foreground: 0 0% 14.5%;
|
||||
--popover: 0 0% 94%;
|
||||
--popover-foreground: 0 0% 14.5%;
|
||||
--primary: 0 0% 55.5%;
|
||||
--primary-foreground: 0 0% 98.5%;
|
||||
--secondary: 0 0% 92%;
|
||||
--secondary-foreground: 0 0% 20.5%;
|
||||
--muted: 0 0% 92%;
|
||||
--muted-foreground: 0 0% 54.9%;
|
||||
--accent: 0 0% 92%;
|
||||
--accent-foreground: 0 0% 20.5%;
|
||||
--destructive: 7 85% 58%;
|
||||
--destructive-foreground: 0 0% 97%;
|
||||
--border: 0 0% 88%;
|
||||
--input: 0 0% 88%;
|
||||
--ring: 0 0% 71%;
|
||||
--chart-1: 0 0% 55.5%;
|
||||
--chart-2: 0 0% 55.5%;
|
||||
--chart-3: 0 0% 55.5%;
|
||||
--chart-4: 0 0% 55.5%;
|
||||
--chart-5: 0 0% 55.5%;
|
||||
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-sm:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-md:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-lg:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-xl:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 0 0% 10%;
|
||||
--foreground: 0 0% 90%;
|
||||
--card: 0 0% 12%;
|
||||
--card-foreground: 0 0% 90%;
|
||||
--popover: 0 0% 20%;
|
||||
--popover-foreground: 0 0% 90%;
|
||||
--primary: 0 0% 90%;
|
||||
--primary-foreground: 0 0% 10%;
|
||||
--secondary: 0 0% 30%;
|
||||
--secondary-foreground: 0 0% 90%;
|
||||
--muted: 0 0% 30%;
|
||||
--muted-foreground: 0 0% 70%;
|
||||
--accent: 0 0% 30%;
|
||||
--accent-foreground: 0 0% 90%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 10%;
|
||||
--border: 0 0% 20%;
|
||||
--input: 0 0% 20%;
|
||||
--ring: 0 0% 90%;
|
||||
--radius: 0.5rem;
|
||||
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.dark {
|
||||
--background: 0 0% 12%;
|
||||
--foreground: 0 0% 98.5%;
|
||||
--card: 0 0% 18%;
|
||||
--card-foreground: 0 0% 98.5%;
|
||||
--popover: 0 0% 26.9%;
|
||||
--popover-foreground: 0 0% 98.5%;
|
||||
--primary: 0 0% 55.5%;
|
||||
--primary-foreground: 0 0% 98.5%;
|
||||
--secondary: 0 0% 26.9%;
|
||||
--secondary-foreground: 0 0% 98.5%;
|
||||
--muted: 0 0% 26.9%;
|
||||
--muted-foreground: 0 0% 71%;
|
||||
--accent: 0 0% 37.2%;
|
||||
--accent-foreground: 0 0% 98.5%;
|
||||
--destructive: 7 85% 70%;
|
||||
--destructive-foreground: 0 0% 26.9%;
|
||||
--border: 0 0% 25%;
|
||||
--input: 0 0% 43.9%;
|
||||
--ring: 0 0% 55.5%;
|
||||
--chart-1: 0 0% 55.5%;
|
||||
--chart-2: 0 0% 55.5%;
|
||||
--chart-3: 0 0% 55.5%;
|
||||
--chart-4: 0 0% 55.5%;
|
||||
--chart-5: 0 0% 55.5%;
|
||||
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-sm:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-md:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-lg:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-xl:
|
||||
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
}
|
||||
|
||||
body {
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,4 +117,82 @@ html {
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove all rounded corners for mono theme */
|
||||
@layer components {
|
||||
/* Cards */
|
||||
.rounded-xl,
|
||||
.rounded-lg,
|
||||
.rounded-md,
|
||||
.rounded-sm,
|
||||
.rounded,
|
||||
.rounded-full {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Override specific component rounded classes */
|
||||
[class*="rounded-"] {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Debug and ensure card backgrounds are visible */
|
||||
@layer components {
|
||||
.bg-card {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
}
|
||||
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove any image gradients/filters */
|
||||
@layer components {
|
||||
img {
|
||||
filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced sidebar styling */
|
||||
@layer components {
|
||||
/* Smooth transitions for sidebar links */
|
||||
.sidebar-link {
|
||||
transition: all 0.15s ease-in-out;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
background-color: hsl(var(--accent));
|
||||
color: hsl(var(--accent-foreground));
|
||||
}
|
||||
|
||||
/* Profile image subtle border */
|
||||
.profile-image {
|
||||
border: 1px solid hsl(var(--border));
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.profile-image:hover {
|
||||
border-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Truncate text in sidebar contact links */
|
||||
.sidebar-contact-link span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user