181 lines
2.8 KiB
CSS
181 lines
2.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: 'Urbanist'; /* Nom que vous donnerez à votre police */
|
|
src: url('../assets/fonts/Urbanist.ttf') format('truetype'); /* Chemin vers votre fichier */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--foreground: #04060F;
|
|
--background: #ffffff;
|
|
--primary: #246BFD;
|
|
--secondary: #9FA8BC;
|
|
--danger: #F33F19;
|
|
--cinder: #E7E5E4;
|
|
--bluegray: #E9F0FF;
|
|
--gray: #E7EBF3;
|
|
}
|
|
|
|
[ data-theme="dark"] {
|
|
--background: #04060F;
|
|
--foreground: #ffffff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--foreground: #04060F;
|
|
--background: #ffffff;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Urbanist, sans-serif;
|
|
}
|
|
|
|
.input-form {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #d1d5dc;
|
|
border-radius: 9999px;
|
|
color: black;
|
|
|
|
&:focus {
|
|
outline-color: none;
|
|
}
|
|
}
|
|
|
|
.input-label {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: -0.45rem;
|
|
background-color: white;
|
|
padding-inline: 4px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-floating-right {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.btn-floating-left {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.btn-auth {
|
|
border-radius: 9999px;
|
|
background-color: #246BFD;
|
|
color: white;
|
|
width: 100%;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: rgb(22, 77, 185);
|
|
}
|
|
}
|
|
|
|
.btn-auth-loading {
|
|
border-radius: 9999px;
|
|
background-color: #93b4f8;
|
|
color: white;
|
|
width: 100%;
|
|
padding: 8px;
|
|
}
|
|
|
|
.responsive-icon {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
width: 24px;
|
|
height: 24px;
|
|
transition: width 0.2s, height 0.2s;
|
|
}
|
|
|
|
.cta{
|
|
padding: 10px 24px;
|
|
color: white;
|
|
background-color: var(--primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border: 1px solid var(--primary);
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cta.cancel{
|
|
color: var(--secondary);
|
|
border: 1px solid var(--gray);
|
|
background-color: var(--gray);
|
|
}
|
|
|
|
.cta.info{
|
|
color: var(--primary);
|
|
background-color: var(--background);
|
|
}
|
|
|
|
.cta.danger{
|
|
border: 1px solid var(--danger);
|
|
background-color: var(--danger);
|
|
}
|
|
|
|
|
|
.bg-bluegray{
|
|
background-color: var(--bluegray);
|
|
}
|
|
.bg-gray{
|
|
background-color: var(--gray);
|
|
}
|
|
hr{
|
|
color: var(--gray);
|
|
}
|
|
|
|
|
|
|
|
/* Scroll Bar */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--primary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:hover {
|
|
background: var(--background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary);
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.responsive-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.responsive-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
} |