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 .dnd-button { 30 // We need this because the focus outline isn't inset like for the buttons 31 // so the dnd button would grow when it gets focus if we didn't change only 32 // its color when focusing. 33 border-width: 2px; 34 border-color: transparent; 35 border-radius: 99px; 36 border-style: solid; 37 38 &:focus { 39 border-color: transparentize($selected_bg_color, 0.4); 40 } 41 } 42} 43 44// message bubbles 45.message { 46 @include notification_bubble; 47 48 // icon container 49 .message-icon-bin { 50 padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2); 51 52 &:rtl { 53 padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0; 54 } 55 56 // icon size and color 57 > StIcon { 58 icon-size: $base_icon_size*2; // 32px 59 -st-icon-style: symbolic; 60 } 61 62 // fallback 63 > .fallback-app-icon { 64 width: $base_icon_size; 65 height: $base_icon_size; 66 } 67 } 68 69 // content 70 .message-content { 71 padding: $base_padding + $base_margin * 2; 72 spacing: 4px; 73 } 74 75 // title 76 .message-title { 77 font-weight: bold; 78 } 79 80 // secondary container in title box 81 .message-secondary-bin { 82 padding: 0 $base_margin * 2; 83 84 // notification time stamp 85 > .event-time { 86 color: transparentize($fg_color, 0.5); 87 @include fontsize($base_font_size - 2); 88 /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ 89 padding-bottom: 0.13em; 90 91 &:ltr { text-align: right }; 92 &:rtl { text-align: left }; 93 } 94 } 95 96 // close button 97 .message-close-button { 98 color: lighten($fg_color, 15%); 99 &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } 100 &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } 101 } 102 103 // body 104 .message-body { 105 color: darken($fg_color, 10%); 106 } 107} 108 109// URLs in messages 110.url-highlighter { 111 link-color: $link_color; 112} 113 114/* Media Controls */ 115.message-media-control { 116 padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px 117 color: darken($fg_color, 15%); 118 119 // uses $hover_bg_color since the media controls are in a notification_bubble 120 &:hover { 121 background-color: lighten($hover_bg_color, 5%); 122 color: $fg_color; 123 } 124 125 &:active { 126 background-color: darken($hover_bg_color, 2%); 127 color: $fg_color; 128 } 129 130 &:insensitive { color: darken($fg_color,40%); } 131 132 // fix border-radius for last button 133 &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; } 134 &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; } 135} 136 137// album-art 138.media-message-cover-icon { 139 icon-size: $base_icon_size*2 !important; // 48px 140 border-radius: $base_border_radius; 141 142 // when there is no artwork 143 &.fallback { 144 color: darken($fg_color, 17%); 145 background-color: $bg_color; 146 border: 1px solid transparent; 147 border-radius: $base_border_radius; 148 icon-size: $base_icon_size * 2 !important; 149 } 150} 151