Gnome: Improve message dialogs appearance

This commit is contained in:
EliverLara
2024-03-14 16:00:10 -06:00
parent 8967968299
commit 113a3853e5
3 changed files with 85 additions and 69 deletions
+38 -33
View File
@@ -1563,39 +1563,44 @@ combobox:drop(active) {
/***********
* Dialogs *
***********/
messagedialog .titlebar:not(headerbar) {
background-color: rgba(67, 76, 94, 0.95); }
messagedialog .titlebar {
min-height: 20px;
background-image: none;
background-color: rgba(67, 76, 94, 0.95);
border-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
messagedialog.csd.background {
background-color: rgba(67, 76, 94, 0.95);
color: #d8dee9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button {
padding: 10px 14px;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
background-color: transparent;
color: #d8dee9;
box-shadow: none; }
messagedialog.csd .dialog-action-area button:hover {
background-color: rgba(129, 161, 193, 0.9);
color: white; }
messagedialog.csd .dialog-action-area button:first-child {
border-left-style: none;
border-bottom-left-radius: 4px; }
messagedialog.csd .dialog-action-area button:last-child {
border-bottom-right-radius: 4px; }
messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action {
color: white; }
messagedialog, .messagedialog, .dialog {
background-color: #2e3440; }
messagedialog .titlebar:not(headerbar), .messagedialog .titlebar:not(headerbar), .dialog .titlebar:not(headerbar) {
background-color: rgba(67, 76, 94, 0.95); }
messagedialog .titlebar, .messagedialog .titlebar, .dialog .titlebar {
min-height: 20px;
background-image: none;
background-color: rgba(67, 76, 94, 0.95);
border-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
messagedialog.csd.background, .messagedialog.csd.background, .dialog.csd.background {
background-color: rgba(35, 40, 49, 0.95);
color: #d8dee9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button, .messagedialog.csd .dialog-action-area button, .dialog.csd .dialog-action-area button {
padding: 7px 11px;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
background-color: transparent;
color: #d8dee9;
box-shadow: none; }
messagedialog.csd .dialog-action-area button:hover, .messagedialog.csd .dialog-action-area button:hover, .dialog.csd .dialog-action-area button:hover {
background-color: rgba(129, 161, 193, 0.9);
color: white; }
messagedialog.csd .dialog-action-area button:first-child, .messagedialog.csd .dialog-action-area button:first-child, .dialog.csd .dialog-action-area button:first-child {
border-left-style: none;
border-bottom-left-radius: 4px; }
messagedialog.csd .dialog-action-area button:last-child, .messagedialog.csd .dialog-action-area button:last-child, .dialog.csd .dialog-action-area button:last-child {
border-bottom-right-radius: 4px; }
messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, .messagedialog.csd .dialog-action-area button.destructive-action, .messagedialog.csd .dialog-action-area button.suggested-action, .dialog.csd .dialog-action-area button.destructive-action, .dialog.csd .dialog-action-area button.suggested-action {
color: white; }
.messagedialog .message-area {
padding: 26px; }
filechooser .dialog-action-box {
border-top: 1px solid #232831; }
+38 -33
View File
@@ -1563,39 +1563,44 @@ combobox:drop(active) {
/***********
* Dialogs *
***********/
messagedialog .titlebar:not(headerbar) {
background-color: rgba(67, 76, 94, 0.95); }
messagedialog .titlebar {
min-height: 20px;
background-image: none;
background-color: rgba(67, 76, 94, 0.95);
border-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
messagedialog.csd.background {
background-color: rgba(67, 76, 94, 0.95);
color: #d8dee9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button {
padding: 10px 14px;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
background-color: transparent;
color: #d8dee9;
box-shadow: none; }
messagedialog.csd .dialog-action-area button:hover {
background-color: rgba(129, 161, 193, 0.9);
color: white; }
messagedialog.csd .dialog-action-area button:first-child {
border-left-style: none;
border-bottom-left-radius: 4px; }
messagedialog.csd .dialog-action-area button:last-child {
border-bottom-right-radius: 4px; }
messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action {
color: white; }
messagedialog, .messagedialog, .dialog {
background-color: #2e3440; }
messagedialog .titlebar:not(headerbar), .messagedialog .titlebar:not(headerbar), .dialog .titlebar:not(headerbar) {
background-color: rgba(67, 76, 94, 0.95); }
messagedialog .titlebar, .messagedialog .titlebar, .dialog .titlebar {
min-height: 20px;
background-image: none;
background-color: rgba(67, 76, 94, 0.95);
border-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
messagedialog.csd.background, .messagedialog.csd.background, .dialog.csd.background {
background-color: rgba(35, 40, 49, 0.95);
color: #d8dee9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button, .messagedialog.csd .dialog-action-area button, .dialog.csd .dialog-action-area button {
padding: 7px 11px;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
background-color: transparent;
color: #d8dee9;
box-shadow: none; }
messagedialog.csd .dialog-action-area button:hover, .messagedialog.csd .dialog-action-area button:hover, .dialog.csd .dialog-action-area button:hover {
background-color: rgba(129, 161, 193, 0.9);
color: white; }
messagedialog.csd .dialog-action-area button:first-child, .messagedialog.csd .dialog-action-area button:first-child, .dialog.csd .dialog-action-area button:first-child {
border-left-style: none;
border-bottom-left-radius: 4px; }
messagedialog.csd .dialog-action-area button:last-child, .messagedialog.csd .dialog-action-area button:last-child, .dialog.csd .dialog-action-area button:last-child {
border-bottom-right-radius: 4px; }
messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, .messagedialog.csd .dialog-action-area button.destructive-action, .messagedialog.csd .dialog-action-area button.suggested-action, .dialog.csd .dialog-action-area button.destructive-action, .dialog.csd .dialog-action-area button.suggested-action {
color: white; }
.messagedialog .message-area {
padding: 26px; }
filechooser .dialog-action-box {
border-top: 1px solid #232831; }
+9 -3
View File
@@ -1,7 +1,9 @@
/***********
* Dialogs *
***********/
messagedialog { // Message Dialog styling
messagedialog, .messagedialog, .dialog { // Message Dialog styling
background-color: $main_dark_color;
.titlebar:not(headerbar) {
background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);
}
@@ -16,7 +18,7 @@ messagedialog { // Message Dialog styling
&.csd { // rounded bottom border styling for csd version
&.background {
background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);
background-color: transparentize(if($variant=='light', $headerbar_color, darken($main_dark_color, 5%)), 0.05);
color: if($variant=='light', $headerbar_fg_color, $fg_color);
// bigger radius for better antialiasing
@@ -25,7 +27,7 @@ messagedialog { // Message Dialog styling
}
.dialog-action-area button {
padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
padding: 7px 11px; // labels are not vertically centered on message dialog, this is a workaround
border-radius: 0;
border-left-style: solid;
border-right-style: none;
@@ -54,6 +56,10 @@ messagedialog { // Message Dialog styling
}
}
.messagedialog .message-area {
padding: 26px;
}
filechooser {
.dialog-action-box {
border-top: 1px solid $borders_color;