index.css

/* the contents of index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {
  .card {
    background-color: theme("colors.white");
    border-radius: theme("borderRadius.lg");
    padding: theme("spacing.6");
    box-shadow: theme("boxShadow.xl");
  }
  /* ... */
}

/* 
bydefining component classes in the components layer, you can still use utility classes to override them when necessary: <!-- Will look like a card,
  but with square corners --> <div class= "card rounded-none" > <!--... --> </div> Using Tailwind you probably don’t need these types of classes as often
    as you think. Read our guide on Reusing Styles for our recommendations. 
     */

[class*="button-"] {
  @apply transition-colors shrink-0 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.button-indigo {
  @apply text-white border border-solid border-transparent bg-redis-indigo-500 hover:bg-redis-indigo-600 focus:bg-indigo-600 focus:ring-indigo-600;
}

.button-outline {
  @apply relative hover:bg-transparent hover:text-indigo-600 focus:text-indigo-600 focus:ring-indigo-600 hover:after:opacity-100 focus:after:opacity-100;
}

.button-outline:after {
  @apply content-[''] absolute inset-0 opacity-50 border border-current rounded-[inherit] transition-opacity;
}

section.prose {
  @apply font-geist;
}

.prose h1,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply font-normal;
}

.prose h2 {
  @apply text-lg font-medium pb-3 border-b border-b-redis-pen-700 border-opacity-50;
}

.prose p,
.prose ol,
.prose ul {
  @apply text-base;
}

.prose pre {
  @apply bg-slate-900 rounded-lg;
}

.prose pre > code {
  @apply bg-none font-monogeist;
}

.prose h1 {
  @apply text-4xl;
}

.prose h1[id],
.prose h2[id],
.prose h3[id],
.prose h4[id],
.prose h5[id],
.prose h6[id] {
  @apply mt-16 scroll-mt-6;
}

.prose p:empty,
.prose li:empty {
  @apply hidden;
}

.prose :where(code):not(:where([class~="not-prose"] *)):before,
.prose :where(code):not(:where([class~="not-prose"] *)):after {
  content: "";
}

.prose :where(a):not(:where([class~="not-prose"] *)):hover {
  @apply text-redis-red-500;
}

.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply my-0;
}

.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
  @apply text-redis-ink-900;
}

.prose .alert p {
  @apply m-0;
}

select {
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  print-color-adjust: exact;
  background-position: right 0.75rem center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

#TableOfContents a {
  @apply relative block text-redis-pen-600 hover:text-redis-pen-300 -my-0.5 py-1 pl-6 transition-colors leading-6;
}

#TableOfContents a:before {
  content: "";
  @apply w-1 h-full bg-redis-pencil-250 absolute left-0 top-0 rounded-sm transition;
}

#TableOfContents a.active {
  @apply text-redis-ink-900 before:bg-redis-ink-900 pointer-events-none z-40;
}

#TableOfContents.docs-toc a.active {
  @apply before:bg-redis-red-500 pointer-events-none text-redis-ink-900 font-bold;
}

/* search */
.search-active {
  @apply overflow-hidden !important;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.search-loading-indicator svg {
  @apply hidden;
}

.search-loading-indicator {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke-width='2' stroke='%23e0e7ff' /%3E%3Cpath d='M3,12a9,9 0 1,0 18,0a9,9 0 1,0 -18,0' stroke-width='2' stroke='%236466f1' stroke-dasharray='56.5486677646' stroke-dashoffset='37.6991118431' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  animation: rotating 1s linear infinite;
}

.search-container.stalled .search-loading-indicator {
  @apply block;
}

.child-list {
  @apply relative;
}

.child-list:before {
  content: "";
  @apply w-1 h-full bg-redis-pencil-250 absolute left-0 top-0 rounded-sm transition;
}

.child-list {
  @apply ml-6;
}

.child-list a {
  @apply relative flex hover:text-redis-ink-900/30 transition-colors leading-6;
}

.child-list a:before {
  content: "";
  @apply w-1 h-full bg-transparent absolute left-0 top-0 rounded-xl transition;
}

.child-list a.active {
  @apply before:bg-redis-ink-900 pointer-events-none;
}

.search-item .search-item-icon {
  display: block;
  flex: none;
  margin-right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%23091A23' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

.search-item:hover .search-item-icon,
.search-item:focus-within .search-item-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%23D52D1F' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /%3E%3C/svg%3E");
}

.search-item + .search-item {
  @apply mt-4;
}

.search-item {
  @apply bg-white rounded-md relative text-redis-ink-900 border border-redis-pen-800;
}

.search-item[aria-selected] {
  @apply bg-red-100;
}

.search-item:hover,
.search-item:not([aria-selected]):focus-within {
  @apply bg-red-50 text-redis-pen-800;
}

.search-item > a {
  @apply relative w-full p-4 grid grid-cols-[auto,1fr,auto] items-center;
  font-size: 0.875rem;
}

.search-item-content {
  @apply flex flex-col;
}

.search-item-path {
  grid-column-start: 2;
  align-self: flex-start;
  margin-right: auto;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.search-item-title {
  @apply col-start-2 leading-6 whitespace-normal;
}

.search-item-title + .search-item-path {
  @apply mb-1;
}

.search-term-match {
  @apply font-semibold text-redis-red-600 underline underline-offset-2 decoration-2 decoration-red-300;
}

.search-item-action {
  @apply flex-none ml-3.5 w-6 h-6;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23091A23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.search-item:hover .search-item-action,
.search-item:focus-within .search-item-action {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23D52D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.search-footer {
  @apply flex-none flex justify-end border-t border-slate-100 py-4 px-6;
}

.search-footer a {
  @apply flex items-center text-slate-400 text-xs font-medium;
}

.search-footer svg {
  @apply w-6 h-auto ml-2 text-red-600;
}

.redis-cli {
  @apply font-mono bg-slate-900 h-80 overflow-y-scroll text-neutral-50 px-4 py-2 rounded-b-xl;
}

.redis-cli > pre {
  white-space: pre-wrap;
}

.prose .redis-cli {
  @apply h-auto;
}

.prose .redis-cli > pre {
  @apply text-neutral-50 bg-transparent m-0 p-0;
}

.prose .redis-cli > .prompt {
  font-size: 0.875em;
}

.redis-cli > .prompt {
  display: flex;
}

.redis-cli > .prompt > span {
  white-space: pre-wrap;
}

.redis-cli > .prompt > input {
  flex: 1 1 auto;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  font: inherit;
  color: inherit;
}

.star-rating {
  @apply flex flex-row-reverse justify-around text-center text-xl items-center;
}

.star-rating input {
  @apply hidden;
}

.star-rating label {
  @apply cursor-pointer text-white;
  /* 
    From  https://owumaro.github.io/text-stroke-generator/ 
    Currently, there is not great way to text-stroke that works across browsers
    Alternative is to replace star character with SVG
  */
  text-shadow: rgb(92, 112, 122) 1px 0px 0px, rgb(92, 112, 122) 0.540302px 0.841471px 0px, rgb(92, 112, 122) -0.416147px 0.909297px 0px,
    rgb(92, 112, 122) -0.989993px 0.14112px 0px, rgb(92, 112, 122) -0.653644px -0.756803px 0px, rgb(92, 112, 122) 0.283662px -0.958924px 0px,
    rgb(92, 112, 122) 0.96017px -0.279416px 0px;
}

.star-rating :checked ~ label {
  @apply text-redis-pen-600;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  @apply text-redis-red-500;
}

.codetabs .label {
  min-width: 2rem;
  line-height: 0.852rem;
  color: #8ca0ad;
}

.codetabs .label:active {
  color: white;
}

.codetabs .radiotab:focus + .label {
  @apply bg-transparent text-indigo-600;
}

.codetabs .radiotab:checked + .label {
  @apply border-slate-900 not-italic;
  @apply bg-slate-600 text-white pt-1 mt-2.5;
}

.codetabs .radiotab:checked + .label + .panel {
  @apply block;
}

.codetabs > .panel .highlight > .chroma {
  @apply rounded-tl-none m-0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.codetabs.cli + .cli-footer {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.cli-footer {
  background-color: #282f43;
  min-height: 32px;
}

.cli-footer a.rounded {
  @apply bg-red-900/80 hover:bg-red-700/80 text-white;
}

.codetabs.cli > .panel .highlight > .chroma {
  margin: 1rem 1rem 0.1rem 0.1rem;
  overflow-x: hidden;
  padding-bottom: 0;
}

.codetabs .chroma .language-plaintext .cl {
  white-space: break-spaces;
}

.codetabs > .panel .highlight .chroma > .lntable td:first-child .chroma {
  @apply rounded-none p-0;
}

.codetabs > .panel .highlight .chroma > .lntable td:last-child .chroma {
  @apply rounded-none p-0;
}

.codetabs > .panel:not([aria-expanded]) .highlight .chroma > code > .line:not(.hl),
.codetabs > .panel:not([aria-expanded]) .highlight .chroma > .lntable .lntd code > .lnt,
.codetabs > .panel:not([aria-expanded]) .highlight .chroma > .lntable .lntd code > .line:not(.hl) {
  @apply hidden;
}

.codetabs > .panel:where([aria-expanded]) .highlight .chroma > code > .line:not(.hl),
.codetabs > .panel:where([aria-expanded]) .highlight .chroma > .lntable .lntd code > .lnt,
.codetabs > .panel:where([aria-expanded]) .highlight .chroma > .lntable .lntd code > .line:not(.hl) {
  @apply opacity-60;
}

.codetabs > .panel:not([aria-expanded]) .highlight .chroma > .language-Go > .hl {
  tab-size: 3ch;
  left: -3ch;
  position: relative;
}

.codetabs > .panel:not([aria-expanded]) .highlight .chroma > .language-C\# > .hl {
  left: -8ch;
  position: relative;
}

.codetabs > .panel:not([aria-expanded]) .highlight .chroma > .language-Java > .hl {
  left: -4ch;
  position: relative;
}

.codetabs > .panel .highlight .chroma > code > .hl,
.codetabs > .panel .highlight .chroma > .lntable .lntd code > .hl {
  @apply bg-inherit;
}

.codetabs > .panel:where([aria-expanded]) #visibility-on,
.codetabs > .panel:not([aria-expanded]) #visibility-off {
  @apply hidden;
}

.codetabs > .panel:where([aria-expanded]) #visibility-off,
.codetabs > .panel:not([aria-expanded]) #visibility-on {
  @apply block;
}

.download-cards {
  @apply space-y-6 lg:space-y-0 max-w-[47rem] lg:max-w-full mx-auto lg:mx-0 lg:grid grid-cols-2 gap-x-6 items-start mb-[3.25rem];
}

.download-details {
  @apply w-full max-w-[47rem] mx-auto;
}

#download-redis,
#download-redis-stack {
  @apply px-9 h-full py-8 bg-white border border-slate-900/10 bg-clip-padding shadow-md shadow-slate-900/5 rounded-lg;
}

#download-redis > h2,
#download-redis-stack > h2 {
  @apply mt-0;
}

#download-redis > h2:before,
#redis-downloads:before {
  content: "";
  background-image: url("/images/redis-cube.svg");
  @apply inline-block bg-contain bg-no-repeat bg-center align-middle mr-3;
}

#download-redis-stack > h2:before,
#redis-stack-downloads:before {
  content: "";
  background-image: url("/images/stack-icon.svg");
  @apply inline-block bg-contain bg-no-repeat bg-center align-middle mr-3;
}

#download-redis > h2:before,
#download-redis-stack > h2:before {
  @apply w-10 h-10;
}

#download-redis > h3,
#download-redis-stack > h3 {
  @apply mt-2;
}

#redis-downloads,
#redis-stack-downloads {
  @apply border-b pb-2;
}

#redis-downloads:before,
#redis-stack-downloads:before {
  @apply w-8 h-8;
}

#alpha-filter-container .active {
  @apply bg-red-50 text-redis-red-500 border-red-100;
}

html {
  scrollbar-gutter: stable;
}

/* Chroma syntax highlighting
/* Background */
.bg {
  @apply text-slate-50 bg-slate-900;
}

/* PreWrapper */
.chroma {
  @apply p-4 overflow-x-auto text-slate-50 bg-slate-900 rounded-md;
}

/* Other */
.chroma .x {
}

/* Error */
.chroma .err {
  @apply text-red-600;
}

/* CodeLine */
.chroma .cl {
}

/* LineLink */
.chroma .lnlinks {
  @apply outline-none text-inherit no-underline;
}

/* LineTableTD */
.chroma .lntd {
  @apply align-top p-0 m-0 border-0;
}

.chroma .lntd:last-child {
  @apply flex-1;
}

/* LineTable */
.chroma .lntable {
  @apply p-0 m-0 border-0 min-w-full;
}

/* LineHighlight */
.chroma .hl {
  @apply flex bg-indigo-900/80;
}

code

/* LineNumbersTable */
.chroma .lnt {
  @apply text-slate-400 whitespace-pre pl-2 pr-4;
}

/* LineNumbers */
.chroma .ln {
  @apply text-slate-400 whitespace-pre px-4;
}

.chroma .lntable tr {
  @apply flex items-stretch;
}

/* Line */
.chroma .line {
  @apply flex;
}

/* Keyword */
.chroma .k {
  @apply text-red-400;
}

/* KeywordConstant */
.chroma .kc {
  @apply text-blue-400;
}

/* KeywordDeclaration */
.chroma .kd {
  @apply text-red-400;
}

/* KeywordNamespace */
.chroma .kn {
  @apply text-red-400;
}

/* KeywordPseudo */
.chroma .kp {
  @apply text-blue-400;
}

/* KeywordReserved */
.chroma .kr {
  @apply text-red-400;
}

/* KeywordType */
.chroma .kt {
  @apply text-red-400;
}

/* Name */
.chroma .n {
}

/* NameAttribute */
.chroma .na {
}

/* NameBuiltin */
.chroma .nb {
}

/* NameBuiltinPseudo */
.chroma .bp {
}

/* NameClass */
.chroma .nc {
  @apply text-orange-400 font-bold;
}

/* NameConstant */
.chroma .no {
  @apply text-blue-400 font-bold;
}

/* NameDecorator */
.chroma .nd {
  @apply text-purple-300 font-bold;
}

/* NameEntity */
.chroma .ni {
  @apply text-orange-400;
}

/* NameException */
.chroma .ne {
  @apply text-orange-400 font-bold;
}

/* NameFunction */
.chroma .nf {
  @apply text-purple-300 font-bold;
}

/* NameFunctionMagic */
.chroma .fm {
}

/* NameLabel */
.chroma .nl {
  @apply text-blue-400 font-bold;
}

/* NameNamespace */
.chroma .nn {
  @apply text-red-400;
}

/* NameOther */
.chroma .nx {
}

/* NameProperty */
.chroma .py {
  @apply text-blue-400;
}

/* NameTag */
.chroma .nt {
  @apply text-green-400;
}

/* NameVariable */
.chroma .nv {
  @apply text-blue-400;
}

/* NameVariableClass */
.chroma .vc {
}

/* NameVariableGlobal */
.chroma .vg {
}

/* NameVariableInstance */
.chroma .vi {
}

/* NameVariableMagic */
.chroma .vm {
}

/* Literal */
.chroma .l {
  @apply text-blue-400;
}

/* LiteralDate */
.chroma .ld {
  @apply text-blue-400;
}

/* LiteralString */
.chroma .s {
  @apply text-blue-400;
}

/* LiteralStringAffix */
.chroma .sa {
  @apply text-blue-400;
}

/* LiteralStringBacktick */
.chroma .sb {
  @apply text-blue-400;
}

/* LiteralStringChar */
.chroma .sc {
  @apply text-blue-400;
}

/* LiteralStringDelimiter */
.chroma .dl {
  @apply text-blue-400;
}

/* LiteralStringDoc */
.chroma .sd {
  @apply text-blue-400;
}

/* LiteralStringDouble */
.chroma .s2 {
  @apply text-blue-400;
}

/* LiteralStringEscape */
.chroma .se {
  @apply text-blue-400;
}

/* LiteralStringHeredoc */
.chroma .sh {
  @apply text-blue-400;
}

/* LiteralStringInterpol */
.chroma .si {
  @apply text-blue-400;
}

/* LiteralStringOther */
.chroma .sx {
  @apply text-blue-400;
}

/* LiteralStringRegex */
.chroma .sr {
  @apply text-blue-400;
}

/* LiteralStringSingle */
.chroma .s1 {
  @apply text-blue-400;
}

/* LiteralStringSymbol */
.chroma .ss {
  @apply text-blue-400;
}

/* LiteralNumber */
.chroma .m {
  @apply text-blue-400;
}

/* LiteralNumberBin */
.chroma .mb {
  @apply text-blue-400;
}

/* LiteralNumberFloat */
.chroma .mf {
  @apply text-blue-400;
}

/* LiteralNumberHex */
.chroma .mh {
  @apply text-blue-400;
}

/* LiteralNumberInteger */
.chroma .mi {
  @apply text-blue-400;
}

/* LiteralNumberIntegerLong */
.chroma .il {
  @apply text-blue-400;
}

/* LiteralNumberOct */
.chroma .mo {
  @apply text-blue-400;
}

/* Operator */
.chroma .o {
  @apply text-red-400 font-bold;
}

/* OperatorWord */
.chroma .ow {
  @apply text-red-400 font-bold;
}

/* Punctuation */
.chroma .p {
}

/* Comment */
.chroma .c {
  @apply text-slate-500;
  font-style: italic;
}

/* CommentHashbang */
.chroma .ch {
  @apply text-slate-500;
  font-style: italic;
}

/* CommentMultiline */
.chroma .cm {
  @apply text-slate-500 italic;
}

/* CommentSingle */
.chroma .c1 {
  @apply text-slate-500 italic;
}

/* CommentSpecial */
.chroma .cs {
  @apply text-slate-500 font-bold italic;
}

/* CommentPreproc */
.chroma .cp {
  @apply text-slate-500 font-bold italic;
}

/* CommentPreprocFile */
.chroma .cpf {
  @apply text-slate-500 font-bold italic;
}

/* Generic */
.chroma .g {
}

/* GenericDeleted */
.chroma .gd {
  @apply text-red-300 bg-red-900;
}

/* GenericEmph */
.chroma .ge {
  @apply italic;
}

/* GenericError */
.chroma .gr {
  @apply text-red-300;
}

/* GenericHeading */
.chroma .gh {
  @apply text-blue-400 font-bold;
}

/* GenericInserted */
.chroma .gi {
  @apply text-green-400 bg-green-900;
}

/* GenericOutput */
.chroma .go {
  @apply text-slate-400;
}

/* GenericPrompt */
.chroma .gp {
  @apply text-slate-400;
}

/* GenericStrong */
.chroma .gs {
  @apply font-bold;
}

/* GenericSubheading */
.chroma .gu {
  @apply text-blue-400;
}

/* GenericTraceback */
.chroma .gt {
  @apply text-red-400;
}

/* GenericUnderline */
.chroma .gl {
  @apply underline;
}

/* TextWhitespace */
.chroma .w {
  @apply text-slate-500;
}
/* Safari input[type = radio] fix for tabs */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.stack-logo-inline {
  display: inline;
  max-height: 1em;
  padding: 0 0.1em;
  width: 2em;
}

.site-banner {
  background: radial-gradient(#f2f3fc, #d2d7fe);
  @apply w-full py-2 text-center font-medium text-base text-midnight-700;
}

.banner-article {
  /*background-color: #f7f7f7;*/
  background-color: #fff8dc;
  padding: 1px;
  margin-left: -3px;
  z-index: 998;
}

.banner-article p {
  text-align: left;
  font-size: 16px !important;
  padding: 0 1em;
}

.banner-article a {
  text-decoration: underline;
}

.expand-content > div {
  @apply h-full overflow-hidden;
}

.expand-content > div > pre {
  @apply h-full m-0;
}

.expand-content > div > pre > code {
  @apply h-full overflow-y-auto font-monogeist;
}

code {
  @apply font-monogeist;
}

/* no-click turns off border and click event on small icons */
a[href*="#no-click"],
img[src*="#no-click"] {
  @apply border-none cursor-default pointer-events-none no-underline;
}