From 7957f0c426d0781f3d6f1d4f69b9935c687cb804 Mon Sep 17 00:00:00 2001 From: Lucas Colombo Date: Fri, 24 Jan 2025 09:13:27 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20enhance=20styling=20and=20s?= =?UTF-8?q?tructure=20of=20forms,=20buttons,=20and=20repository=20settings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/scss/theme/components/_boxes.scss | 124 ++++++++++ src/themes/scss/theme/components/_editor.scss | 212 ++++++++--------- src/themes/scss/theme/components/_forms.scss | 1 + src/themes/scss/theme/components/_labels.scss | 6 +- .../scss/theme/components/button/index.scss | 47 +++- .../scss/theme/components/forms/_menu.scss | 13 +- src/themes/scss/theme/components/index.scss | 3 +- src/themes/scss/theme/index.scss | 2 + .../scss/theme/modules/issues/_issue.scss | 216 ++++++++++++------ src/themes/scss/theme/modules/repo/_home.scss | 80 ++++++- .../scss/theme/modules/settings/_pages.scss | 3 +- src/themes/scss/theme/vars/_base.scss | 2 +- src/themes/scss/theme/vars/_colors.scss | 5 +- 13 files changed, 530 insertions(+), 184 deletions(-) create mode 100644 src/themes/scss/theme/components/_boxes.scss diff --git a/src/themes/scss/theme/components/_boxes.scss b/src/themes/scss/theme/components/_boxes.scss new file mode 100644 index 0000000..211e3d5 --- /dev/null +++ b/src/themes/scss/theme/components/_boxes.scss @@ -0,0 +1,124 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin segment { + .ui.top.attached.header { + border-radius: var(--border-radius) var(--border-radius) 0 0; + } + + .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + .ui.segments:not(.horizontal)>.segment:first-child { + border-radius: var(--border-radius); + } + + .ui.segments:not(.horizontal)>.segment:last-child { + border-radius: var(--border-radius); + } + + .ui.segment { + border-radius: var(--border-radius); + } +} + +@mixin comments { + .comment { + .content { + background-color: var(--color-box-body); + + >.comment-header, >.ui.segment { + &:before, &:after { + display: none; + } + } + + .comment-header { + padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important; + + .comment-header-left { + .text { + color: color.get('subtle') !important; + + .author { + color: color.get('text') !important; + } + } + } + + .comment-header-right { + * { + color: color.get('subtle') !important; + } + + .label { + height: var.get('measure/1.25x', 1.25rem) !important; + padding: 0px var.get('measure/.375x') !important; + border-radius: var.get('measure/1x') !important; + } + } + } + } + + // comment form at the end + &.form:not(.issue-content) { + display: flex; + align-items: flex-start; + background-color: var(--color-body); + gap: var.get('measure/1x'); + left: -68px !important; + width: calc(100% + 68px - 16px) !important; + + @media (max-width: 768px) { + left: 0 !important; + margin-left: -16px !important; + width: auto !important; + } + + .timeline-avatar { + display: block; + position: relative !important; + left: unset !important; + flex: 0 0 auto !important; + } + + .content { + // fake title to mimic github new issue page + &:before { + display: block; + content: 'Add a comment'; + font-weight: 600; + margin-bottom: var.get('measure/1x'); + margin-top: var.get('measure/.5x'); + font-size: var.get('font-size/lg'); + } + + display: block; + position: relative !important; + margin-left: 0 !important; + flex: 1; + + .ui.segment { + padding: 0 !important; + border: none !important; + } + } + } + } + + .comment-list .comment>.content>div:last-child { + border-bottom-left-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } + + .comment-list .comment>.content>div:first-child { + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + } + + .ui.comments .comment { + margin: var.get('measure/.25x') 0 0; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/_editor.scss b/src/themes/scss/theme/components/_editor.scss index af6f0c6..1a27735 100644 --- a/src/themes/scss/theme/components/_editor.scss +++ b/src/themes/scss/theme/components/_editor.scss @@ -2,136 +2,140 @@ @use '@lucas-labs/lui-micro/color' as color; @mixin editor { - #comment-form, .edit-content-zone { - padding: 0 !important; - border: none !important; - - .combo-markdown-editor { - .top.tabular.menu { - background-color: var(--color-box-header); - border-radius: var(--border-radius) var(--border-radius) 0 0; - min-height: 0px; - margin-bottom: var.get('measure/1x') !important; - - .item { - margin: -1px 0 0 -1px; // merge borders - border-top-left-radius: var(--border-radius) !important; - border-top-right-radius: var(--border-radius) !important; - padding: var.get('measure/.5x') var.get('measure/.75x') !important; - font-weight: 400; + .combo-markdown-editor { + .top.tabular.menu { + background-color: var(--color-box-header); + border-radius: var(--border-radius) var(--border-radius) 0 0; + min-height: 0px; + margin-bottom: var.get('measure/1x') !important; + + .item { + margin: -1px 0 0 -1px; // merge borders + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + padding: var.get('measure/.5x') var.get('measure/.75x') !important; + font-weight: 400; + + &:hover { + color: var(--color-text-light-2); + } - &:hover { - color: var(--color-text-light-2); + &.active { + color: var(--color-text); + &:after { + // a hacky 1 pixel "button border" to make the border + // of the whole menu disappear under the active tab + display: block; + content: ''; + position: absolute; + top: 100%; + right: 0; + width: 100%; + height: 1px; + background-color: var(--color-body); } + } + } + } - &.active { - color: var(--color-text); - &:after { - // a hacky 1 pixel "button border" to make the border - // of the whole menu disappear under the active tab - display: block; - content: ''; - position: absolute; - top: 100%; - right: 0; - width: 100%; - height: 1px; - background-color: var(--color-body); - } - } + .tab { + .EasyMDEContainer { // legacy editor + border: none !important; + + .editor-toolbar { + border: none !important; } } - .tab { - .EasyMDEContainer { // legacy editor + markdown-toolbar, .EasyMDEContainer .editor-toolbar { + padding: 0 10px !important; + + .markdown-toolbar-group { border: none !important; + padding: 0 !important; - .editor-toolbar { - border: none !important; + &:not(:last-child) { + &:after { + content: ''; + display: block; + position: relative; + width: 1px; + flex: 1; + margin: var.get('measure/.375x') var.get('measure/.375x') !important; + background-color: color.get('elevation/6'); + } } } - markdown-toolbar, .EasyMDEContainer .editor-toolbar { - padding: 0 10px !important; - - .markdown-toolbar-group { - border: none !important; - padding: 0 !important; - - &:not(:last-child) { - &:after { - content: ''; - display: block; - position: relative; - width: 1px; - flex: 1; - margin: var.get('measure/.375x') var.get('measure/.375x') !important; - background-color: color.get('elevation/6'); - } - } - } + .markdown-toolbar-button, button { + line-height: 0; + display: inline-block; + color: var(--color-text-light-2) !important; + padding: var.get('measure/.375x') !important; + transition: background-color .1s ease; + border-radius: var.get('measure/.375x') !important; + height: auto; + min-width: fit-content; - .markdown-toolbar-button, button { - line-height: 0; - display: inline-block; - color: var(--color-text-light-2) !important; - padding: var.get('measure/.375x') !important; - transition: background-color .1s ease; - border-radius: var.get('measure/.375x') !important; - height: auto; - min-width: fit-content; - - &:hover { - background-color: color.get('elevation/5') !important; - } - - // if has attribute level - &[level] { - width: 34px; - } - - // if aria-checked is true - &[aria-checked="true"] { - background-color: color.get('elevation/4'); - } + &:hover { + background-color: color.get('elevation/5') !important; + } + + // if has attribute level + &[level] { + width: 34px; } - button { - &:after { - vertical-align: unset !important; - } + // if aria-checked is true + &[aria-checked="true"] { + background-color: color.get('elevation/4'); } } - - textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { - background-color: transparent !important; - border: none !important; - padding: var.get('measure/1x') var.get('measure/1x') !important; - } - .editor-statusbar { - margin-bottom: 0 !important; + button { + &:after { + vertical-align: unset !important; + } } + } + + textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { + background-color: transparent !important; + border: none !important; + padding: var.get('measure/1x') var.get('measure/1x') !important; + } - &.markup { - padding: 0 var.get('measure/1x') var.get('measure/1x'); - } + .editor-statusbar { + margin-bottom: 0 !important; + } + + &.markup { + padding: 0 var.get('measure/1x') var.get('measure/1x'); } } + } - .field:first-child { - border: 1px solid var(--color-secondary); + .combo-markdown-editor { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + &:focus-within { + outline: 2px solid var(--color-accent); border-radius: var(--border-radius); - &:focus-within { - outline: 2px solid var(--color-accent); - border-radius: var(--border-radius); - } + } - textarea:focus { - outline: none; - } + textarea:focus { + outline: none !important; } + .ui.tab.markup[data-tab-panel=markdown-previewer] { + border-bottom: 0px; + } + } + + #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form { + padding: 0 !important; + border: none !important; + .field { margin-bottom: var.get('measure/1x') !important; } diff --git a/src/themes/scss/theme/components/_forms.scss b/src/themes/scss/theme/components/_forms.scss index c27a506..f92368d 100644 --- a/src/themes/scss/theme/components/_forms.scss +++ b/src/themes/scss/theme/components/_forms.scss @@ -5,6 +5,7 @@ @mixin forms { @include forms.dropdown-menu; @include forms.menu; + @include forms.tabular-menu; @include forms.input; } diff --git a/src/themes/scss/theme/components/_labels.scss b/src/themes/scss/theme/components/_labels.scss index 42e5cef..caa84b6 100644 --- a/src/themes/scss/theme/components/_labels.scss +++ b/src/themes/scss/theme/components/_labels.scss @@ -53,8 +53,12 @@ border-bottom-left-radius: 0; } - &.green, &.red { + &.green { color: var(--color-green-contrast) !important; } + + &.red { + color: var(--color-red-contrast) !important; + } } } \ No newline at end of file diff --git a/src/themes/scss/theme/components/button/index.scss b/src/themes/scss/theme/components/button/index.scss index 5037447..ed89f6d 100644 --- a/src/themes/scss/theme/components/button/index.scss +++ b/src/themes/scss/theme/components/button/index.scss @@ -50,13 +50,56 @@ } @mixin gitea-button { + .ui.icon.buttons .button, .ui.icon.button:not(.compact) { + // padding: 50px; + } + + .code-comment-buttons-buttons { + button:not(.labeled):not(.icon) { + padding: .78571429em !important; + } + } + + // buttons group + .ui.buttons { + &.icon .button, &.icon:not(.compact) { + padding: 50px 50px; + } + + .button { + &:first-child { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.button:last-child { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + border-right: none; + flex: 1 0 auto; + border-radius: 0; + margin: 0; + } + } + .ui.button { border-radius: var(--border-radius); transition: color .1s ease, background-color .1s ease, border-color .1s ease; padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x'); - font-size: var.get('font-size/md') !important; + font-size: var.get('font-size/md'); line-height: 20px; + &.tiny { + font-size: var.get('font-size/sm'); + line-height: var.get('font-size/sm'); + } + &.basic { border-radius: var(--border-radius); } @@ -80,4 +123,6 @@ font-weight: 500; } } + + } \ No newline at end of file diff --git a/src/themes/scss/theme/components/forms/_menu.scss b/src/themes/scss/theme/components/forms/_menu.scss index 37ef84c..6e7b2c2 100644 --- a/src/themes/scss/theme/components/forms/_menu.scss +++ b/src/themes/scss/theme/components/forms/_menu.scss @@ -161,16 +161,19 @@ 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'); + &.visible { + display: flex; + } + .item { border: none !important; } } } - } + } } @mixin menu { @@ -202,4 +205,10 @@ background: var(--color-hover); } } +} + +@mixin tabular-menu { + .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { + border-radius: var(--border-radius) var(--border-radius) 0 0 !important; + } } \ 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 dfc8fd7..6e9c470 100644 --- a/src/themes/scss/theme/components/index.scss +++ b/src/themes/scss/theme/components/index.scss @@ -3,4 +3,5 @@ @forward './forms'; @forward './file-content'; @forward './avatar'; -@forward './button'; \ No newline at end of file +@forward './button'; +@forward './boxes'; \ No newline at end of file diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index 94bb691..dca2314 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -14,6 +14,8 @@ @include components.file-content; // github-style file content @include components.avatar; // github-style avatars @include components.gitea-button; // github-style buttons + @include components.segment; + @include components.comments; // github-style comment boxes // code highlighting @include modules.chroma($is-dark); // syntax highlighting diff --git a/src/themes/scss/theme/modules/issues/_issue.scss b/src/themes/scss/theme/modules/issues/_issue.scss index 7187cc4..84ea330 100644 --- a/src/themes/scss/theme/modules/issues/_issue.scss +++ b/src/themes/scss/theme/modules/issues/_issue.scss @@ -22,6 +22,12 @@ .issue-title-meta { color: color.get('subtle'); } + + &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector) + margin-bottom: var.get('measure/1x'); + padding-bottom: var.get('measure/.5x'); + border-bottom: none; + } } .issue-content { @@ -35,97 +41,171 @@ } .timeline-item { - &.comment { - .content { - background-color: var(--color-box-body); + &.event { + .badge { + // and not contains a tw-bg-* class + &:not([class*="tw-bg-"]) { + color: var(--color-timeline-badge-fg) !important; + } - >.comment-header, >.ui.segment { - &:before, &:after { - display: none; - } + &.tw-bg-green.tw-text-white { + color: var(--color-green-contrast) !important; + } + + &.tw-bg-red.tw-text-white { + color: var(--color-red-contrast) !important; } + } + + .ui.segments.conversation-holder { + margin-left: var.get('measure/.5x'); + border-radius: var(--border-radius); + } + } + } + + .repository.view.issue { + --avatar-size: 24px; + + .comment-list .ui.comments { + background-color: transparent; + gap: var.get('measure/1x'); + position: relative; + } - .comment-header { - padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important; + .comment-list { + .ui.comment-code-cloud.segment { + padding: 0 var.get('measure/.5x') var.get('measure/.5x') !important; - .comment-header-left { - .text { - color: color.get('subtle') !important; + .ui.comments { + gap: var.get('measure/.5x'); - .author { - color: color.get('text') !important; + &:before { + display: block; + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: calc((var(--avatar-size) / 2) - 1px); + top: 16px; + width: 3px; + background-color: var(--color-timeline); + opacity: 50%; + } + + .comment.code-comment .content.comment-container{ + background-color: transparent !important; + + .header.comment-header { + .comment-header-left { + gap: var.get('measure/.5x'); + .avatar img { + z-index: 1 !important; + width: var(--avatar-size) !important; + height: var(--avatar-size) !important; + } } } } + } - .comment-header-right { - * { - color: color.get('subtle') !important; - } - - .label { - height: var.get('measure/1.25x', 1.25rem) !important; - padding: 0px var.get('measure/.375x') !important; - border-radius: var.get('measure/1x') !important; + .code-comment-buttons { + margin: 0!important; + } + + .comment-form { + margin-top: var.get('measure/1x'); + + .field.footer { + margin: 0 !important; + padding: 0 !important; + + button { + padding: var.get('measure/.5x') var.get('measure/1x') !important; } } } } + } + } - // comment form at the end - &.form { - display: flex; - align-items: flex-start; - background-color: var(--color-body); - gap: var.get('measure/1x'); - left: -68px !important; - width: calc(100% + 68px - 16px) !important; - - @media (max-width: 768px) { - left: 0 !important; - margin-left: -16px !important; - width: auto !important; - } + .repository .ui.tabs.divider { + margin-bottom: var.get('measure/1x'); + } - .timeline-avatar { - display: block; - position: relative !important; - left: unset !important; - flex: 0 0 auto !important; - } + .repository .diff-detail-box { // diff page detail box + padding: var.get('measure/.5x') 0; + margin: calc(var.get('measure/1x') * -1) 0 0 0; + height: 60px; + } - .content { - // fake title to mimic github new issue page - &:before { - display: block; - content: 'Add a comment'; - font-weight: 600; - margin-bottom: var.get('measure/1x'); - margin-top: var.get('measure/.5x'); - font-size: var.get('font-size/lg'); - } + .repository #diff-container { + #diff-file-tree { + top: 60px; + .diff-file-tree-items { + margin: 0; + } + } - display: block; - position: relative !important; - margin-left: 0 !important; - flex: 1; + column-gap: var.get('measure/1x'); - .ui.segment { - padding: 0 !important; - border: none !important; + .diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * { + border-bottom-left-radius: calc(var(--border-radius) - 2px); + } + + .diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * { + border-bottom-right-radius: var(--border-radius); + } + + .ui.attached.header.diff-file-header.sticky-2nd-row { + position: sticky; + top: 60px; + z-index: 7; + } + + .add-comment { + border-top: 1px solid var(--color-secondary); + border-bottom: 1px solid var(--color-secondary); + + .conversation-holder { + .comment-code-cloud { + padding: var.get('measure/.75x') !important; + form { + &:not(:first-child) { + margin-top: var.get('measure/.5x'); + } + + .field.footer { + margin: 0 !important; + padding: 0 !important; + + button { + padding: var.get('measure/.5x') var.get('measure/1x') !important; + } + } } } } } } - .repository.view.issue .comment-list .comment>.content>div:last-child { - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } + // new issue page + .page-content.repository.new.issue { + .issue-content-left { + .ui.comments .comment { + .ui.segment.content { + padding: 6px 0 0; + border: none; - .repository.view.issue .comment-list .comment>.content>div:first-child { - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - } + .field { + margin-bottom: var.get('measure/1x'); + } + + &:before, &:after { + display: none; + } + } + } + } + } } diff --git a/src/themes/scss/theme/modules/repo/_home.scss b/src/themes/scss/theme/modules/repo/_home.scss index 2bb4c2d..01a8e8c 100644 --- a/src/themes/scss/theme/modules/repo/_home.scss +++ b/src/themes/scss/theme/modules/repo/_home.scss @@ -39,7 +39,14 @@ .repo-description { margin-bottom: var.get('measure/1x'); - } + + +a.flex-text-block { + svg { + color: color.get('subtle') !important; + } + margin-bottom: var.get('measure/1x'); + } + } .flex-text-block { gap: var.get('measure/.25x') !important; @@ -53,6 +60,10 @@ @media (max-width: 768px) { .repo-description { margin-top: 0 !important; + + +a.flex-text-block { + margin-bottom: 0; + } } #repo-topics, #manage_topic, .flex-item-title { @@ -105,7 +116,6 @@ gap: 0 !important; .language-stats { - background-color: red !important; margin: 0 !important; height: var.get('measure/.5x') !important; margin-bottom: var.get('measure/.5x') !important; @@ -164,4 +174,70 @@ } } } + + button.ui.primary.button.js-btn-clone-panel { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.5x'); + align-items: center; + + span { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.375x'); + align-items: center; + } + } + + .clone-panel-popup { + .clone-panel-field { + margin: var.get('measure/1x'); + } + + .clone-panel-list { + margin: var.get('measure/1x'); + + .item { + margin: var.get('measure/.5x') 0; + } + } + + .clone-panel-tab { + padding: 0 var.get('measure/1x') var.get('measure/.5x'); + display: flex; + gap: var.get('measure/.5x'); + + button { + padding: var.get('measure/.375x') var.get('measure/.5x'); + font-weight: 600; + + &.active { + border-bottom: 0; + position: relative; + + &:after { + content: ''; + display: block; + position: absolute; + bottom: -7px; + left: 0; + width: 100%; + height: 2px; + background-color: color.get('primary/base'); + } + } + + &:hover { + background-color: var(--color-hover); + border-radius: var(--border-radius); + transition: background 0.12s ease-out; + text-decoration: none; + } + } + } + } + + .tippy-svg-arrow { + display: none; + } } diff --git a/src/themes/scss/theme/modules/settings/_pages.scss b/src/themes/scss/theme/modules/settings/_pages.scss index a582d42..2595c99 100644 --- a/src/themes/scss/theme/modules/settings/_pages.scss +++ b/src/themes/scss/theme/modules/settings/_pages.scss @@ -3,7 +3,7 @@ @use './section'; @mixin settings-pages { - .page-content.user.settings, .page-content.admin { + .page-content.user.settings, .page-content.admin, .page-content.repository.settings { .ui.flex-container { column-gap: 40px; @@ -16,6 +16,5 @@ @include section.content; } } - } } diff --git a/src/themes/scss/theme/vars/_base.scss b/src/themes/scss/theme/vars/_base.scss index 5155ec2..f9583b9 100644 --- a/src/themes/scss/theme/vars/_base.scss +++ b/src/themes/scss/theme/vars/_base.scss @@ -40,7 +40,7 @@ --opacity-disabled: 0.55; --height-loading: 16rem; --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported - --checkbox-size: 15px; // height and width of checkbox and radio inputs + --checkbox-size: 16px; // height and width of checkbox and radio inputs --page-spacing: 24px; // space between page elements --page-margin-x: 32px; // minimum space on left and right side of page --tab-size: 4; diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss index f079a1d..6f171a5 100644 --- a/src/themes/scss/theme/vars/_colors.scss +++ b/src/themes/scss/theme/vars/_colors.scss @@ -123,7 +123,7 @@ --color-purple: #{color.get('palette/purple/base')}; --color-pink: #{color.get('palette/pink/base')}; --color-brown: #{color.get('palette/brown/base')}; - --color-black: #{color.get('elevation/1')}; + --color-black: #{color.get('palette/black/base')}; // ┌───────┐ // │ named │ » contrasts (lugit addition) @@ -287,6 +287,7 @@ --color-text-light-3: #{color.get('subtle')}; --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); --color-timeline: #{color.get('elevation/5')}; + --color-timeline-badge-fg: #{if($is-dark, var(--color-white), var.get('color-text'))}; // box --color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)}; @@ -306,7 +307,7 @@ --color-light-border: #{color.get('elevation/6')}; --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); --color-hover-opaque: #{color.get('elevation/6', 'rgb')}; - --color-active: #{color.get('elevation/4')}; + --color-active: #{color.get('elevation/5')}; --color-menu: #{color.get('elevation/4')}; --color-card: #{color.get('elevation/3')}; --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);