326 lines
7.6 KiB
CSS
326 lines
7.6 KiB
CSS
/* Import Ant Design reset */
|
|
@import "antd/dist/reset.css";
|
|
|
|
/* Import Nunito Sans from Google Fonts */
|
|
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
|
|
|
|
:root {
|
|
--background: #f7f7f7;
|
|
--foreground: #181818;
|
|
--border: #0505050f;
|
|
--secondary-background: #ffffff;
|
|
--secondary-foreground: #0a0a0a;
|
|
--primary-dark: #0a0a0a;
|
|
--primary: #ffb700;
|
|
--primary2: #ffc600;
|
|
--secondary: #09237d;
|
|
--text-color: #fff;
|
|
--text-color-gray: #5f6c7b;
|
|
--success: #03b100;
|
|
--danger: #dc3545;
|
|
--primary-glow: radial-gradient(
|
|
circle,
|
|
rgba(152, 71, 232, 0.2) 0%,
|
|
rgba(71, 1, 90, 0.1) 50%,
|
|
rgba(0, 0, 0, 0) 70%
|
|
);
|
|
|
|
/* Typography */
|
|
--font-roboto:
|
|
"Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, sans-serif;
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
--font-weight-black: 900;
|
|
}
|
|
|
|
/* Dark theme variables */
|
|
[data-theme="dark"] {
|
|
--background: #181818;
|
|
--foreground: #f7f7f7;
|
|
--secondary-background: #0a0a0a;
|
|
--secondary-foreground: #ffffff;
|
|
--border: #363636;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
.ant-app {
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
/* overflow: auto; */
|
|
/* added temporary to remove scrollbar in desktop */
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
font-family: var(--font-roboto);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-display: swap; /* Ensure font-display is set for better performance */
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-roboto);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
} /* ---- particles.js container ---- */
|
|
|
|
#particles-js {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
|
|
}
|
|
|
|
.count-particles {
|
|
background: #000022;
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 0;
|
|
width: 80px;
|
|
color: #13e8e9;
|
|
font-size: 0.8em;
|
|
text-align: left;
|
|
text-indent: 4px;
|
|
line-height: 14px;
|
|
padding-bottom: 2px;
|
|
font-family: var(--font-roboto);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Remove autofill background styles */
|
|
.ant-input:-webkit-autofill,
|
|
.ant-input:-webkit-autofill:hover,
|
|
.ant-input:-webkit-autofill:focus,
|
|
.ant-input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
|
|
-webkit-text-fill-color: #000000e0 !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
/* Remove autofill background for dark theme */
|
|
[data-theme="dark"] .ant-input:-webkit-autofill,
|
|
[data-theme="dark"] .ant-input:-webkit-autofill:hover,
|
|
[data-theme="dark"] .ant-input:-webkit-autofill:focus,
|
|
[data-theme="dark"] .ant-input:-webkit-autofill:active,
|
|
.dark .ant-input:-webkit-autofill,
|
|
.dark .ant-input:-webkit-autofill:hover,
|
|
.dark .ant-input:-webkit-autofill:focus,
|
|
.dark .ant-input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 30px #181818 inset !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
/* For input number components */
|
|
.ant-input-number-input:-webkit-autofill,
|
|
.ant-input-number-input:-webkit-autofill:hover,
|
|
.ant-input-number-input:-webkit-autofill:focus,
|
|
.ant-input-number-input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
|
|
-webkit-text-fill-color: #000000e0 !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-input-number-input:-webkit-autofill,
|
|
[data-theme="dark"] .ant-input-number-input:-webkit-autofill:hover,
|
|
[data-theme="dark"] .ant-input-number-input:-webkit-autofill:focus,
|
|
[data-theme="dark"] .ant-input-number-input:-webkit-autofill:active,
|
|
.dark .ant-input-number-input:-webkit-autofill,
|
|
.dark .ant-input-number-input:-webkit-autofill:hover,
|
|
.dark .ant-input-number-input:-webkit-autofill:focus,
|
|
.dark .ant-input-number-input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 30px #181818 inset !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
.js-count-particles {
|
|
font-size: 1.1em;
|
|
}
|
|
#stats,
|
|
.count-particles {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
#stats {
|
|
border-radius: 3px 3px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
.count-particles {
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
|
|
:where(.css-dev-only-do-not-override-1baqnp5).ant-drawer .ant-drawer-mask {
|
|
background: rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
/* Typography Utility Classes */
|
|
.font-light {
|
|
font-weight: var(--font-weight-light);
|
|
}
|
|
|
|
.font-regular {
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
.font-medium {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.font-black {
|
|
font-weight: var(--font-weight-black);
|
|
}
|
|
|
|
/* Ensure all text elements use Roboto */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
span,
|
|
div,
|
|
a,
|
|
button,
|
|
input,
|
|
textarea,
|
|
select,
|
|
label {
|
|
font-family: var(--font-roboto);
|
|
}
|
|
|
|
:where(.css-dev-only-do-not-override-eb9m8e).ant-btn-variant-solid:disabled,
|
|
:where(
|
|
.css-dev-only-do-not-override-eb9m8e
|
|
).ant-btn-variant-solid.ant-btn-disabled {
|
|
background-color: rgba(213, 216, 218, 1) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
:where(.css-dev-only-do-not-override-15fb4b2).ant-radio-wrapper
|
|
span.ant-radio
|
|
+ * {
|
|
padding-inline-end: 0px !important;
|
|
}
|
|
|
|
:where(.ant-app-rtl) .ant-form-item-label {
|
|
text-overflow: ellipsis !important;
|
|
z-index: 999 !important;
|
|
position: relative !important;
|
|
right: 30px !important;
|
|
overflow: hidden !important;
|
|
background-color: #fff !important;
|
|
top: 20px !important;
|
|
width: fit-content !important;
|
|
padding-left: 5px !important;
|
|
color: "#A9A9AA" !important;
|
|
}
|
|
|
|
.ant-form-item-label {
|
|
text-overflow: ellipsis !important;
|
|
z-index: 999 !important;
|
|
position: relative !important;
|
|
left: 20px !important;
|
|
overflow: hidden !important;
|
|
background-color: #fff !important;
|
|
top: 20px !important;
|
|
width: fit-content !important;
|
|
padding-left: 5px !important;
|
|
color: "#A9A9AA" !important;
|
|
}
|
|
|
|
:where(.darkApp) .ant-form-item-label {
|
|
background-color: var(--background) !important;
|
|
}
|
|
|
|
.ant-form-item-label label {
|
|
padding: 0 5px !important;
|
|
height: 1rem !important;
|
|
}
|
|
|
|
:where(.ant-app-rtl) .ant-form-item-label > label {
|
|
padding: 0 5px !important;
|
|
}
|
|
|
|
.ant-form-item-required {
|
|
padding-left: 5px !important;
|
|
color: #a9a9aa !important;
|
|
}
|
|
|
|
.ant-form-item-label > label {
|
|
color: #a9a9aa !important;
|
|
}
|
|
|
|
.ant-app-rtl .ant-form-item-required {
|
|
padding: 0 5px !important;
|
|
}
|
|
|
|
.ant-form-item {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
.ant-form-item-label > label::after {
|
|
margin-inline-start: 0px !important;
|
|
margin-inline-end: 0px !important;
|
|
}
|
|
|
|
.ant-select-selection-wrap .ant-select-selection-placeholder {
|
|
position: relative;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.restaurant-description-skeleton .ant-skeleton-paragraph {
|
|
margin-block-start: 8px !important;
|
|
}
|
|
|
|
:where(.css-dev-only-do-not-override-16tdzdu).ant-form-item
|
|
.ant-form-item-label
|
|
> label.ant-form-item-required::before {
|
|
position: relative !important;
|
|
top: 3px !important;
|
|
}
|
|
|
|
.cart-button .ant-badge-count {
|
|
left: 0px !important;
|
|
}
|