docs/src/theme/AnnouncementBar/styles.module.css - master - alt3rmann/graphql-engine

docs/src/theme/AnnouncementBar/styles.module.css
111 строк2 KB
Sean Park-Ross
Docs: Bot route updates
03 дек 2024, 14:52
03 дек 2024, 14:523c69ceb
:root {
  --docusaurus-announcement-bar-height: auto;
}

.announcementWrapper {
  background-color: #f3f4f6;
  padding: 1.5rem;
}

.announcementBar {
  display: flex;
  align-items: center;
  height: auto;
  background-color: var(--ifm-color-white);
  color: var(--ifm-color-black);
  border: 1px solid transparent;
  border-radius: 112px;
  padding: 0.75rem 1.4rem;
  /* shadow/default */
  box-shadow:
    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
    0px 1px 3px 0px rgba(28, 38, 63, 0.1);
  /*
  Unfortunately we can't make announcement bar render above the navbar
  IE need to use border-bottom instead of shadow
  See https://github.com/facebookincubator/infima/issues/275

  box-shadow: var(--ifm-global-shadow-lw);
  z-index: calc(var(--ifm-z-index-fixed) + 1);
  */
  border-bottom: 1px solid var(--ifm-color-emphasis-100);
}

html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
  display: none;
}

.announcementBarPlaceholder {
  flex: 0 0 10px;
}

/*.announcementBarClose {*/
/*  flex: 0 0 30px;*/
/*  align-self: stretch;*/
/*  margin-right: 1rem;*/
/*}*/
.announcementBarClose {
  display: flex;
  align-items: center;
}

.announcementBarContent {
  flex: 1 1 auto;
  color: var(--primary-neutral-600);
  font-size: 0.938rem;
  font-weight: 500;
  padding: 0;
}

.announcementBarContent a {
  color: #1e56e3;
  text-decoration: none;
  text-decoration: underline;
}

@media print {
  .announcementBar {
    display: none;
  }
}

@media (min-width: 997px) {
  :root {
    --docusaurus-announcement-bar-height: 30px;
  }
}
@media (max-width: 900px) {
  .announcementBar {
    border-radius: 1rem;
    position: relative;
    padding: 1rem;
  }
  .announcementBarContent {
    text-align: left;
    padding-right: 40px;
  }
  .announcementBarClose {
    position: absolute;
    right: 1rem;
    margin-right: 0;
  }
  .announcementBarClose svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

[data-theme='dark'] .announcementBar {
  box-shadow: none;
  border: 1px solid #333e4b;
  background-color: #28334f;
}
[data-theme='dark'] .announcementBarContent {
  color: #e5e7eb;
}
[data-theme='dark'] .announcementBarContent a {
  color: #80a3ff;
}
[data-theme='dark'] .announcementWrapper {
  background-color: #1c262f;
}