ui improvement

Author: baiyuanneko

App/create_confirm_dialog.js

@@ -13,8 +13,8 @@ module.exports=function(dialog_content,do_what_if_sure){
         <p>${dialog_content}</p>
       </div>
       <div class="modal-footer">
-        <fluent-button appearance="accent" data-bs-dismiss="modal"><i class="fa fa-ban"></i> ${langdata["CANCEL"][lang_name]}</fluent-button>
-        <fluent-button appearance="accent" data-bs-dismiss="modal" id="${dialog_id}_sure"><i class="fa fa-check"></i> ${langdata["OK"][lang_name]}</fluent-button>
+        <button type="button" class="danger_btn" data-bs-dismiss="modal"><i class="fa fa-ban"></i> ${langdata["CANCEL"][lang_name]}</button>
+        <button type="button" class="success_btn" data-bs-dismiss="modal" id="${dialog_id}_sure"><i class="fa fa-check"></i> ${langdata["OK"][lang_name]}</button>
       </div>
     </div>
   </div>

App/edit_friend_book.js

@@ -92,7 +92,7 @@ ${langdata.GET_FRIEND_BOOK_DATA_FROM_EXTERNAL_LINK[lang_name]}
     
     
 
-<fluent-button appearance="accent" onclick="add_new_friend();"><i class="fa fa-plus"></i> ${langdata.ADD_NEW_FRIEND_BOOK_INFO[lang_name]}</fluent-button>
+<button type="button" class="success_btn" onclick="add_new_friend();"><i class="fa fa-plus"></i> ${langdata.ADD_NEW_FRIEND_BOOK_INFO[lang_name]}</button>
 </div>
     </div>
     <div class="modal-footer" id="edit_friend_book_dialog_footer">

App/encryption_decryption_ui.js

@@ -10,7 +10,7 @@ const ui_encrypt_article = (article_id) => {
     <label class="form-label"><i class="fa fa-password"></i> ${langdata.INPUT_A_PASSWORD[lang_name]}</label>
     <input class="form-control" placeholder="${langdata.INPUT_A_PASSWORD[lang_name]}" value="" id="article_password_modal_value">
   </div>
-  <fluent-button appearance="accent" id="encryptionOptionsModalEncryptBtn">${langdata.ENCRYPT_ARTICLE[lang_name]}</fluent-button>
+  <button type="button" class="success_btn" id="encryptionOptionsModalEncryptBtn">${langdata.ENCRYPT_ARTICLE[lang_name]}</button>
     `;
   document.getElementById("encryptionOptionsModalEncryptBtn").addEventListener("click", () => {
     let password = document.getElementById("article_password_modal_value").value;
@@ -35,7 +35,7 @@ const ui_decrypt_article = (article_id) => {
     <label class="form-label"><i class="fa fa-password"></i> ${langdata.INPUT_A_PASSWORD[lang_name]}</label>
     <input class="form-control" placeholder="${langdata.INPUT_A_PASSWORD[lang_name]}" value="" id="article_password_modal_value">
   </div>
-  <fluent-button appearance="accent" id="encryptionOptionsModalDecryptBtn">${langdata.DECRYPT_ARTICLE[lang_name]}</fluent-button>
+  <button type="button" class="success_btn" id="encryptionOptionsModalDecryptBtn">${langdata.DECRYPT_ARTICLE[lang_name]}</button>
     `;
   document.getElementById("encryptionOptionsModalDecryptBtn").addEventListener("click", () => {
     let password = document.getElementById("article_password_modal_value").value;
@@ -61,4 +61,4 @@ const ui_decrypt_article = (article_id) => {
 module.exports = {
   ui_encrypt_article: ui_encrypt_article,
   ui_decrypt_article: ui_decrypt_article
-};
+};

App/import_fluent_ui.js

@@ -120,12 +120,6 @@ const edit_external_links = require("./edit_external_links.js");
 const let_page_up = require("./change_page_order.js").let_page_up;
 const let_page_down = require("./change_page_order.js").let_page_down;
 
-const import_fluent_ui = require("./import_fluent_ui.js");
-
-import_fluent_ui();
-
-
-
 function convertTimeStampToDatetimeString(timestamp) {
   const date = new Date(timestamp);
 

App/manage.js

@@ -25,11 +25,8 @@ const check_update = require("./check_update.js");
 
 const BlogData = require("./BlogData.js");
 
-const import_fluent_ui = require("./import_fluent_ui.js");
 const icon = require("./icon.js");
 
-import_fluent_ui();
-
 const create_new_site_dialog = new bootstrap.Modal(document.getElementById("create-new-site-dialog"));
 const err_dialog = new bootstrap.Modal(document.getElementById("err-dialog"));
 const info_dialog = new bootstrap.Modal(document.getElementById("info-dialog"));
@@ -399,34 +396,34 @@ storage.has("language", (error, hasKey) => {
       document.getElementById("interface_firstpart").innerHTML = `
            <h1>${langdata.STARTPAGE_TITLE[lang_name]}</h1><br />
            <br />
-           <fluent-button class="startpage_btn_container" id="open_site_btn" onclick="open_site()">
-           <div class="startpage_btn_inner">
-           <div class="startpage_btn_icon">${icon("folder-svgrepo-com")}</div>
+           <button type="button" class="startpage_btn_container startpage_action_btn" id="open_site_btn" onclick="open_site()">
+           <span class="startpage_btn_inner">
+           <span class="startpage_btn_icon">${icon("folder-svgrepo-com")}</span>
            
            ${langdata.OPEN_EXISTING_SITE[lang_name]}
-           </div>
-           </fluent-button>
+           </span>
+           </button>
           
-          <fluent-button class="startpage_btn_container" id="create_site_btn" onclick="create_new_site_dialog_show()">
-          <div class="startpage_btn_inner">
-          <div class="startpage_btn_icon">${icon("add-folder-svgrepo-com")}</div>
+          <button type="button" class="startpage_btn_container startpage_action_btn" id="create_site_btn" onclick="create_new_site_dialog_show()">
+          <span class="startpage_btn_inner">
+          <span class="startpage_btn_icon">${icon("add-folder-svgrepo-com")}</span>
           ${langdata.CREATE_NEW_SITE[lang_name]}
-          </div>
-          </fluent-button>
+          </span>
+          </button>
           <div class="dropdown" style="display: inline-block">
-          <fluent-button class="startpage_btn_container" id="recent_open_btn"  data-bs-toggle="dropdown"><div class="startpage_btn_inner"><div class="startpage_btn_icon">${icon("clock-time-and-date-svgrepo-com")}</div>${langdata.RECENT_OPEN[lang_name]}</div></fluent-button>
+          <button type="button" class="startpage_btn_container startpage_action_btn" id="recent_open_btn" data-bs-toggle="dropdown"><span class="startpage_btn_inner"><span class="startpage_btn_icon">${icon("clock-time-and-date-svgrepo-com")}</span>${langdata.RECENT_OPEN[lang_name]}</span></button>
           <ul class="dropdown-menu">
           <li><a class="dropdown-item" id="last_managed_site"></a></li>
           </ul>
           
           </div>
           <div class="dropdown" style="display: inline-block">
-          <fluent-button class="startpage_btn_container" id="application_settings_btn" data-bs-toggle="dropdown">
-          <div class="startpage_btn_inner">
-          <div class="startpage_btn_icon">${icon("cog-svgrepo-com")}</div>
+          <button type="button" class="startpage_btn_container startpage_action_btn" id="application_settings_btn" data-bs-toggle="dropdown">
+          <span class="startpage_btn_inner">
+          <span class="startpage_btn_icon">${icon("cog-svgrepo-com")}</span>
           ${langdata.APPLICATION_SETTINGS[lang_name]}
-          </div>
-          </fluent-button>
+          </span>
+          </button>
           <ul class="dropdown-menu">
           <li><a class="dropdown-item" onclick="language_dialog.show();"><i class="fa fa-flag" aria-hidden="true"></i> Language Settings / 语言设定</a></li>
           <li><a class="dropdown-item" onclick="openStylesheetDialog()"><i class="fa fa-paint-brush" aria-hidden="true"></i> ${langdata.APPLICATION_STYLE_SETTING[lang_name]}</a></li>

App/start.js

@@ -131,49 +131,6 @@ body:before {
   color: greenyellow;
 }
 
-.fluentbtn {
-  border-radius: 8px;
-  background-color: rgb(254, 254, 254);
-  border-style: solid;
-  border-width: 1px;
-  border-color: rgb(235, 237, 238);
-  padding-top: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-bottom: 8px;
-  text-decoration: none;
-  color: black;
-  font-size: 110%;
-  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 6%);
-}
-
-.fluentbtn-blue {
-  background-color: rgba(3, 106, 196, 0.671) !important;
-  color: white !important
-}
-
-.fluentbtn-blue:hover {
-  background-color: #168dd6 !important;
-  color: white !important
-}
-
-.fluentbtn-blue:active {
-  background-color: rgb(39, 78, 175) !important;
-  color: rbg(218, 228, 255) !important
-}
-
-.fluentbtn:hover {
-  background-color: rgb(250, 251, 251);
-  text-decoration: none;
-  color: black;
-}
-
-.fluentbtn:active {
-  background-color: rgb(250, 251, 251);
-  text-decoration: none;
-  color: grey;
-}
-
 @keyframes fade-in {
   from {
     opacity: 0
@@ -651,21 +608,6 @@ textarea.form-control:focus {
   color: white;
 }
 
-.fluentbtn-start {
-  background-color: rgb(136, 164, 199) !important;
-  color: black !important;
-  border-radius: 0px;
-  border: 0;
-}
-
-.fluentbtn-start:hover {
-  background-color: rgb(187, 210, 238) !important;
-}
-
-.fluentbtn-start:active {
-  background-color: rgb(189, 213, 242) !important;
-}
-
 #startpage_container {
   background-color: rgb(42, 45, 60);
   color: white;
@@ -703,18 +645,42 @@ textarea.form-control:focus {
 
 .startpage_btn_container {
   height: fit-content;
+  margin: 4px 5px;
 }
 
 .startpage_btn_inner {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
+  display: block;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 7px;
+  padding-right: 7px;
 }
 
 .startpage_btn_icon {
-  font-size: 33px;
-  margin-bottom: 10px;
+  display: block;
+  font-size: 24px;
+  margin-bottom: 6px;
+}
+
+.startpage_action_btn {
+  border: 1px solid rgb(224, 230, 238);
+  background: rgb(255, 255, 255);
+  color: rgb(35, 47, 61);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
+}
+
+.startpage_action_btn:hover {
+  background: rgb(255, 255, 255);
+  border-color: rgb(199, 212, 228);
+  transform: translateY(-1px);
+}
+
+.startpage_action_btn:active {
+  background: rgb(247, 249, 252);
+  border-color: rgb(183, 198, 214);
+  transform: translateY(0);
 }
 
 #container {
@@ -727,10 +693,28 @@ textarea.form-control:focus {
   border-radius: 8px;
   background-color: rgb(255, 255, 255);
   color: rgb(38, 107, 196);
-  border: none;
+  border: 1px solid rgb(205, 214, 224);
   box-shadow: 0 3px 1px -2px rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 6%);
   font-size: 16px;
   vertical-align: top;
+  cursor: pointer;
+  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+
+.add_item_btn:hover {
+  background-color: rgb(243, 247, 252);
+  color: rgb(24, 84, 162);
+  border-color: rgb(183, 196, 212);
+  box-shadow: 0 8px 16px -12px rgb(0 0 0 / 28%), 0 4px 10px -8px rgb(0 0 0 / 18%);
+  transform: translateY(-1px);
+}
+
+.add_item_btn:active {
+  background-color: rgb(235, 241, 248);
+  color: rgb(18, 67, 132);
+  border-color: rgb(167, 182, 199);
+  box-shadow: 0 4px 8px -8px rgb(0 0 0 / 22%);
+  transform: translateY(0);
 }
 
 .primary_btn {
@@ -741,16 +725,24 @@ textarea.form-control:focus {
   padding: 8px 16px;
   font-size: 16px;
   cursor: pointer;
+  box-shadow: 0 3px 8px -8px rgb(0 0 0 / 18%);
+  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
 .primary_btn:hover {
   background-color: rgb(250, 253, 255);
-  border-color: rgb(134, 166, 218)
+  border-color: rgb(134, 166, 218);
+  color: rgb(39, 109, 221);
+  box-shadow: 0 8px 16px -12px rgb(0 0 0 / 28%), 0 4px 10px -8px rgb(0 0 0 / 18%);
+  transform: translateY(-1px);
 }
 
 .primary_btn:active {
   background-color: rgb(255, 255, 255);
-  border-color: rgb(45, 83, 143)
+  border-color: rgb(45, 83, 143);
+  color: rgb(27, 92, 197);
+  box-shadow: 0 4px 8px -8px rgb(0 0 0 / 22%);
+  transform: translateY(0);
 }
 
 .danger_btn {
@@ -760,16 +752,25 @@ textarea.form-control:focus {
   border-radius: 8px;
   padding: 8px 16px;
   font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0 3px 8px -8px rgb(0 0 0 / 18%);
+  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
 .danger_btn:hover {
   background-color: rgb(255, 250, 250);
   border-color: rgb(255, 134, 134);
+  color: rgb(166, 29, 27);
+  box-shadow: 0 8px 16px -12px rgb(0 0 0 / 28%), 0 4px 10px -8px rgb(0 0 0 / 18%);
+  transform: translateY(-1px);
 }
 
 .danger_btn:active {
   background-color: rgb(255, 255, 255);
   border-color: rgb(186, 35, 33);
+  color: rgb(146, 24, 23);
+  box-shadow: 0 4px 8px -8px rgb(0 0 0 / 22%);
+  transform: translateY(0);
 }
 
 .success_btn {
@@ -779,16 +780,25 @@ textarea.form-control:focus {
   border-radius: 8px;
   padding: 8px 16px;
   font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0 3px 8px -8px rgb(0 0 0 / 18%);
+  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
 .success_btn:hover {
   background-color: rgb(250, 253, 250);
   border-color: rgb(134, 218, 134);
+  color: rgb(22, 112, 81);
+  box-shadow: 0 8px 16px -12px rgb(0 0 0 / 28%), 0 4px 10px -8px rgb(0 0 0 / 18%);
+  transform: translateY(-1px);
 }
 
 .success_btn:active {
   background-color: rgb(255, 255, 255);
   border-color: rgb(26, 132, 95);
+  color: rgb(19, 95, 69);
+  box-shadow: 0 4px 8px -8px rgb(0 0 0 / 22%);
+  transform: translateY(0);
 }
 
 .warning_btn {