155 lines
3.3 KiB
SCSS
155 lines
3.3 KiB
SCSS
/* Message List */
|
|
// a.k.a. notifications in the menu
|
|
|
|
.message-list {
|
|
width: 31.5em;
|
|
padding: $base_padding * 1.5 0;
|
|
text-shadow: none;
|
|
border: none;
|
|
|
|
// padding and margins to account for scrollbar
|
|
&:ltr { margin-left: 0; margin-right: 0; padding-right: 0; }
|
|
&:rtl { margin-right: 0; margin-left: 0; padding-left: 0; }
|
|
|
|
.message-list-placeholder {
|
|
spacing: 12px;
|
|
|
|
// icon size and color
|
|
> StIcon {
|
|
icon-size: $base_icon_size * 3; // 48px
|
|
margin-bottom: $base_margin * 3;
|
|
-st-icon-style: symbolic;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-list-sections {
|
|
margin: 0 $base_margin * 4; // to account for scrollbar
|
|
}
|
|
|
|
.message-list-section,
|
|
.message-list-sections,
|
|
.message-list-section-list {
|
|
spacing: $base_spacing;
|
|
}
|
|
|
|
// 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 * 2;
|
|
font-weight: normal;
|
|
}
|
|
|
|
// .message-list-clear-button.button {
|
|
// margin: 8px 8px;
|
|
// }
|
|
|
|
// message bubbles
|
|
.message {
|
|
margin: 0 4px 6px;
|
|
|
|
.popup-menu & {
|
|
@extend %popover_bubble;
|
|
}
|
|
|
|
// icon container
|
|
.message-icon-bin {
|
|
margin: 8px 0;
|
|
padding: 8px 0px 8px 8px;
|
|
&:rtl { padding: 8px 8px 8px 0px; }
|
|
|
|
// icon size and color
|
|
> StIcon {
|
|
icon-size: 32px;
|
|
-st-icon-style: symbolic;
|
|
}
|
|
|
|
// fallback
|
|
> .fallback-app-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.message-secondary-bin {
|
|
padding: 0 8px;
|
|
|
|
> .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-title {
|
|
min-height: $small_size - 2px;
|
|
padding-top: 2px;
|
|
color: $fg_color;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.message-content {
|
|
min-height: $menuitem_size * 2 - 8px * 2;
|
|
padding: 8px;
|
|
color: $hint_fg_color;
|
|
font-size: 1em;
|
|
}
|
|
|
|
// close button
|
|
.message-close-button {
|
|
color: $alt_fg_color;
|
|
padding: 0;
|
|
height: 24px;
|
|
width: 24px;
|
|
border-radius: $circular_radius;
|
|
|
|
&:hover, &:active { color: $fg_color; }
|
|
&:hover, &:focus { background-color: $divider_color; }
|
|
&:active { background-color: $track_color; }
|
|
}
|
|
|
|
// body
|
|
.message-body {
|
|
color: $hint_fg_color;
|
|
}
|
|
}
|
|
|
|
// URLs in messages
|
|
.url-highlighter {
|
|
link-color: $link_color;
|
|
}
|
|
|
|
.message-media-control {
|
|
margin: 16px 4px;
|
|
padding: 8px;
|
|
border-radius: $circular_radius;
|
|
color: $alt_fg_color;
|
|
&:hover, &:focus { color: $fg_color; background-color: $divider_color; }
|
|
&:active { color: $fg_color; background-color: $track_color; }
|
|
&:insensitive { color: $disabled_fg_color; }
|
|
|
|
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
|
|
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
|
|
}
|
|
|
|
// album-art
|
|
.media-message-cover-icon {
|
|
icon-size: 32px !important;
|
|
margin: 0 0 0 4px !important;
|
|
&:rtl { margin: 0 4px 0 0 !important; }
|
|
&.fallback {
|
|
icon-size: 16px !important;
|
|
padding: 8px;
|
|
border: none;
|
|
border-radius: $bt_radius;
|
|
background-color: $divider_color;
|
|
color: $hint_fg_color;
|
|
}
|
|
}
|