Re-introduced icon helpers and the animated spinner

diff --git a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
index e0f85a75f50e5866c023264882f64b60e1bd2063..29743fbfaad54d1694b45626e6ecfa0203dfe5bb 100644 (file)
--- a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
+++ b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
@@ -24,6 +24,18 @@ $fa-size-scale-base: 15;
   text-align: center;
   width: 1.25em;
 
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* Default icon sizes */
+.icon {
   &.icon16 {
     --icon-size: 16px;
   }
@@ -58,6 +70,45 @@ $fa-size-scale-base: 15;
   }
 }
 
+/* Default icon colors */
+.icon {
+  &.green {
+    color: rgba(0, 153, 0, 1);
+  }
+
+  &.red {
+    color: rgba(204, 0, 0, 1);
+  }
+
+  &.black {
+    color: #333;
+  }
+
+  &.brown {
+    color: #c63;
+  }
+
+  &.orange {
+    color: #f90;
+  }
+
+  &.yellow {
+    color: #ff0;
+  }
+
+  &.blue {
+    color: #369;
+  }
+
+  &.purple {
+    color: #c0f;
+  }
+
+  &.pink {
+    color: #f0c;
+  }
+}
+
 /* Shims */
 
 $fa-var-external-link: "";
@@ -2726,3 +2777,21 @@ $fa-var-trash-o: "";
   font-family: "Font Awesome 6 Brands";
   font-weight: 400;
 }
+
+.icon.fa-spinner {
+  animation: wcfSpinner 0.6s linear infinite;
+  border: 2px solid rgb(204, 204, 204);
+  border-top-color: rgb(79, 129, 189);
+  border-radius: 50%;
+  vertical-align: middle;
+
+  /* The new icons have a width of 1.25 times the height. */
+  margin: 0 calc(var(--icon-size) * 0.125);
+  width: var(--icon-size);
+}
+
+@keyframes wcfSpinner {
+  to {
+    transform: rotate(360deg);
+  }
+}