fix: some style inconsistencies

dist/BetterYTM.css

@@ -93,7 +93,7 @@
 
 /* #region cfg menu adornments */
 
-.bytm-ftitem-adornment svg path {
+.bytm-locale-icon svg path {
   fill: var(--bytm-locale-color, #fff);
 }
 
@@ -518,7 +518,7 @@ select.bytm-ftconf-input {
   --bytm-kbd-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
   display: inline-block;
   vertical-align: bottom;
-  padding: 4px 3px;
+  padding: 3px;
   font-family: var(--bytm-font-monospace);
   font-size: 1.25rem;
   line-height: 11px;
@@ -532,15 +532,12 @@ select.bytm-ftconf-input {
     box-shadow 0.1s var(--bytm-kbd-easing);
 }
 
-.bytm-markdown-container kbd:active,
-.bytm-kbd:active {
-  padding-bottom: 2px;
-  margin-top: 2px;
+.bytm-markdown-container kbd:active {
+  padding-bottom: 1px;
   box-shadow: inset 0 0 0 initial;
 }
 
-.bytm-markdown-container kbd::selection,
-.bytm-kbd::selection {
+.bytm-markdown-container kbd::selection {
   background: rgba(0, 0, 0, 0);
 }
 
@@ -548,8 +545,6 @@ select.bytm-ftconf-input {
   background-color: #222;
   border-radius: 3px;
   padding: 1px 5px;
-  font-family: var(--bytm-font-monospace);
-  font-size: var(--bytm-font-size-monospace);
 }
 
 .bytm-markdown-container h2 {
@@ -560,17 +555,55 @@ select.bytm-ftconf-input {
   margin-top: 30px;
 }
 
+.bytm-markdown-container ul li {
+  padding-left: 0px;
+}
+
+.bytm-markdown-container ul li::marker {
+  content: none;
+}
+
 .bytm-markdown-container ul li::before {
   content: "• ";
   font-weight: bolder;
 }
 
+.bytm-markdown-container ul li > ul li {
+  padding-left: 16px;
+}
+
+.bytm-markdown-container ul li > ul li::marker {
+  content: none;
+}
+
 .bytm-markdown-container ul li > ul li::before {
   white-space: pre-wrap;
-  content: "    • ";
+  content: "• ";
   font-weight: bolder;
 }
 
+.bytm-markdown-container ul li > ul li > ul li {
+  padding-left: 16px;
+}
+
+.bytm-markdown-container ul li > ul li > ul li::marker {
+  content: none;
+}
+
+.bytm-markdown-container ul li > ul li > ul li::before {
+  white-space: pre-wrap;
+  content: "• ";
+  font-weight: bolder;
+}
+
+.bytm-markdown-container .pr-link-cont {
+  padding-top: 10px;
+}
+
+.bytm-markdown-container details {
+  margin-top: 5px;
+}
+
 #bytm-feat-help-dialog-desc,
 #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;
@@ -1436,7 +1469,7 @@ body .bytm-ripple.slower {
   --bytm-kbd-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
   display: inline-block;
   vertical-align: bottom;
-  padding: 4px 3px;
+  padding: 3px;
   font-family: var(--bytm-font-monospace);
   font-size: 1.25rem;
   line-height: 11px;
@@ -1451,7 +1484,7 @@ body .bytm-ripple.slower {
 }
 
 .bytm-markdown-container kbd:active {
-  padding-bottom: 2px;
+  padding-bottom: 1px;
   box-shadow: inset 0 0 0 initial;
 }
 
@@ -1463,6 +1496,8 @@ body .bytm-ripple.slower {
   background-color: #222;
   border-radius: 3px;
   padding: 1px 5px;
+  font-family: var(--bytm-font-monospace);
+  font-size: var(--bytm-font-size-monospace);
 }
 
 .bytm-markdown-container h2 {
@@ -1518,6 +1553,10 @@ body .bytm-ripple.slower {
   padding-top: 10px;
 }
 
+.bytm-markdown-container details {
+  margin-top: 5px;
+}
+
 #bytm-feat-help-dialog-desc,
 #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;

src/components/BytmDialog.css

@@ -342,7 +342,7 @@ select.bytm-ftconf-input {
   --bytm-kbd-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
   display: inline-block;
   vertical-align: bottom;
-  padding: 4px 3px;
+  padding: 3px;
   font-family: var(--bytm-font-monospace);
   font-size: 1.25rem;
   line-height: 11px;
@@ -356,15 +356,12 @@ select.bytm-ftconf-input {
     box-shadow 0.1s var(--bytm-kbd-easing);
 }
 
-.bytm-markdown-container kbd:active,
-.bytm-kbd:active {
-  padding-bottom: 2px;
-  margin-top: 2px;
+.bytm-markdown-container kbd:active {
+  padding-bottom: 1px;
   box-shadow: inset 0 0 0 initial;
 }
 
-.bytm-markdown-container kbd::selection,
-.bytm-kbd::selection {
+.bytm-markdown-container kbd::selection {
   background: rgba(0, 0, 0, 0);
 }
 
@@ -384,17 +381,55 @@ select.bytm-ftconf-input {
   margin-top: 30px;
 }
 
+.bytm-markdown-container ul li {
+  padding-left: 0px;
+}
+
+.bytm-markdown-container ul li::marker {
+  content: none;
+}
+
 .bytm-markdown-container ul li::before {
   content: "• ";
   font-weight: bolder;
 }
 
+.bytm-markdown-container ul li > ul li {
+  padding-left: 16px;
+}
+
+.bytm-markdown-container ul li > ul li::marker {
+  content: none;
+}
+
 .bytm-markdown-container ul li > ul li::before {
   white-space: pre-wrap;
-  content: "    • ";
+  content: "• ";
+  font-weight: bolder;
+}
+
+.bytm-markdown-container ul li > ul li > ul li {
+  padding-left: 16px;
+}
+
+.bytm-markdown-container ul li > ul li > ul li::marker {
+  content: none;
+}
+
+.bytm-markdown-container ul li > ul li > ul li::before {
+  white-space: pre-wrap;
+  content: "• ";
   font-weight: bolder;
 }
 
+.bytm-markdown-container .pr-link-cont {
+  padding-top: 10px;
+}
+
+.bytm-markdown-container details {
+  margin-top: 5px;
+}
+
 #bytm-feat-help-dialog-desc,
 #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;

src/dialogs/dialogs.css

@@ -93,7 +93,7 @@
 
 /* #region cfg menu adornments */
 
-.bytm-ftitem-adornment svg path {
+.bytm-locale-icon svg path {
   fill: var(--bytm-locale-color, #fff);
 }
 

src/features/index.ts

@@ -67,7 +67,7 @@ const combineAdornments = (
 const adornments = {
   advanced: async () => getAdornHtml("bytm-advanced-mode-icon", t("advanced_mode"), "icon-advanced_mode"),
   experimental: async () => getAdornHtml("bytm-experimental-icon", t("experimental_feature"), "icon-experimental"),
-  globe: async () => await resourceAsString("icon-globe_small") ?? "",
+  globe: async () => getAdornHtml("bytm-locale-icon", t("locale"), "icon-globe_small"),
   alert: async (title: string) => getAdornHtml("bytm-warning-icon", title, "icon-error", "role=\"alert\""),
   reload: async () => getFeature("advancedMode") ? getAdornHtml("bytm-reload-icon", t("feature_requires_reload"), "icon-reload") : undefined,
 } satisfies Record<string, AdornmentFunc>;

src/menu/menu_old.css

@@ -375,7 +375,7 @@
   --bytm-kbd-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
   display: inline-block;
   vertical-align: bottom;
-  padding: 4px 3px;
+  padding: 3px;
   font-family: var(--bytm-font-monospace);
   font-size: 1.25rem;
   line-height: 11px;
@@ -390,7 +390,7 @@
 }
 
 .bytm-markdown-container kbd:active {
-  padding-bottom: 2px;
+  padding-bottom: 1px;
   box-shadow: inset 0 0 0 initial;
 }
 
@@ -402,6 +402,8 @@
   background-color: #222;
   border-radius: 3px;
   padding: 1px 5px;
+  font-family: var(--bytm-font-monospace);
+  font-size: var(--bytm-font-size-monospace);
 }
 
 .bytm-markdown-container h2 {
@@ -457,6 +459,10 @@
   padding-top: 10px;
 }
 
+.bytm-markdown-container details {
+  margin-top: 5px;
+}
+
 #bytm-feat-help-dialog-desc,
 #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;