style: prettier
This commit is contained in:
parent
a42fbb4fc6
commit
c490d38d72
GPG Key ID:
047886915281DD2A
@ -8,6 +8,5 @@
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
}
|
||||
"rules": {}
|
||||
}
|
||||
|
||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@ -2,7 +2,7 @@ name: Release
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "v*"
|
||||
- 'v*'
|
||||
|
||||
jobs:
|
||||
release:
|
||||
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -33,7 +33,7 @@
|
||||
"**/**/test": true,
|
||||
"**/**/tests": true,
|
||||
"**/**/*.specs.ts": true,
|
||||
"**/**/*.specs.js": true,
|
||||
"**/**/*.specs.js": true
|
||||
},
|
||||
"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
|
||||
|
||||
### Fixes
|
||||
|
||||
- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
|
||||
|
||||
## [0.2.0] - 2024-10-19
|
||||
|
||||
### Added
|
||||
|
||||
- Pinned the project to the Gitea 1.22.3 version.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme
|
||||
</h1>
|
||||
|
||||
*Theme for `zeldon's` gitea server.*
|
||||
_Theme for `zeldon's` gitea server._
|
||||
|
||||
## Preview
|
||||
|
||||
@ -33,12 +33,14 @@ DEFAULT_THEME=dark # optional
|
||||
## Development
|
||||
|
||||
### build
|
||||
|
||||
```bash
|
||||
$ npm install
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
### serve
|
||||
|
||||
```bash
|
||||
$ npm run serve -- --server path/to/gitea/custom
|
||||
|
||||
|
||||
@ -33,11 +33,16 @@
|
||||
'85%': light-change($color, -85%),
|
||||
'90%': light-change($color, -90%),
|
||||
'95%': light-change($color, -95%),
|
||||
'100%': light-change($color, -100%)
|
||||
'100%': light-change($color, -100%),
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
$set: map.merge(
|
||||
(
|
||||
base: $color,
|
||||
),
|
||||
$set
|
||||
);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
@ -67,11 +72,16 @@
|
||||
'85%': light-change($color, 85%),
|
||||
'90%': light-change($color, 90%),
|
||||
'95%': light-change($color, 95%),
|
||||
'100%': light-change($color, 100%)
|
||||
'100%': light-change($color, 100%),
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
$set: map.merge(
|
||||
(
|
||||
base: $color,
|
||||
),
|
||||
$set
|
||||
);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
@ -81,18 +91,38 @@
|
||||
$set: ();
|
||||
|
||||
@if $light {
|
||||
$set: map.merge($set, (light: color-variants-light($color)));
|
||||
$set: map.merge(
|
||||
$set,
|
||||
(
|
||||
light: color-variants-light($color),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@if $dark {
|
||||
$set: map.merge($set, (dark: color-variants-dark($color)));
|
||||
$set: map.merge(
|
||||
$set,
|
||||
(
|
||||
dark: color-variants-dark($color),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@if $base {
|
||||
@if $override-base-with {
|
||||
$set: map.merge($set, (base: $override-base-with));
|
||||
$set: map.merge(
|
||||
$set,
|
||||
(
|
||||
base: $override-base-with,
|
||||
)
|
||||
);
|
||||
} @else {
|
||||
$set: map.merge($set, (base: $color));
|
||||
$set: map.merge(
|
||||
$set,
|
||||
(
|
||||
base: $color,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,17 +1,26 @@
|
||||
$variables: (
|
||||
'font-size': (
|
||||
'xs': .714rem,
|
||||
'sm': .857rem,
|
||||
'md': 1rem, // 14
|
||||
'lg': 1.143rem, // 16
|
||||
'xl': 1.286rem, // 18
|
||||
'2xl': 1.429rem, // 20
|
||||
'3xl': 1.714rem, // 24
|
||||
'4xl': 2rem, // 28
|
||||
'xs': 0.714rem,
|
||||
'sm': 0.857rem,
|
||||
'md': 1rem,
|
||||
// 14
|
||||
'lg': 1.143rem,
|
||||
// 16
|
||||
'xl': 1.286rem,
|
||||
// 18
|
||||
'2xl': 1.429rem,
|
||||
// 20
|
||||
'3xl': 1.714rem,
|
||||
// 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"',
|
||||
'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': (
|
||||
'.25x': 4px,
|
||||
'.375x': 6px,
|
||||
@ -32,5 +41,5 @@ $variables: (
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
),
|
||||
);
|
||||
@ -1,2 +1,2 @@
|
||||
@import "./theme-light.css" (prefers-color-scheme: light);
|
||||
@import "./theme-dark.css" (prefers-color-scheme: dark);
|
||||
@import './theme-light.css' (prefers-color-scheme: light);
|
||||
@import './theme-dark.css' (prefers-color-scheme: dark);
|
||||
|
||||
@ -39,18 +39,21 @@ $colors: (
|
||||
'10': hsl(213, 12%, 65%),
|
||||
'11': hsl(213, 12%, 75%),
|
||||
'12': hsl(213, 12%, 85%),
|
||||
)
|
||||
),
|
||||
);
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: vars.$variables),
|
||||
$theme: (
|
||||
colors: $colors,
|
||||
variables: vars.$variables,
|
||||
),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
fg-var-name: 'text',
|
||||
bg-var-name: 'elevation/1',
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@include theme.make-theme($is-dark);
|
||||
@ -10,47 +10,76 @@ $colors: (
|
||||
primary: c.variants($brand),
|
||||
secondary: c.variants(#bcc0cc),
|
||||
text: #484b60,
|
||||
subtle: #656c90, // same as elevation/10
|
||||
palette: (
|
||||
'red': c.variants(#d20f39), // red
|
||||
'orange': c.variants(#fe640b), // peach
|
||||
'yellow': c.variants(#df8e1d), // yellow
|
||||
subtle: #656c90,
|
||||
// same as elevation/10
|
||||
palette:
|
||||
(
|
||||
'red': c.variants(#d20f39),
|
||||
// red
|
||||
'orange': c.variants(#fe640b),
|
||||
// peach
|
||||
'yellow': c.variants(#df8e1d),
|
||||
// yellow
|
||||
'olive': c.variants(#e2f095),
|
||||
'green': c.variants(#34ac56), // green
|
||||
'teal': c.variants(#179299), // 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
|
||||
'green': c.variants(#34ac56),
|
||||
// green
|
||||
'teal': c.variants(#179299),
|
||||
// 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: (
|
||||
'1': #fcfcfd, // elevation/1
|
||||
'2': #f6f7f9, // elevation/2
|
||||
'3': #eff1f5, // elevation/3
|
||||
'4': #e6e9ef, // elevation/4
|
||||
'5': #d7dce6, // elevation/5
|
||||
'6': #bcc0cc, // 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
|
||||
)
|
||||
'1': #fcfcfd,
|
||||
// elevation/1
|
||||
'2': #f6f7f9,
|
||||
// elevation/2
|
||||
'3': #eff1f5,
|
||||
// elevation/3
|
||||
'4': #e6e9ef,
|
||||
// elevation/4
|
||||
'5': #d7dce6,
|
||||
// elevation/5
|
||||
'6': #bcc0cc,
|
||||
// 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)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: vars.$variables),
|
||||
$theme: (
|
||||
colors: $colors,
|
||||
variables: vars.$variables,
|
||||
),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
fg-var-name: 'text',
|
||||
bg-var-name: 'elevation/1',
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@include theme.make-theme($is-dark);
|
||||
@ -1,5 +1,7 @@
|
||||
@mixin avatar {
|
||||
img.ui.avatar, .ui.avatar img, .ui.avatar svg {
|
||||
img.ui.avatar,
|
||||
.ui.avatar img,
|
||||
.ui.avatar svg {
|
||||
&:not(.org-avatar) {
|
||||
border-radius: 50% !important;
|
||||
object-fit: fill;
|
||||
|
||||
@ -20,16 +20,22 @@
|
||||
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-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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@ -39,14 +45,17 @@
|
||||
.content {
|
||||
background-color: var(--color-box-body);
|
||||
|
||||
>.comment-header, >.ui.segment {
|
||||
&:before, &:after {
|
||||
> .comment-header,
|
||||
> .ui.segment {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.text {
|
||||
|
||||
@ -39,7 +39,8 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
.EasyMDEContainer { // legacy editor
|
||||
.EasyMDEContainer {
|
||||
// legacy editor
|
||||
border: none !important;
|
||||
|
||||
.editor-toolbar {
|
||||
@ -47,7 +48,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
markdown-toolbar, .EasyMDEContainer .editor-toolbar {
|
||||
markdown-toolbar,
|
||||
.EasyMDEContainer .editor-toolbar {
|
||||
padding: 0 10px !important;
|
||||
|
||||
.markdown-toolbar-group {
|
||||
@ -67,12 +69,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-toolbar-button, button {
|
||||
.markdown-toolbar-button,
|
||||
button {
|
||||
line-height: 0;
|
||||
display: inline-block;
|
||||
color: var(--color-text-light-2) !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;
|
||||
height: auto;
|
||||
min-width: fit-content;
|
||||
@ -87,7 +90,7 @@
|
||||
}
|
||||
|
||||
// if aria-checked is true
|
||||
&[aria-checked="true"] {
|
||||
&[aria-checked='true'] {
|
||||
background-color: color.get('elevation/4');
|
||||
}
|
||||
}
|
||||
@ -99,7 +102,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
||||
textarea,
|
||||
.CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
padding: var.get('measure/1x') var.get('measure/1x') !important;
|
||||
@ -127,12 +131,15 @@
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.ui.tab.markup[data-tab-panel=markdown-previewer] {
|
||||
.ui.tab.markup[data-tab-panel='markdown-previewer'] {
|
||||
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;
|
||||
border: none !important;
|
||||
|
||||
|
||||
@ -35,7 +35,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
|
||||
@ -8,4 +8,3 @@
|
||||
@include forms.tabular-menu;
|
||||
@include forms.input;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
@mixin label-signed {
|
||||
.label.isSigned {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
margin: 0px .25em !important;
|
||||
margin: 0px 0.25em !important;
|
||||
padding: 0 !important;
|
||||
display: inline-flex !important;
|
||||
gap: 0px !important;
|
||||
@ -14,7 +14,10 @@
|
||||
--color-label-bg: none !important;
|
||||
--color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !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-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
--color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
|
||||
@mixin markup {
|
||||
.markup {
|
||||
.task-list-item input[type=checkbox] {
|
||||
margin: 0 .5em .25em -1.4em;
|
||||
.task-list-item input[type='checkbox'] {
|
||||
margin: 0 0.5em 0.25em -1.4em;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
input[type='checkbox'] {
|
||||
--border-radius: #{var.get('measure/.25x')};
|
||||
width: var.get('measure/1x');
|
||||
height: var.get('measure/1x');
|
||||
@ -22,7 +22,8 @@
|
||||
--color-text: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
&:not([disabled]):hover, &:not([disabled]):active {
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active {
|
||||
border-color: var(--color-secondary);
|
||||
background-color: color.get('elevation/6');
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
background-color: transparent !important;
|
||||
font-weight: normal;
|
||||
|
||||
button, .button {
|
||||
button,
|
||||
.button {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
border-radius: var(--border-radius);
|
||||
@ -23,7 +24,8 @@
|
||||
}
|
||||
|
||||
&.labeled {
|
||||
button, .button {
|
||||
button,
|
||||
.button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@ -37,7 +39,6 @@
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
}
|
||||
@ -50,19 +51,21 @@
|
||||
}
|
||||
|
||||
@mixin gitea-button {
|
||||
.ui.icon.buttons .button, .ui.icon.button:not(.compact) {
|
||||
.ui.icon.buttons .button,
|
||||
.ui.icon.button:not(.compact) {
|
||||
// padding: 50px;
|
||||
}
|
||||
|
||||
.code-comment-buttons-buttons {
|
||||
button:not(.labeled):not(.icon) {
|
||||
padding: .78571429em !important;
|
||||
padding: 0.78571429em !important;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons group
|
||||
.ui.buttons {
|
||||
&.icon .button, &.icon:not(.compact) {
|
||||
&.icon .button,
|
||||
&.icon:not(.compact) {
|
||||
padding: 50px 50px;
|
||||
}
|
||||
|
||||
@ -90,7 +93,7 @@
|
||||
|
||||
.ui.button {
|
||||
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');
|
||||
font-size: var.get('font-size/md');
|
||||
line-height: 20px;
|
||||
@ -104,7 +107,8 @@
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&.red, &.red.basic {
|
||||
&.red,
|
||||
&.red.basic {
|
||||
border-color: var(--color-secondary);
|
||||
background: var(--color-button);
|
||||
color: var(--color-red);
|
||||
@ -119,7 +123,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.primary, &.red, &.basic {
|
||||
&.primary,
|
||||
&.red,
|
||||
&.basic {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
.ui.form input:not([type])#{$state},
|
||||
.ui.form select#{$state},
|
||||
.ui.form textarea#{$state},
|
||||
.ui.form input[type=date]#{$state},
|
||||
.ui.form input[type=datetime-local]#{$state},
|
||||
.ui.form input[type=email]#{$state},
|
||||
.ui.form input[type=file]#{$state},
|
||||
.ui.form input[type=number]#{$state},
|
||||
.ui.form input[type=password]#{$state},
|
||||
.ui.form input[type=search]#{$state},
|
||||
.ui.form input[type=tel]#{$state},
|
||||
.ui.form input[type=text]#{$state},
|
||||
.ui.form input[type=time]#{$state},
|
||||
.ui.form input[type=url]#{$state},
|
||||
.ui.form input[type='date']#{$state},
|
||||
.ui.form input[type='datetime-local']#{$state},
|
||||
.ui.form input[type='email']#{$state},
|
||||
.ui.form input[type='file']#{$state},
|
||||
.ui.form input[type='number']#{$state},
|
||||
.ui.form input[type='password']#{$state},
|
||||
.ui.form input[type='search']#{$state},
|
||||
.ui.form input[type='tel']#{$state},
|
||||
.ui.form input[type='text']#{$state},
|
||||
.ui.form input[type='time']#{$state},
|
||||
.ui.form input[type='url']#{$state},
|
||||
.ui.selection.dropdown#{$state} {
|
||||
@content;
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
@include -all-inputs(':hover') {
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text)
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
@include -all-inputs(':focus') {
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -71,12 +71,12 @@
|
||||
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:hover,
|
||||
.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+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 + .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 + .button,
|
||||
.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:hover {
|
||||
border-left-color: var(--color-input-border);
|
||||
}
|
||||
|
||||
@ -88,17 +88,17 @@
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.form input:not([type]),
|
||||
.ui.form input[type=date],
|
||||
.ui.form input[type=datetime-local],
|
||||
.ui.form input[type=email],
|
||||
.ui.form input[type=number],
|
||||
.ui.form input[type=password],
|
||||
.ui.form input[type=search],
|
||||
.ui.form input[type=tel],
|
||||
.ui.form input[type=time],
|
||||
.ui.form input[type=text],
|
||||
.ui.form input[type=file],
|
||||
.ui.form input[type=url] {
|
||||
.ui.form input[type='date'],
|
||||
.ui.form input[type='datetime-local'],
|
||||
.ui.form input[type='email'],
|
||||
.ui.form input[type='number'],
|
||||
.ui.form input[type='password'],
|
||||
.ui.form input[type='search'],
|
||||
.ui.form input[type='tel'],
|
||||
.ui.form input[type='time'],
|
||||
.ui.form input[type='text'],
|
||||
.ui.form input[type='file'],
|
||||
.ui.form input[type='url'] {
|
||||
min-height: 2.71428571em;
|
||||
}
|
||||
|
||||
@ -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');
|
||||
margin: .14285714rem .28571429rem .14285714rem 0;
|
||||
margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > input.search {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui.checkbox label, .ui.radio.checkbox label {
|
||||
.ui.checkbox label,
|
||||
.ui.radio.checkbox label {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
@ -9,11 +9,16 @@
|
||||
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
&.hidden { opacity: 0 !important;}
|
||||
&.visible, &.show { opacity: 1 !important; }
|
||||
&.hidden {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
&.visible,
|
||||
&.show {
|
||||
opacity: 1 !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),
|
||||
0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !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-border: #{color.get('elevation/5')};
|
||||
|
||||
@ -72,7 +78,7 @@
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
content: "";
|
||||
content: '';
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -132,14 +138,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.upward.selection.visible, &.active.upward.selection {
|
||||
&.upward.selection.visible,
|
||||
&.active.upward.selection {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
border-bottom-left-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;
|
||||
}
|
||||
|
||||
@ -148,7 +158,8 @@
|
||||
--border-radius: #{var.get('measure/.5x')};
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
&:focus, &.active {
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: var(--color-secondary) !important;
|
||||
outline: 2px solid var(--color-accent);
|
||||
}
|
||||
@ -200,7 +211,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.item.active:hover, a.item.active:hover {
|
||||
.dropdown.item.active:hover,
|
||||
a.item.active:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
@ -208,7 +220,8 @@
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -22,79 +22,234 @@
|
||||
font: 14px var.get('code-font-family');
|
||||
}
|
||||
|
||||
.bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo
|
||||
.c { color: color.get($subtle); font-style: italic; } // Comment
|
||||
.c1 { color: color.get($subtle); font-style: italic; } // CommentSingle
|
||||
.ch { color: color.get($subtle); font-style: italic; } // CommentHashbang
|
||||
.cm { color: color.get($subtle); font-style: italic; } // CommentMultiline
|
||||
.cp { color: color.get($blue); } // CommentPreproc
|
||||
.cpf { color: color.get($blue); } // CommentPreprocFile
|
||||
.cs { color: color.get($subtle); } // CommentSpecial
|
||||
.dl { color: color.get($blue); } // LiteralStringDelimiter
|
||||
.fm {} // NameFunctionMagic
|
||||
.g {} // Generic
|
||||
.gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted
|
||||
.ge { font-style: italic; } // GenericEmph
|
||||
.gh { color: color.get($teal); } // GenericHeading
|
||||
.gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted
|
||||
.gl {} // GenericUnderline
|
||||
.go { color: color.get($orange); } // GenericOutput
|
||||
.gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt
|
||||
.gr { color: color.get($brown); } // GenericError
|
||||
.gs { font-weight: bold; } // GenericStrong
|
||||
.gt { color: color.get($brown); } // GenericTraceback
|
||||
.gu { color: color.get($teal); } // GenericSubheading
|
||||
.il { color: color.get($orange); } // 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
|
||||
.bp {
|
||||
color: color.get($orange);
|
||||
font-weight: 600;
|
||||
} // NameBuiltinPseudo
|
||||
.c {
|
||||
color: color.get($subtle);
|
||||
font-style: italic;
|
||||
} // Comment
|
||||
.c1 {
|
||||
color: color.get($subtle);
|
||||
font-style: italic;
|
||||
} // CommentSingle
|
||||
.ch {
|
||||
color: color.get($subtle);
|
||||
font-style: italic;
|
||||
} // CommentHashbang
|
||||
.cm {
|
||||
color: color.get($subtle);
|
||||
font-style: italic;
|
||||
} // CommentMultiline
|
||||
.cp {
|
||||
color: color.get($blue);
|
||||
} // CommentPreproc
|
||||
.cpf {
|
||||
color: color.get($blue);
|
||||
} // CommentPreprocFile
|
||||
.cs {
|
||||
color: color.get($subtle);
|
||||
} // CommentSpecial
|
||||
.dl {
|
||||
color: color.get($blue);
|
||||
} // LiteralStringDelimiter
|
||||
.fm {
|
||||
} // NameFunctionMagic
|
||||
.g {
|
||||
} // Generic
|
||||
.gd {
|
||||
color: color.get($blwh);
|
||||
background-color: rgba(#{color.get($red, 'rgb')}, 0.25);
|
||||
} // GenericDeleted
|
||||
.ge {
|
||||
font-style: italic;
|
||||
} // GenericEmph
|
||||
.gh {
|
||||
color: color.get($teal);
|
||||
} // GenericHeading
|
||||
.gi {
|
||||
color: color.get($blwh);
|
||||
background-color: rgba(#{color.get($green, 'rgb')}, 0.3);
|
||||
} // GenericInserted
|
||||
.gl {
|
||||
} // GenericUnderline
|
||||
.go {
|
||||
color: color.get($orange);
|
||||
} // GenericOutput
|
||||
.gp {
|
||||
color: color.get($subtle);
|
||||
font-weight: bold;
|
||||
} // GenericPrompt
|
||||
.gr {
|
||||
color: color.get($brown);
|
||||
} // GenericError
|
||||
.gs {
|
||||
font-weight: bold;
|
||||
} // GenericStrong
|
||||
.gt {
|
||||
color: color.get($brown);
|
||||
} // GenericTraceback
|
||||
.gu {
|
||||
color: color.get($teal);
|
||||
} // GenericSubheading
|
||||
.il {
|
||||
color: color.get($orange);
|
||||
} // 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-paper {
|
||||
.cm-property {
|
||||
color: color.get('text')
|
||||
color: color.get('text');
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
color: color.get('text')
|
||||
color: color.get('text');
|
||||
}
|
||||
|
||||
.cm-quote {
|
||||
color: color.get('palette/green/base')
|
||||
color: color.get('palette/green/base');
|
||||
}
|
||||
|
||||
.cm-keyword {
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: color.get('text')
|
||||
color: color.get('text');
|
||||
}
|
||||
|
||||
.cm-variable-2 {
|
||||
@ -41,15 +41,15 @@
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
color: color.get('elevation/6')
|
||||
color: color.get('elevation/6');
|
||||
}
|
||||
|
||||
.cm-string {
|
||||
color: color.get('palette/green/base')
|
||||
color: color.get('palette/green/base');
|
||||
}
|
||||
|
||||
.cm-string-2 {
|
||||
color: color.get('palette/green/base')
|
||||
color: color.get('palette/green/base');
|
||||
}
|
||||
|
||||
.cm-meta {
|
||||
@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
.cm-bracket {
|
||||
color: color.get('text')
|
||||
color: color.get('text');
|
||||
}
|
||||
|
||||
.cm-tag {
|
||||
|
||||
@ -22,27 +22,9 @@
|
||||
color: var(--color-text-dark-2) !important;
|
||||
}
|
||||
|
||||
.repository
|
||||
.diff-file-box
|
||||
.file-body.file-code
|
||||
table
|
||||
tbody
|
||||
tr.add-code:hover
|
||||
.lines-num,
|
||||
.repository
|
||||
.diff-file-box
|
||||
.file-body.file-code
|
||||
table
|
||||
tbody
|
||||
tr.del-code:hover
|
||||
.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 tr.add-code:hover .lines-num,
|
||||
.repository .diff-file-box .file-body.file-code table tbody tr.del-code:hover .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
|
||||
@ -55,30 +37,12 @@
|
||||
color: var(--color-text-dark) !important;
|
||||
}
|
||||
|
||||
.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 tr.same-code:hover .lines-num {
|
||||
color: var(--color-text-dark-2) !important;
|
||||
}
|
||||
|
||||
.repository
|
||||
.diff-file-box
|
||||
.file-body.file-code
|
||||
table
|
||||
tbody
|
||||
tr.same-code:hover
|
||||
.lines-code,
|
||||
.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 tr.same-code:hover .lines-code,
|
||||
.repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num,
|
||||
.repository
|
||||
.diff-file-box
|
||||
.file-body.file-code
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
|
||||
@mixin sidebar {
|
||||
--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-6_8: calc(var(--spc) * .750); // 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-3_8: calc(var(--spc) * .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-7_8: calc(var(--spc) * 0.875); // 7/8 of the base var(--spc-7_8) 14px
|
||||
--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) * 0.5); // 4/8 = 1/2 of the base var(--spc-4_8) 8px
|
||||
--spc-3_8: calc(var(--spc) * 0.375); // 3/8 of the base var(--spc-3_8) 6px
|
||||
--spc-2_8: calc(var(--spc) * 0.25); // 2/8 = 1/4 of the base var(--spc-2_8) 4px
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -17,25 +17,37 @@
|
||||
padding: 0 !important;
|
||||
|
||||
// reset padding and margin for all children
|
||||
>*, .issue-sidebar-combo>*, >text+*, >.ui>* {
|
||||
> *,
|
||||
.issue-sidebar-combo > *,
|
||||
> text + *,
|
||||
> .ui > * {
|
||||
margin: unset !important;
|
||||
padding: unset !important;
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
}
|
||||
|
||||
// alignment for main children elements
|
||||
>.ui, >.text, >.ui {
|
||||
> .ui,
|
||||
> .text,
|
||||
> .ui {
|
||||
padding-left: var(--spc-4_8) !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-right: unset;
|
||||
}
|
||||
|
||||
// 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;
|
||||
margin: 0 !important;
|
||||
min-height: 0 !important;
|
||||
@ -57,7 +69,6 @@
|
||||
margin: var(--spc-7_8) 0 !important;
|
||||
}
|
||||
|
||||
|
||||
// select branch dropdown
|
||||
.select-branch {
|
||||
align-self: flex-end;
|
||||
@ -74,7 +85,9 @@
|
||||
.menu {
|
||||
--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;
|
||||
}
|
||||
|
||||
@ -102,7 +115,7 @@
|
||||
padding-top: var(--spc-3_8) !important;
|
||||
padding-bottom: var(--spc-3_8) !important;
|
||||
font-size: var.get('font-size/sm');
|
||||
transition: background-color .1s ease;
|
||||
transition: background-color 0.1s ease;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
> a {
|
||||
@ -117,7 +130,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5);
|
||||
background-color: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -172,11 +185,12 @@
|
||||
border: none !important;
|
||||
|
||||
.item-left {
|
||||
a { // issue
|
||||
|
||||
a {
|
||||
// issue
|
||||
}
|
||||
|
||||
div.text { // repo
|
||||
div.text {
|
||||
// repo
|
||||
font-size: var.get('font-size/xs') !important;
|
||||
}
|
||||
}
|
||||
@ -240,7 +254,7 @@
|
||||
}
|
||||
|
||||
// input of type date
|
||||
input[type="date"] {
|
||||
input[type='date'] {
|
||||
padding: var(--spc-4_8) var(--spc-6_8) !important;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
@ -254,14 +268,16 @@
|
||||
}
|
||||
|
||||
// direct form child
|
||||
>form, .form {
|
||||
> form,
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spc-4_8) !important;
|
||||
}
|
||||
|
||||
// buttons at the end of the sidebar
|
||||
>form button, >button {
|
||||
> form button,
|
||||
> button {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
@ -280,7 +296,7 @@
|
||||
}
|
||||
|
||||
// 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;
|
||||
svg {
|
||||
color: color.get('palette/red/base') !important;
|
||||
|
||||
@ -23,7 +23,8 @@
|
||||
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');
|
||||
padding-bottom: var.get('measure/.5x');
|
||||
border-bottom: none;
|
||||
@ -44,7 +45,7 @@
|
||||
&.event {
|
||||
.badge {
|
||||
// and not contains a tw-bg-* class
|
||||
&:not([class*="tw-bg-"]) {
|
||||
&:not([class*='tw-bg-']) {
|
||||
color: var(--color-timeline-badge-fg) !important;
|
||||
}
|
||||
|
||||
@ -129,7 +130,7 @@
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -180,7 +181,8 @@
|
||||
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;
|
||||
height: 60px;
|
||||
}
|
||||
@ -203,11 +205,13 @@
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@ -255,7 +259,8 @@
|
||||
margin-bottom: var.get('measure/1x');
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
.page-content.repository.issue-list, .page-content.dashboard.issues {
|
||||
.page-content.repository.issue-list,
|
||||
.page-content.dashboard.issues {
|
||||
.secondary-nav {
|
||||
margin-bottom: var.get('measure/1.5x');
|
||||
}
|
||||
|
||||
@ -15,12 +15,14 @@
|
||||
padding: 0 0 0 var.get('measure/.5x');
|
||||
|
||||
.section {
|
||||
&:first-of-type, &.active {
|
||||
&:first-of-type,
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-divider, button {
|
||||
.breadcrumb-divider,
|
||||
button {
|
||||
color: color.get('subtle') !important;
|
||||
}
|
||||
|
||||
@ -94,7 +96,6 @@
|
||||
|
||||
// readme
|
||||
#readme {
|
||||
|
||||
}
|
||||
|
||||
.repository-summary .sub-menu .item {
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#repo-topics, #topic_edit, .label-list {
|
||||
#repo-topics,
|
||||
#topic_edit,
|
||||
.label-list {
|
||||
row-gap: var.get('measure/.5x');
|
||||
margin-top: 0 !important;
|
||||
|
||||
@ -27,13 +29,17 @@
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
|
||||
border-color: color.get('elevation/6')
|
||||
.ui.selection.active.dropdown,
|
||||
.ui.selection.active.dropdown .menu {
|
||||
border-color: color.get('elevation/6');
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +72,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
#repo-topics, #manage_topic, .flex-item-title {
|
||||
#repo-topics,
|
||||
#manage_topic,
|
||||
.flex-item-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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');
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -241,7 +250,8 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
@use './section';
|
||||
|
||||
@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 {
|
||||
column-gap: 40px;
|
||||
|
||||
|
||||
@ -57,7 +57,9 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@ -77,7 +79,8 @@
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:not(:first-child), &:first-child {
|
||||
&:not(:first-child),
|
||||
&:first-child {
|
||||
padding: 1rem;
|
||||
margin: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
@ -19,7 +19,8 @@
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
a.item, details.item {
|
||||
a.item,
|
||||
details.item {
|
||||
min-height: var(--min-height);
|
||||
&:before {
|
||||
content: none;
|
||||
@ -40,8 +41,8 @@
|
||||
|
||||
&:after {
|
||||
background: var(--color-primary);
|
||||
border-radius: .375rem;
|
||||
content: "";
|
||||
border-radius: 0.375rem;
|
||||
content: '';
|
||||
height: 24px;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
@ -52,7 +53,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
a.item, details.item summary {
|
||||
a.item,
|
||||
details.item summary {
|
||||
padding: var(--spacing);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
@ -64,7 +66,7 @@
|
||||
&:after {
|
||||
color: color.get('subtle');
|
||||
transform: scaleY(1);
|
||||
transition: transform .12s linear;
|
||||
transition: transform 0.12s linear;
|
||||
mask-image: var(--octicon-chevron-down);
|
||||
-webkit-mask-image: var(--octicon-chevron-down);
|
||||
}
|
||||
|
||||
@ -131,7 +131,6 @@
|
||||
--color-green-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
|
||||
// └───────┘
|
||||
@ -224,16 +223,56 @@
|
||||
// ┌──────┐
|
||||
// │ 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-row-bg: #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))};
|
||||
--color-diff-added-row-border: #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))};
|
||||
--color-diff-added-word-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))};
|
||||
--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-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
|
||||
--color-diff-removed-row-bg: #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))};
|
||||
--color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))};
|
||||
--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-added-linenum-bg: #{if(
|
||||
$is-dark,
|
||||
#{color.get('palette/teal/dark/50%')},
|
||||
rgba(#{color.get('palette/white/base', 'rgb')}, 0.2)
|
||||
)};
|
||||
--color-diff-added-row-bg: #{if(
|
||||
$is-dark,
|
||||
#{color.get('palette/teal/dark/60%')},
|
||||
rgba(#{color.get('palette/green/light/20%', 'rgb')}, 0.25)
|
||||
)};
|
||||
--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)};
|
||||
|
||||
// ┌────────┐
|
||||
@ -258,20 +297,20 @@
|
||||
// │ badge │
|
||||
// └───────┘
|
||||
--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-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2);
|
||||
--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')}, 0.2);
|
||||
|
||||
--color-green-badge: #{color.get('palette/green/base')};
|
||||
--color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1);
|
||||
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .2);
|
||||
--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')}, 0.2);
|
||||
|
||||
--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-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2);
|
||||
--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')}, 0.2);
|
||||
|
||||
--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-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2);
|
||||
--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')}, 0.2);
|
||||
|
||||
// ┌──────────────┐
|
||||
// │ target-based │
|
||||
@ -303,7 +342,12 @@
|
||||
|
||||
// light
|
||||
--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-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
||||
--color-hover-opaque: #{color.get('elevation/6', 'rgb')};
|
||||
@ -315,10 +359,18 @@
|
||||
--color-markup-code-inline: #{color.get('elevation/4')};
|
||||
--color-button: #{color.get('elevation/4')};
|
||||
--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-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-expand-button: #{color.get('elevation/6')};
|
||||
@ -326,19 +378,29 @@
|
||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||
--color-project-column-bg: #{color.get('elevation/1')};
|
||||
--color-caret: var(--color-text);
|
||||
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
|
||||
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
|
||||
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
|
||||
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.1);
|
||||
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.2);
|
||||
--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-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
|
||||
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
|
||||
|
||||
// navbar
|
||||
--color-nav-bg: #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
|
||||
--color-nav-hover-bg: #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))};
|
||||
--color-nav-bg: #{color.get(
|
||||
'navbar/bg',
|
||||
$default: if($is-dark, color.get('elevation/1'), color.get('elevation/4'))
|
||||
)};
|
||||
--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'))};
|
||||
--color-secondary-nav-hover-bg: #{if(
|
||||
$is-dark,
|
||||
color.get('elevation/4'),
|
||||
color.get('elevation/5')
|
||||
)};
|
||||
|
||||
// label
|
||||
--color-label-text: var(--color-text);
|
||||
@ -389,26 +451,26 @@
|
||||
|
||||
// // In dark mode, invert emojis that are hard to read otherwise
|
||||
@if $is-dark {
|
||||
.emoji[aria-label="check mark"],
|
||||
.emoji[aria-label="currency exchange"],
|
||||
.emoji[aria-label="TOP arrow"],
|
||||
.emoji[aria-label="END arrow"],
|
||||
.emoji[aria-label="ON! arrow"],
|
||||
.emoji[aria-label="SOON arrow"],
|
||||
.emoji[aria-label="heavy dollar sign"],
|
||||
.emoji[aria-label="copyright"],
|
||||
.emoji[aria-label="registered"],
|
||||
.emoji[aria-label="trade mark"],
|
||||
.emoji[aria-label="multiply"],
|
||||
.emoji[aria-label="plus"],
|
||||
.emoji[aria-label="minus"],
|
||||
.emoji[aria-label="divide"],
|
||||
.emoji[aria-label="curly loop"],
|
||||
.emoji[aria-label="double curly loop"],
|
||||
.emoji[aria-label="wavy dash"],
|
||||
.emoji[aria-label="paw prints"],
|
||||
.emoji[aria-label="musical note"],
|
||||
.emoji[aria-label="musical notes"] {
|
||||
.emoji[aria-label='check mark'],
|
||||
.emoji[aria-label='currency exchange'],
|
||||
.emoji[aria-label='TOP arrow'],
|
||||
.emoji[aria-label='END arrow'],
|
||||
.emoji[aria-label='ON! arrow'],
|
||||
.emoji[aria-label='SOON arrow'],
|
||||
.emoji[aria-label='heavy dollar sign'],
|
||||
.emoji[aria-label='copyright'],
|
||||
.emoji[aria-label='registered'],
|
||||
.emoji[aria-label='trade mark'],
|
||||
.emoji[aria-label='multiply'],
|
||||
.emoji[aria-label='plus'],
|
||||
.emoji[aria-label='minus'],
|
||||
.emoji[aria-label='divide'],
|
||||
.emoji[aria-label='curly loop'],
|
||||
.emoji[aria-label='double curly loop'],
|
||||
.emoji[aria-label='wavy dash'],
|
||||
.emoji[aria-label='paw prints'],
|
||||
.emoji[aria-label='musical note'],
|
||||
.emoji[aria-label='musical notes'] {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ function exit(err) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
} else {
|
||||
console.log('')
|
||||
console.log('');
|
||||
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 { join } from 'path';
|
||||
|
||||
@ -8,9 +8,10 @@ const distPath = join(cwd(), 'dist');
|
||||
// useful to check issues with the css files optimization
|
||||
// (in order to use this script, you need to first build the project removing the
|
||||
// optimization step from the build.js file)
|
||||
optimizeCss(distPath, false).then(() => {
|
||||
optimizeCss(distPath, false)
|
||||
.then(() => {
|
||||
console.log('Optimization completed');
|
||||
}).catch((err) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
|
||||
@ -30,12 +30,6 @@ const watcher = watch([`${src}/**/*`], {
|
||||
ignoreInitial: true,
|
||||
});
|
||||
|
||||
watcher.on('change', (file) => debouncer.add(
|
||||
deploy,
|
||||
srcPath,
|
||||
distPath,
|
||||
serverPath,
|
||||
serviceName,
|
||||
file,
|
||||
true
|
||||
));
|
||||
watcher.on('change', (file) =>
|
||||
debouncer.add(deploy, srcPath, distPath, serverPath, serviceName, file, true)
|
||||
);
|
||||
|
||||
@ -10,16 +10,23 @@ import { optimizeCss } from './optimize-css.js';
|
||||
|
||||
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...');
|
||||
|
||||
if (live && !sync.active) {
|
||||
sync.init({
|
||||
proxy: 'http://lugit.local',
|
||||
port: 8080,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
let shouldRestart = true;
|
||||
@ -35,7 +42,7 @@ export async function deploy(srcPath, distPath, serverPath, serviceName, file =
|
||||
// await buildImg(srcPath, distPath);
|
||||
await buildTemplates(srcPath, distPath);
|
||||
await copyTo(distPath, serverPath);
|
||||
shouldRestart && await restartService(serviceName);
|
||||
shouldRestart && (await restartService(serviceName));
|
||||
|
||||
if (!shouldRestart && live) {
|
||||
sync.reload();
|
||||
|
||||
@ -14,7 +14,9 @@ export async function buildFonts(srcHome, distHome) {
|
||||
|
||||
// if fontsSrcPath does not exist, return
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ export async function buildImg(srcHome, distHome) {
|
||||
await Promise.all([
|
||||
processLogos(images.logos, imgDestPath),
|
||||
processOthers(images.others, imgDestPath),
|
||||
])
|
||||
]);
|
||||
|
||||
logger.info('Images build has finished');
|
||||
}
|
||||
@ -53,7 +53,10 @@ async function processLogos(logos, distHome) {
|
||||
promises.push(
|
||||
generate(svg, join(distHome, 'favicon.svg'), { size: 32 }),
|
||||
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 })
|
||||
);
|
||||
}
|
||||
@ -88,8 +91,7 @@ async function generate(svg, path, { size, bg }) {
|
||||
const { objects, options } = await loadSvg(svg);
|
||||
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 });
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(
|
||||
|
||||
@ -46,7 +46,11 @@ export async function optimizeCss(distPath, replace = true) {
|
||||
if (node.type === 'Declaration' && node.property.startsWith('--')) {
|
||||
// check if its assigned to another variable
|
||||
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) {
|
||||
if (child.type === 'Identifier') {
|
||||
if (!usedCssVariables.includes(child.name)) {
|
||||
@ -54,7 +58,11 @@ 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)
|
||||
|
||||
// if starts with var(, then its assigned to another variable or many variables, get everything that's inside
|
||||
|
||||
@ -21,15 +21,12 @@ async function buildThemes(srcPath, distPath) {
|
||||
info: logger.simpleInfo.bind(logger),
|
||||
warn: logger.simpleWarn.bind(logger),
|
||||
error: logger.simpleError.bind(logger),
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
logger.debug(`Writing ${theme.name} theme to disk`);
|
||||
|
||||
writeFileSync(
|
||||
join(distPath, cssDistPath, `theme-${theme.name}.css`),
|
||||
result.css
|
||||
);
|
||||
writeFileSync(join(distPath, cssDistPath, `theme-${theme.name}.css`), result.css);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,12 +41,12 @@ export async function buildScss(srcPath, distPath) {
|
||||
|
||||
function getScssFiles(srcHome, path) {
|
||||
try {
|
||||
return readdirSync(join(srcHome, path)).filter(
|
||||
(fn) => fn.endsWith('.scss') && !fn.startsWith('_')
|
||||
).map((file) => ({
|
||||
return readdirSync(join(srcHome, path))
|
||||
.filter((fn) => fn.endsWith('.scss') && !fn.startsWith('_'))
|
||||
.map((file) => ({
|
||||
name: file.replace('.scss', ''),
|
||||
path: join(srcHome, path, file),
|
||||
}))
|
||||
}));
|
||||
} catch (err) {
|
||||
return [];
|
||||
}
|
||||
|
||||
@ -122,7 +122,6 @@ export async function sequence(tasks) {
|
||||
return results;
|
||||
}
|
||||
|
||||
|
||||
async function tasksRunner(tasks, abort) {
|
||||
let result = null;
|
||||
for (const task of tasks) {
|
||||
@ -144,15 +143,12 @@ export async function sequenceStream(tasks) {
|
||||
console.log('sequenceStream aborted');
|
||||
});
|
||||
|
||||
return [
|
||||
tasksRunner(tasks, abort),
|
||||
abort,
|
||||
]
|
||||
return [tasksRunner(tasks, abort), abort];
|
||||
}
|
||||
|
||||
export const getArg = (flag, def) => {
|
||||
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) {
|
||||
return args[flagIndex + 1];
|
||||
|
||||
@ -22,7 +22,7 @@ const ANSI_COLORS = {
|
||||
brightBlue: '\x1b[94m',
|
||||
brightMagenta: '\x1b[95m',
|
||||
brightCyan: '\x1b[96m',
|
||||
pink: '\x1b[38;2;255;182;193m'
|
||||
pink: '\x1b[38;2;255;182;193m',
|
||||
};
|
||||
|
||||
export class Logger {
|
||||
@ -55,7 +55,6 @@ export class Logger {
|
||||
warn(...args) {
|
||||
if (!this.#canLog('warn')) return;
|
||||
this.log('WARN', false, ...args);
|
||||
|
||||
}
|
||||
|
||||
error(...args) {
|
||||
@ -91,7 +90,6 @@ export class Logger {
|
||||
simpleWarn(...args) {
|
||||
if (!this.#canLog('warn')) return;
|
||||
this.log('WARN', true, ...args);
|
||||
|
||||
}
|
||||
|
||||
simpleError(...args) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user