365 lines
16 KiB
SCSS
365 lines
16 KiB
SCSS
@use '@lucas-labs/lui-micro/color' as color;
|
|
@use './modules/chroma' as chroma;
|
|
@use './modules/codemirror' as codemirror;
|
|
@use './modules/custom' as custom;
|
|
@use '@lucas-labs/lui-micro/var' as var;
|
|
|
|
@mixin make-theme($is-dark: true) {
|
|
$lvl1: #{color.get('elevation/3')};
|
|
$lvl1-rgb: #{color.get('elevation/3', 'rgb')};
|
|
$lvl2: #{color.get('elevation/2')};
|
|
$lvl2-rgb: #{color.get('elevation/2', 'rgb')};
|
|
$lvl3: #{color.get('elevation/1')};
|
|
$lvl3-rgb: #{color.get('elevation/1', 'rgb')};
|
|
|
|
:root {
|
|
* {
|
|
--fonts-regular: #{var.get('font-family')};
|
|
--fonts-monospace: #{var.get('code-font-family')};
|
|
}
|
|
|
|
@if $is-dark {
|
|
color-scheme: dark;
|
|
--is-dark-theme: true;
|
|
} @else {
|
|
color-scheme: light;
|
|
--is-dark-theme: false;
|
|
}
|
|
|
|
accent-color: #{color.get('primary/base')};
|
|
|
|
--color-primary: #{color.get('primary/base')};
|
|
--color-primary-contrast: #{color.get('primary/base', 'contrast')};
|
|
|
|
--color-primary-dark-1: #{color.get('primary/dark/3%')};
|
|
--color-primary-dark-2: #{color.get('primary/dark/6%')};
|
|
--color-primary-dark-3: #{color.get('primary/dark/9%')};
|
|
--color-primary-dark-4: #{color.get('primary/dark/12%')};
|
|
--color-primary-dark-5: #{color.get('primary/dark/15%')};
|
|
--color-primary-dark-6: #{color.get('primary/dark/18%')};
|
|
--color-primary-dark-7: #{color.get('primary/dark/21%')};
|
|
|
|
--color-primary-light-1: #{color.get('primary/light/3%')};
|
|
--color-primary-light-2: #{color.get('primary/light/6%')};
|
|
--color-primary-light-3: #{color.get('primary/light/9%')};
|
|
--color-primary-light-4: #{color.get('primary/light/12%')};
|
|
--color-primary-light-5: #{color.get('primary/light/15%')};
|
|
--color-primary-light-6: #{color.get('primary/light/18%')};
|
|
--color-primary-light-7: #{color.get('primary/light/21%')};
|
|
|
|
--color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
|
|
--color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
|
|
--color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
|
|
--color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
|
|
--color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
|
|
--color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
|
|
--color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
|
|
--color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
|
|
--color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);
|
|
|
|
--color-secondary: #{color.get('elevation/5')};
|
|
|
|
--color-secondary-dark-1: #{color.get('secondary/light/3%')};
|
|
--color-secondary-dark-2: #{color.get('secondary/light/6%')};
|
|
--color-secondary-dark-3: #{color.get('secondary/light/9%')};
|
|
--color-secondary-dark-4: #{color.get('secondary/light/12%')};
|
|
--color-secondary-dark-5: #{color.get('secondary/light/15%')};
|
|
--color-secondary-dark-6: #{color.get('secondary/light/18%')};
|
|
--color-secondary-dark-7: #{color.get('secondary/light/21%')};
|
|
--color-secondary-dark-8: #{color.get('secondary/light/24%')};
|
|
--color-secondary-dark-9: #{color.get('secondary/light/27%')};
|
|
--color-secondary-dark-10: #{color.get('secondary/light/30%')};
|
|
--color-secondary-dark-11: #{color.get('secondary/light/33%')};
|
|
--color-secondary-dark-12: #{color.get('secondary/light/36%')};
|
|
--color-secondary-dark-13: #{color.get('secondary/light/39%')};
|
|
|
|
--color-secondary-light-1: #{color.get('secondary/dark/3%')};
|
|
--color-secondary-light-2: #{color.get('secondary/dark/6%')};
|
|
--color-secondary-light-3: #{color.get('secondary/dark/9%')};
|
|
--color-secondary-light-4: #{color.get('secondary/dark/12%')};
|
|
|
|
--color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
|
|
--color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
|
|
--color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
|
|
--color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
|
|
--color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
|
|
--color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
|
|
--color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
|
|
--color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
|
|
--color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);
|
|
|
|
/* colors */
|
|
--color-red: #{color.get('theme/red/base')};
|
|
--color-orange: #{color.get('theme/peach/base')};
|
|
--color-yellow: #{color.get('theme/yellow/base')};
|
|
--color-olive: #{color.get('theme/green/base')};
|
|
--color-green: #{color.get('theme/green/base')};
|
|
--color-teal: #{color.get('theme/teal/base')};
|
|
--color-blue: #{color.get('theme/blue/base')};
|
|
--color-violet: #{color.get('theme/lavender/base')};
|
|
--color-purple: #{color.get('theme/mauve/base')};
|
|
--color-pink: #{color.get('theme/pink/base')};
|
|
--color-brown: #{color.get('theme/flamingo/base')};
|
|
--color-grey: #{color.get('elevation/9')};
|
|
--color-black: #{color.get('elevation/1')};
|
|
|
|
/* dark variants */
|
|
--color-red-dark-1: #{color.get('theme/red/dark/12%')};
|
|
--color-orange-dark-1: #{color.get('theme/peach/dark/12%')};
|
|
--color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')};
|
|
--color-olive-dark-1: #{color.get('theme/green/dark/12%')};
|
|
--color-green-dark-1: #{color.get('theme/green/dark/12%')};
|
|
--color-teal-dark-1: #{color.get('theme/teal/dark/12%')};
|
|
--color-blue-dark-1: #{color.get('theme/blue/dark/12%')};
|
|
--color-violet-dark-1: #{color.get('theme/lavender/dark/12%')};
|
|
--color-purple-dark-1: #{color.get('theme/mauve/dark/12%')};
|
|
--color-pink-dark-1: #{color.get('theme/pink/dark/12%')};
|
|
--color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')};
|
|
|
|
--color-red-dark-2: #{color.get('theme/red/dark/15%')};
|
|
--color-orange-dark-2: #{color.get('theme/peach/dark/15%')};
|
|
--color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')};
|
|
--color-olive-dark-2: #{color.get('theme/green/dark/15%')};
|
|
--color-green-dark-2: #{color.get('theme/green/dark/15%')};
|
|
--color-teal-dark-2: #{color.get('theme/teal/dark/15%')};
|
|
--color-blue-dark-2: #{color.get('theme/blue/dark/15%')};
|
|
--color-violet-dark-2: #{color.get('theme/lavender/dark/15%')};
|
|
--color-purple-dark-2: #{color.get('theme/mauve/dark/15%')};
|
|
--color-pink-dark-2: #{color.get('theme/pink/dark/15%')};
|
|
--color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')};
|
|
|
|
/* light variants */
|
|
--color-red-light: #{color.get('theme/red/light/12%')};
|
|
--color-orange-light: #{color.get('theme/peach/light/12%')};
|
|
--color-yellow-light: #{color.get('theme/yellow/light/12%')};
|
|
--color-olive-light: #{color.get('theme/green/light/12%')};
|
|
--color-green-light: #{color.get('theme/green/light/12%')};
|
|
--color-teal-light: #{color.get('theme/teal/light/12%')};
|
|
--color-blue-light: #{color.get('theme/blue/light/12%')};
|
|
--color-violet-light: #{color.get('theme/lavender/light/12%')};
|
|
--color-purple-light: #{color.get('theme/mauve/light/12%')};
|
|
--color-pink-light: #{color.get('theme/pink/light/12%')};
|
|
--color-brown-light: #{color.get('theme/flamingo/light/12%')};
|
|
--color-grey-light: #{color.get('elevation/11')};
|
|
--color-black-light: #{if(
|
|
is-dark,
|
|
color.get('theme/black/light/12%'),
|
|
color.get('theme/white/light/12%')
|
|
)};
|
|
|
|
/* other colors */
|
|
--color-gold: #{color.get('theme/rosewater/base')};
|
|
--color-white: #{color.get('text')};
|
|
--color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
|
|
--color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
|
|
--color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
|
|
--color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
|
|
--color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
|
|
--color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
|
|
--color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
|
|
--color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
|
|
--color-diff-inactive: #{color.get('elevation/9')};
|
|
--color-error-border: #{color.get('theme/red/base')};
|
|
--color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
|
|
--color-error-bg-active: #{color.get('theme/red/light/6%')};
|
|
--color-error-bg-hover: #{color.get('theme/red/light/12%')};
|
|
--color-error-text: #{color.get('theme/red/base')};
|
|
--color-success-border: #{color.get('theme/green/light/12%')};
|
|
--color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
|
|
--color-success-text: #{color.get('text')};
|
|
--color-warning-border: #{color.get('theme/yellow/light/12%')};
|
|
--color-warning-bg: #{color.get('theme/yellow/base')};
|
|
--color-warning-text: #{$lvl1};
|
|
--color-info-border: #{color.get('theme/blue/light/12%')};
|
|
--color-info-bg: #{$lvl1};
|
|
--color-info-text: #{color.get('text')};
|
|
--color-red-badge: #{color.get('theme/red/light/12%')};
|
|
--color-red-badge-bg: #{$lvl1};
|
|
--color-red-badge-hover-bg: #{color.get('theme/red/light/6%')};
|
|
--color-green-badge: #{color.get('theme/green/base')};
|
|
--color-green-badge-bg: #{$lvl1};
|
|
--color-green-badge-hover-bg: #{color.get('theme/green/light/6%')};
|
|
--color-yellow-badge: #{color.get('theme/yellow/base')};
|
|
--color-yellow-badge-bg: #{$lvl1};
|
|
--color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')};
|
|
--color-orange-badge: #{color.get('theme/peach/base')};
|
|
--color-orange-badge-bg: #{$lvl1};
|
|
--color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
|
|
--color-git: #{color.get('theme/peach/base')};
|
|
--color-label-bg: #{color.get('primary/base')};
|
|
|
|
/* target-based colors */
|
|
--color-body: #{$lvl1};
|
|
--color-box-header: #{rgba(color.get('elevation/2', 'rgb'), .8)};
|
|
--color-box-body: transparent;
|
|
--color-box-body-highlight: #{color.get('elevation/4')};
|
|
--color-text-dark: #{color.get('elevation/10')};
|
|
--color-text: #{color.get('text')};
|
|
--color-text-light: #{color.get('elevation/12')};
|
|
--color-text-light-1: #{color.get('elevation/11')};
|
|
--color-text-light-2: #{color.get('elevation/10')};
|
|
--color-text-light-3: #{color.get('elevation/9')};
|
|
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
|
|
--color-timeline: #{color.get('elevation/4')};
|
|
--color-input-text: #{color.get('text')};
|
|
--color-input-background: #{color.get('elevation/4')};
|
|
--color-input-toggle-background: #{color.get('elevation/4')};
|
|
--color-input-border: #{color.get('elevation/5')};
|
|
--color-input-border-hover: #{color.get('elevation/6')};
|
|
--color-header-wrapper: #{$lvl2};
|
|
--color-header-wrapper-transparent: #00000000;
|
|
--color-light: #{color.get('elevation/6')};
|
|
--color-light-mimic-enabled: rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
|
);
|
|
--color-light-border: #{color.get('elevation/6')};
|
|
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1);
|
|
--color-active: rgba(#{color.get('text', 'rgb')}, 0.1);
|
|
--color-menu: #{color.get('elevation/3')};
|
|
--color-card: #{color.get('elevation/3')};
|
|
--color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
|
|
--color-markup-code-block: rgba(#{color.get('text', 'rgb')}, 0.05);
|
|
--color-button: #{color.get('elevation/4')};
|
|
--color-code-bg: #{color.get('elevation/2')};
|
|
--color-code-sidebar-bg: #{color.get('elevation/4')};
|
|
--color-shadow: rgba(#{$lvl1-rgb}, 0.1);
|
|
--color-secondary-bg: #{color.get('elevation/4')};
|
|
--color-text-focus: #{color.get('text')};
|
|
--color-expand-button: #{color.get('elevation/6')};
|
|
--color-placeholder-text: #{color.get('elevation/6')};
|
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
|
--color-project-board-bg: var(--color-secondary-light-2);
|
|
--color-caret: var(--color-text);
|
|
--color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
|
|
--color-reaction-active-bg: var(--color-primary-alpha-40);
|
|
--color-nav-bg: #{$lvl2};
|
|
--color-nav-hover-bg: #{color.get('elevation/6')};
|
|
--color-label-active-bg: #{color.get('elevation/6')};
|
|
--color-accent: var(--color-primary-light-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-active-line: #{color.get('elevation/5')};
|
|
}
|
|
|
|
@if $is-dark {
|
|
/* invert emojis that are hard to read otherwise */
|
|
.emoji[aria-label='check mark'],
|
|
.emoji[aria-label='currency exchange'],
|
|
.emoji[aria-label='TOP arrow'],
|
|
.emoji[aria-label='END arrow'],
|
|
.emoji[aria-label='ON! arrow'],
|
|
.emoji[aria-label='SOON arrow'],
|
|
.emoji[aria-label='heavy dollar sign'],
|
|
.emoji[aria-label='copyright'],
|
|
.emoji[aria-label='registered'],
|
|
.emoji[aria-label='trade mark'],
|
|
.emoji[aria-label='multiply'],
|
|
.emoji[aria-label='plus'],
|
|
.emoji[aria-label='minus'],
|
|
.emoji[aria-label='divide'],
|
|
.emoji[aria-label='curly loop'],
|
|
.emoji[aria-label='double curly loop'],
|
|
.emoji[aria-label='wavy dash'],
|
|
.emoji[aria-label='paw prints'],
|
|
.emoji[aria-label='musical note'],
|
|
.emoji[aria-label='musical notes'] {
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.ui.ui.ui.button:not(.inverted, .basic),
|
|
.ui.ui.ui.label:not(.inverted, .basic) {
|
|
&.primary,
|
|
&.green,
|
|
&.red,
|
|
&.teal {
|
|
color: $lvl1;
|
|
&:hover {
|
|
color: $lvl3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message {
|
|
background: var(--color-success-bg);
|
|
color: var(--color-success-text);
|
|
border-color: var(--color-success-border);
|
|
}
|
|
|
|
.ui.grey.labels .label, .ui.ui.ui.grey.label {
|
|
background-color: color.get('primary/base');
|
|
border-color: color.get('primary/base');
|
|
color: $lvl1;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.ui.label, .ui.menu .item>.label {
|
|
background: var(--color-label-bg);
|
|
color: var(--color-label-text);
|
|
}
|
|
|
|
.ui.basic.modal {
|
|
background-color: $lvl3;
|
|
}
|
|
|
|
.ui.error.message .header, .ui.negative.message .header, .ui.red.message .header {
|
|
color: var(--color-error-text);
|
|
}
|
|
|
|
// link color for signed commits
|
|
.ui.commit-header-row .svg.gitea-lock ~ a {
|
|
color: $lvl1;
|
|
}
|
|
|
|
// most recent commit hover when signed
|
|
.ui.sha.isSigned.isVerified:hover {
|
|
.shortsha {
|
|
color: $lvl1;
|
|
}
|
|
svg.gitea-lock {
|
|
fill: $lvl1;
|
|
}
|
|
}
|
|
|
|
// modal text color for the "Remove GPG Key" modal
|
|
.ui.basic.modal,
|
|
.ui.basic.modal > .header,
|
|
.ui.inverted.button {
|
|
color: color.get('text') !important;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important;
|
|
}
|
|
|
|
body {
|
|
font-size: var.get('base-font-size');
|
|
}
|
|
|
|
footer {
|
|
justify-content: flex-end !important;
|
|
|
|
.right-links {
|
|
justify-content: space-around !important;
|
|
}
|
|
|
|
.right-links>a {
|
|
border-left: none !important;
|
|
padding-left: 0px !important;
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
.ui.dropdown .menu {
|
|
left: -50% !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
}
|
|
|
|
@include chroma.make-chroma-styles;
|
|
@include codemirror.make-code-mirror-styles;
|
|
|
|
@include custom.apply-custom-styles;
|
|
}
|