-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
école de recherche graphique
+
+
+
+
+
+
A
+
+
+
+
+
+
+
+
+
+
+
+
+
+
fermer [x]
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index 1e65373..82dd49b 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,11 @@
-
-
-/* F O N T E S */
+/* ------- F O N T E S ------- */
@font-face {
font-family: "Combined";
src: url('/mw/skins/foreground/assets/fonts/combined.otf');
font-style: normal;
font-weight: normal;
}
+
@font-face {
font-family: "Vega";
src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
@@ -25,6 +24,7 @@ src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regular.ttf
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regular.woff");
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
}
+
@font-face {
font-family: Lucette;
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
@@ -42,22 +42,64 @@ font-style: italic;
font-style:normal
}
-:root {
- --bg:#fff;
- --color-a: #A700FF;
- --color-a-shadow: rgba(167, 0, 255, 0.44);
- --color-b: #00AB6B;
+/* Global variables. */
+:root,
+::backdrop {
+ /* Set sans-serif & mono fonts */
+ --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
+ "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
+ "Helvetica Neue", sans-serif;
+ --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ --standard-border-radius: 5px;
+
+ /* Default (light) theme */
+ --bg: #fff;
+ --accent-bg: #f5f7ff;
+ --text: #212121;
+ --text-light: #585858;
+ --border: #898EA4;
+ --accent: #0d47a1;
+ --accent-hover: #1266e2;
+ --accent-text: var(--bg);
+ --code: #d81b60;
+ --preformatted: #444;
+ --marked: #ffdd33;
+ --disabled: #efefef;
+
+ --font-title: Giskith;
+ --font-body: Lucette;
+ --color-a: #a700ff; /* purple */
+ --color-b: #00ab6b; /* green */
+ --font-size: 23px;
+ --line-height: 1.3em;
+ --color-a-shadow: rgba(166, 0, 255, 0.44);
}
+/* Dark theme */
@media (prefers-color-scheme: dark) {
- :root {
- --bg:#222;
- --fg:
- }
+ :root,
+ ::backdrop {
+ color-scheme: dark;
+ --bg: #222;
+ --accent-bg: #2b2b2b;
+ --text: #dcdcdc;
+ --text-light: #ababab;
+ --accent: #ffb300;
+ --accent-hover: #ffe099;
+ --accent-text: var(--bg);
+ --code: #f06292;
+ --preformatted: #ccc;
+ --disabled: #111;
+
+--font-title: Giskith;
+--font-body: Lucette;
+--color-a: #9557b5; /* washed-off purple */
+--color-b: #3c856b; /* washed-off green */
+--font-size: 23px;
+--line-height: 1.3em;
+ }
}
-
-
body {
margin: 0;
padding: 0;
@@ -74,6 +116,18 @@ div#handle {
background-color: transparent;
left: 5em;
}
+/* change la taille des cercle dans le svg */
+/*circle {
+transform: scale(0.8);
+}
+
+path {
+transform: scale(0.8);
+} */
+
+circle.active{
+transform: scale(0.5);
+}
.links line {
stroke: #aaa;
@@ -112,13 +166,14 @@ div#handle {
fill: aqua;
}
-
+/* ------- paramtre de la carte ------- */
svg {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
font: 10px sans-serif;
- transform: scale(3);
+ /* C'est bon j'ai trouve, c'est ce tranform qui change la taille de l'affichage de la carte*/
+ transform: scale(1.5);
}
@media only screen and (max-width: 320px) {
@@ -133,10 +188,12 @@ svg g.page {
cursor: pointer;
}
+ /* texte des noeud */
svg g.page text {
visibility: hidden;
fill: var(--color-a);
- font: 13px Combined;
+ font: 10px Combined;
+ max-width: 20%;
}
svg g.active text {
@@ -190,7 +247,7 @@ use {
}
.active text {
- stroke: white;
+ stroke: var(--bg);
stroke-width: 1px;
paint-order: stroke;
fill: var(--color-b) !important;
@@ -205,7 +262,7 @@ use {
-/* Categories */
+/* --------- Categories ------- */
@media only screen and (max-width: 600px) {
#page {
@@ -256,7 +313,8 @@ use {
position: absolute;
left: 10px;
bottom: 10px;
- background: #FFFFFFFF;
+ background: white;
+ color: black;
border-radius: 24px;
padding: 10px;
font-size: 12px;
@@ -323,7 +381,8 @@ use {
border: none;
}
-/* MEDIAWIKI PAGE */
+/* ------- MEDIAWIKI PAGE ------- */
+
.header-container {
display: none !important;
}
@@ -340,7 +399,7 @@ a.talk {
}
-/* control positioning */
+/* ------- control positioning ------- */
.leaflet-control {
position: relative;
@@ -354,7 +413,7 @@ a.talk {
clear: both;
}
-/* general toolbar styles */
+/* ------- general toolbar styles ------- */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
@@ -395,18 +454,19 @@ a.talk {
}
-/* zoom controls */
+/* ------- zoom controls -------- */
.zoom-controls {
position: absolute;
- left: 10px;
- top: 10px;
+ /* changed from left top to bottom right */
+ right: 10px;
+ bottom: 10px;
z-index: 10;
}
#specialclosediv {
position: absolute;
- left: 10px;
+ left: 25px;
top: 10px;
z-index: 10000;
box-shadow: 0 3px 3px 3px var(--color-a-shadow);
@@ -471,12 +531,35 @@ svg {
}
+/* ------- Menu dpliant ------- */
+.button-style {
+ box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+ background-color: white;
+ font-family: Vega;
+ font-size: 12px;
+ padding: 6px 2px;
+ cursor: pointer;
+ color: black;
+
+ border-radius: 24px;
+}
+
+a.button-style {
+ padding:8px;
+ text-decoration:none;
+}
+
+
+
#specialselectdiv {
position: absolute;
- bottom: 10px;
- right: 20px;
+ /* changement des valeur sde bottom right a top left*/
+ top: 8px;
+ left: 25px;
z-index: 10000;
-}
+ background: white;
+ }
+
#specialselectdiv select {
box-shadow: 0 3px 3px 3px var(--color-a-shadow);
background-color: white;
@@ -485,6 +568,7 @@ svg {
padding: 6px 2px;
text-transform: uppercase;
cursor: pointer;
+ color: black;
}