mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
70c3bafe63
## Problem - We have unused CSS from previous design system (`.sbui-*` classes) - We use Tailwind `@apply` when we could set the tailwind classes on the components directly ## Solution - Delete all `.sbui-*` classes as we don't use them anymore - Move classes directly on components when that make sense ## Notes I did not migrate all `sbgrid` classes as they are applied in multiple components <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Updated grid editors, placeholders, headers, and dropdowns for cleaner spacing, truncation, and alignment. * Improved layout consistency across text, number, time, JSON, and foreign-key cells. * Adjusted search and impersonation inputs for better fit and padding. * **Chores** * Simplified and removed outdated styling overrides across the Studio and web app. * Reduced unused UI package surface by removing an unused input icon container export. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
164 lines
2.8 KiB
CSS
164 lines
2.8 KiB
CSS
@reference "./globals.css";
|
|
|
|
.Code {
|
|
width: 100%;
|
|
|
|
.prism-code {
|
|
@apply m-0 p-1;
|
|
background-color: none;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
|
|
/* overflow: auto !important; */
|
|
}
|
|
|
|
.token-line {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.token.imports,
|
|
.token.property-access {
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.keyword.module,
|
|
.token.function {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.plain,
|
|
.token.parameter,
|
|
.token.punctuation,
|
|
.token.operator,
|
|
.token.console.class-name,
|
|
.token.doc-comment.parameter,
|
|
.token.doc-comment.optional-parameter,
|
|
.token.doc-comment.parameter.punctuation,
|
|
.token.doc-comment.optional-parameter.punctuation {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-light;
|
|
}
|
|
|
|
.token.keyword,
|
|
.token.doc-comment.keyword {
|
|
font-style: normal !important;
|
|
@apply !text-blue-900;
|
|
}
|
|
|
|
.token.string {
|
|
font-style: normal !important;
|
|
@apply !text-brand;
|
|
}
|
|
|
|
.token.constant {
|
|
font-style: normal !important;
|
|
@apply !text-blue-900;
|
|
}
|
|
|
|
.token.comment {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.number {
|
|
@apply !text-brand;
|
|
}
|
|
|
|
.token.boolean,
|
|
.token.doc-comment.class-name {
|
|
@apply text-brand;
|
|
}
|
|
|
|
.codeBlock {
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
&.codeBlockWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&.codeBlockWrapper:hover .buttonContainer {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.buttonContainer {
|
|
right: 5px;
|
|
top: 5px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 200ms ease-in-out,
|
|
visibility 200ms ease-in-out,
|
|
bottom 200ms ease-in-out;
|
|
|
|
button {
|
|
@apply rounded-sm text-xs;
|
|
background: rgb(1, 22, 39);
|
|
border: 1px solid rgb(214, 222, 235);
|
|
color: rgb(214, 222, 235);
|
|
cursor: pointer;
|
|
line-height: 12px;
|
|
outline: none;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CustomCodeBlock {
|
|
width: 100%;
|
|
|
|
.code-with-header pre {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
.code-with-response pre {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.code-header {
|
|
/* @apply bg-gray-600; */
|
|
color: #ccc;
|
|
padding: 5px 15px;
|
|
border-radius: 4px 4px 0 0;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
}
|
|
|
|
.FunctionBlock {
|
|
h4 {
|
|
margin-top: 36px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0px;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.panel-form {
|
|
button {
|
|
@apply m-4 mr-0;
|
|
}
|
|
|
|
.form {
|
|
.form-group {
|
|
@apply border-t border-b m-0 -mt-px text-left py-2;
|
|
|
|
input {
|
|
@apply px-4 text-white;
|
|
border: none !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|