Request: Include Example CSS File

[DerGrumpf]

Hello,

I'm not really familiar with GTK CSS and can't find any good resource.
Might it be possible if an example.css should be included with the repo to help noobies like me?

Thanks :)

[medanimohamedakram]

@DerGrumpf , this tip might help you
So whatever gtk theme you like ,browse the theme folder, something like this path <theme-folder>/gtk-4.0 and copy the file gtk.css and paste it in /etc/greetd then rename it regreet.css
run regreet --demo for testing and you should see that theme is applied

[natsukashiixo]

So far I've only found the class for the background of the main login box. This also controls the background for the clock widget though, so might not be what you want.
Doesn't control any of the input fields or buttons.
You can either do what @medanimohamedakram suggested and then put code like this at the top, or you can simply save this code as regreet.css in the appropriate location.

/*try regreet override*/
frame.background {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.2);
}

I would also like to see a complete .css example someday, hopefully having some place to start inspires more people to play around with it and one day someone will PR a complete example.

edit: found this old commit from a closed PR
It's more fully featured, probably better to use as a baseline for tinkering.

[medanimohamedakram]

I did some research on how to style any gtk app and found it to be way more easier than I thought, so when you open any gtk app you press Ctrl+Shift+D , that would open gtk inspector, that way you can see all the css nodes for the whole app, (knowing some basic css) you can experiment in the CSS Tab then save it as you like

I tried some styling and it went way more cool and appealing than expected
here a snapshot of what I did

This is regreet.css

Here:

@import "colors.css";
* {
  all: unset;
}

picture {
  filter: blur(1.2rem);
  /* background-image: url("/usr/share/wallpapers/a_tree_with_pink_flowers.png"); */
}

frame.background {
  background: alpha(@surface, .92);
  color: @on_surface;
  border-radius: 24px;
  box-shadow: 0 0 8px 0 alpha(@shadow, .92);
}

frame.background.top {
  font-size: 1.2rem;
  padding: 8px;
  background: @surface;
  border-radius: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

box.horizontal>button.default.suggested-action.text-button {
  background: @primary_container;
  color: @on_primary_container;
  padding: 12px;
  margin: 0 8px;
  border-radius: 12px;
  transition: background .3s ease-in-out;
}

box.horizontal>button.default.suggested-action.text-button:hover {
  background: shade(@primary_container, 1.2);
}

box.horizontal>button.text-button {
  background: @surface;
  color: @on_error_container;
  padding: 12px;
  border-radius: 12px;
  transition: background .3s ease-in-out;
}

box.horizontal>button.text-button:hover {
  background: @error;
  color: @on_error;
}

combobox {
  background: @surface_variant;
  color: @on_surface;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 0 4px 0 alpha(@shadow, .6);
}

combobox:disabled {
  background: @surface_dim;
  color: alpha(@on_surface_variant, .6);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 0 4px 0 alpha(@shadow, .6);
}

modelbutton.flat {
  background: @surface_variant;
  padding: 6px;
  margin: 2px;
  border-radius: 8px;
  border-spacing: 6px;
}

modelbutton.flat:hover {
  background: shade(@surface_variant, 1.2);
}

button.image-button.toggle {
  margin-right: 36px;
  padding: 12px;
  border-radius: 12px;
}

button.image-button.toggle:hover {
  background: @surface;
  box-shadow: 0 0 4px 0px alpha(@shadow, .6);
}

button.image-button.toggle:disabled {
  background: @surface_dim;
  color: alpha(@on_surface_variant, .6);
  margin-right: 36px;
  padding: 12px;
  border-radius: 12px;
}

combobox>popover {
  background: @surface_variant;
  color: @on_surface_variant;
  border-radius: 8px;
  border-spacing: 6px;
  box-shadow: 0 0 4px 0 alpha(@shadow, .6);
  padding: 6px 12px;
}

combobox>popover>contents {
  padding: 2px;
}

combobox:hover {
  background: shade(@surface_variant, 1.2);
}

entry.password {
  border: 2px solid @primary;
  border-radius: 12px;
  padding: 12px;
}

entry.password:hover {
  border: 2px solid @primary;
}

and I use matugen to generate the colors.css file

Here:

@define-color background #0e1416;
@define-color blue #aac7ff;
@define-color blue_container #284777;
@define-color blue_source #1c71d8;
@define-color blue_value #1c71d8;
@define-color brown #ffb77b;
@define-color brown_container #6b3a05;
@define-color brown_source #865e3c;
@define-color brown_value #865e3c;
@define-color dark #cfbdfe;
@define-color dark_container #4d3d75;
@define-color dark_source #241f31;
@define-color dark_value #241f31;
@define-color error #ffb4ab;
@define-color error_container #93000a;
@define-color green #92d5ab;
@define-color green_container #085231;
@define-color green_source #2ec27e;
@define-color green_value #2ec27e;
@define-color inverse_on_surface #2b3133;
@define-color inverse_primary #006877;
@define-color inverse_surface #dee3e5;
@define-color light #9ed49d;
@define-color light_container #1f5027;
@define-color light_source #c0bfbc;
@define-color light_value #c0bfbc;
@define-color on_background #dee3e5;
@define-color on_blue #0b305f;
@define-color on_blue_container #d7e3ff;
@define-color on_brown #4c2700;
@define-color on_brown_container #ffdcc2;
@define-color on_dark #36275d;
@define-color on_dark_container #e9ddff;
@define-color on_error #690005;
@define-color on_error_container #ffdad6;
@define-color on_green #003920;
@define-color on_green_container #aef2c6;
@define-color on_light #033912;
@define-color on_light_container #b9f0b8;
@define-color on_orange #542104;
@define-color on_orange_container #ffdbcb;
@define-color on_primary #00363f;
@define-color on_primary_container #a3eeff;
@define-color on_primary_fixed #001f25;
@define-color on_primary_fixed_variant #004e5a;
@define-color on_purple #452153;
@define-color on_purple_container #f9d8ff;
@define-color on_red #571d1c;
@define-color on_red_container #ffdad7;
@define-color on_secondary #1c3439;
@define-color on_secondary_container #cde7ed;
@define-color on_secondary_fixed #051f24;
@define-color on_secondary_fixed_variant #334a50;
@define-color on_surface #dee3e5;
@define-color on_surface_variant #bfc8cb;
@define-color on_tertiary #262f4d;
@define-color on_tertiary_container #dce1ff;
@define-color on_tertiary_fixed #111a37;
@define-color on_tertiary_fixed_variant #3d4665;
@define-color on_yellow #3d2e00;
@define-color on_yellow_container #ffdf90;
@define-color orange #ffb693;
@define-color orange_container #703717;
@define-color orange_source #e66100;
@define-color orange_value #e66100;
@define-color outline #899295;
@define-color outline_variant #3f484b;
@define-color primary #83d2e4;
@define-color primary_container #004e5a;
@define-color primary_fixed #a3eeff;
@define-color primary_fixed_dim #83d2e4;
@define-color purple #e5b6f2;
@define-color purple_container #5d386b;
@define-color purple_source #813d9c;
@define-color purple_value #813d9c;
@define-color red #ffb3ae;
@define-color red_container #733331;
@define-color red_source #c01c28;
@define-color red_value #c01c28;
@define-color scrim #000000;
@define-color secondary #b2cbd1;
@define-color secondary_container #334a50;
@define-color secondary_fixed #cde7ed;
@define-color secondary_fixed_dim #b2cbd1;
@define-color shadow #000000;
@define-color source_color #54696e;
@define-color surface #0e1416;
@define-color surface_bright #343a3c;
@define-color surface_container #1b2122;
@define-color surface_container_high #252b2c;
@define-color surface_container_highest #303637;
@define-color surface_container_low #171d1e;
@define-color surface_container_lowest #090f10;
@define-color surface_dim #0e1416;
@define-color surface_tint #83d2e4;
@define-color surface_variant #3f484b;
@define-color tertiary #bcc5eb;
@define-color tertiary_container #3d4665;
@define-color tertiary_fixed #dce1ff;
@define-color tertiary_fixed_dim #bcc5eb;
@define-color yellow #e4c36c;
@define-color yellow_container #584400;
@define-color yellow_source #f5c211;
@define-color yellow_value #f5c211;

the result: