Open Time

J’aime bien quand une CSS diminue tout en conservant un rendu correct (et plus homogène) côté navigateur !

Exemple avec la page des catégories dont la CSS dédiée s’est un peu réduite :

diff --git a/admin/style/scss/partials/_categories.scss b/admin/style/scss/partials/_categories.scss
index a81be17a4..371853970 100644
--- a/admin/style/scss/partials/_categories.scss
+++ b/admin/style/scss/partials/_categories.scss
@@ -3,12 +3,9 @@

   ul {
     list-style: none;
-    margin-top: 2em;
     padding: 0;
-
     ul {
-      margin-right: 2em;
-      margin-left: 2em;
+      margin: 0 1em 0 2em;
     }
   }

@@ -19,63 +16,40 @@
 }

 .cat-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1em;
   position: relative;
   margin: 0.66em 0;
   padding: 0.66em 1em;
   border: 1px solid var(--cat-line-border);
   border-radius: 3px;

-  label {
-    margin-right: 0.25em;
-
-    a {
-      font-weight: bold;
-    }
+  ul {
+    flex-grow: 1;
   }
-
   p,
   label {
     margin: 0;
-    display: inline-block;
+  }
+  label {
+    display: inline-flex;
+    gap: 0.5em;
+    align-items: center;
   }

   .cat-line {
     border: 1px solid var(--subcat-line-border);
   }
-}

-p.cat-title {
-  margin-right: 1em;
-}
-
-.cat-nb-posts a {
-  color: var(--cat-post-counter);
-}
-
-.cat-url {
-  padding-left: 1em;
-}
-
-.cat-buttons {
-  float: right;
-  margin-top: -0.2em;
-  font-size: 0.91em;
-
-  select {
-    padding: 1px 2px 3px 2px;
-    margin-right: 0.25em;
+  .cat-buttons {
+    margin-inline-start: auto;
   }
-
-  .reset {
-    padding-left: 4px;
-    padding-right: 4px;
+  label {
+    a {
+      font-weight: bold;
+    }
   }
 }
-
-.cat-actions {
-  line-height: 2;
-}
-
-#del_cat {
-  width: 100%;
-}

Les lignes préfixées par le signe - et affichée sur fond rouge ont été supprimées, celles préfixées par le signe + et affichées sur fond vert ont été ajoutées.

#categories {
  margin: 1em 0;

  ul {
    list-style: none;
    padding: 0;
    ul {
      margin: 0 1em 0 2em;
    }
  }

  .placeholder {
    outline: 1px dashed var(--cat-placeholder-outline);
    min-height: 2.5em;
  }
}

.cat-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  position: relative;
  margin: 0.66em 0;
  padding: 0.66em 1em;
  border: 1px solid var(--cat-line-border);
  border-radius: 3px;

  ul {
    flex-grow: 1;
  }
  p,
  label {
    margin: 0;
  }
  label {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
  }

  .cat-line {
    border: 1px solid var(--subcat-line-border);
  }

  .cat-buttons {
    margin-inline-start: auto;
  }
  label {
    a {
      font-weight: bold;
    }
  }
}

Merci flex pour le coup de main, ça aide bien !