infrastructure/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ settings page

Browse Source
This commit is contained in:
Lucas Colombo 2025-01-22 00:48:56 -03:00
parent 5eb2e10d87
commit 93c89fd96a
28 changed files with 684 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@ -4,17 +4,29 @@
*Theme for `lucaslabs` internal gitea server.* *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.
![dark theme](figs/dark.png) ## Preview
## `light` ![repository](figs/repo.png)
![light theme](figs/light.png) <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 ## Usage
@ -59,32 +71,6 @@ $ npm run serve -- --server ~/gitea/custom
$ npm run serve -- -- --server c:/gitea/custom $ npm run serve -- -- --server c:/gitea/custom
``` ```
## Contributing
# Changes in templates Please feel free to open an issue or a pull request. Contributions are welcome!
## `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.

BIN
figs/dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 194 KiB

BIN
figs/issue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
figs/light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 171 KiB

BIN
figs/pr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
figs/repo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

BIN
figs/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

36
src/themes/scss/_vars.scss Normal file
View 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,
)
);

39
src/themes/scss/dark.scss
View File

@ -1,13 +1,14 @@
@use '@lucas-labs/lui-micro' as lui; @use '@lucas-labs/lui-micro' as lui;
@use './_utils/color-utils' as c; @use './_utils/color-utils' as c;
@use './theme' as theme; @use './theme' as theme;
@use './vars' as vars;
$is-dark: true; $is-dark: true;
$brand: #a6c6f7; $brand: #a6c6f7;
$colors: ( $colors: (
primary: c.variants($brand), 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, text: #e6edf3,
subtle: hsl(240, 10%, 70%), // same as elevation/10 subtle: hsl(240, 10%, 70%), // same as elevation/10
palette: ( 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) // init lui-micro, css-vars only (no reboot, no basic)
@include lui.init( @include lui.init(
$theme: (colors: $colors, variables: $variables), $theme: (colors: $colors, variables: vars.$variables),
$options: ( $options: (
reboot: false, reboot: false,
basic: false, basic: false,

37
src/themes/scss/light.scss
View File

@ -1,6 +1,7 @@
@use '@lucas-labs/lui-micro' as lui; @use '@lucas-labs/lui-micro' as lui;
@use './_utils/color-utils' as c; @use './_utils/color-utils' as c;
@use './theme' as theme; @use './theme' as theme;
@use './vars' as vars;
$is-dark: false; $is-dark: false;
$brand: #6296e2; $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) // init lui-micro, css-vars only (no reboot, no basic)
@include lui.init( @include lui.init(
$theme: (colors: $colors, variables: $variables), $theme: (colors: $colors, variables: vars.$variables),
$options: ( $options: (
reboot: false, reboot: false,
basic: false, basic: false,

4
src/themes/scss/theme/components/_editor.scss
View File

@ -126,6 +126,10 @@
outline: 2px solid var(--color-accent); outline: 2px solid var(--color-accent);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
textarea:focus {
outline: none;
}
} }
.field { .field {

9
src/themes/scss/theme/components/_forms.scss Normal file
View 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;
}

25
src/themes/scss/theme/components/_signed-label.scss → src/themes/scss/theme/components/_labels.scss
View File

@ -1,7 +1,7 @@
@use '@lucas-labs/lui-micro/color' as color; @use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var; @use '@lucas-labs/lui-micro/var' as var;
@mixin signed-label { @mixin label-signed {
.label.isSigned { .label.isSigned {
font-size: var.get('font-size/sm') !important; font-size: var.get('font-size/sm') !important;
margin: 0px .25em !important; margin: 0px .25em !important;
@ -38,3 +38,26 @@
} }
} }
} }
@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;
}
}
}

114
src/themes/scss/theme/components/_menu.scss
View File

@ -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;
}
}
}
}
}
}
}

47
src/themes/scss/theme/components/button/index.scss
View File

@ -2,12 +2,16 @@
@use '@lucas-labs/lui-micro/color' as color; @use '@lucas-labs/lui-micro/color' as color;
@mixin hollow { @mixin hollow {
--border-radius: #{var.get('measure/.25x')};
padding: var.get('measure/.375x') var.get('measure/.5x') !important; padding: var.get('measure/.375x') var.get('measure/.5x') !important;
background-color: transparent !important; background-color: transparent !important;
font-weight: normal;
button, .button { button, .button {
border-color: color.get('elevation/6') !important; border-color: color.get('elevation/6') !important;
gap: var.get('measure/.5x') !important; gap: var.get('measure/.5x') !important;
border-radius: var(--border-radius);
&:hover { &:hover {
border-color: color.get('elevation/7') !important; border-color: color.get('elevation/7') !important;
@ -18,16 +22,59 @@
} }
} }
&.labeled {
button, .button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.label { .label {
border-color: color.get('elevation/6') !important; border-color: color.get('elevation/6') !important;
background-color: transparent !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 { &:hover {
border-color: color.get('elevation/7') !important; border-color: color.get('elevation/7') !important;
} }
} }
}
&:hover { &:hover {
border-color: color.get('elevation/7') !important; 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
View 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
View 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
View File

@ -0,0 +1,2 @@
@forward './dropdown-menu';
@forward './input';

5
src/themes/scss/theme/components/index.scss
View File

@ -1,5 +1,6 @@
@forward './signed-label'; @forward './labels';
@forward './editor'; @forward './editor';
@forward './menu'; @forward './forms';
@forward './file-content'; @forward './file-content';
@forward './avatar'; @forward './avatar';
@forward './button';

7
src/themes/scss/theme/index.scss
View File

@ -7,16 +7,19 @@
@include vars.colors($is-dark); @include vars.colors($is-dark);
// components // 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.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.file-content; // github-style file content
@include components.avatar; // github-style avatars @include components.avatar; // github-style avatars
@include components.gitea-button; // github-style buttons
// code highlighting // code highlighting
@include modules.chroma($is-dark); // syntax highlighting @include modules.chroma($is-dark); // syntax highlighting
@include modules.codemirror; // code editor @include modules.codemirror; // code editor
@include modules.monaco; // vscode-like code editor @include modules.monaco; // vscode-like code editor
@include modules.settings; // settings & profile pages
// customized pages // customized pages
@include modules.repo; // repo page @include modules.repo; // repo page

1
src/themes/scss/theme/modules/index.scss
View File

@ -3,3 +3,4 @@
@forward './chroma'; @forward './chroma';
@forward './codemirror'; @forward './codemirror';
@forward './monaco'; @forward './monaco';
@forward './settings';

86
src/themes/scss/theme/modules/issues/_issue-sidebar.scss
View File

@ -3,6 +3,13 @@
@use '../../components/button' as button; @use '../../components/button' as button;
@mixin sidebar { @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; display: flex;
flex-direction: column; flex-direction: column;
border: none !important; border: none !important;
@ -18,7 +25,7 @@
// alignment for main children elements // alignment for main children elements
>.ui, >.text, >.ui { >.ui, >.text, >.ui {
padding-left: var.get('measure/.5x') !important; padding-left: var(--spc-4_8) !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
@ -43,16 +50,11 @@
text-decoration: none !important; text-decoration: none !important;
} }
.ui.label {
height: 20px;
border-radius: 20px;
}
// dividers // dividers
>.divider { >.divider {
width: calc(100% - var.get('measure/.5x')) !important; width: calc(100% - var(--spc-4_8)) !important;
align-self: flex-end; align-self: flex-end;
margin: var.get('measure/.875x') 0 !important; margin: var(--spc-7_8) 0 !important;
} }
@ -66,7 +68,7 @@
+.divider { +.divider {
border: none !important; border: none !important;
margin: var.get('measure/.5x') 0 !important; margin: var(--spc-4_8) 0 !important;
} }
.menu { .menu {
@ -77,7 +79,7 @@
} }
.branch-tag-item { .branch-tag-item {
--border-radius: #{var.get('measure/.5x')}; --border-radius: #{var(--spc-4_8)};
&:hover { &:hover {
color: currentColor !important; color: currentColor !important;
@ -89,16 +91,16 @@
.issue-sidebar-combo { .issue-sidebar-combo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var.get('measure/.5x') !important; gap: var(--spc-4_8) !important;
> * { > * {
padding-left: var.get('measure/.5x') !important; padding-left: var(--spc-4_8) !important;
padding-right: var.get('measure/.5x') !important; padding-right: var(--spc-4_8) !important;
} }
.ui.dropdown { .ui.dropdown {
padding-top: var.get('measure/.375x') !important; padding-top: var(--spc-3_8) !important;
padding-bottom: var.get('measure/.375x') !important; padding-bottom: var(--spc-3_8) !important;
font-size: var.get('font-size/sm'); font-size: var.get('font-size/sm');
transition: background-color .1s ease; transition: background-color .1s ease;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
@ -127,23 +129,21 @@
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
font-weight: 500 !important; font-weight: 500 !important;
margin-bottom: var.get('measure/.75x') !important; margin-bottom: var(--spc-6_8) !important;
strong { strong {
font-weight: 500 !important; font-weight: 500 !important;
} }
} }
.watching, .depending { .watching {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var.get('measure/.75x') !important; gap: var(--spc-6_8) !important;
}
.watching {
button { button {
font-weight: 500; 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; border-radius: var(--border-radius) !important;
svg { svg {
@ -153,10 +153,20 @@
} }
.depending { .depending {
// title
>.text {
display: inline-block;
margin-bottom: var(--spc-6_8) !important;
}
>p {
margin-bottom: var(--spc-4_8) !important;
}
.divided.list { .divided.list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var.get('measure/1x') !important; gap: var(--spc) !important;
.dependency { .dependency {
border: none !important; border: none !important;
@ -188,17 +198,28 @@
} }
} }
.selection.dropdown { #new-dependency-drop-list {
padding: var.get('measure/.375x') var.get('measure/.75x') !important; 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 { 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; line-height: 20px !important;
} }
} }
button { button {
padding: var.get('measure/.5x') !important; padding: var(--spc-4_8) !important;
} }
} }
@ -209,7 +230,6 @@
display: flex; display: flex;
color: color.get('subtle') !important; color: color.get('subtle') !important;
width: unset !important; width: unset !important;
// padding: var.get('measure/.5x') !important;
} }
} }
@ -221,13 +241,13 @@
// input of type date // input of type date
input[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-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
} }
button { button {
padding: var.get('measure/.5x') !important; padding: var(--spc-4_8) !important;
border-top-right-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important; border-bottom-right-radius: var(--border-radius) !important;
} }
@ -237,7 +257,7 @@
>form, .form { >form, .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var.get('measure/.5x') !important; gap: var(--spc-4_8) !important;
} }
// buttons at the end of the sidebar // buttons at the end of the sidebar
@ -245,10 +265,10 @@
font-size: var.get('font-size/sm') !important; font-size: var.get('font-size/sm') !important;
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
padding: var.get('measure/.375x') var.get('measure/.5x') !important; padding: var(--spc-3_8) var(--spc-4_8) !important;
justify-content: start !important; justify-content: start !important;
gap: var.get('measure/.5x') !important; gap: var(--spc-4_8) !important;
margin-bottom: var.get('measure/.25x') !important; margin-bottom: var(--spc-2_8) !important;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
svg { svg {

21
src/themes/scss/theme/modules/settings/_pages.scss Normal file
View 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
View 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
View 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
View 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;
}
}
}
}

2
src/themes/scss/theme/modules/settings/section/index.scss Normal file
View File

@ -0,0 +1,2 @@
@forward './nav';
@forward './content';

11
src/themes/scss/theme/vars/_colors.scss
View File

@ -125,6 +125,13 @@
--color-brown: #{color.get('palette/brown/base')}; --color-brown: #{color.get('palette/brown/base')};
--color-black: #{color.get('elevation/1')}; --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 // │ named │ » light variants
// └───────┘ // └───────┘
@ -211,7 +218,7 @@
--color-grey: #{color.get('elevation/9')}; --color-grey: #{color.get('elevation/9')};
--color-grey-light: #{color.get('elevation/11')}; --color-grey-light: #{color.get('elevation/11')};
--color-gold: #{color.get('palette/yellow/dark/20%')}; --color-gold: #{color.get('palette/yellow/dark/20%')};
--color-white: #{if($is-dark, color.get('palette/black/base'), color.get('palette/white/base'))}; --color-white: #{color.get('palette/white/base')};
--color-git: #f05133; --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-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #{color.get('elevation/6')}; --color-light-border: #{color.get('elevation/6')};
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
--color-hover-opaque: var(--color-box-header); --color-hover-opaque: #{color.get('elevation/6', 'rgb')};
--color-active: #{color.get('elevation/4')}; --color-active: #{color.get('elevation/4')};
--color-menu: #{color.get('elevation/4')}; --color-menu: #{color.get('elevation/4')};
--color-card: #{color.get('elevation/3')}; --color-card: #{color.get('elevation/3')};