diff --git a/README.md b/README.md index 6f6ccc6..ddd5f54 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,22 @@ # gitea-github-theme An opinionated GitHub-based theme for Gitea + +Created and tested with Gitea v1.15. +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 +2. If you are an admin and want to make this theme available to all users: + 1. Put `theme-github.css` into `$GITEA_PUBLIC/public/css/theme-github.css` where `$GITEA_PUBLIC` is the "CustomPath" of your instance reported by `gitea help`. + 2. Add `github` to the comma-separated list in the setting `THEMES` in `app.ini` + 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` + +## 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 diff --git a/theme-github.css b/theme-github.css new file mode 100644 index 0000000..013b944 --- /dev/null +++ b/theme-github.css @@ -0,0 +1,159 @@ +:root { + --border-radius: 6px; + --color-primary: #0969da; + --color-navbar: #f6f8fa; + --color-active: #f6f8fa; + --color-markup-code-block: #f6f8fa; + --color-hover: none; + --color-purple: #8250df; +} +.ui.label { + padding: .3em .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: #2da44e; + color: #fff!important +} +.ui.green.labels .label, +.ui.ui.ui.green.label { + background-color: #2da44e; + color: #fff!important +} +.ui.label { + padding: .5em .5em; +} +.ui.basic.green.buttons .button, +.ui.basic.green.button { + color: #2da44e; +} +.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, .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; +} +* { +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; +}