feat(SemanticMediaWiki): ✨ replace entity examiner loader with SMW logo

StarCitizenTools · Jun 6, 2023 · 0ee3153 · 0ee3153
1 parent 659c47b
commit 0ee3153
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less
@@ -539,18 +539,42 @@ a.smw-ask-action-btn-lblue:active {
 }
 
 /* smw/smw.indicators.css */
-.smw-icon-indicator-placeholder {
-	background-color: var( --color-surface-2 );
+#mw-indicator-smw-entity-examiner {
+	/* Avoid dimension changes from animiation */
+	width: 22px;
+	height: 22px;
+}
+
+/* Turn SMW logo into a loading spinner */
+.smw-indicator-vertical-bar-loader {
+	width: inherit;
+	height: inherit;
+	margin: 0;
+	animation: load2 1s infinite ease-in-out;
+	/* Perhaps base64 is not the best for performance */
+	background: url( data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM3NSAzMzUiIHZpZXdCb3g9IjAgMCAzNzUgMzM1Ij48cGF0aCBkPSJNMjY2LjggMzA1SDEwOC4yTDI4LjggMTY3LjUgMTA4LjIgMzBoMTU4LjdsNzkuMyAxMzcuNUwyNjYuOCAzMDV6bS0xNTAtMTVoMTQxLjNsNzAuNy0xMjIuNUwyNTguMiA0NUgxMTYuOEw0Ni4yIDE2Ny41IDExNi44IDI5MHoiLz48Y2lyY2xlIGN4PSIxMTIuNSIgY3k9IjM3LjUiIHI9IjM3LjUiLz48Y2lyY2xlIGN4PSIyNjIuNSIgY3k9IjM3LjUiIHI9IjM3LjUiLz48Y2lyY2xlIGN4PSIzNy41IiBjeT0iMTY3LjUiIHI9IjM3LjUiLz48Y2lyY2xlIGN4PSIzMzcuNSIgY3k9IjE2Ny41IiByPSIzNy41Ii8+PGNpcmNsZSBjeD0iMTEyLjUiIGN5PSIyOTcuNSIgcj0iMzcuNSIvPjxjaXJjbGUgY3g9IjI2Mi41IiBjeT0iMjk3LjUiIHI9IjM3LjUiLz48Y2lyY2xlIGN4PSIxODcuNSIgY3k9IjE2Ny41IiByPSI3NSIvPjwvc3ZnPg== );
+	background-position: center;
+	background-repeat: no-repeat;
+	opacity: var( --opacity-icon-base );
 }
 
-.smw-indicator-vertical-bar-loader,
 .smw-indicator-vertical-bar-loader::before,
 .smw-indicator-vertical-bar-loader::after {
-	background: var( --color-surface-3 );
+	content: none;
 }
 
-.smw-indicator-vertical-bar-loader {
-	color: var( --color-surface-3 );
+@keyframes load2 {
+	from {
+		transform: rotate( 0deg );
+	}
+
+	to {
+		transform: rotate( 359deg );
+	}
+}
+
+.smw-icon-indicator-placeholder {
+	background-color: var( --color-surface-2 );
 }
 
 .smw-list-rule-title {