feat: ✨ settings page
This commit is contained in:
parent
5eb2e10d87
commit
93c89fd96a
54
README.md
54
README.md
@ -4,17 +4,29 @@
|
||||
|
||||
*Theme for `lucaslabs` internal gitea server.*
|
||||
|
||||
## `dark`
|
||||
> [!IMPORTANT]
|
||||
> From version `v1.0.0` onwards, `gitea>=1.23` is required.
|
||||
> In case you're looking for `gitea@1.22.x` support, [`v0.2.2`](https://github.com/lucas-labs/gitea-lugit-theme/releases/tag/v0.2.2)
|
||||
> is the last version that supports it.
|
||||
|
||||

|
||||
## Preview
|
||||
|
||||
## `light`
|
||||

|
||||
|
||||

|
||||
<details>
|
||||
<summary>Issue Page</summary>
|
||||
<img src="figs/issue.png" alt="issue" width="100%">
|
||||
</details>
|
||||
|
||||
## `auto`
|
||||
<details>
|
||||
<summary>Settings Page</summary>
|
||||
<img src="figs/settings.png" alt="settings" width="100%">
|
||||
</details>
|
||||
|
||||
Switches between `dark` and `light` automatically based on the user's system preference.
|
||||
<details>
|
||||
<summary>PR Page</summary>
|
||||
<img src="figs/pr.png" alt="pr" width="100%">
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
@ -59,32 +71,6 @@ $ npm run serve -- --server ~/gitea/custom
|
||||
$ npm run serve -- -- --server c:/gitea/custom
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
# Changes in templates
|
||||
|
||||
## `home.tmpl`
|
||||
|
||||
Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
|
||||
|
||||
## `base/head_navbar.tmpl`
|
||||
|
||||
The only change here is to make the logo smaller.
|
||||
|
||||
```diff
|
||||
- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
|
||||
+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
|
||||
```
|
||||
|
||||
## `repo/home.tmpl`
|
||||
|
||||
+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
|
||||
+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
|
||||
|
||||
Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
|
||||
|
||||
```diff
|
||||
- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
|
||||
+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
|
||||
```
|
||||
|
||||
Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.
|
||||
Please feel free to open an issue or a pull request. Contributions are welcome!
|
BIN
figs/dark.png
BIN
figs/dark.png
Binary file not shown.
Before Width: | Height: | Size: 194 KiB |
BIN
figs/issue.png
Normal file
BIN
figs/issue.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 234 KiB |
BIN
figs/light.png
BIN
figs/light.png
Binary file not shown.
Before Width: | Height: | Size: 171 KiB |
BIN
figs/pr.png
Normal file
BIN
figs/pr.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 252 KiB |
BIN
figs/repo.png
Normal file
BIN
figs/repo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 200 KiB |
BIN
figs/settings.png
Normal file
BIN
figs/settings.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 174 KiB |
36
src/themes/scss/_vars.scss
Normal file
36
src/themes/scss/_vars.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$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
|
||||
),
|
||||
'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,
|
||||
'.5x': 8px,
|
||||
'.75x': 12px,
|
||||
'.875x': 14px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'2.5x': 40px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'navbar-logo': (
|
||||
'width': 56px,
|
||||
'height': 20px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
);
|
@ -1,13 +1,14 @@
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './_utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
@use './vars' as vars;
|
||||
|
||||
$is-dark: true;
|
||||
$brand: #a6c6f7;
|
||||
|
||||
$colors: (
|
||||
primary: c.variants($brand),
|
||||
secondary: c.variants(hsl(240, 25%, 14%)), // same as elevation/6
|
||||
secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6
|
||||
text: #e6edf3,
|
||||
subtle: hsl(240, 10%, 70%), // same as elevation/10
|
||||
palette: (
|
||||
@ -41,43 +42,9 @@ $colors: (
|
||||
)
|
||||
);
|
||||
|
||||
$variables: (
|
||||
'font-size': (
|
||||
'xs': .714rem,
|
||||
'sm': .857rem,
|
||||
'md': 1rem,
|
||||
'lg': 1.143rem,
|
||||
'xl': 1.286rem,
|
||||
),
|
||||
'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,
|
||||
'.5x': 8px,
|
||||
'.75x': 12px,
|
||||
'.875x': 14px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'2.5x': 40px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'navbar-logo': (
|
||||
'width': 56px,
|
||||
'height': 20px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
);
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: $variables),
|
||||
$theme: (colors: $colors, variables: vars.$variables),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
|
@ -1,6 +1,7 @@
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './_utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
@use './vars' as vars;
|
||||
|
||||
$is-dark: false;
|
||||
$brand: #6296e2;
|
||||
@ -41,43 +42,9 @@ $colors: (
|
||||
)
|
||||
);
|
||||
|
||||
$variables: (
|
||||
'font-size': (
|
||||
'xs': .714rem,
|
||||
'sm': .857rem,
|
||||
'md': 1rem,
|
||||
'lg': 1.143rem,
|
||||
'xl': 1.286rem,
|
||||
),
|
||||
'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,
|
||||
'.5x': 8px,
|
||||
'.75x': 12px,
|
||||
'.875x': 14px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'2.5x': 40px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'navbar-logo': (
|
||||
'width': 56px,
|
||||
'height': 20px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
);
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: $variables),
|
||||
$theme: (colors: $colors, variables: vars.$variables),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
|
@ -125,7 +125,11 @@
|
||||
&:focus-within {
|
||||
outline: 2px solid var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
|
9
src/themes/scss/theme/components/_forms.scss
Normal file
9
src/themes/scss/theme/components/_forms.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use './forms/' as forms;
|
||||
|
||||
@mixin forms {
|
||||
@include forms.dropdown-menu;
|
||||
@include forms.input;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
@mixin signed-label {
|
||||
@mixin label-signed {
|
||||
.label.isSigned {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
margin: 0px .25em !important;
|
||||
@ -37,4 +37,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin label-default {
|
||||
.ui.label {
|
||||
// height: var.get('measure/1.25x');
|
||||
border-radius: var.get('measure/1.25x');
|
||||
|
||||
&.scope-left {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.scope-right {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.green, &.red {
|
||||
color: var(--color-green-contrast) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -1,114 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin menu {
|
||||
.ui.dropdown>.menu {
|
||||
--border-radius: 0;
|
||||
opacity: 0;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
top: calc(100% + var.get('measure/.5x')) !important;
|
||||
border-radius: var.get('measure/.75x') !important;
|
||||
transition: opacity .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;
|
||||
|
||||
.divider {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 0 var.get('measure/.5x') !important;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
line-height: 1 !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: auto;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&.clear-selection {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"], input[name="search"] {
|
||||
--color-input-background: #{color.get('elevation/1')};
|
||||
--color-input-border: #{color.get('elevation/5')};
|
||||
|
||||
min-height: var.get('measure/2x') !important;
|
||||
padding: 0 var.get('measure/.5x') !important;
|
||||
font-size: var.get('font-size/md') !important;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
|
||||
&:focus {
|
||||
--color-primary: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.scrolling.menu {
|
||||
.item {
|
||||
gap: var.get('measure/.5x') !important;
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
content: "";
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-check-mark {
|
||||
background-color: color.get('elevation/6');
|
||||
visibility: visible !important;
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
border-radius: var.get('measure/.375x');
|
||||
border: 1px solid color.get('elevation/8');
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.item-secondary-info {
|
||||
flex-basis: 100%;
|
||||
padding: 0 0 0 var.get('measure/.5x');
|
||||
color: color.get('subtle');
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.item-check-mark {
|
||||
background-color: var(--color-accent);
|
||||
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,12 +2,16 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin hollow {
|
||||
--border-radius: #{var.get('measure/.25x')};
|
||||
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
background-color: transparent !important;
|
||||
font-weight: normal;
|
||||
|
||||
button, .button {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
@ -18,16 +22,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
&.labeled {
|
||||
button, .button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gitea-button {
|
||||
.ui.button {
|
||||
border-radius: var(--border-radius);
|
||||
transition: color .1s ease, background-color .1s ease, border-color .1s ease;
|
||||
|
||||
&.basic {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&.red, &.red.basic {
|
||||
border-color: var(--color-secondary);
|
||||
background: var(--color-button);
|
||||
color: var(--color-red);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-red-dark-2);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&.basic {
|
||||
border-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary, &.red, &.basic {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
180
src/themes/scss/theme/components/forms/_dropdown-menu.scss
Normal file
180
src/themes/scss/theme/components/forms/_dropdown-menu.scss
Normal file
@ -0,0 +1,180 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
@mixin dropdown-menu {
|
||||
.ui.dropdown {
|
||||
// dropdown menu
|
||||
>.menu {
|
||||
--border-radius: #{var.get('measure/.75x')};
|
||||
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
&.hidden { opacity: 0 !important;}
|
||||
&.visible { opacity: 1 !important; }
|
||||
|
||||
border-radius: var(--border-radius) !important;
|
||||
transition: opacity .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;
|
||||
|
||||
.divider {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
.item:not(.comment-reaction-button) {
|
||||
--border-radius: #{var.get('measure/.375x')};
|
||||
|
||||
margin: 0 var.get('measure/.5x') !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
line-height: 1 !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: auto;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&.clear-selection {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"], input[name="search"] {
|
||||
--color-input-background: #{color.get('elevation/1')};
|
||||
--color-input-border: #{color.get('elevation/5')};
|
||||
|
||||
min-height: var.get('measure/2x') !important;
|
||||
padding: 0 var.get('measure/.5x') !important;
|
||||
font-size: var.get('font-size/md') !important;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
|
||||
&:focus {
|
||||
--color-primary: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.scrolling.menu {
|
||||
.item {
|
||||
gap: var.get('measure/.5x') !important;
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
content: "";
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-check-mark {
|
||||
background-color: color.get('elevation/6');
|
||||
visibility: visible !important;
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
border-radius: var.get('measure/.375x');
|
||||
border: 1px solid color.get('elevation/8');
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// <div class="item-secondary-info">
|
||||
// <div>
|
||||
// <small>Breaking change that won't be backward compatible</small>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
.item-secondary-info {
|
||||
flex-basis: 100%;
|
||||
padding: 0 0 0 var.get('measure/.5x');
|
||||
color: color.get('subtle');
|
||||
line-height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
|
||||
small {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.item-check-mark {
|
||||
background-color: var(--color-accent);
|
||||
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if not .upward
|
||||
&:not(.upward) {
|
||||
>.menu {
|
||||
top: calc(100% + var.get('measure/.5x')) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.upward {
|
||||
>.menu {
|
||||
bottom: calc(100% + var.get('measure/.5x')) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
border-color: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
// select type dropdown
|
||||
&.selection {
|
||||
--border-radius: #{var.get('measure/.5x')};
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
&:focus, &.active {
|
||||
border-color: var(--color-secondary) !important;
|
||||
outline: 2px solid var(--color-accent);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
>.menu {
|
||||
border-radius: var(--border-radius) !important;
|
||||
border-top-width: 1px !important;
|
||||
border-color: var(--color-secondary) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.25x');
|
||||
|
||||
.item {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
74
src/themes/scss/theme/components/forms/_input.scss
Normal file
74
src/themes/scss/theme/components/forms/_input.scss
Normal file
@ -0,0 +1,74 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
@mixin -all-inputs($state: null) {
|
||||
input#{$state},
|
||||
textarea#{$state},
|
||||
.ui.input>input#{$state},
|
||||
.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.selection.dropdown#{$state} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input {
|
||||
@include -all-inputs {
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: normal;
|
||||
min-height: auto;
|
||||
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
|
||||
}
|
||||
|
||||
@include -all-inputs(':hover') {
|
||||
border-radius: var(--border-radius);
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text)
|
||||
}
|
||||
|
||||
@include -all-inputs(':focus') {
|
||||
border-radius: var(--border-radius);
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
outline: 2px solid var(--color-accent);
|
||||
background-color: color.get('elevation/2');
|
||||
}
|
||||
|
||||
@include -all-inputs('.active') {
|
||||
border-radius: var(--border-radius);
|
||||
outline: 2px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"])>input:focus {
|
||||
border-right-color: var(--color-input-border);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.ui.form .field>label {
|
||||
margin: 0 0 var.get('measure/.375x');
|
||||
font-size: var.get('font-size/md');
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
2
src/themes/scss/theme/components/forms/index.scss
Normal file
2
src/themes/scss/theme/components/forms/index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@forward './dropdown-menu';
|
||||
@forward './input';
|
@ -1,5 +1,6 @@
|
||||
@forward './signed-label';
|
||||
@forward './labels';
|
||||
@forward './editor';
|
||||
@forward './menu';
|
||||
@forward './forms';
|
||||
@forward './file-content';
|
||||
@forward './avatar';
|
||||
@forward './avatar';
|
||||
@forward './button';
|
@ -7,16 +7,19 @@
|
||||
@include vars.colors($is-dark);
|
||||
|
||||
// components
|
||||
@include components.signed-label; // 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.editor; // github-style (kinda) markdown editor in comments, issues, etc.
|
||||
@include components.menu; // github-style dropdown menus
|
||||
@include components.forms; // github-style dropdown menus
|
||||
@include components.file-content; // github-style file content
|
||||
@include components.avatar; // github-style avatars
|
||||
@include components.gitea-button; // github-style buttons
|
||||
|
||||
// code highlighting
|
||||
@include modules.chroma($is-dark); // syntax highlighting
|
||||
@include modules.codemirror; // code editor
|
||||
@include modules.monaco; // vscode-like code editor
|
||||
@include modules.settings; // settings & profile pages
|
||||
|
||||
// customized pages
|
||||
@include modules.repo; // repo page
|
||||
|
@ -2,4 +2,5 @@
|
||||
@forward './issues';
|
||||
@forward './chroma';
|
||||
@forward './codemirror';
|
||||
@forward './monaco';
|
||||
@forward './monaco';
|
||||
@forward './settings';
|
@ -3,6 +3,13 @@
|
||||
@use '../../components/button' as button;
|
||||
|
||||
@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
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none !important;
|
||||
@ -18,7 +25,7 @@
|
||||
|
||||
// alignment for main children elements
|
||||
>.ui, >.text, >.ui {
|
||||
padding-left: var.get('measure/.5x') !important;
|
||||
padding-left: var(--spc-4_8) !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
@ -43,16 +50,11 @@
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.ui.label {
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
// dividers
|
||||
>.divider {
|
||||
width: calc(100% - var.get('measure/.5x')) !important;
|
||||
width: calc(100% - var(--spc-4_8)) !important;
|
||||
align-self: flex-end;
|
||||
margin: var.get('measure/.875x') 0 !important;
|
||||
margin: var(--spc-7_8) 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@ -66,7 +68,7 @@
|
||||
|
||||
+.divider {
|
||||
border: none !important;
|
||||
margin: var.get('measure/.5x') 0 !important;
|
||||
margin: var(--spc-4_8) 0 !important;
|
||||
}
|
||||
|
||||
.menu {
|
||||
@ -77,7 +79,7 @@
|
||||
}
|
||||
|
||||
.branch-tag-item {
|
||||
--border-radius: #{var.get('measure/.5x')};
|
||||
--border-radius: #{var(--spc-4_8)};
|
||||
|
||||
&:hover {
|
||||
color: currentColor !important;
|
||||
@ -89,16 +91,16 @@
|
||||
.issue-sidebar-combo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
gap: var(--spc-4_8) !important;
|
||||
|
||||
> * {
|
||||
padding-left: var.get('measure/.5x') !important;
|
||||
padding-right: var.get('measure/.5x') !important;
|
||||
padding-left: var(--spc-4_8) !important;
|
||||
padding-right: var(--spc-4_8) !important;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
padding-top: var.get('measure/.375x') !important;
|
||||
padding-bottom: var.get('measure/.375x') !important;
|
||||
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;
|
||||
border-radius: var(--border-radius) !important;
|
||||
@ -127,23 +129,21 @@
|
||||
display: flex !important;
|
||||
justify-content: space-between;
|
||||
font-weight: 500 !important;
|
||||
margin-bottom: var.get('measure/.75x') !important;
|
||||
margin-bottom: var(--spc-6_8) !important;
|
||||
|
||||
strong {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.watching, .depending {
|
||||
.watching {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.75x') !important;
|
||||
}
|
||||
gap: var(--spc-6_8) !important;
|
||||
|
||||
.watching {
|
||||
button {
|
||||
font-weight: 500;
|
||||
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
||||
padding: var(--spc-4_8) var(--spc-6_8) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
svg {
|
||||
@ -153,10 +153,20 @@
|
||||
}
|
||||
|
||||
.depending {
|
||||
// title
|
||||
>.text {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spc-6_8) !important;
|
||||
}
|
||||
|
||||
>p {
|
||||
margin-bottom: var(--spc-4_8) !important;
|
||||
}
|
||||
|
||||
.divided.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/1x') !important;
|
||||
gap: var(--spc) !important;
|
||||
|
||||
.dependency {
|
||||
border: none !important;
|
||||
@ -188,17 +198,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.selection.dropdown {
|
||||
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
|
||||
#new-dependency-drop-list {
|
||||
padding: var(--spc-3_8) var(--spc-6_8) !important;
|
||||
// make radius to the right be 0 to merge with the add button
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
|
||||
&.active {
|
||||
// restore right border to 1px when active
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-bottom-left-radius: var(--border-radius) !important;
|
||||
border-color: color.get('elevation/5') !important;
|
||||
outline: 2px solid var(--color-accent);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
|
||||
padding: var(--spc-3_8) var(--spc-6_8) !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var.get('measure/.5x') !important;
|
||||
padding: var(--spc-4_8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,7 +230,6 @@
|
||||
display: flex;
|
||||
color: color.get('subtle') !important;
|
||||
width: unset !important;
|
||||
// padding: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,13 +241,13 @@
|
||||
|
||||
// input of type date
|
||||
input[type="date"] {
|
||||
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
||||
padding: var(--spc-4_8) var(--spc-6_8) !important;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var.get('measure/.5x') !important;
|
||||
padding: var(--spc-4_8) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
@ -237,7 +257,7 @@
|
||||
>form, .form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
gap: var(--spc-4_8) !important;
|
||||
}
|
||||
|
||||
// buttons at the end of the sidebar
|
||||
@ -245,10 +265,10 @@
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
padding: var(--spc-3_8) var(--spc-4_8) !important;
|
||||
justify-content: start !important;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.25x') !important;
|
||||
gap: var(--spc-4_8) !important;
|
||||
margin-bottom: var(--spc-2_8) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
svg {
|
||||
|
21
src/themes/scss/theme/modules/settings/_pages.scss
Normal file
21
src/themes/scss/theme/modules/settings/_pages.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use './section';
|
||||
|
||||
@mixin settings-pages {
|
||||
.page-content.user.settings, .page-content.admin {
|
||||
.ui.flex-container {
|
||||
column-gap: 40px;
|
||||
|
||||
.flex-container-nav {
|
||||
width: 232px;
|
||||
@include section.nav;
|
||||
}
|
||||
|
||||
.flex-container-main {
|
||||
@include section.content;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
5
src/themes/scss/theme/modules/settings/index.scss
Normal file
5
src/themes/scss/theme/modules/settings/index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@use './pages';
|
||||
|
||||
@mixin settings {
|
||||
@include pages.settings-pages;
|
||||
}
|
80
src/themes/scss/theme/modules/settings/section/_content.scss
Normal file
80
src/themes/scss/theme/modules/settings/section/_content.scss
Normal file
@ -0,0 +1,80 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin content {
|
||||
|
||||
.ui.top.attached.header {
|
||||
background: unset;
|
||||
border: none;
|
||||
font-size: var.get('font-size/3xl');
|
||||
font-weight: 400;
|
||||
padding: 0 0 var.get('measure/.5x') 0;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
margin-bottom: var.get('measure/1x');
|
||||
|
||||
// if not the first header, add a margin top
|
||||
&:not(:first-child) {
|
||||
margin-top: var.get('measure/2.5x');
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--color-secondary) !important;
|
||||
background: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.segment {
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
>*:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
background: unset;
|
||||
padding:0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
|
||||
&.bottom {
|
||||
margin-top: var.get('measure/2x');
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
column-gap: var.get('measure/.375x');
|
||||
|
||||
svg {
|
||||
margin-left: var.get('measure/.25x');
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin: var.get('measure/1x') 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: var.get('measure/1x') 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.item {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:not(:first-child), &:first-child {
|
||||
padding: 1rem;
|
||||
margin: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
94
src/themes/scss/theme/modules/settings/section/_nav.scss
Normal file
94
src/themes/scss/theme/modules/settings/section/_nav.scss
Normal file
@ -0,0 +1,94 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin nav {
|
||||
.vertical.menu {
|
||||
--spacing: #{var.get('measure/.375x')} #{var.get('measure/.75x')};
|
||||
--min-height: #{var.get('measure/2x')};
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.header.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing);
|
||||
font-size: var.get('font-size/sm');
|
||||
font-weight: 600;
|
||||
color: color.get('subtle');
|
||||
background-color: transparent;
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
a.item, details.item {
|
||||
min-height: var(--min-height);
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var.get('measure/.25x');
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
background-color: var(--color-menu);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: var(--color-primary);
|
||||
border-radius: .375rem;
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: calc(0px - 4px - #{var.get('measure/.375x')});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.item, details.item summary {
|
||||
padding: var(--spacing);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
details.item {
|
||||
--octicon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"></path></svg>');
|
||||
|
||||
summary {
|
||||
&:after {
|
||||
color: color.get('subtle');
|
||||
transform: scaleY(1);
|
||||
transition: transform .12s linear;
|
||||
mask-image: var(--octicon-chevron-down);
|
||||
-webkit-mask-image: var(--octicon-chevron-down);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
&:after {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: color.get('text') !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
@forward './nav';
|
||||
@forward './content';
|
@ -125,6 +125,13 @@
|
||||
--color-brown: #{color.get('palette/brown/base')};
|
||||
--color-black: #{color.get('elevation/1')};
|
||||
|
||||
// ┌───────┐
|
||||
// │ named │ » contrasts (lugit addition)
|
||||
// └───────┘
|
||||
--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
|
||||
// └───────┘
|
||||
@ -211,7 +218,7 @@
|
||||
--color-grey: #{color.get('elevation/9')};
|
||||
--color-grey-light: #{color.get('elevation/11')};
|
||||
--color-gold: #{color.get('palette/yellow/dark/20%')};
|
||||
--color-white: #{if($is-dark, color.get('palette/black/base'), color.get('palette/white/base'))};
|
||||
--color-white: #{color.get('palette/white/base')};
|
||||
--color-git: #f05133;
|
||||
|
||||
// ┌──────┐
|
||||
@ -298,7 +305,7 @@
|
||||
--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: var(--color-box-header);
|
||||
--color-hover-opaque: #{color.get('elevation/6', 'rgb')};
|
||||
--color-active: #{color.get('elevation/4')};
|
||||
--color-menu: #{color.get('elevation/4')};
|
||||
--color-card: #{color.get('elevation/3')};
|
||||
|
Loading…
x
Reference in New Issue
Block a user