mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
feat: upgraded to tw v4
This commit is contained in:
=
@@ -1,140 +1,420 @@
|
||||
@import "@fontsource/inter/400.css";
|
||||
@import "@fontsource/inter/500.css";
|
||||
@import "@fontsource/inter/700.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@import "@fontsource/inter/400.css" layer(base);
|
||||
@import "@fontsource/inter/500.css" layer(base);
|
||||
@import "@fontsource/inter/700.css" layer(base);
|
||||
|
||||
html {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
@source not "../public";
|
||||
|
||||
:root {
|
||||
--toastify-color-dark: theme(colors.mineshaft.700);
|
||||
}
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
.Toastify__toast {
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.Toastify__toast-body {
|
||||
@apply items-start;
|
||||
}
|
||||
|
||||
.Toastify__toast-icon {
|
||||
@apply w-4 pt-1;
|
||||
}
|
||||
|
||||
.rdp-day,
|
||||
.rdp-nav_button {
|
||||
@apply rounded-md hover:text-mineshaft-500;
|
||||
}
|
||||
|
||||
.rdp-button:hover:not([disabled]):not(.rdp-day_selected),
|
||||
.rdp-nav_button:hover {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.rdp-day_today {
|
||||
@apply bg-primary/50 text-mineshaft-500 hover:bg-primary-600;
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.flex-0 {
|
||||
flex: 0;
|
||||
}
|
||||
.flex-2 {
|
||||
flex-grow: 2;
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
|
||||
.flex-3 {
|
||||
flex-grow: 3;
|
||||
html {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
.min-table-row {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:root {
|
||||
font-family: var(--font-inter);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--background: oklch(0.145 0 0);
|
||||
|
||||
.w-inherit {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.h-inherit {
|
||||
height: inherit;
|
||||
--toastify-color-dark: var(--color-mineshaft-700);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.secret-table {
|
||||
@apply w-full bg-mineshaft-800 text-left text-bunker-300;
|
||||
}
|
||||
@theme {
|
||||
/*legacy color schema */
|
||||
/* Fonts */
|
||||
--font-inter: "Inter", sans-serif;
|
||||
|
||||
/* Primary */
|
||||
--color-primary-50: #fffff5;
|
||||
--color-primary-100: #fcfce8;
|
||||
--color-primary-200: #f8faca;
|
||||
--color-primary-300: #f4f7ab;
|
||||
--color-primary-400: #ecf26d;
|
||||
--color-primary-500: #e0ed34;
|
||||
--color-primary-600: #c2d62b;
|
||||
--color-primary-700: #97b31d;
|
||||
--color-primary-800: #708f13;
|
||||
--color-primary-900: #4d6b0b;
|
||||
--color-primary: #e0ed34;
|
||||
|
||||
/* Grey + Misc */
|
||||
--color-grey: #0d1117;
|
||||
--color-githubblack: #020409;
|
||||
--color-blue1: #3498db;
|
||||
--color-blue2: #130f40;
|
||||
--color-orange: #f39c12;
|
||||
|
||||
/* Mineshaft */
|
||||
--color-mineshaft-50: #f5f5f5;
|
||||
--color-mineshaft-100: #ebebeb;
|
||||
--color-mineshaft-200: #ccccce;
|
||||
--color-mineshaft-300: #adaeb0;
|
||||
--color-mineshaft-400: #707174;
|
||||
--color-mineshaft-500: #323439;
|
||||
--color-mineshaft-600: #2d2f33;
|
||||
--color-mineshaft-700: #26272b;
|
||||
--color-mineshaft-800: #1e1f22;
|
||||
--color-mineshaft-900: #19191c;
|
||||
--color-mineshaft: #323439;
|
||||
|
||||
/* Chicago */
|
||||
--color-chicago-50: #f7f7f7;
|
||||
--color-chicago-100: #efefef;
|
||||
--color-chicago-200: #d6d6d7;
|
||||
--color-chicago-300: #bdbebf;
|
||||
--color-chicago-400: #8c8d8e;
|
||||
--color-chicago-500: #5b5c5e;
|
||||
--color-chicago-600: #525355;
|
||||
--color-chicago-700: #444547;
|
||||
--color-chicago-800: #373738;
|
||||
--color-chicago-900: #2d2d2e;
|
||||
--color-chicago: #5b5c5e;
|
||||
|
||||
/* Bunker */
|
||||
--color-bunker-50: #f3f4f4;
|
||||
--color-bunker-100: #e8e8e9;
|
||||
--color-bunker-200: #c5c6c8;
|
||||
--color-bunker-300: #a2a4a6;
|
||||
--color-bunker-400: #5d5f64;
|
||||
--color-bunker-500: #171b21;
|
||||
--color-bunker-600: #15181e;
|
||||
--color-bunker-700: #111419;
|
||||
--color-bunker-800: #0e1014;
|
||||
--color-bunker-900: #0b0d10;
|
||||
--color-bunker: #171b21;
|
||||
|
||||
/* Yellow */
|
||||
--color-yellow-50: #fefcf3;
|
||||
--color-yellow-100: #fef9e7;
|
||||
--color-yellow-200: #fcf0c3;
|
||||
--color-yellow-300: #f9e79f;
|
||||
--color-yellow-400: #f5d657;
|
||||
--color-yellow-500: #f1c40f;
|
||||
--color-yellow-600: #d9b00e;
|
||||
--color-yellow-700: #b5930b;
|
||||
--color-yellow-800: #917609;
|
||||
--color-yellow-900: #766007;
|
||||
--color-yellow: #f1c40f;
|
||||
|
||||
/* Red */
|
||||
--color-red-50: #fef6f5;
|
||||
--color-red-100: #fdedec;
|
||||
--color-red-200: #f9d2ce;
|
||||
--color-red-300: #f5b7b1;
|
||||
--color-red-400: #ee8277;
|
||||
--color-red-500: #e74c3c;
|
||||
--color-red-600: #d04436;
|
||||
--color-red-700: #ad392d;
|
||||
--color-red-800: #8b2e24;
|
||||
--color-red-900: #71251d;
|
||||
--color-red: #e74c3c;
|
||||
|
||||
/* Green */
|
||||
--color-green-50: #f5fcf8;
|
||||
--color-green-100: #eafaf1;
|
||||
--color-green-200: #cbf2dc;
|
||||
--color-green-300: #abebc6;
|
||||
--color-green-400: #6ddb9c;
|
||||
--color-green-500: #2ecc71;
|
||||
--color-green-600: #29b866;
|
||||
--color-green-700: #239955;
|
||||
--color-green-800: #1c7a44;
|
||||
--color-green-900: #176437;
|
||||
--color-green: #2ecc71;
|
||||
|
||||
/* Blue */
|
||||
--color-blue-50: #f2f8ff;
|
||||
--color-blue-100: #e6f1ff;
|
||||
--color-blue-200: #bfdbff;
|
||||
--color-blue-300: #99c5ff;
|
||||
--color-blue-400: #4d9aff;
|
||||
--color-blue-500: #006eff;
|
||||
--color-blue-600: #0063e6;
|
||||
--color-blue-700: #0053bf;
|
||||
--color-blue-800: #004299;
|
||||
--color-blue-900: #00367d;
|
||||
}
|
||||
|
||||
@utility min-table-row {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@utility w-inherit {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
@utility h-inherit {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
@utility secret-table {
|
||||
width: 100%;
|
||||
background: var(--color-mineshaft-800);
|
||||
text-align: left;
|
||||
color: var(--color-bunker-300);
|
||||
|
||||
/* padding except for comment column */
|
||||
.secret-table th {
|
||||
& th {
|
||||
@apply px-4 py-2 font-medium;
|
||||
}
|
||||
|
||||
.secret-table td {
|
||||
& td {
|
||||
@apply px-1 py-1 pr-2 text-sm;
|
||||
}
|
||||
|
||||
.secret-table th:not(:last-child),
|
||||
.secret-table td:not(:last-child) {
|
||||
@apply border-r border-mineshaft-600;
|
||||
& th:not(:last-child) {
|
||||
@apply border-r;
|
||||
border-color: var(--color-mineshaft-600);
|
||||
}
|
||||
|
||||
.secret-table tr {
|
||||
@apply border-b border-mineshaft-600;
|
||||
& td:not(:last-child) {
|
||||
@apply border-r;
|
||||
border-color: var(--color-mineshaft-600);
|
||||
}
|
||||
|
||||
.breadcrumb::after,
|
||||
.breadcrumb::before {
|
||||
& tr {
|
||||
@apply border-b;
|
||||
border-color: var(--color-mineshaft-600);
|
||||
}
|
||||
}
|
||||
|
||||
@utility breadcrumb {
|
||||
&::after {
|
||||
content: "";
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@apply bg-mineshaft-800;
|
||||
background: var(--color-mineshaft-800);
|
||||
}
|
||||
|
||||
.breadcrumb:hover::before {
|
||||
@apply bg-mineshaft-600;
|
||||
&::before {
|
||||
content: "";
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: var(--color-mineshaft-800);
|
||||
}
|
||||
|
||||
.breadcrumb:hover::after {
|
||||
@apply bg-mineshaft-600;
|
||||
&:hover::before {
|
||||
background: var(--color-mineshaft-600);
|
||||
}
|
||||
|
||||
.breadcrumb::after {
|
||||
&:hover::after {
|
||||
background: var(--color-mineshaft-600);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 4px;
|
||||
bottom: -2.5px;
|
||||
transform: skew(-30deg);
|
||||
}
|
||||
|
||||
.breadcrumb::before {
|
||||
&::before {
|
||||
left: 4px;
|
||||
top: -2.5px;
|
||||
transform: skew(30deg);
|
||||
}
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
@utility thin-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.25rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: gray;
|
||||
}
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: gray transparent;
|
||||
}
|
||||
|
||||
.thin-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: gray transparent;
|
||||
@layer utilities {
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -48%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
40%,
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes type {
|
||||
0% {
|
||||
transform: translateX(0ch);
|
||||
}
|
||||
5%,
|
||||
10% {
|
||||
transform: translateX(1ch);
|
||||
}
|
||||
15%,
|
||||
20% {
|
||||
transform: translateX(2ch);
|
||||
}
|
||||
25%,
|
||||
30% {
|
||||
transform: translateX(3ch);
|
||||
}
|
||||
35%,
|
||||
40% {
|
||||
transform: translateX(4ch);
|
||||
}
|
||||
45%,
|
||||
50% {
|
||||
transform: translateX(5ch);
|
||||
}
|
||||
55%,
|
||||
60% {
|
||||
transform: translateX(6ch);
|
||||
}
|
||||
65%,
|
||||
70% {
|
||||
transform: translateX(7ch);
|
||||
}
|
||||
75%,
|
||||
80% {
|
||||
transform: translateX(8ch);
|
||||
}
|
||||
85%,
|
||||
90% {
|
||||
transform: translateX(9ch);
|
||||
}
|
||||
95%,
|
||||
100% {
|
||||
transform: translateX(11ch);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.fadeIn {
|
||||
animation: fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.popIn {
|
||||
animation: popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.bounce {
|
||||
animation: bounce 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.wiggle {
|
||||
animation: wiggle 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.popup {
|
||||
animation: popup 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 1500ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
.type {
|
||||
animation: type 2.7s ease-out 0.8s infinite alternate both;
|
||||
}
|
||||
|
||||
.type-reverse {
|
||||
animation: type 1.8s ease-out 0s infinite alternate-reverse both;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.Toastify__toast {
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.Toastify__toast-body {
|
||||
@apply items-start;
|
||||
}
|
||||
|
||||
.Toastify__toast-icon {
|
||||
@apply w-4 pt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-conic-bg {
|
||||
background: conic-gradient(
|
||||
rgb(235, 87, 87),
|
||||
@@ -145,51 +425,8 @@ html {
|
||||
);
|
||||
}
|
||||
|
||||
.tree-line::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 1px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
height: 50%;
|
||||
background-color: #cbd5e0;
|
||||
}
|
||||
|
||||
.tree-line::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 1px;
|
||||
background-color: #cbd5e0;
|
||||
}
|
||||
|
||||
.show-tags {
|
||||
transform: translateY(10px);
|
||||
transition: all 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
.hide-tags {
|
||||
transform: translateY(-20px);
|
||||
transition: all 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show-hex-input {
|
||||
transform: translateY(-33px);
|
||||
transition: all 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
.hide-hex-input {
|
||||
transform: translateY(20px);
|
||||
transition: all 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
@apply bg-primary-400;
|
||||
background: var(--color-primary-400);
|
||||
}
|
||||
|
||||
[contentEditable="true"]:before {
|
||||
@@ -197,4 +434,4 @@ html {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
@apply text-sm text-gray-500 opacity-50;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user