Initial support for GTK4, still with lots of bugs and lacking some elements. Added common CSS at the root to make it easy to change theme's colors
This commit is contained in:
parent
bb191f9a57
commit
d1d9aa44ad
|
|
@ -1,48 +1,51 @@
|
|||
/* GTK NAMED COLORS
|
||||
----------------
|
||||
use responsibly! */
|
||||
|
||||
|
||||
@import "../theme_colors.css";
|
||||
/*
|
||||
widget text/foreground color */
|
||||
@define-color theme_fg_color_breeze #EDF0F5;
|
||||
@define-color theme_fg_color_breeze @window_fg;
|
||||
/*
|
||||
text color for entries, views and content in general */
|
||||
@define-color theme_text_color_breeze shade (@theme_fg_color_breeze, 1.15);
|
||||
@define-color theme_text_color_breeze @text_widget_fg; /*shade (@theme_fg_color_breeze, 1.15);*/
|
||||
/*
|
||||
widget base background color */
|
||||
@define-color theme_bg_color_breeze #3f3e3e;
|
||||
window background color */
|
||||
@define-color theme_bg_color_breeze @window_bg;
|
||||
/*
|
||||
text widgets and the like base background color */
|
||||
@define-color theme_base_color_breeze shade(@theme_bg_color_breeze, 0.8);
|
||||
@define-color theme_base_color_breeze @text_widget_bg;
|
||||
|
||||
@define-color theme_disabled_fg_color alpha(@theme_fg_color_breeze, 0.5);
|
||||
@define-color theme_disabled_fg_color @disabled_fg; /*alpha(@theme_fg_color_breeze, 0.5);*/
|
||||
|
||||
/*
|
||||
* button background color*/
|
||||
@define-color theme_button_background_normal_breeze #4F6665;
|
||||
* button color, sorry for the mess*/
|
||||
@define-color theme_button_background_normal_breeze @button_bg;
|
||||
@define-color button_bg_color @theme_button_background_normal_breeze;
|
||||
|
||||
@define-color theme_button_foreground_normal_breeze @theme_fg_color_breeze;
|
||||
@define-color theme_button_foreground_normal_breeze @button_fg;
|
||||
@define-color button_fg_color @theme_button_foreground_normal_breeze;
|
||||
|
||||
/*
|
||||
base background color of selections */
|
||||
@define-color theme_selected_bg_color_breeze #669900; /*#7BBD89*/
|
||||
@define-color theme_selected_bg_color_breeze @selected_bg; /*#7BBD89*/
|
||||
/*
|
||||
second color, on scales... */
|
||||
@define-color secondary_selected_bg_color shade(@theme_selected_bg_color_breeze, 1.7);
|
||||
/*
|
||||
text/foreground color of selections */
|
||||
@define-color theme_selected_fg_color_breeze #d1ff96; /*#ffffff*/
|
||||
@define-color theme_selected_fg_color_breeze @selected_fg; /*#ffffff*/
|
||||
/*
|
||||
base background color of insensitive widgets */
|
||||
@define-color insensitive_bg_color_breeze shade (@theme_bg_color_breeze, 0.95);
|
||||
@define-color insensitive_bg_color_breeze @disabled_bg; /*shade(@theme_bg_color_breeze, 0.95);*/
|
||||
/*
|
||||
text foreground color of insensitive widgets */
|
||||
@define-color insensitive_fg_color_breeze shade (@theme_fg_color_breeze, 1.1);
|
||||
@define-color insensitive_fg_color_breeze @disabled_fg; /*shade(@theme_fg_color_breeze, 1.1);*/
|
||||
@define-color theme_disabled_fg_color @insensitive_fg_color_breeze;
|
||||
/*
|
||||
insensitive text widgets and the like base background color */
|
||||
@define-color insensitive_base_color_breeze @theme_base_color_breeze;
|
||||
@define-color insensitive_base_color_breeze @disabled_bg; /*@theme_base_color_breeze;*/
|
||||
/*
|
||||
widget text/foreground color on backdrop windows */
|
||||
@define-color theme_unfocused_fg_color_breeze @theme_fg_color_breeze;
|
||||
|
|
@ -77,19 +80,19 @@ widgets main borders color */
|
|||
|
||||
/*
|
||||
widgets main borders color on backdrop windows */
|
||||
@define-color unfocused_borders shade (@borders, 1.05);
|
||||
@define-color unfocused_borders @borders; /*shade(@borders, 1.05);*/
|
||||
|
||||
/*
|
||||
these are pretty self explicative */
|
||||
@define-color warning_color_breeze #f57900;
|
||||
@define-color error_color_breeze #990000;
|
||||
@define-color success_color_breeze #73d216;
|
||||
@define-color warning_color_breeze @warning_color;
|
||||
@define-color error_color_breeze @error_color;
|
||||
@define-color success_color_breeze @success_color;
|
||||
|
||||
/*Window headers*/
|
||||
@define-color theme_titlebar_background_breeze mix(@theme_selected_bg_color_breeze, @theme_bg_color_breeze, 0.5);
|
||||
@define-color theme_titlebar_background_backdrop_breeze @theme_bg_color_breeze;
|
||||
@define-color theme_titlebar_foreground_breeze @theme_selected_fg_color_breeze;
|
||||
@define-color theme_titlebar_foreground_backdrop_breeze @theme_fg_color_breeze;
|
||||
@define-color theme_titlebar_background_breeze @titlebar_active_bg; /*mix(@theme_selected_bg_color_breeze, @theme_bg_color_breeze, 0.5);*/
|
||||
@define-color theme_titlebar_background_backdrop_breeze @titlebar_backdrop_bg; /*@theme_bg_color_breeze;*/
|
||||
@define-color theme_titlebar_foreground_breeze @titlebar_active_fg; /*@theme_selected_fg_color_breeze;*/
|
||||
@define-color theme_titlebar_foreground_backdrop_breeze @titlebar_backdrop_fg; /*@theme_fg_color_breeze;*/
|
||||
|
||||
|
||||
/* scale slider colors*/
|
||||
|
|
|
|||
133
gtk-4.0/gtk.css
133
gtk-4.0/gtk.css
|
|
@ -1,48 +1,51 @@
|
|||
/* GTK NAMED COLORS
|
||||
----------------
|
||||
use responsibly! */
|
||||
|
||||
|
||||
@import "../theme_colors.css";
|
||||
/*
|
||||
widget text/foreground color */
|
||||
@define-color theme_fg_color_breeze #EDF0F5;
|
||||
@define-color theme_fg_color_breeze @window_fg;
|
||||
/*
|
||||
text color for entries, views and content in general */
|
||||
@define-color theme_text_color_breeze shade(@theme_fg_color_breeze, 1.15);
|
||||
@define-color theme_text_color_breeze @text_widget_fg; /*shade (@theme_fg_color_breeze, 1.15);*/
|
||||
/*
|
||||
widget base background color */
|
||||
@define-color theme_bg_color_breeze #3f3e3e;
|
||||
window background color */
|
||||
@define-color theme_bg_color_breeze @window_bg;
|
||||
/*
|
||||
text widgets and the like base background color */
|
||||
@define-color theme_base_color_breeze shade(@theme_bg_color_breeze, 0.8);
|
||||
@define-color theme_base_color_breeze @text_widget_bg;
|
||||
|
||||
@define-color theme_disabled_fg_color alpha(@theme_fg_color_breeze, 0.5);
|
||||
@define-color theme_disabled_fg_color @disabled_fg; /*alpha(@theme_fg_color_breeze, 0.5);*/
|
||||
|
||||
/*
|
||||
* button background color*/
|
||||
@define-color theme_button_background_normal_breeze #4F6665;
|
||||
* button color, sorry for the mess*/
|
||||
@define-color theme_button_background_normal_breeze @button_bg;
|
||||
@define-color button_bg_color @theme_button_background_normal_breeze;
|
||||
|
||||
@define-color theme_button_foreground_normal_breeze @theme_fg_color_breeze;
|
||||
@define-color theme_button_foreground_normal_breeze @button_fg;
|
||||
@define-color button_fg_color @theme_button_foreground_normal_breeze;
|
||||
|
||||
/*
|
||||
base background color of selections */
|
||||
@define-color theme_selected_bg_color_breeze #669900; /*#7BBD89*/
|
||||
@define-color theme_selected_bg_color_breeze @selected_bg; /*#7BBD89*/
|
||||
/*
|
||||
second color, on scales... */
|
||||
@define-color secondary_selected_bg_color shade(@theme_selected_bg_color_breeze, 1.7);
|
||||
/*
|
||||
text/foreground color of selections */
|
||||
@define-color theme_selected_fg_color_breeze #d1ff96; /*#ffffff*/
|
||||
@define-color theme_selected_fg_color_breeze @selected_fg; /*#ffffff*/
|
||||
/*
|
||||
base background color of insensitive widgets */
|
||||
@define-color insensitive_bg_color_breeze shade(@theme_bg_color_breeze, 0.95);
|
||||
@define-color insensitive_bg_color_breeze @disabled_bg; /*shade(@theme_bg_color_breeze, 0.95);*/
|
||||
/*
|
||||
text foreground color of insensitive widgets */
|
||||
@define-color insensitive_fg_color_breeze shade(@theme_fg_color_breeze, 1.1);
|
||||
@define-color insensitive_fg_color_breeze @disabled_fg; /*shade(@theme_fg_color_breeze, 1.1);*/
|
||||
@define-color theme_disabled_fg_color @insensitive_fg_color_breeze;
|
||||
/*
|
||||
insensitive text widgets and the like base background color */
|
||||
@define-color insensitive_base_color_breeze @theme_base_color_breeze;
|
||||
@define-color insensitive_base_color_breeze @disabled_bg; /*@theme_base_color_breeze;*/
|
||||
/*
|
||||
widget text/foreground color on backdrop windows */
|
||||
@define-color theme_unfocused_fg_color_breeze @theme_fg_color_breeze;
|
||||
|
|
@ -77,19 +80,20 @@ widgets main borders color */
|
|||
|
||||
/*
|
||||
widgets main borders color on backdrop windows */
|
||||
@define-color unfocused_borders shade(@borders, 1.05);
|
||||
@define-color unfocused_borders @borders; /*shade(@borders, 1.05);*/
|
||||
|
||||
/*
|
||||
these are pretty self explicative */
|
||||
@define-color warning_color_breeze #f57900;
|
||||
@define-color error_color_breeze #990000;
|
||||
@define-color success_color_breeze #73d216;
|
||||
@define-color warning_color_breeze @warning_color;
|
||||
@define-color error_color_breeze @error_color;
|
||||
@define-color success_color_breeze @success_color;
|
||||
|
||||
/*Window headers*/
|
||||
@define-color theme_header_bg mix(@theme_selected_bg_color_breeze, @theme_bg_color_breeze, 0.5);
|
||||
@define-color theme_header_unfocused_bg @theme_bg_color_breeze;
|
||||
@define-color theme_header_fg @theme_selected_fg_color_breeze;
|
||||
@define-color theme_header_unfocused_fg #949c3c;
|
||||
@define-color theme_titlebar_background_breeze @titlebar_active_bg; /*mix(@theme_selected_bg_color_breeze, @theme_bg_color_breeze, 0.5);*/
|
||||
@define-color theme_titlebar_background_backdrop_breeze @titlebar_backdrop_bg; /*@theme_bg_color_breeze;*/
|
||||
@define-color theme_titlebar_foreground_breeze @titlebar_active_fg; /*@theme_selected_fg_color_breeze;*/
|
||||
@define-color theme_titlebar_foreground_backdrop_breeze @titlebar_backdrop_fg; /*@theme_fg_color_breeze;*/
|
||||
|
||||
|
||||
/* scale slider colors*/
|
||||
@define-color slider_inner_color @warning_color_breeze;
|
||||
|
|
@ -282,6 +286,47 @@ assistant .sidebar label.highlight {
|
|||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }*/
|
||||
|
||||
|
||||
/**********************
|
||||
* General Typography *
|
||||
**********************/
|
||||
.large-title {
|
||||
font-weight: 300;
|
||||
font-size: 24pt; }
|
||||
|
||||
.title-1 {
|
||||
font-weight: 800;
|
||||
font-size: 20pt; }
|
||||
|
||||
.title-2 {
|
||||
font-weight: 800;
|
||||
font-size: 15pt; }
|
||||
|
||||
.title-3 {
|
||||
font-weight: 700;
|
||||
font-size: 15pt; }
|
||||
|
||||
.title-4 {
|
||||
font-weight: 700;
|
||||
font-size: 13pt; }
|
||||
|
||||
.heading {
|
||||
font-weight: 700;
|
||||
font-size: 11pt; }
|
||||
|
||||
.body {
|
||||
font-weight: 400;
|
||||
font-size: 11pt; }
|
||||
|
||||
.caption-heading {
|
||||
font-weight: 700;
|
||||
font-size: 9pt; }
|
||||
|
||||
.caption {
|
||||
font-weight: 400;
|
||||
font-size: 9pt; }
|
||||
|
||||
|
||||
/*********************
|
||||
* Spinner Animation *
|
||||
*********************/
|
||||
|
|
@ -1733,7 +1778,7 @@ button:visited > label,
|
|||
*:link,
|
||||
button:link,
|
||||
button:visited {
|
||||
color: mix (@theme_selected_bg_color_breeze, @theme_fg_color_breeze, 0.6); }
|
||||
color: mix(@theme_selected_bg_color_breeze, @theme_fg_color_breeze, 0.6); }
|
||||
button:link > label:visited,
|
||||
button:visited > label:visited,
|
||||
*:link:visited,
|
||||
|
|
@ -4781,6 +4826,8 @@ colorchooser .popover.osd {
|
|||
/**********************
|
||||
* Window Decorations *
|
||||
*********************/
|
||||
|
||||
/* disabled: gtk3 to gtk4
|
||||
decoration {
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
border-width: 0px;
|
||||
|
|
@ -4795,6 +4842,26 @@ decoration {
|
|||
0px 0px 0px 1px alpha(black, 0.2),
|
||||
0 0 0 1px transparent;
|
||||
transition: 80ms ease-out; }
|
||||
|
||||
*/
|
||||
window.csd {
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
border-width: 0px;
|
||||
box-shadow: 0px 15px 38px -15px alpha(black, 0.9),
|
||||
0px 10px 20px -5px alpha(black, 0.9),
|
||||
0px 0px 0px 1px alpha(black, 0.2),
|
||||
0 0 0 1px @theme_header_bg;
|
||||
}
|
||||
|
||||
window.csd:backdrop {
|
||||
box-shadow: 0px 15px 38px -15px alpha(black, 0.2),
|
||||
0px 10px 20px -5px alpha(black, 0.6),
|
||||
0px 0px 0px 1px alpha(black, 0.2),
|
||||
0 0 0 1px transparent;
|
||||
transition: 80ms ease-out;
|
||||
}
|
||||
|
||||
/* disabled: gtk3 to gtk4
|
||||
.maximized decoration,
|
||||
.fullscreen decoration,
|
||||
.tiled decoration,
|
||||
|
|
@ -4803,10 +4870,23 @@ decoration {
|
|||
.tiled-bottom decoration,
|
||||
.tiled-left decoration {
|
||||
border-radius: 0; }
|
||||
.popup decoration {
|
||||
box-shadow: 0 4px 8px -4px alpha(black, 0.23); }
|
||||
.ssd decoration {
|
||||
*/
|
||||
|
||||
window.maximized,
|
||||
window.fullscreen,
|
||||
window.tiled, window.tiled-top,
|
||||
window.tiled-left,
|
||||
window.tiled-right,
|
||||
window.tiled-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
window.csd.popup, window.csd.dialog.message, window.csd.solid-csd
|
||||
{
|
||||
box-shadow: 0 4px 8px -4px alpha(black, 0.23); }
|
||||
|
||||
/*
|
||||
.csd.popup decoration {
|
||||
border-radius: 0;
|
||||
box-shadow: 0px 0px 12px 0px alpha(black, 0.1), 0px 0px 4px 0px alpha(black, 0.4), 0px 0px 0px 1px alpha(black, 0.1); }
|
||||
|
|
@ -4826,6 +4906,7 @@ decoration {
|
|||
.solid-csd decoration:backdrop {
|
||||
box-shadow: inset 0 0 0 3px @theme_bg_color_breeze, inset 0 1px @wm_highlight; }
|
||||
|
||||
*/
|
||||
.background.csd {
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@define-color window_fg #241f31;
|
||||
@define-color window_bg #a79780;
|
||||
@define-color text_widget_fg #241f31;
|
||||
@define-color text_widget_bg #cbb79b;
|
||||
|
||||
|
||||
@define-color button_fg #241f31;
|
||||
@define-color button_bg #a0a780;
|
||||
|
||||
@define-color disabled_fg #670202;
|
||||
@define-color disabled_bg #F99;
|
||||
|
||||
@define-color selected_fg #000000;
|
||||
@define-color selected_bg #5a6f3a;
|
||||
|
||||
@define-color warning_color #f57900;
|
||||
@define-color error_color #990000;
|
||||
@define-color success_color #73d216;
|
||||
|
||||
|
||||
@define-color titlebar_active_fg @selected_fg;
|
||||
@define-color titlebar_active_bg @selected_bg;
|
||||
|
||||
@define-color titlebar_backdrop_fg @window_fg;
|
||||
@define-color titlebar_backdrop_bg @window_bg;
|
||||
|
||||
@define-color hint_fg #002269;
|
||||
@define-color hint_bg #6789b4;
|
||||
|
||||
Loading…
Reference in New Issue