Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Plasma
Breeze for GTK
Commits
f8f40071
Commit
f8f40071
authored
Sep 03, 2020
by
Jan Blackquill
🌈
Browse files
Breeze for GTK4
parent
4af053d5
Changes
33
Hide whitespace changes
Inline
Side-by-side
src/build_theme.sh
View file @
f8f40071
...
...
@@ -3,7 +3,7 @@ set -e
# Usage: create_folders <target-directory>
create_folders
()
{
for
j
in
gtk-2.0 gtk-3.0
;
do
for
j
in
gtk-2.0 gtk-3.0
gtk-4.0
;
do
if
!
[
-d
"
$1
/
$j
"
]
;
then
mkdir
-p
"
$1
/
$j
"
fi
...
...
@@ -28,7 +28,7 @@ install_theme () {
fi
echo
"Installing into
${
THEME_INSTALL_TARGET
}
"
mkdir
-p
"
${
THEME_INSTALL_TARGET
}
"
for
dir
in
assets gtk-2.0 gtk-3.0
;
do
for
dir
in
assets gtk-2.0 gtk-3.0
gtk-4.0
;
do
if
[
-d
"
${
THEME_INSTALL_TARGET
}
/
$dir
"
]
;
then
rm
-rf
"
${
THEME_INSTALL_TARGET
:?
}
/
$dir
"
fi
...
...
@@ -45,6 +45,7 @@ render_theme () {
python3 render_assets.py
-c
"
$1
"
-a
"
${
THEME_BUILD_DIR
}
/assets"
\
-g
"
${
THEME_BUILD_DIR
}
/gtk-2.0"
-G
"
${
THEME_BUILD_DIR
}
"
-b
"
$4
"
build_sass gtk3/gtk.scss
"
${
THEME_BUILD_DIR
}
/gtk-3.0/gtk.css"
"
${
THEME_BUILD_DIR
}
"
build_sass gtk4/gtk.scss
"
${
THEME_BUILD_DIR
}
/gtk-4.0/gtk.css"
"
${
THEME_BUILD_DIR
}
"
rm
-f
"
${
THEME_BUILD_DIR
}
/_global.scss"
install_theme
"
${
THEME_BUILD_DIR
}
"
"
$2
"
"
$3
"
}
...
...
src/gtk4/gtk.scss
0 → 100644
View file @
f8f40071
@charset
"UTF-8"
;
$new-highlight
:
false
;
@import
'global'
;
@import
'../functions'
;
@import
'../colors'
;
@import
"widgets/base"
;
@import
"widgets/button"
;
@import
"widgets/entry"
;
@import
"widgets/app_notifications"
;
@import
"widgets/calendar"
;
@import
"widgets/checkboxes"
;
@import
"widgets/color_chooser"
;
@import
"widgets/dialogs"
;
@import
"widgets/headerbar"
;
@import
"widgets/infobar"
;
@import
"widgets/link"
;
@import
"widgets/lists"
;
@import
"widgets/menus"
;
@import
"widgets/misc"
;
@import
"widgets/notebook"
;
@import
"widgets/overshoot"
;
@import
"widgets/pathbar"
;
@import
"widgets/progressbar"
;
@import
"widgets/scale"
;
@import
"widgets/scrollbar"
;
@import
"widgets/sidebar"
;
@import
"widgets/spinbutton"
;
@import
"widgets/switch"
;
@import
"widgets/toolbar"
;
@import
"widgets/tooltips"
;
@import
"widgets/treeview"
;
@import
"widgets/window_decorations"
;
@import
"widgets/libhandy"
;
@import
"widgets/assistant"
;
@import
"widgets/floating-bar"
;
@import
"widgets/typography"
;
src/gtk4/widgets/_app_notifications.scss
0 → 100644
View file @
f8f40071
@charset
"UTF-8"
;
/*********************
* App Notifications *
*********************/
.app-notification
,
.app-notification.frame
{
@extend
%osd
;
padding
:
10px
;
border-top-width
:
0px
;
border-radius
:
0px
0px
3px
3px
;
&
:backdrop
{
background-image
:
none
;
}
button
{
@include
button
(
normal
);
&
.flat
{
@extend
%undecorated_button
;
-gtk-icon-shadow
:
none
;
text-shadow
:
none
;
&
:hover
{
@extend
%undecorated_button
;
color
:
gtk
(
"@theme_button_decoration_hover"
);
}
&
:active
{
@extend
%undecorated_button
;
color
:
gtk
(
"@theme_button_decoration_focus"
);
}
&
:backdrop
,
&
:disabled
,
&
:backdrop:disabled
{
@extend
%undecorated_button
;
}
}
&
:hover
{
@include
button
(
hover
);
}
&
:active
,
&
:checked
,
&
:backdrop:active
,
&
:backdrop:checked
{
@include
button
(
active
);
}
&
:disabled
,
&
:backdrop:disabled
{
@include
button
(
insensitive
);
}
&
:backdrop
{
@include
button
(
backdrop
);
}
}
border
{
border
:
none
;}
}
\ No newline at end of file
src/gtk4/widgets/_assistant.scss
0 → 100644
View file @
f8f40071
assistant
{
.sidebar
{
background-color
:
gtk
(
"@theme_base_color"
);
color
:
gtk
(
"@theme_text_color"
);
border-top
:
1px
solid
gtk
(
"@borders"
);
border-right
:
1px
solid
gtk
(
"@borders"
);
&
:backdrop
{
background-color
:
gtk
(
"@theme_unfocused_base_color"
);
color
:
gtk
(
"@theme_unfocused_text_color"
);
border-color
:
gtk
(
"@unfocused_borders"
);
}
}
&
.csd
.sidebar
{
border-top-style
:
none
;
}
.sidebar
label
{
padding
:
6px
12px
;
}
.sidebar
label
.highlight
{
background-color
:
gtk
(
"@theme_selected_bg_color"
);
color
:
gtk
(
"@theme_fg_color"
);
}
}
src/gtk4/widgets/_base.scss
0 → 100644
View file @
f8f40071
@charset
"UTF-8"
;
$ease-out-quad
:
cubic-bezier
(
0
.25
,
0
.46
,
0
.45
,
0
.94
);
*
{
padding
:
0
;
outline-width
:
0px
;
}
/***************
* Base States *
***************/
.background
{
color
:
gtk
(
"@theme_fg_color"
);
background-color
:
gtk
(
"@theme_bg_color"
);
&
:backdrop
{
text-shadow
:
none
;
-gtk-icon-shadow
:
none
;
color
:
gtk
(
"@theme_unfocused_fg_color"
);
background-color
:
gtk
(
"@theme_unfocused_bg_color"
);
}
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
.gtkstyle-fallback
{
background-color
:
gtk
(
"@theme_bg_color"
);
color
:
gtk
(
"@theme_fg_color"
);
&
:hover
{
background-color
:
gtkshade
(
"@theme_bg_color"
,
1
.1
);
color
:
gtk
(
"@theme_fg_color"
);
}
&
:active
{
background-color
:
gtkshade
(
"@theme_bg_color"
,
0
.9
);
color
:
gtk
(
"@theme_fg_color"
);
}
&
:disabled
{
background-color
:
gtk
(
"@insensitive_fg_color"
);
color
:
gtk
(
"@insensitive_fg_color"
);
}
&
:selected
{
background-color
:
gtk
(
"@theme_selected_bg_color"
);
color
:
gtk
(
"@theme_selected_fg_color"
);
}
}
%view
,
.view
{
color
:
gtk
(
"@theme_text_color"
);
background-color
:
gtk
(
"@theme_base_color"
);
&
:backdrop
{
color
:
gtk
(
"@theme_unfocused_text_color"
);
background-color
:
gtk
(
"@theme_unfocused_base_color"
);
}
&
:disabled
{
color
:
gtk
(
"@insensitive_base_fg_color"
);
}
&
:selected
{
&
:focus
,
&
{
border-radius
:
$r
;
@extend
%selected_items
;
}
}
}
.view
,
textview
{
text
{
@extend
%view
;
selection
{
&
:focus
,
&
{
@extend
%selected_items
;
}}
}
}
textview
border
{
background-color
:
gtk
(
"@theme_base_color"
);
background-image
:
image
(
gtk
(
"@borders"
));
// HACK: the border node just draws background so,
background-repeat
:
no-repeat
;
// using a background-image to draw the border
&
:backdrop
{
background-color
:
gtk
(
"@theme_unfocused_base_color"
);
}
&
.bottom
{
background-size
:
100%
1px
;
background-position
:
top
;
}
&
.top
{
background-size
:
100%
1px
;
background-position
:
bottom
;
}
&
.left
{
background-size
:
1px
100%
;
background-position
:
right
;
}
&
.right
{
background-size
:
1px
100%
;
background-position
:
left
;
}
}
.rubberband
,
rubberband
{
border
:
1px
solid
gtk
(
"@theme_selected_bg_color"
);
background-color
:
gtkalpha
(
gtk
(
"@theme_selected_bg_color"
)
,
0
.8
);
&
:backdrop
{
border-color
:
gtk
(
"@theme_unfocused_selected_bg_color"
);
background-color
:
gtkalpha
(
gtk
(
"@theme_unfocused_selected_bg_color"
)
,
0
.8
);
}
}
flowbox
{
rubberband
{
@extend
rubberband
;
}
flowboxchild
{
padding
:
3px
;
border-radius
:
$r
;
&
:selected
{
@extend
%selected_items
;
outline-offset
:
0px
;
}
}
}
label
{
&
.separator
{
color
:
gtk
(
"@theme_fg_color"
);
@extend
.dim-label
;
&
:backdrop
{
color
:
gtk
(
"@theme_unfocused_fg_color"
);
}
}
selection
{
background-color
:
gtk
(
"@theme_selected_bg_color"
);
color
:
gtk
(
"@theme_selected_fg_color"
);
}
&
:disabled
{
color
:
gtk
(
"@insensitive_fg_color"
);
selection
{
@extend
%selected_items
:disabled
;
}
&
:backdrop
{
color
:
gtk
(
"@insensitive_unfocused_fg_color"
)
}
}
&
:backdrop
{
color
:
gtk
(
"@theme_unfocused_text_color"
);
selction
{
@extend
%selected_items
:backdrop
;}
}
}
.dim-label
{
opacity
:
0
.5
;
text-shadow
:
none
;
}
%osd
,
.osd
{
color
:
gtk
(
"@theme_fg_color"
);
border
:
1px
solid
gtk
(
"@borders"
);
background-color
:
gtkalpha
(
gtk
(
"@theme_bg_color"
)
,
0
.8
);
background-clip
:
padding-box
;
box-shadow
:
none
;
text-shadow
:
none
;
-gtk-icon-shadow
:
none
;
&
:backdrop
{
color
:
gtk
(
"@theme_unfocused_text_color"
);
background-color
:
gtkalpha
(
gtk
(
"@theme_unfocused_bg_color"
)
,
0
.8
);
-gtk-icon-shadow
:
none
;
}
}
%selected_items
{
background-color
:
gtk
(
"@theme_selected_bg_color"
);
color
:
gtk
(
"@theme_selected_fg_color"
);
&
:hover
{
background-color
:
gtk
(
"@theme_hovering_selected_bg_color"
);
color
:
gtk
(
"@theme_fg_color"
);
}
&
:backdrop
{
background-color
:
gtk
(
"@theme_unfocused_selected_bg_color"
);
color
:
gtk
(
"@theme_unfocused_base_color"
);
}
}
%selected_items
{
background-color
:
gtk
(
"@theme_selected_bg_color"
);
border-radius
:
0px
;
@at-root
%nobg_selected_items
,
&
{
color
:
gtk
(
"@theme_selected_fg_color"
);
&
:disabled
{
color
:
gtk
(
"@insensitive_selected_fg_color"
);
}
&
:backdrop
{
color
:
gtk
(
"@theme_unfocused_selected_fg_color"
);
&
:disabled
{
color
:
gtk
(
"@insensitive_unfocused_selected_fg_color"
);
}
}
}
}
src/gtk4/widgets/_button.scss
0 → 100644
View file @
f8f40071
@charset
"UTF-8"
;
// buttons
@mixin
button
(
$t
)
{
// $c:gtk("@theme_button_background_normal"), $tc:gtk("@theme_button_foreground_normal")
//
// Button drawing function
//
// $t: button type,
// $c: base button color for colored* types
// $tc: optional text color for colored* types
// $edge: set to none to not draw the bottom edge or specify a color to not
// use the default one
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
@if
$t
==
normal
{
//
// normal button
//
box-shadow
:
1px
1px
1px
rgba
(
0
,
0
,
0
,
0
.1
);
text-shadow
:
none
;
-gtk-icon-shadow
:
none
;
color
:
gtk
(
"@theme_button_foreground_normal"
);
border-color
:
gtk
(
"@borders"
);
background-color
:
gtk
(
"@theme_button_background_normal"
);
}
@else
if
$t
==
hover
{
//
// hovered button
//
color
:
gtk
(
"@theme_button_foreground_normal"
);
border-color
:
gtk
(
"@theme_button_decoration_hover"
);
}
@else
if
$t
==
active
{
//
// pushed button
//
color
:
gtk
(
"@theme_button_foreground_active"
);
border-color
:
gtk
(
"@theme_button_decoration_focus"
);
background-color
:
gtk
(
"@theme_button_decoration_focus"
);
}
@else
if
$t
==
active-hover
{
//
//
//
color
:
gtk
(
"@theme_button_foreground_normal"
);
border-color
:
gtk
(
"@theme_button_decoration_hover"
);
background-color
:
gtk
(
"@theme_button_decoration_hover"
);
}
@else
if
$t
==
insensitive
{
//
// insensitive button
//
color
:
gtk
(
"@theme_button_foreground_insensitive"
);
border-color
:
gtk
(
"@insensitive_borders"
);
background-color
:
gtk
(
"@theme_button_background_insensitive"
);
>
.label
{
color
:
inherit
;
}
}
@else
if
$t
==
insensitive-active
{
//
// insensitive pushed button
//
color
:
gtk
(
"@theme_button_foreground_active_insensitive"
);
border-color
:
gtk
(
"@theme_button_decoration_focus_insensitive"
);
background-color
:
gtk
(
"@theme_button_decoration_focus_insensitive"
);
>
.label
{
color
:
inherit
;
}
}
@else
if
$t
==
backdrop
{
//
// backdrop button
//
color
:
gtk
(
"@theme_button_foreground_backdrop"
);
border-color
:
gtk
(
"@unfocused_borders"
);
background-color
:
gtk
(
"@theme_button_background_backdrop"
);
}
@else
if
$t
==
backdrop-hover
{
//
// backdrop hover button
//
color
:
gtk
(
"@theme_button_foreground_backdrop"
);
border-color
:
gtk
(
"@theme_button_decoration_hover"
);
background-color
:
gtk
(
"@theme_button_background_backdrop"
);
}
@else
if
$t
==
backdrop-active
{
//
// backdrop pushed button
//
color
:
gtk
(
"@theme_button_foreground_active_backdrop"
);
border-color
:
gtk
(
"@theme_button_decoration_focus_backdrop"
);
background-color
:
gtk
(
"@theme_button_decoration_focus_backdrop"
);
}
@else
if
$t
==
backdrop-insensitive
{
//
// backdrop insensitive button
//
color
:
gtk
(
"@theme_button_foreground_backdrop_insensitive"
);
border-color
:
gtk
(
"@unfocused_insensitive_borders"
);
background-color
:
gtk
(
"@theme_button_background_backdrop_insensitive"
);
>
.label
{
color
:
inherit
;
}
}
@else
if
$t
==
backdrop-insensitive-active
{
//
// backdrop insensitive pushed button
//
color
:
gtk
(
"@theme_button_foreground_active_backdrop_insensitive"
);
border-color
:
gtk
(
"@theme_button_decoration_focus_backdrop_insensitive"
);
background-color
:
gtk
(
"@theme_button_decoration_focus_backdrop_insensitive"
);
>
.label
{
color
:
inherit
;
}
}
@else
if
$t
==
undecorated
{
//
// reset
//
border-color
:
transparent
;
background-color
:
transparent
;
background-image
:
none
;
box-shadow
:none
;
color
:
gtk
(
"@theme_button_foreground_normal"
);
text-shadow
:
none
;
-gtk-icon-shadow
:
none
;
}
}
/***********
* Buttons *
***********/
// stuff for .needs-attention
$_dot_color
:
gtk
(
"@theme_button_decoration_focus"
);
@keyframes
needs_attention
{
from
{
background-image
:
radial-gradient
(
circle
,
$_dot_color
0%
,
transparent
5px
);
}
to
{
background-image
:
radial-gradient
(
circle
,
gtk
(
"@theme_selected_bg_color"
)
0%
,
transparent
6px
);
}
}
%buttons
{
$_button_transition
:
all
200ms
$ease-out-quad
;
border
:
1px
solid
;
border-radius
:
$r
;
padding
:
6px
6px
;
background-clip
:
border-box
;
transition
:
$_button_transition
;
@include
button
(
normal
);
&
.flat
{
@include
button
(
undecorated
);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
// in this case the duration is increased.
transition
:
none
;
&
:hover
{
transition
:
$_button_transition
;
transition-duration
:
500ms
;
&
:active
,
&
:focus
{
transition
:
$_button_transition
;
}
}
&
:checked
{
background-color
:
gtk
(
"@borders"
);}
}
&
:hover
{
@include
button
(
hover
);
}
&
:active
{
transform
:
translate
(
1px
,
1px
);
}
&
:active
,
&
:checked
,
&
:focus
{
@include
button
(
active
);
transition-duration
:
50ms
;
&
:hover
{
@include
button
(
active-hover
);
}
}
&
:backdrop
{
@include
button
(
backdrop
);
&
:hover
{
@include
button
(
backdrop-hover
);
}
&
:active
,
&
:checked
,
&
:focus
{
@include
button
(
backdrop-active
);
}
&
:disabled
{
@include
button
(
backdrop-insensitive
);
}
&
:disabled:active
,
&
:disabled:checked
,
&
:disabled:focus
{
@include
button
(
backdrop-insensitive-active
);
}
}
&
.flat
:backdrop
{
@include
button
(
undecorated
);
color
:
gtk
(
"@theme_button_foreground_backdrop"
);
}
&
.flat
:disabled
{
@include
button
(
undecorated
);
color
:
gtk
(
"@theme_button_foreground_insensitive"
);
}
&
.flat
:backdrop:disabled
{
@include
button
(
undecorated
);
color
:
gtk
(
"@theme_button_foreground_backdrop_insensitive"
);
}
&
:disabled
{
@include
button
(
insensitive
);
&
:active
,
&
:checked
,
&
:focus
{
@include
button
(
insensitive-active
);
}
}
separator
{
background-color
:
transparent
;
background-image
:
none
;
color
:
transparent
;
}
}
%button
,
button
{
@at-root
%button_basic
,
&
{
@extend
%buttons
;
&
.osd
{
@extend
%buttons
;
}
//overlay / OSD style
.osd
&
{
//@extend %buttons;
}
&
.image-button
{
min-width
:
16px
;
padding
:
6px
;
}
&
.text-button
{
padding-left
:
6px
;
padding-right
:
6px
;
}
&
.text-button.image-button
{