style(css): Tidy up the CSS and add comments

liquidlight · Nov 3, 2023 · f67f641 · f67f641
1 parent 7017bec
commit f67f641
Showing 1 changed file with 12 additions and 40 deletions.
diff --git a/Resources/Public/Css/FeUsersDataTable.css b/Resources/Public/Css/FeUsersDataTable.css
@@ -15,9 +15,8 @@
 	margin-bottom: 18px;
 }
 .form-group.usergroups > div label {
-	margin-left: 18px;;
+	margin-left: 18px;
 }
-
 .dataTables_wrapper {
 	position: relative;
 }
@@ -52,7 +51,6 @@
 .paginate_button {
 	position: relative;
     float: left;
-    padding: 6px 6px;
     margin-left: -1px;
     line-height: 1.5;
     color: #212424;
@@ -75,52 +73,17 @@
 .paginate_button.disabled::before {
 	opacity: 0.5;
 }
-
-.paginate_button.first,
-.paginate_button.previous,
-.paginate_button.next,
-.paginate_button.last {
-	font-size: 0;
-}
-.paginate_button.first::before,
-.paginate_button.previous::before,
-.paginate_button.next::before,
-.paginate_button.last::before {
-	content: '';
-	display: inline-block;
-	background-repeat: no-repeat;
-	background-size: contain;
-	width: 1.8rem;
-	height: 1.8rem;
-}
-
-.paginate_button.first::before {
-	background-size: 1em 1em;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg width='20px' height='20px' fill='%23fff'%3e%3cpath d='M5.414 8 8.95 4.464l-.707-.707L4 8l4.243 4.243.707-.707z'/%3e%3cpath d='m8.414 8 3.536-3.536-.707-.707L7 8l4.243 4.243.707-.707z'/%3e%3c/g%3e%3c/svg%3e");
-}
-
-
-.paginate_button.previous::before {
-	background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-previous.svg');
-}
-.paginate_button.next::before {
-	background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-next.svg');
-}
-.paginate_button.last::before {
-	background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-last.svg');
-}
-
 .form-inline {
 	display: grid;
 	grid-template-columns: max-content max-content;
 	grid-gap: 1em;
 }
 
+/* Filter styling */
 div[id$="table_length"],
 div[id$="table_filter"] {
 	margin: 0;
 }
-
 div[id$="table_length"] > label {
 	display: grid;
   	grid-template-columns: minmax(20px, 40px) auto;
@@ -131,14 +94,20 @@ div[id$="table_length"] > label > select {
 	grid-column: span 2;
 	margin: 0;
 }
-
 div[id$="table_filter"] > label > input {
 	margin: 0;
 }
 
+/* Pagination styles */
 .paginate_button {
 	min-height: 42px;
 }
+.paginate_button.first,
+.paginate_button.previous,
+.paginate_button.next,
+.paginate_button.last {
+	font-size: 0;
+}
 .paginate_button.first::before,
 .paginate_button.previous::before,
 .paginate_button.next::before,
@@ -164,10 +133,13 @@ div[id$="table_filter"] > label > input {
 	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNy41ODYgOCA0LjA1IDExLjUzNmwuNzA3LjcwN0w5IDggNC43NTcgMy43NTdsLS43MDcuNzA3ek0xMCA0aDF2OGgtMXoiLz48L2c+PC9zdmc+");
 }
 
+/* Hide the ellipses */
 div[id$="table_paginate"] > span > span,
 .dataTables_paginate > span > span {
 	display: none;
 }
+
+/* Padding normalization for pagination buttons */
 div[id$="table_paginate"] > span > .paginate_button,
 .dataTables_paginate > span > .paginate_button {
 	padding: 11px 13px;