gnome-shell/data/theme/gnome-shell-sass/widgets/_message-list.scss

/* Message List */
// a.k.a. notifications in the date menu

// main list
.message-list {
  width: 29em;
  border: solid $borders_color;

  // padding to account for scrollbar and border width for fake separator
  &:ltr {padding-right: $base_padding; border-right-width: 1px;}
  &:rtl {padding-left: $base_padding; border-left-width: 1px;}

  // "No Notifications" label and icon
  .message-list-placeholder {
    @extend %title_2;
    color: transparentize($insensitive_fg_color, .5);
    spacing: $base_padding*3;

    > StIcon {
      icon-size: $base_icon_size*3; // 48px
      -st-icon-style: symbolic;
    }
  }

  // list of sections in the main list
  .message-list-sections {
    // to account for scrollbar
    &:ltr {margin-right: $base_margin * 3;}
    &:rtl {margin-left: $base_margin * 3;}

    // section in the list of sections in the main list
    .message-list-section {

      // list within the section in the list of sections in the main list :)
      .message-list-section-list {
        // spacing between list items (i.e. notification bubbles)
        spacing: $base_padding;
        padding-bottom: $base_padding;
      }
    }
  }
}

// do-not-disturb + clear button
.message-list-controls {
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: $base_padding;
  spacing: $base_padding;
  @extend %heading;

  .dnd-button {
    // We need this because the focus outline isn't inset like for the buttons
    // so the dnd button would grow when it gets focus if we didn't change only
    // its color when focusing.
    border-width: 2px;
    border-color: transparent;
    border-radius: 32px;
    border-style: solid;

    &:focus {
      border-color: transparentize($selected_bg_color, 0.4);
    }
  }

  .message-list-clear-button {
    border-radius: 16px; // round the clear button
  }
}

// message bubbles
.message {
  @include card;

  // container of the message
  .message-box {
    padding:$base_padding*2;
    spacing: $base_padding*2;

    // icon container
    .message-icon-bin {
      // icon size and color
      > StIcon {
        icon-size: $large_icon_size; // 32px
        -st-icon-style: symbolic;
      }

      // fallback icon
      > .fallback-app-icon {
        width: $large_icon_size;
        height: $large_icon_size;
      }
    }

    // content
    .message-content {
      spacing: 2px;

      // title container
      .message-titlebox {
        spacing: $base_padding;

        // title
        .message-title {
          @extend %heading;
        }

        // secondary container in title box
        .message-secondary-bin {
          color: $insensitive_fg_color;
          @include fontsize($base_font_size - 2);

          // though it is aligned to the bottom
          // this is needed for visual alignment
          padding-bottom: 1px;
        }
      }

      // body
      .message-body {
        color: transparentize($fg_color, 0.2);
      }
    }

    // close button
    .message-close-button {
      color: $fg_color;
      background-color: transparentize($fg_color, 0.9);
      border-radius: 99px;
      padding: $base_padding - 1px;

      &:hover { background-color: transparentize($fg_color, 0.8); }
      &:active { background-color: transparentize($fg_color, 0.9); }

      > StIcon { icon-size: $base_icon_size; }
    }
  }
}

// URLs in messages
.url-highlighter {
  link-color: $link_color;
}

/* Media Player */
.media-message-player {

  // overrides
  .message-content {
    // this is needed to visually align it with the album art
    margin-top: $base_margin;
    padding-top: $base_padding;
  }

  // controls
  .message-media-controls {

    .message-media-control {
      padding: $base_padding*3;
      border-radius: 999px;
      color: $fg_color;

      // colors are lightened since the media controls are in a card
      &:hover { background-color: lighten($hover_bg_color, 10%);}
      &:active { background-color: lighten($active_bg_color, 10%);}
      &:insensitive { color: transparentize($insensitive_fg_color, 0.2);}

      > StIcon { icon-size: $base_icon_size; }
    }
  }

  // album-art
  .media-message-cover-icon {
    icon-size: $base_icon_size*4 !important; // 64px
    border-radius: $base_border_radius;
    background-color: transparentize($fg_color, 0.9);

    // when there is no artwork
    &.fallback {
      color: transparentize($fg_color, 0.2);
      icon-size: $large_icon_size !important; // 32px
      padding: ($base_padding*2 + 2); // 16px
    }
  }
}