mirror of
https://github.com/Floriansylvain/RenewCMS.git
synced 2026-08-19 11:43:22 +02:00
116 lines
2.1 KiB
CSS
116 lines
2.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500&family=Hind:wght@400;500;600;700&family=Nunito:wght@500;600;700&display=swap');
|
|
|
|
:root {
|
|
--regular-weight: 400;
|
|
--medium-weight: 500;
|
|
--semibold-weight: 600;
|
|
--bold-weight: 700;
|
|
|
|
--radius: 15px;
|
|
|
|
--font-body: 16px;
|
|
--font-small: 14px;
|
|
--font-verysmall: 12px;
|
|
|
|
--primary: #2CD358;
|
|
--primary-dark: #00BA2A;
|
|
--primary-light: #97E6A2;
|
|
--secondary: #D32CA6;
|
|
--secondary-dark: #BA0094;
|
|
--secondary-light: #E88DCA;
|
|
--neutral-dark: #121212;
|
|
--neutral-medium: #707070;
|
|
--neutral-light: #aaaaaa;
|
|
--neutral-verylight: #e7e7e7;
|
|
--brand-blue: #00ACD7;
|
|
--error: #E80000;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Frank Ruhl Libre', serif;
|
|
font-size: 40px;
|
|
}
|
|
h2 { font-size: 32px; }
|
|
h3 { font-size: 24px; }
|
|
h4 { font-size: 18px; }
|
|
h2, h3, h4, h5, h6 {
|
|
font-family: 'Nunito', sans-serif;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Hind', sans-serif;
|
|
color: var(--neutral-dark);
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.label-input,
|
|
.label-input-error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.label-input label,
|
|
.label-input-error label {
|
|
font-size: var(--font-body);
|
|
font-weight: var(--semibold-weight);
|
|
}
|
|
|
|
.label-input p,
|
|
.label-input-error p {
|
|
color: var(--neutral-medium);
|
|
font-size: var(--font-body);
|
|
font-weight: var(--medium-weight);
|
|
margin: 0;
|
|
}
|
|
|
|
.label-input input,
|
|
.label-input-error input {
|
|
padding: 3px 16px;
|
|
font-size: var(--font-body);
|
|
|
|
border: solid 1.25px var(--neutral-light);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.label-input-error input {
|
|
border: solid 1.75px var(--error);
|
|
}
|
|
|
|
.label-input-error p {
|
|
color: var(--error);
|
|
}
|
|
|
|
.button-primary,
|
|
.button-disabled {
|
|
border-radius: var(--radius);
|
|
border: none;
|
|
|
|
padding: 3px 16px;
|
|
font-size: var(--font-body);
|
|
font-weight: var(--medium-weight);
|
|
|
|
background-color: var(--primary);
|
|
|
|
transition: background-color 150ms;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.button-primary:active {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
.button-disabled {
|
|
color: var(--neutral-dark);
|
|
background-color: var(--neutral-light);
|
|
cursor: default;
|
|
} |