misc: add expert/advanced mode visual indicator

ShokoAnime · Oct 6, 2024 · 2d3d7ca · 2d3d7ca
1 parent 7344b33
commit 2d3d7ca
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/Shokofin/Pages/Settings.html b/Shokofin/Pages/Settings.html
@@ -1,7 +1,28 @@
 <div data-role="page" class="page type-interior pluginConfigurationPage withTabs" data-require="emby-input,emby-button,emby-select,emby-checkbox" data-controller="__plugin/Shoko.Settings.js">
     <div data-role="content">
         <div class="content-primary">
-            <style>form:not(.expert-mode) .expert-only { display: none !important; }</style>
+            <style>
+form:not(.expert-mode) .expert-only {
+    display: none !important;
+}
+
+.expert-only.inputContainer .inputLabel::after,
+.expert-only.selectContainer .selectLabel::after,
+.expert-only.checkboxContainer .checkboxLabel::after,
+.expert-only[is="checkbox-list"] .checkboxListLabel::after,
+.expert-only[is="sortable-checkbox-list"] .checkboxListLabel::after {
+  font-size: 50%;
+  color: red;
+  margin-inline-start: 0.25rem;
+  padding-inline: 0.25rem;
+  vertical-align: middle;
+  content: "ADVANCED";
+  border: red 1px solid;
+  border-radius: 1rem;
+  display: "inline";
+}
+
+</style>
             <form>
                 <div class="verticalSection verticalSection-extrabottompadding">
                     <div class="sectionTitleContainer flex align-items-center">