1/* Message List */ 2// a.k.a. notifications in the menu 3 4// main list 5.message-list { 6 width: 31.5em; 7 padding: 0 $base_padding * 2; 8 9 .message-list-placeholder { spacing: 12px; } 10} 11 12.message-list-sections { 13 spacing: $base_spacing; 14 margin: 0 $base_margin * 4; // to account for scrollbar 15} 16 17.message-list-section, 18.message-list-section-list { 19 spacing: $base_spacing; 20} 21 22// do-not-disturb + clear button 23.message-list-controls { 24 margin: ($base_margin * 2) ($base_margin * 4) 0; 25 // NOTE: remove the padding if notification_bubble could remove margin for drop shadow 26 padding: $base_margin; 27 spacing: $base_spacing * 2; 28} 29 30// message bubbles 31.message { 32 @include notification_bubble; 33 34 // icon container 35 .message-icon-bin { 36 padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2); 37 38 &:rtl { 39 padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0; 40 } 41 42 // icon size and color 43 > StIcon { 44 icon-size: $base_icon_size*2; // 32px 45 -st-icon-style: symbolic; 46 } 47 48 // fallback 49 > .fallback-app-icon { 50 width: $base_icon_size; 51 height: $base_icon_size; 52 } 53 } 54 55 // content 56 .message-content { 57 padding: $base_padding + $base_margin * 2; 58 spacing: 4px; 59 } 60 61 // title 62 .message-title { 63 font-weight: bold; 64 } 65 66 // secondary container in title box 67 .message-secondary-bin { 68 padding: 0 $base_margin * 2; 69 70 // notification time stamp 71 > .event-time { 72 color: transparentize($fg_color, 0.5); 73 @include fontsize($base_font_size - 2); 74 /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ 75 padding-bottom: 0.13em; 76 77 &:ltr { text-align: right }; 78 &:rtl { text-align: left }; 79 } 80 } 81 82 // close button 83 .message-close-button { 84 color: lighten($fg_color, 15%); 85 &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } 86 &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } 87 } 88 89 // body 90 .message-body { 91 color: darken($fg_color, 10%); 92 } 93} 94 95// URLs in messages 96.url-highlighter { 97 link-color: $link_color; 98} 99 100/* Media Controls */ 101.message-media-control { 102 padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px 103 color: darken($fg_color, 15%); 104 105 // uses $hover_bg_color since the media controls are in a notification_bubble 106 &:hover { 107 background-color: lighten($hover_bg_color, 5%); 108 color: $fg_color; 109 } 110 111 &:active { 112 background-color: darken($hover_bg_color, 2%); 113 color: $fg_color; 114 } 115 116 &:insensitive { color: darken($fg_color,40%); } 117 118 // fix border-radius for last button 119 &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; } 120 &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; } 121} 122 123// album-art 124.media-message-cover-icon { 125 icon-size: $base_icon_size*2 !important; // 48px 126 border-radius: $base_border_radius; 127 128 // when there is no artwork 129 &.fallback { 130 color: darken($fg_color, 17%); 131 background-color: $bg_color; 132 border: 1px solid transparent; 133 border-radius: $base_border_radius; 134 icon-size: $base_icon_size * 2 !important; 135 } 136} 137