RenewCMS/web/admin-gui/src/assets/base.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;
	--primary-verylight: #ecffef;
	--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;
}

* {
	box-sizing: border-box;
}

p,
a,
input,
label,
button,
span,
li {
	font-family: 'Hind', sans-serif;
	color: var(--neutral-dark);
}

.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 .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	margin: 0;
	padding: 8px;
}

.label-input .tags li {
	background-color: var(--neutral-verylight);
	border-radius: var(--radius);

	padding: 4px 16px;
}

.label-input .tags li::marker {
	content: '';
}

.label-input-error input {
	border: solid 1.75px var(--error);
}

.label-input-error p {
	color: var(--error);
}

.button-primary,
.button-secondary,
.button-disabled {
	border-radius: var(--radius);
	border: none;

	padding: 3px 16px;
	font-size: var(--font-body);
	font-weight: var(--medium-weight);

	text-align: center;
	text-decoration: none;

	background-color: var(--primary);

	transition: background-color 150ms, color 150ms;

	cursor: pointer;
}

.button-secondary {
	color: var(--primary-dark);
	border: solid 1.5px var(--primary-dark);
	background-color: #fff;
}

.button-secondary:hover {
	background-color: var(--primary-verylight);
}

.button-secondary:active {
	background-color: var(--primary-light);
	color: var(--neutral-dark);
}

.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;
}

.tox-tinymce {
	border: none !important;
	border-radius: 0 !important;
}