diff --git a/gitea-github-theme/README.md b/gitea-github-theme/README.md index b9a230b..cfeaf93 100644 --- a/gitea-github-theme/README.md +++ b/gitea-github-theme/README.md @@ -1,10 +1,12 @@ # gitea-github-theme -Opinionated GitHub-based light and dark themes for Gitea -Created and tested with Gitea v1.15. +**Opinionated** GitHub-based light and dark themes for Gitea including an automatic theme switch option. + +Created and tested with Gitea v1.15 - 1.17. The theme might work with future versions though Gitea devs might change some CSS classes in the meantime and things might potentially look odd - just try yourself :) I might update the theme over time to fix oversights and other issues - no guarantee though. + ## Installation 1. If you do not have admin access to a Gitea instance, you can use the [Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related) browser extension and use the CSS provided in this repo for the Gitea URL @@ -14,16 +16,67 @@ I might update the theme over time to fix oversights and other issues - no guara 3. Now users can select this theme in their settings under "account" 4. (optional) If you want to make this theme the default of your instance, set it in `DEFAULT_THEME` in `app.ini` +## Using automatic theme switching based on system preference + +To use automatic theme switching, add `theme-github-auto.css` into your respective `themes` folder as described above. +This file contains both light and dark styles and selects the respective one based on the system preference selected by the user via the `@media (prefers-color-scheme:` CSS selector (tested on macOS). + +For some reasons using `@imports` does not work and hence the file contains the c/p content of both the light and dark themes together. +If this is somehow possible and I did not managed to get it configured, please let me know! + ## Changes to default Gitea theme - Aligned primary green, grey, red and blue colors with GitHub - Aligned `border-radius` with GitHub - Related theme by removing a lot of hover colors and dominant button background-colors - Aligned markup background to GitHub's value +- Decreased navbar height and font size +- Many small overrides of colors and font-sizes + +## Helm chart instructions + +To use custom themes with the [Gitea helm chart](https://gitea.com/gitea/helm-chart): + +1. Create a secret containing the CSS files (here's an example via `terraform`, plain k8s secrets will also work) + +```hcl +resource "kubernetes_secret" "gitea-themes" { + metadata { + name = "gitea-themes" + namespace = "gitea" + } + + data = { + "theme-github.css" = "${file("files/gitea/gitea-github-theme-light.css")}" + "theme-github-dark.css" = "${file("files/gitea/gitea-github-theme-dark.css")}" + "theme-github-auto.css" = "${file("files/gitea/gitea-github-theme-auto.css")}" + } + + type = "Opaque" +} +``` + +2. Mount the secret via `extraVolumes` in `values.yaml`: + +```yml +extraVolumes: + - name: gitea-themes + secret: + secretName: gitea-themes +``` + +3. Add the theme options into the config in `values.yaml`: + +```yml +gitea: + config: + ui: + DEFAULT_THEME: github-auto + THEMES: auto,gitea,arc-green,github,github-dark,github-auto +``` ## Screenshots -| | | -| :----------------------------: | :----------------------------: | -| ![](figs/screenshot1.png) | ![](figs/screenshot2.png) | -| ![](figs/screenshot-dark1.png) | ![](figs/screenshot-dark2.png) | +![](figs/screenshot1.png) + +![](figs/screenshot-dark1.png) diff --git a/gitea-github-theme/figs/screenshot-dark1.png b/gitea-github-theme/figs/screenshot-dark1.png index e8da3ab..775808a 100644 Binary files a/gitea-github-theme/figs/screenshot-dark1.png and b/gitea-github-theme/figs/screenshot-dark1.png differ diff --git a/gitea-github-theme/figs/screenshot-dark2.png b/gitea-github-theme/figs/screenshot-dark2.png deleted file mode 100644 index 539c84b..0000000 Binary files a/gitea-github-theme/figs/screenshot-dark2.png and /dev/null differ diff --git a/gitea-github-theme/figs/screenshot1.png b/gitea-github-theme/figs/screenshot1.png index 16b271d..aaa8291 100644 Binary files a/gitea-github-theme/figs/screenshot1.png and b/gitea-github-theme/figs/screenshot1.png differ diff --git a/gitea-github-theme/figs/screenshot2.png b/gitea-github-theme/figs/screenshot2.png deleted file mode 100644 index 546957a..0000000 Binary files a/gitea-github-theme/figs/screenshot2.png and /dev/null differ diff --git a/gitea-github-theme/theme-github-auto.css b/gitea-github-theme/theme-github-auto.css new file mode 100644 index 0000000..02b9577 --- /dev/null +++ b/gitea-github-theme/theme-github-auto.css @@ -0,0 +1,1296 @@ +@media (prefers-color-scheme: light) { + :root { + --border-radius: 6px; + --color-primary: #0969da; + --color-navbar: #f6f8fa; + --color-active: #f6f8fa; + --color-markup-code-block: #f6f8fa; + --color-hover: none; + --color-purple: #8250df; + --color-green: #1a7f37; + } + .ui.label { + padding: 0.3em 0.5em; + background: var(--color-light); + color: var(--color-text-light); + border-radius: 6px; + } + .ui.blue.label, + .ui.blue.labels .label, + .ui.primary.label, + .ui.primary.labels .label { + border-color: var(--color-light) !important; + background-color: #afb8c133 !important; + border-radius: 6px; + color: #24292f !important; + } + .ui.blue.button, + .ui.blue.buttons .button, + .ui.primary.button, + .ui.primary.buttons .button { + background-color: #f6f8fa !important; + color: #24292f !important; + } + .repo-icon { + display: inline-block; + transform: scale(0.75); + margin-right: -0.05rem !important; + } + .ui.green.buttons .button, + .ui.green.button { + background-color: #1a7f37; + color: #fff !important; + } + .ui.green.labels .label, + .ui.ui.ui.green.label { + background-color: #1a7f37; + color: #fff !important; + } + .ui.label { + padding: 0.5em 0.5em; + } + /* "edit" and "reopen" button font color */ + .ui.basic.green.buttons .button, + .ui.basic.green.button { + color: #24292f; + } + .feeds .list ul li.private { + background: none; + } + .repository.file.list #repo-files-table tbody .svg.octicon-file-directory, + .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #54aeff; + } + a, + .ui.breadcrumb a { + color: var(--color-text) !important; + } + .repo-title a { + color: var(--color-primary) !important; + } + .ui.basic.blue.button, + .ui.basic.blue.buttons .button, + .ui.basic.primary.button, + .ui.basic.primary.buttons .button { + background-color: #fff !important; + box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important; + color: var(--color-text) !important; + } + .ui.basic.blue.button:focus, + .ui.basic.blue.buttons .button:focus, + .ui.basic.primary.button:focus, + .ui.basic.primary.buttons .button:focus { + box-shadow: inset 0 0 0 0px #808080 !important; + } + .ui.basic.blue.button:hover, + .ui.basic.blue.buttons .button:hover, + .ui.basic.primary.button:hover, + .ui.basic.primary.buttons .button:hover { + background-color: #fff !important; + } + ui.basic.blue.button:hover, + .ui.basic.blue.buttons .button:hover, + .ui.basic.primary.button:hover, + .ui.basic.primary.buttons .button:hover { + box-shadow: inset 0 0 0 0px #808080 !important; + } + a:hover, + a.muted:hover, + .ui.breadcrumb a:hover { + color: none; + } + .ui.tabular.menu .item:hover { + color: none; + } + .ui.basic.labels .label, + .ui.basic.label { + background-color: #fff; + } + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + background-color: #f6f8fa; + } + .ui.blue.button:hover, + .ui.blue.buttons .button:hover, + .ui.primary.button:hover, + .ui.primary.buttons .button:hover { + background-color: var(--color-hover) !important; + } + .repository .ui.segment.sub-menu .list .item a:hover { + color: var(--color-text) !important; + } + .repo-buttons .ui.labeled.button > .label:hover { + color: var(--color-text) !important; + } + .repository.file.list #repo-files-table tr:hover { + background-color: #f6f8fa !important; + } + .ui .error.header { + background-color: #cf222e !important; + color: #fff !important; + } + .ui.red.buttons .button, + .ui.red.button { + color: #fff !important; + } + .ui.basic.red.buttons .button, + .ui.basic.red.button { + color: #cf222e !important; + font-weight: 500; + } + * { + scrollbar-width: thin; + scrollbar-color: #f6f8fa transparent !important; + } + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #808080 !important; + } + .ui.purple.labels .label, + .ui.ui.ui.purple.label { + background-color: #8250df !important; + } + .repository #clone-panel input { + background-color: #f6f8fa; + } + .ui.basic.green.buttons .button, + .ui.basic.green.button { + color: var(--color-text) !important; + } + ul.repo-owner-name-list { + font-size: 13px; + } + a.ui.label { + color: #fff !important; + } + .ui .sha.label { + color: var(--color-text) !important; + padding: 6px 10px 6px; + } + .ui.basic.green.buttons .button, + .ui.basic.green.button { + color: #1a7f37 !important; + } + .ui.basic.labels .label, + .ui.basic.label { + color: var(--color-text) !important; + } + + .repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, + .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, + .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, + .repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified + .detail.icon { + border-left: 1px solid #1a7f37; + color: #1a7f37; + } + + .repository.view.issue + .comment-list + .timeline-item.commits-list + .singular-commit + .shabox + .sha.label.isSigned.isVerified { + border: 1px solid #1a7f37; + } + + .ui.labeled.icon.buttons > .button > .icon, + .ui.labeled.icon.button > .icon { + border-right: 1px solid var(--color-secondary); + } + + .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { + border-left: 1px solid var(--color-secondary); + } + + /* GPG verified msg banner */ + .repository .ui.attached.isSigned.isVerified.message .ui.text { + color: black; + } + .repository .ui.attached.isSigned.isVerified:last-child, + .repository .ui.attached.isSigned.isVerified.bottom { + border-bottom: 1px solid #21ba45; + } + .repository .ui.attached.isSigned.isVerified.top, + .repository .ui.attached.isSigned.isVerified.message { + border-top: 1px solid var(--color-secondary); + } + .repository .ui.attached.isSigned.isVerified { + border-left: 1px solid var(--color-secondary); + border-right: 1px solid var(--color-secondary); + } + .repository .ui.attached.isSigned.isVerified.message { + box-shadow: none; + background-color: #21ba45; + color: black; + } + + /* bg color of commit info box */ + .ui .info.segment.top { + background-color: var(--color-navbar) !important; + } + + .repo-icon { + display: none; + } + + /* navbar font size */ + .ui.secondary.menu .item { + font-size: 13px; + } + + #navbar .item { + margin: 0; + padding: 0.5em; + font-size: 14px; + color: black; + } + + .following.bar #navbar { + width: 100vw; + /* default 52px */ + min-height: 40px; + padding: 0 0.5rem; + } + + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px var(--color-navbar); + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px var(--color-text); + } + + .following.bar #navbar .brand { + margin-top: -2px; + } + + /* reduce navbar bottom margin */ + .ui.ui.ui.container:not(.fluid) { + margin-bottom: -3px; + } + + /* Link color for repo breadcrumbs */ + a, + .ui.breadcrumb a { + color: var(--color-primary) !important; + } + + /* color for repo menu bar to overwrite link color */ + .ui.tabular.menu .item { + color: var(--color-text) !important; + } + + .repository .ui.segment.sub-menu .list .item a { + color: var(--color-text) !important; + } + + .ui .menu:not(.vertical) .item > .button.compact { + color: var(--color-text) !important; + } + + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + color: var(--color-text-light) !important; + } + + #manage_topic { + font-size: 12px; + color: var(--color-text) !important; + } + + .ui.menu .item { + color: var(--color-text) !important; + } + + /* font weight of "danger zone" buttons in "delete repo" */ + .ui.basic.red.buttons .button, + .ui.basic.red.button { + font-weight: 500; + } + + .ui.label { + background: rgba(175, 184, 193, 0.2); + } + + .comment-header .actions a { + color: black !important; + } + + .ui.dropdown > .text { + color: black !important; + } + + .repository.compare.pull .choose.branch .svg { + color: black !important; + } + + a.muted { + color: black !important; + } + + .repository.file.list + #repo-files-table + tbody + .svg.octicon-file-directory-fill, + .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #54aeff !important; + } + .repository.file.list #repo-files-table td a { + color: black !important; + } + + .ui.negative.buttons .button, + .ui.negative.button { + background-color: none; + color: #fff; + } + + .ui.green.button { + padding: 5px 16px; + line-height: 20px; + } + + .ui.green.labels .label, + .ui.ui.ui.green.label { + padding: 5px 16px; + line-height: 20px; + } + + .ui.tabular.menu .active.item { + margin-bottom: 2px; + } + + .ui.secondary.pointing.menu .item > .circular.label { + line-height: 10px; + } + + .ui.grey.labels .label, + .ui.ui.ui.grey.label { + line-height: 10px; + } + + /* yes/no dialog buttons for repo archival */ + .ui.basic.inverted.buttons .button, + .ui.basic.inverted.button { + color: #f9fafb !important; + } + + // border color of SSH/https cloning buttons (non-focused) + .ui.basic.blue.button, + .ui.basic.blue.buttons .button, + .ui.basic.primary.button, + .ui.basic.primary.buttons .button { + box-shadow: inset 0 0 0 1px transparent !important; + } + + // same for hover + ui.basic.blue.button:hover, + .ui.basic.blue.buttons .button:hover, + .ui.basic.primary.button:hover, + .ui.basic.primary.buttons .button:hover { + box-shadow: inset 0 0 0 0px transparent !important; + } + // background color of branch name in PRs + .issue.list .branches .branch { + background-color: #afb8c133; + border-radius: 6px; + } + // branch display in PRs + .issue.list .branches .branch { + background-color: #afb8c133; + border-radius: 6px; + } + .issue.list .branches .truncated-name { + color: #24292f; + padding: 2px; + } +} +@media (prefers-color-scheme: dark) { + :root { + --color-primary: #347d39; + --color-secondary: #535865; + --border-radius: 6px; + --color-body: #373e47; + --color-navbar: #22272e; + --color-footer: #22272e; + --color-text-light: #a6aab5; + --color-text-light-2: #adbac7; + --color-text: #bbc0ca; + --color-box-body: #22272e; + --color-markup-code-block: #636e7b66; + --color-light: #22272e; + --color-button: #22272e; + --color-input-background: #22272e; + --color-input-border-hover: #8e8c8c; + --color-input-text: #adbac7; + --color-box-header: #22272e; + --color-active: #22272e; + --color-menu: #22272e; + --color-caret: var(--color-text); + --is-dark-theme: true; + --color-blue: #539bf5; + --color-input-background: #22272e; + + /* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */ + /* monaco editor dark theme is toggled via variable `--is-dark-theme` */ + --color-primary-light-3: #71798e; + --color-editor-line-highlight: #71798e; + --color-code-bg: var(--color-input-background); + } + + .ui.list .list > .item > .content, + .ui.list > .item > .content { + color: unset; + } + + .ui.list .list > .item .description, + .ui.list > .item .description { + color: var(--color-text); + } + + .ui.repository.list, + .ui.user.list { + background: var(--color-box-body); + padding: 1em; + border-radius: 0.75em; + } + + .ui.header .sub.header { + color: #636e7b; + } + + .ui .error.header { + border-color: var(--color-red) !important; + background-color: var(--color-red) !important; + color: #ffffff !important; + } + + .ui.modal > .header { + background: var(--color-secondary); + color: #dbdbdb; + } + + .ui.modal > .actions { + background: var(--color-secondary); + border-color: var(--color-secondary); + } + + .ui.modal > .content { + background: #383c4a; + } + + .ui.green.buttons .button, + .ui.green.button { + background-color: #347d39; + color: #ffffffe6 !important; + } + + .repository.file.list #repo-files-table tbody .svg.octicon-file-directory, + .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #768390; + } + + a, + .ui.breadcrumb a { + /* color: var(--color-text); */ + color: var(--color-blue); + } + + .repo-title a { + color: var(--color-blue) !important; + } + + .ui.table > thead > tr > th { + background: #636e7b1a; + color: #dbdbdb !important; + } + + .repository.file.list #repo-files-table tr { + background: #22272e; + } + + .repo-icon { + display: inline-block; + transform: scale(0.75); + margin-right: -0.05rem !important; + } + + .repository.file.list #file-buttons .ui.button { + color: #ffffffe6 !important; + } + + .ui.basic.green.button, + .ui.basic.green.buttons .button, + .ui.basic.primary.button, + .ui.basic.primary.buttons .button { + background-color: #22272e !important; + box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important; + color: #dbdbdb !important; + } + + .ui.basic.green.button:focus, + .ui.basic.green.buttons .button:focus, + .ui.basic.primary.button:focus, + .ui.basic.primary.buttons .button:focus { + box-shadow: inset 0 0 0 0px #808080 !important; + } + + .ui.basic.green.button:hover, + .ui.basic.green.buttons .button:hover, + .ui.basic.primary.button:hover, + .ui.basic.primary.buttons .button:hover { + background-color: #22272e !important; + } + + .ui.basic.green.button:hover, + .ui.basic.green.buttons .button:hover, + .ui.basic.primary.button:hover, + .ui.basic.primary.buttons .button:hover { + box-shadow: inset 0 0 0 0px #808080 !important; + } + + .issue.list { + list-style: none; + margin-top: 1rem; + background-color: #22272e; + border-radius: 6px; + padding: 3px 10px 3px 10px; + } + + .ui.menu .item { + background-color: #22272e; + } + + .ui.horizontal.segments > .segment { + background-color: #22272e; + border-radius: 6px; + } + + .ui.attached.header { + border-radius: 6px; + } + + .repository.file.list .repo-description { + color: #adbac7; + } + + .commit-summary a.default-link { + color: #adbac7 !important; + } + + .markup h1, + .markup h2, + .markup h3, + .markup h4, + .markup h5, + .markup h6 { + color: #adbac7; + } + + .markup code, + .markup tt { + color: #adbac7; + } + + .markup p, + .markup blockquote, + .markup details, + .markup ul, + .markup ol, + .markup dl, + .markup table, + .markup pre { + color: #adbac7; + } + + .repo-list-link { + color: var(--color-blue) !important; + } + + .ui.menu.two.item .item { + border: 1px solid var(--color-secondary); + } + + a, + .push.news { + color: null; + } + + .ui.header { + color: #a6aab5; + } + + .repo-description { + color: #a6aab5 !important; + } + + a.ui.label { + /* color: #adbac7 !important; */ + border-color: var(--color-secondary) !important; + } + + .ui.label { + border-color: var(--color-secondary) !important; + } + + .ui.menu .item { + color: #adbac7; + } + + .ui .sha.label { + padding: 6px 10px 6px; + } + + /* repo list dashboard */ + .feeds .list ul li.private { + background-color: #22272e; + } + + /* ssh and search repository fields */ + input, + textarea, + .ui.input > input, + .ui.form input:not([type]), + .ui.form select, + .ui.form textarea, + .ui.form input[type="date"], + .ui.form input[type="datetime-local"], + .ui.form input[type="email"], + .ui.form input[type="file"], + .ui.form input[type="number"], + .ui.form input[type="password"], + .ui.form input[type="search"], + .ui.form input[type="tel"], + .ui.form input[type="text"], + .ui.form input[type="time"], + .ui.form input[type="url"], + .ui.selection.dropdown, + .ui.checkbox label:before, + .ui.checkbox input:checked ~ label:before, + .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before { + border-color: var(--color-input-background); + } + + /* hover repository rows */ + .repository.file.list #repo-files-table tr:hover { + background-color: var(--color-hover); + } + + /* due date boxes */ + .repository .metas #deadlineForm input { + border-color: var(--color-secondary); + } + + /* border color dependencies block in issues */ + #new-dependency-drop-list.ui.selection.dropdown { + border-color: var(--color-secondary); + } + + .page-content .ui.button { + border-color: var(--color-secondary); + } + + /* border color form fields settings page */ + input, + textarea, + .ui.input > input, + .ui.form input:not([type]), + .ui.form select, + .ui.form textarea, + .ui.form input[type="date"], + .ui.form input[type="datetime-local"], + .ui.form input[type="email"], + .ui.form input[type="file"], + .ui.form input[type="number"], + .ui.form input[type="password"], + .ui.form input[type="search"], + .ui.form input[type="tel"], + .ui.form input[type="text"], + .ui.form input[type="time"], + .ui.form input[type="url"], + .ui.selection.dropdown, + .ui.checkbox label:before, + .ui.checkbox input:checked ~ label:before, + .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before { + border-color: var(--color-secondary); + } + + /* background color of code display */ + .lines-code { + background-color: #22272e; + } + + .code-diff-unified .add-code, + .code-diff-unified .add-code td, + .code-diff-split .add-code .lines-num-new, + .code-diff-split .add-code .lines-type-marker-new, + .code-diff-split .add-code .lines-code-new, + .code-diff-split .del-code .add-code.lines-num-new, + .code-diff-split .del-code .add-code.lines-type-marker-new, + .code-diff-split .del-code .add-code.lines-code-new { + background: #224035; + } + + .tag-code, + .tag-code td { + background-color: var(--color-body); + } + + /* green code color dark theme */ + .chroma .s2 { + color: #8ddb8c; + } + + .chroma .k { + color: #f47067; + } + + .chroma .m { + color: #6cb6ff; + } + + .chroma .nf { + color: #96d0ff; + } + + .chroma .nb { + color: var(--color-blue); + } + + .chroma .nx { + color: var(--color-text); + } + + .chroma .nv { + color: #08dddd; + } + + .chroma .si { + color: #8ddb8c; + } + + .chroma .nt { + color: #50eb75; + } + + .chroma .nd { + color: #c4cfcf; + } + + .chroma .o { + color: #eb3243; + } + + .chroma .nc { + color: #16e9e9; + } + + .chroma .nn { + color: #16e9e9; + } + + .chroma .s { + color: #8ddb8c; + } + + /* border color repo files */ + .repository.file.list #repo-files-table td { + border-bottom: 1px solid #373e47; + } + + /* text color repo files */ + .repository.file.list #repo-files-table td { + color: #7f8699; + } + + .repository.file.list #repo-files-table td a { + /* color: #7f8699 !important; */ + color: var(--color-blue) !important; + } + + /* gpg commit label */ + .repository #commits-table td.sha .sha.label.isSigned.isVerified, + .repository #repo-files-table .sha.label.isSigned.isVerified, + .repository #rev-list .sha.label.isSigned.isVerified, + .repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified { + border: 1px solid #21ba45 !important; + background: transparent; + border-radius: 6px; + } + + /* color of active tabular item, e.g. in PR view (conversations, commits, files changed) */ + .ui.tabular.menu .active.item, + .ui.tabular.menu .active.item:hover { + background: var(--color-navbar); + } + + /* repo watch and fork counters */ + .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, + .ui.basic.label:not(.tag):not(.image):not(.ribbon) { + color: #adbac7; + } + + .repo-buttons .ui.labeled.button.disabled > .label { + color: #adbac7; + } + + /* border color of warning message */ + .ui.warning.message { + background-color: #22272e; + color: var(--color-text); + } + + .ui.warning.message, + .ui.attached.warning.message { + box-shadow: null; + } + + .ui.warning.message, + .ui.attached.warning.message { + box-shadow: 0 0 0 0px #c9ba9b inset, 0 0 #0000; + } + + /* repo svg icons */ + .repository.view.issue .comment-list .timeline-item .badge .svg { + fill: var(--color-text-light) !important; + } + + /* background emoji reactions */ + .repository .segment.reactions .ui.label.basic.blue { + background-color: transparent; + } + + .ui.positive.message { + background-color: #22272e; + color: #ffffffe6; + } + + .ui.positive.message, + .ui.attached.positive.message { + box-shadow: 0 0 0 1px #347d39 inset, 0 0 #0000; + } + + /* diff color deletion */ + .code-diff-unified .del-code, + .code-diff-unified .del-code td, + .code-diff-split .del-code .lines-num-old, + .code-diff-split .del-code .lines-type-marker-old, + .code-diff-split .del-code .lines-code-old { + background: #7a341e; + } + + /* diff color neutral */ + .lines-num, + .lines-code { + background-color: var(--color-navbar); + } + + .lines-type-marker { + background-color: var(--color-navbar); + } + + a.blob-excerpt { + background: var(--color-body); + } + + /* PR open label */ + .ui.green.labels .label, + .ui.ui.ui.green.label { + background-color: #347d39; + } + + /* bg color of PR comment form */ + .ui.form, + .ui.form .field .dropdown, + .ui.form .field .dropdown .menu > .item { + background-color: var(--color-navbar); + } + + .comment-code-cloud { + background-color: var(--color-navbar); + } + + /* remove border of "new file" button */ + .ui.buttons .button:first-child { + border-left: 1px solid var(--color-markup-code-block); + } + + /* border color of dropdown svg */ + .ui.form, + .ui.form .field .dropdown, + .ui.form .field .dropdown .menu > .item { + background-color: var(--color-border); + } + + /* hover font color */ + .ui.secondary.pointing.menu .active.item, + .ui.secondary.pointing.menu .active.item:hover, + .ui.secondary.pointing.menu .dropdown.item:hover, + .ui.secondary.pointing.menu .link.item:hover, + .ui.secondary.pointing.menu a.item:hover { + color: var(--color-text); + } + + /* user avatar background */ + .user.profile .ui.card #profile-avatar { + background: var(--color-navbar); + } + + .ui.cards > .card > .content, + .ui.card > .content { + background: var(--color-navbar); + } + + .user.profile .ui.card .extra.content ul li:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); + background-color: var(--color-navbar); + } + + .user.profile .ui.card .extra.content ul li { + background-color: var(--color-navbar); + } + + /* right border of profile search bar */ + .ui.action.input:not([class*="left action"]) > input { + border-right-color: var(--color-secondary); + } + + .ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: var(--color-secondary); + } + + /* font color line numbers */ + .lines-num span:after { + color: var(--color-text); + } + + /* gpg key signed message */ + .repository .ui.attached.isSigned.isVerified.message { + background-color: var(--color-primary); + color: black; + } + + .repository .ui.attached.isSigned.isVerified.message .ui.text { + color: var(--color-active); + } + + .ui .info.segment.top { + background-color: var(--color-navbar) !important; + } + + .repository .ui.attached.isSigned.isVerified.top, + .repository .ui.attached.isSigned.isVerified.message { + border-top: 0px solid var(--color-text); + } + + .repository .ui.attached.isSigned.isVerified { + border-left: 0px solid var(--color-text); + border-right: 0px solid var(--color-text); + } + + .repository .ui.attached.isSigned.isVerified:last-child, + .repository .ui.attached.isSigned.isVerified.bottom { + border-bottom: 0px solid #a3c293; + } + + /* info message banner colors */ + .ui.info.message { + background-color: var(--color-navbar); + color: var(--color-text); + } + + /* PR timelines colors */ + .repository.view.issue .comment-list .timeline-item .badge .svg { + fill: black; + } + + .repository.view.issue .comment-list .timeline-item .badge { + background-color: var(--color-navbar); + color: var(--color-text); + width: 30px; + height: 30px; + margin-left: -31px; + } + + .repository.view.issue .comment-list .timeline-item .badge.badge-commit { + border-color: var(--color-navbar); + background: var(--color-navbar); + } + + .repository.view.issue .comment-list .timeline:before { + background-color: var(--color-secondary); + } + + .repository.view.issue .comment-list .timeline-item .badge .svg { + width: 20px; + height: 20px; + padding: 3px; + } + + input { + caret-color: var(--color-text); + } + + .removed-code { + background: #b70f22; + color: var(--color-text); + } + + .added-code { + background: #0d8b2c; + color: var(--color-text); + } + + /* review - pending label */ + .ui.basic.labels .yellow.label, + .ui.ui.ui.basic.yellow.label { + background: var(--color-project-board-bg); + color: #333 !important; + } + + /* green checkmark background when approving PRs */ + .bg-green { + background: var(--color-primary) !important; + } + + i.green.icon.icon.icon.icon { + color: var(--color-primary); + } + + span.green .svg { + color: var(--color-primary); + } + + /* highlight color bg for highlighted lines */ + .lines-code.active, + .lines-code .active { + border-radius: 6px; + background: #000000 !important; + } + + .ui.ui.ui.ui.table tr.active, + .ui.ui.table td.active { + box-shadow: 0 0 #000000de inset; + background: #e0e0e0; + color: --var(--color-text); + } + + /* navbar font size */ + .ui.secondary.menu .item { + font-size: 13px; + } + + #navbar .item { + margin: 0; + padding: 0.5em; + font-size: 14px; + } + + .following.bar #navbar { + width: 100vw; + /* default 52px */ + min-height: 40px; + padding: 0 0.5rem; + } + + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px var(--color-navbar); + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px var(--color-text); + } + + .following.bar #navbar .brand { + margin-top: -2px; + } + + /* border colors of search fields, e.g. "find repository" on main page */ + input:hover, + textarea:hover, + .ui.input input:hover, + .ui.form input:not([type]):hover, + .ui.form select:hover, + .ui.form textarea:hover, + .ui.form input[type="date"]:hover, + .ui.form input[type="datetime-local"]:hover, + .ui.form input[type="email"]:hover, + .ui.form input[type="file"]:hover, + .ui.form input[type="number"]:hover, + .ui.form input[type="password"]:hover, + .ui.form input[type="search"]:hover, + .ui.form input[type="tel"]:hover, + .ui.form input[type="text"]:hover, + .ui.form input[type="time"]:hover, + .ui.form input[type="url"]:hover, + .ui.selection.dropdown:hover, + .ui.checkbox label:hover:before, + .ui.checkbox label:active:before, + .ui.radio.checkbox label:after, + .ui.radio.checkbox input:focus ~ label:before, + .ui.radio.checkbox input:checked ~ label:before { + border-color: var(--color-secondary); + } + + a:hover, + a.muted:hover, + .ui.breadcrumb a:hover { + color: var(--color-blue); + } + + input:focus, + textarea:focus, + .ui.input input:focus, + .ui.form input:not([type]):focus, + .ui.form select:focus, + .ui.form textarea:focus, + .ui.form input[type="date"]:focus, + .ui.form input[type="datetime-local"]:focus, + .ui.form input[type="email"]:focus, + .ui.form input[type="file"]:focus, + .ui.form input[type="number"]:focus, + .ui.form input[type="password"]:focus, + .ui.form input[type="search"]:focus, + .ui.form input[type="tel"]:focus, + .ui.form input[type="text"]:focus, + .ui.form input[type="time"]:focus, + .ui.form input[type="url"]:focus, + .ui.selection.dropdown:focus, + .ui.checkbox input:focus ~ label:before, + .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before, + .ui.checkbox input:checked:focus ~ label:before, + .ui.radio.checkbox input:focus:checked ~ label:before { + border-color: var(--color-secondary); + } + + .repo-icon { + display: none; + } + + /* reduce navbar bottom margin */ + .ui.ui.ui.container:not(.fluid) { + margin-bottom: -3px; + } + + .ui.green.button { + padding: 5px 16px; + line-height: 20px; + } + + .ui.green.labels .label, + .ui.ui.ui.green.label { + padding: 5px 16px; + line-height: 20px; + } + + .ui.tabular.menu .active.item { + margin-bottom: 2px; + } + + /* repository icon for directories */ + .repository.file.list + #repo-files-table + tbody + .svg.octicon-file-directory-fill, + .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #768390; + } + + .ui.menu .item > .label:not(.floating) { + padding: 0 6px; + line-height: 18px; + } + + .ui.secondary.pointing.menu .item > .circular.label { + line-height: 10px; + } + + .ui.grey.labels .label, + .ui.ui.ui.grey.label { + line-height: 10px; + } + .ui.primary.label, + .ui.primary.labels .label { + background-color: #768390 !important; + } + + // timeline view icon color + .repository.view.issue .comment-list .timeline-item .badge .svg { + fill: #fff !important; + } + + /* borders -------------------------------------------------------------------*/ + + // border width of active item in repo view + .ui.tabular.menu .active.item, + .ui.tabular.menu .active.item:hover { + border-width: initial; + } + + // README border + .ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-width: inherit; + } + + .ui.top.attached.header { + border-width: inherit; + } + + .following.bar.light { + border-bottom: 0px solid var(--color-secondary); + } + + .ui.action.input:not([class*="left action"]) > input { + border-width: inherit; + } + + .ui.action.input > .dropdown:last-child, + .ui.action.input > .button:last-child, + .ui.action.input > .buttons:last-child > .button { + border-width: inherit; + } + + .ui.action.input:not([class*="left action"]) + > .ui.dropdown.selection:not(:focus):not(:hover) { + border-width: inherit; + } + + .repository #clone-panel #repo-clone-https, + .repository #clone-panel #repo-clone-ssh { + border-width: inherit; + } + + .ui.action.input > .dropdown:not(:first-child), + .ui.action.input > .button:not(:first-child), + .ui.action.input > .buttons:not(:first-child) > .button { + border-width: inherit; + } + + .ui.segment, + .ui.segments, + .ui.attached.segment { + border-width: inherit; + } + + .ui.table { + border-width: inherit; + } + + footer { + border-width: inherit; + } + + .page-content .ui.button { + border-width: inherit; + } + + .repo-buttons .ui.labeled.button > .label { + border-width: inherit; + } +} diff --git a/gitea-github-theme/theme-github-dark.css b/gitea-github-theme/theme-github-dark.css index 1b1f452..bb97c13 100755 --- a/gitea-github-theme/theme-github-dark.css +++ b/gitea-github-theme/theme-github-dark.css @@ -1,5 +1,6 @@ :root { - --color-primary: #2185d0; + --color-primary: #347d39; + --color-secondary: #535865; --border-radius: 6px; --color-body: #373e47; --color-navbar: #22272e; @@ -12,12 +13,21 @@ --color-light: #22272e; --color-button: #22272e; --color-input-background: #22272e; + --color-input-border-hover: #8e8c8c; --color-input-text: #adbac7; --color-box-header: #22272e; --color-active: #22272e; --color-menu: #22272e; - --color-secondary: #454a57; --color-caret: var(--color-text); + --is-dark-theme: true; + --color-blue: #539bf5; + --color-input-background: #22272e; + + /* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */ + /* monaco editor dark theme is toggled via variable `--is-dark-theme` */ + --color-primary-light-3: #71798e; + --color-editor-line-highlight: #71798e; + --color-code-bg: var(--color-input-background); } .ui.list .list > .item > .content, @@ -64,28 +74,33 @@ .ui.green.buttons .button, .ui.green.button { background-color: #347d39; - color: #fff !important; + color: #ffffffe6 !important; } + .repository.file.list #repo-files-table tbody .svg.octicon-file-directory, .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { color: #768390; } + a, .ui.breadcrumb a { /* color: var(--color-text); */ - color: #539bf5; + color: var(--color-blue); } + .repo-title a { - color: #539bf5 !important; + color: var(--color-blue) !important; } .ui.table > thead > tr > th { background: #636e7b1a; color: #dbdbdb !important; } + .repository.file.list #repo-files-table tr { background: #22272e; } + .repo-icon { display: inline-block; transform: scale(0.75); @@ -93,7 +108,7 @@ a, } .repository.file.list #file-buttons .ui.button { - color: #fff !important; + color: #ffffffe6 !important; } .ui.basic.green.button, @@ -104,24 +119,28 @@ a, box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important; color: #dbdbdb !important; } + .ui.basic.green.button:focus, .ui.basic.green.buttons .button:focus, .ui.basic.primary.button:focus, .ui.basic.primary.buttons .button:focus { box-shadow: inset 0 0 0 0px #808080 !important; } + .ui.basic.green.button:hover, .ui.basic.green.buttons .button:hover, .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:hover { background-color: #22272e !important; } + .ui.basic.green.button:hover, .ui.basic.green.buttons .button:hover, .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:hover { box-shadow: inset 0 0 0 0px #808080 !important; } + .issue.list { list-style: none; margin-top: 1rem; @@ -129,22 +148,28 @@ a, border-radius: 6px; padding: 3px 10px 3px 10px; } + .ui.menu .item { background-color: #22272e; } + .ui.horizontal.segments > .segment { background-color: #22272e; border-radius: 6px; } + .ui.attached.header { border-radius: 6px; } + .repository.file.list .repo-description { color: #adbac7; } + .commit-summary a.default-link { color: #adbac7 !important; } + .markup h1, .markup h2, .markup h3, @@ -153,10 +178,12 @@ a, .markup h6 { color: #adbac7; } + .markup code, .markup tt { color: #adbac7; } + .markup p, .markup blockquote, .markup details, @@ -167,32 +194,41 @@ a, .markup pre { color: #adbac7; } + .repo-list-link { - color: #539bf5 !important; + color: var(--color-blue) !important; } + .ui.menu.two.item .item { border: 1px solid var(--color-secondary); } + a, .push.news { color: null; } + .ui.header { color: #a6aab5; } + .repo-description { color: #a6aab5 !important; } + a.ui.label { /* color: #adbac7 !important; */ border-color: var(--color-secondary) !important; } + .ui.label { border-color: var(--color-secondary) !important; } + .ui.menu .item { color: #adbac7; } + .ui .sha.label { padding: 6px 10px 6px; } @@ -271,15 +307,11 @@ textarea, border-color: var(--color-secondary); } -/* right border of "find repository" field */ -.ui.action.input:not([class*="left action"]) > input { - border-right-color: var(--color-light); -} - /* background color of code display */ .lines-code { background-color: #22272e; } + .code-diff-unified .add-code, .code-diff-unified .add-code td, .code-diff-split .add-code .lines-num-new, @@ -290,6 +322,7 @@ textarea, .code-diff-split .del-code .add-code.lines-code-new { background: #224035; } + .tag-code, .tag-code td { background-color: var(--color-body); @@ -313,8 +346,9 @@ textarea, } .chroma .nb { - color: #539bf5; + color: var(--color-blue); } + .chroma .nx { color: var(--color-text); } @@ -322,24 +356,31 @@ textarea, .chroma .nv { color: #08dddd; } + .chroma .si { color: #8ddb8c; } + .chroma .nt { color: #50eb75; } + .chroma .nd { color: #c4cfcf; } + .chroma .o { color: #eb3243; } + .chroma .nc { color: #16e9e9; } + .chroma .nn { color: #16e9e9; } + .chroma .s { color: #8ddb8c; } @@ -355,7 +396,8 @@ textarea, } .repository.file.list #repo-files-table td a { - color: #7f8699 !important; + /* color: #7f8699 !important; */ + color: var(--color-blue) !important; } /* gpg commit label */ @@ -382,6 +424,7 @@ textarea, .ui.basic.label:not(.tag):not(.image):not(.ribbon) { color: #adbac7; } + .repo-buttons .ui.labeled.button.disabled > .label { color: #adbac7; } @@ -391,10 +434,12 @@ textarea, background-color: #22272e; color: var(--color-text); } + .ui.warning.message, .ui.attached.warning.message { box-shadow: null; } + .ui.warning.message, .ui.attached.warning.message { box-shadow: 0 0 0 0px #c9ba9b inset, 0 0 #0000; @@ -402,7 +447,7 @@ textarea, /* repo svg icons */ .repository.view.issue .comment-list .timeline-item .badge .svg { - fill: var(--color-text-light)!important; + fill: var(--color-text-light) !important; } /* background emoji reactions */ @@ -412,11 +457,12 @@ textarea, .ui.positive.message { background-color: #22272e; - color: #fff; + color: #ffffffe6; } + .ui.positive.message, .ui.attached.positive.message { - box-shadow: 0 0 0 1px #2c662d inset, 0 0 #0000; + box-shadow: 0 0 0 1px #347d39 inset, 0 0 #0000; } /* diff color deletion */ @@ -437,6 +483,7 @@ textarea, .lines-type-marker { background-color: var(--color-navbar); } + a.blob-excerpt { background: var(--color-body); } @@ -453,6 +500,7 @@ a.blob-excerpt { .ui.form .field .dropdown .menu > .item { background-color: var(--color-navbar); } + .comment-code-cloud { background-color: var(--color-navbar); } @@ -482,21 +530,28 @@ a.blob-excerpt { .user.profile .ui.card #profile-avatar { background: var(--color-navbar); } + .ui.cards > .card > .content, .ui.card > .content { background: var(--color-navbar); } + .user.profile .ui.card .extra.content ul li:not(:last-child) { border-bottom: 1px solid var(--color-secondary); background-color: var(--color-navbar); } + .user.profile .ui.card .extra.content ul li { background-color: var(--color-navbar); } /* right border of profile search bar */ .ui.action.input:not([class*="left action"]) > input { - border-right-color: var(--color-text); + border-right-color: var(--color-secondary); +} + +.ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: var(--color-secondary); } /* font color line numbers */ @@ -517,14 +572,17 @@ a.blob-excerpt { .ui .info.segment.top { background-color: var(--color-navbar) !important; } + .repository .ui.attached.isSigned.isVerified.top, .repository .ui.attached.isSigned.isVerified.message { border-top: 0px solid var(--color-text); } + .repository .ui.attached.isSigned.isVerified { border-left: 0px solid var(--color-text); border-right: 0px solid var(--color-text); } + .repository .ui.attached.isSigned.isVerified:last-child, .repository .ui.attached.isSigned.isVerified.bottom { border-bottom: 0px solid #a3c293; @@ -540,6 +598,7 @@ a.blob-excerpt { .repository.view.issue .comment-list .timeline-item .badge .svg { fill: black; } + .repository.view.issue .comment-list .timeline-item .badge { background-color: var(--color-navbar); color: var(--color-text); @@ -547,13 +606,16 @@ a.blob-excerpt { height: 30px; margin-left: -31px; } + .repository.view.issue .comment-list .timeline-item .badge.badge-commit { border-color: var(--color-navbar); background: var(--color-navbar); } + .repository.view.issue .comment-list .timeline:before { background-color: var(--color-secondary); } + .repository.view.issue .comment-list .timeline-item .badge .svg { width: 20px; height: 20px; @@ -568,43 +630,247 @@ input { background: #b70f22; color: var(--color-text); } + .added-code { background: #0d8b2c; color: var(--color-text); } /* review - pending label */ -.ui.basic.labels .yellow.label, .ui.ui.ui.basic.yellow.label { +.ui.basic.labels .yellow.label, +.ui.ui.ui.basic.yellow.label { background: var(--color-project-board-bg); color: #333 !important; } /* green checkmark background when approving PRs */ .bg-green { - background: var(--color-primary)!important; + background: var(--color-primary) !important; } + i.green.icon.icon.icon.icon { color: var(--color-primary); } + span.green .svg { color: var(--color-primary); } /* highlight color bg for highlighted lines */ -.lines-code.active, .lines-code .active { +.lines-code.active, +.lines-code .active { border-radius: 6px; - background: #000000!important; + background: #000000 !important; } -.ui.ui.ui.ui.table tr.active, .ui.ui.table td.active { + +.ui.ui.ui.ui.table tr.active, +.ui.ui.table td.active { box-shadow: 0 0 #000000de inset; - background: #E0E0E0; + background: #e0e0e0; color: --var(--color-text); } -.ui.cards > .card > :first-child, .ui.card > :first-child { - border-radius: 0; +/* navbar font size */ +.ui.secondary.menu .item { + font-size: 13px; } -.ui.cards > .card, .ui.card { - border: 0; +#navbar .item { + margin: 0; + padding: 0.5em; + font-size: 14px; +} + +.following.bar #navbar { + width: 100vw; + /* default 52px */ + min-height: 40px; + padding: 0 0.5rem; +} + +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px var(--color-navbar); +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px var(--color-text); +} + +.following.bar #navbar .brand { + margin-top: -2px; +} + +/* border colors of search fields, e.g. "find repository" on main page */ +input:hover, +textarea:hover, +.ui.input input:hover, +.ui.form input:not([type]):hover, +.ui.form select:hover, +.ui.form textarea:hover, +.ui.form input[type="date"]:hover, +.ui.form input[type="datetime-local"]:hover, +.ui.form input[type="email"]:hover, +.ui.form input[type="file"]:hover, +.ui.form input[type="number"]:hover, +.ui.form input[type="password"]:hover, +.ui.form input[type="search"]:hover, +.ui.form input[type="tel"]:hover, +.ui.form input[type="text"]:hover, +.ui.form input[type="time"]:hover, +.ui.form input[type="url"]:hover, +.ui.selection.dropdown:hover, +.ui.checkbox label:hover:before, +.ui.checkbox label:active:before, +.ui.radio.checkbox label:after, +.ui.radio.checkbox input:focus ~ label:before, +.ui.radio.checkbox input:checked ~ label:before { + border-color: var(--color-secondary); +} + +a:hover, +a.muted:hover, +.ui.breadcrumb a:hover { + color: var(--color-blue); +} + +input:focus, +textarea:focus, +.ui.input input:focus, +.ui.form input:not([type]):focus, +.ui.form select:focus, +.ui.form textarea:focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="file"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="url"]:focus, +.ui.selection.dropdown:focus, +.ui.checkbox input:focus ~ label:before, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before, +.ui.checkbox input:checked:focus ~ label:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + border-color: var(--color-secondary); +} + +.repo-icon { + display: none; +} + +/* reduce navbar bottom margin */ +.ui.ui.ui.container:not(.fluid) { + margin-bottom: -3px; +} + +.ui.green.button { + padding: 5px 16px; + line-height: 20px; +} + +.ui.green.labels .label, +.ui.ui.ui.green.label { + padding: 5px 16px; + line-height: 20px; +} + +.ui.tabular.menu .active.item { + margin-bottom: 2px; +} + +/* repository icon for directories */ +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, +.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #768390; +} + +.ui.secondary.pointing.menu .item > .circular.label { + line-height: 10px; +} + +.ui.grey.labels .label, +.ui.ui.ui.grey.label { + line-height: 10px; +} + +.ui.primary.label, +.ui.primary.labels .label { + background-color: #768390 !important; +} + +// timeline view icon color +.repository.view.issue .comment-list .timeline-item .badge .svg { + fill: #fff !important; +} + +/* borders -------------------------------------------------------------------*/ + +// border width of active item in repo view +.ui.tabular.menu .active.item, +.ui.tabular.menu .active.item:hover { + border-width: initial; +} + +// README border +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-width: inherit; +} + +.ui.top.attached.header { + border-width: inherit; +} + +.following.bar.light { + border-bottom: 0px solid var(--color-secondary); +} + +.ui.action.input:not([class*="left action"]) > input { + border-width: inherit; +} + +.ui.action.input > .dropdown:last-child, +.ui.action.input > .button:last-child, +.ui.action.input > .buttons:last-child > .button { + border-width: inherit; +} + +.ui.action.input:not([class*="left action"]) + > .ui.dropdown.selection:not(:focus):not(:hover) { + border-width: inherit; +} + +.repository #clone-panel #repo-clone-https, +.repository #clone-panel #repo-clone-ssh { + border-width: inherit; +} + +.ui.action.input > .dropdown:not(:first-child), +.ui.action.input > .button:not(:first-child), +.ui.action.input > .buttons:not(:first-child) > .button { + border-width: inherit; +} + +.ui.segment, +.ui.segments, +.ui.attached.segment { + border-width: inherit; +} + +.ui.table { + border-width: inherit; +} + +footer { + border-width: inherit; +} + +.page-content .ui.button { + border-width: inherit; +} + +.repo-buttons .ui.labeled.button > .label { + border-width: inherit; } diff --git a/gitea-github-theme/theme-github.css b/gitea-github-theme/theme-github.css index 72c2604..fdf4ce3 100644 --- a/gitea-github-theme/theme-github.css +++ b/gitea-github-theme/theme-github.css @@ -6,6 +6,7 @@ --color-markup-code-block: #f6f8fa; --color-hover: none; --color-purple: #8250df; + --color-green: #1a7f37; } .ui.label { padding: 0.3em 0.5em; @@ -36,12 +37,12 @@ } .ui.green.buttons .button, .ui.green.button { - background-color: #2da44e; + background-color: #1a7f37; color: #fff !important; } .ui.green.labels .label, .ui.ui.ui.green.label { - background-color: #2da44e; + background-color: #1a7f37; color: #fff !important; } .ui.label { @@ -59,10 +60,6 @@ .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { color: #54aeff; } -a, -.ui.breadcrumb a { - color: var(--color-text) !important; -} .repo-title a { color: var(--color-primary) !important; } @@ -135,6 +132,7 @@ a.muted:hover, .ui.basic.red.buttons .button, .ui.basic.red.button { color: #cf222e !important; + font-weight: 500; } * { scrollbar-width: thin; @@ -166,27 +164,40 @@ a.ui.label { } .ui.basic.green.buttons .button, .ui.basic.green.button { - color: #2da44e !important; + color: #1a7f37 !important; } .ui.basic.labels .label, .ui.basic.label { color: var(--color-text) !important; } -.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { - border-left: 1px solid #2da44e; - color: #2da44e; +.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerified .detail.icon, +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified + .detail.icon { + border-left: 1px solid #1a7f37; + color: #1a7f37; } -.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified { - border: 1px solid #2da44e; +.repository.view.issue + .comment-list + .timeline-item.commits-list + .singular-commit + .shabox + .sha.label.isSigned.isVerified { + border: 1px solid #1a7f37; } -.ui.labeled.icon.buttons>.button>.icon, .ui.labeled.icon.button>.icon { +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { border-right: 1px solid var(--color-secondary); } -.ui.buttons:not(.basic):not(.inverted)>.button:not(.basic):not(.inverted) { +.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { border-left: 1px solid var(--color-secondary); } @@ -194,10 +205,12 @@ a.ui.label { .repository .ui.attached.isSigned.isVerified.message .ui.text { color: black; } -.repository .ui.attached.isSigned.isVerified:last-child, .repository .ui.attached.isSigned.isVerified.bottom { +.repository .ui.attached.isSigned.isVerified:last-child, +.repository .ui.attached.isSigned.isVerified.bottom { border-bottom: 1px solid #21ba45; } -.repository .ui.attached.isSigned.isVerified.top, .repository .ui.attached.isSigned.isVerified.message { +.repository .ui.attached.isSigned.isVerified.top, +.repository .ui.attached.isSigned.isVerified.message { border-top: 1px solid var(--color-secondary); } .repository .ui.attached.isSigned.isVerified { @@ -212,5 +225,182 @@ a.ui.label { /* bg color of commit info box */ .ui .info.segment.top { - background-color: var(--color-navbar)!important; + background-color: var(--color-navbar) !important; +} + +.repo-icon { + display: none; +} + +/* navbar font size */ +.ui.secondary.menu .item { + font-size: 13px; +} + +#navbar .item { + margin: 0; + padding: 0.5em; + font-size: 14px; + color: black !important; +} + +.following.bar #navbar { + width: 100vw; + /* default 52px */ + min-height: 40px; + padding: 0 0.5rem; +} + +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px var(--color-navbar); +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px var(--color-text); +} + +.following.bar #navbar .brand { + margin-top: -2px; +} + +/* reduce navbar bottom margin */ +.ui.ui.ui.container:not(.fluid) { + margin-bottom: -3px; +} + +/* Link color for repo breadcrumbs */ +a, +.ui.breadcrumb a { + color: var(--color-primary) !important; +} + +/* color for repo menu bar to overwrite link color */ +.ui.tabular.menu .item { + color: var(--color-text) !important; +} + +.repository .ui.segment.sub-menu .list .item a { + color: var(--color-text) !important; +} + +.ui .menu:not(.vertical) .item > .button.compact { + color: var(--color-text) !important; +} + +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: var(--color-text-light) !important; +} + +#manage_topic { + font-size: 12px; + color: var(--color-text) !important; +} + +.ui.menu .item { + color: var(--color-text) !important; +} + +/* font weight of "danger zone" buttons in "delete repo" */ + +.ui.label { + background: rgba(175, 184, 193, 0.2); +} + +.comment-header .actions a { + color: black !important; +} + +.ui.dropdown > .text { + color: black !important; +} + +.repository.compare.pull .choose.branch .svg { + color: black !important; +} + +a.muted { + color: black !important; +} + +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, +.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #54aeff !important; +} + +.repository.file.list #repo-files-table td a { + color: black !important; +} + +.ui.negative.buttons .button, +.ui.negative.button { + background-color: none; + color: #fff; +} + +.ui.green.button { + padding: 5px 16px; + line-height: 20px; +} + +.ui.green.labels .label, +.ui.ui.ui.green.label { + padding: 5px 16px; + line-height: 20px; +} + +.ui.tabular.menu .active.item { + margin-bottom: 2px; +} + +.ui.menu .item > .label:not(.floating) { + padding: 0 6px; + line-height: 18px; +} + +.ui.secondary.pointing.menu .item > .circular.label { + line-height: 10px; +} + +.ui.grey.labels .label, +.ui.ui.ui.grey.label { + line-height: 10px; +} + +/* yes/no dialog buttons for repo archival */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + color: #f9fafb !important; +} + +// border color of SSH/https cloning buttons (non-focused) +.ui.basic.blue.button, +.ui.basic.blue.buttons .button, +.ui.basic.primary.button, +.ui.basic.primary.buttons .button { + box-shadow: inset 0 0 0 1px transparent !important; +} + +// same for hover +ui.basic.blue.button:hover, +.ui.basic.blue.buttons .button:hover, +.ui.basic.primary.button:hover, +.ui.basic.primary.buttons .button:hover { + box-shadow: inset 0 0 0 0px transparent !important; +} + +// background color of branch name in PRs +.issue.list .branches .branch { + background-color: #afb8c133; + border-radius: 6px; +} + +// branch display in PRs +.issue.list .branches .branch { + background-color: #afb8c133; + border-radius: 6px; +} +.issue.list .branches .truncated-name { + color: #24292f; + padding: 2px; }