LM21.1 with Win7 Aero Dark - custom min/max/close button sizes?

Style your desktop
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Post Reply
User avatar
JoanTheSpark
Level 1
Level 1
Posts: 30
Joined: Mon Jun 05, 2023 1:48 am

LM21.1 with Win7 Aero Dark - custom min/max/close button sizes?

Post by JoanTheSpark »

I'm switching over from Windows 7 Aero with a dark setting and naturally want to transfer as much of the look I've grown accustomed to - I'm not a big fan of the flat style that misses distinction between elements.

As base I use boomerang Windows 10 (v3.2.1) dark theme and the boomerang Windows 10 icon set, with some modifications to the cinnamon.css and gtk.css files to adjust it towards my liking.

My question is about the headerbar / titlebar buttons..
I seem to be unable to adjust their size independently (horizontally, adjustable via padding all together only), while their vertical position seems to be tied to 'middle' (influence-able via margin to a degree). Are there more direct controls available or is that it?

The part I'm working on in gtk.css in the gtk-3.20 folder:

Code: Select all

...
headerbar {
/* margin: top, right, bottom, left */
  margin: -1px -2px 0px -2px; /* makes gtk3-widget-factory work */
  padding: 0px 0px 0px 0px;
  min-height: 23px;
  color: #DDDDDD;  /* title text color */
  background-color: rgba(16, 16, 16, 1.0);
  border-top: 1px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 0px 0px 0px 0px; }
headerbar:backdrop {
  color: #888888;  /* title text color */
  background-color: rgba(16, 16, 16, 0.3); }
  
...

  headerbar .titlebutton.close, headerbar .titlebutton.maximize, headerbar .titlebutton.minimize, headerbar .titlebutton:not(separator) {
/* margin: top, right, bottom, left */
    margin: 0px 2px 3px -6px;                                              <<<<----
    padding: 0px 15px 2px 15px;                                           <<<<----
    background-image: url("assets/close-focused.svg");
    border: 0px;
    -gtk-icon-shadow: none;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none; }

  /* RED stuff */
  headerbar .titlebutton.close {
    background-color: rgba(180, 80, 50, 1.0);
    box-shadow: none; }
  headerbar .titlebutton.close:backdrop {
    background-color: rgba(50, 50, 50, 0.8);
    background-image: url("assets/close-unfocused.svg");
    box-shadow: none; }
...    
linux mint cinnamon 21.1 boomerang windows 10 dark theme
linux mint cinnamon 21.1 boomerang windows 10 dark theme
for reference:
windows 7 aero with dark settings
windows 7 aero with dark settings
User avatar
JoanTheSpark
Level 1
Level 1
Posts: 30
Joined: Mon Jun 05, 2023 1:48 am

Re: LM21.1 with Win7 Aero Dark - custom min/max/close button sizes?

Post by JoanTheSpark »

no reaction? Is it because of the Windows-theme or because nobody knows?

Maybe somebody knows where the headerbar titlebuttons are being invoked in the cinnamon code (c, py, js, etc.)?
I've been strolling through it, but can't make heads or tails of it (yet).

While poking around with the GTK Inspector I ran across a min-width field for the buttons, so I thought maybe that one is being applied PER button.. alas that is not the case either - at least for the cinnamon controlled windows:
Screenshot from 2024-01-15 20-48-49.jpg
As you can see, the gtk3-widget-factory (and the GTK Inspector, at least when called from/for the factory) shows it correctly.
:cry:

So yeah, where in the source does Mint/Cinnamon create/invoke the settings for the buttons of the windows please? :(
User avatar
igmint
Level 4
Level 4
Posts: 233
Joined: Fri Jan 10, 2020 1:52 pm

Re: LM21.1 with Win7 Aero Dark - custom min/max/close button sizes?

Post by igmint »

Once upon a time. I used to take some files from here https://www.deviantart.com/hundone/art/ ... d-81324382 https://www.deviantart.com/hundone/art/ ... k-80910159
and combined with the mint-x-dark theme. https://github.com/abnvanand/Mint-X-Dark or other
I still use it.
Below is the code from the metacity-theme-1.xml file

Code: Select all

<?xml version="1.0"?>
<metacity_theme>

	<info>
		<name>Shiftie</name>
		<author>lassekongo83</author>
		<copyright>http://creativecommons.org/licenses/by-nc-sa/3.0/</copyright>
		<date>February 26 2008</date>
		<description>Shiftie Metacity Theme</description>
	</info>

	
	<constant name="IconTitleSpacing" value="0"/>

	<frame_geometry name="normal" title_scale="medium"
		rounded_top_left="false" rounded_top_right="false" 
		rounded_bottom_left="false" rounded_bottom_right="false">
		<distance name="left_width" value="2"/>
		<distance name="right_width" value="2"/>
		<distance name="bottom_height" value="2"/>
		<distance name="left_titlebar_edge" value="1"/>
		<distance name="right_titlebar_edge" value="7"/>
		<distance name="button_width" value="23"/>
		<distance name="button_height" value="23"/>
		<distance name="title_vertical_pad" value="0"/>
		<border name="title_border" left="0" right="0" top="0" bottom="0"/>
		<border name="button_border" left="0" right="0" top="0" bottom="0"/>
	</frame_geometry>

	<frame_geometry name="border" parent="normal" has_title="false">
		<distance name="button_width" value="0"/>
		<distance name="button_height" value="24"/>
		<border name="title_border" left="0" right="0" top="0" bottom="0"/>
		<border name="button_border" left="0" right="0" top="0" bottom="0"/>
	</frame_geometry>

	<!--
		Title Text
	-->
	<draw_ops name="title-text-focused">
		<title color="#000E25" x="(width - title_width) / 2 +1" y="(height - title_height) / 2 + 1"/>
		<title color="#ffffff" x="(width - title_width) / 2" y="(height - title_height) / 2"/>
	</draw_ops>

	<draw_ops name="title-text-unfocused">
		<title color="#000E25" x="(width - title_width) / 2 +1" y="(height - title_height) / 2 + 1"/>
		<title color="#ffffff" x="(width - title_width) / 2" y="(height - title_height) / 2"/>
	</draw_ops>

	<draw_ops name="blank">
	</draw_ops>

	<!--
		Frame and Title bar
	-->
	<draw_ops name="titlebar">
		<image filename="frame/titlebar-left.png" x="0" y="0" width="object_width" height="height"/>
		<image filename="frame/titlebar-mid.png" x="10" y="0" width="width - 10" height="height"/>
		<image filename="frame/titlebar-right.png" x="width - object_width" y="0" width="object_width" height="height"/>
	</draw_ops>

	<draw_ops name="frame-left">
		<image filename="frame/left.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>

	<draw_ops name="frame-right">
		<image filename="frame/right.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>

	<draw_ops name="frame-bottom">
		<image filename="frame/bottom-left.png" x="0" y="0" width="3" height="object_height"/>
		<image filename="frame/bottom-mid.png" x="1" y="0" width="width - 3" height="object_height"/>
		<image filename="frame/bottom-right.png" x="width - object_width" y="0" width="object_width" height="object_height"/>
	</draw_ops>

	<!--
		Buttons
	-->
	<draw_ops name="button-close-focused">
		<image filename="buttons/close-focused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-close-unfocused">
		<image filename="buttons/close-unfocused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-close-pressed">
		<image filename="buttons/close-pressed.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>

	<draw_ops name="button-maximize-focused">
		<image filename="buttons/maximize-focused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-maximize-unfocused">
		<image filename="buttons/maximize-unfocused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-maximize-pressed">
		<image filename="buttons/maximize-pressed.png" x="0"  y="0" width="width" height="height"/>
	</draw_ops>

	<draw_ops name="button-minimize-focused">
		<image filename="buttons/minimize-focused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-minimize-unfocused">
		<image filename="buttons/minimize-unfocused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-minimize-pressed">
		<image filename="buttons/minimize-pressed.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>

	<draw_ops name="button-menu-focused">
		<image filename="buttons/menu-focused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-menu-unfocused">
		<image filename="buttons/menu-unfocused.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>
	<draw_ops name="button-menu-pressed">
		<image filename="buttons/menu-pressed.png" x="0" y="0" width="width" height="height"/>
	</draw_ops>


	<!--
		Main style defs.
	-->
	<frame_style name="normal" geometry="normal">
		<piece position="titlebar" draw_ops="titlebar"/>
		<piece position="left_edge" draw_ops="frame-left"/>
		<piece position="right_edge" draw_ops="frame-right"/>
		<piece position="bottom_edge" draw_ops="frame-bottom"/>

		<button function="close" state="normal" draw_ops="button-close-unfocused"/>
		<button function="close" state="prelight" draw_ops="button-close-focused"/>
		<button function="close" state="pressed" draw_ops="button-close-pressed"/>

		<button function="minimize" state="normal" draw_ops="button-minimize-unfocused"/>
		<button function="minimize" state="prelight" draw_ops="button-minimize-focused"/>
		<button function="minimize" state="pressed" draw_ops="button-minimize-pressed"/>

		<button function="maximize" state="normal" draw_ops="button-maximize-unfocused"/>
		<button function="maximize" state="prelight" draw_ops="button-maximize-focused"/>
		<button function="maximize" state="pressed" draw_ops="button-maximize-pressed"/>

		<button function="menu" state="normal" draw_ops="button-menu-unfocused"/>
		<button function="menu" state="prelight" draw_ops="button-menu-focused"/>
		<button function="menu" state="pressed" draw_ops="button-menu-pressed"/>
	</frame_style>

	<frame_style name="normal-focused" geometry="normal" parent="normal">
		<piece position="title" draw_ops="title-text-focused"/>
	</frame_style>

	<frame_style name="normal-unfocused" geometry="normal" parent="normal">
		<piece position="title" draw_ops="title-text-unfocused"/>
	</frame_style>

	<frame_style name="normal-shaded-focused" geometry="normal" parent="normal-focused">
		<piece position="titlebar" draw_ops="titlebar"/>
	</frame_style>

	<frame_style name="normal-shaded-unfocused" geometry="normal" parent="normal-unfocused">
		<piece position="titlebar" draw_ops="titlebar"/>
	</frame_style>


	<!--
		Style set
	-->
	<frame_style_set name="normal">
		<frame focus="no" state="normal" resize="both" style="normal-unfocused"/>
		<frame focus="no" state="maximized" style="normal-unfocused"/>
		<frame focus="no" state="shaded" style="normal-shaded-unfocused"/>
		<frame focus="no" state="maximized_and_shaded" style="normal-shaded-unfocused"/>

		<frame focus="yes" state="normal" resize="both" style="normal-focused"/>
		<frame focus="yes" state="maximized" style="normal-focused"/>
		<frame focus="yes" state="shaded" style="normal-shaded-focused"/>
		<frame focus="yes" state="maximized_and_shaded" style="normal-shaded-focused"/>
	</frame_style_set>

	<window type="normal" style_set="normal"/>
	<window type="dialog" style_set="normal"/>
	<window type="modal_dialog" style_set="normal"/>
	<window type="menu" style_set="normal"/>
	<window type="utility" style_set="normal"/>
	<window type="border" style_set="normal"/>

	<menu_icon function="close" state="normal" draw_ops="button-close-focused"/>
	<menu_icon function="maximize" state="normal" draw_ops="button-maximize-focused"/>
	<menu_icon function="unmaximize" state="normal" draw_ops="button-maximize-focused"/>
	<menu_icon function="minimize" state="normal" draw_ops="button-minimize-focused"/>

</metacity_theme>
2024.03.06.png
translated by googlemachine. UTC+3:00
Post Reply

Return to “Themes, Icons & Wallpaper”