by roundabout, Thursday, 27 February 2020, 16:53:09 (1582822389), pushed by roundabout, Sunday, 11 May 2025, 13:22:48 (1746969768)
Author identity: nana-4 <hnmaigo@gmail.com>
7856be641b6db45a41a8cf44009ce10a92aed188
src/_sass/gnome-shell/_common-3.26.scss
@@ -616,148 +616,6 @@
}
}
.message-list-sections {
margin: 0 8px;
}
.message-list-section-list:ltr {
padding-left: 0;
}
.message-list-section-list:rtl {
padding-right: 0;
}
/* Message list */
.message-list {
width: 420px;
}
.message-list-clear-button.button {
background-color: transparent;
&:focus { background-color: $primary-overlay-focus; }
&:hover { background-color: $primary-overlay-hover; }
&:active { background-color: $primary-overlay-active; }
margin: 8px 8px 0;
}
.message-list-sections {
spacing: 8px;
}
.message-list-section,
.message-list-section-list {
spacing: 8px;
}
.message {
transition-duration: $duration;
min-height: $menuitem-size * 2;
background-color: transparent;
&:hover,&:focus { background-color: $overlay-hover; }
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
border-radius: $corner-radius;
}
.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
.message-icon-bin > StIcon {
color: $text;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
.message-secondary-bin {
padding: 0 8px;
}
.message-secondary-bin > .event-time {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text;
font-weight: bold;
font-size: 1em;
}
.message-content {
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
color: $text2;
font-size: 1em;
}
.message-content * > StIcon {
transition-duration: $duration;
icon-size: 16px;
border-radius: 16px;
padding: ($small-size - 16px) / 2;
color: $text2;
}
/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $text;
background-color: $overlay-hover;
}
.message-content *:active > StIcon {
transition-duration: $duration-ripple;
color: $text;
background-color: $overlay-active;
}
.message-media-control {
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 100px;
color: $text2;
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
&:insensitive { color: $text2-disabled; }
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}
.media-message-cover-icon {
icon-size: 32px !important;
margin: 8px 0px 8px 4px !important;
&:rtl { margin: 8px 4px 8px 0px !important; }
&.fallback {
icon-size: 16px !important;
padding: 8px;
border: none;
border-radius: $corner-radius;
background-color: $stroke-disabled;
color: $text-disabled;
}
}
// a little unstructured mess:
#appMenu {
@@ -1202,8 +1060,6 @@
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter { link-color: $primary; }
// Banners
.notification-banner {
font-size: 1em;
src/_sass/gnome-shell/_common-3.28.scss
@@ -616,148 +616,6 @@
}
}
.message-list-sections {
margin: 0 8px;
}
.message-list-section-list:ltr {
padding-left: 0;
}
.message-list-section-list:rtl {
padding-right: 0;
}
/* Message list */
.message-list {
width: 420px;
}
.message-list-clear-button.button {
background-color: transparent;
&:focus { background-color: $primary-overlay-focus; }
&:hover { background-color: $primary-overlay-hover; }
&:active { background-color: $primary-overlay-active; }
margin: 8px 8px 0;
}
.message-list-sections {
spacing: 8px;
}
.message-list-section,
.message-list-section-list {
spacing: 8px;
}
.message {
transition-duration: $duration;
min-height: $menuitem-size * 2;
background-color: transparent;
&:hover,&:focus { background-color: $overlay-hover; }
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
border-radius: $corner-radius;
}
.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
.message-icon-bin > StIcon {
color: $text;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
.message-secondary-bin {
padding: 0 8px;
}
.message-secondary-bin > .event-time {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text;
font-weight: bold;
font-size: 1em;
}
.message-content {
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
color: $text2;
font-size: 1em;
}
.message-content * > StIcon {
transition-duration: $duration;
icon-size: 16px;
border-radius: 16px;
padding: ($small-size - 16px) / 2;
color: $text2;
}
/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $text;
background-color: $overlay-hover;
}
.message-content *:active > StIcon {
transition-duration: $duration-ripple;
color: $text;
background-color: $overlay-active;
}
.message-media-control {
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 100px;
color: $text2;
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
&:insensitive { color: $text2-disabled; }
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}
.media-message-cover-icon {
icon-size: 32px !important;
margin: 8px 0px 8px 4px !important;
&:rtl { margin: 8px 4px 8px 0px !important; }
&.fallback {
icon-size: 16px !important;
padding: 8px;
border: none;
border-radius: $corner-radius;
background-color: $stroke-disabled;
color: $text-disabled;
}
}
// a little unstructured mess:
#appMenu {
@@ -1202,8 +1060,6 @@
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter { link-color: $primary; }
// Banners
.notification-banner {
font-size: 1em;
src/_sass/gnome-shell/_common-3.30.scss
@@ -617,148 +617,6 @@
}
}
.message-list-sections {
margin: 0 8px;
}
.message-list-section-list:ltr {
padding-left: 0;
}
.message-list-section-list:rtl {
padding-right: 0;
}
/* Message list */
.message-list {
width: 420px;
}
.message-list-clear-button.button {
background-color: transparent;
&:focus { background-color: $primary-overlay-focus; }
&:hover { background-color: $primary-overlay-hover; }
&:active { background-color: $primary-overlay-active; }
margin: 8px 8px 0;
}
.message-list-sections {
spacing: 8px;
}
.message-list-section,
.message-list-section-list {
spacing: 8px;
}
.message {
transition-duration: $duration;
min-height: $menuitem-size * 2;
background-color: transparent;
&:hover,&:focus { background-color: $overlay-hover; }
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
border-radius: $corner-radius;
}
.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
.message-icon-bin > StIcon {
color: $text;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
.message-secondary-bin {
padding: 0 8px;
}
.message-secondary-bin > .event-time {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text;
font-weight: bold;
font-size: 1em;
}
.message-content {
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
color: $text2;
font-size: 1em;
}
.message-content * > StIcon {
transition-duration: $duration;
icon-size: 16px;
border-radius: 16px;
padding: ($small-size - 16px) / 2;
color: $text2;
}
/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $text;
background-color: $overlay-hover;
}
.message-content *:active > StIcon {
transition-duration: $duration-ripple;
color: $text;
background-color: $overlay-active;
}
.message-media-control {
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 100px;
color: $text2;
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
&:insensitive { color: $text2-disabled; }
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}
.media-message-cover-icon {
icon-size: 32px !important;
margin: 8px 0px 8px 4px !important;
&:rtl { margin: 8px 4px 8px 0px !important; }
&.fallback {
icon-size: 16px !important;
padding: 8px;
border: none;
border-radius: $corner-radius;
background-color: $stroke-disabled;
color: $text-disabled;
}
}
// a little unstructured mess:
#appMenu {
@@ -1203,8 +1061,6 @@
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter { link-color: $primary; }
// Banners
.notification-banner {
font-size: 1em;
src/_sass/gnome-shell/_common-3.32.scss
@@ -616,153 +616,6 @@
}
}
.message-list-sections {
margin: 0 8px;
}
.message-list-section-list:ltr {
padding-left: 0;
}
.message-list-section-list:rtl {
padding-right: 0;
}
/* Message list */
.message-list {
width: 420px;
}
.message-list-clear-button.button {
background-color: transparent;
&:focus { background-color: $primary-overlay-focus; }
&:hover { background-color: $primary-overlay-hover; }
&:active { background-color: $primary-overlay-active; }
margin: 8px 8px 0;
}
.message-list-sections {
spacing: 8px;
}
.message-list-section,
.message-list-section-list {
spacing: 8px;
}
.message {
transition-duration: $duration;
min-height: $menuitem-size * 2;
background-color: transparent;
&:hover,&:focus { background-color: $overlay-hover; }
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
border-radius: $corner-radius;
}
.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
.message-icon-bin > StIcon {
color: $text;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
.message-icon-bin > .fallback-window-icon {
width: em(16px);
height: em(16px);
}
.message-secondary-bin {
padding: 0 8px;
}
.message-secondary-bin > .event-time {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text;
font-weight: bold;
font-size: 1em;
}
.message-content {
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
color: $text2;
font-size: 1em;
}
.message-content * > StIcon {
transition-duration: $duration;
icon-size: 16px;
border-radius: 16px;
padding: ($small-size - 16px) / 2;
color: $text2;
}
/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $text;
background-color: $overlay-hover;
}
.message-content *:active > StIcon {
transition-duration: $duration-ripple;
color: $text;
background-color: $overlay-active;
}
.message-media-control {
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 100px;
color: $text2;
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
&:insensitive { color: $text2-disabled; }
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}
.media-message-cover-icon {
icon-size: 32px !important;
margin: 8px 0px 8px 4px !important;
&:rtl { margin: 8px 4px 8px 0px !important; }
&.fallback {
icon-size: 16px !important;
padding: 8px;
border: none;
border-radius: $corner-radius;
background-color: $stroke-disabled;
color: $text-disabled;
}
}
// a little unstructured mess:
#appMenu {
@@ -1238,8 +1091,6 @@
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter { link-color: $primary; }
// Banners
.notification-banner {
font-size: 1em;
src/_sass/gnome-shell/_common-3.34.scss
@@ -657,151 +657,6 @@
}
}
.message-list-sections {
margin: 0 8px;
}
.message-list-section-list:ltr {
padding-left: 0;
}
.message-list-section-list:rtl {
padding-right: 0;
}
/* Message list */
.message-list {
width: 420px;
}
.message-list-clear-button.button {
@extend %button;
margin: 8px 8px 0;
}
.message-list-sections {
spacing: 8px;
}
.message-list-section,
.message-list-section-list {
spacing: 8px;
}
.message {
transition-duration: $duration;
min-height: $menuitem-size * 2;
border: none;
background-color: transparent;
&:hover,&:focus { background-color: $overlay-hover; }
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
border-radius: $corner-radius;
}
.message-icon-bin {
padding: 8px 0px 8px 8px;
&:rtl { padding: 8px 8px 8px 0px; }
}
.message-icon-bin > StIcon {
color: $text;
icon-size: em(16px);
-st-icon-style: requested;
margin: 4px 0px 4px 4px;
&:rtl { margin: 4px 4px 4px 0px; }
}
.message-icon-bin > .fallback-window-icon {
width: em(16px);
height: em(16px);
}
.message-secondary-bin {
padding: 0 8px;
}
.message-secondary-bin > .event-time {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0;
}
.message-secondary-bin > StIcon {
icon-size: em(16px);
}
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: $text;
font-weight: bold;
font-size: 1em;
}
.message-content {
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
color: $text2;
font-size: 1em;
}
.message-content * > StIcon {
transition-duration: $duration;
icon-size: 16px;
border-radius: 16px;
padding: ($small-size - 16px) / 2;
color: $text2;
}
/* FIXME: how do you do this in sass? */
.message-content *:hover > StIcon,
.message-content *:focus > StIcon {
color: $text;
background-color: $overlay-hover;
}
.message-content *:active > StIcon {
transition-duration: $duration-ripple;
color: $text;
background-color: $overlay-active;
}
.message-media-control {
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 100px;
color: $text2;
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
&:insensitive { color: $text2-disabled; }
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}
.media-message-cover-icon {
icon-size: 32px !important;
margin: 8px 0px 8px 4px !important;
&:rtl { margin: 8px 4px 8px 0px !important; }
&.fallback {
icon-size: 16px !important;
padding: 8px;
border: none;
border-radius: $corner-radius;
background-color: $stroke-disabled;
color: $text-disabled;
}
}
// a little unstructured mess:
#appMenu {
@@ -1295,8 +1150,6 @@
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter { link-color: $primary; }
// Banners
.notification-banner {
font-size: 1em;
src/_sass/gnome-shell/_components.scss
@@ -15,7 +15,7 @@
// Popovers
@import 'components/menu/menu';
@import 'components/menu/calendar';
// @import 'components/menu/message-list';
@import 'components/menu/message-list';
// @import 'components/menu/candidate-popup';
// Notifications
// @import 'components/notification/notification';
src/_sass/gnome-shell/components/menu/_message-list.scss
@@ -4,131 +4,217 @@
// main list
.message-list {
width: 31.5em;
padding: 0 $base_padding * 2;
padding: 0;
.message-list-placeholder { spacing: 12px; }
.message-list-placeholder {
spacing: 12px;
}
}
.message-list-sections {
spacing: $base_spacing;
margin: 0 $base_margin * 4; // to account for scrollbar
spacing: 8px;
margin: 0 8px; // to account for scrollbar
}
.message-list-section,
.message-list-section-list {
spacing: $base_spacing;
spacing: 8px;
}
.message-list-section-list {
&:ltr {
padding-left: 0;
}
&:rtl {
padding-right: 0;
}
}
// do-not-disturb + clear button
.message-list-controls {
margin: ($base_margin * 2) ($base_margin * 4) 0;
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_margin;
spacing: $base_spacing;
@if $version >= 3.36 {
// do-not-disturb + clear button
.message-list-controls {
margin: 8px 8px 0;
padding: 0;
spacing: 8px;
}
} @else {
// clear button
.message-list-clear-button.button {
@extend %button;
margin: 8px 8px 0;
}
}
// message bubbles
.message {
@include notification_bubble;
@extend %calendar-item;
min-height: $menuitem-size * 2;
// icon container
.message-icon-bin {
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
padding: 12px 0 12px 12px;
&:rtl {
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
padding: 12px 12px 12px 0;
}
// icon size and color
> StIcon {
icon-size: $base_icon_size*2; // 32px
-st-icon-style: symbolic;
-st-icon-style: requested;
icon-size: 16px;
color: inherit;
&,
&:rtl {
margin: 0;
}
}
// fallback
> .fallback-app-icon {
width: $base_icon_size;
height: $base_icon_size;
width: 16px;
height: 16px;
}
}
// content
.message-content {
padding: $base_padding + $base_margin * 2;
spacing: 4px;
min-height: $menuitem-size * 2 - 8px * 2;
padding: 8px;
spacing: 0;
color: inherit;
font-size: 1em;
}
// title
.message-title {
min-height: $small-size - 2px;
padding-top: 2px;
color: inherit;
font-weight: bold;
font-size: 1em;
}
// secondary container in title box
.message-secondary-bin {
padding: 0 $base_margin * 2;
padding: 0 8px;
// notification time stamp
> .event-time {
color: transparentize($fg_color, 0.5);
@include fontsize($base_font_size - 2);
min-height: $small-size - 2px;
padding-top: 2px;
color: $text2;
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;
// HACK: the label should be baseline-aligned with a 1em label,
// fake this with some bottom padding
padding-bottom: 0;
}
> StIcon {
icon-size: 16px;
}
}
// close button
.message-close-button {
color: lighten($fg_color, 15%);
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
$message-close-button: if($version >= 3.36, ".message-close-button", ".message-content > StBoxLayout > StButton");
#{$message-close-button} {
transition-duration: $duration;
icon-size: 16px;
padding: ($small-size - 16px) / 2;
border-radius: $small-size / 2;
&,
&:hover,
&:active {
color: $text2;
}
&:focus {
background-color: $overlay-focus;
}
&:hover {
background-color: $overlay-hover;
}
&:active {
transition-duration: $duration-ripple;
background-color: $overlay-active;
}
}
// body
.message-body {
color: darken($fg_color, 10%);
color: $text2;
}
}
// URLs in messages
.url-highlighter {
link-color: $link_color;
link-color: $primary;
}
/* Media Controls */
.message-media-control {
padding: $base_padding * 2 $base_padding * 4;
color: darken($fg_color, 15%);
transition-duration: $duration;
margin: 16px 0;
padding: 8px;
border-radius: 16px;
&,
&:focus,
&:hover,
&:active {
color: $text2;
}
&:focus {
background-color: $overlay-focus;
}
// uses $hover_bg_color since the media controls are in a notification_bubble
&:hover {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;
background-color: $overlay-hover;
}
&:active {
background-color: $overlay-active;
transition-duration: $duration-ripple;
}
&:active {
background-color: darken($hover_bg_color, 2%);
color: $fg_color;
&:insensitive {
color: $text2-disabled;
}
&:insensitive { color: darken($fg_color,40%); }
// fix border-radius for last button
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
&:last-child:ltr {
margin-right: 16px;
padding-right: 8px;
border-radius: 16px;
}
&:last-child:rtl {
margin-left: 16px;
padding-left: 8px;
border-radius: 16px;
}
}
// album-art
.media-message-cover-icon {
icon-size: $base_icon_size*2 !important; // 48px
border-radius: $base_border_radius;
icon-size: 32px !important;
margin: 4px 0 !important;
border-radius: 0;
// when there is no artwork
&.fallback {
color: darken($fg_color, 17%);
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important;
icon-size: 16px !important;
padding: 8px;
border: 0;
border-radius: $corner-radius;
background-color: $fill;
color: $text-disabled !important;
}
}