salesiq / frontend /src /index.css
richlai's picture
working on docker
902845d
raw
history blame
3.92 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
/* Grid container to split the page into two columns */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two columns of equal width */
height: 100%;
}
/* Left column with light gray background and placeholder for image */
.column-a {
background-color: #f0f0f0; /* Light gray background */
/* Placeholder for background image */
background: linear-gradient(rgba(106, 93, 183, 0.8), rgba(106, 93, 183, 0.8));
background-size: cover;
background-position: center;
}
/* Right column */
.column-b {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Login panel centered using Flexbox */
.login-panel {
width: 90%;
max-width: 500px;
height: auto;
background-color: #ffffff;
border: 1px solid #9a32e8;
padding: 40px;
/* Center content within the panel */
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 10px;
}
/* Styling for input fields */
.login-panel input {
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
}
/* Styling for the login button */
.login-panel button {
font-size: 16px;
cursor: pointer;
padding: 16px 20px;
background-image: linear-gradient(#a08dff, #685bb5);
text-shadow: #685da0 0px 0px 2px;
color: white;
border: none;
border-radius: 30px;
margin-top: 1rem;
}
.login-panel button:hover {
background-image: linear-gradient(#685bb5, #685bb5);
}
/* Optional: Center the panel content horizontally */
.login-panel input,
.login-panel button {
width: 100%;
}
.textbox, input {
/* background-color: rgb(246, 243, 255); */
background-color: rgb(249, 247, 255);
border: 1px solid rgb(209, 198, 247);
border-radius: 5px;
padding: 8px;
font-size: 13px;
}
.textbox:active,
.textbox:focus {
background-color: white;
}
.textbox::placeholder {
font-family: 'Open Sans';
color: rgb(121, 121, 121);
font-size: 0.8rem;
}
.logo-medium {
width: 50%;
flex-direction: column;
align-self: center;
padding: 2rem 0 3rem 0;
}
.bg-primary {
background-color: black !important;
}
table {
margin-top: 1rem;
border-collapse: collapse !important;
width: 100%;
}
thead {
font-weight: bold !important;
}
th {
border: 1px solid #ddd;
padding: 8px;
background-color: #f5f5f5;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
}