` 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
--
-```
-
-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!
\ No newline at end of file
diff --git a/figs/dark.png b/figs/dark.png
deleted file mode 100644
index b5c07eb..0000000
Binary files a/figs/dark.png and /dev/null differ
diff --git a/figs/issue.png b/figs/issue.png
new file mode 100644
index 0000000..6a3abc0
Binary files /dev/null and b/figs/issue.png differ
diff --git a/figs/light.png b/figs/light.png
deleted file mode 100644
index 62ebba5..0000000
Binary files a/figs/light.png and /dev/null differ
diff --git a/figs/pr.png b/figs/pr.png
new file mode 100644
index 0000000..12b2117
Binary files /dev/null and b/figs/pr.png differ
diff --git a/figs/repo.png b/figs/repo.png
new file mode 100644
index 0000000..47867e1
Binary files /dev/null and b/figs/repo.png differ
diff --git a/figs/settings.png b/figs/settings.png
new file mode 100644
index 0000000..9d1529b
Binary files /dev/null and b/figs/settings.png differ
diff --git a/src/themes/scss/_vars.scss b/src/themes/scss/_vars.scss
new file mode 100644
index 0000000..c7c4e38
--- /dev/null
+++ b/src/themes/scss/_vars.scss
@@ -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,
+ )
+);
\ No newline at end of file
diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss
index 9fd02de..0ab8b53 100644
--- a/src/themes/scss/dark.scss
+++ b/src/themes/scss/dark.scss
@@ -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,
diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss
index 448e107..2de837d 100644
--- a/src/themes/scss/light.scss
+++ b/src/themes/scss/light.scss
@@ -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,
diff --git a/src/themes/scss/theme/components/_editor.scss b/src/themes/scss/theme/components/_editor.scss
index 0440ed4..af6f0c6 100644
--- a/src/themes/scss/theme/components/_editor.scss
+++ b/src/themes/scss/theme/components/_editor.scss
@@ -125,7 +125,11 @@
&:focus-within {
outline: 2px solid var(--color-accent);
border-radius: var(--border-radius);
- }
+ }
+
+ textarea:focus {
+ outline: none;
+ }
}
.field {
diff --git a/src/themes/scss/theme/components/_forms.scss b/src/themes/scss/theme/components/_forms.scss
new file mode 100644
index 0000000..99d3d71
--- /dev/null
+++ b/src/themes/scss/theme/components/_forms.scss
@@ -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;
+}
+
diff --git a/src/themes/scss/theme/components/_signed-label.scss b/src/themes/scss/theme/components/_labels.scss
similarity index 75%
rename from src/themes/scss/theme/components/_signed-label.scss
rename to src/themes/scss/theme/components/_labels.scss
index 32d1c0c..4746cb2 100644
--- a/src/themes/scss/theme/components/_signed-label.scss
+++ b/src/themes/scss/theme/components/_labels.scss
@@ -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;
+ }
+
+ }
+
}
\ No newline at end of file
diff --git a/src/themes/scss/theme/components/_menu.scss b/src/themes/scss/theme/components/_menu.scss
deleted file mode 100644
index 5da630a..0000000
--- a/src/themes/scss/theme/components/_menu.scss
+++ /dev/null
@@ -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;
- }
- }
- }
- }
- }
- }
-}
-
diff --git a/src/themes/scss/theme/components/button/index.scss b/src/themes/scss/theme/components/button/index.scss
index 7e90e5a..b60afe1 100644
--- a/src/themes/scss/theme/components/button/index.scss
+++ b/src/themes/scss/theme/components/button/index.scss
@@ -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;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/themes/scss/theme/components/forms/_dropdown-menu.scss b/src/themes/scss/theme/components/forms/_dropdown-menu.scss
new file mode 100644
index 0000000..de1c88a
--- /dev/null
+++ b/src/themes/scss/theme/components/forms/_dropdown-menu.scss
@@ -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;
+ }
+ }
+
+ //
+ //
+ // Breaking change that won't be backward compatible
+ //
+ //
+
+ .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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/themes/scss/theme/components/forms/_input.scss b/src/themes/scss/theme/components/forms/_input.scss
new file mode 100644
index 0000000..c0bfb09
--- /dev/null
+++ b/src/themes/scss/theme/components/forms/_input.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/themes/scss/theme/components/forms/index.scss b/src/themes/scss/theme/components/forms/index.scss
new file mode 100644
index 0000000..2a3a3ae
--- /dev/null
+++ b/src/themes/scss/theme/components/forms/index.scss
@@ -0,0 +1,2 @@
+@forward './dropdown-menu';
+@forward './input';
\ No newline at end of file
diff --git a/src/themes/scss/theme/components/index.scss b/src/themes/scss/theme/components/index.scss
index 6733dff..dfc8fd7 100644
--- a/src/themes/scss/theme/components/index.scss
+++ b/src/themes/scss/theme/components/index.scss
@@ -1,5 +1,6 @@
-@forward './signed-label';
+@forward './labels';
@forward './editor';
-@forward './menu';
+@forward './forms';
@forward './file-content';
-@forward './avatar';
\ No newline at end of file
+@forward './avatar';
+@forward './button';
\ No newline at end of file
diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss
index bab5db6..94bb691 100644
--- a/src/themes/scss/theme/index.scss
+++ b/src/themes/scss/theme/index.scss
@@ -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
diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss
index 97253cf..37593a0 100644
--- a/src/themes/scss/theme/modules/index.scss
+++ b/src/themes/scss/theme/modules/index.scss
@@ -2,4 +2,5 @@
@forward './issues';
@forward './chroma';
@forward './codemirror';
-@forward './monaco';
\ No newline at end of file
+@forward './monaco';
+@forward './settings';
\ No newline at end of file
diff --git a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss
index a92a622..17c8a4a 100644
--- a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss
+++ b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss
@@ -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 {
diff --git a/src/themes/scss/theme/modules/settings/_pages.scss b/src/themes/scss/theme/modules/settings/_pages.scss
new file mode 100644
index 0000000..a582d42
--- /dev/null
+++ b/src/themes/scss/theme/modules/settings/_pages.scss
@@ -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;
+ }
+ }
+
+ }
+}
diff --git a/src/themes/scss/theme/modules/settings/index.scss b/src/themes/scss/theme/modules/settings/index.scss
new file mode 100644
index 0000000..7282697
--- /dev/null
+++ b/src/themes/scss/theme/modules/settings/index.scss
@@ -0,0 +1,5 @@
+@use './pages';
+
+@mixin settings {
+ @include pages.settings-pages;
+}
\ No newline at end of file
diff --git a/src/themes/scss/theme/modules/settings/section/_content.scss b/src/themes/scss/theme/modules/settings/section/_content.scss
new file mode 100644
index 0000000..8e94e55
--- /dev/null
+++ b/src/themes/scss/theme/modules/settings/section/_content.scss
@@ -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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/themes/scss/theme/modules/settings/section/_nav.scss b/src/themes/scss/theme/modules/settings/section/_nav.scss
new file mode 100644
index 0000000..50300bd
--- /dev/null
+++ b/src/themes/scss/theme/modules/settings/section/_nav.scss
@@ -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,
');
+
+ 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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/themes/scss/theme/modules/settings/section/index.scss b/src/themes/scss/theme/modules/settings/section/index.scss
new file mode 100644
index 0000000..aa3adbd
--- /dev/null
+++ b/src/themes/scss/theme/modules/settings/section/index.scss
@@ -0,0 +1,2 @@
+@forward './nav';
+@forward './content';
\ No newline at end of file
diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss
index 64f926e..f079a1d 100644
--- a/src/themes/scss/theme/vars/_colors.scss
+++ b/src/themes/scss/theme/vars/_colors.scss
@@ -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')};
+
+
+
-+