From cf7c3674168a441076184499e83c82e692e28613 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Thu, 6 Oct 2022 21:27:20 +0200 Subject: [PATCH] Several gitea changes: - Add monokai theme - Set package to unstable - Set landing page to explore --- hosts/tsuki/services/gitea/default.nix | 56 ++- .../theme-monokai.less} | 435 ++++++++++++------ 2 files changed, 338 insertions(+), 153 deletions(-) rename hosts/tsuki/services/gitea/{monokai.less => themes/theme-monokai.less} (55%) diff --git a/hosts/tsuki/services/gitea/default.nix b/hosts/tsuki/services/gitea/default.nix index d56b54c..189f411 100644 --- a/hosts/tsuki/services/gitea/default.nix +++ b/hosts/tsuki/services/gitea/default.nix @@ -1,15 +1,4 @@ -{config, pkgs, lib, secrets, ...}: -let - - # TODO: Include monokai - - # pkgs.writeTextFile - # { - # name = "monokai.css"; - # text = ''''; - - # } -in +{ config, pkgs, unstable-pkgs, lib, secrets, ... }: { security.pam.services."gitea".unixAuth = true; @@ -26,13 +15,14 @@ in services.gitea = { enable = true; user = "git"; - appName = "Git Gud"; cookieSecure = true; rootUrl = "https://git.nani.wtf/"; domain = "git.nani.wtf"; httpPort = secrets.ports.gitea; disableRegistration = true; + package = unstable-pkgs.gitea; + dump = { enable = true; interval = "hourly"; @@ -45,14 +35,17 @@ in settings = { server = { BUILTIN_SSH_SERVER_USER="git"; + LANDING_PAGE = "/explore/repos"; }; ui = { - DEFAULT_THEME = "arc-green"; + DEFAULT_THEME = "monokai"; THEMES = lib.strings.concatStringsSep "," [ "gitea" "arc-green" - # "monokai" + + # Custom + "monokai" ]; }; indexer.REPO_INDEXER_ENABLED = true; @@ -84,4 +77,37 @@ in # }; }; }; + + system.activationScripts.linkGiteaThemes.text = let + themes = pkgs.stdenv.mkDerivation { + pname = "gitea-themes"; + version = "1.0.0"; + src = ./themes; + + buildInputs = with pkgs; [ lessc ]; + buildPhase = '' + mkdir out + for f in $(find -name 'theme-*.less') + do + lessc $f out/''${f%.less}.css + done; + ''; + installPhase = "mv out $out"; + }; + cssParentPath = "${config.services.gitea.stateDir}/custom/public"; + cssPath = "${cssParentPath}/css"; + in '' + if [[ ! -e "${cssPath}" ]]; then + printf "creating symlink at %s...\n" "${cssPath}" + mkdir -p "${cssParentPath}" + ln -s "${themes}" "${cssPath}" + elif [ -L "${cssPath}" ]; then + printf "replacing symlink at %s...\n" "${cssPath}" + rm ${cssPath} + ln -s "${themes}" "${cssPath}" + else + printf "ERROR: %s already exists and it is not a symlink\n" "${cssPath}" + _localstatus=1; + fi + ''; } diff --git a/hosts/tsuki/services/gitea/monokai.less b/hosts/tsuki/services/gitea/themes/theme-monokai.less similarity index 55% rename from hosts/tsuki/services/gitea/monokai.less rename to hosts/tsuki/services/gitea/themes/theme-monokai.less index 7b69247..47cfaef 100644 --- a/hosts/tsuki/services/gitea/monokai.less +++ b/hosts/tsuki/services/gitea/themes/theme-monokai.less @@ -1,64 +1,96 @@ -/* @import "../chroma/dark.less"; */ +// This is only a rough approximation, and needs a lot of polishing. -/* TODO: convert colors to monokai */ +// 'mk' is a prefix 'for monokai' + +@mk-bg-dark: #1e1f1c; + +@mk-bg0: #272820; +@mk-bg1: #3e3d32; +@mk-bg2: #75715e; + +@mk-fg0: #f8f8f2; +@mk-fg1: #cfcfc2; + +@mk-red: #f92672; +@mk-green: #a6e22e; +@mk-blue: #66d9ef; +@mk-violet: #ae81ff; +@mk-cyan: #a1efe4; +@mk-magenta: #fd5ff0; +@mk-yellow: #e6db74; + + +// Extra additions +@mk-orange: #fd971f; +@mk-forest-green: #2d693b; +@mk-success-green: #21ba45; +@mk-error-red: #ff4433; + +@primary: @mk-green; + +/* @import "../chroma/dark.less"; */ +// Code higlighting colors .chroma .hl { background-color: #3f424d; } /* LineHighlight */ -.chroma .lnt { color: #7f7f7f; } /* LineNumbersTable */ -.chroma .ln { color: #7f7f7f; } /* LineNumbers */ -.chroma .k { color: #f63; } /* Keyword */ -.chroma .kc { color: #fa1; } /* KeywordConstant */ -.chroma .kd { color: #9daccc; } /* KeywordDeclaration */ -.chroma .kn { color: #fa1; } /* KeywordNamespace */ -.chroma .kp { color: #5f8700; } /* KeywordPseudo */ -.chroma .kr { color: #f63; } /* KeywordReserved */ -.chroma .kt { color: #9daccc; } /* KeywordType */ -.chroma .na { color: #8a8a8a; } /* NameAttribute */ -.chroma .nb { color: #9daccc; } /* NameBuiltin */ -.chroma .bp { color: #9daccc; } /* NameBuiltinPseudo */ -.chroma .nc { color: #fa1; } /* NameClass */ -.chroma .no { color: #fa1; } /* NameConstant */ -.chroma .nd { color: #9daccc; } /* NameDecorator */ -.chroma .ni { color: #fa1; } /* NameEntity */ -.chroma .ne { color: #af8700; } /* NameException */ -.chroma .nf { color: #9daccc; } /* NameFunction */ -.chroma .nl { color: #fa1; } /* NameLabel */ -.chroma .nn { color: #fa1; } /* NameNamespace */ -.chroma .nx { color: #9daccc; } /* NameOther */ -.chroma .nt { color: #9daccc; } /* NameTag */ -.chroma .nv { color: #9daccc; } /* NameVariable */ -.chroma .vc { color: #f81; } /* NameVariableClass */ -.chroma .vg { color: #fa1; } /* NameVariableGlobal */ -.chroma .vi { color: #fa1; } /* NameVariableInstance */ -.chroma .s { color: #1af; } /* LiteralString */ -.chroma .sa { color: #1af; } /* LiteralStringAffix */ -.chroma .sb { color: #a0cc75; } /* LiteralStringBacktick */ -.chroma .sc { color: #1af; } /* LiteralStringChar */ -.chroma .dl { color: #1af; } /* LiteralStringDelimiter */ -.chroma .sd { color: #6a737d; } /* LiteralStringDoc */ -.chroma .s2 { color: #a0cc75; } /* LiteralStringDouble */ -.chroma .se { color: #f63; } /* LiteralStringEscape */ -.chroma .sh { color: #1af; } /* LiteralStringHeredoc */ -.chroma .si { color: #fa1; } /* LiteralStringInterpol */ -.chroma .sx { color: #fa1; } /* LiteralStringOther */ -.chroma .sr { color: #97c; } /* LiteralStringRegex */ -.chroma .s1 { color: #a0cc75; } /* LiteralStringSingle */ -.chroma .ss { color: #fa1; } /* LiteralStringSymbol */ -.chroma .m { color: #1af; } /* LiteralNumber */ -.chroma .mb { color: #1af; } /* LiteralNumberBin */ -.chroma .mf { color: #1af; } /* LiteralNumberFloat */ -.chroma .mh { color: #1af; } /* LiteralNumberHex */ -.chroma .mi { color: #1af; } /* LiteralNumberInteger */ -.chroma .il { color: #1af; } /* LiteralNumberIntegerLong */ -.chroma .mo { color: #1af; } /* LiteralNumberOct */ -.chroma .o { color: #f63; } /* Operator */ -.chroma .ow { color: #5f8700; } /* OperatorWord */ -.chroma .c { color: #6a737d; } /* Comment */ -.chroma .ch { color: #6a737d; } /* CommentHashbang */ -.chroma .cm { color: #6a737d; } /* CommentMultiline */ -.chroma .c1 { color: #6a737d; } /* CommentSingle */ -.chroma .cs { color: #637d; } /* CommentSpecial */ -.chroma .cp { color: #fc6; } /* CommentPreproc */ -.chroma .cpf { color: #03dfff; } /* CommentPreprocFile */ +.chroma .lnt { color: @mk-fg1; } /* LineNumbersTable */ +.chroma .ln { color: @mk-fg1; } /* LineNumbers */ +.chroma .k { color: @mk-red; } /* Keyword */ +.chroma .kc { color: @mk-red; } /* KeywordConstant */ +.chroma .kd { color: @mk-red; } /* KeywordDeclaration */ +.chroma .kn { color: @mk-orange; } /* KeywordNamespace */ +.chroma .kp { color: @mk-red; } /* KeywordPseudo */ +.chroma .kr { color: @mk-red; } /* KeywordReserved */ +.chroma .kt { color: @mk-blue; } /* KeywordType */ +.chroma .n { color: @mk-green; } /* Generic Name */ +.chroma .na { color: @mk-fg0; } /* NameAttribute */ +.chroma .nb { color: @mk-red; } /* NameBuiltin */ +.chroma .bp { color: @mk-red; } /* NameBuiltinPseudo */ +.chroma .nc { color: @mk-blue; } /* NameClass */ +.chroma .no { color: @mk-violet; } /* NameConstant */ +.chroma .nd { color: @mk-violet; } /* NameDecorator */ +.chroma .ni { color: @mk-violet; } /* NameEntity */ +.chroma .ne { color: @mk-violet; } /* NameException */ +.chroma .nf { color: @mk-green; } /* NameFunction */ +.chroma .nl { color: @mk-orange; } /* NameLabel */ +.chroma .nn { color: @mk-cyan; } /* NameNamespace */ +.chroma .nx { color: @mk-blue; } /* NameOther */ +.chroma .nt { color: @mk-red; } /* NameTag */ +.chroma .nv { color: @mk-fg0; } /* NameVariable */ +.chroma .vc { color: @mk-fg0; } /* NameVariableClass */ +.chroma .vg { color: @mk-fg0; } /* NameVariableGlobal */ +.chroma .vi { color: @mk-fg0; } /* NameVariableInstance */ +.chroma .s { color: @mk-yellow; } /* LiteralString */ +.chroma .sa { color: @mk-yellow; } /* LiteralStringAffix */ +.chroma .sb { color: @mk-yellow; } /* LiteralStringBacktick */ +.chroma .sc { color: @mk-yellow; } /* LiteralStringChar */ +.chroma .dl { color: @mk-yellow; } /* LiteralStringDelimiter */ +.chroma .sd { color: @mk-yellow; } /* LiteralStringDoc */ +.chroma .s2 { color: @mk-yellow; } /* LiteralStringDouble */ +.chroma .se { color: @mk-orange; } /* LiteralStringEscape */ +.chroma .sh { color: @mk-yellow; } /* LiteralStringHeredoc */ +.chroma .si { color: @mk-yellow; } /* LiteralStringInterpol */ +.chroma .sx { color: @mk-yellow; } /* LiteralStringOther */ +.chroma .sr { color: @mk-orange; } /* LiteralStringRegex */ +.chroma .s1 { color: @mk-yellow; } /* LiteralStringSingle */ +.chroma .ss { color: @mk-yellow; } /* LiteralStringSymbol */ +.chroma .m { color: @mk-cyan; } /* LiteralNumber */ +.chroma .mb { color: @mk-cyan; } /* LiteralNumberBin */ +.chroma .mf { color: @mk-cyan; } /* LiteralNumberFloat */ +.chroma .mh { color: @mk-cyan; } /* LiteralNumberHex */ +.chroma .mi { color: @mk-cyan; } /* LiteralNumberInteger */ +.chroma .il { color: @mk-cyan; } /* LiteralNumberIntegerLong */ +.chroma .mo { color: @mk-cyan; } /* LiteralNumberOct */ +.chroma .o { color: @mk-red; } /* Operator */ +.chroma .ow { color: @mk-red; } /* OperatorWord */ +.chroma .c { color: @mk-bg2; } /* Comment */ +.chroma .ch { color: @mk-bg2; } /* CommentHashbang */ +.chroma .cm { color: @mk-bg2; } /* CommentMultiline */ +.chroma .c1 { color: @mk-bg2; } /* CommentSingle */ +.chroma .cs { color: lighten(@mk-bg2, 10%); } /* CommentSpecial */ +.chroma .cp { color: lighten(@mk-red, 20%); } /* CommentPreproc */ +.chroma .cpf { color: @mk-yellow; } /* CommentPreprocFile */ + +// TODO: .chroma .gd { color: #fff; background-color: #5f3737; } /* GenericDeleted */ .chroma .ge { color: #ef5; } /* GenericEmph */ .chroma .gr { color: #f33; } /* GenericError */ @@ -71,6 +103,7 @@ .chroma .w { color: #bbbbbb; } /* TextWhitespace */ /* @import "../codemirror/dark.less"; */ +// what is this? .CodeMirror { &.cm-s-default, @@ -166,30 +199,30 @@ :root { --is-dark-theme: true; - --color-primary: #87ab63; - --color-primary-dark-1: #93b373; - --color-primary-dark-2: #9fbc82; - --color-primary-dark-3: #abc492; - --color-primary-dark-4: #b7cda1; - --color-primary-dark-5: #cfddc1; - --color-primary-dark-6: #e7eee0; - --color-primary-dark-7: #f8faf6; - --color-primary-light-1: #7a9e55; - --color-primary-light-2: #6c8c4c; - --color-primary-light-3: #5f7b42; - --color-primary-light-4: #516939; - --color-primary-light-5: #364626; - --color-primary-light-6: #1b2313; - --color-primary-light-7: #080b06; - --color-primary-alpha-10: #87ab6319; - --color-primary-alpha-20: #87ab6333; - --color-primary-alpha-30: #87ab634b; - --color-primary-alpha-40: #87ab6366; - --color-primary-alpha-50: #87ab6380; - --color-primary-alpha-60: #87ab6399; - --color-primary-alpha-70: #87ab63b3; - --color-primary-alpha-80: #87ab63cc; - --color-primary-alpha-90: #87ab63e1; + --color-primary: @primary; + --color-primary-dark-1: lighten(@primary, 10%); + --color-primary-dark-2: lighten(@primary, 15%); + --color-primary-dark-3: lighten(@primary, 20%); + --color-primary-dark-4: lighten(@primary, 25%); + --color-primary-dark-5: lighten(@primary, 40%); + --color-primary-dark-6: lighten(@primary, 60%); + --color-primary-dark-7: lighten(@primary, 80%); + --color-primary-light-1: darken(@primary, 10%); + --color-primary-light-2: darken(@primary, 15%); + --color-primary-light-3: darken(@primary, 20%); + --color-primary-light-4: darken(@primary, 25%); + --color-primary-light-5: darken(@primary, 40%); + --color-primary-light-6: darken(@primary, 60%); + --color-primary-light-7: darken(@primary, 80%); + --color-primary-alpha-10: fade(@primary, 10%); + --color-primary-alpha-20: fade(@primary, 20%); + --color-primary-alpha-30: fade(@primary, 30%); + --color-primary-alpha-40: fade(@primary, 40%); + --color-primary-alpha-50: fade(@primary, 50%); + --color-primary-alpha-60: fade(@primary, 60%); + --color-primary-alpha-70: fade(@primary, 70%); + --color-primary-alpha-80: fade(@primary, 80%); + --color-primary-alpha-90: fade(@primary, 90%); --color-secondary: #454a57; --color-secondary-dark-1: #505665; --color-secondary-dark-2: #5b6273; @@ -233,8 +266,9 @@ --color-black: #1e222e; --color-gold: #a1882b; --color-white: #ffffff; - --color-diff-removed-word-bg: #6f3333; - --color-diff-added-word-bg: #3c653c; + + --color-diff-removed-word-bg: @mk-red; + --color-diff-added-word-bg: @mk-green; --color-diff-removed-row-bg: #3c2626; --color-diff-moved-row-bg: #818044; --color-diff-added-row-bg: #283e2d; @@ -242,47 +276,48 @@ --color-diff-moved-row-border: #bcca6f; --color-diff-added-row-border: #314a37; --color-diff-inactive: #353846; - --color-error-border: #a53a37; - --color-error-bg: #482c2c; - --color-error-text: #ff4433; - --color-success-border: #458a57; - --color-success-bg: #284034; - --color-success-text: #6cc664; - --color-warning-border: #bb9d00; - --color-warning-bg: #3a3a30; - --color-warning-text: #fbbd08; - --color-info-border: #306090; - --color-info-bg: #26354c; - --color-info-text: #38a8e8; + + --color-error-border: darken(@mk-error-red, 20%); + --color-error-bg: @mk-bg-dark; + --color-error-text: @mk-error-red; + --color-success-border: darken(@mk-success-green, 20%); + --color-success-bg: @mk-bg-dark; + --color-success-text: @mk-success-green; + --color-warning-border: darken(@mk-orange, 20%); + --color-warning-bg: @mk-bg-dark; + --color-warning-text: @mk-orange; + --color-info-border: darken(@mk-blue, 20%); + --color-info-bg: @mk-bg-dark; + --color-info-text: @mk-blue; /* target-based colors */ - --color-body: #383c4a; - --color-box-header: #404652; - --color-box-body: #303440; - --color-text-dark: #dbe0ea; - --color-text: #bbc0ca; - --color-text-light: #a6aab5; + --color-body: @mk-bg0; + --color-box-header: @mk-bg-dark; + --color-box-body: @mk-bg-dark; + --color-text-dark: lighten(@mk-fg0, 10%); + --color-text: @mk-fg0; + --color-text-light: @mk-fg1; --color-text-light-2: #8a8e99; --color-text-light-3: #707687; - --color-footer: #2e323e; + --color-footer: @mk-bg1; --color-timeline: #4c525e; - --color-input-text: #d5dbe6; - --color-input-background: #292d39; - --color-input-border: #454a57; - --color-input-border-hover: #505667; - --color-navbar: #2a2e3a; - --color-navbar-transparent: #2a2e3a00; + --color-input-text: @mk-fg1; + --color-input-background: @mk-bg-dark; + --color-input-border: @mk-bg1; + --color-input-border-hover: @mk-bg2; + --color-navbar: @mk-bg1; + --color-navbar-transparent: fade(@mk-bg1, 0%); --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff10; --color-active: #ffffff16; - --color-menu: #2e323e; - --color-card: #2e323e; - --color-markup-table-row: #ffffff06; - --color-markup-code-block: #292d39; + --color-menu: @mk-bg-dark; + --color-card: @mk-bg1; + --color-markup-table-row: lighten(@mk-bg-dark, 5%); + --color-markup-code-block: @mk-bg1; --color-button: #353846; - --color-code-bg: #2a2e3a; - --olor-code-sidebar-bg: #2e323e; + --color-code-bg: @mk-bg-dark; + --color-code-sidebar-bg: #2e323e; --color-shadow: #00000060; --color-secondary-bg: #2a2e3a; --color-text-focus: #fff; @@ -299,8 +334,136 @@ filter: invert(.8); } +.ui { + &.card { + background: var(--color-card); + border: 1px solid @mk-bg1; + + & > .content { + border-color: @mk-bg2; + } + + & > .extra { + border-top-color: @mk-bg2; + } + } + + &.dropdown .menu, + &.menu { + background: var(--color-menu); + border: 1px solid @mk-bg1; + } + + &.segment, + &.segments, + &.attached.segment, + &.attached.header { + background: var(--color-box-body); + color: var(--color-text); + border-color: @mk-bg1; + } + + &.repository.list.item:not(:first-child) { + border-top: 1px solid @mk-bg2; + } + + &.button { + background-color: @mk-bg1; + } + + &.primary { + &.button, + &.buttons .button { + color: black; + background-color: @primary; + } + + &.button:hover, + &.buttons .button:hover { + color: black; + background-color: lighten(@primary, 15%); + } + } + + &.green { + &.button, + &.buttons .button { + color: black; + background-color: @mk-success-green; + } + + &.button:hover, + &.buttons .button:hover { + color: black; + background-color: lighten(@mk-success-green, 15%); + } + } + + &.blue { + &.button, + &.buttons .button { + color: black; + background-color: @mk-blue; + } + + &.button:hover, + &.buttons .button:hover { + color: black; + background-color: lighten(@mk-blue, 15%); + } + } + + &.basic { + &.primary { + &.button, + &.buttons .button { + color: black !important; + background-color: @primary !important; + box-shadow: inset 0 0 0 1px @primary !important; + } + + &.button:hover, + &.buttons .button:hover { + color: black !important; + background-color: lighten(@primary, 15%) !important; + } + } + + &.green { + &.button, + &.buttons .button { + color: black !important; + background-color: @mk-success-green !important; + box-shadow: inset 0 0 0 1px @mk-success-green !important; + } + + &.button:hover, + &.buttons .button:hover { + color: black !important; + background-color: lighten(@mk-success-green, 15%) !important; + } + } + + &.blue { + &.button, + &.buttons .button { + color: black !important; + background-color: @mk-blue !important; + box-shadow: inset 0 0 0 1px @mk-blue !important; + } + + &.button:hover, + &.buttons .button:hover { + color: black !important; + background-color: lighten(@mk-blue, 15%) !important; + } + } + } +} + .ui.horizontal.segments > .segment { - background-color: #383c4a; + background-color: @mk-bg-dark; + border-color: @mk-bg1; } .ui.green.progress .bar { @@ -312,7 +475,7 @@ } .following.bar.light { - background: #2e323e; + background: @mk-bg1; border-color: var(--color-secondary-alpha-40); } @@ -397,9 +560,9 @@ a.ui.basic.green.label:hover { .ui.form .field.error input[type="text"], .ui.form .field.error input[type="file"], .ui.form .field.error input[type="url"] { - background-color: #522; - border: 1px solid #7d3434; - color: #f9cbcb; + background-color: @mk-error-red; + border: 1px solid darken(@mk-error-red, 30%); + color: lighten(@mk-error-red, 90%); } .ui.form .field.error select:focus, @@ -420,40 +583,36 @@ a.ui.basic.green.label:hover { color: #f9cbcb; } -.ui.green.button, -.ui.green.buttons .button { - background-color: #87ab63; -} - -.ui.green.button:hover, -.ui.green.buttons .button:hover { - background-color: #a0cc75; -} .ui.search > .results { - background: #383c4a; - border-color: var(--color-secondary); + background: @mk-bg-dark; + // border-color: @mk-bg0-dark; } .ui.search > .results .result:hover, .ui.category.search > .results .category .result:hover { - background: var(--color-secondary); + background: @mk-bg-dark; } .ui.search > .results .result .title { - color: #dbdbdb; + color: @mk-fg0; } -.ui.table > thead > tr > th { - background: var(--color-secondary); - color: #dbdbdb !important; +.ui.table { + border-color: @mk-bg1; + + thead > tr > th { + background: @mk-bg-dark; + color: @mk-fg0 !important; + } } + .repository.file.list #repo-files-table tr { - background: #2a2e3a; + background: @mk-bg-dark; } .repository.file.list #repo-files-table tr:hover { - background-color: #393d4a !important; + background-color: lighten(@mk-bg-dark, 20%) !important; } .overflow.menu .items .item {