Skip to content

[FEATURE] Customizing GTK Window Borders with CSS for Enhanced Window Decorations #296

Open
@wesleey

Description

@wesleey

I made a modification to the GTK window decorations by adding borders and customizing their appearance using CSS. The main changes include defining custom properties for the border width, color, and radius, which are applied to various types of windows. Here's a breakdown of the modifications:

/*********************
* Window Decorations *
*********************/
window {
  --wm-border-width: 3px;
  --wm-border-color: #6272a4;
  --wm-border-radius: 12px;
}
window.maximized {
  border: var(--wm-border-width) solid var(--wm-border-color);
  border-radius: var(--wm-border-radius);
}
window:not(.maximized) {
  border: none;
}
window.csd {
  margin: 0px;
  border-radius: var(--wm-border-radius);
  border: var(--wm-border-width) solid var(--wm-border-color);
}
window.csd.popup,
window.csd.dialog.message {
  border-radius: 12px;
  border: 4px solid var(--wm-border-color);
}
window.solid-csd {
  margin: 0;
  padding: 4px;
  border-radius: var(--wm-border-radius);
  border: 4px solid var(--wm-border-color);
}
window.popup,
window.ssd {
  border-radius: 12px;
  border: 4px solid var(--wm-border-color);
}

WhatsApp Image 2024-11-26 at 00 48 44

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions