Add some red and grey

2024-01-21 17:27:20 +10:30
parent eae7cdc204
commit 793523b0a7
8 changed files with 163 additions and 66 deletions
--- a/src/alsa-scarlett-gui.css
+++ b/src/alsa-scarlett-gui.css
@@ -1,52 +1,84 @@
-.window-content {
+/* Top-level window frame */
+.window-frame {
  background: black;
  color: white;
  padding: 15px;
+  border-radius: 0px;
+  border: none;
 }

-.routing-group {
-  background: #181818;
-  padding: 5px;
-  border: 1px solid #303030;
+/* Top-level window content */
+.window-content {
+  padding: 15px;
+  border: 2px solid #800000;
+  border-radius: 20px;
+}
+
+/* Label above controls-content */
+.controls-label {
+  font-size: smaller;
+  margin-top: -4px;
+}
+
+/* controls-content boxes */
+.controls-content {
+  background: #141414;
+  padding: 10px;
+  border: 1px solid #a00000;
  border-radius: 5px;
  color: #d0d0d0;
 }

+/* Tighten up routing groups and make the background a little lighter */
+.window-routing .controls-content {
+  background: #181818;
+  padding: 5px;
+}
+
+/* Used when the controls content is at the top level */
+.top-level-content {
+  background: #141414;
+}
+
 .route-label {
  font-size: smaller;
  border-radius: 3px;
 }

 .route-label:hover {
-  background: @theme_selected_bg_color;
-  outline: 2px solid @theme_selected_bg_color;
+  background: #801010;
+  outline: 2px solid #801010;
 }

 .route-label:drop(active) {
  box-shadow: none;
-  background: @theme_selected_bg_color;
+  background: #801010;
 }

 button {
  padding: 0px 5px 0px 5px;
-  border: 1px solid #181818;
-  background: linear-gradient(175deg, #101010, #181818);
+  border: 1px solid #303030;
+  background: linear-gradient(175deg, #202020, #282828);
  box-shadow: none;
  font-weight: bold;
  color: #808080;
 }

+button:focus:focus-visible {
+  outline-color: #801010;
+}
+
 button:checked {
  color: #ffffff;
-  border: 1px solid #202020;
+  border: 1px solid #404040;
 }

 button:hover {
-  background: #202020;
+  background: #303030;
 }

 button:disabled {
-  background: #000000;
+  background: #202020;
  color: #505050;
 }

@@ -142,3 +174,13 @@ button.direct-monitor.selected-stereo > label {
  color: #ffffff;
  text-shadow: 0 0 5px #00c000, 0 0 15px #00c000;
 }
+
+/* Bigger buttons in the startup window */
+.window-startup button {
+  padding: 5px;
+}
+
+/* Separators */
+.window-frame separator {
+  background: #800000;
+}
--- a/src/iface-mixer.c
+++ b/src/iface-mixer.c
@@ -172,14 +172,20 @@ static void add_talkback_controls(
 }

 static GtkWidget *create_global_box(GtkWidget *grid, int *x, int orient) {
-  GtkWidget *label = gtk_label_new("Global");
-  GtkWidget *sep = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
-  GtkWidget *controls = gtk_box_new(orient, 15);
-  gtk_widget_set_margin(controls, 10);
+  GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
+  gtk_widget_set_vexpand(box, TRUE);

-  gtk_grid_attach(GTK_GRID(grid), label, *x, 0, 1, 1);
-  gtk_grid_attach(GTK_GRID(grid), sep, *x, 1, 1, 1);
-  gtk_grid_attach(GTK_GRID(grid), controls, *x, 2, 1, 1);
+  GtkWidget *label = gtk_label_new("Global");
+  gtk_widget_add_css_class(label, "controls-label");
+  gtk_widget_set_halign(label, GTK_ALIGN_START);
+  GtkWidget *controls = gtk_box_new(orient, 15);
+  gtk_widget_add_css_class(controls, "controls-content");
+  gtk_widget_set_vexpand(controls, TRUE);
+
+  gtk_box_append(GTK_BOX(box), label);
+  gtk_box_append(GTK_BOX(box), controls);
+
+  gtk_grid_attach(GTK_GRID(grid), box, *x, 0, 1, 1);

  (*x)++;

@@ -194,6 +200,7 @@ static void create_input_link_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Link", NULL);
  gtk_widget_add_css_class(w, "input-link");
+  gtk_widget_set_hexpand(w, TRUE);

  int from, to;
  get_two_num_from_string(elem->name, &from, &to);
@@ -222,6 +229,7 @@ static void create_input_autogain_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Autogain", NULL);
  gtk_widget_add_css_class(w, "autogain");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(
    w,
    "Autogain will listen to the input signal for 10 seconds and "
@@ -251,6 +259,7 @@ static void create_input_safe_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Safe", NULL);
  gtk_widget_add_css_class(w, "safe");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(
    w,
    "Enabling Safe Mode prevents the input from clipping by "
@@ -268,6 +277,7 @@ static void create_input_level_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Inst", NULL);
  gtk_widget_add_css_class(w, "inst");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(w, level_descr);

  gtk_grid_attach(GTK_GRID(grid), w, column_num, current_row, 1, 1);
@@ -281,6 +291,7 @@ static void create_input_air_switch_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Air", NULL);
  gtk_widget_add_css_class(w, "air");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(w, air_descr);

  gtk_grid_attach(GTK_GRID(grid), w, column_num, current_row, 1, 1);
@@ -294,6 +305,7 @@ static void create_input_air_enum_control(
 ) {
  GtkWidget *w = make_drop_down_alsa_elem(elem, "Air");
  gtk_widget_add_css_class(w, "air");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(w, air_descr);

  gtk_grid_attach(GTK_GRID(grid), w, column_num, current_row, 1, 1);
@@ -307,6 +319,7 @@ static void create_input_pad_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "Pad", NULL);
  gtk_widget_add_css_class(w, "pad");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(
    w,
    "Enabling Pad engages a 10dB attenuator in the channel, giving "
@@ -324,6 +337,7 @@ static void create_input_phantom_control(
 ) {
  GtkWidget *w = make_boolean_alsa_elem(elem, "48V", NULL);
  gtk_widget_add_css_class(w, "phantom");
+  gtk_widget_set_hexpand(w, TRUE);
  gtk_widget_set_tooltip_text(w, phantom_descr);

  int from, to;
@@ -385,19 +399,22 @@ static void create_input_controls(
  struct alsa_elem *input_select_elem =
    get_elem_by_name(elems, "Input Select Capture Enum");

-  GtkWidget *sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
-  gtk_widget_set_halign(sep, GTK_ALIGN_CENTER);
-  gtk_grid_attach(GTK_GRID(top), sep, (*x)++, 0, 1, 3);
+  GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);

  GtkWidget *label_ic = gtk_label_new("Analogue Inputs");
-  gtk_grid_attach(GTK_GRID(top), label_ic, *x, 0, 1, 1);
-
-  GtkWidget *horiz_input_sep = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
-  gtk_grid_attach(GTK_GRID(top), horiz_input_sep, *x, 1, 1, 1);
+  gtk_widget_add_css_class(label_ic, "controls-label");
+  gtk_widget_set_halign(label_ic, GTK_ALIGN_START);
+  gtk_box_append(GTK_BOX(box), label_ic);

  GtkWidget *input_grid = gtk_grid_new();
+  gtk_widget_add_css_class(input_grid, "controls-content");
  gtk_grid_set_spacing(GTK_GRID(input_grid), 10);
-  gtk_grid_attach(GTK_GRID(top), input_grid, *x, 2, 1, 1);
+  gtk_widget_set_hexpand(input_grid, TRUE);
+  gtk_widget_set_halign(input_grid, GTK_ALIGN_FILL);
+  gtk_widget_set_vexpand(input_grid, TRUE);
+  gtk_box_append(GTK_BOX(box), input_grid);
+
+  gtk_grid_attach(GTK_GRID(top), box, *x, 0, 1, 1);

  for (int i = 1; i <= input_count; i++) {
    GtkWidget *label;
@@ -466,21 +483,21 @@ static void create_output_controls(
 ) {
  GArray *elems = card->elems;

-  if (*x) {
-    GtkWidget *sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
-    gtk_grid_attach(GTK_GRID(top), sep, (*x)++, y, x_span, 3);
-  }
+  GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);

  GtkWidget *label_oc = gtk_label_new("Analogue Outputs");
-  gtk_grid_attach(GTK_GRID(top), label_oc, *x, y, x_span, 1);
-
-  GtkWidget *horiz_output_sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
-  gtk_grid_attach(GTK_GRID(top), horiz_output_sep, *x, y + 1, x_span, 1);
+  gtk_widget_add_css_class(label_oc, "controls-label");
+  gtk_widget_set_halign(label_oc, GTK_ALIGN_START);
+  gtk_box_append(GTK_BOX(box), label_oc);

  GtkWidget *output_grid = gtk_grid_new();
+  gtk_widget_add_css_class(output_grid, "controls-content");
  gtk_grid_set_spacing(GTK_GRID(output_grid), 10);
-  gtk_grid_attach(GTK_GRID(top), output_grid, *x, y + 2, x_span, 1);
  gtk_widget_set_hexpand(output_grid, TRUE);
+  gtk_widget_set_vexpand(output_grid, TRUE);
+  gtk_box_append(GTK_BOX(box), output_grid);
+
+  gtk_grid_attach(GTK_GRID(top), box, *x, y, x_span, 1);

  int output_count = get_max_elem_by_name(elems, "Line", "Playback Volume");

@@ -675,7 +692,7 @@ static GtkWidget *create_main_window_controls(struct alsa_card *card) {
    gtk_widget_add_css_class(top, "clarett");
  }

-  gtk_grid_set_spacing(GTK_GRID(top), 10);
+  gtk_grid_set_spacing(GTK_GRID(top), 15);

  int input_count = get_max_elem_by_name(
    card->elems, "Line", "Capture Switch"
@@ -689,10 +706,7 @@ static GtkWidget *create_main_window_controls(struct alsa_card *card) {

  if (input_count + output_count >= 12) {
    x = 0;
-    GtkWidget *sep = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
-    gtk_grid_attach(GTK_GRID(top), sep, 0, 3, 3, 1);
-
-    create_output_controls(card, top, &x, 4, 3);
+    create_output_controls(card, top, &x, 1, 2);
  } else {
    create_output_controls(card, top, &x, 0, 1);
  }
@@ -755,7 +769,10 @@ GtkWidget *create_iface_mixer_main(struct alsa_card *card) {
  card->has_talkback =
    !!get_elem_by_name(card->elems, "Talkback Playback Enum");

-  GtkWidget *top = create_main_window_controls(card);
+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+  GtkWidget *contents = create_main_window_controls(card);
+  gtk_frame_set_child(GTK_FRAME(top), contents);

  GtkWidget *routing_top = create_routing_controls(card);
  if (!routing_top)
--- a/src/iface-no-mixer.c
+++ b/src/iface-no-mixer.c
@@ -13,32 +13,42 @@
 GtkWidget *create_iface_no_mixer_main(struct alsa_card *card) {
  GArray *elems = card->elems;

-  GtkWidget *grid = gtk_grid_new();
-  gtk_widget_add_css_class(grid, "window-content");
-  gtk_widget_add_css_class(grid, "iface-no-mixer");
-  gtk_grid_set_spacing(GTK_GRID(grid), 10);
+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+
+  GtkWidget *content = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 15);
+  gtk_widget_add_css_class(content, "window-content");
+  gtk_widget_add_css_class(content, "iface-no-mixer");
+  gtk_frame_set_child(GTK_FRAME(top), content);
+
+  GtkWidget *input_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
+  GtkWidget *output_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
+  gtk_box_append(GTK_BOX(content), input_box);
+  gtk_box_append(GTK_BOX(content), output_box);

  GtkWidget *label_ic = gtk_label_new("Input Controls");
-  GtkWidget *vert_sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
  GtkWidget *label_oc = gtk_label_new("Output Controls");

-  gtk_grid_attach(GTK_GRID(grid), label_ic, 0, 0, 1, 1);
-  gtk_grid_attach(GTK_GRID(grid), vert_sep, 1, 0, 1, 3);
-  gtk_grid_attach(GTK_GRID(grid), label_oc, 2, 0, 1, 1);
+  gtk_widget_add_css_class(label_ic, "controls-label");
+  gtk_widget_add_css_class(label_oc, "controls-label");

-  GtkWidget *horiz_input_sep = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
-  gtk_grid_attach(GTK_GRID(grid), horiz_input_sep, 0, 1, 1, 1);
+  gtk_widget_set_halign(label_ic, GTK_ALIGN_START);
+  gtk_widget_set_halign(label_oc, GTK_ALIGN_START);
+
+  gtk_box_append(GTK_BOX(input_box), label_ic);
+  gtk_box_append(GTK_BOX(output_box), label_oc);

  GtkWidget *input_grid = gtk_grid_new();
  gtk_grid_set_spacing(GTK_GRID(input_grid), 10);
-  gtk_grid_attach(GTK_GRID(grid), input_grid, 0, 2, 1, 1);
-
-  GtkWidget *horiz_output_sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
-  gtk_grid_attach(GTK_GRID(grid), horiz_output_sep, 2, 1, 1, 1);
+  gtk_widget_add_css_class(input_grid, "controls-content");
+  gtk_widget_set_vexpand(input_grid, TRUE);
+  gtk_box_append(GTK_BOX(input_box), input_grid);

  GtkWidget *output_grid = gtk_grid_new();
  gtk_grid_set_spacing(GTK_GRID(output_grid), 10);
-  gtk_grid_attach(GTK_GRID(grid), output_grid, 2, 2, 1, 1);
+  gtk_widget_add_css_class(output_grid, "controls-content");
+  gtk_widget_set_vexpand(output_grid, TRUE);
+  gtk_box_append(GTK_BOX(output_box), output_grid);

  // Solo or 2i2?
  // Solo Phantom Power is Line 1 only
@@ -114,5 +124,5 @@ GtkWidget *create_iface_no_mixer_main(struct alsa_card *card) {
  GtkWidget *startup = create_startup_controls(card);
  gtk_window_set_child(GTK_WINDOW(card->window_startup), startup);

-  return grid;
+  return top;
 }
--- a/src/widget-gain.c
+++ b/src/widget-gain.c
@@ -66,6 +66,8 @@ GtkWidget *make_gain_alsa_elem(
  data->elem = elem;
  data->vbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
  gtk_widget_set_hexpand(data->vbox, TRUE);
+  gtk_widget_set_valign(data->vbox, GTK_ALIGN_START);
+  gtk_widget_set_vexpand(data->vbox, TRUE);

  data->scale = (float)(elem->max_dB - elem->min_dB) /
                       (elem->max_val - elem->min_val);
--- a/src/window-levels.c
+++ b/src/window-levels.c
@@ -64,9 +64,14 @@ static struct alsa_elem *get_level_meter_elem(struct alsa_card *card) {
 }

 GtkWidget *create_levels_controls(struct alsa_card *card) {
+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+
  GtkWidget *levels_top = gtk_grid_new();
  gtk_widget_add_css_class(levels_top, "window-content");
+  gtk_widget_add_css_class(levels_top, "top-level-content");
  gtk_widget_add_css_class(levels_top, "window-levels");
+  gtk_frame_set_child(GTK_FRAME(top), levels_top);

  GtkGrid *grid = GTK_GRID(levels_top);

@@ -113,5 +118,5 @@ GtkWidget *create_levels_controls(struct alsa_card *card) {

  card->meter_gsource_timer = g_timeout_add(50, update_levels_controls, card);

-  return levels_top;
+  return top;
 }
--- a/src/window-mixer.c
+++ b/src/window-mixer.c
@@ -25,9 +25,14 @@ static struct routing_snk *get_mixer_r_snk(
 }

 GtkWidget *create_mixer_controls(struct alsa_card *card) {
+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+
  GtkWidget *mixer_top = gtk_grid_new();
  gtk_widget_add_css_class(mixer_top, "window-content");
+  gtk_widget_add_css_class(mixer_top, "top-level-content");
  gtk_widget_add_css_class(mixer_top, "window-mixer");
+  gtk_frame_set_child(GTK_FRAME(top), mixer_top);

  gtk_widget_set_halign(mixer_top, GTK_ALIGN_CENTER);
  gtk_widget_set_valign(mixer_top, GTK_ALIGN_CENTER);
@@ -109,7 +114,7 @@ GtkWidget *create_mixer_controls(struct alsa_card *card) {

  update_mixer_labels(card);

-  return mixer_top;
+  return top;
 }

 void update_mixer_labels(struct alsa_card *card) {
--- a/src/window-routing.c
+++ b/src/window-routing.c
@@ -262,7 +262,7 @@ static GtkWidget *create_routing_group_grid(
 ) {
  GtkWidget *grid = gtk_grid_new();
  gtk_widget_set_name(grid, name);
-  gtk_widget_add_css_class(grid, "routing-group");
+  gtk_widget_add_css_class(grid, "controls-content");

  gtk_grid_set_spacing(GTK_GRID(grid), 2);

@@ -368,7 +368,6 @@ static void create_routing_grid(struct alsa_card *card) {
  gtk_grid_attach(
    routing_grid, card->routing_mixer_out_grid, mix_col_num, 3, 1, 1
  );
-  gtk_widget_set_margin(card->routing_grid, 10);
  gtk_grid_set_spacing(routing_grid, 10);

  GtkWidget *src_label = gtk_label_new("↑\nSources →");
@@ -973,9 +972,14 @@ GtkWidget *create_routing_controls(struct alsa_card *card) {

  create_routing_grid(card);

+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+  gtk_widget_add_css_class(top, "window-routing");
+
  GtkWidget *routing_overlay = gtk_overlay_new();
  gtk_widget_add_css_class(routing_overlay, "window-content");
  gtk_widget_add_css_class(routing_overlay, "window-routing");
+  gtk_frame_set_child(GTK_FRAME(top), routing_overlay);

  gtk_overlay_set_child(GTK_OVERLAY(routing_overlay), card->routing_grid);

@@ -983,5 +987,5 @@ GtkWidget *create_routing_controls(struct alsa_card *card) {

  add_drop_controller_motion(card, routing_overlay);

-  return routing_overlay;
+  return top;
 }
--- a/src/window-startup.c
+++ b/src/window-startup.c
@@ -33,7 +33,10 @@ static void add_sep(GtkWidget *grid, int *grid_y) {
    return;

  GtkWidget *sep = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
-  gtk_widget_set_margin(sep, 20);
+  gtk_widget_set_margin_top(sep, 10);
+  gtk_widget_set_margin_bottom(sep, 10);
+  gtk_widget_set_margin_start(sep, 20);
+  gtk_widget_set_margin_end(sep, 20);
  gtk_grid_attach(GTK_GRID(grid), sep, 0, (*grid_y)++, 3, 1);
 }

@@ -55,6 +58,7 @@ static void add_standalone_control(
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y, 1, 1);

  w = make_boolean_alsa_elem(standalone, "Disabled", "Enabled");
+  gtk_widget_set_valign(w, GTK_ALIGN_START);
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y + 1, 1, 1);

  w = big_label(
@@ -90,6 +94,7 @@ static void add_phantom_persistence_control(
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y, 1, 1);

  w = make_boolean_alsa_elem(phantom, "Disabled", "Enabled");
+  gtk_widget_set_valign(w, GTK_ALIGN_START);
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y + 1, 1, 1);

  w = big_label(
@@ -124,6 +129,7 @@ static void add_msd_control(
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y, 1, 1);

  w = make_boolean_alsa_elem(msd, "Disabled", "Enabled");
+  gtk_widget_set_valign(w, GTK_ALIGN_START);
  gtk_grid_attach(GTK_GRID(grid), w, 0, *grid_y + 1, 1, 1);

  w = big_label(
@@ -151,12 +157,18 @@ static void add_no_startup_controls_msg(GtkWidget *grid) {
 GtkWidget *create_startup_controls(struct alsa_card *card) {
  GArray *elems = card->elems;

+  GtkWidget *top = gtk_frame_new(NULL);
+  gtk_widget_add_css_class(top, "window-frame");
+
  int grid_y = 0;

  GtkWidget *grid = gtk_grid_new();
  gtk_widget_add_css_class(grid, "window-content");
+  gtk_widget_add_css_class(grid, "top-level-content");
  gtk_widget_add_css_class(grid, "window-startup");
  gtk_grid_set_column_spacing(GTK_GRID(grid), 20);
+  gtk_grid_set_row_spacing(GTK_GRID(grid), 10);
+  gtk_frame_set_child(GTK_FRAME(top), grid);

  add_standalone_control(elems, grid, &grid_y);
  add_phantom_persistence_control(elems, grid, &grid_y);
@@ -165,5 +177,5 @@ GtkWidget *create_startup_controls(struct alsa_card *card) {
  if (!grid_y)
    add_no_startup_controls_msg(grid);

-  return grid;
+  return top;
 }