Better styling for popups

facelessuser · Mar 18, 2021 · 9f1713e · 9f1713e
1 parent cd2838d
commit 9f1713e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 34 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,7 @@
 
 ## 2.15.2
 
+- **FIX**: Better styling for popups.
 - **FIX**: `tmTheme` support compressed hex; therefore, ScopeHunter must account for these colors.
 - **FIX**: Fix false positive on hashed foreground colors.
 

diff --git a/popup.j2 b/popup.j2
@@ -1,8 +1,8 @@
-### Scope [(copy)](copy-scope:{{plugin.scope_index}}){: .small} {: .header}
+### Scope [copy](copy-scope:{{plugin.scope_index}}){: .small .button} {: .header}
 {{plugin.scope}}
 
 {% if plugin.context_backtrace %}
-## Scope Context Backtrace [(copy)](copy-context-backtrace:{{plugin.context_backtrace_index}}){: .small} {: .header}
+## Scope Context Backtrace [copy](copy-context-backtrace:{{plugin.context_backtrace_index}}){: .small .button} {: .header}
   {% for ctx in plugin.context_backtrace_stack %}
 **{{loop.index}}:**{: .keyword} {{ctx}}
 
@@ -11,107 +11,107 @@
 
 {% if plugin.pt_extent or plugin.rowcol_extent %}
 ### Appearance {: .header}
-**fg:**{: .keyword} {{plugin.fg_preview}} {{plugin.fg_color}} [(copy)](copy-fg:{{plugin.fg_index}}){: .small}
+**fg:**{: .keyword} {{plugin.fg_preview}} {{plugin.fg_color}} [copy](copy-fg:{{plugin.fg_index}}){: .small .button}
 
   {% if plugin.fg_sim %}
-**fg (simulated alpha):**{: .keyword} {{plugin.fg_sim_preview}} {{plugin.fg_sim_color}} [(copy)](copy-fg-sim:{{plugin.fg_sim_index}}){: .small}
+**fg (simulated alpha):**{: .keyword} {{plugin.fg_sim_preview}} {{plugin.fg_sim_color}} [copy](copy-fg-sim:{{plugin.fg_sim_index}}){: .small .button}
 
   {% endif %}
   {% if plugin.fg_hash %}
-**hashed fg:**{: .keyword} {{plugin.fg_hash_preview}} {{plugin.fg_hash_color}} [(copy)](copy-fg-hash:{{plugin.fg_hash_index}}){: .small}
+**hashed fg:**{: .keyword} {{plugin.fg_hash_preview}} {{plugin.fg_hash_color}} [copy](copy-fg-hash:{{plugin.fg_hash_index}}){: .small .button}
 
   {% endif %}
   {% if plugin.fg_hash_sim %}
-**hashed fg (simulated alpha):**{: .keyword} {{plugin.fg_hash_sim_preview}} {{plugin.fg_hash_sim_color}} [(copy)](copy-fg-hash-sim:{{plugin.fg_hash_sim_index}}){: .small}
+**hashed fg (simulated alpha):**{: .keyword} {{plugin.fg_hash_sim_preview}} {{plugin.fg_hash_sim_color}} [copy](copy-fg-hash-sim:{{plugin.fg_hash_sim_index}}){: .small .button}
 
   {% endif %}
-**bg:**{: .keyword} {{plugin.bg_preview}} {{plugin.bg_color}} [(copy)](copy-bg:{{plugin.bg_index}}){: .small}
+**bg:**{: .keyword} {{plugin.bg_preview}} {{plugin.bg_color}} [copy](copy-bg:{{plugin.bg_index}}){: .small .button}
 
   {% if plugin.bg_sim %}
-**bg (simulated alpha):**{: .keyword} {{plugin.bg_sim_preview}} {{plugin.bg_sim_color}} [(copy)](copy-bg-sim:{{plugin.bg_sim_index}}){: .small}
+**bg (simulated alpha):**{: .keyword} {{plugin.bg_sim_preview}} {{plugin.bg_sim_color}} [copy](copy-bg-sim:{{plugin.bg_sim_index}}){: .small .button}
 
   {% endif %}
-**style:**{: .keyword} {{plugin.style_open}}{{plugin.style}}{{plugin.style_close}} [(copy)](copy-style:{{plugin.style_index}}){: .small}
+**style:**{: .keyword} {{plugin.style_open}}{{plugin.style}}{{plugin.style_close}} [copy](copy-style:{{plugin.style_index}}){: .small .button}
 
 {% endif %}
 
 {% if plugin.selectors %}
 ### Scope Extent {: .header}
   {% if plugin.pt_extent %}
-**pts:**{: .keyword} ({{plugin.extent_start}}, {{plugin.extent_end}}) [(copy)](copy-points:{{plugin.extent_pt_index}}){: .small}
+**pts:**{: .keyword} ({{plugin.extent_start}}, {{plugin.extent_end}}) [copy](copy-points:{{plugin.extent_pt_index}}){: .small .button}
 
   {% endif %}
   {% if plugin.pt_extent or plugin.rowcol_extent %}
-**line:char:**{: .keyword} ({{plugin.l_start}}:{{plugin.c_start}}, {{plugin.l_end}}:{{plugin.c_end}}) [(copy)](copy-line-char:{{plugin.line_char_index}}){: .small}
+**line:char:**{: .keyword} ({{plugin.l_start}}:{{plugin.c_start}}, {{plugin.l_end}}:{{plugin.c_end}}) [copy](copy-line-char:{{plugin.line_char_index}}){: .small .button}
   {% endif %}
 {% endif %}
 
 {% if plugin.appearance %}
 ### Selectors {: .header}
   {% if plugin.fg_name %}
-**fg name:**{: .keyword} {{plugin.fg_name}} [(copy)](copy-fg-sel-name:{{plugin.fg_name_index}}){: .small}
+**fg name:**{: .keyword} {{plugin.fg_name}} [copy](copy-fg-sel-name:{{plugin.fg_name_index}}){: .small .button}
 
   {% endif %}
-**fg scope:**{: .keyword} [(copy)](copy-fg-sel-scope:{{plugin.fg_scope_index}}){: .small} {{plugin.fg_scope}}
+**fg scope:**{: .keyword} [copy](copy-fg-sel-scope:{{plugin.fg_scope_index}}){: .small .button} {{plugin.fg_scope}}
 
   {% if plugin.fg_hash_name %}
-**hashed fg name:**{: .keyword} {{plugin.fg_hash_name}} [(copy)](copy-fg-hash-sel-name:{{plugin.fg_hash_name_index}}){: .small}
+**hashed fg name:**{: .keyword} {{plugin.fg_hash_name}} [copy](copy-fg-hash-sel-name:{{plugin.fg_hash_name_index}}){: .small .button}
 
   {% endif %}
   {% if plugin.fg_hash_scope %}
-**hashed fg scope:**{: .keyword} [(copy)](copy-fg-hash-sel-scope:{{plugin.fg_hash_scope_index}}){: .small} {{plugin.fg_hash_scope}}
+**hashed fg scope:**{: .keyword} [copy](copy-fg-hash-sel-scope:{{plugin.fg_hash_scope_index}}){: .small .button} {{plugin.fg_hash_scope}}
 
   {% endif %}
   {% if plugin.bg_name %}
-**bg name:**{: .keyword} {{plugin.bg_name}} [(copy)](copy-bg-sel-name:{{plugin.bg_name_index}}){: .small}
+**bg name:**{: .keyword} {{plugin.bg_name}} [copy](copy-bg-sel-name:{{plugin.bg_name_index}}){: .small .button}
 
   {% endif %}
-**bg scope:**{: .keyword} [(copy)](copy-bg-sel-scope:{{plugin.bg_scope_index}}){: .small} {{plugin.bg_scope}}
+**bg scope:**{: .keyword} [copy](copy-bg-sel-scope:{{plugin.bg_scope_index}}){: .small .button} {{plugin.bg_scope}}
 
   {% if plugin.bold %}
     {% if plugin.bold_name %}
-**bold name:**{: .keyword} {{plugin.bold_name}} [(copy)](copy-bold-sel-name:{{plugin.bold_name_index}}){: .small}
+**bold name:**{: .keyword} {{plugin.bold_name}} [copy](copy-bold-sel-name:{{plugin.bold_name_index}}){: .small .button}
 
     {% endif %}
-**bold scope:**{: .keyword} [(copy)](copy-bold-sel-scope:{{plugin.bold_scope_index}}){: .small} {{plugin.bold_scope}}
+**bold scope:**{: .keyword} [copy](copy-bold-sel-scope:{{plugin.bold_scope_index}}){: .small .button} {{plugin.bold_scope}}
 
   {% endif %}
   {% if plugin.italic %}
     {% if plugin.italic_name %}
-**italic name:**{: .keyword} {{plugin.italic_name}} [(copy)](copy-italic-sel-name:{{plugin.italic_name_index}}){: .small}
+**italic name:**{: .keyword} {{plugin.italic_name}} [copy](copy-italic-sel-name:{{plugin.italic_name_index}}){: .small .button}
 
     {% endif %}
-**italic scope:**{: .keyword} [(copy)](copy-italic-sel-scope:{{plugin.italic_scope_index}}){: .small} {{plugin.italic_scope}}
+**italic scope:**{: .keyword} [copy](copy-italic-sel-scope:{{plugin.italic_scope_index}}){: .small .button} {{plugin.italic_scope}}
 
   {% endif %}
   {% if plugin.underline %}
     {% if plugin.underline_name %}
-**underline name:**{: .keyword} {{plugin.underline_name}} [(copy)](copy-underline-sel-name:{{plugin.glow_underline_index}}){: .small}
+**underline name:**{: .keyword} {{plugin.underline_name}} [copy](copy-underline-sel-name:{{plugin.glow_underline_index}}){: .small .button}
 
     {% endif %}
-**underline scope:**{: .keyword} [(copy)](copy-underline-sel-scope:{{plugin.underline_scope_index}}){: .small} {{plugin.underline_scope}}
+**underline scope:**{: .keyword} [copy](copy-underline-sel-scope:{{plugin.underline_scope_index}}){: .small .button} {{plugin.underline_scope}}
 
   {% endif %}
   {% if plugin.glow %}
     {% if plugin.glow_name %}
-**glow name:**{: .keyword} {{plugin.glow_name}} [(copy)](copy-glow-sel-name:{{plugin.glow_name_index}}){: .small}
+**glow name:**{: .keyword} {{plugin.glow_name}} [copy](copy-glow-sel-name:{{plugin.glow_name_index}}){: .small .button}
 
     {% endif %}
-**glow scope:**{: .keyword} [(copy)](copy-glow-sel-scope:{{plugin.glow_scope_index}}){: .small} {{plugin.glow_scope}}
+**glow scope:**{: .keyword} [copy](copy-glow-sel-scope:{{plugin.glow_scope_index}}){: .small} {{plugin.glow_scope}}
 
   {% endif %}
 {% endif %}
 
 {% if plugin.files %}
 ### Files {: .header}
-**syntax:**{: .keyword} [{{plugin.syntax}}](syntax) [(copy)](copy-syntax:{{plugin.syntax_index}}){: .small}
+**syntax:**{: .keyword} [{{plugin.syntax}}](syntax) [copy](copy-syntax:{{plugin.syntax_index}}){: .small .button}
 
   {% if plugin.scheme %}
-**tmTheme:**{: .keyword} [{{plugin.scheme}}](scheme) [(copy)](copy-scheme:{{plugin.scheme_index}}){: .small}
+**tmTheme:**{: .keyword} [{{plugin.scheme}}](scheme) [copy](copy-scheme:{{plugin.scheme_index}}){: .small .button}
   {% endif %}
 
   {% for item in plugin.overrides %}
-**Scheme {{loop.index}}:**{: .keyword} [{{item}}](override:{{plugin.overrides_index}}:{{loop.index}}) [(copy)](copy-overrides:{{plugin.overrides_index}}:{{loop.index}}){: .small}
+**Scheme {{loop.index}}:**{: .keyword} [{{item}}](override:{{plugin.overrides_index}}:{{loop.index}}) [copy](copy-overrides:{{plugin.overrides_index}}:{{loop.index}}){: .small .button}
 
   {% endfor %}
 {% endif %}
diff --git a/scope_hunter.py b/scope_hunter.py
@@ -30,28 +30,44 @@
 
 ADD_CSS = dedent(
     '''
-    {%- if var.mdpopups_version >= (2, 0, 0) %}
+    html.light {
+      --sh-button-color: color(var(--mdpopups-bg) blend(black 85%));
+    }
+    html.dark {
+      --sh-button-color: color(var(--mdpopups-bg) blend(white 85%));
+    }
     div.scope-hunter { margin: 0; padding: 0.5rem; }
-    {%- else %}
-    div.scope-hunter { margin: 0; padding: 0; }
-    {%- endif %}
     .scope-hunter .small { font-size: 0.8rem; }
     .scope-hunter .header { {{'.string'|css('color')}} }
     ins { text-decoration: underline; }
     span.glow { background-color: color(var(--foreground) a(0.2)); }
+    div.color-helper { margin: 0; padding: 0rem; }
+    .scope-hunter a.button {
+        display: inline-block;
+        padding: 0.25rem;
+        color:  var(--foreground);
+        background-color: var(--sh-button-color);
+        border-radius: 0.25rem;
+        text-decoration: none;
+        font-style: none;
+        font-weight: normal;
+    }
+    .scope-hunter hr {
+        border-color: var(--sh-button-color);
+    }
     '''
 )
 
 COPY_ALL = '''
 ---
 
-[(copy all)](copy-all){: .small} [(reload scheme)](reload){: .small}
+[Copy All](copy-all){: .small .button} [Reload Scheme](reload){: .small .button}
 '''
 
 RELOAD = '''
 ---
 
-[(reload scheme)](reload){: .small}
+[Reload Scheme](reload){: .small .button}
 '''