BewlyBewly/src/styles/main.scss

* {
  outline-color: var(--bew-theme-color-80);
  outline-width: 2px;
  outline-offset: -2px;
}

.dark * {
  color-scheme: dark;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

html.bewly-design > ::-webkit-scrollbar-track {
  background: var(--bew-bg);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 140, 0.44);
  border-radius: 20px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::selection {
  background: var(--bew-fill-3);
  color: revert;
}

html.bewly-design,
.bewly-design body {
  font-size: 14px !important;
  min-width: unset !important;
  filter: none !important;
  color: var(--bew-text-1);
  line-height: unset;
  background-image: none;
}

.dark.bewly-design body,
html.dark.bewly-design {
  background-color: var(--bew-bg);
}

.keep-two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-break: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bewly-design {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --at-apply: color-$bew-text-1;
  }
}

// Change OverlayScrollbar color
.os-scrollbar .os-scrollbar-handle {
  --os-handle-bg: rgba(120, 120, 140, 0.44);
  --os-handle-bg-hover: rgba(120, 120, 140, 0.55);
  --os-handle-bg-active: rgba(120, 120, 140, 0.66);
}

.link-navbar,
#home_nav {
  display: none;
}

/* Color Mode transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
  transition: none !important;
}
::view-transition-old(*),
::view-transition-new(*),
::view-transition-old(*::after),
::view-transition-new(*::before) {
  transition: none !important;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2147483646;
}
.dark::view-transition-old(root) {
  z-index: 2147483646;
}
.dark::view-transition-new(root) {
  z-index: 1;
}