umap-project 2.4.0__py3-none-any.whl → 2.4.0b1__py3-none-any.whl

umap/static/umap/js/umap.js

@@ -1,5 +1,5 @@
 L.Map.mergeOptions({
-  overlay: {},
+  overlay: null,
   datalayers: [],
   hash: true,
   maxZoomLimit: 24,
@@ -205,9 +205,49 @@ U.Map = L.Map.extend({
       this.editTools = new U.Editable(this)
       this.renderEditToolbar()
     }
+    if (!U.Utils.isObject(this.options.overlay)) {
+      this.options.overlay = {}
+    }
+    if (!U.Utils.isObject(this.options.tilelayer)) {
+      this.options.tilelayer = {}
+    }
 
     this.initShortcuts()
-    this.onceDataLoaded(this.setViewFromQueryString)
+    this.onceDataLoaded(function () {
+      const slug = L.Util.queryString('feature')
+      if (slug && this.features_index[slug]) this.features_index[slug].view()
+      if (this.options.noControl) return
+      this.initCaptionBar()
+      if (L.Util.queryString('share')) {
+        this.share.open()
+      } else if (this.options.onLoadPanel === 'databrowser') {
+        this.panel.setDefaultMode('expanded')
+        this.openBrowser('data')
+      } else if (this.options.onLoadPanel === 'datalayers') {
+        this.panel.setDefaultMode('condensed')
+        this.openBrowser('layers')
+      } else if (this.options.onLoadPanel === 'datafilters') {
+        this.panel.setDefaultMode('expanded')
+        this.openBrowser('filters')
+      } else if (this.options.onLoadPanel === 'caption') {
+        this.panel.setDefaultMode('condensed')
+        this.openCaption()
+      }
+      if (L.Util.queryString('edit')) {
+        if (this.hasEditMode()) this.enableEdit()
+        // Sometimes users share the ?edit link by mistake, let's remove
+        // this search parameter from URL to prevent this
+        const url = new URL(window.location)
+        url.searchParams.delete('edit')
+        history.pushState({}, '', url)
+      }
+      if (L.Util.queryString('download')) {
+        const download_url = this.urls.get('map_download', {
+          map_id: this.options.umap_id,
+        })
+        window.location = download_url
+      }
+    })
 
     window.onbeforeunload = () => (this.editEnabled && this.isDirty) || null
     this.backup()
@@ -301,44 +341,6 @@ U.Map = L.Map.extend({
     }
   },
 
-  setViewFromQueryString: function () {
-    if (this.options.noControl) return
-    this.initCaptionBar()
-    if (L.Util.queryString('share')) {
-      this.share.open()
-    } else if (this.options.onLoadPanel === 'databrowser') {
-      this.panel.setDefaultMode('expanded')
-      this.openBrowser('data')
-    } else if (this.options.onLoadPanel === 'datalayers') {
-      this.panel.setDefaultMode('condensed')
-      this.openBrowser('layers')
-    } else if (this.options.onLoadPanel === 'datafilters') {
-      this.panel.setDefaultMode('expanded')
-      this.openBrowser('filters')
-    } else if (this.options.onLoadPanel === 'caption') {
-      this.panel.setDefaultMode('condensed')
-      this.openCaption()
-    }
-    // Comes after default panels, so if it opens in a panel it will
-    // take precedence.
-    const slug = L.Util.queryString('feature')
-    if (slug && this.features_index[slug]) this.features_index[slug].view()
-    if (L.Util.queryString('edit')) {
-      if (this.hasEditMode()) this.enableEdit()
-      // Sometimes users share the ?edit link by mistake, let's remove
-      // this search parameter from URL to prevent this
-      const url = new URL(window.location)
-      url.searchParams.delete('edit')
-      history.pushState({}, '', url)
-    }
-    if (L.Util.queryString('download')) {
-      const download_url = this.urls.get('map_download', {
-        map_id: this.options.umap_id,
-      })
-      window.location = download_url
-    }
-  },
-
   // Merge the given schema with the default one
   // Missing keys inside the schema are merged with the default ones.
   overrideSchema: function (schema) {
@@ -1294,9 +1296,6 @@ U.Map = L.Map.extend({
   },
 
   _editTilelayer: function (container) {
-    if (!U.Utils.isObject(this.options.tilelayer)) {
-      this.options.tilelayer = {}
-    }
     const tilelayerFields = [
       [
         'options.tilelayer.name',
@@ -1344,9 +1343,6 @@ U.Map = L.Map.extend({
   },
 
   _editOverlay: function (container) {
-    if (!U.Utils.isObject(this.options.overlay)) {
-      this.options.overlay = {}
-    }
     const overlayFields = [
       [
         'options.overlay.url_template',
@@ -1539,7 +1535,8 @@ U.Map = L.Map.extend({
     const container = L.DomUtil.create('div', 'umap-edit-container')
     const metadataFields = ['options.name', 'options.description']
 
-    L.DomUtil.createTitle(container, L._('Edit map details'), 'icon-caption')
+    const title = L.DomUtil.create('h3', '', container)
+    title.textContent = L._('Edit map details')
     const builder = new U.FormBuilder(this, metadataFields, {
       className: 'map-metadata',
     })
@@ -1876,6 +1873,10 @@ U.Map = L.Map.extend({
     if (this._controls.search) this._controls.search.open()
   },
 
+  getFilterKeys: function () {
+    return (this.options.filterKey || this.options.sortKey || 'name').split(',')
+  },
+
   getLayersBounds: function () {
     const bounds = new L.latLngBounds()
     this.eachBrowsableDataLayer((d) => {

umap/static/umap/js/umap.layer.js

@@ -1757,16 +1757,6 @@ U.DataLayer = L.Evented.extend({
     const editor = new U.TableEditor(this)
     editor.edit()
   },
-
-  getFilterKeys: function () {
-    // This keys will be used to filter feature from the browser text input.
-    // By default, it will we use the "name" property, which is also the one used as label in the features list.
-    // When map owner has configured another label or sort key, we try to be smart and search in the same keys.
-    if (this.map.options.filterKey) return this.map.options.filterKey
-    else if (this.options.labelKey) return this.options.labelKey
-    else if (this.map.options.sortKey) return this.map.options.sortKey
-    else return 'name'
-  },
 })
 
 L.TileLayer.include({

umap/static/umap/js/umap.popup.js

@@ -107,7 +107,7 @@ U.PopupTemplate.Default = L.Class.extend({
   renderBody: function () {
     const template = this.feature.getOption('popupContentTemplate')
     const target = this.feature.getOption('outlinkTarget')
-    const container = L.DomUtil.create('div', 'umap-popup-container text')
+    const container = L.DomUtil.create('div', 'umap-popup-container')
     let content = ''
     let properties
     let center

umap/static/umap/locale/en.js

@@ -481,8 +481,7 @@ const locale = {
     "Only geometry centers": "Only geometry centers",
     "Search area": "Search area",
     "Type area name, or let empty to load data in current map view": "Type area name, or let empty to load data in current map view",
-    "Please define an expression for the query first": "Please define an expression for the query first",
-    "Data successfully imported!": "Data successfully imported!"
+    "Please define an expression for the query first": "Please define an expression for the query first"
 }
 L.registerLocale("en", locale)
 L.setLocale("en")

umap/static/umap/locale/en.json

@@ -481,6 +481,5 @@
     "Only geometry centers": "Only geometry centers",
     "Search area": "Search area",
     "Type area name, or let empty to load data in current map view": "Type area name, or let empty to load data in current map view",
-    "Please define an expression for the query first": "Please define an expression for the query first",
-    "Data successfully imported!": "Data successfully imported!"
+    "Please define an expression for the query first": "Please define an expression for the query first"
 }

umap/static/umap/locale/fr.js

@@ -1,6 +1,6 @@
 const locale = {
-    " (area: {measure})": "(surface : {measure})",
-    " (length: {measure})": "(longueur : {measure})",
+    " (area: {measure})": "(surface: {measure})",
+    " (length: {measure})": "(longueur: {measure})",
     "# one hash for main heading": "# un dièse pour titre 1",
     "## two hashes for second heading": "## deux dièses pour titre 2",
     "### three hashes for third heading": "### trois dièses pour titre 3",
@@ -186,7 +186,7 @@ const locale = {
     "Icon shape": "Forme de l'icône",
     "Icon symbol": "Image de l'icône",
     "If false, the polygon or line will act as a part of the underlying map.": "Désactiver pour que le polygone ou la ligne ne réagisse plus aux interactions.",
-    "Iframe with custom height (in px): {{{http://iframe.url.com|height}}}": "Iframe avec hauteur (en pixels) : {{{http://iframe.url.com|hauteur}}}",
+    "Iframe with custom height (in px): {{{http://iframe.url.com|height}}}": "Iframe avec hauteur (en pixels): {{{http://iframe.url.com|hauteur}}}",
     "Iframe with custom height and width (in px): {{{http://iframe.url.com|height*width}}}": "Iframe avec hauteur et largeur (en px) : {{{http://iframe.url.com|height*width}}}",
     "iframe": "iframe",
     "Iframe: {{{http://iframe.url.com}}}": "Iframe : {{{http://iframe.url.com}}}",
@@ -202,7 +202,7 @@ const locale = {
     "Invalid latitude or longitude": "Latitude ou longitude invalide",
     "Invalid umap data in {filename}": "Les données du fichier {filename} ne sont pas valides comme format uMap",
     "Invalid umap data": "Données uMap invalides",
-    "Invalide property name: {name}": "Nom de propriété invalide : {name}",
+    "Invalide property name: {name}": "Nom de propriété invalide: {name}",
     "Jenks-Fisher": "Jenks-Fisher",
     "K-means": "K-moyennes",
     "Keep current visible layers": "Garder les calques visibles actuellement",
@@ -327,7 +327,7 @@ const locale = {
     "Side panel": "Panneau latéral",
     "Simple link: [[http://example.com]]": "Lien simple : [[https://exemple.fr]]",
     "Simplify": "Simplifier",
-    "Skipping unknown geometry.type: {type}": "Type de géométrie inconnu ignoré : {type}",
+    "Skipping unknown geometry.type: {type}": "Type de géométrie inconnu ignoré: {type}",
     "Slideshow": "Diaporama",
     "Sort key": "Clé de tri",
     "Split line": "Scinder la ligne",
@@ -375,7 +375,7 @@ const locale = {
     "Versions": "Versions",
     "View Fullscreen": "Voir en plein écran",
     "View": "Aperçu",
-    "Visibility: {status}": "Visibilité : {status}",
+    "Visibility: {status}": "Visibilité: {status}",
     "weight": "épaisseur",
     "Where do we go from here?": "C'est par où pour aller plus loin?",
     "Whether to display or not polygons paths.": "Afficher les contours des polygones.",
@@ -401,7 +401,7 @@ const locale = {
     "{area} m²": "{area} m²",
     "{area} mi²": "{area} mi²",
     "{area} yd²": "{area} yd²",
-    "{count} errors during import: {message}": "{count} erreurs pendant l'import : {message}",
+    "{count} errors during import: {message}": "{count} erreurs pendant l'import: {message}",
     "{delay} seconds": "{delay} secondes",
     "{distance} km": "{distance} km",
     "{distance} m": "{distance} m",
@@ -419,7 +419,7 @@ const locale = {
     "Max": "Max",
     "From": "De",
     "Until": "À",
-    "Example: key1,key2|Label 2,key3|Label 3|checkbox": "Exemple : cle1,cle2|Label 2,Label 3|checkbox",
+    "Example: key1,key2|Label 2,key3|Label 3|checkbox": "Exemple: cle1,cle2|Label 2,Label 3|checkbox",
     "Edit in OpenStreetMap": "Modifier dans OpenStreetMap",
     "Cannot determine latitude and longitude columns.": "Impossible de détecter les colonnes latitude et longitude.",
     "Back to layers": "Voir les calques",
@@ -450,7 +450,7 @@ const locale = {
     "More info about Overpass syntax": "Plus d'infos sur la syntaxe Overpass",
     "For more complex needs, see": "Pour les besoins plus avancés:",
     "Choose data": "Choisir les données",
-    "Import helpers:": "Assistants d'import :",
+    "Import helpers:": "Assistants d'import:",
     "Choose the format": "Choisir le format",
     "Choose the layer": "Choisir le calque",
     "Layer name": "Nom du calque",
@@ -463,14 +463,14 @@ const locale = {
     "empty rule": "règle vide",
     "Conditional style rules": "Règles de formatage conditionnelles",
     "Add rule": "Ajouter une règle",
-    "Browser: data": "Explorateur : données",
-    "Browser: layers": "Explorateur : calques",
-    "Browser: filters": "Explorateur : filtres",
+    "Browser: data": "Explorateur: données",
+    "Browser: layers": "Explorateur: calques",
+    "Browser: filters": "Explorateur: filtres",
     "Enable real-time collaboration": "Activer la collaboration temps réel",
-    "✅ Copied!": "✅ Copié !",
+    "✅ Copied!": "✅ Copié!",
     "Choose a dataset": "Choisir un jeu de données",
     "Choose this dataset": "Choisir ce jeu de données",
-    "GeoDataMine: thematic data from OpenStreetMap": "GéoDataMine : données thématiques à partir d'OpenStreetMap",
+    "GeoDataMine: thematic data from OpenStreetMap": "GéoDataMine: données thématiques à partir d'OpenStreetMap",
     "Choose a theme": "Choisir un thème",
     "Symplify all geometries to points": "Simplifier les géométries en points",
     "Choose this data": "Choisir ces données",
@@ -481,8 +481,7 @@ const locale = {
     "Only geometry centers": "Seulement les centres",
     "Search area": "Chercher un coin",
     "Type area name, or let empty to load data in current map view": "Entrer le nom d'un périmètre géographique, ou laisser vide pour utiliser la vue courante de la carte",
-    "Please define an expression for the query first": "Définir une expression pour la requête",
-    "Data successfully imported!": "Les données ont été importées!"
+    "Please define an expression for the query first": "Définir une expression pour la requête"
 }
 L.registerLocale("fr", locale)
 L.setLocale("fr")

umap/static/umap/locale/fr.json

@@ -1,6 +1,6 @@
 {
-    " (area: {measure})": "(surface : {measure})",
-    " (length: {measure})": "(longueur : {measure})",
+    " (area: {measure})": "(surface: {measure})",
+    " (length: {measure})": "(longueur: {measure})",
     "# one hash for main heading": "# un dièse pour titre 1",
     "## two hashes for second heading": "## deux dièses pour titre 2",
     "### three hashes for third heading": "### trois dièses pour titre 3",
@@ -186,7 +186,7 @@
     "Icon shape": "Forme de l'icône",
     "Icon symbol": "Image de l'icône",
     "If false, the polygon or line will act as a part of the underlying map.": "Désactiver pour que le polygone ou la ligne ne réagisse plus aux interactions.",
-    "Iframe with custom height (in px): {{{http://iframe.url.com|height}}}": "Iframe avec hauteur (en pixels) : {{{http://iframe.url.com|hauteur}}}",
+    "Iframe with custom height (in px): {{{http://iframe.url.com|height}}}": "Iframe avec hauteur (en pixels): {{{http://iframe.url.com|hauteur}}}",
     "Iframe with custom height and width (in px): {{{http://iframe.url.com|height*width}}}": "Iframe avec hauteur et largeur (en px) : {{{http://iframe.url.com|height*width}}}",
     "iframe": "iframe",
     "Iframe: {{{http://iframe.url.com}}}": "Iframe : {{{http://iframe.url.com}}}",
@@ -202,7 +202,7 @@
     "Invalid latitude or longitude": "Latitude ou longitude invalide",
     "Invalid umap data in {filename}": "Les données du fichier {filename} ne sont pas valides comme format uMap",
     "Invalid umap data": "Données uMap invalides",
-    "Invalide property name: {name}": "Nom de propriété invalide : {name}",
+    "Invalide property name: {name}": "Nom de propriété invalide: {name}",
     "Jenks-Fisher": "Jenks-Fisher",
     "K-means": "K-moyennes",
     "Keep current visible layers": "Garder les calques visibles actuellement",
@@ -327,7 +327,7 @@
     "Side panel": "Panneau latéral",
     "Simple link: [[http://example.com]]": "Lien simple : [[https://exemple.fr]]",
     "Simplify": "Simplifier",
-    "Skipping unknown geometry.type: {type}": "Type de géométrie inconnu ignoré : {type}",
+    "Skipping unknown geometry.type: {type}": "Type de géométrie inconnu ignoré: {type}",
     "Slideshow": "Diaporama",
     "Sort key": "Clé de tri",
     "Split line": "Scinder la ligne",
@@ -375,7 +375,7 @@
     "Versions": "Versions",
     "View Fullscreen": "Voir en plein écran",
     "View": "Aperçu",
-    "Visibility: {status}": "Visibilité : {status}",
+    "Visibility: {status}": "Visibilité: {status}",
     "weight": "épaisseur",
     "Where do we go from here?": "C'est par où pour aller plus loin?",
     "Whether to display or not polygons paths.": "Afficher les contours des polygones.",
@@ -401,7 +401,7 @@
     "{area} m²": "{area} m²",
     "{area} mi²": "{area} mi²",
     "{area} yd²": "{area} yd²",
-    "{count} errors during import: {message}": "{count} erreurs pendant l'import : {message}",
+    "{count} errors during import: {message}": "{count} erreurs pendant l'import: {message}",
     "{delay} seconds": "{delay} secondes",
     "{distance} km": "{distance} km",
     "{distance} m": "{distance} m",
@@ -419,7 +419,7 @@
     "Max": "Max",
     "From": "De",
     "Until": "À",
-    "Example: key1,key2|Label 2,key3|Label 3|checkbox": "Exemple : cle1,cle2|Label 2,Label 3|checkbox",
+    "Example: key1,key2|Label 2,key3|Label 3|checkbox": "Exemple: cle1,cle2|Label 2,Label 3|checkbox",
     "Edit in OpenStreetMap": "Modifier dans OpenStreetMap",
     "Cannot determine latitude and longitude columns.": "Impossible de détecter les colonnes latitude et longitude.",
     "Back to layers": "Voir les calques",
@@ -450,7 +450,7 @@
     "More info about Overpass syntax": "Plus d'infos sur la syntaxe Overpass",
     "For more complex needs, see": "Pour les besoins plus avancés:",
     "Choose data": "Choisir les données",
-    "Import helpers:": "Assistants d'import :",
+    "Import helpers:": "Assistants d'import:",
     "Choose the format": "Choisir le format",
     "Choose the layer": "Choisir le calque",
     "Layer name": "Nom du calque",
@@ -463,14 +463,14 @@
     "empty rule": "règle vide",
     "Conditional style rules": "Règles de formatage conditionnelles",
     "Add rule": "Ajouter une règle",
-    "Browser: data": "Explorateur : données",
-    "Browser: layers": "Explorateur : calques",
-    "Browser: filters": "Explorateur : filtres",
+    "Browser: data": "Explorateur: données",
+    "Browser: layers": "Explorateur: calques",
+    "Browser: filters": "Explorateur: filtres",
     "Enable real-time collaboration": "Activer la collaboration temps réel",
-    "✅ Copied!": "✅ Copié !",
+    "✅ Copied!": "✅ Copié!",
     "Choose a dataset": "Choisir un jeu de données",
     "Choose this dataset": "Choisir ce jeu de données",
-    "GeoDataMine: thematic data from OpenStreetMap": "GéoDataMine : données thématiques à partir d'OpenStreetMap",
+    "GeoDataMine: thematic data from OpenStreetMap": "GéoDataMine: données thématiques à partir d'OpenStreetMap",
     "Choose a theme": "Choisir un thème",
     "Symplify all geometries to points": "Simplifier les géométries en points",
     "Choose this data": "Choisir ces données",
@@ -481,6 +481,5 @@
     "Only geometry centers": "Seulement les centres",
     "Search area": "Chercher un coin",
     "Type area name, or let empty to load data in current map view": "Entrer le nom d'un périmètre géographique, ou laisser vide pour utiliser la vue courante de la carte",
-    "Please define an expression for the query first": "Définir une expression pour la requête",
-    "Data successfully imported!": "Les données ont été importées!"
+    "Please define an expression for the query first": "Définir une expression pour la requête"
 }

umap/static/umap/map.css

@@ -678,9 +678,7 @@ ul.photon-autocomplete {
     font-style: italic;
 }
 .umap-slideshow-toolbox {
-    position: absolute;
-    right: 0;
-    top: 0;
+    float: right;
     display: none;
 }
 .umap-slideshow-enabled .umap-slideshow-toolbox {
@@ -692,9 +690,9 @@ ul.photon-autocomplete {
     font-size: 1.5em;
     background-color: #464646;
     color: #fff;
-    width: calc(var(--footer-height) * 2);
-    height: var(--footer-height);
-    line-height: var(--footer-height);
+    height: 46px;
+    width: 70px;
+    line-height: 46px;
     vertical-align: middle;
     text-align: center;
 }
@@ -706,24 +704,24 @@ ul.photon-autocomplete {
 }
 .umap-slideshow-active .umap-slideshow-toolbox .play,
 .umap-slideshow-toolbox .play {
-    width: calc(var(--footer-height) * 3);
+    width: 100px;
     text-align: left;
     padding-left: 20px;
 }
 .umap-slideshow-toolbox .play:after {
-    content: '⏯︎';
+    content: ' ▶';
 }
 .umap-slideshow-active .umap-slideshow-toolbox .play:after {
-    content: '⏸︎';
+    content: ' ❚❚';
 }
 .umap-slideshow-toolbox .stop:before {
-    content: '⏹';
+    content: '■';
 }
 .umap-slideshow-toolbox .next:before {
-    content: '⏵︎';
+    content: '➡';
 }
 .umap-slideshow-toolbox .prev:before {
-    content: '⏴︎';
+    content: '⬅';
 }
 .umap-slideshow-toolbox .play div {
     height: 20px;
@@ -1129,7 +1127,6 @@ a.umap-control-caption,
 }
 
 .umap-popup-footer {
-    position: relative;
     background-color: rgb(68, 68, 68);
     color: white;
     display: table;
@@ -1525,7 +1522,7 @@ span.popup-icon {
     z-index: 1001;
 }
 .leaflet-popup-content {
-    min-width: 200px;
+    min-width: 100px;
     line-height: inherit;
 }
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
@@ -1562,6 +1559,8 @@ span.popup-icon {
 }
 .umap-popup-container {
     flex-grow: 1;
+    word-break: break-word;
+    white-space: pre-line;
     margin-bottom: 10px;
 }
 .umap-popup-container ul {

umap/static/umap/unittests/utils.js

@@ -11,14 +11,14 @@ global.JSDOM = JSDOM
 describe('Utils', function () {
   describe('#toHTML()', function () {
     it('should handle title', function () {
-      assert.equal(Utils.toHTML('# A title'), '<h4>A title</h4>')
+      assert.equal(Utils.toHTML('# A title'), '<h3>A title</h3>')
     })
     it('should handle title followed by text', function () {
-      assert.equal(Utils.toHTML('# A title\nSome text.'), '<h4>A title</h4>Some text.')
+      assert.equal(Utils.toHTML('# A title\nSome text.'), '<h3>A title</h3>Some text.')
     })
 
     it('should handle title in the middle of the content', function () {
-      assert.equal(Utils.toHTML('A phrase\n## A title'), 'A phrase\n<h5>A title</h5>')
+      assert.equal(Utils.toHTML('A phrase\n## A title'), 'A phrase\n<h4>A title</h4>')
     })
 
     it('should handle hr', function () {
@@ -43,7 +43,7 @@ describe('Utils', function () {
     it('should handle simple link in title', function () {
       assert.equal(
         Utils.toHTML('# http://osm.org'),
-        '<h4><a href="http://osm.org" target="_blank">http://osm.org</a></h4>'
+        '<h3><a href="http://osm.org" target="_blank">http://osm.org</a></h3>'
       )
     })
 
@@ -180,7 +180,7 @@ describe('Utils', function () {
     it('title followed by bullet points', function () {
       assert.equal(
         Utils.toHTML('## Some title\n* First *point*\n* Second **point**\n* Last [[https://here.org|point]]'),
-        '<h5>Some title</h5><ul><li>First <em>point</em></li><li>Second <strong>point</strong></li><li>Last <a href="https://here.org" target="_blank">point</a></li></ul>'
+        '<h4>Some title</h4><ul><li>First <em>point</em></li><li>Second <strong>point</strong></li><li>Last <a href="https://here.org" target="_blank">point</a></li></ul>'
       )
     })
   })

umap/static/umap/vars.css

@@ -29,13 +29,12 @@
     --panel-width: 400px;
     --header-height: 46px;
     --current-header-height: 0px;
-    --footer-height: 32px;
+    --footer-height: 28px;
     --current-footer-height: 0px;
     --control-size: 36px;
     --border-radius: 4px;
     --box-padding: 20px;
     --box-margin: 14px;
-    --text-margin: 7px;
 }
 .dark {
     --background-color: var(--color-darkGray);