Extracted stack files
This commit is contained in:
ka-official
329
client/src/index.css
Normal file
329
client/src/index.css
Normal file
@@ -0,0 +1,329 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* LIGHT MODE */
|
||||
:root {
|
||||
--button-outline: rgba(0,0,0, .10);
|
||||
--badge-outline: rgba(0,0,0, .05);
|
||||
|
||||
/* Automatic computation of border around primary / danger buttons */
|
||||
--opaque-button-border-intensity: -8; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(0,0,0, .03);
|
||||
--elevate-2: rgba(0,0,0, .08);
|
||||
|
||||
--background: red; /*replace with H S L */
|
||||
|
||||
--foreground: red; /*replace with H S L */
|
||||
|
||||
--border: red; /*replace with H S L */
|
||||
|
||||
--card: red; /*replace with H S L */
|
||||
|
||||
--card-foreground: red; /*replace with H S L */
|
||||
|
||||
--card-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar: red; /*replace with H S L */
|
||||
|
||||
--sidebar-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-ring: red; /*replace with H S L */
|
||||
|
||||
--popover: red; /*replace with H S L */
|
||||
|
||||
--popover-foreground: red; /*replace with H S L */
|
||||
|
||||
--popover-border: red; /*replace with H S L */
|
||||
|
||||
--primary: red; /*replace with H S L */
|
||||
|
||||
--primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--secondary: red; /*replace with H S L */
|
||||
|
||||
--secondary-foreground: red; /*replace with H S L */
|
||||
|
||||
--muted: red; /*replace with H S L */
|
||||
|
||||
--muted-foreground: red; /*replace with H S L */
|
||||
|
||||
--accent: red; /*replace with H S L */
|
||||
|
||||
--accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--destructive: red; /*replace with H S L */
|
||||
|
||||
--destructive-foreground: red; /*replace with H S L */
|
||||
|
||||
--input: red; /*replace with H S L */
|
||||
--ring: red; /*replace with H S L */
|
||||
--chart-1: red; /*replace with H S L */
|
||||
--chart-2: red; /*replace with H S L */
|
||||
--chart-3: red; /*replace with H S L */
|
||||
--chart-4: red; /*replace with H S L */
|
||||
--chart-5: red; /*replace with H S L */
|
||||
|
||||
--font-sans: 'Inter', sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Menlo, monospace;
|
||||
--radius: .5rem; /* 8px */
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); /*replace with H S L */
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); /*replace with H S L */
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
||||
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
||||
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--primary-border: hsl(var(--primary));
|
||||
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--secondary-border: hsl(var(--secondary));
|
||||
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--muted-border: hsl(var(--muted));
|
||||
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--accent-border: hsl(var(--accent));
|
||||
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--destructive-border: hsl(var(--destructive));
|
||||
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--button-outline: rgba(255,255,255, .10);
|
||||
--badge-outline: rgba(255,255,255, .05);
|
||||
|
||||
--opaque-button-border-intensity: 9; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(255,255,255, .04);
|
||||
--elevate-2: rgba(255,255,255, .09);
|
||||
|
||||
--background: red; /*replace with H S L */
|
||||
|
||||
--foreground: red; /*replace with H S L */
|
||||
|
||||
--border: red; /*replace with H S L */
|
||||
|
||||
--card: red; /*replace with H S L */
|
||||
|
||||
--card-foreground: red; /*replace with H S L */
|
||||
|
||||
--card-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar: red; /*replace with H S L */
|
||||
|
||||
--sidebar-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-ring: red; /*replace with H S L */
|
||||
|
||||
--popover: red; /*replace with H S L */
|
||||
|
||||
--popover-foreground: red; /*replace with H S L */
|
||||
|
||||
--popover-border: red; /*replace with H S L */
|
||||
|
||||
--primary: red; /*replace with H S L */
|
||||
|
||||
--primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--secondary: red; /*replace with H S L */
|
||||
|
||||
--secondary-foreground: red; /*replace with H S L */
|
||||
|
||||
--muted: red; /*replace with H S L */
|
||||
|
||||
--muted-foreground: red; /*replace with H S L */
|
||||
|
||||
--accent: red; /*replace with H S L */
|
||||
|
||||
--accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--destructive: red; /*replace with H S L */
|
||||
|
||||
--destructive-foreground: red; /*replace with H S L */
|
||||
|
||||
/* Used as the border around inputs. Dark mode: Should be a border that is light enough to have high contrast when rendered on a --card background. More contrast than standard --border */
|
||||
--input: red; /*replace with H S L */
|
||||
--ring: red; /*replace with H S L */
|
||||
--chart-1: red; /*replace with H S L */
|
||||
--chart-2: red; /*replace with H S L */
|
||||
--chart-3: red; /*replace with H S L */
|
||||
--chart-4: red; /*replace with H S L */
|
||||
--chart-5: red; /*replace with H S L */
|
||||
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Using the elevate system.
|
||||
* Automatic contrast adjustment.
|
||||
*
|
||||
* <element className="hover-elevate" />
|
||||
* <element className="active-elevate-2" />
|
||||
*
|
||||
* // Using the tailwind utility when a data attribute is "on"
|
||||
* <element className="toggle-elevate data-[state=on]:toggle-elevated" />
|
||||
* // Or manually controlling the toggle state
|
||||
* <element className="toggle-elevate toggle-elevated" />
|
||||
*
|
||||
* Elevation systems have to handle many states.
|
||||
* - not-hovered, vs. hovered vs. active (three mutually exclusive states)
|
||||
* - toggled or not
|
||||
* - focused or not (this is not handled with these utilities)
|
||||
*
|
||||
* Even without handling focused or not, this is six possible combinations that
|
||||
* need to be distinguished from eachother visually.
|
||||
*/
|
||||
@layer utilities {
|
||||
|
||||
/* Hide ugly search cancel button in Chrome until we can style it properly */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* Placeholder styling for contentEditable div */
|
||||
[contenteditable][data-placeholder]:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: hsl(var(--muted-foreground));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
|
||||
* buttons/badges can remove the automatic brightness adjustment on interactions
|
||||
* and program their own. */
|
||||
.no-default-hover-elevate {}
|
||||
|
||||
.no-default-active-elevate {}
|
||||
|
||||
|
||||
/**
|
||||
* Toggleable backgrounds go behind the content. Hoverable/active goes on top.
|
||||
* This way they can stack/compound. Both will overlap the parent's borders!
|
||||
* So borders will be automatically adjusted both on toggle, and hover/active,
|
||||
* and they will be compounded.
|
||||
*/
|
||||
.toggle-elevate::before,
|
||||
.toggle-elevate-2::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
/* sits behind content but above backdrop */
|
||||
}
|
||||
|
||||
.toggle-elevate.toggle-elevated::before {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.toggle-elevate::before {
|
||||
inset: -1px;
|
||||
}
|
||||
|
||||
/* Does not work on elements with overflow:hidden! */
|
||||
.hover-elevate:not(.no-default-hover-elevate),
|
||||
.active-elevate:not(.no-default-active-elevate),
|
||||
.hover-elevate-2:not(.no-default-hover-elevate),
|
||||
.active-elevate-2:not(.no-default-active-elevate) {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hover-elevate:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:not(.no-default-active-elevate)::after,
|
||||
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:not(.no-default-active-elevate)::after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: 999;
|
||||
/* sits in front of content */
|
||||
}
|
||||
|
||||
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-1);
|
||||
}
|
||||
|
||||
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate-2:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after {
|
||||
inset: -1px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user