style: prettier
This commit is contained in:
parent
a42fbb4fc6
commit
c490d38d72
GPG Key ID:
047886915281DD2A
@ -8,6 +8,5 @@
|
|||||||
"ecmaVersion": "latest",
|
"ecmaVersion": "latest",
|
||||||
"sourceType": "module"
|
"sourceType": "module"
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@ -2,7 +2,7 @@ name: Release
|
|||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
tags:
|
tags:
|
||||||
- "v*"
|
- 'v*'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
release:
|
release:
|
||||||
|
|||||||
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -29,11 +29,11 @@
|
|||||||
// "dist": true,
|
// "dist": true,
|
||||||
".vscode": true,
|
".vscode": true,
|
||||||
|
|
||||||
// 🧪 tests
|
// 🧪 tests
|
||||||
"**/**/test": true,
|
"**/**/test": true,
|
||||||
"**/**/tests": true,
|
"**/**/tests": true,
|
||||||
"**/**/*.specs.ts": true,
|
"**/**/*.specs.ts": true,
|
||||||
"**/**/*.specs.js": true,
|
"**/**/*.specs.js": true
|
||||||
},
|
},
|
||||||
"scss.lint.emptyRules": "ignore"
|
"scss.lint.emptyRules": "ignore"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,9 +5,11 @@ All notable changes to this project will be documented in this file.
|
|||||||
## [0.2.1] - 2024-10-19
|
## [0.2.1] - 2024-10-19
|
||||||
|
|
||||||
### Fixes
|
### Fixes
|
||||||
- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
|
|
||||||
|
- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
|
||||||
|
|
||||||
## [0.2.0] - 2024-10-19
|
## [0.2.0] - 2024-10-19
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- Pinned the project to the Gitea 1.22.3 version.
|
|
||||||
|
- Pinned the project to the Gitea 1.22.3 version.
|
||||||
|
|||||||
12
README.md
12
README.md
@ -2,7 +2,7 @@
|
|||||||
<code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme
|
<code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
*Theme for `zeldon's` gitea server.*
|
_Theme for `zeldon's` gitea server._
|
||||||
|
|
||||||
## Preview
|
## Preview
|
||||||
|
|
||||||
@ -26,19 +26,21 @@ DEFAULT_THEME=dark # optional
|
|||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
||||||
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
|
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
|
||||||
- [`Blender's Bthree Dark`](https://projects.blender.org/infrastructure/gitea-custom), base color scheme and templates.
|
- [`Blender's Bthree Dark`](https://projects.blender.org/infrastructure/gitea-custom), base color scheme and templates.
|
||||||
- [`lucas-labs/gitea-lugit-theme`](https://github.com/lucas-labs/gitea-lugit-theme), direct codebase fork.
|
- [`lucas-labs/gitea-lugit-theme`](https://github.com/lucas-labs/gitea-lugit-theme), direct codebase fork.
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
### build
|
### build
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ npm install
|
$ npm install
|
||||||
$ npm run build
|
$ npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### serve
|
### serve
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ npm run serve -- --server path/to/gitea/custom
|
$ npm run serve -- --server path/to/gitea/custom
|
||||||
|
|
||||||
@ -52,4 +54,4 @@ $ npm run serve -- -- --server c:/gitea/custom
|
|||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
Feel free to open an issue or a pull request. Contributions are welcome!
|
Feel free to open an issue or a pull request. Contributions are welcome!
|
||||||
|
|||||||
@ -11,9 +11,9 @@
|
|||||||
|
|
||||||
@function color-variants-light($color, $with-base: false) {
|
@function color-variants-light($color, $with-base: false) {
|
||||||
$set: (
|
$set: (
|
||||||
'3%': light-change($color, -3%),
|
'3%': light-change($color, -3%),
|
||||||
'6%': light-change($color, -6%),
|
'6%': light-change($color, -6%),
|
||||||
'9%': light-change($color, -9%),
|
'9%': light-change($color, -9%),
|
||||||
'10%': light-change($color, -10%),
|
'10%': light-change($color, -10%),
|
||||||
'12%': light-change($color, -12%),
|
'12%': light-change($color, -12%),
|
||||||
'15%': light-change($color, -15%),
|
'15%': light-change($color, -15%),
|
||||||
@ -33,21 +33,26 @@
|
|||||||
'85%': light-change($color, -85%),
|
'85%': light-change($color, -85%),
|
||||||
'90%': light-change($color, -90%),
|
'90%': light-change($color, -90%),
|
||||||
'95%': light-change($color, -95%),
|
'95%': light-change($color, -95%),
|
||||||
'100%': light-change($color, -100%)
|
'100%': light-change($color, -100%),
|
||||||
);
|
);
|
||||||
|
|
||||||
@if $with-base {
|
@if $with-base {
|
||||||
$set: map.merge((base: $color), $set);
|
$set: map.merge(
|
||||||
|
(
|
||||||
|
base: $color,
|
||||||
|
),
|
||||||
|
$set
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $set;
|
@return $set;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function color-variants-dark($color, $with-base: false) {
|
@function color-variants-dark($color, $with-base: false) {
|
||||||
$set: (
|
$set: (
|
||||||
'3%': light-change($color, 3%),
|
'3%': light-change($color, 3%),
|
||||||
'6%': light-change($color, 6%),
|
'6%': light-change($color, 6%),
|
||||||
'9%': light-change($color, 9%),
|
'9%': light-change($color, 9%),
|
||||||
'10%': light-change($color, 10%),
|
'10%': light-change($color, 10%),
|
||||||
'12%': light-change($color, 12%),
|
'12%': light-change($color, 12%),
|
||||||
'15%': light-change($color, 15%),
|
'15%': light-change($color, 15%),
|
||||||
@ -67,34 +72,59 @@
|
|||||||
'85%': light-change($color, 85%),
|
'85%': light-change($color, 85%),
|
||||||
'90%': light-change($color, 90%),
|
'90%': light-change($color, 90%),
|
||||||
'95%': light-change($color, 95%),
|
'95%': light-change($color, 95%),
|
||||||
'100%': light-change($color, 100%)
|
'100%': light-change($color, 100%),
|
||||||
);
|
);
|
||||||
|
|
||||||
@if $with-base {
|
@if $with-base {
|
||||||
$set: map.merge((base: $color), $set);
|
$set: map.merge(
|
||||||
|
(
|
||||||
|
base: $color,
|
||||||
|
),
|
||||||
|
$set
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $set;
|
@return $set;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) {
|
@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) {
|
||||||
$set: ();
|
$set: ();
|
||||||
|
|
||||||
@if $light {
|
@if $light {
|
||||||
$set: map.merge($set, (light: color-variants-light($color)));
|
$set: map.merge(
|
||||||
|
$set,
|
||||||
|
(
|
||||||
|
light: color-variants-light($color),
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $dark {
|
@if $dark {
|
||||||
$set: map.merge($set, (dark: color-variants-dark($color)));
|
$set: map.merge(
|
||||||
|
$set,
|
||||||
|
(
|
||||||
|
dark: color-variants-dark($color),
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $base {
|
@if $base {
|
||||||
@if $override-base-with {
|
@if $override-base-with {
|
||||||
$set: map.merge($set, (base: $override-base-with));
|
$set: map.merge(
|
||||||
|
$set,
|
||||||
|
(
|
||||||
|
base: $override-base-with,
|
||||||
|
)
|
||||||
|
);
|
||||||
} @else {
|
} @else {
|
||||||
$set: map.merge($set, (base: $color));
|
$set: map.merge(
|
||||||
|
$set,
|
||||||
|
(
|
||||||
|
base: $color,
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $set;
|
@return $set;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,26 @@
|
|||||||
$variables: (
|
$variables: (
|
||||||
'font-size': (
|
'font-size': (
|
||||||
'xs': .714rem,
|
'xs': 0.714rem,
|
||||||
'sm': .857rem,
|
'sm': 0.857rem,
|
||||||
'md': 1rem, // 14
|
'md': 1rem,
|
||||||
'lg': 1.143rem, // 16
|
// 14
|
||||||
'xl': 1.286rem, // 18
|
'lg': 1.143rem,
|
||||||
'2xl': 1.429rem, // 20
|
// 16
|
||||||
'3xl': 1.714rem, // 24
|
'xl': 1.286rem,
|
||||||
'4xl': 2rem, // 28
|
// 18
|
||||||
),
|
'2xl': 1.429rem,
|
||||||
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
// 20
|
||||||
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
'3xl': 1.714rem,
|
||||||
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
// 24
|
||||||
|
'4xl': 2rem,
|
||||||
|
// 28
|
||||||
|
),
|
||||||
|
'font-family':
|
||||||
|
'-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||||
|
'code-font-family':
|
||||||
|
'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
||||||
|
'emoji-font-family':
|
||||||
|
'"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
||||||
'measure': (
|
'measure': (
|
||||||
'.25x': 4px,
|
'.25x': 4px,
|
||||||
'.375x': 6px,
|
'.375x': 6px,
|
||||||
@ -32,5 +41,5 @@ $variables: (
|
|||||||
),
|
),
|
||||||
'repo-home': (
|
'repo-home': (
|
||||||
'sidebar-width': 296px,
|
'sidebar-width': 296px,
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@import "./theme-light.css" (prefers-color-scheme: light);
|
@import './theme-light.css' (prefers-color-scheme: light);
|
||||||
@import "./theme-dark.css" (prefers-color-scheme: dark);
|
@import './theme-dark.css' (prefers-color-scheme: dark);
|
||||||
|
|||||||
@ -7,50 +7,53 @@ $is-dark: true;
|
|||||||
$brand: hsl(204deg, 90%, 60%);
|
$brand: hsl(204deg, 90%, 60%);
|
||||||
|
|
||||||
$colors: (
|
$colors: (
|
||||||
primary: c.variants($brand),
|
primary: c.variants($brand),
|
||||||
secondary: c.variants(hsl(213, 12%, 25%)),
|
secondary: c.variants(hsl(213, 12%, 25%)),
|
||||||
text: #bbc0ca,
|
text: #bbc0ca,
|
||||||
subtle: hsl(224, 9.2%, 60%),
|
subtle: hsl(224, 9.2%, 60%),
|
||||||
palette: (
|
palette: (
|
||||||
'red': c.variants(hsl(0, 56.4%, 50%)),
|
'red': c.variants(hsl(0, 56.4%, 50%)),
|
||||||
'orange': c.variants(hsl(23.8, 89%, 38%)),
|
'orange': c.variants(hsl(23.8, 89%, 38%)),
|
||||||
'yellow': c.variants(hsl(44.8, 97%, 38%)),
|
'yellow': c.variants(hsl(44.8, 97%, 38%)),
|
||||||
'olive': c.variants(hsl(67.5, 79.1%, 32%)),
|
'olive': c.variants(hsl(67.5, 79.1%, 32%)),
|
||||||
'green': c.variants(hsl(124deg, 41%, 30%)),
|
'green': c.variants(hsl(124deg, 41%, 30%)),
|
||||||
'teal': c.variants(hsl(177, 100%, 25%)),
|
'teal': c.variants(hsl(177, 100%, 25%)),
|
||||||
'blue': c.variants(hsl(206, 56%, 45%)),
|
'blue': c.variants(hsl(206, 56%, 45%)),
|
||||||
'violet': c.variants(hsl(259.2, 66.5%, 60%)),
|
'violet': c.variants(hsl(259.2, 66.5%, 60%)),
|
||||||
'purple': c.variants(hsl(285, 55.9%, 53%)),
|
'purple': c.variants(hsl(285, 55.9%, 53%)),
|
||||||
'pink': c.variants(hsl(326, 64.6%, 47%)),
|
'pink': c.variants(hsl(326, 64.6%, 47%)),
|
||||||
'brown': c.variants(hsl(23.4, 33%, 43%)),
|
'brown': c.variants(hsl(23.4, 33%, 43%)),
|
||||||
'black': c.variants(hsl(213, 21%, 12%)),
|
'black': c.variants(hsl(213, 21%, 12%)),
|
||||||
'white': c.variants(#f0f0f0),
|
'white': c.variants(#f0f0f0),
|
||||||
),
|
),
|
||||||
elevation: (
|
elevation: (
|
||||||
'1': hsl(213, 10%, 7%),
|
'1': hsl(213, 10%, 7%),
|
||||||
'2': hsl(213, 12%, 8%),
|
'2': hsl(213, 12%, 8%),
|
||||||
'3': hsl(213, 12%, 10%),
|
'3': hsl(213, 12%, 10%),
|
||||||
'4': hsl(213, 12%, 13%),
|
'4': hsl(213, 12%, 13%),
|
||||||
'5': hsl(213, 12%, 18%),
|
'5': hsl(213, 12%, 18%),
|
||||||
'6': hsl(213, 12%, 25%),
|
'6': hsl(213, 12%, 25%),
|
||||||
'7': hsl(213, 12%, 35%),
|
'7': hsl(213, 12%, 35%),
|
||||||
'8': hsl(213, 12%, 45%),
|
'8': hsl(213, 12%, 45%),
|
||||||
'9': hsl(213, 12%, 55%),
|
'9': hsl(213, 12%, 55%),
|
||||||
'10': hsl(213, 12%, 65%),
|
'10': hsl(213, 12%, 65%),
|
||||||
'11': hsl(213, 12%, 75%),
|
'11': hsl(213, 12%, 75%),
|
||||||
'12': hsl(213, 12%, 85%),
|
'12': hsl(213, 12%, 85%),
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// init lui-micro, css-vars only (no reboot, no basic)
|
// init lui-micro, css-vars only (no reboot, no basic)
|
||||||
@include lui.init(
|
@include lui.init(
|
||||||
$theme: (colors: $colors, variables: vars.$variables),
|
$theme: (
|
||||||
|
colors: $colors,
|
||||||
|
variables: vars.$variables,
|
||||||
|
),
|
||||||
$options: (
|
$options: (
|
||||||
reboot: false,
|
reboot: false,
|
||||||
basic: false,
|
basic: false,
|
||||||
fg-var-name: 'text',
|
fg-var-name: 'text',
|
||||||
bg-var-name: 'elevation/1',
|
bg-var-name: 'elevation/1',
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@include theme.make-theme($is-dark);
|
@include theme.make-theme($is-dark);
|
||||||
|
|||||||
@ -7,50 +7,79 @@ $is-dark: false;
|
|||||||
$brand: #6296e2;
|
$brand: #6296e2;
|
||||||
|
|
||||||
$colors: (
|
$colors: (
|
||||||
primary: c.variants($brand),
|
primary: c.variants($brand),
|
||||||
secondary: c.variants(#bcc0cc),
|
secondary: c.variants(#bcc0cc),
|
||||||
text: #484b60,
|
text: #484b60,
|
||||||
subtle: #656c90, // same as elevation/10
|
subtle: #656c90,
|
||||||
palette: (
|
// same as elevation/10
|
||||||
'red': c.variants(#d20f39), // red
|
palette:
|
||||||
'orange': c.variants(#fe640b), // peach
|
(
|
||||||
'yellow': c.variants(#df8e1d), // yellow
|
'red': c.variants(#d20f39),
|
||||||
'olive': c.variants(#e2f095),
|
// red
|
||||||
'green': c.variants(#34ac56), // green
|
'orange': c.variants(#fe640b),
|
||||||
'teal': c.variants(#179299), // teal
|
// peach
|
||||||
'blue': c.variants(#1e66f5), // blue
|
'yellow': c.variants(#df8e1d),
|
||||||
'violet': c.variants(#7287fd), // lavender
|
// yellow
|
||||||
'purple': c.variants(#8652e7), // mauve
|
'olive': c.variants(#e2f095),
|
||||||
'pink': c.variants(#ea76cb), // pink
|
'green': c.variants(#34ac56),
|
||||||
'brown': c.variants(#dd7878), // flamingo
|
// green
|
||||||
'black': c.variants(#181825), // black
|
'teal': c.variants(#179299),
|
||||||
'white': c.variants(#e6edf3), // white
|
// teal
|
||||||
),
|
'blue': c.variants(#1e66f5),
|
||||||
|
// blue
|
||||||
|
'violet': c.variants(#7287fd),
|
||||||
|
// lavender
|
||||||
|
'purple': c.variants(#8652e7),
|
||||||
|
// mauve
|
||||||
|
'pink': c.variants(#ea76cb),
|
||||||
|
// pink
|
||||||
|
'brown': c.variants(#dd7878),
|
||||||
|
// flamingo
|
||||||
|
'black': c.variants(#181825),
|
||||||
|
// black
|
||||||
|
'white': c.variants(#e6edf3),
|
||||||
|
// white
|
||||||
|
),
|
||||||
elevation: (
|
elevation: (
|
||||||
'1': #fcfcfd, // elevation/1
|
'1': #fcfcfd,
|
||||||
'2': #f6f7f9, // elevation/2
|
// elevation/1
|
||||||
'3': #eff1f5, // elevation/3
|
'2': #f6f7f9,
|
||||||
'4': #e6e9ef, // elevation/4
|
// elevation/2
|
||||||
'5': #d7dce6, // elevation/5
|
'3': #eff1f5,
|
||||||
'6': #bcc0cc, // elevation/6
|
// elevation/3
|
||||||
'7': #9ba7bf, // elevation/7
|
'4': #e6e9ef,
|
||||||
'8': #838fae, // elevation/8
|
// elevation/4
|
||||||
'9': #717a9f, // elevation/9
|
'5': #d7dce6,
|
||||||
'10': #656c90, // elevation/10
|
// elevation/5
|
||||||
'11': #565b77, // elevation/11
|
'6': #bcc0cc,
|
||||||
'12': #484b60, // elevation/12
|
// elevation/6
|
||||||
)
|
'7': #9ba7bf,
|
||||||
|
// elevation/7
|
||||||
|
'8': #838fae,
|
||||||
|
// elevation/8
|
||||||
|
'9': #717a9f,
|
||||||
|
// elevation/9
|
||||||
|
'10': #656c90,
|
||||||
|
// elevation/10
|
||||||
|
'11': #565b77,
|
||||||
|
// elevation/11
|
||||||
|
'12': #484b60,
|
||||||
|
// elevation/12
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// init lui-micro, css-vars only (no reboot, no basic)
|
// init lui-micro, css-vars only (no reboot, no basic)
|
||||||
@include lui.init(
|
@include lui.init(
|
||||||
$theme: (colors: $colors, variables: vars.$variables),
|
$theme: (
|
||||||
|
colors: $colors,
|
||||||
|
variables: vars.$variables,
|
||||||
|
),
|
||||||
$options: (
|
$options: (
|
||||||
reboot: false,
|
reboot: false,
|
||||||
basic: false,
|
basic: false,
|
||||||
fg-var-name: 'text',
|
fg-var-name: 'text',
|
||||||
bg-var-name: 'elevation/1',
|
bg-var-name: 'elevation/1',
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@include theme.make-theme($is-dark);
|
@include theme.make-theme($is-dark);
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
@mixin avatar {
|
@mixin avatar {
|
||||||
img.ui.avatar, .ui.avatar img, .ui.avatar svg {
|
img.ui.avatar,
|
||||||
|
.ui.avatar img,
|
||||||
|
.ui.avatar svg {
|
||||||
&:not(.org-avatar) {
|
&:not(.org-avatar) {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
object-fit: fill;
|
object-fit: fill;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,11 +8,11 @@
|
|||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.segment form >*:first-child {
|
.ui.segment form > *:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.segment form >*:last-child {
|
.ui.segment form > *:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -20,16 +20,22 @@
|
|||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) {
|
.ui.attached.segment:has(+ .ui[class*='top attached'].header),
|
||||||
|
.ui.attached.segment:has(+ .page.buttons),
|
||||||
|
.ui.attached.segment:last-child,
|
||||||
|
.ui.segment:has(+ .ui.segment:not(.attached)),
|
||||||
|
.ui.attached.segment:has(+ .ui.modal) {
|
||||||
border-bottom-left-radius: var(--border-radius);
|
border-bottom-left-radius: var(--border-radius);
|
||||||
border-bottom-right-radius: var(--border-radius);
|
border-bottom-right-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.segments:not(.horizontal)>.segment:first-child, .ui.segments.horizontal>.segment:first-child {
|
.ui.segments:not(.horizontal) > .segment:first-child,
|
||||||
|
.ui.segments.horizontal > .segment:first-child {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.segments:not(.horizontal)>.segment:last-child, .ui.horizontal.segments>.segment:last-child {
|
.ui.segments:not(.horizontal) > .segment:last-child,
|
||||||
|
.ui.horizontal.segments > .segment:last-child {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -39,14 +45,17 @@
|
|||||||
.content {
|
.content {
|
||||||
background-color: var(--color-box-body);
|
background-color: var(--color-box-body);
|
||||||
|
|
||||||
>.comment-header, >.ui.segment {
|
> .comment-header,
|
||||||
&:before, &:after {
|
> .ui.segment {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-header {
|
.comment-header {
|
||||||
padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important;
|
padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x')
|
||||||
|
var.get('measure/1x') !important;
|
||||||
|
|
||||||
.comment-header-left {
|
.comment-header-left {
|
||||||
.text {
|
.text {
|
||||||
@ -62,7 +71,7 @@
|
|||||||
* {
|
* {
|
||||||
color: color.get('subtle') !important;
|
color: color.get('subtle') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
height: var.get('measure/1.25x', 1.25rem) !important;
|
height: var.get('measure/1.25x', 1.25rem) !important;
|
||||||
padding: 0px var.get('measure/.375x') !important;
|
padding: 0px var.get('measure/.375x') !important;
|
||||||
@ -73,12 +82,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-list .comment>.content>div:last-child {
|
.comment-list .comment > .content > div:last-child {
|
||||||
border-bottom-left-radius: var(--border-radius) !important;
|
border-bottom-left-radius: var(--border-radius) !important;
|
||||||
border-bottom-right-radius: var(--border-radius) !important;
|
border-bottom-right-radius: var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-list .comment>.content>div:first-child {
|
.comment-list .comment > .content > div:first-child {
|
||||||
border-top-left-radius: var(--border-radius) !important;
|
border-top-left-radius: var(--border-radius) !important;
|
||||||
border-top-right-radius: var(--border-radius) !important;
|
border-top-right-radius: var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
@ -86,4 +95,4 @@
|
|||||||
.ui.comments .comment {
|
.ui.comments .comment {
|
||||||
margin: var.get('measure/.25x') 0 0;
|
margin: var.get('measure/.25x') 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||||
min-height: 0px;
|
min-height: 0px;
|
||||||
margin-bottom: var.get('measure/1x') !important;
|
margin-bottom: var.get('measure/1x') !important;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
margin: -1px 0 0 -1px; // merge borders
|
margin: -1px 0 0 -1px; // merge borders
|
||||||
border-top-left-radius: var(--border-radius) !important;
|
border-top-left-radius: var(--border-radius) !important;
|
||||||
@ -39,7 +39,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
.EasyMDEContainer { // legacy editor
|
.EasyMDEContainer {
|
||||||
|
// legacy editor
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
|
||||||
.editor-toolbar {
|
.editor-toolbar {
|
||||||
@ -47,7 +48,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
markdown-toolbar, .EasyMDEContainer .editor-toolbar {
|
markdown-toolbar,
|
||||||
|
.EasyMDEContainer .editor-toolbar {
|
||||||
padding: 0 10px !important;
|
padding: 0 10px !important;
|
||||||
|
|
||||||
.markdown-toolbar-group {
|
.markdown-toolbar-group {
|
||||||
@ -67,12 +69,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-toolbar-button, button {
|
.markdown-toolbar-button,
|
||||||
|
button {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--color-text-light-2) !important;
|
color: var(--color-text-light-2) !important;
|
||||||
padding: var.get('measure/.375x') !important;
|
padding: var.get('measure/.375x') !important;
|
||||||
transition: background-color .1s ease;
|
transition: background-color 0.1s ease;
|
||||||
border-radius: var.get('measure/.375x') !important;
|
border-radius: var.get('measure/.375x') !important;
|
||||||
height: auto;
|
height: auto;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
@ -80,14 +83,14 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
background-color: color.get('elevation/5') !important;
|
background-color: color.get('elevation/5') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if has attribute level
|
// if has attribute level
|
||||||
&[level] {
|
&[level] {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if aria-checked is true
|
// if aria-checked is true
|
||||||
&[aria-checked="true"] {
|
&[aria-checked='true'] {
|
||||||
background-color: color.get('elevation/4');
|
background-color: color.get('elevation/4');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -98,8 +101,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
textarea,
|
||||||
|
.CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding: var.get('measure/1x') var.get('measure/1x') !important;
|
padding: var.get('measure/1x') var.get('measure/1x') !important;
|
||||||
@ -127,12 +131,15 @@
|
|||||||
outline: none !important;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.tab.markup[data-tab-panel=markdown-previewer] {
|
.ui.tab.markup[data-tab-panel='markdown-previewer'] {
|
||||||
border-bottom: 0px;
|
border-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form {
|
#comment-form,
|
||||||
|
.edit-content-zone,
|
||||||
|
.comment-form,
|
||||||
|
.comment-code-cloud form {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
margin-bottom: var.get('measure/1x') !important;
|
margin-bottom: var.get('measure/1x') !important;
|
||||||
gap: var.get('measure/.5x');
|
gap: var.get('measure/.5x');
|
||||||
padding: var.get('measure/.5x') var.get('measure/.75x');
|
padding: var.get('measure/.5x') var.get('measure/.75x');
|
||||||
|
|
||||||
.latest-commit {
|
.latest-commit {
|
||||||
gap: var.get('measure/.5x');
|
gap: var.get('measure/.5x');
|
||||||
}
|
}
|
||||||
@ -35,11 +35,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) {
|
.ui.attached.segment:has(+ .ui[class*='top attached'].header),
|
||||||
|
.ui.attached.segment:has(+ .page.buttons),
|
||||||
|
.ui.attached.segment:last-child,
|
||||||
|
.ui.segment:has(+ .ui.segment:not(.attached)),
|
||||||
|
.ui.attached.segment:has(+ .ui.modal) {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: var(--border-radius);
|
border-bottom-left-radius: var(--border-radius);
|
||||||
border-bottom-right-radius: var(--border-radius);
|
border-bottom-right-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,4 +8,3 @@
|
|||||||
@include forms.tabular-menu;
|
@include forms.tabular-menu;
|
||||||
@include forms.input;
|
@include forms.input;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
@mixin label-signed {
|
@mixin label-signed {
|
||||||
.label.isSigned {
|
.label.isSigned {
|
||||||
font-size: var.get('font-size/sm') !important;
|
font-size: var.get('font-size/sm') !important;
|
||||||
margin: 0px .25em !important;
|
margin: 0px 0.25em !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
display: inline-flex !important;
|
display: inline-flex !important;
|
||||||
gap: 0px !important;
|
gap: 0px !important;
|
||||||
@ -14,7 +14,10 @@
|
|||||||
--color-label-bg: none !important;
|
--color-label-bg: none !important;
|
||||||
--color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
--color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||||
--color-green-badge-bg: none !important;
|
--color-green-badge-bg: none !important;
|
||||||
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
|
--color-green-badge-hover-bg: rgba(
|
||||||
|
#{color.get('palette/green/base', 'rgb')},
|
||||||
|
0.05
|
||||||
|
) !important;
|
||||||
--color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
|
--color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
|
||||||
--color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
--color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||||
--color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
--color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||||
@ -61,4 +64,4 @@
|
|||||||
color: var(--color-red-contrast) !important;
|
color: var(--color-red-contrast) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,17 +3,17 @@
|
|||||||
|
|
||||||
@mixin markup {
|
@mixin markup {
|
||||||
.markup {
|
.markup {
|
||||||
.task-list-item input[type=checkbox] {
|
.task-list-item input[type='checkbox'] {
|
||||||
margin: 0 .5em .25em -1.4em;
|
margin: 0 0.5em 0.25em -1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type='checkbox'] {
|
||||||
--border-radius: #{var.get('measure/.25x')};
|
--border-radius: #{var.get('measure/.25x')};
|
||||||
width: var.get('measure/1x');
|
width: var.get('measure/1x');
|
||||||
height: var.get('measure/1x');
|
height: var.get('measure/1x');
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
--color-input-background: #{color.get('elevation/5')};
|
--color-input-background: #{color.get('elevation/5')};
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
@ -22,7 +22,8 @@
|
|||||||
--color-text: var(--color-primary-contrast);
|
--color-text: var(--color-primary-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):hover, &:not([disabled]):active {
|
&:not([disabled]):hover,
|
||||||
|
&:not([disabled]):active {
|
||||||
border-color: var(--color-secondary);
|
border-color: var(--color-secondary);
|
||||||
background-color: color.get('elevation/6');
|
background-color: color.get('elevation/6');
|
||||||
|
|
||||||
@ -30,6 +31,6 @@
|
|||||||
background-color: var(--color-primary-hover);
|
background-color: var(--color-primary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,8 @@
|
|||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
button, .button {
|
button,
|
||||||
|
.button {
|
||||||
border-color: color.get('elevation/6') !important;
|
border-color: color.get('elevation/6') !important;
|
||||||
gap: var.get('measure/.5x') !important;
|
gap: var.get('measure/.5x') !important;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
@ -16,17 +17,18 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
border-color: color.get('elevation/7') !important;
|
border-color: color.get('elevation/7') !important;
|
||||||
|
|
||||||
+.label {
|
+ .label {
|
||||||
border-left-color: color.get('elevation/7') !important;
|
border-left-color: color.get('elevation/7') !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.labeled {
|
&.labeled {
|
||||||
button, .button {
|
button,
|
||||||
|
.button {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
border-color: color.get('elevation/6') !important;
|
border-color: color.get('elevation/6') !important;
|
||||||
@ -36,8 +38,7 @@
|
|||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
border-bottom-right-radius: var(--border-radius);
|
border-bottom-right-radius: var(--border-radius);
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: color.get('elevation/7') !important;
|
border-color: color.get('elevation/7') !important;
|
||||||
}
|
}
|
||||||
@ -50,19 +51,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin gitea-button {
|
@mixin gitea-button {
|
||||||
.ui.icon.buttons .button, .ui.icon.button:not(.compact) {
|
.ui.icon.buttons .button,
|
||||||
|
.ui.icon.button:not(.compact) {
|
||||||
// padding: 50px;
|
// padding: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-comment-buttons-buttons {
|
.code-comment-buttons-buttons {
|
||||||
button:not(.labeled):not(.icon) {
|
button:not(.labeled):not(.icon) {
|
||||||
padding: .78571429em !important;
|
padding: 0.78571429em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// buttons group
|
// buttons group
|
||||||
.ui.buttons {
|
.ui.buttons {
|
||||||
&.icon .button, &.icon:not(.compact) {
|
&.icon .button,
|
||||||
|
&.icon:not(.compact) {
|
||||||
padding: 50px 50px;
|
padding: 50px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,7 +93,7 @@
|
|||||||
|
|
||||||
.ui.button {
|
.ui.button {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
transition: color .1s ease, background-color .1s ease, border-color .1s ease;
|
transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease;
|
||||||
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
|
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
|
||||||
font-size: var.get('font-size/md');
|
font-size: var.get('font-size/md');
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
@ -104,7 +107,8 @@
|
|||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.red, &.red.basic {
|
&.red,
|
||||||
|
&.red.basic {
|
||||||
border-color: var(--color-secondary);
|
border-color: var(--color-secondary);
|
||||||
background: var(--color-button);
|
background: var(--color-button);
|
||||||
color: var(--color-red);
|
color: var(--color-red);
|
||||||
@ -119,7 +123,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary, &.red, &.basic {
|
&.primary,
|
||||||
|
&.red,
|
||||||
|
&.basic {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -127,5 +133,5 @@
|
|||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
background: var(--color-green-dark-2);
|
background: var(--color-green-dark-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,21 +4,21 @@
|
|||||||
@mixin -all-inputs($state: null) {
|
@mixin -all-inputs($state: null) {
|
||||||
input#{$state},
|
input#{$state},
|
||||||
textarea#{$state},
|
textarea#{$state},
|
||||||
.ui.input>input#{$state},
|
.ui.input > input#{$state},
|
||||||
.ui.form input:not([type])#{$state},
|
.ui.form input:not([type])#{$state},
|
||||||
.ui.form select#{$state},
|
.ui.form select#{$state},
|
||||||
.ui.form textarea#{$state},
|
.ui.form textarea#{$state},
|
||||||
.ui.form input[type=date]#{$state},
|
.ui.form input[type='date']#{$state},
|
||||||
.ui.form input[type=datetime-local]#{$state},
|
.ui.form input[type='datetime-local']#{$state},
|
||||||
.ui.form input[type=email]#{$state},
|
.ui.form input[type='email']#{$state},
|
||||||
.ui.form input[type=file]#{$state},
|
.ui.form input[type='file']#{$state},
|
||||||
.ui.form input[type=number]#{$state},
|
.ui.form input[type='number']#{$state},
|
||||||
.ui.form input[type=password]#{$state},
|
.ui.form input[type='password']#{$state},
|
||||||
.ui.form input[type=search]#{$state},
|
.ui.form input[type='search']#{$state},
|
||||||
.ui.form input[type=tel]#{$state},
|
.ui.form input[type='tel']#{$state},
|
||||||
.ui.form input[type=text]#{$state},
|
.ui.form input[type='text']#{$state},
|
||||||
.ui.form input[type=time]#{$state},
|
.ui.form input[type='time']#{$state},
|
||||||
.ui.form input[type=url]#{$state},
|
.ui.form input[type='url']#{$state},
|
||||||
.ui.selection.dropdown#{$state} {
|
.ui.selection.dropdown#{$state} {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
@ -31,8 +31,8 @@
|
|||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
|
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
|
||||||
|
|
||||||
+.ui.button:last-child {
|
+ .ui.button:last-child {
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
border-bottom-right-radius: var(--border-radius);
|
border-bottom-right-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
@ -40,7 +40,7 @@
|
|||||||
|
|
||||||
@include -all-inputs(':hover') {
|
@include -all-inputs(':hover') {
|
||||||
border-color: var(--color-input-border);
|
border-color: var(--color-input-border);
|
||||||
color: var(--color-input-text)
|
color: var(--color-input-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include -all-inputs(':focus') {
|
@include -all-inputs(':focus') {
|
||||||
@ -56,31 +56,31 @@
|
|||||||
outline: 2px solid var(--color-accent);
|
outline: 2px solid var(--color-accent);
|
||||||
|
|
||||||
> input.search {
|
> input.search {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.action.input:not([class*="left action"])>input:focus {
|
.ui.action.input:not([class*='left action']) > input:focus {
|
||||||
border-right-color: var(--color-input-border);
|
border-right-color: var(--color-input-border);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.action.input>.dropdown:not(:first-child):not(:last-child),
|
.ui.action.input > .dropdown:not(:first-child):not(:last-child),
|
||||||
.ui.action.input>.button:not(:first-child):not(:last-child),
|
.ui.action.input > .button:not(:first-child):not(:last-child),
|
||||||
.ui.action.input>.buttons:not(:first-child):not(:last-child)>.button {
|
.ui.action.input > .buttons:not(:first-child):not(:last-child) > .button {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection,
|
.ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection,
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover,
|
.ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection:hover,
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+.button,
|
.ui.action.input:not([class*='left action']) > input:focus + .button,
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+.button:hover,
|
.ui.action.input:not([class*='left action']) > input:focus + .button:hover,
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+i.icon+.button,
|
.ui.action.input:not([class*='left action']) > input:focus + i.icon + .button,
|
||||||
.ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover {
|
.ui.action.input:not([class*='left action']) > input:focus + i.icon + .button:hover {
|
||||||
border-left-color: var(--color-input-border);
|
border-left-color: var(--color-input-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.form .field>label {
|
.ui.form .field > label {
|
||||||
margin: 0 0 var.get('measure/.375x');
|
margin: 0 0 var.get('measure/.375x');
|
||||||
font-size: var.get('font-size/md');
|
font-size: var.get('font-size/md');
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -88,23 +88,23 @@
|
|||||||
|
|
||||||
.ui.form textarea,
|
.ui.form textarea,
|
||||||
.ui.form input:not([type]),
|
.ui.form input:not([type]),
|
||||||
.ui.form input[type=date],
|
.ui.form input[type='date'],
|
||||||
.ui.form input[type=datetime-local],
|
.ui.form input[type='datetime-local'],
|
||||||
.ui.form input[type=email],
|
.ui.form input[type='email'],
|
||||||
.ui.form input[type=number],
|
.ui.form input[type='number'],
|
||||||
.ui.form input[type=password],
|
.ui.form input[type='password'],
|
||||||
.ui.form input[type=search],
|
.ui.form input[type='search'],
|
||||||
.ui.form input[type=tel],
|
.ui.form input[type='tel'],
|
||||||
.ui.form input[type=time],
|
.ui.form input[type='time'],
|
||||||
.ui.form input[type=text],
|
.ui.form input[type='text'],
|
||||||
.ui.form input[type=file],
|
.ui.form input[type='file'],
|
||||||
.ui.form input[type=url] {
|
.ui.form input[type='url'] {
|
||||||
min-height: 2.71428571em;
|
min-height: 2.71428571em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.selection.dropdown {
|
.ui.selection.dropdown {
|
||||||
min-height: 2.71428571em;
|
min-height: 2.71428571em;
|
||||||
>input {
|
> input {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -112,16 +112,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.multiple.dropdown>.label, .ui.multiple.search.dropdown>input.search {
|
.ui.multiple.dropdown > .label,
|
||||||
|
.ui.multiple.search.dropdown > input.search {
|
||||||
padding: var.get('measure/.375x') var.get('measure/.75x');
|
padding: var.get('measure/.375x') var.get('measure/.75x');
|
||||||
margin: .14285714rem .28571429rem .14285714rem 0;
|
margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.multiple.search.dropdown>input.search {
|
.ui.multiple.search.dropdown > input.search {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.checkbox label, .ui.radio.checkbox label {
|
.ui.checkbox label,
|
||||||
|
.ui.radio.checkbox label {
|
||||||
margin-left: 20px !important;
|
margin-left: 20px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,18 +4,23 @@
|
|||||||
@mixin dropdown-menu {
|
@mixin dropdown-menu {
|
||||||
.ui.dropdown {
|
.ui.dropdown {
|
||||||
// dropdown menu
|
// dropdown menu
|
||||||
>.menu {
|
> .menu {
|
||||||
--border-radius: #{var.get('measure/.75x')};
|
--border-radius: #{var.get('measure/.75x')};
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
&.hidden { opacity: 0 !important;}
|
&.hidden {
|
||||||
&.visible, &.show { opacity: 1 !important; }
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
&.visible,
|
||||||
|
&.show {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
transition: opacity .2s ease !important;
|
transition: opacity 0.2s ease !important;
|
||||||
box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5),
|
box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5),
|
||||||
0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !important;
|
0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !important;
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
margin-top: var.get('measure/.5x') !important;
|
margin-top: var.get('measure/.5x') !important;
|
||||||
@ -47,7 +52,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], input[name="search"] {
|
input[type='text'],
|
||||||
|
input[name='search'] {
|
||||||
--color-input-background: #{color.get('elevation/1')};
|
--color-input-background: #{color.get('elevation/1')};
|
||||||
--color-input-border: #{color.get('elevation/5')};
|
--color-input-border: #{color.get('elevation/5')};
|
||||||
|
|
||||||
@ -62,9 +68,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scrolling.menu {
|
.scrolling.menu {
|
||||||
.item {
|
.item {
|
||||||
gap: var.get('measure/.5x') !important;
|
gap: var.get('measure/.5x') !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
&:before {
|
&:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -72,12 +78,12 @@
|
|||||||
left: -8px;
|
left: -8px;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
content: "";
|
content: '';
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-check-mark {
|
.item-check-mark {
|
||||||
background-color: color.get('elevation/6');
|
background-color: color.get('elevation/6');
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
@ -85,12 +91,12 @@
|
|||||||
padding: 2px;
|
padding: 2px;
|
||||||
border-radius: var.get('measure/.375x');
|
border-radius: var.get('measure/.375x');
|
||||||
border: 1px solid color.get('elevation/8');
|
border: 1px solid color.get('elevation/8');
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-secondary-info {
|
.item-secondary-info {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
padding: 0 0 0 var.get('measure/.5x');
|
padding: 0 0 0 var.get('measure/.5x');
|
||||||
@ -105,11 +111,11 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.checked {
|
&.checked {
|
||||||
.item-check-mark {
|
.item-check-mark {
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
@ -121,25 +127,29 @@
|
|||||||
|
|
||||||
// if not .upward
|
// if not .upward
|
||||||
&:not(.upward) {
|
&:not(.upward) {
|
||||||
>.menu {
|
> .menu {
|
||||||
top: calc(100% + var.get('measure/.5x')) !important;
|
top: calc(100% + var.get('measure/.5x')) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.upward {
|
&.upward {
|
||||||
>.menu {
|
> .menu {
|
||||||
bottom: calc(100% + var.get('measure/.5x')) !important;
|
bottom: calc(100% + var.get('measure/.5x')) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.upward.selection.visible, &.active.upward.selection {
|
&.upward.selection.visible,
|
||||||
|
&.active.upward.selection {
|
||||||
border-top-left-radius: var(--border-radius) !important;
|
border-top-left-radius: var(--border-radius) !important;
|
||||||
border-top-right-radius: var(--border-radius) !important;
|
border-top-right-radius: var(--border-radius) !important;
|
||||||
border-bottom-left-radius: var(--border-radius) !important;
|
border-bottom-left-radius: var(--border-radius) !important;
|
||||||
border-bottom-right-radius: var(--border-radius) !important;
|
border-bottom-right-radius: var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selection.active, &.selection.active:hover, &.selection.active .menu, &.selection.active:hover .menu {
|
&.selection.active,
|
||||||
|
&.selection.active:hover,
|
||||||
|
&.selection.active .menu,
|
||||||
|
&.selection.active:hover .menu {
|
||||||
border-color: var(--color-secondary) !important;
|
border-color: var(--color-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,7 +158,8 @@
|
|||||||
--border-radius: #{var.get('measure/.5x')};
|
--border-radius: #{var.get('measure/.5x')};
|
||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
|
|
||||||
&:focus, &.active {
|
&:focus,
|
||||||
|
&.active {
|
||||||
border-color: var(--color-secondary) !important;
|
border-color: var(--color-secondary) !important;
|
||||||
outline: 2px solid var(--color-accent);
|
outline: 2px solid var(--color-accent);
|
||||||
}
|
}
|
||||||
@ -157,7 +168,7 @@
|
|||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.menu {
|
> .menu {
|
||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
border-top-width: 1px !important;
|
border-top-width: 1px !important;
|
||||||
border-color: var(--color-secondary) !important;
|
border-color: var(--color-secondary) !important;
|
||||||
@ -180,7 +191,7 @@
|
|||||||
.ui.menu {
|
.ui.menu {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
>.item:first-child {
|
> .item:first-child {
|
||||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -193,22 +204,24 @@
|
|||||||
gap: var.get('measure/.25x');
|
gap: var.get('measure/.25x');
|
||||||
|
|
||||||
&.vertical {
|
&.vertical {
|
||||||
>.item {
|
> .item {
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0 0 var.get('measure/.25x') 0;
|
margin: 0 0 var.get('measure/.25x') 0;
|
||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown.item.active:hover, a.item.active:hover {
|
.dropdown.item.active:hover,
|
||||||
|
a.item.active:hover {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: var(--color-hover);
|
background: var(--color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin tabular-menu {
|
@mixin tabular-menu {
|
||||||
.ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover {
|
.ui.tabular.menu .active.item,
|
||||||
|
.ui.tabular.menu .active.item:hover {
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
|
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@forward './menu';
|
@forward './menu';
|
||||||
@forward './input';
|
@forward './input';
|
||||||
|
|||||||
@ -5,4 +5,4 @@
|
|||||||
@forward './avatar';
|
@forward './avatar';
|
||||||
@forward './button';
|
@forward './button';
|
||||||
@forward './boxes';
|
@forward './boxes';
|
||||||
@forward './markup';
|
@forward './markup';
|
||||||
|
|||||||
@ -7,26 +7,26 @@
|
|||||||
@include vars.colors($is-dark);
|
@include vars.colors($is-dark);
|
||||||
|
|
||||||
// components
|
// components
|
||||||
@include components.label-default; // label for GPG signed commits
|
@include components.label-default; // label for GPG signed commits
|
||||||
@include components.label-signed; // label for GPG signed commits
|
@include components.label-signed; // label for GPG signed commits
|
||||||
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
|
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
|
||||||
@include components.forms; // github-style dropdown menus
|
@include components.forms; // github-style dropdown menus
|
||||||
@include components.file-content; // github-style file content
|
@include components.file-content; // github-style file content
|
||||||
@include components.avatar; // github-style avatars
|
@include components.avatar; // github-style avatars
|
||||||
@include components.gitea-button; // github-style buttons
|
@include components.gitea-button; // github-style buttons
|
||||||
@include components.segment;
|
@include components.segment;
|
||||||
@include components.comments; // github-style comment boxes
|
@include components.comments; // github-style comment boxes
|
||||||
@include components.markup; // styling rendered for markdown content
|
@include components.markup; // styling rendered for markdown content
|
||||||
|
|
||||||
// code highlighting
|
// code highlighting
|
||||||
// @include modules.chroma($is-dark); // syntax highlighting
|
// @include modules.chroma($is-dark); // syntax highlighting
|
||||||
// @include modules.codemirror; // code editor
|
// @include modules.codemirror; // code editor
|
||||||
// @include modules.monaco; // vscode-like code editor
|
// @include modules.monaco; // vscode-like code editor
|
||||||
|
|
||||||
@include modules.syntax; // syntax highlighting
|
@include modules.syntax; // syntax highlighting
|
||||||
@include modules.settings; // settings & profile pages
|
@include modules.settings; // settings & profile pages
|
||||||
|
|
||||||
// customized pages
|
// customized pages
|
||||||
@include modules.repo; // repo page
|
@include modules.repo; // repo page
|
||||||
@include modules.issues; // issues page
|
@include modules.issues; // issues page
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,99 +2,254 @@
|
|||||||
@use '@lucas-labs/lui-micro/var' as var;
|
@use '@lucas-labs/lui-micro/var' as var;
|
||||||
|
|
||||||
@mixin chroma($dark: false) {
|
@mixin chroma($dark: false) {
|
||||||
$orange: if($dark, 'palette/orange/base', 'palette/orange/dark/15%');
|
$orange: if($dark, 'palette/orange/base', 'palette/orange/dark/15%');
|
||||||
$blue: if($dark, 'palette/blue/base', 'palette/blue/dark/15%');
|
$blue: if($dark, 'palette/blue/base', 'palette/blue/dark/15%');
|
||||||
$fg: 'text';
|
$fg: 'text';
|
||||||
$subtle: 'subtle';
|
$subtle: 'subtle';
|
||||||
$more-subtle: if($dark, 'elevation/8', 'elevation/8');
|
$more-subtle: if($dark, 'elevation/8', 'elevation/8');
|
||||||
$brown: if($dark, 'palette/brown/base', 'palette/brown/dark/15%');
|
$brown: if($dark, 'palette/brown/base', 'palette/brown/dark/15%');
|
||||||
$red: if($dark, 'palette/red/base', 'palette/red/dark/15%');
|
$red: if($dark, 'palette/red/base', 'palette/red/dark/15%');
|
||||||
$green: if($dark, 'palette/green/base', 'palette/green/dark/10%');
|
$green: if($dark, 'palette/green/base', 'palette/green/dark/10%');
|
||||||
$teal: if($dark, 'palette/teal/base', 'palette/teal/dark/15%');
|
$teal: if($dark, 'palette/teal/base', 'palette/teal/dark/15%');
|
||||||
$purple: if($dark, 'palette/purple/base', 'palette/purple/dark/10%');
|
$purple: if($dark, 'palette/purple/base', 'palette/purple/dark/10%');
|
||||||
$yellow: if($dark, 'palette/yellow/base', 'palette/yellow/dark/25%');
|
$yellow: if($dark, 'palette/yellow/base', 'palette/yellow/dark/25%');
|
||||||
$violet: if($dark, 'palette/violet/base', 'palette/violet/dark/50%');
|
$violet: if($dark, 'palette/violet/base', 'palette/violet/dark/50%');
|
||||||
$pink: if($dark, 'palette/pink/base', 'palette/pink/dark/25%');
|
$pink: if($dark, 'palette/pink/base', 'palette/pink/dark/25%');
|
||||||
$blwh: if($dark, 'palette/white/base', 'palette/black/base');
|
$blwh: if($dark, 'palette/white/base', 'palette/black/base');
|
||||||
|
|
||||||
.chroma {
|
.chroma {
|
||||||
.code-inner {
|
.code-inner {
|
||||||
font: 14px var.get('code-font-family');
|
font: 14px var.get('code-font-family');
|
||||||
}
|
}
|
||||||
|
|
||||||
.bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo
|
.bp {
|
||||||
.c { color: color.get($subtle); font-style: italic; } // Comment
|
color: color.get($orange);
|
||||||
.c1 { color: color.get($subtle); font-style: italic; } // CommentSingle
|
font-weight: 600;
|
||||||
.ch { color: color.get($subtle); font-style: italic; } // CommentHashbang
|
} // NameBuiltinPseudo
|
||||||
.cm { color: color.get($subtle); font-style: italic; } // CommentMultiline
|
.c {
|
||||||
.cp { color: color.get($blue); } // CommentPreproc
|
color: color.get($subtle);
|
||||||
.cpf { color: color.get($blue); } // CommentPreprocFile
|
font-style: italic;
|
||||||
.cs { color: color.get($subtle); } // CommentSpecial
|
} // Comment
|
||||||
.dl { color: color.get($blue); } // LiteralStringDelimiter
|
.c1 {
|
||||||
.fm {} // NameFunctionMagic
|
color: color.get($subtle);
|
||||||
.g {} // Generic
|
font-style: italic;
|
||||||
.gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted
|
} // CommentSingle
|
||||||
.ge { font-style: italic; } // GenericEmph
|
.ch {
|
||||||
.gh { color: color.get($teal); } // GenericHeading
|
color: color.get($subtle);
|
||||||
.gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted
|
font-style: italic;
|
||||||
.gl {} // GenericUnderline
|
} // CommentHashbang
|
||||||
.go { color: color.get($orange); } // GenericOutput
|
.cm {
|
||||||
.gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt
|
color: color.get($subtle);
|
||||||
.gr { color: color.get($brown); } // GenericError
|
font-style: italic;
|
||||||
.gs { font-weight: bold; } // GenericStrong
|
} // CommentMultiline
|
||||||
.gt { color: color.get($brown); } // GenericTraceback
|
.cp {
|
||||||
.gu { color: color.get($teal); } // GenericSubheading
|
color: color.get($blue);
|
||||||
.il { color: color.get($orange); } // LiteralNumberIntegerLong
|
} // CommentPreproc
|
||||||
.k { color: color.get($purple); font-weight: 600; } // Keyword
|
.cpf {
|
||||||
.kc { color: color.get($yellow); } // KeywordConstant
|
color: color.get($blue);
|
||||||
.kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration
|
} // CommentPreprocFile
|
||||||
.kn { color: color.get($yellow); } // KeywordNamespace
|
.cs {
|
||||||
.kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo
|
color: color.get($subtle);
|
||||||
.kr { color: color.get($purple); font-weight: 600;} // KeywordReserved
|
} // CommentSpecial
|
||||||
.kt { color: color.get($yellow); } // KeywordType
|
.dl {
|
||||||
.l {} // Literal
|
color: color.get($blue);
|
||||||
.ld {} // LiteralDate
|
} // LiteralStringDelimiter
|
||||||
.m { color: color.get($orange); } // LiteralNumber
|
.fm {
|
||||||
.mb { color: color.get($orange); } // LiteralNumberBin
|
} // NameFunctionMagic
|
||||||
.mf { color: color.get($orange); } // LiteralNumberFloat
|
.g {
|
||||||
.mh { color: color.get($orange); } // LiteralNumberHex
|
} // Generic
|
||||||
.mi { color: color.get($orange); } // LiteralNumberInteger
|
.gd {
|
||||||
.mo { color: color.get($orange); } // LiteralNumberOct
|
color: color.get($blwh);
|
||||||
.n { color: color.get($violet); } // Name
|
background-color: rgba(#{color.get($red, 'rgb')}, 0.25);
|
||||||
.na { color: color.get($yellow); } // NameAttribute
|
} // GenericDeleted
|
||||||
.nb { color: color.get($orange); font-weight: 600; } // NameBuiltin
|
.ge {
|
||||||
.nc { color: color.get($pink); } // NameClass
|
font-style: italic;
|
||||||
.nd { color: color.get($pink); } // NameDecorator
|
} // GenericEmph
|
||||||
.ne { color: color.get($brown); } // NameException
|
.gh {
|
||||||
.nf { color: color.get($blue); } // NameFunction
|
color: color.get($teal);
|
||||||
.ni { color: color.get($pink); } // NameEntity
|
} // GenericHeading
|
||||||
.nl { color: color.get($yellow); } // NameLabel
|
.gi {
|
||||||
.nn { color: color.get($yellow); } // NameNamespace
|
color: color.get($blwh);
|
||||||
.no { color: color.get($yellow); } // NameConstant
|
background-color: rgba(#{color.get($green, 'rgb')}, 0.3);
|
||||||
.nt { color: color.get($purple); } // NameTag
|
} // GenericInserted
|
||||||
.nv { color: color.get($orange); } // NameVariable
|
.gl {
|
||||||
.nx { color: color.get($orange); } // NameOther
|
} // GenericUnderline
|
||||||
.o { color: color.get($teal); } // Operator
|
.go {
|
||||||
.ow { color: color.get($teal); font-weight: bold; } // OperatorWord
|
color: color.get($orange);
|
||||||
.p { color: color.get($subtle); } // Punctuation
|
} // GenericOutput
|
||||||
.py {} // NameProperty
|
.gp {
|
||||||
.s { color: color.get($green); } // LiteralString
|
color: color.get($subtle);
|
||||||
.s1 { color: color.get($green); } // LiteralStringSingle
|
font-weight: bold;
|
||||||
.s2 { color: color.get($green); } // LiteralStringDouble
|
} // GenericPrompt
|
||||||
.sa { color: color.get($green); } // LiteralStringAffix
|
.gr {
|
||||||
.sb { color: color.get($green); } // LiteralStringBacktick
|
color: color.get($brown);
|
||||||
.sc { color: color.get($green); } // LiteralStringChar
|
} // GenericError
|
||||||
.sd { color: color.get($green); } // LiteralStringDoc
|
.gs {
|
||||||
.se { color: color.get($blue); } // LiteralStringEscape
|
font-weight: bold;
|
||||||
.sh { color: color.get($green); } // LiteralStringHeredoc
|
} // GenericStrong
|
||||||
.si { color: color.get($green); } // LiteralStringInterpol
|
.gt {
|
||||||
.sr { color: color.get($blue); } // LiteralStringRegex
|
color: color.get($brown);
|
||||||
.ss { color: color.get($green); } // LiteralStringSymbol
|
} // GenericTraceback
|
||||||
.sx { color: color.get($green); } // LiteralStringOther
|
.gu {
|
||||||
.vc { color: color.get($yellow); } // NameVariableClass
|
color: color.get($teal);
|
||||||
.vg { color: color.get($orange); } // NameVariableGlobal
|
} // GenericSubheading
|
||||||
.vi { color: color.get($yellow); } // NameVariableInstance
|
.il {
|
||||||
.vm {} // NameVariableMagic
|
color: color.get($orange);
|
||||||
.w { color: color.get($more-subtle); } // TextWhitespace
|
} // LiteralNumberIntegerLong
|
||||||
|
.k {
|
||||||
|
color: color.get($purple);
|
||||||
|
font-weight: 600;
|
||||||
|
} // Keyword
|
||||||
|
.kc {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // KeywordConstant
|
||||||
|
.kd {
|
||||||
|
color: color.get($purple);
|
||||||
|
font-weight: 600;
|
||||||
|
} // KeywordDeclaration
|
||||||
|
.kn {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // KeywordNamespace
|
||||||
|
.kp {
|
||||||
|
color: color.get($purple);
|
||||||
|
font-weight: 600;
|
||||||
|
} // KeywordPseudo
|
||||||
|
.kr {
|
||||||
|
color: color.get($purple);
|
||||||
|
font-weight: 600;
|
||||||
|
} // KeywordReserved
|
||||||
|
.kt {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // KeywordType
|
||||||
|
.l {
|
||||||
|
} // Literal
|
||||||
|
.ld {
|
||||||
|
} // LiteralDate
|
||||||
|
.m {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumber
|
||||||
|
.mb {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumberBin
|
||||||
|
.mf {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumberFloat
|
||||||
|
.mh {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumberHex
|
||||||
|
.mi {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumberInteger
|
||||||
|
.mo {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // LiteralNumberOct
|
||||||
|
.n {
|
||||||
|
color: color.get($violet);
|
||||||
|
} // Name
|
||||||
|
.na {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameAttribute
|
||||||
|
.nb {
|
||||||
|
color: color.get($orange);
|
||||||
|
font-weight: 600;
|
||||||
|
} // NameBuiltin
|
||||||
|
.nc {
|
||||||
|
color: color.get($pink);
|
||||||
|
} // NameClass
|
||||||
|
.nd {
|
||||||
|
color: color.get($pink);
|
||||||
|
} // NameDecorator
|
||||||
|
.ne {
|
||||||
|
color: color.get($brown);
|
||||||
|
} // NameException
|
||||||
|
.nf {
|
||||||
|
color: color.get($blue);
|
||||||
|
} // NameFunction
|
||||||
|
.ni {
|
||||||
|
color: color.get($pink);
|
||||||
|
} // NameEntity
|
||||||
|
.nl {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameLabel
|
||||||
|
.nn {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameNamespace
|
||||||
|
.no {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameConstant
|
||||||
|
.nt {
|
||||||
|
color: color.get($purple);
|
||||||
|
} // NameTag
|
||||||
|
.nv {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // NameVariable
|
||||||
|
.nx {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // NameOther
|
||||||
|
.o {
|
||||||
|
color: color.get($teal);
|
||||||
|
} // Operator
|
||||||
|
.ow {
|
||||||
|
color: color.get($teal);
|
||||||
|
font-weight: bold;
|
||||||
|
} // OperatorWord
|
||||||
|
.p {
|
||||||
|
color: color.get($subtle);
|
||||||
|
} // Punctuation
|
||||||
|
.py {
|
||||||
|
} // NameProperty
|
||||||
|
.s {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralString
|
||||||
|
.s1 {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringSingle
|
||||||
|
.s2 {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringDouble
|
||||||
|
.sa {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringAffix
|
||||||
|
.sb {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringBacktick
|
||||||
|
.sc {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringChar
|
||||||
|
.sd {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringDoc
|
||||||
|
.se {
|
||||||
|
color: color.get($blue);
|
||||||
|
} // LiteralStringEscape
|
||||||
|
.sh {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringHeredoc
|
||||||
|
.si {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringInterpol
|
||||||
|
.sr {
|
||||||
|
color: color.get($blue);
|
||||||
|
} // LiteralStringRegex
|
||||||
|
.ss {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringSymbol
|
||||||
|
.sx {
|
||||||
|
color: color.get($green);
|
||||||
|
} // LiteralStringOther
|
||||||
|
.vc {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameVariableClass
|
||||||
|
.vg {
|
||||||
|
color: color.get($orange);
|
||||||
|
} // NameVariableGlobal
|
||||||
|
.vi {
|
||||||
|
color: color.get($yellow);
|
||||||
|
} // NameVariableInstance
|
||||||
|
.vm {
|
||||||
|
} // NameVariableMagic
|
||||||
|
.w {
|
||||||
|
color: color.get($more-subtle);
|
||||||
|
} // TextWhitespace
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,15 +5,15 @@
|
|||||||
.CodeMirror.cm-s-default,
|
.CodeMirror.cm-s-default,
|
||||||
.CodeMirror.cm-s-paper {
|
.CodeMirror.cm-s-paper {
|
||||||
.cm-property {
|
.cm-property {
|
||||||
color: color.get('text')
|
color: color.get('text');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-header {
|
.cm-header {
|
||||||
color: color.get('text')
|
color: color.get('text');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-quote {
|
.cm-quote {
|
||||||
color: color.get('palette/green/base')
|
color: color.get('palette/green/base');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-keyword {
|
.cm-keyword {
|
||||||
@ -29,7 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cm-def {
|
.cm-def {
|
||||||
color: color.get('text')
|
color: color.get('text');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-variable-2 {
|
.cm-variable-2 {
|
||||||
@ -41,15 +41,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cm-comment {
|
.cm-comment {
|
||||||
color: color.get('elevation/6')
|
color: color.get('elevation/6');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-string {
|
.cm-string {
|
||||||
color: color.get('palette/green/base')
|
color: color.get('palette/green/base');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-string-2 {
|
.cm-string-2 {
|
||||||
color: color.get('palette/green/base')
|
color: color.get('palette/green/base');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-meta {
|
.cm-meta {
|
||||||
@ -65,7 +65,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cm-bracket {
|
.cm-bracket {
|
||||||
color: color.get('text')
|
color: color.get('text');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-tag {
|
.cm-tag {
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
$green: #{color.get('palette/green/base')};
|
$green: #{color.get('palette/green/base')};
|
||||||
$blue: #{color.get('palette/blue/base')};
|
$blue: #{color.get('palette/blue/base')};
|
||||||
$pink: #{color.get('palette/pink/base')};
|
$pink: #{color.get('palette/pink/base')};
|
||||||
|
|
||||||
.monaco-editor {
|
.monaco-editor {
|
||||||
--vscode-editor-background: #{$mantle} !important;
|
--vscode-editor-background: #{$mantle} !important;
|
||||||
--vscode-editorGutter-background: #{$mantle} !important;
|
--vscode-editorGutter-background: #{$mantle} !important;
|
||||||
|
|||||||
@ -1,469 +1,433 @@
|
|||||||
@mixin syntax {
|
@mixin syntax {
|
||||||
/* Code syntax highlighting. */
|
/* Code syntax highlighting. */
|
||||||
.tag-code .code-inner {
|
.tag-code .code-inner {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.same-code .lines-num.lines-num-old,
|
.same-code .lines-num.lines-num-old,
|
||||||
.same-code .lines-num.lines-num-new {
|
.same-code .lines-num.lines-num-new {
|
||||||
color: var(--color-text-light-3) !important;
|
color: var(--color-text-light-3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-code .lines-num.lines-num-old,
|
.add-code .lines-num.lines-num-old,
|
||||||
.add-code .lines-num.lines-num-new {
|
.add-code .lines-num.lines-num-new {
|
||||||
background-color: var(--color-diff-added-row-linesnum-bg);
|
background-color: var(--color-diff-added-row-linesnum-bg);
|
||||||
color: var(--color-text-dark-2) !important;
|
color: var(--color-text-dark-2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.del-code .lines-num.lines-num-old,
|
.del-code .lines-num.lines-num-old,
|
||||||
.diff-unified .del-code .lines-num.lines-num-old,
|
.diff-unified .del-code .lines-num.lines-num-old,
|
||||||
.del-code .lines-num.lines-num-new {
|
.del-code .lines-num.lines-num-new {
|
||||||
background-color: var(--color-diff-removed-row-linesnum-bg);
|
background-color: var(--color-diff-removed-row-linesnum-bg);
|
||||||
color: var(--color-text-dark-2) !important;
|
color: var(--color-text-dark-2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository
|
.repository .diff-file-box .file-body.file-code table tbody tr.add-code:hover .lines-num,
|
||||||
.diff-file-box
|
.repository .diff-file-box .file-body.file-code table tbody tr.del-code:hover .lines-num,
|
||||||
.file-body.file-code
|
.repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num,
|
||||||
table
|
.repository
|
||||||
tbody
|
.diff-file-box
|
||||||
tr.add-code:hover
|
.file-body.file-code
|
||||||
.lines-num,
|
table
|
||||||
.repository
|
tbody
|
||||||
.diff-file-box
|
.diff-unified
|
||||||
.file-body.file-code
|
tr:hover
|
||||||
table
|
.del-code
|
||||||
tbody
|
.lines-num {
|
||||||
tr.del-code:hover
|
color: var(--color-text-dark) !important;
|
||||||
.lines-num,
|
}
|
||||||
.repository
|
|
||||||
.diff-file-box
|
|
||||||
.file-body.file-code
|
|
||||||
table
|
|
||||||
tbody
|
|
||||||
tr.same-code:hover
|
|
||||||
.lines-num,
|
|
||||||
.repository
|
|
||||||
.diff-file-box
|
|
||||||
.file-body.file-code
|
|
||||||
table
|
|
||||||
tbody
|
|
||||||
.diff-unified
|
|
||||||
tr:hover
|
|
||||||
.del-code
|
|
||||||
.lines-num {
|
|
||||||
color: var(--color-text-dark) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository
|
.repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num {
|
||||||
.diff-file-box
|
color: var(--color-text-dark-2) !important;
|
||||||
.file-body.file-code
|
}
|
||||||
table
|
|
||||||
tbody
|
|
||||||
tr.same-code:hover
|
|
||||||
.lines-num {
|
|
||||||
color: var(--color-text-dark-2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository
|
.repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-code,
|
||||||
.diff-file-box
|
.repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num,
|
||||||
.file-body.file-code
|
.repository
|
||||||
table
|
.diff-file-box
|
||||||
tbody
|
.file-body.file-code
|
||||||
tr.same-code:hover
|
table
|
||||||
.lines-code,
|
tbody
|
||||||
.repository
|
tr.same-code:hover
|
||||||
.diff-file-box
|
.lines-type-marker {
|
||||||
.file-body.file-code
|
background-color: var(--color-code-line-bg-hover) !important;
|
||||||
table
|
}
|
||||||
tbody
|
|
||||||
tr.same-code:hover
|
|
||||||
.lines-num,
|
|
||||||
.repository
|
|
||||||
.diff-file-box
|
|
||||||
.file-body.file-code
|
|
||||||
table
|
|
||||||
tbody
|
|
||||||
tr.same-code:hover
|
|
||||||
.lines-type-marker {
|
|
||||||
background-color: var(--color-code-line-bg-hover) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* From web_src/less/themes/chroma/dark.less */
|
/* From web_src/less/themes/chroma/dark.less */
|
||||||
:root {
|
:root {
|
||||||
--color-syntax-NameBuiltinPseudo: #fabd2f;
|
--color-syntax-NameBuiltinPseudo: #fabd2f;
|
||||||
--color-syntax-Comment: #777e94;
|
--color-syntax-Comment: #777e94;
|
||||||
--color-syntax-CommentSingle: #777e94;
|
--color-syntax-CommentSingle: #777e94;
|
||||||
--color-syntax-CommentHashbang: #777e94;
|
--color-syntax-CommentHashbang: #777e94;
|
||||||
--color-syntax-CommentMultiline: #777e94;
|
--color-syntax-CommentMultiline: #777e94;
|
||||||
--color-syntax-CommentPreproc: #8ec07c;
|
--color-syntax-CommentPreproc: #8ec07c;
|
||||||
--color-syntax-CommentPreprocFile: #649bc4;
|
--color-syntax-CommentPreprocFile: #649bc4;
|
||||||
--color-syntax-CommentSpecial: #9075cd;
|
--color-syntax-CommentSpecial: #9075cd;
|
||||||
--color-syntax-LiteralStringDelimiter: #649bc4;
|
--color-syntax-LiteralStringDelimiter: #649bc4;
|
||||||
|
|
||||||
--color-syntax-GenericDeleted-text: #fff;
|
--color-syntax-GenericDeleted-text: #fff;
|
||||||
--color-syntax-GenericDeleted-bg: #5f3737;
|
--color-syntax-GenericDeleted-bg: #5f3737;
|
||||||
--color-syntax-GenericEmph: #ddee30;
|
--color-syntax-GenericEmph: #ddee30;
|
||||||
--color-syntax-GenericHeading: #ffaa10;
|
--color-syntax-GenericHeading: #ffaa10;
|
||||||
--color-syntax-GenericInserted-text: #fff;
|
--color-syntax-GenericInserted-text: #fff;
|
||||||
--color-syntax-GenericInserted-bg: #3a523a;
|
--color-syntax-GenericInserted-bg: #3a523a;
|
||||||
--color-syntax-GenericOutput: #777e94;
|
--color-syntax-GenericOutput: #777e94;
|
||||||
--color-syntax-GenericPrompt: #ebdbb2;
|
--color-syntax-GenericPrompt: #ebdbb2;
|
||||||
--color-syntax-GenericError: #ff4433;
|
--color-syntax-GenericError: #ff4433;
|
||||||
--color-syntax-GenericStrong: #ebdbb2;
|
--color-syntax-GenericStrong: #ebdbb2;
|
||||||
--color-syntax-GenericTraceback: #ff7540;
|
--color-syntax-GenericTraceback: #ff7540;
|
||||||
--color-syntax-GenericSubheading: #b8bb26;
|
--color-syntax-GenericSubheading: #b8bb26;
|
||||||
--color-syntax-LineHighlight: #3f424d;
|
--color-syntax-LineHighlight: #3f424d;
|
||||||
--color-syntax-LiteralNumberIntegerLong: #649bc4;
|
--color-syntax-LiteralNumberIntegerLong: #649bc4;
|
||||||
--color-syntax-Keyword: #f47067;
|
--color-syntax-Keyword: #f47067;
|
||||||
--color-syntax-KeywordConstant: #649bc4;
|
--color-syntax-KeywordConstant: #649bc4;
|
||||||
--color-syntax-KeywordDeclaration: #ff7540;
|
--color-syntax-KeywordDeclaration: #ff7540;
|
||||||
--color-syntax-KeywordNamespace: #ffaa10;
|
--color-syntax-KeywordNamespace: #ffaa10;
|
||||||
--color-syntax-KeywordPseudo: #5f8700;
|
--color-syntax-KeywordPseudo: #5f8700;
|
||||||
--color-syntax-KeywordReserved: #ff7540;
|
--color-syntax-KeywordReserved: #ff7540;
|
||||||
--color-syntax-KeywordType: #fabd2f;
|
--color-syntax-KeywordType: #fabd2f;
|
||||||
--color-syntax-LineNumbers: #7f8699;
|
--color-syntax-LineNumbers: #7f8699;
|
||||||
--color-syntax-LineNumbersTable: #7f8699;
|
--color-syntax-LineNumbersTable: #7f8699;
|
||||||
--color-syntax-LiteralNumber: #649bc4;
|
--color-syntax-LiteralNumber: #649bc4;
|
||||||
--color-syntax-LiteralNumberBin: #649bc4;
|
--color-syntax-LiteralNumberBin: #649bc4;
|
||||||
--color-syntax-LiteralNumberFloat: #649bc4;
|
--color-syntax-LiteralNumberFloat: #649bc4;
|
||||||
--color-syntax-LiteralNumberHex: #649bc4;
|
--color-syntax-LiteralNumberHex: #649bc4;
|
||||||
--color-syntax-LiteralNumberInteger: #649bc4;
|
--color-syntax-LiteralNumberInteger: #649bc4;
|
||||||
--color-syntax-LiteralNumberOct: #649bc4;
|
--color-syntax-LiteralNumberOct: #649bc4;
|
||||||
--color-syntax-Name: #adbac7;
|
--color-syntax-Name: #adbac7;
|
||||||
--color-syntax-NameAttribute: #b8bb26;
|
--color-syntax-NameAttribute: #b8bb26;
|
||||||
--color-syntax-NameBuiltin: #fabd2f;
|
--color-syntax-NameBuiltin: #fabd2f;
|
||||||
--color-syntax-NameClass: #f69d50;
|
--color-syntax-NameClass: #f69d50;
|
||||||
--color-syntax-NameDecorator: #dcbdfb;
|
--color-syntax-NameDecorator: #dcbdfb;
|
||||||
--color-syntax-NameException: #ff7540;
|
--color-syntax-NameException: #ff7540;
|
||||||
--color-syntax-NameFunction: #dcbdfb;
|
--color-syntax-NameFunction: #dcbdfb;
|
||||||
--color-syntax-NameEntity: #fabd2f;
|
--color-syntax-NameEntity: #fabd2f;
|
||||||
--color-syntax-NameLabel: #ff7540;
|
--color-syntax-NameLabel: #ff7540;
|
||||||
--color-syntax-NameNamespace: #ffaa10;
|
--color-syntax-NameNamespace: #ffaa10;
|
||||||
--color-syntax-NameConstant: #649bc4;
|
--color-syntax-NameConstant: #649bc4;
|
||||||
--color-syntax-NameTag: #ff7540;
|
--color-syntax-NameTag: #ff7540;
|
||||||
--color-syntax-NameVariable: #ebdbb2;
|
--color-syntax-NameVariable: #ebdbb2;
|
||||||
--color-syntax-NameOther: #b6bac5;
|
--color-syntax-NameOther: #b6bac5;
|
||||||
--color-syntax-Operator: #6cb6ff;
|
--color-syntax-Operator: #6cb6ff;
|
||||||
--color-syntax-OperatorWord: #6cb6ff;
|
--color-syntax-OperatorWord: #6cb6ff;
|
||||||
--color-syntax-Punctuation: #d2d4db;
|
--color-syntax-Punctuation: #d2d4db;
|
||||||
--color-syntax-LiteralString: #b8bb26;
|
--color-syntax-LiteralString: #b8bb26;
|
||||||
--color-syntax-LiteralStringSingle: #96d0ff;
|
--color-syntax-LiteralStringSingle: #96d0ff;
|
||||||
--color-syntax-LiteralStringDouble: #96d0ff;
|
--color-syntax-LiteralStringDouble: #96d0ff;
|
||||||
--color-syntax-LiteralStringAffix: #649bc4;
|
--color-syntax-LiteralStringAffix: #649bc4;
|
||||||
--color-syntax-LiteralStringBacktick: #b8bb26;
|
--color-syntax-LiteralStringBacktick: #b8bb26;
|
||||||
--color-syntax-LiteralStringChar: #649bc4;
|
--color-syntax-LiteralStringChar: #649bc4;
|
||||||
--color-syntax-LiteralStringDoc: #777e94;
|
--color-syntax-LiteralStringDoc: #777e94;
|
||||||
--color-syntax-LiteralStringEscape: #ff7540;
|
--color-syntax-LiteralStringEscape: #ff7540;
|
||||||
--color-syntax-LiteralStringHeredoc: #649bc4;
|
--color-syntax-LiteralStringHeredoc: #649bc4;
|
||||||
--color-syntax-LiteralStringInterpol: #ffaa10;
|
--color-syntax-LiteralStringInterpol: #ffaa10;
|
||||||
--color-syntax-LiteralStringRegex: #9075cd;
|
--color-syntax-LiteralStringRegex: #9075cd;
|
||||||
--color-syntax-LiteralStringSymbol: #ff7540;
|
--color-syntax-LiteralStringSymbol: #ff7540;
|
||||||
--color-syntax-LiteralStringOther: #ffaa10;
|
--color-syntax-LiteralStringOther: #ffaa10;
|
||||||
--color-syntax-NameVariableClass: #ff7540;
|
--color-syntax-NameVariableClass: #ff7540;
|
||||||
--color-syntax-NameVariableGlobal: #ffaa10;
|
--color-syntax-NameVariableGlobal: #ffaa10;
|
||||||
--color-syntax-NameVariableInstance: #ffaa10;
|
--color-syntax-NameVariableInstance: #ffaa10;
|
||||||
--color-syntax-TextWhitespace: #7f8699;
|
--color-syntax-TextWhitespace: #7f8699;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma .bp {
|
.chroma .bp {
|
||||||
color: var(--color-syntax-NameBuiltinPseudo);
|
color: var(--color-syntax-NameBuiltinPseudo);
|
||||||
} /* NameBuiltinPseudo */
|
} /* NameBuiltinPseudo */
|
||||||
.chroma .c {
|
.chroma .c {
|
||||||
color: var(--color-syntax-Comment);
|
color: var(--color-syntax-Comment);
|
||||||
} /* Comment */
|
} /* Comment */
|
||||||
.chroma .c1 {
|
.chroma .c1 {
|
||||||
color: var(--color-syntax-CommentSingle);
|
color: var(--color-syntax-CommentSingle);
|
||||||
} /* CommentSingle */
|
} /* CommentSingle */
|
||||||
.chroma .ch {
|
.chroma .ch {
|
||||||
color: var(--color-syntax-CommentHashbang);
|
color: var(--color-syntax-CommentHashbang);
|
||||||
} /* CommentHashbang */
|
} /* CommentHashbang */
|
||||||
.chroma .cm {
|
.chroma .cm {
|
||||||
color: var(--color-syntax-CommentMultiline);
|
color: var(--color-syntax-CommentMultiline);
|
||||||
} /* CommentMultiline */
|
} /* CommentMultiline */
|
||||||
.chroma .cp {
|
.chroma .cp {
|
||||||
color: var(--color-syntax-CommentPreproc);
|
color: var(--color-syntax-CommentPreproc);
|
||||||
} /* CommentPreproc */
|
} /* CommentPreproc */
|
||||||
.chroma .cpf {
|
.chroma .cpf {
|
||||||
color: var(--color-syntax-CommentPreprocFile);
|
color: var(--color-syntax-CommentPreprocFile);
|
||||||
} /* CommentPreprocFile */
|
} /* CommentPreprocFile */
|
||||||
.chroma .cs {
|
.chroma .cs {
|
||||||
color: var(--color-syntax-CommentSpecial);
|
color: var(--color-syntax-CommentSpecial);
|
||||||
} /* CommentSpecial */
|
} /* CommentSpecial */
|
||||||
.chroma .dl {
|
.chroma .dl {
|
||||||
color: var(--color-syntax-LiteralStringDelimiter);
|
color: var(--color-syntax-LiteralStringDelimiter);
|
||||||
} /* LiteralStringDelimiter */
|
} /* LiteralStringDelimiter */
|
||||||
.chroma .gd {
|
.chroma .gd {
|
||||||
color: var(--color-syntax-GenericDeleted-text);
|
color: var(--color-syntax-GenericDeleted-text);
|
||||||
background-color: var(--color-syntax-GenericDeleted-bg);
|
background-color: var(--color-syntax-GenericDeleted-bg);
|
||||||
} /* GenericDeleted */
|
} /* GenericDeleted */
|
||||||
.chroma .ge {
|
.chroma .ge {
|
||||||
color: var(--color-syntax-GenericEmph);
|
color: var(--color-syntax-GenericEmph);
|
||||||
} /* GenericEmph */
|
} /* GenericEmph */
|
||||||
.chroma .gh {
|
.chroma .gh {
|
||||||
color: var(--color-syntax-GenericHeading);
|
color: var(--color-syntax-GenericHeading);
|
||||||
} /* GenericHeading */
|
} /* GenericHeading */
|
||||||
.chroma .gi {
|
.chroma .gi {
|
||||||
color: var(--color-syntax-GenericInserted-text);
|
color: var(--color-syntax-GenericInserted-text);
|
||||||
background-color: var(--color-syntax-GenericInserted-bg);
|
background-color: var(--color-syntax-GenericInserted-bg);
|
||||||
} /* GenericInserted */
|
} /* GenericInserted */
|
||||||
.chroma .go {
|
.chroma .go {
|
||||||
color: var(--color-syntax-GenericOutput);
|
color: var(--color-syntax-GenericOutput);
|
||||||
} /* GenericOutput */
|
} /* GenericOutput */
|
||||||
.chroma .gp {
|
.chroma .gp {
|
||||||
color: var(--color-syntax-GenericPrompt);
|
color: var(--color-syntax-GenericPrompt);
|
||||||
} /* GenericPrompt */
|
} /* GenericPrompt */
|
||||||
.chroma .gr {
|
.chroma .gr {
|
||||||
color: var(--color-syntax-GenericError);
|
color: var(--color-syntax-GenericError);
|
||||||
} /* GenericError */
|
} /* GenericError */
|
||||||
.chroma .gs {
|
.chroma .gs {
|
||||||
color: var(--color-syntax-GenericStrong);
|
color: var(--color-syntax-GenericStrong);
|
||||||
} /* GenericStrong */
|
} /* GenericStrong */
|
||||||
.chroma .gt {
|
.chroma .gt {
|
||||||
color: var(--color-syntax-GenericTraceback);
|
color: var(--color-syntax-GenericTraceback);
|
||||||
} /* GenericTraceback */
|
} /* GenericTraceback */
|
||||||
.chroma .gu {
|
.chroma .gu {
|
||||||
color: var(--color-syntax-GenericSubheading);
|
color: var(--color-syntax-GenericSubheading);
|
||||||
} /* GenericSubheading */
|
} /* GenericSubheading */
|
||||||
.chroma .hl {
|
.chroma .hl {
|
||||||
background-color: var(--color-syntax-LineHighlight);
|
background-color: var(--color-syntax-LineHighlight);
|
||||||
} /* LineHighlight */
|
} /* LineHighlight */
|
||||||
.chroma .il {
|
.chroma .il {
|
||||||
color: var(--color-syntax-LiteralNumberIntegerLong);
|
color: var(--color-syntax-LiteralNumberIntegerLong);
|
||||||
} /* LiteralNumberIntegerLong */
|
} /* LiteralNumberIntegerLong */
|
||||||
.chroma .k {
|
.chroma .k {
|
||||||
color: var(--color-syntax-Keyword);
|
color: var(--color-syntax-Keyword);
|
||||||
} /* Keyword */
|
} /* Keyword */
|
||||||
.chroma .kc {
|
.chroma .kc {
|
||||||
color: var(--color-syntax-KeywordConstant);
|
color: var(--color-syntax-KeywordConstant);
|
||||||
} /* KeywordConstant */
|
} /* KeywordConstant */
|
||||||
.chroma .kd {
|
.chroma .kd {
|
||||||
color: var(--color-syntax-KeywordDeclaration);
|
color: var(--color-syntax-KeywordDeclaration);
|
||||||
} /* KeywordDeclaration */
|
} /* KeywordDeclaration */
|
||||||
.chroma .kn {
|
.chroma .kn {
|
||||||
color: var(--color-syntax-KeywordNamespace);
|
color: var(--color-syntax-KeywordNamespace);
|
||||||
} /* KeywordNamespace */
|
} /* KeywordNamespace */
|
||||||
.chroma .kp {
|
.chroma .kp {
|
||||||
color: var(--color-syntax-KeywordPseudo);
|
color: var(--color-syntax-KeywordPseudo);
|
||||||
} /* KeywordPseudo */
|
} /* KeywordPseudo */
|
||||||
.chroma .kr {
|
.chroma .kr {
|
||||||
color: var(--color-syntax-KeywordReserved);
|
color: var(--color-syntax-KeywordReserved);
|
||||||
} /* KeywordReserved */
|
} /* KeywordReserved */
|
||||||
.chroma .kt {
|
.chroma .kt {
|
||||||
color: var(--color-syntax-KeywordType);
|
color: var(--color-syntax-KeywordType);
|
||||||
} /* KeywordType */
|
} /* KeywordType */
|
||||||
.chroma .ln {
|
.chroma .ln {
|
||||||
color: var(--color-syntax-LineNumbers);
|
color: var(--color-syntax-LineNumbers);
|
||||||
} /* LineNumbers */
|
} /* LineNumbers */
|
||||||
.chroma .lnt {
|
.chroma .lnt {
|
||||||
color: var(--color-syntax-LineNumbersTable);
|
color: var(--color-syntax-LineNumbersTable);
|
||||||
} /* LineNumbersTable */
|
} /* LineNumbersTable */
|
||||||
.chroma .m {
|
.chroma .m {
|
||||||
color: var(--color-syntax-LiteralNumber);
|
color: var(--color-syntax-LiteralNumber);
|
||||||
} /* LiteralNumber */
|
} /* LiteralNumber */
|
||||||
.chroma .mb {
|
.chroma .mb {
|
||||||
color: var(--color-syntax-LiteralNumberBin);
|
color: var(--color-syntax-LiteralNumberBin);
|
||||||
} /* LiteralNumberBin */
|
} /* LiteralNumberBin */
|
||||||
.chroma .mf {
|
.chroma .mf {
|
||||||
color: var(--color-syntax-LiteralNumberFloat);
|
color: var(--color-syntax-LiteralNumberFloat);
|
||||||
} /* LiteralNumberFloat */
|
} /* LiteralNumberFloat */
|
||||||
.chroma .mh {
|
.chroma .mh {
|
||||||
color: var(--color-syntax-LiteralNumberHex);
|
color: var(--color-syntax-LiteralNumberHex);
|
||||||
} /* LiteralNumberHex */
|
} /* LiteralNumberHex */
|
||||||
.chroma .mi {
|
.chroma .mi {
|
||||||
color: var(--color-syntax-LiteralNumberInteger);
|
color: var(--color-syntax-LiteralNumberInteger);
|
||||||
} /* LiteralNumberInteger */
|
} /* LiteralNumberInteger */
|
||||||
.chroma .mo {
|
.chroma .mo {
|
||||||
color: var(--color-syntax-LiteralNumberOct);
|
color: var(--color-syntax-LiteralNumberOct);
|
||||||
} /* LiteralNumberOct */
|
} /* LiteralNumberOct */
|
||||||
.chroma .n {
|
.chroma .n {
|
||||||
color: var(--color-syntax-Name);
|
color: var(--color-syntax-Name);
|
||||||
} /* Name */
|
} /* Name */
|
||||||
.chroma .na {
|
.chroma .na {
|
||||||
color: var(--color-syntax-NameAttribute);
|
color: var(--color-syntax-NameAttribute);
|
||||||
} /* NameAttribute */
|
} /* NameAttribute */
|
||||||
.chroma .nb {
|
.chroma .nb {
|
||||||
color: var(--color-syntax-NameBuiltin);
|
color: var(--color-syntax-NameBuiltin);
|
||||||
} /* NameBuiltin */
|
} /* NameBuiltin */
|
||||||
.chroma .nc {
|
.chroma .nc {
|
||||||
color: var(--color-syntax-NameClass);
|
color: var(--color-syntax-NameClass);
|
||||||
} /* NameClass */
|
} /* NameClass */
|
||||||
.chroma .nd {
|
.chroma .nd {
|
||||||
color: var(--color-syntax-NameDecorator);
|
color: var(--color-syntax-NameDecorator);
|
||||||
} /* NameDecorator */
|
} /* NameDecorator */
|
||||||
.chroma .ne {
|
.chroma .ne {
|
||||||
color: var(--color-syntax-NameException);
|
color: var(--color-syntax-NameException);
|
||||||
} /* NameException */
|
} /* NameException */
|
||||||
.chroma .nf {
|
.chroma .nf {
|
||||||
color: var(--color-syntax-NameFunction);
|
color: var(--color-syntax-NameFunction);
|
||||||
} /* NameFunction */
|
} /* NameFunction */
|
||||||
.chroma .ni {
|
.chroma .ni {
|
||||||
color: var(--color-syntax-NameEntity);
|
color: var(--color-syntax-NameEntity);
|
||||||
} /* NameEntity */
|
} /* NameEntity */
|
||||||
.chroma .nl {
|
.chroma .nl {
|
||||||
color: var(--color-syntax-NameLabel);
|
color: var(--color-syntax-NameLabel);
|
||||||
} /* NameLabel */
|
} /* NameLabel */
|
||||||
.chroma .nn {
|
.chroma .nn {
|
||||||
color: var(--color-syntax-NameNamespace);
|
color: var(--color-syntax-NameNamespace);
|
||||||
} /* NameNamespace */
|
} /* NameNamespace */
|
||||||
.chroma .no {
|
.chroma .no {
|
||||||
color: var(--color-syntax-NameConstant);
|
color: var(--color-syntax-NameConstant);
|
||||||
} /* NameConstant */
|
} /* NameConstant */
|
||||||
.chroma .nt {
|
.chroma .nt {
|
||||||
color: var(--color-syntax-NameTag);
|
color: var(--color-syntax-NameTag);
|
||||||
} /* NameTag */
|
} /* NameTag */
|
||||||
.chroma .nv {
|
.chroma .nv {
|
||||||
color: var(--color-syntax-NameVariable);
|
color: var(--color-syntax-NameVariable);
|
||||||
} /* NameVariable */
|
} /* NameVariable */
|
||||||
.chroma .nx {
|
.chroma .nx {
|
||||||
color: var(--color-syntax-NameOther);
|
color: var(--color-syntax-NameOther);
|
||||||
} /* NameOther */
|
} /* NameOther */
|
||||||
.chroma .o {
|
.chroma .o {
|
||||||
color: var(--color-syntax-Operator);
|
color: var(--color-syntax-Operator);
|
||||||
} /* Operator */
|
} /* Operator */
|
||||||
.chroma .ow {
|
.chroma .ow {
|
||||||
color: var(--color-syntax-OperatorWord);
|
color: var(--color-syntax-OperatorWord);
|
||||||
} /* OperatorWord */
|
} /* OperatorWord */
|
||||||
.chroma .p {
|
.chroma .p {
|
||||||
color: var(--color-syntax-Punctuation);
|
color: var(--color-syntax-Punctuation);
|
||||||
} /* Punctuation */
|
} /* Punctuation */
|
||||||
.chroma .s {
|
.chroma .s {
|
||||||
color: var(--color-syntax-LiteralString);
|
color: var(--color-syntax-LiteralString);
|
||||||
} /* LiteralString */
|
} /* LiteralString */
|
||||||
.chroma .s1 {
|
.chroma .s1 {
|
||||||
color: var(--color-syntax-LiteralStringSingle);
|
color: var(--color-syntax-LiteralStringSingle);
|
||||||
} /* LiteralStringSingle */
|
} /* LiteralStringSingle */
|
||||||
.chroma .s2 {
|
.chroma .s2 {
|
||||||
color: var(--color-syntax-LiteralStringDouble);
|
color: var(--color-syntax-LiteralStringDouble);
|
||||||
} /* LiteralStringDouble */
|
} /* LiteralStringDouble */
|
||||||
.chroma .sa {
|
.chroma .sa {
|
||||||
color: var(--color-syntax-LiteralStringAffix);
|
color: var(--color-syntax-LiteralStringAffix);
|
||||||
} /* LiteralStringAffix */
|
} /* LiteralStringAffix */
|
||||||
.chroma .sb {
|
.chroma .sb {
|
||||||
color: var(--color-syntax-LiteralStringBacktick);
|
color: var(--color-syntax-LiteralStringBacktick);
|
||||||
} /* LiteralStringBacktick */
|
} /* LiteralStringBacktick */
|
||||||
.chroma .sc {
|
.chroma .sc {
|
||||||
color: var(--color-syntax-LiteralStringChar);
|
color: var(--color-syntax-LiteralStringChar);
|
||||||
} /* LiteralStringChar */
|
} /* LiteralStringChar */
|
||||||
.chroma .sd {
|
.chroma .sd {
|
||||||
color: var(--color-syntax-LiteralStringDoc);
|
color: var(--color-syntax-LiteralStringDoc);
|
||||||
} /* LiteralStringDoc */
|
} /* LiteralStringDoc */
|
||||||
.chroma .se {
|
.chroma .se {
|
||||||
color: var(--color-syntax-LiteralStringEscape);
|
color: var(--color-syntax-LiteralStringEscape);
|
||||||
} /* LiteralStringEscape */
|
} /* LiteralStringEscape */
|
||||||
.chroma .sh {
|
.chroma .sh {
|
||||||
color: var(--color-syntax-LiteralStringHeredoc);
|
color: var(--color-syntax-LiteralStringHeredoc);
|
||||||
} /* LiteralStringHeredoc */
|
} /* LiteralStringHeredoc */
|
||||||
.chroma .si {
|
.chroma .si {
|
||||||
color: var(--color-syntax-LiteralStringInterpol);
|
color: var(--color-syntax-LiteralStringInterpol);
|
||||||
} /* LiteralStringInterpol */
|
} /* LiteralStringInterpol */
|
||||||
.chroma .sr {
|
.chroma .sr {
|
||||||
color: var(--color-syntax-LiteralStringRegex);
|
color: var(--color-syntax-LiteralStringRegex);
|
||||||
} /* LiteralStringRegex */
|
} /* LiteralStringRegex */
|
||||||
.chroma .ss {
|
.chroma .ss {
|
||||||
color: var(--color-syntax-LiteralStringSymbol);
|
color: var(--color-syntax-LiteralStringSymbol);
|
||||||
} /* LiteralStringSymbol */
|
} /* LiteralStringSymbol */
|
||||||
.chroma .sx {
|
.chroma .sx {
|
||||||
color: var(--color-syntax-LiteralStringOther);
|
color: var(--color-syntax-LiteralStringOther);
|
||||||
} /* LiteralStringOther */
|
} /* LiteralStringOther */
|
||||||
.chroma .vc {
|
.chroma .vc {
|
||||||
color: var(--color-syntax-NameVariableClass);
|
color: var(--color-syntax-NameVariableClass);
|
||||||
} /* NameVariableClass */
|
} /* NameVariableClass */
|
||||||
.chroma .vg {
|
.chroma .vg {
|
||||||
color: var(--color-syntax-NameVariableGlobal);
|
color: var(--color-syntax-NameVariableGlobal);
|
||||||
} /* NameVariableGlobal */
|
} /* NameVariableGlobal */
|
||||||
.chroma .vi {
|
.chroma .vi {
|
||||||
color: var(--color-syntax-NameVariableInstance);
|
color: var(--color-syntax-NameVariableInstance);
|
||||||
} /* NameVariableInstance */
|
} /* NameVariableInstance */
|
||||||
.chroma .w {
|
.chroma .w {
|
||||||
color: var(--color-syntax-TextWhitespace);
|
color: var(--color-syntax-TextWhitespace);
|
||||||
} /* TextWhitespace */
|
} /* TextWhitespace */
|
||||||
|
|
||||||
/* From web_src/less/codemirror/dark.less */
|
/* From web_src/less/codemirror/dark.less */
|
||||||
.CodeMirror.cm-s-default .cm-property,
|
.CodeMirror.cm-s-default .cm-property,
|
||||||
.CodeMirror.cm-s-paper .cm-property {
|
.CodeMirror.cm-s-paper .cm-property {
|
||||||
color: #a0cc75;
|
color: #a0cc75;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-header,
|
.CodeMirror.cm-s-default .cm-header,
|
||||||
.CodeMirror.cm-s-paper .cm-header {
|
.CodeMirror.cm-s-paper .cm-header {
|
||||||
color: #9daccc;
|
color: #9daccc;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-quote,
|
.CodeMirror.cm-s-default .cm-quote,
|
||||||
.CodeMirror.cm-s-paper .cm-quote {
|
.CodeMirror.cm-s-paper .cm-quote {
|
||||||
color: #009900;
|
color: #009900;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-keyword,
|
.CodeMirror.cm-s-default .cm-keyword,
|
||||||
.CodeMirror.cm-s-paper .cm-keyword {
|
.CodeMirror.cm-s-paper .cm-keyword {
|
||||||
color: #cc8a61;
|
color: #cc8a61;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-atom,
|
.CodeMirror.cm-s-default .cm-atom,
|
||||||
.CodeMirror.cm-s-paper .cm-atom {
|
.CodeMirror.cm-s-paper .cm-atom {
|
||||||
color: #ef5e77;
|
color: #ef5e77;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-number,
|
.CodeMirror.cm-s-default .cm-number,
|
||||||
.CodeMirror.cm-s-paper .cm-number {
|
.CodeMirror.cm-s-paper .cm-number {
|
||||||
color: #ff5656;
|
color: #ff5656;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-def,
|
.CodeMirror.cm-s-default .cm-def,
|
||||||
.CodeMirror.cm-s-paper .cm-def {
|
.CodeMirror.cm-s-paper .cm-def {
|
||||||
color: #e4e4e4;
|
color: #e4e4e4;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-variable-2,
|
.CodeMirror.cm-s-default .cm-variable-2,
|
||||||
.CodeMirror.cm-s-paper .cm-variable-2 {
|
.CodeMirror.cm-s-paper .cm-variable-2 {
|
||||||
color: #00bdbf;
|
color: #00bdbf;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-variable-3,
|
.CodeMirror.cm-s-default .cm-variable-3,
|
||||||
.CodeMirror.cm-s-paper .cm-variable-3 {
|
.CodeMirror.cm-s-paper .cm-variable-3 {
|
||||||
color: #008855;
|
color: #008855;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-comment,
|
.CodeMirror.cm-s-default .cm-comment,
|
||||||
.CodeMirror.cm-s-paper .cm-comment {
|
.CodeMirror.cm-s-paper .cm-comment {
|
||||||
color: #8e9ab3;
|
color: #8e9ab3;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-string,
|
.CodeMirror.cm-s-default .cm-string,
|
||||||
.CodeMirror.cm-s-paper .cm-string {
|
.CodeMirror.cm-s-paper .cm-string {
|
||||||
color: #a77272;
|
color: #a77272;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-string-2,
|
.CodeMirror.cm-s-default .cm-string-2,
|
||||||
.CodeMirror.cm-s-paper .cm-string-2 {
|
.CodeMirror.cm-s-paper .cm-string-2 {
|
||||||
color: #ff5500;
|
color: #ff5500;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-meta,
|
.CodeMirror.cm-s-default .cm-meta,
|
||||||
.CodeMirror.cm-s-default .cm-qualifier,
|
.CodeMirror.cm-s-default .cm-qualifier,
|
||||||
.CodeMirror.cm-s-paper .cm-meta,
|
.CodeMirror.cm-s-paper .cm-meta,
|
||||||
.CodeMirror.cm-s-paper .cm-qualifier {
|
.CodeMirror.cm-s-paper .cm-qualifier {
|
||||||
color: #ffb176;
|
color: #ffb176;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-builtin,
|
.CodeMirror.cm-s-default .cm-builtin,
|
||||||
.CodeMirror.cm-s-paper .cm-builtin {
|
.CodeMirror.cm-s-paper .cm-builtin {
|
||||||
color: #b7c951;
|
color: #b7c951;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-bracket,
|
.CodeMirror.cm-s-default .cm-bracket,
|
||||||
.CodeMirror.cm-s-paper .cm-bracket {
|
.CodeMirror.cm-s-paper .cm-bracket {
|
||||||
color: #999977;
|
color: #999977;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-tag,
|
.CodeMirror.cm-s-default .cm-tag,
|
||||||
.CodeMirror.cm-s-paper .cm-tag {
|
.CodeMirror.cm-s-paper .cm-tag {
|
||||||
color: #f1d273;
|
color: #f1d273;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-attribute,
|
.CodeMirror.cm-s-default .cm-attribute,
|
||||||
.CodeMirror.cm-s-paper .cm-attribute {
|
.CodeMirror.cm-s-paper .cm-attribute {
|
||||||
color: #bfcc70;
|
color: #bfcc70;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-hr,
|
.CodeMirror.cm-s-default .cm-hr,
|
||||||
.CodeMirror.cm-s-paper .cm-hr {
|
.CodeMirror.cm-s-paper .cm-hr {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-url,
|
.CodeMirror.cm-s-default .cm-url,
|
||||||
.CodeMirror.cm-s-paper .cm-url {
|
.CodeMirror.cm-s-paper .cm-url {
|
||||||
color: #c5cfd0;
|
color: #c5cfd0;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-link,
|
.CodeMirror.cm-s-default .cm-link,
|
||||||
.CodeMirror.cm-s-paper .cm-link {
|
.CodeMirror.cm-s-paper .cm-link {
|
||||||
color: #d8c792;
|
color: #d8c792;
|
||||||
}
|
}
|
||||||
.CodeMirror.cm-s-default .cm-error,
|
.CodeMirror.cm-s-default .cm-error,
|
||||||
.CodeMirror.cm-s-paper .cm-error {
|
.CodeMirror.cm-s-paper .cm-error {
|
||||||
color: #dbdbeb;
|
color: #dbdbeb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,4 +4,4 @@
|
|||||||
@forward './codemirror';
|
@forward './codemirror';
|
||||||
@forward './monaco';
|
@forward './monaco';
|
||||||
@forward './settings';
|
@forward './settings';
|
||||||
@forward './syntax';
|
@forward './syntax';
|
||||||
|
|||||||
@ -3,12 +3,12 @@
|
|||||||
@use '../../components/button' as button;
|
@use '../../components/button' as button;
|
||||||
|
|
||||||
@mixin sidebar {
|
@mixin sidebar {
|
||||||
--spc: #{var.get('measure/1x')}; // var(--spc) 16px
|
--spc: #{var.get('measure/1x')}; // var(--spc) 16px
|
||||||
--spc-7_8: calc(var(--spc) * .875); // 7/8 of the base var(--spc-7_8) 14px
|
--spc-7_8: calc(var(--spc) * 0.875); // 7/8 of the base var(--spc-7_8) 14px
|
||||||
--spc-6_8: calc(var(--spc) * .750); // 6/8 = 3/4 of the base var(--spc-6_8) 12px
|
--spc-6_8: calc(var(--spc) * 0.75); // 6/8 = 3/4 of the base var(--spc-6_8) 12px
|
||||||
--spc-4_8: calc(var(--spc) * .500); // 4/8 = 1/2 of the base var(--spc-4_8) 8px
|
--spc-4_8: calc(var(--spc) * 0.5); // 4/8 = 1/2 of the base var(--spc-4_8) 8px
|
||||||
--spc-3_8: calc(var(--spc) * .375); // 3/8 of the base var(--spc-3_8) 6px
|
--spc-3_8: calc(var(--spc) * 0.375); // 3/8 of the base var(--spc-3_8) 6px
|
||||||
--spc-2_8: calc(var(--spc) * .250); // 2/8 = 1/4 of the base var(--spc-2_8) 4px
|
--spc-2_8: calc(var(--spc) * 0.25); // 2/8 = 1/4 of the base var(--spc-2_8) 4px
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -17,47 +17,58 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
||||||
// reset padding and margin for all children
|
// reset padding and margin for all children
|
||||||
>*, .issue-sidebar-combo>*, >text+*, >.ui>* {
|
> *,
|
||||||
|
.issue-sidebar-combo > *,
|
||||||
|
> text + *,
|
||||||
|
> .ui > * {
|
||||||
margin: unset !important;
|
margin: unset !important;
|
||||||
padding: unset !important;
|
padding: unset !important;
|
||||||
font-size: var.get('font-size/sm') !important;
|
font-size: var.get('font-size/sm') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// alignment for main children elements
|
// alignment for main children elements
|
||||||
>.ui, >.text, >.ui {
|
> .ui,
|
||||||
|
> .text,
|
||||||
|
> .ui {
|
||||||
padding-left: var(--spc-4_8) !important;
|
padding-left: var(--spc-4_8) !important;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column {
|
.ui.ui.ui.compact.grid > .column:not(.row),
|
||||||
|
.ui.ui.ui.compact.grid > .row > .column {
|
||||||
padding-left: unset;
|
padding-left: unset;
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
// reset for all actionable elements
|
// reset for all actionable elements
|
||||||
button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column {
|
button,
|
||||||
|
input,
|
||||||
|
.dropdown,
|
||||||
|
.ui.grid > .row > [class*='two wide'].column,
|
||||||
|
.ui.grid > .column.row > [class*='two wide'].column,
|
||||||
|
.ui.grid > [class*='two wide'].column,
|
||||||
|
.ui.column.grid > [class*='two wide'].column {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
min-height: 0 !important;
|
min-height: 0 !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// -------------------------------------------------------------- //
|
// -------------------------------------------------------------- //
|
||||||
// ---------------------- Elements Styling ---------------------- //
|
// ---------------------- Elements Styling ---------------------- //
|
||||||
// -------------------------------------------------------------- //
|
// -------------------------------------------------------------- //
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// dividers
|
// dividers
|
||||||
>.divider {
|
> .divider {
|
||||||
width: calc(100% - var(--spc-4_8)) !important;
|
width: calc(100% - var(--spc-4_8)) !important;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin: var(--spc-7_8) 0 !important;
|
margin: var(--spc-7_8) 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// select branch dropdown
|
// select branch dropdown
|
||||||
.select-branch {
|
.select-branch {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
@ -66,7 +77,7 @@
|
|||||||
@include button.hollow;
|
@include button.hollow;
|
||||||
}
|
}
|
||||||
|
|
||||||
+.divider {
|
+ .divider {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
margin: var(--spc-4_8) 0 !important;
|
margin: var(--spc-4_8) 0 !important;
|
||||||
}
|
}
|
||||||
@ -74,7 +85,9 @@
|
|||||||
.menu {
|
.menu {
|
||||||
--color-menu: #{color.get('elevation/3')};
|
--color-menu: #{color.get('elevation/3')};
|
||||||
|
|
||||||
.branch-tag-item.active, .reference-list-menu, .reference-list-menu .item {
|
.branch-tag-item.active,
|
||||||
|
.reference-list-menu,
|
||||||
|
.reference-list-menu .item {
|
||||||
--color-menu: #{color.get('elevation/4')} !important;
|
--color-menu: #{color.get('elevation/4')} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,10 +115,10 @@
|
|||||||
padding-top: var(--spc-3_8) !important;
|
padding-top: var(--spc-3_8) !important;
|
||||||
padding-bottom: var(--spc-3_8) !important;
|
padding-bottom: var(--spc-3_8) !important;
|
||||||
font-size: var.get('font-size/sm');
|
font-size: var.get('font-size/sm');
|
||||||
transition: background-color .1s ease;
|
transition: background-color 0.1s ease;
|
||||||
border-radius: var(--border-radius) !important;
|
border-radius: var(--border-radius) !important;
|
||||||
|
|
||||||
>a {
|
> a {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -117,13 +130,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5);
|
background-color: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// direct text children
|
// direct text children
|
||||||
>.text {
|
> .text {
|
||||||
// background-color: orange !important;
|
// background-color: orange !important;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
@ -154,12 +167,12 @@
|
|||||||
|
|
||||||
.depending {
|
.depending {
|
||||||
// title
|
// title
|
||||||
>.text {
|
> .text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: var(--spc-6_8) !important;
|
margin-bottom: var(--spc-6_8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
>p {
|
> p {
|
||||||
margin-bottom: var(--spc-4_8) !important;
|
margin-bottom: var(--spc-4_8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -172,11 +185,12 @@
|
|||||||
border: none !important;
|
border: none !important;
|
||||||
|
|
||||||
.item-left {
|
.item-left {
|
||||||
a { // issue
|
a {
|
||||||
|
// issue
|
||||||
}
|
}
|
||||||
|
|
||||||
div.text { // repo
|
div.text {
|
||||||
|
// repo
|
||||||
font-size: var.get('font-size/xs') !important;
|
font-size: var.get('font-size/xs') !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -240,12 +254,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// input of type date
|
// input of type date
|
||||||
input[type="date"] {
|
input[type='date'] {
|
||||||
padding: var(--spc-4_8) var(--spc-6_8) !important;
|
padding: var(--spc-4_8) var(--spc-6_8) !important;
|
||||||
border-top-left-radius: var(--border-radius);
|
border-top-left-radius: var(--border-radius);
|
||||||
border-bottom-left-radius: var(--border-radius);
|
border-bottom-left-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: var(--spc-4_8) !important;
|
padding: var(--spc-4_8) !important;
|
||||||
border-top-right-radius: var(--border-radius) !important;
|
border-top-right-radius: var(--border-radius) !important;
|
||||||
@ -254,14 +268,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// direct form child
|
// direct form child
|
||||||
>form, .form {
|
> form,
|
||||||
|
.form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spc-4_8) !important;
|
gap: var(--spc-4_8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// buttons at the end of the sidebar
|
// buttons at the end of the sidebar
|
||||||
>form button, >button {
|
> form button,
|
||||||
|
> button {
|
||||||
font-size: var.get('font-size/sm') !important;
|
font-size: var.get('font-size/sm') !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
@ -280,7 +296,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// if the data-modal attr is #sidebar-delete-issue, make the color red
|
// if the data-modal attr is #sidebar-delete-issue, make the color red
|
||||||
&[data-modal="#sidebar-delete-issue"] {
|
&[data-modal='#sidebar-delete-issue'] {
|
||||||
color: color.get('palette/red/base') !important;
|
color: color.get('palette/red/base') !important;
|
||||||
svg {
|
svg {
|
||||||
color: color.get('palette/red/base') !important;
|
color: color.get('palette/red/base') !important;
|
||||||
@ -291,4 +307,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,7 +23,8 @@
|
|||||||
color: color.get('subtle');
|
color: color.get('subtle');
|
||||||
}
|
}
|
||||||
|
|
||||||
&:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector)
|
&:has(+ .ui.pull.tabs) {
|
||||||
|
// if the next sibling is a tab (e.g. pull request tab selector)
|
||||||
margin-bottom: var.get('measure/1x');
|
margin-bottom: var.get('measure/1x');
|
||||||
padding-bottom: var.get('measure/.5x');
|
padding-bottom: var.get('measure/.5x');
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
@ -37,14 +38,14 @@
|
|||||||
.issue-content-left {
|
.issue-content-left {
|
||||||
.timeline-avatar img {
|
.timeline-avatar img {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item {
|
.timeline-item {
|
||||||
&.event {
|
&.event {
|
||||||
.badge {
|
.badge {
|
||||||
// and not contains a tw-bg-* class
|
// and not contains a tw-bg-* class
|
||||||
&:not([class*="tw-bg-"]) {
|
&:not([class*='tw-bg-']) {
|
||||||
color: var(--color-timeline-badge-fg) !important;
|
color: var(--color-timeline-badge-fg) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -129,18 +130,18 @@
|
|||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: calc((var(--avatar-size) / 2) - 1px);
|
left: calc((var(--avatar-size) / 2) - 1px);
|
||||||
top: 16px;
|
top: 16px;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
background-color: var(--color-timeline);
|
background-color: var(--color-timeline);
|
||||||
opacity: 50%;
|
opacity: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment.code-comment .content.comment-container{
|
.comment.code-comment .content.comment-container {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
|
|
||||||
.header.comment-header {
|
.header.comment-header {
|
||||||
@ -157,7 +158,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.code-comment-buttons {
|
.code-comment-buttons {
|
||||||
margin: 0!important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-form {
|
.comment-form {
|
||||||
@ -180,14 +181,15 @@
|
|||||||
margin-bottom: var.get('measure/1x');
|
margin-bottom: var.get('measure/1x');
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository .diff-detail-box { // diff page detail box
|
.repository .diff-detail-box {
|
||||||
|
// diff page detail box
|
||||||
padding: var.get('measure/.5x') 0;
|
padding: var.get('measure/.5x') 0;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository.view.issue .pull.tabs.container {
|
.repository.view.issue .pull.tabs.container {
|
||||||
+ div {
|
+ div {
|
||||||
>.diff-detail-box:first-child {
|
> .diff-detail-box:first-child {
|
||||||
margin: calc(var.get('measure/1x') * -1) 0 0 0;
|
margin: calc(var.get('measure/1x') * -1) 0 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -203,11 +205,13 @@
|
|||||||
|
|
||||||
column-gap: var.get('measure/1x');
|
column-gap: var.get('measure/1x');
|
||||||
|
|
||||||
.diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * {
|
.diff-file-body tr.tag-code:last-child td:first-child,
|
||||||
|
.diff-file-body tr.tag-code:last-child td:first-child * {
|
||||||
border-bottom-left-radius: calc(var(--border-radius) - 2px);
|
border-bottom-left-radius: calc(var(--border-radius) - 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * {
|
.diff-file-body tr.tag-code:last-child td:last-child,
|
||||||
|
.diff-file-body tr.tag-code:last-child td:last-child * {
|
||||||
border-bottom-right-radius: var(--border-radius);
|
border-bottom-right-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -220,7 +224,7 @@
|
|||||||
.add-comment {
|
.add-comment {
|
||||||
border-top: 1px solid var(--color-secondary);
|
border-top: 1px solid var(--color-secondary);
|
||||||
border-bottom: 1px solid var(--color-secondary);
|
border-bottom: 1px solid var(--color-secondary);
|
||||||
|
|
||||||
.conversation-holder {
|
.conversation-holder {
|
||||||
.comment-code-cloud {
|
.comment-code-cloud {
|
||||||
padding: var.get('measure/.75x') !important;
|
padding: var.get('measure/.75x') !important;
|
||||||
@ -228,7 +232,7 @@
|
|||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-top: var.get('measure/.5x');
|
margin-top: var.get('measure/.5x');
|
||||||
}
|
}
|
||||||
|
|
||||||
.field.footer {
|
.field.footer {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
@ -255,11 +259,12 @@
|
|||||||
margin-bottom: var.get('measure/1x');
|
margin-bottom: var.get('measure/1x');
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before, &:after {
|
&:before,
|
||||||
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,8 @@
|
|||||||
@use '@lucas-labs/lui-micro/color' as color;
|
@use '@lucas-labs/lui-micro/color' as color;
|
||||||
|
|
||||||
@mixin apply-styles {
|
@mixin apply-styles {
|
||||||
.page-content.repository.issue-list, .page-content.dashboard.issues {
|
.page-content.repository.issue-list,
|
||||||
|
.page-content.dashboard.issues {
|
||||||
.secondary-nav {
|
.secondary-nav {
|
||||||
margin-bottom: var.get('measure/1.5x');
|
margin-bottom: var.get('measure/1.5x');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,4 +4,4 @@
|
|||||||
@mixin issues {
|
@mixin issues {
|
||||||
@include list.apply-styles();
|
@include list.apply-styles();
|
||||||
@include issue.apply-styles();
|
@include issue.apply-styles();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,12 +15,14 @@
|
|||||||
padding: 0 0 0 var.get('measure/.5x');
|
padding: 0 0 0 var.get('measure/.5x');
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
&:first-of-type, &.active {
|
&:first-of-type,
|
||||||
|
&.active {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-divider, button {
|
.breadcrumb-divider,
|
||||||
|
button {
|
||||||
color: color.get('subtle') !important;
|
color: color.get('subtle') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -94,7 +96,6 @@
|
|||||||
|
|
||||||
// readme
|
// readme
|
||||||
#readme {
|
#readme {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository-summary .sub-menu .item {
|
.repository-summary .sub-menu .item {
|
||||||
|
|||||||
@ -13,7 +13,9 @@
|
|||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#repo-topics, #topic_edit, .label-list {
|
#repo-topics,
|
||||||
|
#topic_edit,
|
||||||
|
.label-list {
|
||||||
row-gap: var.get('measure/.5x');
|
row-gap: var.get('measure/.5x');
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
|
|
||||||
@ -27,26 +29,30 @@
|
|||||||
padding-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important;
|
background-color: rgba(
|
||||||
|
#{color.get('palette/blue/base', 'rgb')},
|
||||||
|
0.3
|
||||||
|
) !important;
|
||||||
color: color.get('primary/base') !important;
|
color: color.get('primary/base') !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
|
.ui.selection.active.dropdown,
|
||||||
border-color: color.get('elevation/6')
|
.ui.selection.active.dropdown .menu {
|
||||||
|
border-color: color.get('elevation/6');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.repo-description {
|
.repo-description {
|
||||||
margin-bottom: var.get('measure/1x');
|
margin-bottom: var.get('measure/1x');
|
||||||
|
|
||||||
+a.flex-text-block {
|
+ a.flex-text-block {
|
||||||
svg {
|
svg {
|
||||||
color: color.get('subtle') !important;
|
color: color.get('subtle') !important;
|
||||||
}
|
}
|
||||||
margin-bottom: var.get('measure/1x');
|
margin-bottom: var.get('measure/1x');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-text-block {
|
.flex-text-block {
|
||||||
gap: var.get('measure/.25x') !important;
|
gap: var.get('measure/.25x') !important;
|
||||||
@ -61,16 +67,18 @@
|
|||||||
.repo-description {
|
.repo-description {
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
|
|
||||||
+a.flex-text-block {
|
+ a.flex-text-block {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#repo-topics, #manage_topic, .flex-item-title {
|
#repo-topics,
|
||||||
|
#manage_topic,
|
||||||
|
.flex-item-title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-item-body>div {
|
.flex-item-body > div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -138,7 +146,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.repo-home-sidebar-bottom, .repo-home-sidebar-top {
|
.repo-home-sidebar-bottom,
|
||||||
|
.repo-home-sidebar-top {
|
||||||
padding-left: var.get('measure/1.5x');
|
padding-left: var.get('measure/1.5x');
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
@ -165,11 +174,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>.flex-list>.flex-item {
|
> .flex-list > .flex-item {
|
||||||
padding-top: var.get('measure/1x');
|
padding-top: var.get('measure/1x');
|
||||||
padding-bottom: var.get('measure/1x');
|
padding-bottom: var.get('measure/1x');
|
||||||
|
|
||||||
>.flex-item-main {
|
> .flex-item-main {
|
||||||
gap: var.get('measure/1x');
|
gap: var.get('measure/1x');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -241,7 +250,8 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository.file.editor .commit-form-wrapper .commit-form:before, .repository.file.editor .commit-form-wrapper .commit-form:after {
|
.repository.file.editor .commit-form-wrapper .commit-form:before,
|
||||||
|
.repository.file.editor .commit-form-wrapper .commit-form:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
// header
|
// header
|
||||||
.repo-header {
|
.repo-header {
|
||||||
margin: 0 0 var.get('measure/1x') 0;
|
margin: 0 0 var.get('measure/1x') 0;
|
||||||
|
|
||||||
// repo image
|
// repo image
|
||||||
img.avatar {
|
img.avatar {
|
||||||
width: var.get('measure/2x') !important;
|
width: var.get('measure/2x') !important;
|
||||||
@ -89,7 +89,7 @@
|
|||||||
font-weight: 500 !important;
|
font-weight: 500 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: color.get('primary/base') !important;
|
color: color.get('primary/base') !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -97,7 +97,7 @@
|
|||||||
a:last-child {
|
a:last-child {
|
||||||
font-size: var.get('font-size/md') !important;
|
font-size: var.get('font-size/md') !important;
|
||||||
clear: left;
|
clear: left;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,4 +6,4 @@
|
|||||||
@include home.apply-styles();
|
@include home.apply-styles();
|
||||||
@include secondary-navbar.apply-styles();
|
@include secondary-navbar.apply-styles();
|
||||||
@include file-list.apply-styles();
|
@include file-list.apply-styles();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,10 +3,12 @@
|
|||||||
@use './section';
|
@use './section';
|
||||||
|
|
||||||
@mixin settings-pages {
|
@mixin settings-pages {
|
||||||
.page-content.user.settings, .page-content.admin, .page-content.repository.settings {
|
.page-content.user.settings,
|
||||||
|
.page-content.admin,
|
||||||
|
.page-content.repository.settings {
|
||||||
.ui.flex-container {
|
.ui.flex-container {
|
||||||
column-gap: 40px;
|
column-gap: 40px;
|
||||||
|
|
||||||
.flex-container-nav {
|
.flex-container-nav {
|
||||||
width: 232px;
|
width: 232px;
|
||||||
@include section.nav;
|
@include section.nav;
|
||||||
|
|||||||
@ -2,4 +2,4 @@
|
|||||||
|
|
||||||
@mixin settings {
|
@mixin settings {
|
||||||
@include pages.settings-pages;
|
@include pages.settings-pages;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
.ui.segment {
|
.ui.segment {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
>*:last-child {
|
> *:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -33,7 +33,7 @@
|
|||||||
|
|
||||||
.ui.attached.segment {
|
.ui.attached.segment {
|
||||||
background: unset;
|
background: unset;
|
||||||
padding:0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@ -57,7 +57,9 @@
|
|||||||
margin: 0 0 1em;
|
margin: 0 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field {
|
.ui.form .fields .fields,
|
||||||
|
.ui.form .field:last-child,
|
||||||
|
.ui.form .fields:last-child .field {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -77,11 +79,12 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
&:not(:first-child), &:first-child {
|
&:not(:first-child),
|
||||||
|
&:first-child {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
margin: 0rem 0rem 0rem 0rem;
|
margin: 0rem 0rem 0rem 0rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,7 +19,8 @@
|
|||||||
min-height: var(--min-height);
|
min-height: var(--min-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.item, details.item {
|
a.item,
|
||||||
|
details.item {
|
||||||
min-height: var(--min-height);
|
min-height: var(--min-height);
|
||||||
&:before {
|
&:before {
|
||||||
content: none;
|
content: none;
|
||||||
@ -40,8 +41,8 @@
|
|||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
background: var(--color-primary);
|
background: var(--color-primary);
|
||||||
border-radius: .375rem;
|
border-radius: 0.375rem;
|
||||||
content: "";
|
content: '';
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -52,7 +53,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.item, details.item summary {
|
a.item,
|
||||||
|
details.item summary {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
@ -64,7 +66,7 @@
|
|||||||
&:after {
|
&:after {
|
||||||
color: color.get('subtle');
|
color: color.get('subtle');
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
transition: transform .12s linear;
|
transition: transform 0.12s linear;
|
||||||
mask-image: var(--octicon-chevron-down);
|
mask-image: var(--octicon-chevron-down);
|
||||||
-webkit-mask-image: var(--octicon-chevron-down);
|
-webkit-mask-image: var(--octicon-chevron-down);
|
||||||
}
|
}
|
||||||
@ -86,9 +88,9 @@
|
|||||||
background-color: var(--color-hover);
|
background-color: var(--color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@forward './nav';
|
@forward './nav';
|
||||||
@forward './content';
|
@forward './content';
|
||||||
|
|||||||
@ -26,24 +26,24 @@
|
|||||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||||
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
||||||
|
|
||||||
// ┌────────┐
|
// ┌────────┐
|
||||||
// │ radius │
|
// │ radius │
|
||||||
// └────────┘
|
// └────────┘
|
||||||
--border-radius: #{var.get('measure/.5x')};
|
--border-radius: #{var.get('measure/.5x')};
|
||||||
--border-radius-medium: #{var.get('measure/1x')};
|
--border-radius-medium: #{var.get('measure/1x')};
|
||||||
--border-radius-full: calc(infinity * 1px);
|
--border-radius-full: calc(infinity * 1px);
|
||||||
|
|
||||||
// ┌────────┐
|
// ┌────────┐
|
||||||
// │ others │
|
// │ others │
|
||||||
// └────────┘
|
// └────────┘
|
||||||
--opacity-disabled: 0.55;
|
--opacity-disabled: 0.55;
|
||||||
--height-loading: 16rem;
|
--height-loading: 16rem;
|
||||||
--min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
|
--min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
|
||||||
--checkbox-size: 16px; // height and width of checkbox and radio inputs
|
--checkbox-size: 16px; // height and width of checkbox and radio inputs
|
||||||
--page-spacing: 24px; // space between page elements
|
--page-spacing: 24px; // space between page elements
|
||||||
--page-margin-x: 32px; // minimum space on left and right side of page
|
--page-margin-x: 32px; // minimum space on left and right side of page
|
||||||
--tab-size: 4;
|
--tab-size: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) and (max-width: 1200px) {
|
@media (min-width: 768px) and (max-width: 1200px) {
|
||||||
@ -57,4 +57,4 @@
|
|||||||
--page-margin-x: 16px;
|
--page-margin-x: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -61,15 +61,15 @@
|
|||||||
--color-secondary: #{color.get('secondary/base')};
|
--color-secondary: #{color.get('secondary/base')};
|
||||||
|
|
||||||
// dark
|
// dark
|
||||||
--color-secondary-dark-1: #{color.get('secondary/' + $scheme-inverted + '/3%')};
|
--color-secondary-dark-1: #{color.get('secondary/' + $scheme-inverted + '/3%')};
|
||||||
--color-secondary-dark-2: #{color.get('secondary/' + $scheme-inverted + '/6%')};
|
--color-secondary-dark-2: #{color.get('secondary/' + $scheme-inverted + '/6%')};
|
||||||
--color-secondary-dark-3: #{color.get('secondary/' + $scheme-inverted + '/9%')};
|
--color-secondary-dark-3: #{color.get('secondary/' + $scheme-inverted + '/9%')};
|
||||||
--color-secondary-dark-4: #{color.get('secondary/' + $scheme-inverted + '/12%')};
|
--color-secondary-dark-4: #{color.get('secondary/' + $scheme-inverted + '/12%')};
|
||||||
--color-secondary-dark-5: #{color.get('secondary/' + $scheme-inverted + '/15%')};
|
--color-secondary-dark-5: #{color.get('secondary/' + $scheme-inverted + '/15%')};
|
||||||
--color-secondary-dark-6: #{color.get('secondary/' + $scheme-inverted + '/20%')};
|
--color-secondary-dark-6: #{color.get('secondary/' + $scheme-inverted + '/20%')};
|
||||||
--color-secondary-dark-7: #{color.get('secondary/' + $scheme-inverted + '/25%')};
|
--color-secondary-dark-7: #{color.get('secondary/' + $scheme-inverted + '/25%')};
|
||||||
--color-secondary-dark-8: #{color.get('secondary/' + $scheme-inverted + '/30%')};
|
--color-secondary-dark-8: #{color.get('secondary/' + $scheme-inverted + '/30%')};
|
||||||
--color-secondary-dark-9: #{color.get('secondary/' + $scheme-inverted + '/35%')};
|
--color-secondary-dark-9: #{color.get('secondary/' + $scheme-inverted + '/35%')};
|
||||||
--color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')};
|
--color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')};
|
||||||
--color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')};
|
--color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')};
|
||||||
--color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')};
|
--color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')};
|
||||||
@ -112,41 +112,40 @@
|
|||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ named │
|
// │ named │
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-red: #{color.get('palette/red/base')};
|
--color-red: #{color.get('palette/red/base')};
|
||||||
--color-orange: #{color.get('palette/orange/base')};
|
--color-orange: #{color.get('palette/orange/base')};
|
||||||
--color-yellow: #{color.get('palette/yellow/base')};
|
--color-yellow: #{color.get('palette/yellow/base')};
|
||||||
--color-olive: #{color.get('palette/olive/base')};
|
--color-olive: #{color.get('palette/olive/base')};
|
||||||
--color-green: #{color.get('palette/green/base')};
|
--color-green: #{color.get('palette/green/base')};
|
||||||
--color-teal: #{color.get('palette/teal/base')};
|
--color-teal: #{color.get('palette/teal/base')};
|
||||||
--color-blue: #{color.get('palette/blue/base')};
|
--color-blue: #{color.get('palette/blue/base')};
|
||||||
--color-violet: #{color.get('palette/violet/base')};
|
--color-violet: #{color.get('palette/violet/base')};
|
||||||
--color-purple: #{color.get('palette/purple/base')};
|
--color-purple: #{color.get('palette/purple/base')};
|
||||||
--color-pink: #{color.get('palette/pink/base')};
|
--color-pink: #{color.get('palette/pink/base')};
|
||||||
--color-brown: #{color.get('palette/brown/base')};
|
--color-brown: #{color.get('palette/brown/base')};
|
||||||
--color-black: #{color.get('palette/black/base')};
|
--color-black: #{color.get('palette/black/base')};
|
||||||
|
|
||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ named │ » contrasts (lugit addition)
|
// │ named │ » contrasts (lugit addition)
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
|
--color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
|
||||||
--color-red-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
|
--color-red-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
|
||||||
|
|
||||||
|
|
||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ named │ » light variants
|
// │ named │ » light variants
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-red-light: #{color.get('palette/red/light/10%')};
|
--color-red-light: #{color.get('palette/red/light/10%')};
|
||||||
--color-orange-light: #{color.get('palette/orange/light/10%')};
|
--color-orange-light: #{color.get('palette/orange/light/10%')};
|
||||||
--color-yellow-light: #{color.get('palette/yellow/light/10%')};
|
--color-yellow-light: #{color.get('palette/yellow/light/10%')};
|
||||||
--color-olive-light: #{color.get('palette/olive/light/10%')};
|
--color-olive-light: #{color.get('palette/olive/light/10%')};
|
||||||
--color-green-light: #{color.get('palette/green/light/10%')};
|
--color-green-light: #{color.get('palette/green/light/10%')};
|
||||||
--color-teal-light: #{color.get('palette/teal/light/10%')};
|
--color-teal-light: #{color.get('palette/teal/light/10%')};
|
||||||
--color-blue-light: #{color.get('palette/blue/light/10%')};
|
--color-blue-light: #{color.get('palette/blue/light/10%')};
|
||||||
--color-violet-light: #{color.get('palette/violet/light/10%')};
|
--color-violet-light: #{color.get('palette/violet/light/10%')};
|
||||||
--color-purple-light: #{color.get('palette/purple/light/10%')};
|
--color-purple-light: #{color.get('palette/purple/light/10%')};
|
||||||
--color-pink-light: #{color.get('palette/pink/light/10%')};
|
--color-pink-light: #{color.get('palette/pink/light/10%')};
|
||||||
--color-brown-light: #{color.get('palette/brown/light/10%')};
|
--color-brown-light: #{color.get('palette/brown/light/10%')};
|
||||||
--color-black-light: #{if(
|
--color-black-light: #{if(
|
||||||
$is-dark,
|
$is-dark,
|
||||||
color.get('palette/black/light/10%'),
|
color.get('palette/black/light/10%'),
|
||||||
color.get('palette/white/light/10%')
|
color.get('palette/white/light/10%')
|
||||||
@ -155,18 +154,18 @@
|
|||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ named │ » dark 1 variants
|
// │ named │ » dark 1 variants
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-red-dark-1: #{color.get('palette/red/dark/10%')};
|
--color-red-dark-1: #{color.get('palette/red/dark/10%')};
|
||||||
--color-orange-dark-1: #{color.get('palette/orange/dark/10%')};
|
--color-orange-dark-1: #{color.get('palette/orange/dark/10%')};
|
||||||
--color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')};
|
--color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')};
|
||||||
--color-olive-dark-1: #{color.get('palette/olive/dark/10%')};
|
--color-olive-dark-1: #{color.get('palette/olive/dark/10%')};
|
||||||
--color-green-dark-1: #{color.get('palette/green/dark/10%')};
|
--color-green-dark-1: #{color.get('palette/green/dark/10%')};
|
||||||
--color-teal-dark-1: #{color.get('palette/teal/dark/10%')};
|
--color-teal-dark-1: #{color.get('palette/teal/dark/10%')};
|
||||||
--color-blue-dark-1: #{color.get('palette/blue/dark/10%')};
|
--color-blue-dark-1: #{color.get('palette/blue/dark/10%')};
|
||||||
--color-violet-dark-1: #{color.get('palette/violet/dark/10%')};
|
--color-violet-dark-1: #{color.get('palette/violet/dark/10%')};
|
||||||
--color-purple-dark-1: #{color.get('palette/purple/dark/10%')};
|
--color-purple-dark-1: #{color.get('palette/purple/dark/10%')};
|
||||||
--color-pink-dark-1: #{color.get('palette/pink/dark/10%')};
|
--color-pink-dark-1: #{color.get('palette/pink/dark/10%')};
|
||||||
--color-brown-dark-1: #{color.get('palette/brown/dark/10%')};
|
--color-brown-dark-1: #{color.get('palette/brown/dark/10%')};
|
||||||
--color-black-dark-1: #{if(
|
--color-black-dark-1: #{if(
|
||||||
$is-dark,
|
$is-dark,
|
||||||
color.get('palette/black/dark/10%'),
|
color.get('palette/black/dark/10%'),
|
||||||
color.get('palette/white/dark/10%')
|
color.get('palette/white/dark/10%')
|
||||||
@ -175,135 +174,180 @@
|
|||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ named │ » dark 2 variants
|
// │ named │ » dark 2 variants
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-red-dark-2: #{color.get('palette/red/dark/20%')};
|
--color-red-dark-2: #{color.get('palette/red/dark/20%')};
|
||||||
--color-orange-dark-2: #{color.get('palette/orange/dark/20%')};
|
--color-orange-dark-2: #{color.get('palette/orange/dark/20%')};
|
||||||
--color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')};
|
--color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')};
|
||||||
--color-olive-dark-2: #{color.get('palette/olive/dark/20%')};
|
--color-olive-dark-2: #{color.get('palette/olive/dark/20%')};
|
||||||
--color-green-dark-2: #{color.get('palette/green/dark/20%')};
|
--color-green-dark-2: #{color.get('palette/green/dark/20%')};
|
||||||
--color-teal-dark-2: #{color.get('palette/teal/dark/20%')};
|
--color-teal-dark-2: #{color.get('palette/teal/dark/20%')};
|
||||||
--color-blue-dark-2: #{color.get('palette/blue/dark/20%')};
|
--color-blue-dark-2: #{color.get('palette/blue/dark/20%')};
|
||||||
--color-violet-dark-2: #{color.get('palette/violet/dark/20%')};
|
--color-violet-dark-2: #{color.get('palette/violet/dark/20%')};
|
||||||
--color-purple-dark-2: #{color.get('palette/purple/dark/20%')};
|
--color-purple-dark-2: #{color.get('palette/purple/dark/20%')};
|
||||||
--color-pink-dark-2: #{color.get('palette/pink/dark/20%')};
|
--color-pink-dark-2: #{color.get('palette/pink/dark/20%')};
|
||||||
--color-brown-dark-2: #{color.get('palette/brown/dark/20%')};
|
--color-brown-dark-2: #{color.get('palette/brown/dark/20%')};
|
||||||
--color-black-dark-2: #{if(
|
--color-black-dark-2: #{if(
|
||||||
$is-dark,
|
$is-dark,
|
||||||
color.get('palette/black/dark/20%'),
|
color.get('palette/black/dark/20%'),
|
||||||
color.get('palette/white/dark/20%')
|
color.get('palette/white/dark/20%')
|
||||||
)};
|
)};
|
||||||
|
|
||||||
// ┌──────┐
|
// ┌──────┐
|
||||||
// │ ansi │ » for actions console and console files
|
// │ ansi │ » for actions console and console files
|
||||||
// └──────┘
|
// └──────┘
|
||||||
--color-ansi-black: #1e2327;
|
--color-ansi-black: #1e2327;
|
||||||
--color-ansi-red: #cc4848;
|
--color-ansi-red: #cc4848;
|
||||||
--color-ansi-green: #87ab63;
|
--color-ansi-green: #87ab63;
|
||||||
--color-ansi-yellow: #cc9903;
|
--color-ansi-yellow: #cc9903;
|
||||||
--color-ansi-blue: #3a8ac6;
|
--color-ansi-blue: #3a8ac6;
|
||||||
--color-ansi-magenta: #d22e8b;
|
--color-ansi-magenta: #d22e8b;
|
||||||
--color-ansi-cyan: #00918a;
|
--color-ansi-cyan: #00918a;
|
||||||
--color-ansi-white: var(--color-console-fg-subtle);
|
--color-ansi-white: var(--color-console-fg-subtle);
|
||||||
--color-ansi-bright-black: #424851;
|
--color-ansi-bright-black: #424851;
|
||||||
--color-ansi-bright-red: #d15a5a;
|
--color-ansi-bright-red: #d15a5a;
|
||||||
--color-ansi-bright-green: #93b373;
|
--color-ansi-bright-green: #93b373;
|
||||||
--color-ansi-bright-yellow: #eaaf03;
|
--color-ansi-bright-yellow: #eaaf03;
|
||||||
--color-ansi-bright-blue: #4e96cc;
|
--color-ansi-bright-blue: #4e96cc;
|
||||||
--color-ansi-bright-magenta: #d74397;
|
--color-ansi-bright-magenta: #d74397;
|
||||||
--color-ansi-bright-cyan: #00b6ad;
|
--color-ansi-bright-cyan: #00b6ad;
|
||||||
--color-ansi-bright-white: var(--color-console-fg);
|
--color-ansi-bright-white: var(--color-console-fg);
|
||||||
|
|
||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ other │
|
// │ other │
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-grey: #{color.get('elevation/9')};
|
--color-grey: #{color.get('elevation/9')};
|
||||||
--color-grey-light: #{color.get('elevation/11')};
|
--color-grey-light: #{color.get('elevation/11')};
|
||||||
--color-gold: #{color.get('palette/yellow/dark/20%')};
|
--color-gold: #{color.get('palette/yellow/dark/20%')};
|
||||||
--color-white: #{color.get('palette/white/base')};
|
--color-white: #{color.get('palette/white/base')};
|
||||||
--color-git: #f05133;
|
--color-git: #f05133;
|
||||||
|
|
||||||
// ┌──────┐
|
// ┌──────┐
|
||||||
// │ diff │
|
// │ diff │
|
||||||
// └──────┘
|
// └──────┘
|
||||||
--color-diff-added-linenum-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
|
--color-diff-added-linenum-bg: #{if(
|
||||||
--color-diff-added-row-bg: #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))};
|
$is-dark,
|
||||||
--color-diff-added-row-border: #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))};
|
#{color.get('palette/teal/dark/50%')},
|
||||||
--color-diff-added-word-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))};
|
rgba(#{color.get('palette/white/base', 'rgb')}, 0.2)
|
||||||
--color-diff-moved-row-bg: #{if($is-dark, #{color.get('palette/yellow/dark/75%')}, rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, .25))};
|
)};
|
||||||
--color-diff-moved-row-border: #{if($is-dark, #{color.get('palette/yellow/dark/65%')}, rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, .25))};
|
--color-diff-added-row-bg: #{if(
|
||||||
--color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
|
$is-dark,
|
||||||
--color-diff-removed-row-bg: #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))};
|
#{color.get('palette/teal/dark/60%')},
|
||||||
--color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))};
|
rgba(#{color.get('palette/green/light/20%', 'rgb')}, 0.25)
|
||||||
--color-diff-removed-word-bg: #{if($is-dark, #{color.get('palette/red/dark/55%')}, rgba(#{color.get('palette/red/light/25%', 'rgb')}, .2))};
|
)};
|
||||||
--color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)};
|
--color-diff-added-row-border: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/teal/dark/40%')},
|
||||||
|
rgba(#{color.get('palette/green/light/25%', 'rgb')}, 0.25)
|
||||||
|
)};
|
||||||
|
--color-diff-added-word-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/teal/dark/50%')},
|
||||||
|
rgba(#{color.get('palette/green/light/6%', 'rgb')}, 0.3)
|
||||||
|
)};
|
||||||
|
--color-diff-moved-row-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/yellow/dark/75%')},
|
||||||
|
rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, 0.25)
|
||||||
|
)};
|
||||||
|
--color-diff-moved-row-border: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/yellow/dark/65%')},
|
||||||
|
rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, 0.25)
|
||||||
|
)};
|
||||||
|
--color-diff-removed-linenum-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/red/dark/60%')},
|
||||||
|
rgba(#{color.get('palette/white/base', 'rgb')}, 0.2)
|
||||||
|
)};
|
||||||
|
--color-diff-removed-row-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/red/dark/65%')},
|
||||||
|
rgba(#{color.get('palette/red/light/30%', 'rgb')}, 0.15)
|
||||||
|
)};
|
||||||
|
--color-diff-removed-row-border: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/red/dark/50%')},
|
||||||
|
rgba(#{color.get('palette/red/light/35%', 'rgb')}, 0.2)
|
||||||
|
)};
|
||||||
|
--color-diff-removed-word-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
#{color.get('palette/red/dark/55%')},
|
||||||
|
rgba(#{color.get('palette/red/light/25%', 'rgb')}, 0.2)
|
||||||
|
)};
|
||||||
|
--color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)};
|
||||||
|
|
||||||
// ┌────────┐
|
// ┌────────┐
|
||||||
// │ status │
|
// │ status │
|
||||||
// └────────┘
|
// └────────┘
|
||||||
--color-error-border: #{color.get('palette/red/base')};
|
--color-error-border: #{color.get('palette/red/base')};
|
||||||
--color-error-bg: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
|
--color-error-bg: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
|
||||||
--color-error-bg-active: #{color.get('palette/red/light/6%')};
|
--color-error-bg-active: #{color.get('palette/red/light/6%')};
|
||||||
--color-error-bg-hover: #{color.get('palette/red/light/12%')};
|
--color-error-bg-hover: #{color.get('palette/red/light/12%')};
|
||||||
--color-error-text: #{color.get('palette/red/base')};
|
--color-error-text: #{color.get('palette/red/base')};
|
||||||
--color-success-border: #{color.get('palette/green/light/12%')};
|
--color-success-border: #{color.get('palette/green/light/12%')};
|
||||||
--color-success-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
|
--color-success-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
|
||||||
--color-success-text: #{color.get('text')};
|
--color-success-text: #{color.get('text')};
|
||||||
--color-warning-border: #{color.get('palette/yellow/light/12%')};
|
--color-warning-border: #{color.get('palette/yellow/light/12%')};
|
||||||
--color-warning-bg: #{color.get('palette/yellow/base')};
|
--color-warning-bg: #{color.get('palette/yellow/base')};
|
||||||
--color-warning-text: #{color.get('elevation/3')};
|
--color-warning-text: #{color.get('elevation/3')};
|
||||||
--color-info-border: #{color.get('palette/blue/light/12%')};
|
--color-info-border: #{color.get('palette/blue/light/12%')};
|
||||||
--color-info-bg: #{color.get('elevation/3')};
|
--color-info-bg: #{color.get('elevation/3')};
|
||||||
--color-info-text: #{color.get('text')};
|
--color-info-text: #{color.get('text')};
|
||||||
|
|
||||||
// ┌───────┐
|
// ┌───────┐
|
||||||
// │ badge │
|
// │ badge │
|
||||||
// └───────┘
|
// └───────┘
|
||||||
--color-red-badge: #{color.get('palette/red/dark/20%')};
|
--color-red-badge: #{color.get('palette/red/dark/20%')};
|
||||||
--color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1);
|
--color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, 0.1);
|
||||||
--color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2);
|
--color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, 0.2);
|
||||||
|
|
||||||
--color-green-badge: #{color.get('palette/green/base')};
|
--color-green-badge: #{color.get('palette/green/base')};
|
||||||
--color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1);
|
--color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.1);
|
||||||
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .2);
|
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.2);
|
||||||
|
|
||||||
--color-yellow-badge: #{color.get('palette/yellow/dark/10%')};
|
--color-yellow-badge: #{color.get('palette/yellow/dark/10%')};
|
||||||
--color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1);
|
--color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, 0.1);
|
||||||
--color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2);
|
--color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, 0.2);
|
||||||
|
|
||||||
--color-orange-badge: #{color.get('palette/orange/dark/10%')};
|
--color-orange-badge: #{color.get('palette/orange/dark/10%')};
|
||||||
--color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1);
|
--color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, 0.1);
|
||||||
--color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2);
|
--color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, 0.2);
|
||||||
|
|
||||||
// ┌──────────────┐
|
// ┌──────────────┐
|
||||||
// │ target-based │
|
// │ target-based │
|
||||||
// └──────────────┘
|
// └──────────────┘
|
||||||
|
|
||||||
// body colors
|
// body colors
|
||||||
--color-body: #{color.get('elevation/3')};
|
--color-body: #{color.get('elevation/3')};
|
||||||
--color-text-dark: #{color.get('text')};
|
--color-text-dark: #{color.get('text')};
|
||||||
--color-text: #{color.get('text')};
|
--color-text: #{color.get('text')};
|
||||||
--color-text-light: #{color.get('subtle')};
|
--color-text-light: #{color.get('subtle')};
|
||||||
--color-text-light-1: #{color.get('subtle')};
|
--color-text-light-1: #{color.get('subtle')};
|
||||||
--color-text-light-2: #{color.get('subtle')};
|
--color-text-light-2: #{color.get('subtle')};
|
||||||
--color-text-light-3: #{color.get('subtle')};
|
--color-text-light-3: #{color.get('subtle')};
|
||||||
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
|
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
|
||||||
--color-timeline: #{color.get('elevation/5')};
|
--color-timeline: #{color.get('elevation/5')};
|
||||||
--color-timeline-badge-fg: #{if($is-dark, var(--color-white), var.get('color-text'))};
|
--color-timeline-badge-fg: #{if($is-dark, var(--color-white), var.get('color-text'))};
|
||||||
|
|
||||||
// box
|
// box
|
||||||
--color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)};
|
--color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)};
|
||||||
--color-box-body: #{color.get('elevation/3')};
|
--color-box-body: #{color.get('elevation/3')};
|
||||||
--color-box-body-highlight: #{color.get('elevation/4')};
|
--color-box-body-highlight: #{color.get('elevation/4')};
|
||||||
|
|
||||||
// input
|
// input
|
||||||
--color-input-text: var(--color-text-dark);
|
--color-input-text: var(--color-text-dark);
|
||||||
--color-input-background: #{color.get('elevation/4')};
|
--color-input-background: #{color.get('elevation/4')};
|
||||||
--color-input-toggle-background: #{color.get('elevation/4')};
|
--color-input-toggle-background: #{color.get('elevation/4')};
|
||||||
--color-input-border: #{color.get('elevation/5')};
|
--color-input-border: #{color.get('elevation/5')};
|
||||||
--color-input-border-hover: #{color.get('elevation/6')};
|
--color-input-border-hover: #{color.get('elevation/6')};
|
||||||
|
|
||||||
// light
|
// light
|
||||||
--color-light: #00001728;
|
--color-light: #00001728;
|
||||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
--color-light-mimic-enabled: rgba(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
||||||
|
);
|
||||||
--color-light-border: #{color.get('elevation/6')};
|
--color-light-border: #{color.get('elevation/6')};
|
||||||
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
||||||
--color-hover-opaque: #{color.get('elevation/6', 'rgb')};
|
--color-hover-opaque: #{color.get('elevation/6', 'rgb')};
|
||||||
@ -315,10 +359,18 @@
|
|||||||
--color-markup-code-inline: #{color.get('elevation/4')};
|
--color-markup-code-inline: #{color.get('elevation/4')};
|
||||||
--color-button: #{color.get('elevation/4')};
|
--color-button: #{color.get('elevation/4')};
|
||||||
--color-code-bg: #{color.get('elevation/3')};
|
--color-code-bg: #{color.get('elevation/3')};
|
||||||
--color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))};
|
--color-shadow: #{if(
|
||||||
|
$is-dark,
|
||||||
|
rgba(#{color.get('elevation/1', 'rgb')}, 0.5),
|
||||||
|
rgba(#{color.get('elevation/6', 'rgb')}, 0.5)
|
||||||
|
)};
|
||||||
--color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};
|
--color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};
|
||||||
|
|
||||||
--color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))};
|
--color-shadow-rgb: #{if(
|
||||||
|
$is-dark,
|
||||||
|
color.get('elevation/1', 'rgb'),
|
||||||
|
color.get('elevation/6', 'rgb')
|
||||||
|
)};
|
||||||
|
|
||||||
--color-secondary-bg: #{color.get('elevation/4')};
|
--color-secondary-bg: #{color.get('elevation/4')};
|
||||||
--color-expand-button: #{color.get('elevation/6')};
|
--color-expand-button: #{color.get('elevation/6')};
|
||||||
@ -326,19 +378,29 @@
|
|||||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||||
--color-project-column-bg: #{color.get('elevation/1')};
|
--color-project-column-bg: #{color.get('elevation/1')};
|
||||||
--color-caret: var(--color-text);
|
--color-caret: var(--color-text);
|
||||||
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
|
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.1);
|
||||||
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
|
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.2);
|
||||||
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
|
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.05);
|
||||||
--color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
|
--color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
|
||||||
--color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
|
--color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
|
||||||
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
|
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
|
||||||
|
|
||||||
// navbar
|
// navbar
|
||||||
--color-nav-bg: #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
|
--color-nav-bg: #{color.get(
|
||||||
--color-nav-hover-bg: #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))};
|
'navbar/bg',
|
||||||
--color-nav-text: #{color.get('navbar/fg', $default: var(--color-text))};
|
$default: if($is-dark, color.get('elevation/1'), color.get('elevation/4'))
|
||||||
--color-secondary-nav-bg: #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
|
)};
|
||||||
--color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))};
|
--color-nav-hover-bg: #{color.get(
|
||||||
|
'navbar/hover',
|
||||||
|
$default: if($is-dark, color.get('elevation/5'), color.get('elevation/5'))
|
||||||
|
)};
|
||||||
|
--color-nav-text: #{color.get('navbar/fg', $default: var(--color-text))};
|
||||||
|
--color-secondary-nav-bg: #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
|
||||||
|
--color-secondary-nav-hover-bg: #{if(
|
||||||
|
$is-dark,
|
||||||
|
color.get('elevation/4'),
|
||||||
|
color.get('elevation/5')
|
||||||
|
)};
|
||||||
|
|
||||||
// label
|
// label
|
||||||
--color-label-text: var(--color-text);
|
--color-label-text: var(--color-text);
|
||||||
@ -389,26 +451,26 @@
|
|||||||
|
|
||||||
// // In dark mode, invert emojis that are hard to read otherwise
|
// // In dark mode, invert emojis that are hard to read otherwise
|
||||||
@if $is-dark {
|
@if $is-dark {
|
||||||
.emoji[aria-label="check mark"],
|
.emoji[aria-label='check mark'],
|
||||||
.emoji[aria-label="currency exchange"],
|
.emoji[aria-label='currency exchange'],
|
||||||
.emoji[aria-label="TOP arrow"],
|
.emoji[aria-label='TOP arrow'],
|
||||||
.emoji[aria-label="END arrow"],
|
.emoji[aria-label='END arrow'],
|
||||||
.emoji[aria-label="ON! arrow"],
|
.emoji[aria-label='ON! arrow'],
|
||||||
.emoji[aria-label="SOON arrow"],
|
.emoji[aria-label='SOON arrow'],
|
||||||
.emoji[aria-label="heavy dollar sign"],
|
.emoji[aria-label='heavy dollar sign'],
|
||||||
.emoji[aria-label="copyright"],
|
.emoji[aria-label='copyright'],
|
||||||
.emoji[aria-label="registered"],
|
.emoji[aria-label='registered'],
|
||||||
.emoji[aria-label="trade mark"],
|
.emoji[aria-label='trade mark'],
|
||||||
.emoji[aria-label="multiply"],
|
.emoji[aria-label='multiply'],
|
||||||
.emoji[aria-label="plus"],
|
.emoji[aria-label='plus'],
|
||||||
.emoji[aria-label="minus"],
|
.emoji[aria-label='minus'],
|
||||||
.emoji[aria-label="divide"],
|
.emoji[aria-label='divide'],
|
||||||
.emoji[aria-label="curly loop"],
|
.emoji[aria-label='curly loop'],
|
||||||
.emoji[aria-label="double curly loop"],
|
.emoji[aria-label='double curly loop'],
|
||||||
.emoji[aria-label="wavy dash"],
|
.emoji[aria-label='wavy dash'],
|
||||||
.emoji[aria-label="paw prints"],
|
.emoji[aria-label='paw prints'],
|
||||||
.emoji[aria-label="musical note"],
|
.emoji[aria-label='musical note'],
|
||||||
.emoji[aria-label="musical notes"] {
|
.emoji[aria-label='musical notes'] {
|
||||||
filter: invert(100%) hue-rotate(180deg);
|
filter: invert(100%) hue-rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@forward './base';
|
@forward './base';
|
||||||
@forward './colors';
|
@forward './colors';
|
||||||
|
|||||||
@ -16,7 +16,7 @@ function exit(err) {
|
|||||||
if (err) {
|
if (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
} else {
|
} else {
|
||||||
console.log('')
|
console.log('');
|
||||||
logger.info('Build completed successfully');
|
logger.info('Build completed successfully');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { optimizeCss } from "./tasks/optimize-css.js";
|
import { optimizeCss } from './tasks/optimize-css.js';
|
||||||
import { cwd } from 'process';
|
import { cwd } from 'process';
|
||||||
import { join } from 'path';
|
import { join } from 'path';
|
||||||
|
|
||||||
@ -8,9 +8,10 @@ const distPath = join(cwd(), 'dist');
|
|||||||
// useful to check issues with the css files optimization
|
// useful to check issues with the css files optimization
|
||||||
// (in order to use this script, you need to first build the project removing the
|
// (in order to use this script, you need to first build the project removing the
|
||||||
// optimization step from the build.js file)
|
// optimization step from the build.js file)
|
||||||
optimizeCss(distPath, false).then(() => {
|
optimizeCss(distPath, false)
|
||||||
console.log('Optimization completed');
|
.then(() => {
|
||||||
}).catch((err) => {
|
console.log('Optimization completed');
|
||||||
console.error(err);
|
})
|
||||||
});
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
|
|||||||
@ -30,12 +30,6 @@ const watcher = watch([`${src}/**/*`], {
|
|||||||
ignoreInitial: true,
|
ignoreInitial: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
watcher.on('change', (file) => debouncer.add(
|
watcher.on('change', (file) =>
|
||||||
deploy,
|
debouncer.add(deploy, srcPath, distPath, serverPath, serviceName, file, true)
|
||||||
srcPath,
|
);
|
||||||
distPath,
|
|
||||||
serverPath,
|
|
||||||
serviceName,
|
|
||||||
file,
|
|
||||||
true
|
|
||||||
));
|
|
||||||
|
|||||||
@ -4,22 +4,29 @@ import { buildFonts } from './fonts.js';
|
|||||||
import { buildTemplates } from './templates.js';
|
import { buildTemplates } from './templates.js';
|
||||||
import { copyTo } from './copy-to.js';
|
import { copyTo } from './copy-to.js';
|
||||||
import { restartService } from './restart-service.js';
|
import { restartService } from './restart-service.js';
|
||||||
import { extname } from 'path';
|
import { extname } from 'path';
|
||||||
import browsersync from 'browser-sync';
|
import browsersync from 'browser-sync';
|
||||||
import { optimizeCss } from './optimize-css.js';
|
import { optimizeCss } from './optimize-css.js';
|
||||||
|
|
||||||
const logger = new Logger('deploy', 'info', 'brightMagenta');
|
const logger = new Logger('deploy', 'info', 'brightMagenta');
|
||||||
|
|
||||||
const sync = browsersync.create('lugit')
|
const sync = browsersync.create('lugit');
|
||||||
|
|
||||||
export async function deploy(srcPath, distPath, serverPath, serviceName, file = null, live = false) {
|
export async function deploy(
|
||||||
|
srcPath,
|
||||||
|
distPath,
|
||||||
|
serverPath,
|
||||||
|
serviceName,
|
||||||
|
file = null,
|
||||||
|
live = false
|
||||||
|
) {
|
||||||
logger.info('Deploying...');
|
logger.info('Deploying...');
|
||||||
|
|
||||||
if(live && !sync.active) {
|
if (live && !sync.active) {
|
||||||
sync.init({
|
sync.init({
|
||||||
proxy: 'http://lugit.local',
|
proxy: 'http://lugit.local',
|
||||||
port: 8080,
|
port: 8080,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let shouldRestart = true;
|
let shouldRestart = true;
|
||||||
@ -34,10 +41,10 @@ export async function deploy(srcPath, distPath, serverPath, serviceName, file =
|
|||||||
await buildFonts(srcPath, distPath);
|
await buildFonts(srcPath, distPath);
|
||||||
// await buildImg(srcPath, distPath);
|
// await buildImg(srcPath, distPath);
|
||||||
await buildTemplates(srcPath, distPath);
|
await buildTemplates(srcPath, distPath);
|
||||||
await copyTo(distPath, serverPath);
|
await copyTo(distPath, serverPath);
|
||||||
shouldRestart && await restartService(serviceName);
|
shouldRestart && (await restartService(serviceName));
|
||||||
|
|
||||||
if(!shouldRestart && live) {
|
if (!shouldRestart && live) {
|
||||||
sync.reload();
|
sync.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,9 @@ export async function buildFonts(srcHome, distHome) {
|
|||||||
|
|
||||||
// if fontsSrcPath does not exist, return
|
// if fontsSrcPath does not exist, return
|
||||||
if (!existsSync(fontsSrcPath)) {
|
if (!existsSync(fontsSrcPath)) {
|
||||||
logger.warn(`No fonts found in ${fontsSrcPath} (there's not even a folder there)`);
|
logger.warn(
|
||||||
|
`No fonts found in ${fontsSrcPath} (there's not even a folder there)`
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@ export async function buildImg(srcHome, distHome) {
|
|||||||
mkdirSync(imgDestPath, { recursive: true });
|
mkdirSync(imgDestPath, { recursive: true });
|
||||||
|
|
||||||
const files = readFiles(imgSrcPath, ['.svg', '.png', '.jpg', '.webp', '.gif']);
|
const files = readFiles(imgSrcPath, ['.svg', '.png', '.jpg', '.webp', '.gif']);
|
||||||
|
|
||||||
// Separate logo.svg and favicon.svg from the rest
|
// Separate logo.svg and favicon.svg from the rest
|
||||||
files.forEach((file) => {
|
files.forEach((file) => {
|
||||||
if (file === 'logo.svg') {
|
if (file === 'logo.svg') {
|
||||||
@ -34,8 +34,8 @@ export async function buildImg(srcHome, distHome) {
|
|||||||
await Promise.all([
|
await Promise.all([
|
||||||
processLogos(images.logos, imgDestPath),
|
processLogos(images.logos, imgDestPath),
|
||||||
processOthers(images.others, imgDestPath),
|
processOthers(images.others, imgDestPath),
|
||||||
])
|
]);
|
||||||
|
|
||||||
logger.info('Images build has finished');
|
logger.info('Images build has finished');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -53,7 +53,10 @@ async function processLogos(logos, distHome) {
|
|||||||
promises.push(
|
promises.push(
|
||||||
generate(svg, join(distHome, 'favicon.svg'), { size: 32 }),
|
generate(svg, join(distHome, 'favicon.svg'), { size: 32 }),
|
||||||
generate(svg, join(distHome, 'favicon.png'), { size: 180 }),
|
generate(svg, join(distHome, 'favicon.png'), { size: 180 }),
|
||||||
generate(svg, join(distHome, 'apple-touch-icon.png'), { size: 180, bg: true }),
|
generate(svg, join(distHome, 'apple-touch-icon.png'), {
|
||||||
|
size: 180,
|
||||||
|
bg: true,
|
||||||
|
}),
|
||||||
generate(svg, join(distHome, 'avatar_default.png'), { size: 200, bg: true })
|
generate(svg, join(distHome, 'avatar_default.png'), { size: 200, bg: true })
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -88,8 +91,7 @@ async function generate(svg, path, { size, bg }) {
|
|||||||
const { objects, options } = await loadSvg(svg);
|
const { objects, options } = await loadSvg(svg);
|
||||||
const canvas = new fabric.Canvas();
|
const canvas = new fabric.Canvas();
|
||||||
|
|
||||||
|
const newWidth = (size * options.width) / options.height;
|
||||||
const newWidth = size * options.width / options.height;
|
|
||||||
canvas.setDimensions({ width: newWidth, height: size });
|
canvas.setDimensions({ width: newWidth, height: size });
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
ctx.scale(
|
ctx.scale(
|
||||||
@ -126,4 +128,4 @@ async function processOthers(others, distHome) {
|
|||||||
for (const img of others) {
|
for (const img of others) {
|
||||||
copyFileSync(img, join(distHome, basename(img)));
|
copyFileSync(img, join(distHome, basename(img)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,7 +25,7 @@ export async function optimizeCss(distPath, replace = true) {
|
|||||||
|
|
||||||
for (const file of cssFiles) {
|
for (const file of cssFiles) {
|
||||||
logger.info(`Sanitizing ${file.name} css file`);
|
logger.info(`Sanitizing ${file.name} css file`);
|
||||||
let usedCssVariables = [];
|
let usedCssVariables = [];
|
||||||
|
|
||||||
// read the css file
|
// read the css file
|
||||||
const cssContent = readFileSync(file.path, { encoding: 'utf-8' });
|
const cssContent = readFileSync(file.path, { encoding: 'utf-8' });
|
||||||
@ -45,8 +45,12 @@ export async function optimizeCss(distPath, replace = true) {
|
|||||||
// could also be that the variable is assigned to another variable
|
// could also be that the variable is assigned to another variable
|
||||||
if (node.type === 'Declaration' && node.property.startsWith('--')) {
|
if (node.type === 'Declaration' && node.property.startsWith('--')) {
|
||||||
// check if its assigned to another variable
|
// check if its assigned to another variable
|
||||||
if(node.property.startsWith('--')) {
|
if (node.property.startsWith('--')) {
|
||||||
if (node.value && node.value.type === 'Function' && node.value.name === 'var') {
|
if (
|
||||||
|
node.value &&
|
||||||
|
node.value.type === 'Function' &&
|
||||||
|
node.value.name === 'var'
|
||||||
|
) {
|
||||||
for (const child of node.value.children) {
|
for (const child of node.value.children) {
|
||||||
if (child.type === 'Identifier') {
|
if (child.type === 'Identifier') {
|
||||||
if (!usedCssVariables.includes(child.name)) {
|
if (!usedCssVariables.includes(child.name)) {
|
||||||
@ -54,11 +58,15 @@ export async function optimizeCss(distPath, replace = true) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (node.value && node.value.type === 'Raw' && node.value.value) {
|
} else if (
|
||||||
|
node.value &&
|
||||||
|
node.value.type === 'Raw' &&
|
||||||
|
node.value.value
|
||||||
|
) {
|
||||||
const val = node.value.value.trimStart(); // var(--v-primary)
|
const val = node.value.value.trimStart(); // var(--v-primary)
|
||||||
|
|
||||||
// if starts with var(, then its assigned to another variable or many variables, get everything that's inside
|
// if starts with var(, then its assigned to another variable or many variables, get everything that's inside
|
||||||
// var(...) using regex capturing
|
// var(...) using regex capturing
|
||||||
|
|
||||||
// get all varname groups
|
// get all varname groups
|
||||||
const matches = val.matchAll(/var\((?<varname>[^),\s]+)/g);
|
const matches = val.matchAll(/var\((?<varname>[^),\s]+)/g);
|
||||||
@ -72,7 +80,7 @@ export async function optimizeCss(distPath, replace = true) {
|
|||||||
usedCssVariables.push(varname);
|
usedCssVariables.push(varname);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -18,24 +18,21 @@ async function buildThemes(srcPath, distPath) {
|
|||||||
quietDeps: true,
|
quietDeps: true,
|
||||||
logger: {
|
logger: {
|
||||||
debug: logger.simpleDebug.bind(logger),
|
debug: logger.simpleDebug.bind(logger),
|
||||||
info: logger.simpleInfo.bind(logger),
|
info: logger.simpleInfo.bind(logger),
|
||||||
warn: logger.simpleWarn.bind(logger),
|
warn: logger.simpleWarn.bind(logger),
|
||||||
error: logger.simpleError.bind(logger),
|
error: logger.simpleError.bind(logger),
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
logger.debug(`Writing ${theme.name} theme to disk`);
|
logger.debug(`Writing ${theme.name} theme to disk`);
|
||||||
|
|
||||||
writeFileSync(
|
writeFileSync(join(distPath, cssDistPath, `theme-${theme.name}.css`), result.css);
|
||||||
join(distPath, cssDistPath, `theme-${theme.name}.css`),
|
|
||||||
result.css
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function buildScss(srcPath, distPath) {
|
export async function buildScss(srcPath, distPath) {
|
||||||
logger.info('SCSS build has started');
|
logger.info('SCSS build has started');
|
||||||
|
|
||||||
mkdirSync(join(distPath, cssDistPath), { recursive: true });
|
mkdirSync(join(distPath, cssDistPath), { recursive: true });
|
||||||
|
|
||||||
await buildThemes(srcPath, distPath);
|
await buildThemes(srcPath, distPath);
|
||||||
@ -44,12 +41,12 @@ export async function buildScss(srcPath, distPath) {
|
|||||||
|
|
||||||
function getScssFiles(srcHome, path) {
|
function getScssFiles(srcHome, path) {
|
||||||
try {
|
try {
|
||||||
return readdirSync(join(srcHome, path)).filter(
|
return readdirSync(join(srcHome, path))
|
||||||
(fn) => fn.endsWith('.scss') && !fn.startsWith('_')
|
.filter((fn) => fn.endsWith('.scss') && !fn.startsWith('_'))
|
||||||
).map((file) => ({
|
.map((file) => ({
|
||||||
name: file.replace('.scss', ''),
|
name: file.replace('.scss', ''),
|
||||||
path: join(srcHome, path, file),
|
path: join(srcHome, path, file),
|
||||||
}))
|
}));
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -122,7 +122,6 @@ export async function sequence(tasks) {
|
|||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async function tasksRunner(tasks, abort) {
|
async function tasksRunner(tasks, abort) {
|
||||||
let result = null;
|
let result = null;
|
||||||
for (const task of tasks) {
|
for (const task of tasks) {
|
||||||
@ -144,19 +143,16 @@ export async function sequenceStream(tasks) {
|
|||||||
console.log('sequenceStream aborted');
|
console.log('sequenceStream aborted');
|
||||||
});
|
});
|
||||||
|
|
||||||
return [
|
return [tasksRunner(tasks, abort), abort];
|
||||||
tasksRunner(tasks, abort),
|
|
||||||
abort,
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getArg = (flag, def) => {
|
export const getArg = (flag, def) => {
|
||||||
const args = process.argv.slice(2);
|
const args = process.argv.slice(2);
|
||||||
const flagIndex = args.findIndex(arg => arg === flag);
|
const flagIndex = args.findIndex((arg) => arg === flag);
|
||||||
|
|
||||||
if (flagIndex !== -1 && flagIndex + 1 < args.length) {
|
if (flagIndex !== -1 && flagIndex + 1 < args.length) {
|
||||||
return args[flagIndex + 1];
|
return args[flagIndex + 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
return def || null;
|
return def || null;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -22,7 +22,7 @@ const ANSI_COLORS = {
|
|||||||
brightBlue: '\x1b[94m',
|
brightBlue: '\x1b[94m',
|
||||||
brightMagenta: '\x1b[95m',
|
brightMagenta: '\x1b[95m',
|
||||||
brightCyan: '\x1b[96m',
|
brightCyan: '\x1b[96m',
|
||||||
pink: '\x1b[38;2;255;182;193m'
|
pink: '\x1b[38;2;255;182;193m',
|
||||||
};
|
};
|
||||||
|
|
||||||
export class Logger {
|
export class Logger {
|
||||||
@ -55,7 +55,6 @@ export class Logger {
|
|||||||
warn(...args) {
|
warn(...args) {
|
||||||
if (!this.#canLog('warn')) return;
|
if (!this.#canLog('warn')) return;
|
||||||
this.log('WARN', false, ...args);
|
this.log('WARN', false, ...args);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
error(...args) {
|
error(...args) {
|
||||||
@ -91,7 +90,6 @@ export class Logger {
|
|||||||
simpleWarn(...args) {
|
simpleWarn(...args) {
|
||||||
if (!this.#canLog('warn')) return;
|
if (!this.#canLog('warn')) return;
|
||||||
this.log('WARN', true, ...args);
|
this.log('WARN', true, ...args);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
simpleError(...args) {
|
simpleError(...args) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user