mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
457 lines
8.6 KiB
CSS
457 lines
8.6 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@source not "../public";
|
|
|
|
/*
|
|
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.
|
|
|
|
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);
|
|
}
|
|
|
|
html {
|
|
@apply overflow-hidden;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
font-family: var(--font-inter);
|
|
--foreground: oklch(0.985 0 0);
|
|
--background: oklch(0.145 0 0);
|
|
|
|
--toastify-color-dark: var(--color-mineshaft-700);
|
|
}
|
|
|
|
@theme {
|
|
/* Fonts */
|
|
--font-inter: "Inter", sans-serif;
|
|
--max-width-8xl: 88rem; /* 1408px */
|
|
|
|
/* Colors v2 */
|
|
--color-background: #19191c;
|
|
--color-foreground: #ebebeb;
|
|
--color-success: #2ecc71;
|
|
--color-info: #63b0bd;
|
|
--color-warning: #f1c40f;
|
|
--color-danger: #e74c3c;
|
|
--color-org: #30b3ff;
|
|
--color-sub-org: #96ff59;
|
|
--color-project: #e0ed34;
|
|
--color-neutral: #adaeb0;
|
|
--color-border: #2b2c30;
|
|
--color-label: #adaeb0;
|
|
--color-muted: #707174;
|
|
--color-popover: #141617;
|
|
--color-ring: #2d2f33;
|
|
--color-card: #16181a;
|
|
--color-accent: #7d7f80;
|
|
--color-container: #1a1c1e;
|
|
|
|
/*legacy color schema */
|
|
--color-org-v1: #30b3ff;
|
|
--color-namespace-v1: #96ff59;
|
|
|
|
/* 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 */
|
|
& th {
|
|
@apply px-4 py-2 font-medium;
|
|
}
|
|
|
|
& td {
|
|
@apply px-1 py-1 pr-2 text-sm;
|
|
}
|
|
|
|
& th:not(:last-child) {
|
|
@apply border-r;
|
|
border-color: var(--color-mineshaft-600);
|
|
}
|
|
|
|
& td:not(:last-child) {
|
|
@apply border-r;
|
|
border-color: var(--color-mineshaft-600);
|
|
}
|
|
|
|
& 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;
|
|
background: var(--color-mineshaft-800);
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
height: 60%;
|
|
width: 100%;
|
|
z-index: -1;
|
|
display: block;
|
|
position: absolute;
|
|
background: var(--color-mineshaft-800);
|
|
}
|
|
|
|
&:hover::before {
|
|
background: var(--color-mineshaft-600);
|
|
}
|
|
|
|
&:hover::after {
|
|
background: var(--color-mineshaft-600);
|
|
}
|
|
|
|
&::after {
|
|
left: 4px;
|
|
bottom: -2.5px;
|
|
transform: skew(-30deg);
|
|
}
|
|
|
|
&::before {
|
|
left: 4px;
|
|
top: -2.5px;
|
|
transform: skew(30deg);
|
|
}
|
|
}
|
|
|
|
@utility thin-scrollbar {
|
|
&::-webkit-scrollbar {
|
|
width: 0.25rem;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: gray;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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),
|
|
rgb(242, 201, 76),
|
|
rgb(76, 183, 130),
|
|
rgb(78, 167, 252),
|
|
rgb(250, 96, 122)
|
|
);
|
|
}
|
|
|
|
#nprogress .bar {
|
|
background: var(--color-primary-400);
|
|
}
|
|
|
|
[contentEditable="true"]:before {
|
|
content: attr(placeholder);
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
@apply text-sm text-gray-500 opacity-50;
|
|
}
|