logseq/resources/css/shui.css

.shui__button {
  @apply font-medium relative flex items-center justify-center gap-1;
  border-radius: 0.25rem;
  /* box-shadow: inset 0 2px 0 0px rgba(255, 255, 255, 0.2), */ 
  /*             inset 0 -2px 0 0px rgba(0, 0, 0, 0.1); */
  /* background-image: linear-gradient(white, white), */
  /*                   linear-gradient(to bottom, green, gold); */
  /* background-origin: border-box; */
  /* background-clip: content-box, border-box; */
}

.shui__button-size-sm {
  @apply text-xs py-1 px-2;
}

.shui__button-size-md {
  @apply text-sm py-1 px-3;
}

.shui__button-tiled {
  padding: 0 !important;
  gap: 0 !important;
}

.shui__button-tiled .shui__button__tile {
  @apply flex items-center justify-center text-center;
}

.shui__button-tiled.shui__button-size-md .shui__button__tile {
  @apply h-6 w-6;       
}

.shui__button__tile-separator {
  @apply w-px h-full bg-white/10;
}

.shui__button-theme-text {
  background: none;
  box-shadow: none;
}

.shui__button-theme {
  background: or(--lx-accent-09, --rx-blue-09);
}

.shui__button-theme:hover {
  background: or(--lx-accent-10, --rx-blue-10);
}

.shui__button-theme:active {
  background: or(--lx-accent-08, --rx-blue-08);
}

.shui__button-theme-gray {
  background: or(--lx-gray-05, --ls-quaternary-background);
}

.shui__button-theme-gray:hover {
  background: or(--lx-gray-06, --ls-quaternary-background);
}

.shui__button-theme-gray:active {
  background: or(--lx-gray-04, --ls-quaternary-background);
}

.shui__button-theme-gradient {
  --depth-shadow-from: rgba(2, 23, 53, 0.70);
  --depth-shadow-to: rgba(2, 23, 53, 0.00);
}

.shui__button-theme-gradient:hover {
  --depth-shadow-from: rgba(2, 23, 53, 0.30);
  --depth-shadow-to: rgba(2, 23, 53, 0.00);
}

.shui__button-theme-gradient:active {
  --depth-shadow-from: rgba(0, 0, 0, 0);
  --depth-shadow-to: rgba(0, 0, 0, 0);
}

.shui__button-theme-gradient.shui__button-,
.shui__button-theme-gradient.shui__button-indigo,
.shui__button-theme-gradient.shui__button-blue,
.shui__button-theme-gradient.shui__button-sky,
.shui__button-theme-gradient.shui__button-cyan {
  background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
              linear-gradient(135deg, var(--rx-indigo-09) 0%, var(--rx-blue-09) 33.85%, var(--rx-sky-09) 64.06%, var(--rx-cyan-09) 100%);
}

.shui__button-theme-gradient.shui__button-tomato,
.shui__button-theme-gradient.shui__button-red,
.shui__button-theme-gradient.shui__button-crimson,
.shui__button-theme-gradient.shui__button-pink,
.shui__button-theme-gradient.shui__button-plum,
.shui__button-theme-gradient.shui__button-purple,
.shui__button-theme-gradient.shui__button-violet {
  background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
              linear-gradient(135deg, var(--rx-tomato-09) 0%, var(--rx-red-09) 16.66%, var(--rx-crimson-09) 33.33%, var(--rx-pink-09) 50%, var(--rx-plum-09) 66.66%, var(--rx-purple-09) 83.33%, var(--rx-violet-09) 100%);
}

.shui__button-theme-gradient.shui__button-green,
.shui__button-theme-gradient.shui__button-mint,
.shui__button-theme-gradient.shui__button-teal {
  background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
              linear-gradient(135deg, var(--rx-teal-09) 0%, var(--rx-mint-09) 50%, var(--rx-green-09) 100%);
}

.shui__button-theme-gradient.shui__button-grass,
.shui__button-theme-gradient.shui__button-lime {
  background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
              linear-gradient(135deg, var(--rx-grass-09) 0%, var(--rx-lime-09) 100%);
}

.shui__button-theme-gradient.shui__button-yellow,
.shui__button-theme-gradient.shui__button-amber,
.shui__button-theme-gradient.shui__button-orange,
.shui__button-theme-gradient.shui__button-brown {
  background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
              linear-gradient(135deg, var(--rx-yellow-09) 0%, var(--rx-amber-09) 33.33%, var(--rx-orange-09) 66.66%, var(--rx-brown-09) 100%);
}

/* .shui__button-theme-gradient:hover { */
  /* background: linear-gradient(37deg, rgba(2, 23, 53, 0.30) 0%, rgba(2, 23, 53, 0.00) 100%), linear-gradient(135deg, #8AE8FF 0%, #5373E7 33.85%, #369EFF 64.06%, #00B1CC 100%); */
/* } */

/* Shadow/xs */
/* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); */
/* } */

.shui__button-depth-1 {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 
              inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);
}

.shui__button-depth-1:hover {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 
              inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}

.shui__button-depth-2 {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 
              inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}

/* .shui__button-depth-1:before { */
/*   @apply absolute inset-0; */
/*   border-radius: 0.25rem; */
/*   content: ""; */
/*   padding: 1px; */
/*   background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); */
/*   -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/*                 linear-gradient(#fff 0 0); */
/*   -webkit-mask-composite: xor; */
/*   mask-composite: exclude; */
/* } */

/* .shui__button-depth-1:after { */
/*   @apply absolute inset-0; */
/*   border-radius: 0.25rem; */
/*   content: ""; */
/*   padding: 1px; */
/*   background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); */
/*   -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/*                 linear-gradient(#fff 0 0); */
/*   -webkit-mask-composite: xor; */
/*   mask-composite: exclude; */
/* } */

/* .shui__button-depth-2:before { */
/*   @apply absolute inset-0; */
/*   border-radius: 0.25rem; */
/*   content: ""; */
/*   padding: 1px; */
/*   background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); */
/*   -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/*                 linear-gradient(#fff 0 0); */
/*   -webkit-mask-composite: xor; */
/*   mask-composite: exclude; */
/* } */

/* .shui__button-depth-2:after { */
/*   @apply absolute inset-0; */
/*   border-radius: 0.25rem; */
/*   content: ""; */
/*   padding: 1px; */
/*   background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); */
/*   -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/*                 linear-gradient(#fff 0 0); */
/*   -webkit-mask-composite: xor; */
/*   mask-composite: exclude; */
/* } */

.shui__button-shortcut-key:first-of-type {
  @apply ml-2;
}

.shui__button-shortcut-key {
  @apply text-xs font-normal bg-white/10 h-5 w-5 flex items-center justify-center rounded;
}

.shui__cmdk-quick-capture-glow::before {
  @apply absolute inset-0;
  pointer-events: none;
  border-radius: 0.25rem;
  content: "";
  padding: 1px;
  background: linear-gradient(to bottom, var(--lx-accent-10), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.shui__button-muted {
  transition: opacity 200 ease-in;
  opacity: 0.4;
}

.shui__button-muted:hover {
  opacity: 1;
}

.shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color); color: white; }
.shui__button-theme-color.shui__button-color-custom  { background-color: var(--color-indigo-600); color: white; }

.shui__button-theme-color.shui__button-color-lime    { background-color: var(--rx-lime-09)} 
.shui__button-theme-color.shui__button-color-orange  { background-color: var(--rx-orange-09)} 
.shui__button-theme-color.shui__button-color-gray    { background-color: var(--rx-gray-09)} 
.shui__button-theme-color.shui__button-color-sand    { background-color: var(--rx-sand-09)} 
.shui__button-theme-color.shui__button-color-crimson { background-color: var(--rx-crimson-09)} 
.shui__button-theme-color.shui__button-color-yellow  { background-color: var(--rx-yellow-09)} 
.shui__button-theme-color.shui__button-color-green   { background-color: var(--rx-green-09)} 
.shui__button-theme-color.shui__button-color-indigo  { background-color: var(--rx-indigo-09)} 
.shui__button-theme-color.shui__button-color-cyan    { background-color: var(--rx-cyan-09)} 
.shui__button-theme-color.shui__button-color-violet  { background-color: var(--rx-violet-09)} 
.shui__button-theme-color.shui__button-color-bronze  { background-color: var(--rx-bronze-09)} 
.shui__button-theme-color.shui__button-color-slate   { background-color: var(--rx-slate-09)} 
.shui__button-theme-color.shui__button-color-gold    { background-color: var(--rx-gold-09)} 
.shui__button-theme-color.shui__button-color-sage    { background-color: var(--rx-sage-09)} 
.shui__button-theme-color.shui__button-color-mauve   { background-color: var(--rx-mauve-09)} 
.shui__button-theme-color.shui__button-color-mint    { background-color: var(--rx-mint-09)} 
.shui__button-theme-color.shui__button-color-red     { background-color: var(--rx-red-09)} 
.shui__button-theme-color.shui__button-color-blue    { background-color: var(--rx-blue-09)} 
.shui__button-theme-color.shui__button-color-grass   { background-color: var(--rx-grass-09)} 
.shui__button-theme-color.shui__button-color-plum    { background-color: var(--rx-plum-09)} 
.shui__button-theme-color.shui__button-color-pink    { background-color: var(--rx-pink-09)} 
.shui__button-theme-color.shui__button-color-teal    { background-color: var(--rx-teal-09)} 
.shui__button-theme-color.shui__button-color-amber   { background-color: var(--rx-amber-09)} 
.shui__button-theme-color.shui__button-color-purple  { background-color: var(--rx-purple-09)} 
.shui__button-theme-color.shui__button-color-brown   { background-color: var(--rx-brown-09)} 
.shui__button-theme-color.shui__button-color-sky     { background-color: var(--rx-sky-09)} 
.shui__button-theme-color.shui__button-color-olive   { background-color: var(--rx-olive-09)} 
.shui__button-theme-color.shui__button-color-tomato  { background-color: var(--rx-tomato-09)}