discourse/app/assets/stylesheets/common/components/banner.scss

// --------------------------------------------------
// Banner
// --------------------------------------------------

#banner {
  padding: 1em;
  background: var(--tertiary-low);
  color: var(--primary);
  z-index: z("base") + 1;
  margin-bottom: 1em;
  max-height: 20vh;
  overflow: auto;

  .floated-buttons {
    float: right;
    display: flex;

    > .btn {
      padding-top: 0em;
      padding-bottom: 0em;
      color: var(--primary-high);
      .d-icon {
        color: var(--primary-medium);
      }

      &:hover {
        color: var(--primary);
        .d-icon {
          color: var(--primary-high);
        }
      }
    }

    .desktop-view & .btn.close {
      margin-left: 0.25em;
    }
  }
}

#banner-content {
  hr {
    border-color: var(--primary-medium);
  }

  > p:first-child {
    margin-top: 0;
  }

  > p:last-of-type {
    margin-bottom: 0;
  }
}
FEATURE: dismissable banner topic 2014-06-19 02:04:10 +08:00			`// --------------------------------------------------`
			`// Banner`
			`// --------------------------------------------------`

UX: banner topic's background was blue 2015-03-30 16:42:14 +08:00			`#banner {`
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00			`padding: 1em;`
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting. 2020-08-04 10:57:10 +08:00			`background: var(--tertiary-low);`
			`color: var(--primary);`
UX: Implementing a z-index system (#5507) 2018-01-17 08:05:12 +08:00			`z-index: z("base") + 1;`
UX: margin improvement for mobile alerts 2021-06-25 03:21:11 +08:00			`margin-bottom: 1em;`
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00			`max-height: 20vh;`
FIX: banner topic's max-width & max-height on both mobile & desktop 2014-08-28 22:15:48 +08:00			`overflow: auto;`
FEATURE: overlay the banner when reading a topic 2014-06-21 00:53:12 +08:00
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00			`.floated-buttons {`
UX: Change banner close button to be floated to the right 2017-04-25 08:51:02 +08:00			`float: right;`
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00			`display: flex;`

			`> .btn {`
			`padding-top: 0em;`
			`padding-bottom: 0em;`
			`color: var(--primary-high);`
			`.d-icon {`
			`color: var(--primary-medium);`
			`}`

			`&:hover {`
			`color: var(--primary);`
			`.d-icon {`
			`color: var(--primary-high);`
			`}`
			`}`
UX: Improve banner & alert close button alignment and consistency 2020-05-08 10:57:52 +08:00			`}`
TRIVIAL: remove default 'Read more' link in the banner 2014-06-21 00:56:26 +08:00
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00			`.desktop-view & .btn.close {`
			`margin-left: 0.25em;`
			`}`
FEATURE: dismissable banner topic 2014-06-19 02:04:10 +08:00			`}`
			`}`
UX: Improve banner & alert close button alignment and consistency 2020-05-08 10:57:52 +08:00
			`#banner-content {`
			`hr {`
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting. 2020-08-04 10:57:10 +08:00			`border-color: var(--primary-medium);`
UX: Improve banner & alert close button alignment and consistency 2020-05-08 10:57:52 +08:00			`}`
UX: Styling changes to global banner (#16191) 2022-03-15 23:19:55 +08:00
			`> p:first-child {`
			`margin-top: 0;`
			`}`

			`> p:last-of-type {`
			`margin-bottom: 0;`
			`}`
UX: Improve banner & alert close button alignment and consistency 2020-05-08 10:57:52 +08:00			`}`