mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Ivan Vasilov
308cd791a2
This PR preps the monorepo for a migration to Tailwind v4: - Bump all Tailwind dependencies and libraries to the latest possible version, while still compatible with Tailwind 3. - Cleans up obsolete Tailwind 3 specific options and configs. - Cleans up unused CSS files and fixes the CSS imports. - Migrates all `important` uses in `@apply` lines to using the `!` prefix. - Move `typography.css` to the `config` package and import it from the apps. - Migrated all occurrences of `flex-grow`, `flex-shrink`, `overflow-clip` and `overflow-ellipsis` since they're deprecated and will be removed in Tailwind 4. - Make the default theme object typesafe in the `ui` package. - Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and `divider-opacity` to the new format where they're declared as part of the property color. - Bump and unify all imports of `postcss` dependency.
176 lines
3.0 KiB
CSS
176 lines
3.0 KiB
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 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;
|
|
}
|
|
}
|
|
|
|
&.codeBlockWrapper .sbui-btn-container {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 3px;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.codeBlockWrapper:hover .sbui-btn-container {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
}
|
|
}
|