studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

fonts & colors

Browse source
This commit is contained in:
Julie Blanc 2025-12-09 14:05:53 +01:00
parent 790eb7414e
commit 678698b55d
45 changed files with 792 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

207
public/assets/css/style.css
View file

@ -1,3 +1,143 @@
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
body,
html {
padding: 0;
@ -26,31 +166,49 @@ button {
}
:root {
--color-panel-bg: #e8e6e5;
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--color-interface-050: #f5f5f5;
--color-interface-100: #e2e6ed;
--color-interface-200: #d7dce8;
--color-interface-300: #c0c4d1;
--color-interface-400: #bec4d4;
--color-interface-900: #3e414c;
--color-interface-050: #fcf7f4;
--color-interface-100: #f5eae4;
--color-interface-200: #e9d4c8;
--color-interface-300: #d8b7a6;
--color-interface-400: #c39986;
--color-interface-500: #ad826f;
--color-interface-600: #916b5b;
--color-interface-700: #755548;
--color-interface-800: #5c443a;
--color-interface-900: #46342b;
--color-interface-050: #f5f0ed;
--color-interface-050: #f8f5f4;
--color-interface-100: #efe9e6;
--color-interface-200: #e0d5d0;
--color-interface-300: #cabbb5;
--color-interface-400: #b2a29c;
--color-interface-500: #998985;
--color-interface-600: #7f716e;
--color-interface-700: #675b58;
--color-interface-800: #5b4f4c;
--color-interface-900: #483c39;
--color-txt: var(--color-interface-800);
--color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50;
--color-purple: #7136ff;
--border-radius: 0.2rem;
--space-xs: 0.5rem;
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: "DM Sans", sans-serif;
--mono: "Inconsolata", monospace;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
select,
figcaption,
label {
font-family: sans-serif;
body {
font-family: var(--sans-serif);
color: var(--color-txt);
}
/* PagedJS print styles */
@ -75,7 +233,11 @@ h2 {
select,
input[type=text],
input[type=number] {
background-color: var(--color-browngray-300);
background-color: white;
min-height: 20px;
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
}
.field--view-only {
@ -183,18 +345,19 @@ input[type=number] {
button {
cursor: pointer;
border: 1px solid var(--color-browngray-300);
color: var(--color-browngray-300);
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
}
button.active {
border: 1px solid #000;
color: #000;
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
button.tab.active {
background-color: #000;
background-color: var(--color-txt);
color: #fff;
border: none;
}