diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less index fb8a443482..ccb11777d6 100644 --- a/styles/codeberg/catppuccin.user.less +++ b/styles/codeberg/catppuccin.user.less @@ -33,6 +33,7 @@ @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } + @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } @@ -44,11 +45,30 @@ --color-body: @base; --color-nav-text: @crust; - --color-nav-hover-bg: darken(@accent, 5%); --color-secondary-nav-bg: @surface0; + --color-nav-hover-bg: @surface1; + --color-nav-active-bg: @surface2; --color-link: @blue; --color-footer-text: @text; + .ui.secondary.menu { + .dropdown.item, .item, .active.item { + &:hover { + background-color: var(--color-nav-hover-bg); + } + + &:active, &:focus { + background-color: var(--color-nav-active-bg); + } + } + + &.pointing { + .active.item, .dropdown.item:is(:hover, :focus) { + color: var(--color-text-dark); + } + } + } + .ui.basic.red.buttons .button, .ui.basic.red.button { &:hover, @@ -59,6 +79,37 @@ } } + .sha.label { + &.isSigned { + &.isVerified { + color: @green; + + .signature { + --color-light: fade(@green, 30%); + } + } + + &.isWarning { + color: @red; + + .signature { + --color-light: fade(@red, 30%); + } + } + } + } + + /* HUNK HEADER */ + .tag-code, + .tag-code td { + color: @peach !important; + background-color: @surface0 !important; + + &.lines-num { + background-color: @surface1 !important; + } + } + #codeberg-logo(@color) { @svg: escape( '' @@ -72,27 +123,85 @@ } } + /* NAVBAR */ #navbar { - a#navbar-logo { - img { - #codeberg-logo(@base); + background-color: var(--color-nav-bg) !important; + + > .menu, + > .menu .menu { + a, + details > summary, + button { + color: @text !important; + + &.item { + &:hover { + background-color: @accent !important; + color: @base !important; + } + + &:active, &:focus { + background-color: darken(@accent, 5%) !important; + color: @base !important; + } + + &.active { + background-color: @accent !important; + color: @base !important; + + &:hover { + background-color: darken(@accent, 5%) !important; + color: @base !important; + } + + &:active, &:focus { + background-color: darken(@accent, 10%) !important; + color: @base !important; + } + } + } } - } - .menu { - > a, button, details > summary { - color: @base; + details.dropdown[open] > summary { + background-color: @accent !important; + color: @base !important; } - .donation-pretty { - --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%) - !important; + a.donation-pretty { + --donation-pretty-gradient-color-1: @accent; + --donation-pretty-gradient-color-2: darken(@accent, 5%); + color: @base !important; &:hover { - background: darken(@accent, 3%) !important; + --donation-pretty-gradient-color-1: darken(@accent, 5%); + --donation-pretty-gradient-color-2: darken(@accent, 10%); } + + &:active, &:focus { + --donation-pretty-gradient-color-1: darken(@accent, 10%); + --donation-pretty-gradient-color-2: darken(@accent, 15%); + } + } + } + + a#navbar-logo { + img { + #codeberg-logo(@accent); + } + + &:hover img { + #codeberg-logo(@base); } } + + img[src^="/assets/img/svg/forgejo-wordmark"] { + filter: @text-filter; + } + } + + /* Otherwise we've got @blue on @green, which is impossible to see :] */ + .repository .ui.attached.isSigned.isVerified.bottom a strong { + color: @crust; } footer { @@ -104,6 +213,120 @@ a:hover { color: @blue !important; } + + .language.button { + &:not(.active) { + &:hover { + color: @base; + background-color: darken(@accent, 5%); + } + + &:active, &:focus { + color: @base; + background-color: darken(@accent, 10%); + } + } + + &.active { + color: @base; + background-color: @accent; + } + } + } + + /* HOMEPAGE */ + main { + a.button { + svg { + filter: drop-shadow(-1px -2px 0 @yellow); + } + + &:hover svg { + filter: drop-shadow(-1px -2px 0 darken(@yellow, 10%)); + } + } + + header { + color: @text; + + .header-social-links a { + color: @accent; + + &:hover { + color: darken(@accent, 5%); + } + } + + .header-logo img { + filter: @text-filter; + } + } + + section#home-section-about { + color: @text; + + .home-section-about-box-container { + .home-section-about-box { + background-image: linear-gradient( + to top, + fade(@accent, 30%) 40%, + fade(@accent, 40%) + ); + } + + .home-section-about-register-button-container a { + color: @base; + text-shadow: -1px -2px 0 @yellow; + background-color: @yellow; + + &:hover { + text-shadow: -1px -2px 0 darken(@yellow, 10%); + background-color: darken(@yellow, 5%); + } + } + } + + .home-section-about-container div { + color: @accent; + + p.powered-by-forgejo a { + color: @accent; + } + } + } + + section#home-section-support { + color: @text; + + /* Yellow buttons */ + + div a { + color: @base; + text-shadow: -1px -2px 0 @yellow; + background-color: @yellow; + + &:hover { + text-shadow: -1px -2px 0 darken(@yellow, 10%); + background-color: darken(@yellow, 5%); + } + } + + /* Your support helps us grow! :hearts: */ + + h3 svg.svg.codeberg-icon-hearts { + path:nth-child(1) { + fill: @peach !important; + } + + path:nth-child(2) { + fill: @yellow !important; + } + + path:nth-child(3) { + fill: @sapphire !important; + } + } + } } } }