bulib-wc/src/announce/announce.css

collection of web components and styles used at Boston University Libraries

html { 
  --bulib-announce-font-size: medium; 
  --bulib-announce-cta-font-weight: bold;
}

/* main announce-banner styling */
div.announce-banner {
  background-color: lightblue;
  width: 100%;
  font-size: var(--bulib-announce-font-size, inherit);
  text-align: center;
  border: 1px solid var(--color-secondary-background-dark, black);
  border-radius: 2px;
  margin-top: 0px !important;
  padding: 5px;
  display: inline-block;
}

/* hide announce banner if it's been disabled, unless 'debug' attribute is also present */
div.announce-banner[disabled], div.announce-banner[disabled="true"] { display: none; }
div.announce-banner[disabled="false"] { display: inline-block; }
bulib-announce[debug] > div.announce-banner[disabled="true"], div.announce-banner[debug][disabled="true"]{
  display: inline-block !important;
  background-color: var(--color-accent-background, red) !important;
  color: yellow !important;
}

/* add horizontal spacing between outer-most children */
div.announce-banner > *:first-child { margin-right: 1%; }
div.announce-banner > *:last-child { margin-left: 1%; }

/* style message (with background) */
.announce-banner a:hover { 
  text-decoration: underline; 
  color: var(--color-button-background-dark, #257abe); 
}
.announce-banner a:visited { color: var(--color-button-background-dark, #257abe); }
.announce-banner a { 
  font-weight: var(--bulib-announce-cta-font-weight, normal); 
  color: var(--color-button-background-dark, #257abe);
  text-decoration: none;
}
.announce-banner > span { 
  margin: 12px;
  vertical-align: middle;
}
.announce-banner.info {
  background: var(--color-severity-info-background, #E0FFFF) !important;
}
.announce-banner.success {
  background: var(--color-severity-success-background, #B0E0E6) !important;
}
.announce-banner.warn {
  background: var(--color-severity-warn-background, #ede49e) !important;
}
.announce-banner.alert {
  background: var(--color-severity-alert-background, lightsalmon) !important;
  font-weight: 600;
}

/* round the corners of the buttons placed on announcment banners */
.announce-banner i { font-size: var(--bulib-announce-font-size, unset); }
.announce-banner button:hover {
  background-color: var(--color-button-text, whitesmoke);
  cursor: pointer;
 }
.announce-banner button {
  display: inline-block;
  border: 1px solid black;
  color: black;
  background-color: white;
  border-radius: 7px;
  font-size: 95%;
  padding: 1px 5px;
  vertical-align: middle;
  white-space: nowrap;
}