From 56f89aafe1107475232baebe57dc15aadf20d330 Mon Sep 17 00:00:00 2001
From: Tim Obert <tobert@w-commerce.de>
Date: Thu, 31 Oct 2024 08:14:17 +0100
Subject: [PATCH] Extend styling of commands from property-cards

---
 .../assets/sass/components/_command.scss      | 20 +++++++++++++++++++
 .../typo3-docs-theme/assets/sass/theme.scss   |  1 +
 .../resources/public/css/theme.css            | 19 ++++++++++++++----
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 packages/typo3-docs-theme/assets/sass/components/_command.scss

diff --git a/packages/typo3-docs-theme/assets/sass/components/_command.scss b/packages/typo3-docs-theme/assets/sass/components/_command.scss
new file mode 100644
index 000000000..2205a7753
--- /dev/null
+++ b/packages/typo3-docs-theme/assets/sass/components/_command.scss
@@ -0,0 +1,20 @@
+dl.command {
+    @extend .property-card;
+
+    & > dt {
+        a:not([class*=headerlink]) {
+            float: right;
+        }
+    }
+
+    .command-description {
+        margin-block: $spacer;
+    }
+
+    .command-options,
+    .command-arguments {
+        section {
+            margin-left: calc($spacer * 2);
+        }
+    }
+}
diff --git a/packages/typo3-docs-theme/assets/sass/theme.scss b/packages/typo3-docs-theme/assets/sass/theme.scss
index ca7600f10..5a046afee 100644
--- a/packages/typo3-docs-theme/assets/sass/theme.scss
+++ b/packages/typo3-docs-theme/assets/sass/theme.scss
@@ -29,6 +29,7 @@
 @import 'components/button';
 @import 'components/card';
 @import 'components/code';
+@import 'components/command';
 @import 'components/directoryTree';
 @import 'components/frame';
 @import 'components/images';
diff --git a/packages/typo3-docs-theme/resources/public/css/theme.css b/packages/typo3-docs-theme/resources/public/css/theme.css
index 0e096e4ca..bc8eb96a6 100644
--- a/packages/typo3-docs-theme/resources/public/css/theme.css
+++ b/packages/typo3-docs-theme/resources/public/css/theme.css
@@ -23831,6 +23831,17 @@ code {
     max-width: 60vw;
   }
 }
+dl.command > dt a:not([class*=headerlink]) {
+  float: right;
+}
+dl.command .command-description {
+  margin-block: 1rem;
+}
+dl.command .command-options section,
+dl.command .command-arguments section {
+  margin-left: 2rem;
+}
+
 .directory-tree ul {
   margin-bottom: 0;
   list-style: none;
@@ -25233,7 +25244,7 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   content: "\f071";
 }
 
-.property-card, .rst-content dl.php, dl.confval {
+.property-card, .rst-content dl.php, dl.confval, dl.command {
   background-color: #ffffff;
   border-radius: 0.375rem;
   margin-bottom: 1.5rem;
@@ -25243,7 +25254,7 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dt, .rst-content dl.php > dt, dl.confval > dt {
+.property-card > dt, .rst-content dl.php > dt, dl.confval > dt, dl.command > dt {
   display: block;
   background-color: rgb(242.25, 242.25, 242.25);
   color: #000;
@@ -25251,12 +25262,12 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   padding: 0.25em 0.5em;
   margin-bottom: 0.75em;
 }
-.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code {
+.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code, dl.command > dt code {
   color: #000;
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dd, .rst-content dl.php > dd, dl.confval > dd {
+.property-card > dd, .rst-content dl.php > dd, dl.confval > dd, dl.command > dd {
   margin-right: 1rem;
 }