Skip to content

Commit

Permalink
update gnome-shell popover message style
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinceliuice
vinceliuice committed Mar 24, 2020
1 parent 74816ce commit 84c5dd0
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 81 deletions.
6 changes: 3 additions & 3 deletions src/sass/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ $base_color: if($variant == 'light', #ffffff, #242424);
$text_color: if($variant == 'light', #363636, #dadada);
$bg_color: if($variant == 'light', #f5f5f5, #333333);
$fg_color: if($variant == 'light', #242424, #dedede);
$alt_fg_color: if($variant == 'light', #383838, #bbbbbb);
$hint_fg_color: if($variant == 'light', #525252, #999999);
$alt_fg_color: if($variant == 'light', #424242, #ababab);
$hint_fg_color: if($variant == 'light', #565656, #888888);

$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.10));
$visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.08));
Expand Down Expand Up @@ -105,7 +105,7 @@ $osd_button_bg: rgba(lighten($osd_bg_color, 22%), 0.96);
$osd_button_border: $dark_borders_color;
$osd_entry_bg: rgba(lighten($osd_bg_color, 22%), 0.96);
$osd_entry_border: $dark_borders_color;
$osd_disabled_bg_color: darken($osd_bg_color, 3%);
$osd_disabled_bg_color: darken($osd_bg_color, 3%);
$osd_disabled_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%);
$osd_borders_color: $borders_color;

Expand Down
151 changes: 84 additions & 67 deletions src/sass/gnome-shell/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1507,7 +1507,10 @@ $selected_slider_color: white;

/* Message list */
.message-list {
width: 420px;
width: 31.5em;
padding: 0 12px;

.message-list-placeholder { spacing: 12px; }
}

.message-list-clear-button.button {
Expand All @@ -1517,96 +1520,110 @@ $selected_slider_color: white;
margin: 8px 8px 0;
}

.message-list-sections {
spacing: 8px;
}

.message-list-section,
.message-list-sections,
.message-list-section-list {
spacing: 8px;
}

.message {
min-height: $menuitem_size * 2;
background-color: transparent;
border: 1px solid $borders_color;
// do-not-disturb + clear button
.message-list-controls {
margin: 8px 16px 0;
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: 4px;
spacing: 16px;
}

&:hover,&:focus { background-color: $divider_color; }
&:active { background-color: $track_color; }
$message_bg: if($variant == 'light', #ffffff, #383838);

.message {
border-radius: $bt_radius;
}
border: 1px solid if($variant == 'light', rgba(black, 0.12), rgba(black, 0.5));
color: $alt_fg_color;
background-color: $message_bg;
margin: 4px;
box-shadow: if($variant == 'light', $shadow_2, inset 0 1px rgba(white, 0.06));

.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
&:hover, &:focus { color: $fg_color; background-color: $visit_color; }
&:active { color: $fg_color; background-color: $track_color; }

.message-icon-bin > StIcon {
color: $fg_color;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
// icon container
.message-icon-bin {
margin: 8px 0;
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }

.message-secondary-bin {
padding: 0 8px;
}
// icon size and color
> StIcon {
icon-size: 32px; // 32px
-st-icon-style: symbolic;
}

.message-secondary-bin > .event-time {
min-height: $small_size - 2px;
padding-top: 2px;
color: $alt_fg_color;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
// fallback
> .fallback-app-icon {
width: 16px;
height: 16px;
}
}

.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-secondary-bin {
padding: 0 8px;

.message-title {
min-height: $small_size - 2px;
padding-top: 2px;
color: $fg_color;
font-weight: bold;
font-size: 1em;
}
> .event-time {
min-height: $small_size - 2px;
color: $hint_fg_color;
font-size: 1em;
text-align: right;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: 0.13em;
}
}

.message-content {
min-height: $menuitem_size * 2 - 8px * 2;
padding: 8px;
color: $alt_fg_color;
font-size: 1em;
}
.message-title {
min-height: $small_size - 2px;
padding-top: 2px;
color: $fg_color;
font-weight: bold;
font-size: 1em;
}

.message-content * > StIcon {
icon-size: 16px;
border-radius: 16px;
padding: ($small_size - 16px) / 2;
color: $alt_fg_color;
}
.message-content {
min-height: $menuitem_size * 2 - 8px * 2;
padding: 8px;
color: $hint_fg_color;
font-size: 1em;
}

/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $fg_color;
background-color: $divider_color;
// close button
.message-close-button {
color: $alt_fg_color;
padding: 0;
height: 24px;
width: 24px;
border-radius: 100px;

&:hover, &:active { color: $fg_color; }
&:hover, &:focus { background-color: $divider_color; }
&:active { background-color: $track_color; }
}

// body
.message-body {
color: $hint_fg_color;
}
}

.message-content *:active > StIcon {
color: $fg_color;
background-color: $track_color;
// URLs in messages
.url-highlighter {
link-color: $link_color;
}

.message-media-control {
margin: 16px 0;
margin: 24px 4px;
padding: 8px;
border-radius: 100px;
color: $alt_fg_color;
&:hover,&:focus { color: $fg_color; background-color: $divider_color; }
&:hover, &:focus { color: $fg_color; background-color: $divider_color; }
&:active { color: $fg_color; background-color: $track_color; }
&:insensitive { color: $disabled_fg_color; }

Expand Down
18 changes: 7 additions & 11 deletions src/sass/gtk/_applications.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2265,15 +2265,9 @@ window.thunar {

button.path-bar-button {
min-height: if($variant == 'light', 24px, 26px);
@if $variant=='dark' {
border: none;
}
}

@if $variant=='dark' {
button.path-bar-button {
border: none;
}
// @if $variant=='dark' {
// border: none;
// }
}

button.flat {
Expand All @@ -2282,6 +2276,8 @@ window.thunar {
border-width: 1px;
margin-left: 0;
margin-right: 0;
min-height: if($variant == 'light', 24px, 26px);
min-width: 22px;
background-clip: padding-box;

@if $variant=='dark' {
Expand Down Expand Up @@ -2368,9 +2364,9 @@ window.thunar {

// FIXME: need to unset for weird allocation height
entry {
min-height: if($variant == 'light', 16px, 16px);
// min-height: if($variant == 'light', 19px, 21px);
margin-top: -2px;
margin-bottom: -2px;
margin-bottom: -1px;
}
}

Expand Down

0 comments on commit 84c5dd0

Please sign in to comment.