mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Danny White
e5df232b44
## What kind of change does this PR introduce? UI polish ## What is the current behavior? Unified logs row chrome is slightly misaligned (checkbox vs filter toggle, uneven gaps around the level dot), success grey is too dark and doesn’t match the Level key, and log-type icons read a bit heavy. ## What is the new behavior? - Aligns the row checkbox with the filter sidebar toggle and spaces the level dot evenly between checkbox and timestamp - Drops the checkbox `translate-y` nudge in favour of normal middle alignment - Introduces `--chart-success` so the chart and Level key/dots share a lighter grey - Softens log-type icon colour on each row | Before | After | | --- | --- | | <img width="1024" height="759" alt="1293" src="https://github.com/user-attachments/assets/af7ab83f-8917-41cb-99f3-1c1f92df769e" /> | <img width="1024" height="759" alt="52159" src="https://github.com/user-attachments/assets/9b859308-2101-4a02-bdc1-75e5750f84fa" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved Unified Logs table spacing and alignment, including narrower selection and level columns. * Refined checkbox and date-cell presentation for a cleaner layout. * Updated log type icons to use muted foreground styling. * **Bug Fixes** * Success statuses and chart indicators now consistently use the dedicated success color across light and dark themes. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
477 lines
11 KiB
CSS
477 lines
11 KiB
CSS
@import 'config/tailwind.config.css';
|
|
@import './../../../packages/ui/build/css/themes/classic-dark.css';
|
|
@import 'config/typography.css';
|
|
|
|
@source '../pages/**/*.{js,ts,jsx,tsx}';
|
|
@source '../components/**/*.{js,ts,jsx,tsx}';
|
|
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
|
|
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
|
|
|
|
@theme inline {
|
|
--font-heading: var(--font-heading, var(--font-sans));
|
|
}
|
|
|
|
@theme {
|
|
--text-grid: 13px;
|
|
|
|
--color-typography-body-light: var(--foreground-light);
|
|
--color-typography-body-dark: var(--foreground-light);
|
|
--color-typography-body-secondary-light: var(--foreground-lighter);
|
|
--color-typography-body-secondary-dark: var(--foreground-lighter);
|
|
--color-typography-body-strong-light: var(--foreground-default);
|
|
--color-typography-body-strong-dark: var(--foreground-default);
|
|
--color-typography-body-faded-light: var(--foreground-muted);
|
|
--color-typography-body-faded-dark: var(--foreground-muted);
|
|
|
|
--color-table-body-light: var(--background-default);
|
|
--color-table-body-dark: var(--background-default);
|
|
--color-table-header-light: var(--background-surface-100);
|
|
--color-table-header-dark: var(--background-surface-100);
|
|
--color-table-footer-light: var(--background-surface-100);
|
|
--color-table-footer-dark: var(--background-surface-100);
|
|
--color-table-border-light: var(--border-default);
|
|
--color-table-border-dark: var(--border-default);
|
|
|
|
--color-panel-body-light: var(--background-surface-100);
|
|
--color-panel-body-dark: var(--background-surface-100);
|
|
--color-panel-header-light: var(--background-surface-100);
|
|
--color-panel-header-dark: var(--background-surface-100);
|
|
--color-panel-footer-light: var(--background-surface-100);
|
|
--color-panel-footer-dark: var(--background-surface-100);
|
|
--color-panel-border-light: var(--border-default);
|
|
--color-panel-border-dark: var(--border-default);
|
|
--color-panel-border-interior-light: var(--border-muted);
|
|
--color-panel-border-interior-dark: var(--border-muted);
|
|
--color-panel-border-hover-light: var(--border-muted);
|
|
--color-panel-border-hover-dark: var(--border-muted);
|
|
|
|
--animate-shimmer: shimmer 2s infinite linear;
|
|
--animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
|
|
--animate-badge-pulse: badge-pulse 3s ease-in-out infinite;
|
|
--animate-chevron-up: chevron-up 2s ease-in-out infinite;
|
|
--animate-sway: sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
--animate-marketplace-featured-progress: marketplace-featured-progress linear forwards;
|
|
|
|
/* font sizing and weights optimized for Inter */
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.125rem;
|
|
--text-2xl: 1.375rem;
|
|
--text-3xl: 1.75rem;
|
|
--text-4xl: 2.125rem;
|
|
--text-5xl: 2.875rem;
|
|
--text-6xl: 3.625rem;
|
|
--text-7xl: 4.375rem;
|
|
--text-8xl: 5.875rem;
|
|
--text-9xl: 7.875rem;
|
|
--font-weight-normal: 450;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes badge-shimmer {
|
|
0% {
|
|
transform: rotate(-45deg) translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: rotate(-45deg) translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: rotate(-45deg) translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes badge-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes chevron-up {
|
|
0%,
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes sway {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-10deg) scale(1.5) translateY(4rem);
|
|
}
|
|
50% {
|
|
transform: rotate(10deg) scale(1.5) translateY(2rem);
|
|
}
|
|
}
|
|
|
|
@keyframes marketplace-featured-progress {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--chart-1: hsl(var(--brand-default));
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--chart-blue: 217 91% 60%;
|
|
--chart-warning: hsl(var(--warning-500));
|
|
--chart-warning-muted: hsl(var(--warning-400));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white);
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--ring);
|
|
--header-height: 3rem;
|
|
}
|
|
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--chart-1: hsl(var(--brand-default));
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--chart-blue: 217 91% 65%;
|
|
--chart-warning: hsl(var(--warning-default));
|
|
--chart-warning-muted: hsl(var(--warning-500));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white);
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--ring);
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--border-default, currentColor);
|
|
}
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__next,
|
|
.main {
|
|
@apply bg-dash-sidebar relative;
|
|
@apply text-foreground;
|
|
@apply overflow-x-clip;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
overscroll-behavior: none;
|
|
font-weight: 450;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-heading font-semibold;
|
|
}
|
|
|
|
.form-group .form-text,
|
|
.Form .form-text {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group input[type='text'],
|
|
.form-group input[type='email'],
|
|
.form-group input[type='url'],
|
|
.form-group input[type='password'],
|
|
.form-group input[type='number'],
|
|
.form-group input[type='date'],
|
|
.form-group input[type='datetime-local'],
|
|
.form-group input[type='month'],
|
|
.form-group input[type='search'],
|
|
.form-group input[type='tel'],
|
|
.form-group input[type='time'],
|
|
.form-group input[type='week'],
|
|
.form-group input[multiple],
|
|
.form-group textarea,
|
|
.form-group select,
|
|
input.form-control,
|
|
.form-control input,
|
|
.form-control textarea {
|
|
@apply block;
|
|
@apply box-border;
|
|
/* @apply w-full ; */
|
|
@apply rounded-md;
|
|
@apply shadow-xs;
|
|
@apply transition-all;
|
|
@apply text-foreground;
|
|
@apply border;
|
|
@apply focus:shadow-md;
|
|
|
|
@apply focus:border-stronger;
|
|
@apply focus:ring-border-overlay;
|
|
|
|
@apply bg-studio;
|
|
@apply border-strong border;
|
|
|
|
@apply outline-hidden;
|
|
@apply focus:ring-2 focus:ring-current;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
@apply px-4 py-2;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group input[type='text']:focus,
|
|
.form-group input[type='email']:focus,
|
|
.form-group input[type='url']:focus,
|
|
.form-group input[type='password']:focus,
|
|
.form-group input[type='number']:focus,
|
|
.form-group input[type='date']:focus,
|
|
.form-group input[type='datetime-local']:focus,
|
|
.form-group input[type='month']:focus,
|
|
.form-group input[type='search']:focus,
|
|
.form-group input[type='tel']:focus,
|
|
.form-group input[type='time']:focus,
|
|
.form-group input[type='week']:focus,
|
|
.form-group input[multiple]:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus,
|
|
.form-group input:focus .form-control:focus {
|
|
box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
|
|
}
|
|
|
|
/* icons in date / time inputs */
|
|
.dark input[type='date']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='time']::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.8);
|
|
}
|
|
|
|
input.is-invalid {
|
|
@apply bg-red-100;
|
|
@apply border border-red-700;
|
|
@apply focus:ring-red-500;
|
|
@apply placeholder:text-red-600;
|
|
}
|
|
|
|
input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.billing-input-fixed {
|
|
@apply w-full appearance-none rounded-sm border bg-gray-700 py-2 px-3 leading-tight text-gray-300 shadow-sm;
|
|
}
|
|
|
|
.input-mono {
|
|
input,
|
|
textarea {
|
|
@apply font-mono;
|
|
}
|
|
}
|
|
|
|
.input-sm {
|
|
input,
|
|
textarea {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
|
|
.input-xs {
|
|
input,
|
|
textarea {
|
|
@apply text-xs;
|
|
}
|
|
}
|
|
|
|
input[type='radio'] {
|
|
@apply p-0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
|
|
}
|
|
|
|
/* TODO: It doesnt' work, need to check */
|
|
.hide-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
div[data-radix-portal]:not(.portal--toast) {
|
|
z-index: 2147483646 !important;
|
|
}
|
|
|
|
.billing-compute-radio {
|
|
label {
|
|
@apply items-center justify-between;
|
|
&:last-child {
|
|
opacity: 100 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharts-tooltip-cursor {
|
|
@apply fill-transparent;
|
|
}
|
|
|
|
.expandable-tr {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.expanded-row-content {
|
|
display: grid;
|
|
grid-column: 1/-1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.multi-select {
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
.text-area-resize-none {
|
|
textarea {
|
|
@apply resize-none;
|
|
}
|
|
}
|
|
|
|
.capitalize-sentence:first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.input-clear {
|
|
input {
|
|
@apply pr-7;
|
|
}
|
|
}
|
|
|
|
/* to do: remove this CSS and do the same thing in a reusable tooltip component */
|
|
[data-radix-popper-content-wrapper] {
|
|
@apply z-50!;
|
|
}
|
|
|
|
.settings-container {
|
|
@apply mx-auto max-w-4xl xl:max-w-6xl;
|
|
}
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
@apply bg-brand-500!;
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 3px !important;
|
|
bottom: 3px !important;
|
|
width: 6px !important;
|
|
height: 6px !important;
|
|
@apply border-strong! dark:border-r-2! dark:border-b-2! dark:border-overlay!;
|
|
}
|
|
|
|
@keyframes typewriter {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
50% {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Zoomable image (react-medium-image-zoom) */
|
|
|
|
[data-rmiz-modal]:focus,
|
|
[data-rmiz-modal-overlay]:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
[data-rmiz-modal-overlay],
|
|
[data-rmiz-modal-img] {
|
|
transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
|
|
}
|
|
|
|
[data-rmiz-modal-overlay='visible'] {
|
|
@apply bg-background!;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
[data-rmiz-modal-img] {
|
|
image-rendering: high-quality;
|
|
}
|
|
|
|
.prose.text-sm ol > li::before {
|
|
top: 0.05rem;
|
|
}
|
|
|
|
.prose.text-sm ul > li::before {
|
|
top: 0.65rem;
|
|
}
|