wiki/ux/src/css/app.scss

// app global css in SCSS form
// ------------------------------------------------------------------
// SCROLLBAR
// ------------------------------------------------------------------

html {
  --scrollbarBG: #CCC;
  --thumbBG: #999;
}
body::-webkit-scrollbar {
  width: 7px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 1px solid var(--scrollbarBG);
}

// ------------------------------------------------------------------
// FONTS
// ------------------------------------------------------------------

@font-face {
  font-family: 'Roboto Mono';
  src: url(/_assets/fonts/roboto-mono/roboto-mono.woff2);
}

.font-robotomono {
  font-family: 'Roboto Mono', Consolas, "Liberation Mono", Courier, monospace;
}

// ------------------------------------------------------------------
// THEME COLORS
// ------------------------------------------------------------------

:root {
  --q-header: #000;
  --q-sidebar: #1976D2;
}

.header, .bg-header {
  background: #000;
  background: var(--q-header);
}
.sidebar, .bg-sidebar {
  background: #1976D2;
  background: var(--q-sidebar);
}

.bg-dark-6 { background-color: #070a0d; }
.bg-dark-5 { background-color: #0d1117; }
.bg-dark-4 { background-color: #161b22; }
.bg-dark-3 { background-color: #1e232a; }
.bg-dark-2 { background-color: #292f39; }
.bg-dark-1 { background-color: #343b48; }

// ------------------------------------------------------------------
// FORMS
// ------------------------------------------------------------------

.v-textarea.is-monospaced textarea {
  font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.q-field.denser .q-field__control {
  height: 36px;

  .q-field__prepend {
    height: 36px;
  }
}

.q-field.fill-outline .q-field__control {
  background-color: #FFF;

  @at-root .body--light & {
    background-color: #FFF;
  }
  @at-root .body--dark & {
    background-color: $dark;
  }
}

.q-field--dark .q-field__control:before {
  background-color: $dark-5;
  border-color: rgba(255,255,255,.25);
}

// ------------------------------------------------------------------
// ICONS SIZE FIX
// ------------------------------------------------------------------

.q-btn .q-icon {
  &.fa-solid,
  &.fa-regular {
    font-size: 1.3em;
  }
}

.q-select__dropdown-icon {
  font-size: 16px;
}

// ------------------------------------------------------------------
// BUTTONS
// ------------------------------------------------------------------

.q-btn.acrylic-btn {
  .q-focus-helper {
    background-color: currentColor;
    opacity: .1;
  }

  &:hover .q-focus-helper {
    opacity: .3 !important;
  }
}

// ------------------------------------------------------------------
// ICONS
// ------------------------------------------------------------------

.blueprint-icon {
  &-alt {
    filter: hue-rotate(100);
  }
}

// ------------------------------------------------------------------
// DIALOGS
// ------------------------------------------------------------------

.card-header {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: .9rem;
  background-color: $dark-3;
  background-image: radial-gradient(at bottom right, $dark-3, $dark-5);
  color: #FFF;

  @at-root .body--light & {
    border-bottom: 1px solid $dark-3;
    box-shadow: 0 1px 0 0 $dark-6;
  }
  @at-root .body--dark & {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 lighten($dark-3, 2%);
  }
}

.card-negative {
  display: flex;
  align-items: center;
  font-size: .9rem;

  @at-root .body--light & {
    background-color: $red-1;
    background-image: radial-gradient(at bottom center, lighten($red-1, 2%), lighten($red-2, 2%));
    border-bottom: 1px solid $red-3;
    text-shadow: 0 0 4px #FFF;
    color: $red-9;
  }
  @at-root .body--dark & {
    background-color: $red-9;
    background-image: radial-gradient(at bottom center, $red-7, $red-9);
    border-bottom: 1px solid $red-7;
    text-shadow: 0 0 4px darken($red-9, 10%);
    color: #FFF;
  }
}

.card-actions {
  @at-root .body--light & {
    background-color: #FAFAFA;
    background-image: linear-gradient(to bottom, #FCFCFC, #F0F0F0);
    color: $dark-3;
    border-top: 1px solid #EEE;
    box-shadow: inset 0 1px 0 0 #FFF;
  }
  @at-root .body--dark & {
    background-color: $dark-3;
    background-image: radial-gradient(at top left, $dark-3, $dark-5);
    border-top: 1px solid #000;
    box-shadow: 0 -1px 0 0 lighten($dark-3, 2%);
  }
}

// ------------------------------------------------------------------
// CARDS
// ------------------------------------------------------------------

.q-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);

  &.q-card--dark {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  }

  .q-separator--dark {
    background-color: rgba(0,0,0,.7);
  }
}

// ------------------------------------------------------------------
// DROPDOWN MENUS
// ------------------------------------------------------------------

.translucent-menu {
  @at-root .body--light & {
    background-color: rgba(255,255,255,.9);
  }
  @at-root .body--dark & {
    background-color: rgba($dark,.7);
  }

  backdrop-filter: blur(10px);

  > .q-card {
    background-color: transparent !important;
  }
}

.q-menu--dark {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

// ------------------------------------------------------------------
// LOADING ANIMATIONS
// ------------------------------------------------------------------

.syncing-enter-active {
  animation: syncing-anim .1s;
}
.syncing-leave-active {
  animation: syncing-anim 1s reverse;
}
@keyframes syncing-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loading-darker {
  .q-loading__backdrop {
    opacity: .75;
  }
}

// ------------------------------------------------------------------
// IMPORTS
// ------------------------------------------------------------------

@import './animation.scss';
@import 'v-network-graph/lib/style.css';
@import './page-contents.scss';