illogical-impulse/novelknock/.config/eww/eww.scss

// Base
@import 'css/colors';
@import 'css/colorscheme';
@import 'css/material';
// @import 'images/svg/color.scss';

$background: rgba(11, 11, 11, 0.8);
// $background: rgba(244, 244, 244, 0.8);
// $background: rgba(11, 7, 2, 1);
// $background: $surface;

@function tint($color, $percentage) {
  @return mix(rgb(245, 250, 255), $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(rgb(0, 7, 18), $color, $percentage);
}

@mixin bar-rounding {
  border-radius: 18px;
}

@mixin window-shadow {
  box-shadow: 0px 2px 3px mix($background, rgba(0, 0, 0, 0), 90%);
}

@mixin mainfont {
  font-family: 'Lexend';
}

@mixin icon-material {
  font-family: 'Material Symbols Rounded';
}

@mixin icon-material-filled {
  font-family: 'Material Symbols Rounded';
}

@mixin icon-nerd {
  font-family: 'JetBrainsMono Nerd Font';
}

@mixin icon-segoe {
  font-family: 'FluentSystemIcons';
}

@mixin techfont {
  font-family: 'JetBrains Mono Nerd Font';
}

@mixin window-pad {
  padding: 5px;
}

@mixin subtext {
  color: #BEBEBE;
}

@mixin greyed {
  color: #757575;
}

* {
  all: unset;
  transition: 75ms cubic-bezier(0.05, 0.7, 0.1, 1);
  background-repeat: no-repeat;
}

// Windows
@import 'css/bar';
@import 'css/bottomsheet';
@import 'css/dashboard';
@import 'css/powerview';
@import 'css/sidebar';
@import 'css/supercontext';

.clr-accent {
  color: $primary;
}

.window {
  @include window-pad;
}

.primaryElement {
  background-color: $primary;
  color: $onPrimary;
}

.primaryContainerElement {
  background-color: $primaryContainer;
  color: $onPrimaryContainer;
}

.secondaryElement {
  background-color: $secondary;
  color: $onSecondary;
}

.secondaryContainerElement {
  background-color: $secondaryContainer;
  color: $onSecondaryContainer;
}

.tertiaryElement {
  background-color: $tertiary;
  color: $onTertiary;
}

.tertiaryContainerElement {
  background-color: $tertiaryContainer;
  color: $onTertiaryContainer;
}

.shadow-pad {
  margin: 5px;
}

.window-border {
  border: 1px solid rgba(82, 82, 82, 1);
}

tooltip {
  background-color: $background;
  border-radius: 13px;
  padding: 15px;
  margin: 15px;
}