From 29fbab3a585cd48f260621287cddb81e7ff617aa Mon Sep 17 00:00:00 2001 From: MisterMaker Date: Sun, 5 Nov 2023 08:34:09 +0100 Subject: [PATCH] [GUI] Stylesheet fixes for overlay icons, pop-up notifcation and QMDI window (#11244) * Fix for the overlay icons and pop-up notifcation * Added a fix for the QMDI window --- src/Gui/Stylesheets/CMakeLists.txt | 12 + src/Gui/Stylesheets/Dark-modern.qss | 84 +++++ src/Gui/Stylesheets/Dark.qss | 83 +++++ src/Gui/Stylesheets/Darker.qss | 85 +++++ src/Gui/Stylesheets/Light-modern.qss | 25 ++ src/Gui/Stylesheets/Light.qss | 25 ++ .../overlay/Dark-Modern_overlay.qss | 19 +- src/Gui/Stylesheets/overlay/Dark_overlay.qss | 21 +- .../Stylesheets/overlay/Darker_overlay.qss | 19 +- src/Gui/Stylesheets/overlay/close_light.svg | 41 +++ src/Gui/Stylesheets/overlay/close_lighter.svg | 41 +++ src/Gui/Stylesheets/overlay/close_red.svg | 41 +++ src/Gui/Stylesheets/overlay/float_light.svg | 53 +++ src/Gui/Stylesheets/overlay/float_lighter.svg | 53 +++ src/Gui/Stylesheets/overlay/mode_light.svg | 346 ++++++++++++++++++ src/Gui/Stylesheets/overlay/mode_lighter.svg | 346 ++++++++++++++++++ src/Gui/Stylesheets/overlay/overlay_light.svg | 33 ++ .../Stylesheets/overlay/overlay_lighter.svg | 29 ++ .../Stylesheets/overlay/taskshow_light.svg | 29 ++ .../Stylesheets/overlay/transparent_light.svg | 51 +++ .../overlay/transparent_lighter.svg | 48 +++ 21 files changed, 1447 insertions(+), 37 deletions(-) create mode 100644 src/Gui/Stylesheets/overlay/close_light.svg create mode 100644 src/Gui/Stylesheets/overlay/close_lighter.svg create mode 100644 src/Gui/Stylesheets/overlay/close_red.svg create mode 100644 src/Gui/Stylesheets/overlay/float_light.svg create mode 100644 src/Gui/Stylesheets/overlay/float_lighter.svg create mode 100644 src/Gui/Stylesheets/overlay/mode_light.svg create mode 100644 src/Gui/Stylesheets/overlay/mode_lighter.svg create mode 100644 src/Gui/Stylesheets/overlay/overlay_light.svg create mode 100644 src/Gui/Stylesheets/overlay/overlay_lighter.svg create mode 100644 src/Gui/Stylesheets/overlay/taskshow_light.svg create mode 100644 src/Gui/Stylesheets/overlay/transparent_light.svg create mode 100644 src/Gui/Stylesheets/overlay/transparent_lighter.svg diff --git a/src/Gui/Stylesheets/CMakeLists.txt b/src/Gui/Stylesheets/CMakeLists.txt index 60a450929a..f953a64a3b 100644 --- a/src/Gui/Stylesheets/CMakeLists.txt +++ b/src/Gui/Stylesheets/CMakeLists.txt @@ -29,6 +29,18 @@ SET(Overlay_Stylesheets_Files "overlay/edithide.svg" "overlay/mode.svg" "overlay/transparent.svg" + "overlay/taskshow_light.svg" + "overlay/mode_lighter.svg" + "overlay/overlay_lighter.svg" + "overlay/close_lighter.svg" + "overlay/close_light.svg" + "overlay/float_lighter.svg" + "overlay/overlay_light.svg" + "overlay/mode_light.svg" + "overlay/transparent_light.svg" + "overlay/float_light.svg" + "overlay/transparent_lighter.svg" + "overlay/close_red.svg" ) # Find all the image files diff --git a/src/Gui/Stylesheets/Dark-modern.qss b/src/Gui/Stylesheets/Dark-modern.qss index ff7a5b9dc6..97d987f19b 100644 --- a/src/Gui/Stylesheets/Dark-modern.qss +++ b/src/Gui/Stylesheets/Dark-modern.qss @@ -2632,3 +2632,87 @@ Gui--UrlLabel { color : rgba(0,91,255,255); /* Deep sky blue */ text-decoration : underline; } + +Gui--NotificationLabel { + background-color: #444444; + border: 1px solid #696968; + border-radius: 2px; +} + +Gui--OverlayToolButton:!hover{ + background-color: transparent; + border: 0px solid transparent; + image: url(qss:overlay/close_light.svg); +} + +Gui--OverlayToolButton:hover { + + image: url(qss:overlay/close_red.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:!checked { + image: url(qss:overlay/transparent_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:hover { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:checked { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:!checked{ + image: url(qss:overlay/overlay_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:hover { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:checked { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:!checked { + image: url(qss:overlay/mode_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:hover { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:checked { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:!checked { + image: url(qss:overlay/float_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:hover { + image: url(qss:overlay/float_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:checked { + image: url(qss:overlay/float_lighter.svg); +} + +/*================================================================================================== +Forming windows below are the border settings. See also https://forum.freecad.org/viewtopic.php?p=439797#p439797 +==================================================================================================*/ +QMdiSubWindow { + border:2px solid #333333; + border-radius: 2px; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + background-color: #333333; +} + +QMdiSubWindow:hover { + border:2px solid #696968; +} + +QMdiSubWindow:active { + border:2px solid @ThemeAccentColor1; +} diff --git a/src/Gui/Stylesheets/Dark.qss b/src/Gui/Stylesheets/Dark.qss index 52ffb4de0b..3c0c580f9f 100644 --- a/src/Gui/Stylesheets/Dark.qss +++ b/src/Gui/Stylesheets/Dark.qss @@ -2611,3 +2611,86 @@ Gui--UrlLabel { color : rgba(0,91,255,255); /* Deep sky blue */ text-decoration : underline; } + +Gui--NotificationLabel { + background-color: #7F7F7F; + border: 1px solid #696968; + border-radius: 2px; +} + +Gui--OverlayToolButton:!hover{ + background-color: transparent; + border: 0px solid transparent; + image: url(qss:overlay/close_light.svg); +} + +Gui--OverlayToolButton:hover { + + image: url(qss:overlay/close_red.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:!checked { + image: url(qss:overlay/transparent_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:hover { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:checked { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:!checked{ + image: url(qss:overlay/overlay_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:hover { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:checked { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:!checked { + image: url(qss:overlay/mode_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:hover { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:checked { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:!checked { + image: url(qss:overlay/float_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:hover { + image: url(qss:overlay/float_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:checked { + image: url(qss:overlay/float_lighter.svg); +} +/*================================================================================================== +Forming windows below are the border settings. See also https://forum.freecad.org/viewtopic.php?p=439797#p439797 +==================================================================================================*/ +QMdiSubWindow { + border:2px solid #696968; + border-radius: 2px; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + background-color: #333333; +} + +QMdiSubWindow:hover { + border:2px solid #333333; +} + +QMdiSubWindow:active { + border:2px solid @ThemeAccentColor1; +} diff --git a/src/Gui/Stylesheets/Darker.qss b/src/Gui/Stylesheets/Darker.qss index 70a81b28ed..7be182e32b 100644 --- a/src/Gui/Stylesheets/Darker.qss +++ b/src/Gui/Stylesheets/Darker.qss @@ -2616,3 +2616,88 @@ Gui--UrlLabel { color : rgba(0,91,255,255); /* Deep sky blue */ text-decoration : underline; } + +Gui--NotificationLabel { + background-color: #444444; + border: 1px solid #696968; + border-radius: 2px; +} + +Gui--OverlayToolButton:!hover{ + background-color: transparent; + border: 0px solid transparent; + image: url(qss:overlay/close_light.svg); +} + +Gui--OverlayToolButton:hover { + + image: url(qss:overlay/close_red.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:!checked { + image: url(qss:overlay/transparent_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:hover { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Transparent"]:checked { + image: url(qss:overlay/transparent_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:!checked{ + image: url(qss:overlay/overlay_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:hover { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Overlay"]:checked { + image: url(qss:overlay/overlay_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:!checked { + image: url(qss:overlay/mode_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:hover { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN AutoMode"]:checked { + image: url(qss:overlay/mode_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:!checked { + image: url(qss:overlay/float_light.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:hover { + image: url(qss:overlay/float_lighter.svg); +} + +Gui--OverlayToolButton[objectName="OBTN Float"]:checked { + image: url(qss:overlay/float_lighter.svg); +} + +/*================================================================================================== +Forming windows below are the border settings. See also https://forum.freecad.org/viewtopic.php?p=439797#p439797 +==================================================================================================*/ +QMdiSubWindow { + border:2px solid #333333; + border-radius: 2px; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + background-color: #333333; +} + +QMdiSubWindow:hover { + border:2px solid #696968; +} + +QMdiSubWindow:active { + border:2px solid @ThemeAccentColor1; +} + diff --git a/src/Gui/Stylesheets/Light-modern.qss b/src/Gui/Stylesheets/Light-modern.qss index 6e492b2cd0..b65ddc979a 100644 --- a/src/Gui/Stylesheets/Light-modern.qss +++ b/src/Gui/Stylesheets/Light-modern.qss @@ -2641,3 +2641,28 @@ Gui--UrlLabel { color : rgba(0,91,255,255); /* Deep sky blue */ text-decoration : underline; } + +Gui--NotificationLabel { + background-color: #f6f6f6; + border: 1px solid #cccccc; + border-radius: 2px; +} + +/*================================================================================================== +Forming windows below are the border settings. See also https://forum.freecad.org/viewtopic.php?p=439797#p439797 +==================================================================================================*/ +QMdiSubWindow { + border:2px solid #ffffff; + border-radius: 2px; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + background-color: #f6f6f6; +} + +QMdiSubWindow:hover { + border:2px solid #cccccc; +} + +QMdiSubWindow:active { + border:2px solid @ThemeAccentColor1; +} \ No newline at end of file diff --git a/src/Gui/Stylesheets/Light.qss b/src/Gui/Stylesheets/Light.qss index 4ea281a71c..aca9bc859e 100644 --- a/src/Gui/Stylesheets/Light.qss +++ b/src/Gui/Stylesheets/Light.qss @@ -2623,3 +2623,28 @@ Gui--UrlLabel { color : rgba(0,91,255,255); /* Deep sky blue */ text-decoration : underline; } + +Gui--NotificationLabel { + background-color: #f6f6f6; + border: 1px solid #cccccc; + border-radius: 2px; +} + +/*================================================================================================== +Forming windows below are the border settings. See also https://forum.freecad.org/viewtopic.php?p=439797#p439797 +==================================================================================================*/ +QMdiSubWindow { + border:2px solid #ffffff; + border-radius: 2px; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + background-color: #f6f6f6; +} + +QMdiSubWindow:hover { + border:2px solid #cccccc; +} + +QMdiSubWindow:active { + border:2px solid @ThemeAccentColor1; +} \ No newline at end of file diff --git a/src/Gui/Stylesheets/overlay/Dark-Modern_overlay.qss b/src/Gui/Stylesheets/overlay/Dark-Modern_overlay.qss index e31b2d1b09..8472252fd6 100644 --- a/src/Gui/Stylesheets/overlay/Dark-Modern_overlay.qss +++ b/src/Gui/Stylesheets/overlay/Dark-Modern_overlay.qss @@ -42,38 +42,33 @@ Gui--OverlayProxyWidget { Gui--OverlayToolButton { background: #444444; - padding: -2px; + padding: 1px; border: 0px outset rgb(255, 255, 255); border-radius: 0px; } - Gui--OverlayToolButton:hover { - background: #ffffff; padding: 0px; } Gui--OverlayToolButton:focus { - background: #cfcfcf; + background: #000000; padding: 0px; + border: 1px rgb(135, 135, 135); } Gui--OverlayToolButton::pressed { - background: rgb(159, 159, 159); - border: 2px inset rgb(84, 84, 84); + background: #000000; padding: 0px; } Gui--OverlayToolButton:checked { - background: #bebebe; - border: 2px inset #bebebe; padding: 0px; - border-radius: 2px; } Gui--OverlayToolButton:checked:hover { - background: rgba(255, 255, 255, 0.8); - border: 2px inset rgb(255, 255, 255); - + background: #000000; + border: 1px inset #525252; + padding: 0px; } /* Use the following selector to customize title bar for each side */ diff --git a/src/Gui/Stylesheets/overlay/Dark_overlay.qss b/src/Gui/Stylesheets/overlay/Dark_overlay.qss index e31b2d1b09..c66a46775f 100644 --- a/src/Gui/Stylesheets/overlay/Dark_overlay.qss +++ b/src/Gui/Stylesheets/overlay/Dark_overlay.qss @@ -41,39 +41,34 @@ Gui--OverlayProxyWidget { } Gui--OverlayToolButton { - background: #444444; - padding: -2px; + background-color: qlineargradient(x1:0, y1:0.3, x2:0, y2:1, stop:0 #333333, stop:1 #2a2a2a); + padding: 0px; border: 0px outset rgb(255, 255, 255); border-radius: 0px; } Gui--OverlayToolButton:hover { - background: #ffffff; - padding: 0px; + } Gui--OverlayToolButton:focus { - background: #cfcfcf; + background: #000000; padding: 0px; + border: 1px rgb(135, 135, 135); } Gui--OverlayToolButton::pressed { - background: rgb(159, 159, 159); - border: 2px inset rgb(84, 84, 84); + background: #000000; padding: 0px; } Gui--OverlayToolButton:checked { - background: #bebebe; - border: 2px inset #bebebe; padding: 0px; - border-radius: 2px; } Gui--OverlayToolButton:checked:hover { - background: rgba(255, 255, 255, 0.8); - border: 2px inset rgb(255, 255, 255); - + border: 0px inset #525252; + padding: 1px; } /* Use the following selector to customize title bar for each side */ diff --git a/src/Gui/Stylesheets/overlay/Darker_overlay.qss b/src/Gui/Stylesheets/overlay/Darker_overlay.qss index 5f6ba33f32..0142f1ed80 100644 --- a/src/Gui/Stylesheets/overlay/Darker_overlay.qss +++ b/src/Gui/Stylesheets/overlay/Darker_overlay.qss @@ -42,38 +42,33 @@ Gui--OverlayProxyWidget { Gui--OverlayToolButton { background-color: qlineargradient(x1:0, y1:0.3, x2:0, y2:1, stop:0 #333333, stop:1 #2a2a2a); - padding: -2px; + padding: 1px; border: 0px outset rgb(255, 255, 255); border-radius: 0px; } - Gui--OverlayToolButton:hover { - background: #ffffff; padding: 0px; } Gui--OverlayToolButton:focus { - background: #cfcfcf; + background: #000000; padding: 0px; + border: 1px rgb(135, 135, 135); } Gui--OverlayToolButton::pressed { - background: rgb(159, 159, 159); - border: 2px inset rgb(84, 84, 84); + background: #000000; padding: 0px; } Gui--OverlayToolButton:checked { - background: #bebebe; - border: 2px inset #bebebe; padding: 0px; - border-radius: 2px; } Gui--OverlayToolButton:checked:hover { - background: rgba(255, 255, 255, 0.8); - border: 2px inset rgb(255, 255, 255); - + background: #000000; + border: 1px inset #525252; + padding: 0px; } /* Use the following selector to customize title bar for each side */ diff --git a/src/Gui/Stylesheets/overlay/close_light.svg b/src/Gui/Stylesheets/overlay/close_light.svg new file mode 100644 index 0000000000..59e39ae934 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/close_light.svg @@ -0,0 +1,41 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/close_lighter.svg b/src/Gui/Stylesheets/overlay/close_lighter.svg new file mode 100644 index 0000000000..a321f544b9 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/close_lighter.svg @@ -0,0 +1,41 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/close_red.svg b/src/Gui/Stylesheets/overlay/close_red.svg new file mode 100644 index 0000000000..7aaec609fb --- /dev/null +++ b/src/Gui/Stylesheets/overlay/close_red.svg @@ -0,0 +1,41 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/float_light.svg b/src/Gui/Stylesheets/overlay/float_light.svg new file mode 100644 index 0000000000..7b6fcfa2ff --- /dev/null +++ b/src/Gui/Stylesheets/overlay/float_light.svg @@ -0,0 +1,53 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/float_lighter.svg b/src/Gui/Stylesheets/overlay/float_lighter.svg new file mode 100644 index 0000000000..64df9a9573 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/float_lighter.svg @@ -0,0 +1,53 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/mode_light.svg b/src/Gui/Stylesheets/overlay/mode_light.svg new file mode 100644 index 0000000000..ee07548058 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/mode_light.svg @@ -0,0 +1,346 @@ + + + +image/svg+xml diff --git a/src/Gui/Stylesheets/overlay/mode_lighter.svg b/src/Gui/Stylesheets/overlay/mode_lighter.svg new file mode 100644 index 0000000000..875a17a2a2 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/mode_lighter.svg @@ -0,0 +1,346 @@ + + + +image/svg+xml diff --git a/src/Gui/Stylesheets/overlay/overlay_light.svg b/src/Gui/Stylesheets/overlay/overlay_light.svg new file mode 100644 index 0000000000..6643244fb7 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/overlay_light.svg @@ -0,0 +1,33 @@ + + + + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/overlay_lighter.svg b/src/Gui/Stylesheets/overlay/overlay_lighter.svg new file mode 100644 index 0000000000..05c73044a1 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/overlay_lighter.svg @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/taskshow_light.svg b/src/Gui/Stylesheets/overlay/taskshow_light.svg new file mode 100644 index 0000000000..c2516d9abb --- /dev/null +++ b/src/Gui/Stylesheets/overlay/taskshow_light.svg @@ -0,0 +1,29 @@ + + + + + + image/svg+xml + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/transparent_light.svg b/src/Gui/Stylesheets/overlay/transparent_light.svg new file mode 100644 index 0000000000..0e81135129 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/transparent_light.svg @@ -0,0 +1,51 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + + diff --git a/src/Gui/Stylesheets/overlay/transparent_lighter.svg b/src/Gui/Stylesheets/overlay/transparent_lighter.svg new file mode 100644 index 0000000000..4c6c1a5f05 --- /dev/null +++ b/src/Gui/Stylesheets/overlay/transparent_lighter.svg @@ -0,0 +1,48 @@ + + + + + + + image/svg+xml + + + + Pablo Gil + + + + + SVG + template + + + + + + + +