From 015d5670a1513e9941f3289075f53b24d9ad2b48 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:00:50 +0800
Subject: [PATCH] refactor: reduce custom CSS

---
 _includes/mermaid.html                        |  2 +-
 _includes/search-results.html                 |  2 +-
 .../modules/components/search-display.js      |  4 ++--
 _sass/addon/commons.scss                      | 20 -------------------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index a6eac8b1bb5..72dcacbe045 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -45,7 +45,7 @@
     [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
-      backup.classList.add('unloaded');
+      backup.classList.add('d-none');
       /* create mermaid node */
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');
diff --git a/_includes/search-results.html b/_includes/search-results.html
index c224c5f41df..00a318286fe 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -1,6 +1,6 @@
 <!-- The Search results -->
 
-<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
   <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index 98a97ab5dbe..21d634efd2b 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -14,8 +14,8 @@ const input = document.getElementById('search-input');
 const hints = document.getElementById('search-hints');
 
 // CSS class names
-const LOADED = 'loaded';
-const UNLOADED = 'unloaded';
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
 const FOCUS = 'input-focus';
 const FLEX = 'd-flex';
 
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e02a79fecab..d08dc351799 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -596,26 +596,6 @@ main {
 
 /* --- Effects classes --- */
 
-.loaded {
-  display: block !important;
-
-  @at-root .d-flex#{&} {
-    display: flex !important;
-  }
-}
-
-.unloaded {
-  display: none !important;
-}
-
-.visible {
-  visibility: visible !important;
-}
-
-.hidden {
-  visibility: hidden !important;
-}
-
 .flex-grow-1 {
   flex-grow: 1 !important;
 }