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

feat: ✨ update menu and navbar styles for improved theming and responsiveness

Browse Source
This commit is contained in:
Lucas Colombo 2025-01-20 12:29:53 -03:00
parent eb2bd86706
commit c944245035
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,8 @@
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(#{color.get('elevation/1', 'rgb')}, 0.5),
0px 6px 18px 0px rgba(#{color.get('elevation/1', 'rgb')}, 0.1) !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;

2
src/themes/scss/theme/modules/repo/_secondary-navbar.scss
View File

@ -123,7 +123,7 @@
}
&:hover {
background-color: color.get('elevation/4') !important;
background-color: var(--color-secondary-nav-hover-bg) !important;
color: var(--color-text-light-2) !important;
}

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

@ -307,8 +307,11 @@
--color-markup-code-inline: #{color.get('elevation/4')};
--color-button: #{color.get('elevation/4')};
--color-code-bg: #{color.get('elevation/3')};
--color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5);
--color-shadow-opaque: #{color.get('elevation/1')};
--color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))};
--color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};
--color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))};
--color-secondary-bg: #{color.get('elevation/4')};
--color-expand-button: #{color.get('elevation/6')};
--color-placeholder-text: #{color.get('elevation/9')};
@ -318,15 +321,16 @@
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
--color-tooltip-text: var(--color-text);
--color-tooltip-bg: #{color.get('elevation/7')};
--color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
--color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
// navbar
--color-nav-bg: #{color.get('elevation/2')};;
--color-nav-hover-bg: #{color.get('elevation/5')};
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: #{color.get('elevation/2')};;
--color-nav-bg: #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
--color-nav-hover-bg: #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/4'), color.get('elevation/5')))};
--color-nav-text: #{color.get('navbar/fg', $default: var(--color-text))};
--color-secondary-nav-bg: #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
--color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))};
// label
--color-label-text: var(--color-text);