[gnome-calculator/wip/exalm/styles: 2/2] ui: Fix styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit 617a9b60532b6a04e931073e0f1833a35e9fb263
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Feb 14 00:30:18 2022 +0500

    ui: Fix styles
    
    - Use .card, make sure its colors are actually used
    - Fix math display and history not being joined
    - Make history look properly with dark style
    - Fix margins in keyboard mode
    - Remove backdrop styles
    - Stop using groove style borders
    - Fix border on the history first item
    - Remove a few redundant styles

 src/math-window.vala                  | 21 ++++++-----
 src/ui/buttons-programming.ui         |  2 +-
 src/ui/gnome-calculator.gresource.xml |  1 +
 src/ui/style-dark.css                 |  3 ++
 src/ui/style.css                      | 70 ++++++++++++++++-------------------
 5 files changed, 49 insertions(+), 48 deletions(-)
---
diff --git a/src/math-window.vala b/src/math-window.vala
index 4df796dd..5869e1e7 100644
--- a/src/math-window.vala
+++ b/src/math-window.vala
@@ -62,32 +62,35 @@ public class MathWindow : Adw.ApplicationWindow
         (this as Gtk.Widget).add_controller (event_controller);
         event_controller.key_pressed.connect (key_press_cb);
 
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.overflow = HIDDEN;
+        box.add_css_class ("display-container");
+        box.add_css_class ("card");
+        grid.attach (box, 0, 1, 1, 1);
+
         _display = new MathDisplay (equation);
-        grid.attach (_display, 0, 2, 1, 1);
         _display.show ();
         _display.grabfocus ();
 
+        _display.equation.display_changed.connect (history.set_serializer);
+        _display.equation.history_signal.connect (this.update_history);
+
         history = new HistoryView ();
         history.answer_clicked.connect ((ans) => { _display.insert_text (ans); });
         history.equation_clicked.connect ((eq) => { _display.display_text (eq); });
         history.set_serializer (_display.equation.serializer);
-        grid.attach (history, 0, 1, 1, 1);
 
-        _display.equation.display_changed.connect (history.set_serializer);
-        _display.equation.history_signal.connect (this.update_history);
+        box.append (history);
+        box.append (_display);
 
         _buttons = new MathButtons (equation, this);
-        grid.attach_next_to(_buttons, _display, Gtk.PositionType.BOTTOM);
+        grid.attach_next_to(_buttons, box, Gtk.PositionType.BOTTOM);
 
         remove_buttons = (_buttons.mode != ButtonMode.KEYBOARD) ? true : false;
 
         _buttons.notify["mode"].connect (mode_changed_cb);
         mode_changed_cb ();
 
-        var provider = new Gtk.CssProvider ();
-        provider.load_from_resource ("/org/gnome/calculator/calculator.css");
-        Gtk.StyleContext.add_provider_for_display (display, provider, 
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-
         if (DEVELOPMENT_BUILD) {
             add_css_class ("devel");
         }
diff --git a/src/ui/buttons-programming.ui b/src/ui/buttons-programming.ui
index 1e75ea3a..29f28c9a 100644
--- a/src/ui/buttons-programming.ui
+++ b/src/ui/buttons-programming.ui
@@ -54,7 +54,7 @@
         <property name="orientation">vertical</property>
         <style>
           <class name="bit-panel"/>
-          <class name="view"/>
+          <class name="card"/>
         </style>
         <child>
           <object class="GtkGrid" id="bit_table">
diff --git a/src/ui/gnome-calculator.gresource.xml b/src/ui/gnome-calculator.gresource.xml
index fbc8a850..d4ca6d0b 100644
--- a/src/ui/gnome-calculator.gresource.xml
+++ b/src/ui/gnome-calculator.gresource.xml
@@ -14,5 +14,6 @@
     <file preprocess="xml-stripblanks">math-shortcuts.ui</file>
     <file preprocess="xml-stripblanks">math-preferences.ui</file>
     <file>style.css</file>
+    <file>style-dark.css</file>
   </gresource>
 </gresources>
diff --git a/src/ui/style-dark.css b/src/ui/style-dark.css
new file mode 100644
index 00000000..95d20e96
--- /dev/null
+++ b/src/ui/style-dark.css
@@ -0,0 +1,3 @@
+.history-view {
+  background-color: alpha(white, .05);
+}
diff --git a/src/ui/style.css b/src/ui/style.css
index e3edeec0..5fd079e5 100644
--- a/src/ui/style.css
+++ b/src/ui/style.css
@@ -15,25 +15,19 @@
   padding: 0px 12px;
 }
 
-mathdisplay {
-  border: solid @borders 1px;
-  border-top-width: 0px;
+.display-container {
   margin: 6px 12px 0 12px;
   transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-mathdisplay:last-child {
-  margin-bottom: 12px;
-}
-
-clamp > grid.small mathdisplay {
-  border-width: 1px 0;
-  border-top-width: 0px;
-  margin: 6px 0 0 0;
+clamp > grid.small .display-container {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
 }
 
-clamp > grid.small mathdisplay:last-child {
-  border-bottom-width: 0;
+.display-container:last-child {
+  margin-bottom: 12px;
 }
 
 clamp > grid > :first-child {
@@ -45,6 +39,10 @@ clamp > grid.small > :first-child {
   margin-top: 0;
 }
 
+clamp > grid.small > .display-container:last-child {
+  margin-bottom: 0;
+}
+
 .math-buttons > grid {
   /* 5 44px high buttons and 4px spacing. */
   min-height: calc(44px * 5 + 4px * 4);
@@ -82,14 +80,11 @@ mathconverter > squeezer:not(:first-child) > :first-child {
 
 .bit-panel {
   padding: 6px;
-  border: solid @borders 1px;
-  border-width: 1px 0;
   transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   margin: 6px 0 0 0;
 }
 
 clamp > :not(.small) .bit-panel {
-  border-width: 1px;
   margin: 6px 12px 0 12px;
 }
 
@@ -97,6 +92,7 @@ clamp  > .small .bit-panel {
   padding-top:4px;
   padding-bottom: 4px;
   font-size: 0.9em;
+  border-radius: 0;
 }
 
 clamp > .small .bit-panel button {
@@ -133,44 +129,36 @@ clamp > grid.small > widget > .history-view {
 }
 
 .history-view {
-  border: solid @borders 1px;
-  border-top-width: 0px;
-  margin: 0px 12px 0 12px;
-  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.history-view, .history-entry {
-  background-color: shade(@theme_base_color, .95);
+  background-color: shade(@card_bg_color, .95);
+  color: inherit;
 }
 
-.history-view:backdrop, .history-entry:backdrop {
-  background-color: shade(@theme_unfocused_base_color, .97);
+.history-view list {
+  background: none;
+  color: inherit;
 }
 
 .history-entry {
-  border-top: 1px groove @borders;
+  border-top: 1px solid @borders;
   padding: 6px 3px;
   font-size: 1.3em;
 }
 
-.history-entry :first-child{
+.history-entry:first-child {
   border-top-width: 0px;
 }
 
-  .history-entry .equation-label {
-    /* word-spacing: 2px; Doesn't work (yet) in GTK */
-  }
-
-  .history-entry .equation-symbol {
-    font-weight: lighter;
-  }
+.history-entry .equation-label {
+  /* word-spacing: 2px; Doesn't work (yet) in GTK */
+}
 
-  .history-entry .answer-label {
-  }
+.history-entry .equation-symbol {
+  font-weight: lighter;
+}
 
 /* Used for MathVariablePopover */
 row.popover-row {
-  border-bottom: 1px groove @borders;
+  border-bottom: 1px solid @borders;
   min-height: 35px;
 }
 
@@ -181,3 +169,9 @@ window > leaflet > * {
 .italic {
   font-style: italic;
 }
+
+mathdisplay textview,
+mathdisplay textview text {
+  background: none;
+  color: inherit;
+}